| /* 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; |
| /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */ |
| -webkit-perspective: 1px; |
| -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; |
| } |
| |
| /* 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. */ |
| transform: scale(0.99) translateY(-20px); |
| } |
| |
| /* The foreground dialog. */ |
| .overlay .page { |
| -webkit-border-radius: 3px; |
| -webkit-box-orient: vertical; |
| -webkit-transition: 200ms 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; |
| } |
| |
| /* If the options page is loading don't do the transition. */ |
| .loading .overlay, |
| .loading .overlay .page { |
| -webkit-transition-duration: 0ms !important; |
| } |
| |
| /* keyframes used to pulse the overlay */ |
| @-webkit-keyframes pulse { |
| 0% { |
| transform: scale(1); |
| } |
| 40% { |
| transform: scale(1.02); |
| } |
| 60% { |
| transform: scale(1.02); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| |
| .overlay .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 { |
| 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 { |
| left: 10px; |
| right: auto; |
| } |
| |
| .overlay .page > .close-button:hover { |
| background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H); |
| } |
| |
| .overlay .page > .close-button:active { |
| background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P); |
| } |
| |
| .overlay .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 { |
| -webkit-box-flex: 1; |
| overflow: auto; |
| padding: 6px 17px 6px; |
| position: relative; |
| } |
| |
| .overlay .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 { |
| left: 0; |
| } |
| |
| .overlay .page .action-area-right { |
| display: -webkit-box; |
| } |
| |
| .overlay .page .button-strip { |
| -webkit-box-orient: horizontal; |
| display: -webkit-box; |
| } |
| |
| .overlay .page .button-strip > :-webkit-any(button, |
| input[type='button'], |
| input[type='submit']) { |
| -webkit-margin-start: 10px; |
| display: block; |
| } |
| |
| .overlay .page .button-strip > .default-button:not(:focus) { |
| border-color: rgba(0, 0, 0, 0.5); |
| } |
| |
| .overlay .page .spacer-div { |
| -webkit-box-flex: 1; |
| } |
| |
| /* 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. */ |
| <if expr="is_macosx or is_ios"> |
| .overlay .page .content-area::-webkit-scrollbar { |
| -webkit-appearance: none; |
| width: 11px; |
| } |
| |
| .overlay .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 { |
| background-color: rgba(0, 0, 0, 0.5); |
| } |
| </if> |
| |
| .gray-bottom-bar { |
| background-color: #f5f5f5; |
| border-bottom-left-radius: inherit; |
| border-bottom-right-radius: inherit; |
| border-color: #e7e7e7; |
| border-top-style: solid; |
| border-width: 1px; |
| color: #888; |
| display: -webkit-box; |
| padding: 14px 17px; |
| } |
| |
| /* Prevent the page underneath the overlay from scrolling. */ |
| .frozen { |
| position: fixed; |
| } |
| |
| #overlay-container-1 { |
| z-index: 11; |
| } |
| #overlay-container-2 { |
| z-index: 12; |
| } |
| |
| .transparent { |
| opacity: 0; |
| } |