OLD | NEW |
| (Empty) |
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 /* Special attribute to hide elements. */ | |
6 [hidden] { | |
7 display: none !important; | |
8 } | |
9 | |
10 /* This file contains "borrowed" copy of standard styles. To simplify merging, | |
11 * when altering, please preserve original property value by adding comments. */ | |
12 input.common[type='checkbox'], | |
13 input.common[type='radio'] { | |
14 -webkit-appearance: none; | |
15 border: 1px solid #555; | |
16 border-radius: 1px; | |
17 box-sizing: border-box; | |
18 cursor: default; | |
19 height: 13px; | |
20 margin: 0; | |
21 opacity: 0.4; | |
22 width: 13px; | |
23 } | |
24 | |
25 input.common[type='checkbox']:hover, | |
26 input.common[type='checkbox']:checked, | |
27 input.common[type='radio']:hover, | |
28 input.common[type='radio']:checked { | |
29 opacity: 1; | |
30 } | |
31 | |
32 input.common[type='checkbox'] { | |
33 position: relative; | |
34 } | |
35 | |
36 input.common[type='checkbox']:checked::after { | |
37 background-image: -webkit-image-set( | |
38 url('../images/common/check_no_box.png') 1x, | |
39 url('../images/common/2x/check_no_box.png') 2x); | |
40 background-position: -3px -4px; | |
41 background-repeat: no-repeat; | |
42 } | |
43 | |
44 input.common[type='checkbox'].white { | |
45 border: none; | |
46 } | |
47 | |
48 input.common[type='checkbox'].white:not(:checked)::after { | |
49 background-image: -webkit-image-set( | |
50 url('../images/common/checkbox_white_unchecked.png') 1x, | |
51 url('../images/common/2x/checkbox_white_unchecked.png') 2x); | |
52 background-position: -1px 0; | |
53 } | |
54 | |
55 input.common[type='checkbox'].white:checked::after { | |
56 background-image: -webkit-image-set( | |
57 url('../images/common/checkbox_white_checked.png') 1x, | |
58 url('../images/common/2x/checkbox_white_checked.png') 2x); | |
59 background-position: -1px 0; | |
60 } | |
61 | |
62 input.common[type='checkbox']::after { | |
63 content: ''; | |
64 display: -webkit-box; | |
65 height: 15px; | |
66 left: -2px; | |
67 position: absolute; | |
68 top: -2px; | |
69 width: 17px; | |
70 } | |
71 | |
72 .bubble { | |
73 background: #FFF; | |
74 border-radius: 2px; | |
75 cursor: default; | |
76 outline: 1px solid rgba(0, 0, 0, 0.2); | |
77 padding: 16px; | |
78 } | |
79 | |
80 .bubble .pointer { | |
81 background: -webkit-image-set( | |
82 url('../images/common/bubble_point_white.png') 1x, | |
83 url('../images/common/2x/bubble_point_white.png') 2x); | |
84 display: block; | |
85 height: 11px; | |
86 left: 24px; | |
87 margin: 0 0 0 -5px; | |
88 outline: none; | |
89 position: absolute; | |
90 width: 17px; | |
91 } | |
92 | |
93 .bubble .pointer:not(.bottom) { | |
94 top: -11px; | |
95 } | |
96 | |
97 .bubble .pointer.bottom { | |
98 -webkit-transform: rotate(180deg); | |
99 bottom: -11px; | |
100 } | |
101 | |
102 .bubble .close-x { | |
103 background: -webkit-image-set( | |
104 url('../images/common/close_x_gray.png') 1x, | |
105 url('../images/common/2x/close_x_gray.png') 2x); | |
106 height: 21px; | |
107 opacity: 0.3; | |
108 position: absolute; | |
109 right: 3px; | |
110 top: 3px; | |
111 width: 21px; | |
112 } | |
113 | |
114 .bubble .close-x:hover { | |
115 opacity: 0.7; | |
116 } | |
117 | |
118 .buttonbar { | |
119 display: -webkit-box; | |
120 height: 31px; | |
121 } | |
122 | |
123 .buttonbar button:active img { | |
124 opacity: 1.0; | |
125 } | |
126 | |
127 .buttonbar button:hover img { | |
128 opacity: 0.72; | |
129 } | |
130 | |
131 .buttonbar button[disabled] img { | |
132 opacity: 0.9; | |
133 } | |
134 | |
135 .buttonbar button img { | |
136 display: inline-block; | |
137 margin: -3px 0 0; | |
138 opacity: 0.55; | |
139 vertical-align: middle; | |
140 } | |
141 | |
142 .buttonbar button.menubutton span.disclosureindicator { | |
143 -webkit-transform: rotate(90deg); | |
144 float: right; | |
145 margin-left: 7px; | |
146 margin-top: 10px; | |
147 opacity: .8; | |
148 transition: none; | |
149 } | |
150 | |
151 span.disclosureindicator { | |
152 background-image: -webkit-image-set( | |
153 url('../images/common/disclosure_arrow_dk_grey.png') 1x, | |
154 url('../images/common/2x/disclosure_arrow_dk_grey.png') 2x); | |
155 background-position: center; | |
156 background-repeat: no-repeat; | |
157 display: inline-block; | |
158 height: 7px; | |
159 width: 5px; | |
160 } | |
161 | |
162 /* "chrome-menu" class overrides some standard menu.css styles, to make custom | |
163 menus in FileBrowser look like native ChromeOS menus. */ | |
164 | |
165 menu.chrome-menu { | |
166 background-color: rgb(250, 250, 250); | |
167 border-radius: 3px; | |
168 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5); | |
169 color: rgb(34, 34, 34); | |
170 outline: none; | |
171 overflow: hidden; | |
172 padding: 5px 0; | |
173 transition: opacity 200ms ease-in; | |
174 z-index: 600; /* Must be below the overlay pane (1000). */ | |
175 } | |
176 | |
177 menu.chrome-menu[hidden] { | |
178 display: block !important; /* Overrides default [hidden] for animation. */ | |
179 opacity: 0; | |
180 pointer-events: none; | |
181 visibility: hidden; | |
182 } | |
183 | |
184 menu.chrome-menu.hide-delayed[hidden] { | |
185 transition-delay: 120ms; | |
186 transition-property: opacity, visibility; | |
187 } | |
188 | |
189 menu.chrome-menu > :not(hr) { | |
190 background-position: right 10px center; | |
191 background-repeat: no-repeat; | |
192 line-height: 30px; | |
193 padding-left: 20px; | |
194 padding-right: 20px; | |
195 } | |
196 | |
197 menu.chrome-menu > .menuitem-button { | |
198 background-position: center; | |
199 background-repeat: no-repeat; | |
200 border: 1px solid rgb(235, 235, 235); | |
201 height: 42px; | |
202 margin: -36px -1px -1px 0; | |
203 min-width: 60px; | |
204 padding: 0; | |
205 position: absolute; | |
206 width: 60px; | |
207 } | |
208 | |
209 menu.chrome-menu > .menuitem-button[checked] { | |
210 background-color: rgb(235, 235, 235); | |
211 } | |
212 | |
213 menu.chrome-menu > .menuitem-button.left { | |
214 right: 59px; | |
215 } | |
216 | |
217 html[dir='rtl'] menu.chrome-menu > .menuitem-button.left { | |
218 left: 59px; | |
219 right: auto; | |
220 } | |
221 | |
222 menu.chrome-menu > .menuitem-button.right { | |
223 right: 0; | |
224 } | |
225 | |
226 html[dir='rtl'] menu.chrome-menu > .menuitem-button.right { | |
227 left: 0; | |
228 right: auto; | |
229 } | |
230 | |
231 menu.chrome-menu > menuitem[disabled] { | |
232 color: rgb(153, 153, 153); | |
233 } | |
234 | |
235 menu.chrome-menu > menuitem:not([disabled])[selected], | |
236 menu.chrome-menu > menuitem:not([disabled])[selected]:active { | |
237 background-color: rgb(66, 129, 244); | |
238 color: white; | |
239 } | |
240 | |
241 menu.chrome-menu > hr { | |
242 background: rgb(235, 235, 235); | |
243 height: 1px; | |
244 margin: 5px 0; | |
245 } | |
246 | |
247 menu.chrome-menu > menuitem[checked] { | |
248 background-image: -webkit-image-set( | |
249 url('../images/common/check_no_box.png') 1x, | |
250 url('../images/common/2x/check_no_box.png') 2x); | |
251 } | |
252 | |
253 menu.chrome-menu > [checked]::before { | |
254 display: none; | |
255 } | |
256 | |
257 menu[showShortcuts] > menuitem[shortcutText][selected]:not([disabled])::after { | |
258 color: white; | |
259 } | |
260 | |
261 /** | |
262 * Ok/Cancel style buttons | |
263 * Height: 31px (content:21px + border:5px * 2) | |
264 **/ | |
265 button, | |
266 input[type='button'], | |
267 input[type='submit'], | |
268 select { | |
269 background-color: rgb(250, 250, 250); | |
270 background-image: none; | |
271 background-position: center; | |
272 background-repeat: no-repeat; | |
273 border: 5px solid transparent; | |
274 border-image: -webkit-image-set( | |
275 url('chrome://resources/images/apps/button.png') 1x, | |
276 url('chrome://resources/images/2x/apps/button.png') | |
277 2x) 5 / 5px / 2px repeat; | |
278 box-sizing: content-box; | |
279 color: rgb(34, 34, 34); | |
280 cursor: default; | |
281 height: 21px; | |
282 line-height: 21px; | |
283 margin: 0; | |
284 min-height: 21px; | |
285 min-width: 55px; | |
286 padding: 0 10px; | |
287 position: relative; | |
288 text-align: center; | |
289 z-index: 1; | |
290 } | |
291 | |
292 .buttonbar button { | |
293 -webkit-margin-start: 10px; | |
294 } | |
295 | |
296 button:hover, | |
297 input[type='button']:hover, | |
298 input[type='submit']:hover, | |
299 select:hover { | |
300 border-image: -webkit-image-set( | |
301 url('chrome://resources/images/apps/button_hover.png') 1x, | |
302 url('chrome://resources/images/2x/apps/button_hover.png') | |
303 2x) 5 fill / 5px / 2px repeat; | |
304 color: #222; | |
305 } | |
306 | |
307 button:active, | |
308 input[type='button']:active, | |
309 input[type='submit']:active { | |
310 border-image: -webkit-image-set( | |
311 url('chrome://resources/images/apps/button_pressed.png') 1x, | |
312 url('chrome://resources/images/2x/apps/button_pressed.png') | |
313 2x) 5 fill / 5px / 2px repeat; | |
314 color: #333; | |
315 } | |
316 | |
317 button[disabled], | |
318 input[type='button'][disabled], | |
319 input[type='submit'][disabled], | |
320 button[disabled]:hover, | |
321 input[type='button'][disabled]:hover, | |
322 input[type='submit'][disabled]:hover { | |
323 background-color: rgb(250, 250, 250); | |
324 background-image: none; | |
325 border-image: -webkit-image-set( | |
326 url('chrome://resources/images/apps/button.png') 1x, | |
327 url('chrome://resources/images/2x/apps/button.png') | |
328 2x) 5 fill / 5px / 2px repeat; | |
329 color: rgb(150, 150, 150); | |
330 } | |
331 | |
332 select:not([size]):hover, | |
333 select[size='0']:hover, | |
334 select[size='1']:hover { | |
335 /* Original value is '5 fill', which hides the dropdown triangle. */ | |
336 border-image-slice: 5; | |
337 } | |
338 | |
339 /* Gray progress bar. */ | |
340 .progress-bar { | |
341 background-color: #e6e6e6; | |
342 border-radius: 3px; | |
343 height: 6px; | |
344 } | |
345 | |
346 .progress-track { | |
347 background-color: #888; | |
348 border-radius: 3px; | |
349 height: 6px; | |
350 min-width: 6px; | |
351 } | |
352 | |
353 .progress-track.smoothed { | |
354 transition: width 1s linear; | |
355 } | |
356 | |
357 /* Icons for the action choice dialog and choosing the default app. */ | |
358 div.import-photos-to-drive-icon { | |
359 background-image: -webkit-image-set( | |
360 url('../images/media/drive.png') 1x, | |
361 url('../images/media/2x/drive.png') 2x); | |
362 } | |
363 | |
364 div.view-files-icon { | |
365 background-image: -webkit-image-set( | |
366 url('../../common/images/icon32.png') 1x, | |
367 url('../../common/images/icon64.png') 2x); | |
368 } | |
369 | |
370 div.watch-single-video-icon { | |
371 background-image: -webkit-image-set( | |
372 url('../images/media/watch.png') 1x, | |
373 url('../images/media/2x/watch.png') 2x); | |
374 } | |
375 | |
376 /* Pop-up dialogs. */ | |
377 | |
378 .cr-dialog-container { | |
379 -webkit-box-align: center; | |
380 -webkit-box-pack: center; | |
381 -webkit-user-select: none; | |
382 display: -webkit-box; | |
383 height: 100%; | |
384 left: 0; | |
385 overflow: hidden; | |
386 position: absolute; | |
387 top: 0; | |
388 transition: opacity 250ms linear; | |
389 width: 100%; | |
390 z-index: 9999; | |
391 } | |
392 | |
393 .cr-dialog-frame { | |
394 -webkit-box-orient: vertical; | |
395 background-color: rgb(250, 250, 250); | |
396 border: 1px solid rgb(255, 255, 255); | |
397 border-radius: 2px; | |
398 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5); | |
399 color: rgb(34, 34, 34); | |
400 cursor: default; | |
401 display: -webkit-box; | |
402 padding: 20px; | |
403 position: relative; | |
404 width: 460px; | |
405 } | |
406 | |
407 .cr-dialog-frame:focus { | |
408 outline: none; | |
409 } | |
410 | |
411 @-webkit-keyframes pulse { | |
412 0% { | |
413 -webkit-transform: scale(1); | |
414 } | |
415 40% { | |
416 -webkit-transform: scale(1.02); | |
417 } | |
418 60% { | |
419 -webkit-transform: scale(1.02); | |
420 } | |
421 100% { | |
422 -webkit-transform: scale(1); | |
423 } | |
424 } | |
425 | |
426 .cr-dialog-frame.pulse { | |
427 -webkit-animation-duration: 180ms; | |
428 -webkit-animation-iteration-count: 1; | |
429 -webkit-animation-name: pulse; | |
430 -webkit-animation-timing-function: ease-in-out; | |
431 } | |
432 | |
433 .shown > .cr-dialog-frame { | |
434 -webkit-transform: perspective(500px) scale(1) | |
435 translateY(0) rotateX(0); | |
436 opacity: 1; | |
437 } | |
438 | |
439 .cr-dialog-frame { | |
440 -webkit-transform: perspective(500px) scale(0.99) | |
441 translateY(-20px) rotateX(5deg); | |
442 opacity: 0; | |
443 transition: all 180ms; | |
444 transition-duration: 250ms; | |
445 } | |
446 | |
447 .cr-dialog-shield { | |
448 background-color: white; | |
449 bottom: 0; | |
450 display: block; | |
451 left: 0; | |
452 opacity: 0; | |
453 pointer-events: none; | |
454 position: absolute; | |
455 right: 0; | |
456 top: 0; | |
457 transition: opacity 500ms; | |
458 } | |
459 | |
460 .shown > .cr-dialog-shield { | |
461 opacity: 0.5; | |
462 transition: opacity 500ms; | |
463 } | |
464 | |
465 .cr-dialog-title { | |
466 -webkit-margin-after: 10px; | |
467 -webkit-margin-end: 20px; | |
468 display: block; | |
469 font-size: 125%; | |
470 white-space: nowrap; | |
471 word-wrap: normal; | |
472 } | |
473 | |
474 .cr-dialog-text { | |
475 margin: 13px 0; | |
476 } | |
477 | |
478 .cr-dialog-text, | |
479 .cr-dialog-title { | |
480 overflow: hidden; | |
481 text-overflow: ellipsis; | |
482 } | |
483 | |
484 .cr-dialog-frame input { | |
485 box-sizing: border-box; | |
486 width: 100%; | |
487 } | |
488 | |
489 .cr-dialog-buttons { | |
490 -webkit-box-orient: horizontal; | |
491 -webkit-box-pack: end; | |
492 display: -webkit-box; | |
493 padding-top: 10px; | |
494 } | |
495 | |
496 .cr-dialog-buttons button { | |
497 -webkit-margin-start: 8px; | |
498 line-height: 1.8; | |
499 } | |
500 | |
501 .cr-dialog-close { | |
502 background: url('chrome://theme/IDR_CLOSE_DIALOG') center no-repeat; | |
503 display: inline-block; | |
504 height: 44px; | |
505 opacity: 0.7; | |
506 position: absolute; | |
507 right: 0; | |
508 top: 0; | |
509 width: 44px; | |
510 } | |
511 | |
512 .cr-dialog-close:hover { | |
513 background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H'); | |
514 } | |
515 | |
516 .cr-dialog-close:active { | |
517 background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P'); | |
518 } | |
OLD | NEW |