sync

ui/webui/resources/css/dialog_overlay.css

Index: ui/webui/resources/css/dialog_overlay.css
diff --git a/ui/webui/resources/css/overlay.css b/ui/webui/resources/css/dialog_overlay.css
similarity index 61%
copy from ui/webui/resources/css/overlay.css
copy to ui/webui/resources/css/dialog_overlay.css
index 5bf914cff5200440e57b54ba00f25d758b5a41ae..79a6380fe949aaedd73d556612ea4337327cb775 100644
--- a/ui/webui/resources/css/overlay.css
+++ b/ui/webui/resources/css/dialog_overlay.css
@@ -2,49 +2,82 @@
  * 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;
+dialog {
+  /* TODO(falken): <dialog> should have this in the UA stylesheet. */
+  width: -webkit-fit-content;
+}
+
+.overlay-container .page {
+  -webkit-border-radius: 3px;
   -webkit-box-orient: vertical;
-  -webkit-box-pack: center;
-  -webkit-transition: 200ms opacity;
+  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;
+  min-width: 400px;
+  padding: 0;
+  position: relative;
+  z-index: 0;
+}
+
+.overlay-container .page[open] {
+  display: -webkit-box;
+}
+
+.overlay-container .page::backdrop {
   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;
 }
 
-/* Used to slide in the overlay. */
-.overlay.transparent .page {
+.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;
 }
 
-/* The foreground dialog. */
-.overlay .page {
-  -webkit-border-radius: 3px;
-  -webkit-box-orient: vertical;
-  -webkit-transition: 200ms -webkit-transform;
-  background: white;
-  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;
+.overlay-container .page.closing::backdrop {
+  -webkit-animation: backdrop-out 200ms;
+  opacity: 0;
 }
 
-/* If the options page is loading don't do the transition. */
-.loading .overlay,
-.loading .overlay .page {
-  -webkit-transition-duration: 0 !important;
+@-webkit-keyframes dialog-out {
+  0% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes backdrop-out {
+  0% {
+    opacity: 1;
+  }
 }
 
 /* keyframes used to pulse the overlay */
@@ -63,14 +96,14 @@
  }
 }
 
-.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;
@@ -82,20 +115,20 @@
   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;
@@ -111,14 +144,14 @@ html[dir='rtl'] .overlay .page > .close-button {
   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;
@@ -126,44 +159,44 @@ html[dir='rtl'] .overlay .page > .close-button {
   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>