1/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. */ 4 5/* The shield that overlays the background. */ 6.overlay { 7 -webkit-box-align: center; 8 -webkit-box-orient: vertical; 9 -webkit-box-pack: center; 10 /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */ 11 -webkit-perspective: 1px; 12 -webkit-transition: 200ms opacity; 13 background-color: rgba(255, 255, 255, 0.75); 14 bottom: 0; 15 display: -webkit-box; 16 left: 0; 17 overflow: auto; 18 padding: 20px; 19 position: fixed; 20 right: 0; 21 top: 0; 22} 23 24/* Used to slide in the overlay. */ 25.overlay.transparent .page { 26 /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated 27 * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */ 28 -webkit-transform: scale(0.99) translateY(-20px); 29} 30 31/* The foreground dialog. */ 32.overlay .page { 33 -webkit-border-radius: 3px; 34 -webkit-box-orient: vertical; 35 -webkit-transition: 200ms -webkit-transform; 36 background: white; 37 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); 38 color: #333; 39 display: -webkit-box; 40 min-width: 400px; 41 padding: 0; 42 position: relative; 43 z-index: 0; 44} 45 46/* If the options page is loading don't do the transition. */ 47.loading .overlay, 48.loading .overlay .page { 49 -webkit-transition-duration: 0 !important; 50} 51 52/* keyframes used to pulse the overlay */ 53@-webkit-keyframes pulse { 54 0% { 55 -webkit-transform: scale(1); 56 } 57 40% { 58 -webkit-transform: scale(1.02); 59 } 60 60% { 61 -webkit-transform: scale(1.02); 62 } 63 100% { 64 -webkit-transform: scale(1); 65 } 66} 67 68.overlay .page.pulse { 69 -webkit-animation-duration: 180ms; 70 -webkit-animation-iteration-count: 1; 71 -webkit-animation-name: pulse; 72 -webkit-animation-timing-function: ease-in-out; 73} 74 75.overlay .page > .close-button { 76 background-image: url('chrome://theme/IDR_CLOSE_DIALOG'); 77 background-position: center; 78 background-repeat: no-repeat; 79 height: 14px; 80 position: absolute; 81 right: 7px; 82 top: 7px; 83 width: 14px; 84 z-index: 1; 85} 86 87html[dir='rtl'] .overlay .page > .close-button { 88 left: 10px; 89 right: auto; 90} 91 92.overlay .page > .close-button:hover { 93 background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H'); 94} 95 96.overlay .page > .close-button:active { 97 background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P'); 98} 99 100.overlay .page h1 { 101 -webkit-padding-end: 24px; 102 -webkit-user-select: none; 103 color: #333; 104 /* 120% of the body's font-size of 84% is 16px. This will keep the relative 105 * size between the body and these titles consistent. */ 106 font-size: 120%; 107 /* TODO(flackr): Pages like sync-setup and delete user collapse the margin 108 * above the top of the page. Use padding instead to make sure that the 109 * headers of these pages have the correct spacing, but this should not be 110 * necessary. See http://crbug.com/119029. */ 111 margin: 0; 112 padding: 14px 17px 14px; 113 text-shadow: white 0 1px 2px; 114} 115 116.overlay .page .content-area { 117 -webkit-box-flex: 1; 118 overflow: auto; 119 padding: 6px 17px 6px; 120 position: relative; 121} 122 123.overlay .page .action-area { 124 -webkit-box-align: center; 125 -webkit-box-orient: horizontal; 126 -webkit-box-pack: end; 127 display: -webkit-box; 128 padding: 14px 17px; 129} 130 131html[dir='rtl'] .overlay .page .action-area { 132 left: 0; 133} 134 135.overlay .page .action-area-right { 136 display: -webkit-box; 137} 138 139.overlay .page .button-strip { 140 -webkit-box-orient: horizontal; 141 display: -webkit-box; 142} 143 144.overlay .page .button-strip > button { 145 -webkit-margin-start: 10px; 146 display: block; 147} 148 149.overlay .page .button-strip > .default-button:not(:focus) { 150 border-color: rgba(0, 0, 0, 0.5); 151} 152 153/* On OSX 10.7, hidden scrollbars may prevent the user from realizing that the 154 * overlay contains scrollable content. To resolve this, style the scrollbars on 155 * OSX so they are always visible. See http://crbug.com/123010. */ 156<if expr="is_macosx or is_ios"> 157.overlay .page .content-area::-webkit-scrollbar { 158 -webkit-appearance: none; 159 width: 11px; 160} 161 162.overlay .page .content-area::-webkit-scrollbar-thumb { 163 background-color: rgba(0, 0, 0, 0.2); 164 border: 2px solid white; 165 border-radius: 8px; 166} 167 168.overlay .page .content-area::-webkit-scrollbar-thumb:hover { 169 background-color: rgba(0, 0, 0, 0.5); 170} 171</if> 172 173.gray-bottom-bar { 174 background-color: #f5f5f5; 175 border-color: #e7e7e7; 176 border-top-style: solid; 177 border-width: 1px; 178 color: #888; 179 display: -webkit-box; 180 padding: 14px 17px; 181} 182 183/* Prevent the page underneath the overlay from scrolling. */ 184.frozen { 185 position: fixed; 186} 187 188#overlay-container-1 { 189 z-index: 11; 190} 191#overlay-container-2 { 192 z-index: 12; 193} 194 195.transparent { 196 opacity: 0; 197} 198