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
5html {
6  height: 100%;
7  overflow: hidden;
8}
9
10body {
11  display: -webkit-box;
12  height: 100%;
13  margin: 0;
14}
15
16/* Header */
17
18header {
19  -webkit-padding-end: 19px;
20  -webkit-padding-start: 20px;
21  background-color: #F6F6F6;
22  border-bottom: 1px solid #d2d2d2;
23}
24
25#print-preview #navbar-container {
26  -webkit-border-end: 1px solid #c8c8c8;
27  -webkit-box-orient: vertical;
28  -webkit-user-select: none;
29  background-color: white;
30  display: -webkit-box;
31  position: relative;
32  width: 310px;
33  z-index: 2;
34}
35
36#navbar-content-title {
37  color: black;
38  font-size: 15px;
39  font-weight: normal;
40  margin: 0;
41  padding-bottom: 6px;
42  padding-top: 16px;
43}
44
45#navbar-scroll-container {
46  -webkit-box-flex: 1;
47  background: #fbfbfb;
48  border-top: 1px solid #f3f3f3;
49  overflow-y: auto;
50  padding-top: 2px;
51}
52
53/* Settings */
54
55.two-column {
56  display: table-row;
57}
58
59.right-column {
60  -webkit-padding-end: 20px;
61  display: table-cell;
62  width: auto;
63}
64
65.right-column .checkbox,
66.right-column .radio {
67  margin: 0;
68}
69
70.right-column .checkbox label,
71.right-column .radio label {
72  padding-bottom: 5px;
73  padding-top: 10px;
74}
75
76.right-column .radio input[type='radio'] {
77  height: 13px;
78  width: 13px;
79}
80
81.two-column h1 {
82  -webkit-padding-end: 20px;
83  -webkit-padding-start: 20px;
84  color: #646464;
85  display: table-cell;
86  font-size: 12px;
87  min-width: 70px;
88}
89
90.two-column.visible h1,
91.two-column.visible .right-column {
92  border-bottom: 1px solid #e9e9e9;
93  padding-bottom: 7px;
94  padding-top: 7px;
95}
96
97.two-column:not(.visible) select {
98  border-top-width: 0;
99  margin-top: 0;
100  padding-top: 0;
101}
102
103p {
104  -webkit-line-box-contain: block;
105  margin: 0;
106  margin-bottom: 10px;
107}
108
109h1 {
110  color: #808080;
111  font-weight: 300;
112}
113
114#print-preview .navbar-link {
115  -webkit-margin-start: 20px;
116  height: 29px;
117  outline: 0;
118  padding: 0;
119  text-align: start;
120  text-decoration: none;
121}
122
123#print-preview .navbar-link:hover:not(:disabled) {
124  text-decoration: underline;
125}
126
127#print-preview .navbar-link:disabled {
128  color: rgba(0, 0, 0, .5);
129  cursor: default;
130  text-shadow: none;
131}
132
133button.loading {
134  cursor: progress;
135}
136
137#print-preview button.default {
138  font-weight: bold;
139}
140
141#print-preview button.default:not(:focus):not(:disabled) {
142  border-color: #808080;
143}
144
145span.hint {
146  -webkit-transition: color 200ms;
147  background: white;
148  display: block;
149  font-size: 0.9em;
150  font-weight: bold;
151  height: 0;
152  line-height: 10px;
153  margin: 0;
154  overflow: hidden;
155}
156
157span.hint.visible {
158  -webkit-animation-duration: 200ms;
159  -webkit-animation-fill-mode: forwards;
160  -webkit-user-select: text;
161  color: rgb(140, 20, 20);
162  height: auto;
163  margin-bottom: -5px;
164  margin-top: 5px;
165  padding-bottom: 5px;
166}
167
168span.hint.closing {
169  -webkit-transition: margin 150ms, height 150ms, opacity 150ms;
170  background: transparent;
171  height: 0 !important;
172  margin: 0;
173  opacity: 0;
174}
175
176.collapsible {
177  height: 0;
178}
179
180.collapsible.visible {
181  -webkit-animation-duration: 200ms;
182  -webkit-animation-fill-mode: forwards;
183  height: auto;
184}
185
186.collapsible.closing {
187  -webkit-transition: margin 150ms, height 150ms, opacity 150ms;
188  height: 0 !important;
189  opacity: 0;
190  overflow: hidden;
191}
192
193select {
194  width: 100%;
195}
196
197label {
198  -webkit-user-select: none;
199}
200
201.hidden-section {
202  background: white;
203  position: relative;
204}
205
206.extra {
207  background: white;
208  height: 0;
209  opacity: 0;
210  padding-top: 0;
211  position: absolute;
212  visibility: hidden;
213}
214
215.visible .extra {
216  -webkit-animation-duration: 200ms;
217  -webkit-animation-fill-mode: forwards;
218  height: auto;
219  opacity: 1;
220  overflow: hidden;
221  padding-bottom: 0;
222  position: static;
223  visibility: visible;
224}
225
226.closing .extra {
227  -webkit-transition: padding-top 100ms, height 100ms, opacity 200ms,
228      background 300ms;
229  height: 0 !important;
230  opacity: 0;
231  overflow: hidden;
232  padding-top: 0;
233  position: static;
234  visibility: visible;
235}
236
237/* Individual settings sections  */
238
239/* TODO(estade): this should be in a shared location but I'm afraid of the
240 * damage it could do. */
241[hidden] {
242  display: none !important;
243}
244
245@-webkit-keyframes dancing-dots-jump {
246  0% { top: 0; }
247  55% { top: 0; }
248  60% { top: -10px; }
249  80% { top: 3px; }
250  90% { top: -2px; }
251  95% { top: 1px; }
252  100% { top: 0; }
253}
254
255span.jumping-dots > span {
256  -webkit-animation: dancing-dots-jump 1800ms infinite;
257  padding: 1px;
258  position: relative;
259}
260
261span.jumping-dots > span:nth-child(2) {
262  -webkit-animation-delay: 100ms;
263}
264
265span.jumping-dots > span:nth-child(3) {
266  -webkit-animation-delay: 300ms;
267}
268
269/* TODO(estade): unfork this code. */
270.button-strip {
271<if expr="not pp_ifdef('toolkit_views')">
272  -webkit-box-direction: reverse;
273</if>
274  -webkit-box-orient: horizontal;
275  -webkit-box-pack: end;
276  display: -webkit-box;
277}
278
279#print-preview .button-strip button {
280  -webkit-margin-start: 9px;
281  display: block;
282}
283
284#link-container {
285  -webkit-box-orient: vertical;
286  display: -webkit-box;
287  margin: 7px 0;
288}
289
290#main-container {
291  -webkit-border-start: 1px solid #dcdcdc;
292  -webkit-box-flex: 1;
293  -webkit-box-orient: vertical;
294  display: -webkit-box;
295  height: 100%;
296  position: relative;
297}
298
299html:not(.focus-outline-visible)
300:enabled:focus:-webkit-any(input[type='checkbox'],
301                           input[type='radio'],
302                           button):not(.link-button) {
303  /* Cancel border-color for :focus specified in widgets.css. */
304  border-color: rgba(0,0,0,0.25);
305}
306
307html:not(.focus-outline-visible) button:focus.link-button {
308  outline: none;
309}
310