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

Side by Side Diff: third_party/WebKit/Source/core/css/mediaControlsNew.css

Issue 2443903002: Remove all "new" suffixes from media player assets. (Closed)
Patch Set: fix name Created 4 years, 1 month 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
OLDNEW
(Empty)
1 /*
2 * Copyright (C) 2009 Apple Inc. All rights reserved.
3 * Copyright (C) 2015 Google Inc.
4 *
5 * Redistribution and use in source and binary forms, with or without
6 * modification, are permitted provided that the following conditions
7 * are met:
8 * 1. Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer.
10 * 2. Redistributions in binary form must reproduce the above copyright
11 * notice, this list of conditions and the following disclaimer in the
12 * documentation and/or other materials provided with the distribution.
13 *
14 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
15 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
16 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
17 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR
18 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
19 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24 */
25
26 /* Chromium default media controls */
27
28 /* WARNING: This css file can only style <audio> and <video> elements */
29
30 audio:not([controls]) {
31 display: none !important;
32 }
33
34 audio {
35 width: 300px;
36 height: 32px;
37 }
38
39 audio::-webkit-media-controls,
40 video::-webkit-media-controls {
41 width: inherit;
42 height: inherit;
43 position: relative;
44 direction: ltr;
45 display: flex;
46 flex-direction: column;
47 font-family: Segoe, "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif;
48 justify-content: flex-end;
49 align-items: center;
50 }
51
52 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
53 width: 100%;
54 height: 32px;
55 flex-shrink: 0;
56 bottom: 0;
57 text-indent: 0;
58 padding: 0;
59 margin: 0;
60 box-sizing: border-box;
61 }
62
63 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
64 display: flex;
65 flex-direction: row;
66 align-items: center;
67 /* We use flex-start here to ensure that the play button is visible even
68 * if we are too small to show all controls.
69 */
70 justify-content: flex-start;
71 -webkit-user-select: none;
72 position: relative;
73 width: 100%;
74 z-index: 0;
75 overflow: hidden;
76 text-align: right;
77 bottom: auto;
78 height: 32px;
79 min-width: 48px;
80 line-height: 32px;
81 background-color: #fafafa;
82 /* The duration is also specified in MediaControlElements.cpp and LayoutTest s/media/media-controls.js */
83 transition: opacity 0.3s;
84
85 font-size: 12px;
86 font-weight: normal; /* Make sure that we don't inherit non-defaults. */
87 font-style: normal;
88 }
89
90 audio:-webkit-full-page-media, video:-webkit-full-page-media {
91 max-height: 100%;
92 max-width: 100%;
93 }
94
95 audio:-webkit-full-page-media::-webkit-media-controls-panel,
96 video:-webkit-full-page-media::-webkit-media-controls-panel {
97 bottom: 0px;
98 }
99
100 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu tton {
101 -webkit-appearance: media-mute-button;
102 display: flex;
103 flex: none;
104 box-sizing: border-box;
105 width: 32px;
106 height: 32px;
107 padding: 0px;
108 border-width: 0px;
109 background-color: initial;
110 color: inherit;
111 }
112
113 audio::-webkit-media-controls-overlay-enclosure {
114 display: none;
115 }
116
117 video::-webkit-media-controls-overlay-enclosure {
118 display: flex;
119 position: relative;
120 flex-direction: column;
121 justify-content: flex-end;
122 align-items: center;
123 flex: 1 1;
124 min-height: 0;
125 width: 100%;
126 /* prevent disambiguation zooms with the panel */
127 margin-bottom: 10px;
128 text-indent: 0;
129 box-sizing: border-box;
130 overflow: hidden;
131 }
132
133 video::-webkit-media-controls-overlay-play-button {
134 -webkit-appearance: media-overlay-play-button;
135 display: flex;
136 position: absolute;
137 top: 0;
138 left: 0;
139 margin: 0;
140 border-width: 0px;
141 background-color: transparent;
142 width: 100%;
143 height: 100%;
144 padding: 0;
145 }
146
147 video::-internal-media-controls-overlay-cast-button {
148 -webkit-appearance: -internal-media-overlay-cast-off-button;
149 display: flex;
150 position: absolute;
151 top: 8px;
152 left: 8px;
153 margin-left: 0px;
154 margin-top: 0px;
155 border-width: 0px;
156 background-color: transparent;
157 width: 32px;
158 height: 32px;
159 padding: 0;
160 transition: opacity 0.3s;
161 }
162
163 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu tton {
164 -webkit-appearance: media-play-button;
165 display: flex;
166 flex: none;
167 box-sizing: border-box;
168 width: 32px;
169 height: 32px;
170 padding: 0px;
171 border-width: 0px;
172 background-color: initial;
173 color: inherit;
174 }
175
176 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls- timeline-container {
177 -webkit-appearance: media-controls-background;
178 display: flex;
179 flex-direction: row;
180 align-items: center;
181 justify-content: flex-end;
182 flex: 1 1;
183 -webkit-user-select: none;
184 height: 48px;
185 padding: 0;
186 min-width: 0;
187 }
188
189 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control s-current-time-display {
190 -webkit-appearance: media-current-time-display;
191 -webkit-user-select: none;
192 flex: none;
193 display: flex;
194 border: none;
195 cursor: default;
196
197 height: 32px;
198
199 /* text runs right to the edge of the container */
200 padding: 0;
201
202 color: #5a5a5a;
203
204 letter-spacing: normal;
205 word-spacing: normal;
206 text-transform: none;
207 text-indent: 0;
208 text-shadow: none;
209 text-decoration: none;
210 }
211
212 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr ols-time-remaining-display {
213 -webkit-appearance: media-current-time-display;
214 -webkit-user-select: none;
215 flex: none;
216 display: flex;
217 border: none;
218 cursor: default;
219
220 height: 32px;
221
222 /* text runs right to the edge of the container, plus a little on
223 * the left to pad the leading "/" */
224 padding: 0 0 0 4px;
225
226 color: #5a5a5a;
227
228 letter-spacing: normal;
229 word-spacing: normal;
230 text-transform: none;
231 text-indent: 0;
232 text-shadow: none;
233 text-decoration: none;
234 }
235
236 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
237 -webkit-appearance: media-slider;
238 display: flex;
239 flex: 1 1 auto;
240 height: 2px;
241
242 /* Leave 6px on either side for the thumb. Use margin so that
243 * the slider doesn't extend into it. We also add 12px border.
244 */
245 padding: 0;
246 margin: 0 18px 0 18px;
247 background-color: transparent;
248 min-width: 25px;
249 border: initial;
250 color: inherit;
251 }
252
253 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum e-slider {
254 -webkit-appearance: media-volume-slider;
255 display: flex;
256 /* The 1.9 value was empirically chosen to match old-flexbox behaviour
257 * and be aesthetically pleasing.
258 */
259 flex: 1 1.9 auto;
260 height: 2px;
261 max-width: 70px;
262 /* Leave room for the thumb, which has 6px radius. Use margin rather
263 * than padding so that the slider doesn't extend into it. We also
264 * leave an addition 12px margin.
265 */
266 padding: 0;
267 margin: 0 18px 0 18px;
268 background-color: transparent;
269 min-width: 25px;
270 border: initial;
271 color: inherit;
272 }
273
274 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules.
275 https://code.google.com/p/chromium/issues/detail?id=112508
276 https://bugs.webkit.org/show_bug.cgi?id=62218
277 */
278 input[type="range" i]::-webkit-media-slider-container {
279 display: flex;
280 align-items: center;
281 flex-direction: row; /* This property is updated by C++ code. */
282 box-sizing: border-box;
283 /** this positions the slider thumb for both time and volume. */
284 height: 2px;
285 width: 100%;
286 background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
287 }
288
289 /* The negative right margin causes the track to overflow its container. */
290 input[type="range" i]::-webkit-media-slider-container > div {
291 margin-right: -18px; /* box is 36px wide, get to the middle */
292 margin-left: -18px;
293 }
294
295 input[type="range" i]::-webkit-media-slider-thumb {
296 box-sizing: border-box;
297 width: 48px;
298 height: 48px;
299 padding: 0px;
300 }
301
302 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f ullscreen-button {
303 -webkit-appearance: media-enter-fullscreen-button;
304 display: flex;
305 flex: none;
306 overflow: hidden;
307 box-sizing: border-box;
308 width: 32px;
309 height: 32px;
310 padding: 0px;
311 border-width: 0px;
312 background-color: initial;
313 color: inherit;
314 }
315
316 audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas t-button {
317 -webkit-appearance: -internal-media-cast-off-button;
318 display: flex;
319 flex: none;
320 box-sizing: border-box;
321 width: 32px;
322 height: 32px;
323 padding: 0px;
324 border-width: 0px;
325 margin-left: 0px;
326 margin-right: 0px;
327 background-color: initial;
328 color: inherit;
329 }
330
331 audio::-webkit-media-controls-toggle-closed-captions-button {
332 display: none;
333 }
334
335 video::-webkit-media-controls-toggle-closed-captions-button {
336 -webkit-appearance: media-toggle-closed-captions-button;
337 display: flex;
338 flex: none;
339 box-sizing: border-box;
340 width: 32px;
341 height: 32px;
342 padding: 0px;
343 border-width: 0px;
344 margin-left: 0px;
345 margin-right: 0px;
346 background-color: initial;
347 color: inherit;
348 }
349
350 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-con trols-fullscreen-volume-slider {
351 display: none;
352 }
353
354 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media -controls-fullscreen-volume-min-button {
355 display: none;
356 }
357
358 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media -controls-fullscreen-volume-max-button {
359 display: none;
360 }
361
362 video::-internal-media-controls-text-track-list, video::-internal-media-controls -overflow-menu-list, audio::-internal-media-controls-overflow-menu-list {
363 position: absolute;
364 bottom: 4px;
365 right: 4px;
366 background-color: #fafafa;
367 max-width: 50%;
368 max-height: 250px;
369 min-width: 150px;
370 overflow-x: hidden;
371 overflow-y: auto;
372 white-space: nowrap;
373 font-size: 14px;
374 border-radius: 1px;
375 box-shadow: 0 8px 20px 1px rgba(0, 0, 0, 0.14),
376 0 3px 28px 2px rgba(0, 0, 0, 0.12),
377 0 5px 10px -3px rgba(0, 0, 0, 0.4);
378 }
379
380 video::-internal-media-controls-text-track-list-item {
381 display: block;
382 color: #424242;
383 text-align: start;
384 line-height: 40px;
385 padding-right: 16px;
386 text-overflow: ellipsis;
387 }
388
389 video::-internal-media-controls-text-track-list-item:hover, video::-internal-med ia-controls-overflow-menu-list-item:hover, audio::-internal-media-controls-overf low-menu-list-item:hover {
390 background-color: #e0e0e0;
391 }
392
393 video::-internal-media-controls-text-track-list-item-input {
394 -webkit-appearance: -internal-media-track-selection-checkmark;
395 visibility: hidden;
396 left: 0;
397 vertical-align: middle;
398 margin: 0 5px 0 0;
399 width: 16px;
400 height: 16px;
401 margin-left: 12px;
402 }
403
404 video::-internal-media-controls-text-track-list-item-input:checked {
405 visibility: visible;
406 }
407
408 video::-internal-media-controls-text-track-list-kind-captions {
409 -webkit-appearance: -internal-media-closed-captions-icon;
410 height: 20px;
411 width: 20px;
412 margin-left: 10px;
413 vertical-align: middle;
414 }
415
416 video::-internal-media-controls-text-track-list-kind-subtitles {
417 -webkit-appearance: -internal-media-subtitles-icon;
418 height: 20px;
419 width: 20px;
420 margin-left: 10px;
421 vertical-align: middle;
422 }
423
424 video::-internal-media-controls-overflow-button, audio::-internal-media-controls -overflow-button {
425 -webkit-appearance: -internal-media-overflow-button;
426 display: flex;
427 flex: none;
428 box-sizing: border-box;
429 width: 32px;
430 height: 32px;
431 padding: 0px;
432 border-width: 0px;
433 margin-left: 0px;
434 margin-right: 0px;
435 background-color: initial;
436 color: inherit;
437 }
438
439 video::-internal-media-controls-download-button, audio::-internal-media-controls -download-button {
440 -webkit-appearance: -internal-media-download-button;
441 display: flex;
442 flex: none;
443 box-sizing: border-box;
444 width: 32px;
445 height: 32px;
446 padding: 0px;
447 border-width: 0px;
448 margin-left: 0px;
449 margin-right: 0px;
450 background-color: initial;
451 color: inherit;
452 }
453
454 video::-internal-media-controls-overflow-menu-list-item, audio::-internal-media- controls-overflow-menu-list-item {
455 display: block;
456 color: #424242;
457 line-height: 40px;
458 padding-left: 28px;
459 }
460
461 video::-webkit-media-text-track-container {
462 position: relative;
463 width: inherit;
464 height: inherit;
465 overflow: hidden;
466
467 font: 22px sans-serif;
468 text-align: center;
469 color: rgba(255, 255, 255, 1);
470
471 letter-spacing: normal;
472 word-spacing: normal;
473 text-transform: none;
474 text-indent: 0;
475 text-decoration: none;
476 pointer-events: none;
477 -webkit-user-select: none;
478 word-break: break-word;
479 }
480
481 video::cue {
482 display: inline;
483
484 background-color: rgba(0, 0, 0, 0.8);
485 padding: 2px 2px;
486 }
487
488 video::-webkit-media-text-track-region {
489 position: absolute;
490 line-height: 5.33vh;
491 writing-mode: horizontal-tb;
492 background: rgba(0, 0, 0, 0.8);
493 color: rgba(255, 255, 255, 1);
494 word-wrap: break-word;
495 overflow-wrap: break-word;
496 overflow: hidden;
497 }
498
499 video::-webkit-media-text-track-region-container {
500 position: relative;
501
502 display: flex;
503 flex-flow: column;
504 flex-direction: column;
505 }
506
507 video::-webkit-media-text-track-region-container.scrolling {
508 transition: top 433ms linear;
509 }
510
511
512 video::-webkit-media-text-track-display {
513 position: absolute;
514 overflow: hidden;
515 white-space: pre-wrap;
516 -webkit-box-sizing: border-box;
517 flex: 0 0 auto;
518 }
519
520 video::cue(:future) {
521 color: gray;
522 }
523
524 video::cue(b) {
525 font-weight: bold;
526 }
527
528 video::cue(u) {
529 text-decoration: underline;
530 }
531
532 video::cue(i) {
533 font-style: italic;
534 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698