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