Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(192)

Side by Side Diff: ui/file_manager/file_manager/foreground/css/media_controls.css

Issue 504073002: Files.app: Move VP/Galllery related files to dedicate folders (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | ui/file_manager/file_manager/foreground/images/media/2x/drive.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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 .media-button {
6 height: 28px;
7 position: relative;
8 width: 26px;
9 }
10
11 .media-button > div {
12 height: 100%;
13 opacity: 0;
14 pointer-events: none;
15 position: absolute;
16 transition: opacity 100ms linear;
17 width: 100%;
18 }
19
20 .media-button[state='default']:not(.disabled):not(:hover):not(:active) >
21 .default.normal,
22 .media-button[state='default']:not(.disabled):hover > .default.hover,
23 .media-button[state='default']:not(.disabled):active > .default.active,
24 .media-button[state='playing']:not(.disabled):not(:hover):not(:active) >
25 .playing.normal,
26 .media-button[state='playing']:not(.disabled):hover > .playing.hover,
27 .media-button[state='playing']:not(.disabled):active > .playing.active,
28 .media-button[state='ended']:not(.disabled):not(:hover):not(:active) >
29 .ended.normal,
30 .media-button[state='ended']:not(.disabled):hover > .ended.hover,
31 .media-button[state='ended']:not(.disabled):active > .ended.active,
32 .media-button.disabled > .disabled {
33 opacity: 1;
34 }
35
36 /* Custom sliders for progress and volume. */
37
38 /* Customize the standard input[type='range']. */
39 .custom-slider > input[type='range'] {
40 -webkit-appearance: none !important; /* Hide the default thumb icon. */
41 background: transparent; /* Hide the standard slider bar */
42 height: 100%;
43 left: -2px; /* Required to align the input element with the parent. */
44 outline: none;
45 position: absolute;
46 top: -2px;
47 width: 100%;
48 }
49
50 /* Custom thumb icon. */
51 .custom-slider > input[type='range']::-webkit-slider-thumb {
52 -webkit-appearance: none;
53 background-position: center center;
54 background-repeat: no-repeat;
55 height: 24px;
56 position: relative;
57 z-index: 2;
58 }
59
60 /* Custom slider bar (we hide the standard one). */
61 .custom-slider > .bar {
62 /* In order to match the horizontal position of the standard slider bar
63 left and right must be equal to 1/2 of the thumb icon width. */
64 border-bottom-style: solid;
65 border-top-style: solid;
66 border-width: 1px;
67 bottom: 11px;
68 pointer-events: none; /* Mouse events pass through to the standard input. */
69 position: absolute;
70 top: 11px;
71 }
72
73 .custom-slider > .bar > .filled,
74 .custom-slider > .bar > .cap {
75 border-style: solid;
76 border-width: 1px;
77 bottom: -1px;
78 position: absolute;
79 top: -1px;
80 }
81
82 /* The filled portion of the slider bar to the left of the thumb. */
83 .custom-slider > .bar > .filled {
84 border-left-style: none;
85 border-right-style: none;
86 left: 0;
87 width: 0; /* The element style.width is manipulated from the code. */
88 }
89
90 /* Rounded caps to the left and right of the slider bar. */
91 .custom-slider > .bar > .cap {
92 width: 4px;
93 }
94
95 /* Left cap is always filled, should be the same color as .filled. */
96 .custom-slider > .bar > .cap.left {
97 border-bottom-left-radius: 4px;
98 border-right-style: none;
99 border-top-left-radius: 4px;
100 right: 100%;
101 }
102
103 /* Right cap is always not filled. */
104 .custom-slider > .bar > .cap.right {
105 border-bottom-right-radius: 4px;
106 border-left-style: none;
107 border-top-right-radius: 4px;
108 left: 100%;
109 }
110
111 .custom-slider > .bar,
112 .custom-slider > .bar > .cap.right {
113 background-color: rgba(0, 0, 0, 0.5);
114 border-color: #808080;
115 }
116
117 .custom-slider > .bar > .filled,
118 .custom-slider > .bar > .cap.left {
119 background-image: linear-gradient(#c3c3c3, #d9d9d9);
120 border-color: #d9d9d9;
121 }
122
123 .custom-slider.disabled > .bar > .filled,
124 .custom-slider.disabled > .bar > .cap.left {
125 background-color: rgba(0, 0, 0, 0.5);
126 background-image: none;
127 }
128
129 .custom-slider.disabled > .bar,
130 .custom-slider.disabled > .bar > .filled,
131 .custom-slider.disabled > .bar > .cap {
132 border-color: #404040;
133 }
134
135 .media-button.disabled,
136 .custom-slider.disabled,
137 .custom-slider.readonly {
138 pointer-events: none;
139 }
140
141 /* Progress seek marker (precise time shown on mouse hover. */
142
143 /* Thin vertical line across the slider bar */
144 .custom-slider > .bar > .seek-mark {
145 background-color: #202020;
146 bottom: -1px;
147 left: 0;
148 position: absolute;
149 top: -1px;
150 width: 0;
151 }
152
153 .custom-slider > .bar > .seek-mark.visible {
154 width: 1px;
155 }
156
157 .custom-slider > .bar > .seek-mark.inverted {
158 background-color: #808080;
159 }
160
161 /* Text label giving the precise time corresponding to the hover position. */
162 .custom-slider > .bar > .seek-mark > .seek-label {
163 -webkit-box-align: center;
164 -webkit-box-orient: horizontal;
165 -webkit-box-pack: center;
166 background: #202020;
167 border-top-left-radius: 2px;
168 border-top-right-radius: 2px;
169 bottom: 19px;
170 color: white;
171 display: -webkit-box;
172 font-size: 13px;
173 height: 15px;
174 left: 0;
175 opacity: 0;
176 overflow: hidden;
177 position: absolute;
178 transition: opacity 150ms ease;
179 }
180
181 .custom-slider > .bar > .seek-mark.visible > .seek-label {
182 opacity: 1;
183 }
184
185 /* Media controls in order of appearance. */
186
187 /* Play/pause button. */
188
189 .media-button.play {
190 margin-left: -7px;
191 margin-right: -7px;
192 }
193
194 .media-button.play > .default.normal {
195 background-image: -webkit-image-set(
196 url('../images/media/media_play.png') 1x,
197 url('../images/media/2x/media_play.png') 2x);
198 }
199
200 .media-button.play > .default.hover {
201 background-image: -webkit-image-set(
202 url('../images/media/media_play_hover.png') 1x,
203 url('../images/media/2x/media_play_hover.png') 2x);
204 }
205
206 .media-button.play > .default.active {
207 background-image: -webkit-image-set(
208 url('../images/media/media_play_down.png') 1x,
209 url('../images/media/2x/media_play_down.png') 2x);
210 }
211
212 .media-button.play > .playing.normal {
213 background-image: -webkit-image-set(
214 url('../images/media/media_pause.png') 1x,
215 url('../images/media/2x/media_pause.png') 2x);
216 }
217
218 .media-button.play > .playing.hover {
219 background-image: -webkit-image-set(
220 url('../images/media/media_pause_hover.png') 1x,
221 url('../images/media/2x/media_pause_hover.png') 2x);
222 }
223
224 .media-button.play > .playing.active {
225 background-image: -webkit-image-set(
226 url('../images/media/media_pause_down.png') 1x,
227 url('../images/media/2x/media_pause_down.png') 2x);
228 }
229
230 .media-button.play > .ended.normal {
231 background-image: -webkit-image-set(
232 url('../images/media/media_loop.png') 1x,
233 url('../images/media/2x/media_loop.png') 2x);
234 }
235
236 .media-button.play > .ended.hover {
237 background-image: -webkit-image-set(
238 url('../images/media/media_loop_hover.png') 1x,
239 url('../images/media/2x/media_loop_hover.png') 2x);
240 }
241
242 .media-button.play > .ended.active {
243 background-image: -webkit-image-set(
244 url('../images/media/media_loop_down.png') 1x,
245 url('../images/media/2x/media_loop_down.png') 2x);
246 }
247
248 .media-button.play > .disabled {
249 background-image: -webkit-image-set(
250 url('../images/media/media_play_disabled.png') 1x,
251 url('../images/media/2x/media_play_disabled.png') 2x);
252 }
253
254 /* Time controls: a slider and a text time display. */
255
256 .time-controls {
257 -webkit-box-align: center;
258 -webkit-box-flex: 1;
259 -webkit-box-orient: horizontal;
260 -webkit-box-pack: center;
261 display: -webkit-box;
262 height: 100%;
263 }
264
265 .custom-slider.progress {
266 -webkit-box-flex: 1;
267 display: -webkit-box;
268 height: 100%;
269 margin-left: -9px; /* Set the margins at the edges of the slider bar. */
270 margin-right: -9px;
271 position: relative;
272 }
273
274 .custom-slider.progress > input[type='range']::-webkit-slider-thumb {
275 background-image: -webkit-image-set(
276 url('../images/media/media_slider_thumb.png') 1x,
277 url('../images/media/2x/media_slider_thumb.png') 2x);
278 width: 28px;
279 }
280
281 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:hover {
282 background-image: -webkit-image-set(
283 url('../images/media/media_slider_thumb_hover.png') 1x,
284 url('../images/media/2x/media_slider_thumb_hover.png') 2x);
285 }
286
287 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:active {
288 background-image: -webkit-image-set(
289 url('../images/media/media_slider_thumb_down.png') 1x,
290 url('../images/media/2x/media_slider_thumb_down.png') 2x);
291 }
292
293 .custom-slider.progress.disabled > input[type='range']::-webkit-slider-thumb {
294 background-image: none;
295 }
296
297 .custom-slider.progress > .bar {
298 left: 14px; /* Exactly 1/2 of the thumb width */
299 right: 14px;
300 }
301
302 /* Time display. */
303
304 .time-controls > .time {
305 cursor: default;
306 height: 100%;
307 margin-left: 15px;
308 position: relative;
309 }
310
311 .time-controls > .time.disabled {
312 opacity: 0;
313 }
314
315 /* Invisible div used to compute the width required for the elapsed time. */
316 .time-controls > .time > .duration {
317 color: transparent;
318 }
319
320 .time-controls > .time > .current {
321 -webkit-box-align: center;
322 -webkit-box-orient: horizontal;
323 -webkit-box-pack: end;
324 color: white;
325 display: -webkit-box;
326 height: 100%;
327 position: absolute;
328 right: 0;
329 top: -1px;
330 }
331
332 /* Volume controls: sound button and volume slider */
333
334 .volume-controls {
335 -webkit-box-align: center;
336 -webkit-box-orient: horizontal;
337 -webkit-box-pack: center;
338 display: -webkit-box;
339 height: 100%;
340 }
341
342 /* Sound button */
343
344 .media-button.sound {
345 margin-left: -4px;
346 width: 31px;
347 }
348
349 .media-button.sound[level='0'] > .normal {
350 background-image: -webkit-image-set(
351 url('../images/media/media_sound_disabled.png') 1x,
352 url('../images/media/2x/media_sound_disabled.png') 2x);
353 }
354
355 .media-button.sound[level='0'] > .hover {
356 background-image: -webkit-image-set(
357 url('../images/media/media_sound_disabled_hover.png') 1x,
358 url('../images/media/2x/media_sound_disabled_hover.png') 2x);
359 }
360
361 .media-button.sound[level='0'] > .active {
362 background-image: -webkit-image-set(
363 url('../images/media/media_sound_disabled_down.png') 1x,
364 url('../images/media/2x/media_sound_disabled_down.png') 2x);
365 }
366
367
368 .media-button.sound[level='1'] > .normal {
369 background-image: -webkit-image-set(
370 url('../images/media/media_sound_level1.png') 1x,
371 url('../images/media/2x/media_sound_level1.png') 2x);
372 }
373
374 .media-button.sound[level='1'] > .hover {
375 background-image: -webkit-image-set(
376 url('../images/media/media_sound_level1_hover.png') 1x,
377 url('../images/media/2x/media_sound_level1_hover.png') 2x);
378 }
379
380 .media-button.sound[level='1'] > .active {
381 background-image: -webkit-image-set(
382 url('../images/media/media_sound_level1_down.png') 1x,
383 url('../images/media/2x/media_sound_level1_down.png') 2x);
384 }
385
386
387 .media-button.sound[level='2'] > .normal {
388 background-image: -webkit-image-set(
389 url('../images/media/media_sound_level2.png') 1x,
390 url('../images/media/2x/media_sound_level2.png') 2x);
391 }
392
393 .media-button.sound[level='2'] > .hover {
394 background-image: -webkit-image-set(
395 url('../images/media/media_sound_level2_hover.png') 1x,
396 url('../images/media/2x/media_sound_level2_hover.png') 2x);
397 }
398
399 .media-button.sound[level='2'] > .active {
400 background-image: -webkit-image-set(
401 url('../images/media/media_sound_level2_down.png') 1x,
402 url('../images/media/2x/media_sound_level2_down.png') 2x);
403 }
404
405
406 .media-button.sound[level='3'] > .normal {
407 background-image: -webkit-image-set(
408 url('../images/media/media_sound_full.png') 1x,
409 url('../images/media/2x/media_sound_full.png') 2x);
410 }
411
412 .media-button.sound[level='3'] > .hover {
413 background-image: -webkit-image-set(
414 url('../images/media/media_sound_full_hover.png') 1x,
415 url('../images/media/2x/media_sound_full_hover.png') 2x);
416 }
417
418 .media-button.sound[level='3'] > .active {
419 background-image: -webkit-image-set(
420 url('../images/media/media_sound_full_down.png') 1x,
421 url('../images/media/2x/media_sound_full_down.png') 2x);
422 }
423
424
425 .media-button.sound > .disabled {
426 background-image: -webkit-image-set(
427 url('../images/media/media_sound_full_disabled.png') 1x,
428 url('../images/media/2x/media_sound_full_disabled.png') 2x);
429 }
430
431 /* Volume slider. */
432
433 .custom-slider.volume {
434 height: 100%;
435 margin-left: -4px;
436 margin-right: -4px;
437 position: relative;
438 width: 60px;
439 }
440
441 .custom-slider.volume > input[type='range']::-webkit-slider-thumb {
442 background-image: -webkit-image-set(
443 url('../images/media/media_volume_slider_thumb.png') 1x,
444 url('../images/media/2x/media_volume_slider_thumb.png') 2x);
445 width: 20px;
446 }
447
448 .custom-slider.volume > input[type='range']::-webkit-slider-thumb:hover {
449 background-image: -webkit-image-set(
450 url('../images/media/media_volume_slider_thumb_hover.png') 1x,
451 url('../images/media/2x/media_volume_slider_thumb_hover.png') 2x);
452 }
453
454 .custom-slider.volume > input[type='range']::-webkit-slider-thumb:active {
455 background-image: -webkit-image-set(
456 url('../images/media/media_volume_slider_thumb_down.png') 1x,
457 url('../images/media/2x/media_volume_slider_thumb_down.png') 2x);
458 }
459
460 .custom-slider.volume.disabled > input[type='range']::-webkit-slider-thumb {
461 background-image: none;
462 }
463
464 .custom-slider.volume > .bar {
465 left: 10px; /* Exactly 1/2 of the thumb width */
466 right: 10px;
467 }
468
469 /* Horizontal video control bar, all controls in a row. */
470
471 .video-controls {
472 -webkit-box-align: center;
473 -webkit-box-orient: horizontal;
474 -webkit-box-pack: center;
475 background: #202020;
476 border-radius: 5px;
477 display: -webkit-box;
478 font-size: 15px;
479 height: 30px;
480 opacity: 0.8;
481 padding-left: 15px;
482 padding-right: 15px;
483 pointer-events: auto;
484 }
485
486 .video-controls .time-controls,
487 .video-controls .volume-controls {
488 margin-left: 15px;
489 }
490
491 /* Fullscreen button. */
492 /* There is no final decision whether we need a separate icon when toggled. */
493
494 .media-button.fullscreen {
495 margin-left: 9px; /* 15px visible margin - 6px whitespace in the icon. */
496 margin-right: -6px;
497 }
498
499 .media-button.fullscreen > .normal {
500 background-image: -webkit-image-set(
501 url('../images/media/media_fullscreen.png') 1x,
502 url('../images/media/2x/media_fullscreen.png') 2x);
503 }
504
505 .media-button.fullscreen > .hover {
506 background-image: -webkit-image-set(
507 url('../images/media/media_fullscreen_hover.png') 1x,
508 url('../images/media/2x/media_fullscreen_hover.png') 2x);
509 }
510
511 .media-button.fullscreen > .active {
512 background-image: -webkit-image-set(
513 url('../images/media/media_fullscreen_down.png') 1x,
514 url('../images/media/2x/media_fullscreen_down.png') 2x);
515 }
516
517 .media-button.fullscreen > .disabled {
518 background-image: -webkit-image-set(
519 url('../images/media/media_fullscreen_disabled.png') 1x,
520 url('../images/media/2x/media_fullscreen_disabled.png') 2x);
521 }
522
523 .playback-state-icon {
524 background-color: #202020;
525 background-position: center center;
526 background-repeat: no-repeat;
527 border-radius: 2.5px;
528 height: 32px;
529 left: 50%;
530 margin-left: -16px;
531 margin-top: -16px;
532 opacity: 0;
533 pointer-events: none;
534 position: absolute;
535 top: 50%;
536 width: 32px;
537 z-index: 2;
538 }
539
540 .text-banner {
541 background-color: black;
542 border-radius: 10px;
543 color: white;
544 font-size: 18px;
545 left: 50%;
546 margin-left: -250px;
547 opacity: 0;
548 padding: 10px;
549 pointer-events: none;
550 position: absolute;
551 text-align: center;
552 text-shadow: 0 0 10px black;
553 top: 20%;
554 width: 500px;
555 z-index: 2;
556 }
557
558 .text-banner[visible] {
559 -webkit-animation: text-banner-blowup 3000ms;
560 }
561
562 .playback-state-icon[state] {
563 -webkit-animation: blowup 500ms;
564 }
565
566 @-webkit-keyframes blowup {
567 from {
568 opacity: 1;
569 }
570 to {
571 -webkit-transform: scale(3);
572 opacity: 0;
573 }
574 }
575
576 @-webkit-keyframes text-banner-blowup {
577 from {
578 -webkit-transform: scale(0.5);
579 opacity: 0;
580 }
581 20% {
582 -webkit-transform: scale(1);
583 opacity: 0.75;
584 }
585 80% {
586 -webkit-transform: scale(1);
587 opacity: 0.75;
588 }
589 to {
590 -webkit-transform: scale(3);
591 opacity: 0;
592 }
593 }
594
595 .playback-state-icon[state='play'] {
596 background-image: -webkit-image-set(
597 url('../images/media/media_play.png') 1x,
598 url('../images/media/2x/media_play.png') 2x);
599 }
600
601 .playback-state-icon[state='pause'] {
602 background-image: -webkit-image-set(
603 url('../images/media/media_pause.png') 1x,
604 url('../images/media/2x/media_pause.png') 2x);
605 }
OLDNEW
« no previous file with comments | « no previous file | ui/file_manager/file_manager/foreground/images/media/2x/drive.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698