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