sync

ui/webui/resources/css/dialog_overlay.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-/* The shield that overlays the background. */
-.overlay {
-  -webkit-box-align: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-pack: center;
-  -webkit-transition: 200ms opacity;
-  background-color: rgba(255, 255, 255, 0.75);
-  bottom: 0;
-  display: -webkit-box;
-  left: 0;
-  overflow: auto;
-  padding: 20px;
-  position: fixed;
-  right: 0;
-  top: 0;
+dialog {
+  /* TODO(falken): <dialog> should have this in the UA stylesheet. */
+  width: -webkit-fit-content;
 }
 
-/* Used to slide in the overlay. */
-.overlay.transparent .page {
-  /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated
-   * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */
-  -webkit-transform: scale(0.99) translateY(-20px);
-}
-
-/* The foreground dialog. */
-.overlay .page {
+.overlay-container .page {
   -webkit-border-radius: 3px;
   -webkit-box-orient: vertical;
-  -webkit-transition: 200ms -webkit-transform;
   background: white;
+  border: 0;
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
   color: #333;
-  display: -webkit-box;
   min-width: 400px;
   padding: 0;
   position: relative;
   z-index: 0;
 }
 
-/* If the options page is loading don't do the transition. */
-.loading .overlay,
-.loading .overlay .page {
-  -webkit-transition-duration: 0 !important;
+.overlay-container .page[open] {
+  display: -webkit-box;
+}
+
+.overlay-container .page::backdrop {
+  background-color: rgba(255, 255, 255, 0.75);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.overlay-container .page.opening {
+  -webkit-animation: dialog-in 200ms;
+}
+
+.overlay-container .page.opening::backdrop {
+  -webkit-animation: backdrop-in 200ms;
+}
+
+/* Used to slide in the dialog. */
+@-webkit-keyframes dialog-in {
+  /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated
+   * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */
+  0% {
+    -webkit-transform: scale(0.99) translateY(-20px);
+    opacity: 0;
+  }
+}
+
+@-webkit-keyframes backdrop-in {
+  0% {
+    opacity: 0;
+  }
+}
+
+.overlay-container .page.closing {
+  -webkit-animation: dialog-out 200ms;
+  -webkit-transform: scale(0.99) translateY(-20px);
+  opacity: 0;
+}
+
+.overlay-container .page.closing::backdrop {
+  -webkit-animation: backdrop-out 200ms;
+  opacity: 0;
+}
+
+@-webkit-keyframes dialog-out {
+  0% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes backdrop-out {
+  0% {
+    opacity: 1;
+  }
 }
 
 /* keyframes used to pulse the overlay */
 @-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  40% {
    -webkit-transform: scale(1.02);
   }
  60% {
    -webkit-transform: scale(1.02);
   }
  100% {
    -webkit-transform: scale(1);
  }
 }
 
-.overlay .page.pulse {
+.overlay-container .page.pulse {
   -webkit-animation-duration: 180ms;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-name: pulse;
   -webkit-animation-timing-function: ease-in-out;
 }
 
-.overlay .page > .close-button {
+.overlay-container .page > .close-button {
   background-image: url('chrome://theme/IDR_CLOSE_DIALOG');
   background-position: center;
   background-repeat: no-repeat;
   height: 14px;
   position: absolute;
   right: 7px;
   top: 7px;
   width: 14px;
   z-index: 1;
 }
 
-html[dir='rtl'] .overlay .page > .close-button {
+html[dir='rtl'] .overlay-container .page > .close-button {
   left: 10px;
   right: auto;
 }
 
-.overlay .page > .close-button:hover {
+.overlay-container .page > .close-button:hover {
   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H');
 }
 
-.overlay .page > .close-button:active {
+.overlay-container .page > .close-button:active {
   background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P');
 }
 
-.overlay .page h1 {
+.overlay-container .page h1 {
   -webkit-padding-end: 24px;
   -webkit-user-select: none;
   color: #333;
   /* 120% of the body's font-size of 84% is 16px. This will keep the relative
    * size between the body and these titles consistent. */
   font-size: 120%;
   /* TODO(flackr): Pages like sync-setup and delete user collapse the margin
    * above the top of the page. Use padding instead to make sure that the
    * headers of these pages have the correct spacing, but this should not be
    * necessary. See http://crbug.com/119029. */
   margin: 0;
   padding: 14px 17px 14px;
   text-shadow: white 0 1px 2px;
 }
 
-.overlay .page .content-area {
+.overlay-container .page .content-area {
   -webkit-box-flex: 1;
   overflow: auto;
   padding: 6px 17px 6px;
   position: relative;
 }
 
-.overlay .page .action-area {
+.overlay-container .page .action-area {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
   padding: 14px 17px;
 }
 
-html[dir='rtl'] .overlay .page .action-area {
+html[dir='rtl'] .overlay-container .page .action-area {
   left: 0;
 }
 
-.overlay .page .action-area-right {
+.overlay-container .page .action-area-right {
   display: -webkit-box;
 }
 
-.overlay .page .button-strip {
+.overlay-container .page .button-strip {
   -webkit-box-orient: horizontal;
   display: -webkit-box;
 }
 
-.overlay .page .button-strip > button {
+.overlay-container .page .button-strip > button {
   -webkit-margin-start: 10px;
   display: block;
 }
 
-.overlay .page .button-strip > .default-button:not(:focus) {
+.overlay-container .page .button-strip > .default-button:not(:focus) {
   border-color: rgba(0, 0, 0, 0.5);
 }
 
 /* On OSX 10.7, hidden scrollbars may prevent the user from realizing that the
- * overlay contains scrollable content. To resolve this, style the scrollbars on
- * OSX so they are always visible. See http://crbug.com/123010. */
+ *.overlay-container contains scrollable content. To resolve this, style the
+ * scrollbars on OSX so they are always visible. See http://crbug.com/123010. */
 <if expr="is_macosx or is_ios">
-.overlay .page .content-area::-webkit-scrollbar {
+.overlay-container .page .content-area::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 11px;
 }
 
-.overlay .page .content-area::-webkit-scrollbar-thumb {
+.overlay-container .page .content-area::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.2);
   border: 2px solid white;
   border-radius: 8px;
 }
 
-.overlay .page .content-area::-webkit-scrollbar-thumb:hover {
+.overlay-container .page .content-area::-webkit-scrollbar-thumb:hover {
   background-color: rgba(0, 0, 0, 0.5);
 }
 </if>
 
 .gray-bottom-bar {
   background-color: #f5f5f5;
   border-color: #e7e7e7;
   border-top-style: solid;
   border-width: 1px;
   color: #888;
   display: -webkit-box;
   padding: 14px 17px;
 }