1/*
2 * Copyright (C) 2009 Apple Inc.  All rights reserved.
3 * Copyright (C) 2009 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
30audio {
31    width: 300px;
32    height: 30px;
33}
34
35audio::-webkit-media-controls,
36video::-webkit-media-controls {
37    width: inherit;
38    height: inherit;
39    position: relative;
40    direction: ltr;
41    display: flex;
42    flex-direction: column;
43    justify-content: flex-end;
44    align-items: center;
45}
46
47audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
48    width: 100%;
49    max-width: 800px;
50    height: 30px;
51    flex-shrink: 0;
52    bottom: 0;
53    text-indent: 0;
54    padding: 0;
55    box-sizing: border-box;
56}
57
58video::-webkit-media-controls-enclosure {
59    padding: 0px 5px 5px 5px;
60    height: 35px;
61    flex-shrink: 0;
62}
63
64audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
65    display: flex;
66    flex-direction: row;
67    align-items: center;
68    /* We use flex-start here to ensure that the play button is visible even
69     * if we are too small to show all controls.
70     */
71    justify-content: flex-start;
72    -webkit-user-select: none;
73    position: relative;
74    width: 100%;
75    z-index: 0;
76    overflow: hidden;
77    text-align: right;
78    bottom: auto;
79    height: 30px;
80    background-color: rgba(20, 20, 20, 0.8);
81    border-radius: 5px;
82    /* The duration is also specified in MediaControlElements.cpp and LayoutTests/media/media-controls.js */
83    transition: opacity 0.3s;
84}
85
86video:-webkit-full-page-media {
87    margin: auto;
88    position: absolute;
89    top: 0;
90    right: 0;
91    bottom: 0;
92    left: 0;
93}
94
95audio:-webkit-full-page-media, video:-webkit-full-page-media {
96    max-height: 100%;
97    max-width: 100%;
98}
99
100audio:-webkit-full-page-media::-webkit-media-controls-panel,
101video:-webkit-full-page-media::-webkit-media-controls-panel {
102    bottom: 0px;
103}
104
105audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
106    -webkit-appearance: media-mute-button;
107    display: flex;
108    flex: none;
109    border: none;
110    box-sizing: border-box;
111    width: 35px;
112    height: 30px;
113    line-height: 30px;
114    margin: 0 6px 0 0;
115    padding: 0;
116    background-color: initial;
117    color: inherit;
118}
119
120audio::-webkit-media-controls-overlay-enclosure {
121    display: none;
122}
123
124video::-webkit-media-controls-overlay-enclosure {
125    display: flex;
126    position: relative;
127    flex-direction: column;
128    justify-content: flex-end;
129    align-items: center;
130    flex: 1 1;
131    width: 100%;
132    max-width: 800px;
133    text-indent: 0;
134    box-sizing: border-box;
135    overflow: hidden;
136}
137
138video::-webkit-media-controls-overlay-play-button {
139    -webkit-appearance: media-overlay-play-button;
140    display: flex;
141    position: absolute;
142    top: 50%;
143    left: 50%;
144    margin-left: -40px;
145    margin-top: -40px;
146    border: none;
147    box-sizing: border-box;
148    background-color: transparent;
149    width: 80px;
150    height: 80px;
151    padding: 0;
152}
153
154video::-internal-media-controls-overlay-cast-button {
155    -webkit-appearance: -internal-media-overlay-cast-off-button;
156    display: flex;
157    position: absolute;
158    top: 5%;
159    left: 5%;
160    margin-left: 0px;
161    margin-top: 0px;
162    border: none;
163    box-sizing: border-box;
164    background-color: transparent;
165    width: 30px;
166    height: 30px;
167    padding: 0;
168}
169
170audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
171    -webkit-appearance: media-play-button;
172    display: flex;
173    flex: none;
174    border: none;
175    box-sizing: border-box;
176    width: 30px;
177    height: 30px;
178    line-height: 30px;
179    margin-left: 9px;
180    margin-right: 9px;
181    padding: 0;
182    background-color: initial;
183    color: inherit;
184}
185
186audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
187    -webkit-appearance: media-controls-background;
188    display: flex;
189    flex-direction: row;
190    align-items: center;
191    justify-content: flex-end;
192    flex: 1 1;
193    -webkit-user-select: none;
194    height: 16px;
195    min-width: 0;
196}
197
198audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
199audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
200    -webkit-appearance: media-current-time-display;
201    -webkit-user-select: none;
202    flex: none;
203    display: flex;
204    border: none;
205    cursor: default;
206
207    height: 30px;
208    margin: 0 9px 0 0;
209    padding: 0;
210
211    line-height: 30px;
212    font-family: Arial, Helvetica, sans-serif;
213    font-size: 13px;
214    font-weight: bold;
215    font-style: normal;
216    color: white;
217
218    letter-spacing: normal;
219    word-spacing: normal;
220    text-transform: none;
221    text-indent: 0;
222    text-shadow: none;
223    text-decoration: none;
224}
225
226audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
227    -webkit-appearance: media-slider;
228    display: flex;
229    flex: 1 1 auto;
230    height: 8px;
231    margin: 0 15px 0 0;
232    padding: 0;
233    background-color: transparent;
234    min-width: 25px;
235    border: initial;
236    color: inherit;
237}
238
239audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
240    -webkit-appearance: media-volume-slider;
241    display: flex;
242    /* The 1.9 value was empirically chosen to match old-flexbox behaviour
243     * and be aesthetically pleasing.
244     */
245    flex: 1 1.9 auto;
246    height: 8px;
247    max-width: 70px;
248    margin: 0 15px 0 0;
249    padding: 0;
250    background-color: transparent;
251    min-width: 15px;
252    border: initial;
253    color: inherit;
254}
255
256/* FIXME these shouldn't use special pseudoShadowIds, but nicer rules.
257   https://code.google.com/p/chromium/issues/detail?id=112508
258   https://bugs.webkit.org/show_bug.cgi?id=62218
259*/
260input[type="range" i]::-webkit-media-slider-container {
261    display: flex;
262    align-items: center;
263    flex-direction: row; /* This property is updated by C++ code. */
264    box-sizing: border-box;
265    height: 100%;
266    width: 100%;
267    border: 1px solid rgba(230, 230, 230, 0.35);
268    border-radius: 4px;
269    background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
270}
271
272/* The negative right margin causes the track to overflow its container. */
273input[type="range" i]::-webkit-media-slider-container > div {
274    margin-right: -14px;
275}
276
277input[type="range" i]::-webkit-media-slider-thumb {
278    margin-left: -7px;
279    margin-right: -7px;
280}
281
282audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
283    -webkit-appearance: media-enter-fullscreen-button;
284    display: flex;
285    flex: none;
286    border: none;
287    box-sizing: border-box;
288    width: 30px;
289    height: 30px;
290    line-height: 30px;
291    margin-left: -5px;
292    margin-right: 9px;
293    padding: 0;
294    background-color: initial;
295    color: inherit;
296}
297
298audio::-internal-media-controls-cast-button, video::-internal-media-controls-cast-button {
299    -webkit-appearance: -internal-media-cast-off-button;
300    display: flex;
301    flex: none;
302    border: none;
303    box-sizing: border-box;
304    width: 30px;
305    height: 30px;
306    line-height: 30px;
307    margin-left: -5px;
308    margin-right: 9px;
309    padding: 0;
310    background-color: initial;
311    color: inherit;
312}
313
314audio::-webkit-media-controls-toggle-closed-captions-button {
315    display: none;
316}
317
318video::-webkit-media-controls-toggle-closed-captions-button {
319    -webkit-appearance: media-toggle-closed-captions-button;
320    display: flex;
321    flex: none;
322    border: none;
323    box-sizing: border-box;
324    width: 30px;
325    height: 30px;
326    line-height: 30px;
327    margin-left: -5px;
328    margin-right: 9px;
329    padding: 0;
330    background-color: initial;
331    color: inherit;
332}
333
334audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
335    display: none;
336}
337
338audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button {
339    display: none;
340}
341
342audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button {
343    display: none;
344}
345
346video::-webkit-media-text-track-container {
347    position: relative;
348    width: 100%;
349    overflow: hidden;
350    padding-bottom: 5px;
351
352    font: 22px sans-serif;
353    text-align: center;
354    color: rgba(255, 255, 255, 1);
355
356    letter-spacing: normal;
357    word-spacing: normal;
358    text-transform: none;
359    text-indent: 0;
360    text-decoration: none;
361    pointer-events: none;
362    -webkit-user-select: none;
363    word-break: break-word;
364
365    flex: 1 1;
366}
367
368video::cue {
369    display: inline;
370
371    background-color: rgba(0, 0, 0, 0.8);
372    padding: 2px 2px;
373}
374
375video::-webkit-media-text-track-region {
376    position: absolute;
377    line-height: 5.33vh;
378    writing-mode: horizontal-tb;
379    background: rgba(0, 0, 0, 0.8);
380    color: rgba(255, 255, 255, 1);
381    word-wrap: break-word;
382    overflow-wrap: break-word;
383    overflow: hidden;
384}
385
386video::-webkit-media-text-track-region-container {
387    position: relative;
388
389    display: flex;
390    flex-flow: column;
391    flex-direction: column;
392}
393
394video::-webkit-media-text-track-region-container.scrolling {
395    transition: top 433ms linear;
396}
397
398
399video::-webkit-media-text-track-display {
400    position: absolute;
401    overflow: hidden;
402    white-space: pre-wrap;
403    -webkit-box-sizing: border-box;
404    flex: 0 0 auto;
405}
406
407video::cue(:future) {
408    color: gray;
409}
410
411video::-webkit-media-text-track-container b {
412    font-weight: bold;
413}
414
415video::-webkit-media-text-track-container u {
416    text-decoration: underline;
417}
418
419video::-webkit-media-text-track-container i {
420    font-style: italic;
421}
422