• 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}
42
43/* If the options page is loading don't do the transition. */
44.loading .overlay,
45.loading .overlay .page {
46  -webkit-transition-duration: 0 !important;
47}
48
49/* keyframes used to pulse the overlay */
50@-webkit-keyframes pulse {
51 0% {
52   -webkit-transform: scale(1);
53 }
54 40% {
55   -webkit-transform: scale(1.02);
56  }
57 60% {
58   -webkit-transform: scale(1.02);
59  }
60 100% {
61   -webkit-transform: scale(1);
62 }
63}
64
65.overlay .page.pulse {
66  -webkit-animation-duration: 180ms;
67  -webkit-animation-iteration-count: 1;
68  -webkit-animation-name: pulse;
69  -webkit-animation-timing-function: ease-in-out;
70}
71
72.overlay .page > .close-button {
73  background-image: url('chrome://resources/images/x.png');
74  background-position: center;
75  background-repeat: no-repeat;
76  height: 24px;
77  position: absolute;
78  right: 10px;
79  top: 10px;
80  width: 24px;
81}
82
83html[dir='rtl'] .overlay .page > .close-button {
84  left: 10px;
85  right: auto;
86}
87
88.overlay .page > .close-button:hover {
89  background-image: url('chrome://resources/images/x-hover.png');
90}
91
92.overlay .page h1 {
93  -webkit-padding-end: 24px;
94  -webkit-user-select: none;
95  color: #333;
96  /* 120% of the body's font-size of 84% is 16px. This will keep the relative
97   * size between the body and these titles consistent. */
98  font-size: 120%;
99  /* TODO(flackr): Pages like sync-setup and delete user collapse the margin
100   * above the top of the page. Use padding instead to make sure that the
101   * headers of these pages have the correct spacing, but this should not be
102   * necessary. See http://crbug.com/119029. */
103  margin: 0;
104  padding: 14px 17px 14px;
105  text-shadow: white 0 1px 2px;
106}
107
108.overlay .page .content-area {
109  -webkit-box-flex: 1;
110  overflow: auto;
111  padding: 6px 17px 6px;
112}
113
114.overlay .page .action-area {
115  -webkit-box-align: center;
116  -webkit-box-orient: horizontal;
117  -webkit-box-pack: end;
118  display: -webkit-box;
119  padding: 14px;
120}
121
122html[dir='rtl'] .overlay .page .action-area {
123  left: 0;
124}
125
126.overlay .page .action-area-right {
127  display: -webkit-box;
128}
129
130.overlay .page .button-strip {
131  -webkit-box-orient: horizontal;
132  display: -webkit-box;
133}
134
135.overlay .page .button-strip > button {
136  -webkit-margin-start: 10px;
137  display: block;
138}
139