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