1/*
2 * Copyright (C) 2009 Apple Inc.  All rights reserved.
3 * Copyright (C) 2009 Google Inc.
4 * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
5 * Copyright (C) 2012 Igalia S.L.
6 *
7 * Redistribution and use in source and binary forms, with or without
8 * modification, are permitted provided that the following conditions
9 * are met:
10 * 1. Redistributions of source code must retain the above copyright
11 *    notice, this list of conditions and the following disclaimer.
12 * 2. Redistributions in binary form must reproduce the above copyright
13 *    notice, this list of conditions and the following disclaimer in the
14 *    documentation and/or other materials provided with the distribution.
15 *
16 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
17 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
19 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
20 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
21 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
22 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
23 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
24 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26 */
27
28/* These are based on the Chromium media controls */
29
30.hidden {
31    display: none !important;
32}
33
34video::-webkit-media-controls-panel *:active,
35video::-webkit-media-controls-panel *:focus,
36audio::-webkit-media-controls-panel *:active,
37audio::-webkit-media-controls-panel *:focus {
38    background-image: linear-gradient(rgba(0, 0, 0, .05), rgba(255, 255, 255, .05)) !important;
39}
40
41audio::-webkit-media-controls-panel.down *:active,
42audio::-webkit-media-controls-panel.down *:focus {
43    background-image: linear-gradient(rgba(255, 255, 255, .05), rgba(0, 0, 0, .05)) !important;
44}
45
46body:-webkit-full-page-media {
47    background-color: rgb(0, 0, 0);
48}
49
50audio {
51    width: 300px;
52    height: 30px;
53}
54
55audio:-webkit-full-page-media, video:-webkit-full-page-media {
56    max-height: 100%;
57    max-width: 100%;
58}
59
60audio:-webkit-full-page-media::-webkit-media-controls-panel,
61video:-webkit-full-page-media::-webkit-media-controls-panel {
62    bottom: 0px;
63}
64
65::-webkit-media-controls {
66    display: -webkit-flex;
67    -webkit-flex-direction: column;
68    -webkit-justify-content: flex-end;
69    -webkit-align-items: center;
70}
71
72audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
73    width: 100%;
74    max-width: 800px;
75    height: 30px;
76    bottom: 0;
77    text-indent: 0;
78    padding: 0;
79    box-sizing: border-box;
80    overflow: visible;
81}
82
83video::-webkit-media-controls-enclosure {
84    padding: 5px;
85    height: 40px;
86}
87
88audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
89    display: -webkit-flex;
90    -webkit-flex-direction: row;
91    -webkit-align-items: center;
92    -webkit-justify-content: flex-start;
93    bottom: auto;
94    height: 30px;
95    background-color: rgba(20, 20, 20, 0.8);
96    border-radius: 5px;
97    overflow: visible;
98    transition: opacity 0.25s linear;
99}
100
101video::-webkit-media-controls-panel {
102    opacity: 0;
103}
104
105audio::-webkit-media-controls-panel,
106video:-webkit-full-page-media::-webkit-media-controls-panel.no-video,
107video::-webkit-media-controls-panel:hover,
108video::-webkit-media-controls-panel.show,
109video::-webkit-media-controls-panel.paused {
110    opacity: 1;
111}
112
113video::-webkit-media-controls-panel div.mute-box,
114audio::-webkit-media-controls-panel div.mute-box {
115    display: -webkit-flex;
116    -webkit-flex: none;
117    box-sizing: border-box;
118    width: 30px;
119    height: 30px;
120    margin: 0 9px 0 -7px;
121}
122
123audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
124    -webkit-appearance: media-mute-button;
125    display: -webkit-flex;
126    -webkit-flex: none;
127    border: none;
128    box-sizing: border-box;
129    width: 30px;
130    height: 30px;
131    line-height: 30px;
132    outline: none;
133}
134
135audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
136    -webkit-appearance: media-play-button;
137    display: -webkit-flex;
138    -webkit-flex: none;
139    border: none;
140    box-sizing: border-box;
141    width: 30px;
142    height: 30px;
143    line-height: 30px;
144    margin: 0 9px;
145    outline: none;
146}
147
148audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
149audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
150    -webkit-appearance: media-current-time-display;
151    -webkit-user-select: none;
152    -webkit-flex: none;
153    display: block;
154    border: none;
155    cursor: default;
156
157    height: 30px;
158    margin: 0 15px 0 0;
159
160    line-height: 30px;
161    font-family: -webkit-small-control;
162    font-size: 13px;
163    font-weight: normal;
164    font-style: normal;
165    color: white;
166
167    letter-spacing: normal;
168    word-spacing: normal;
169    text-transform: none;
170    text-indent: 0;
171    text-shadow: none;
172    text-decoration: none;
173}
174
175audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
176    -webkit-appearance: media-slider;
177    display: -webkit-flex;
178    -webkit-flex: 1 1 auto;
179    height: 8px;
180    margin: 0 15px 0 1px;
181    padding: 0;
182    background-color: transparent;
183    min-width: 25px;
184    border-radius: 4px;
185    color: rgba(230, 230, 230, 0.35);
186    outline: none;
187}
188
189audio::-webkit-media-controls-timeline[disabled], video::-webkit-media-controls-timeline[disabled] {
190    opacity: 0.3;
191}
192
193audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
194    -webkit-appearance: media-volume-slider-container;
195    display: -webkit-flex;
196    overflow: hidden;
197    position: absolute;
198    padding: 0;
199    height: 100px;
200    width: 30px;
201    bottom: 30px;
202    z-index: 2;
203    background-color: rgba(20, 20, 20, 0.8);
204    right: 9px;
205    border-radius: 5px 5px 0px 0px;
206    transition: height 0.10s linear;
207}
208
209audio::-webkit-media-controls-volume-slider-container.hiding,
210video::-webkit-media-controls-volume-slider-container.hiding {
211    height: 0;
212}
213
214audio::-webkit-media-controls-volume-slider-container.down,
215video::-webkit-media-controls-volume-slider-container.down {
216    bottom: -100px;
217    border-radius: 0px 0px 5px 5px;
218    transition: height 0.10s linear, bottom 0.10s linear;
219}
220
221audio::-webkit-media-controls-panel .hiding.down,
222video::-webkit-media-controls-panel .hiding.down {
223    bottom: 0;
224}
225
226audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
227    -webkit-appearance: media-volume-slider;
228    display: -webkit-flex;
229    -webkit-align-items: center;
230    -webkit-flex-direction: column;
231    box-sizing: border-box;
232    height: 80px;
233    width: 8px;
234    margin: 10px auto;
235    border-radius: 4px;
236    background-color: transparent;
237    color: rgba(230, 230, 230, 0.35);
238    outline: none;
239}
240
241audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div {
242    margin: -7px 0;
243}
244
245audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb {
246    -webkit-appearance: media-volume-sliderthumb;
247    width: 12px;
248    height: 12px;
249    border-radius: 3px;
250    color: white;
251    margin: 0;
252}
253
254input[type="range"]::-webkit-media-slider-container {
255    display: -webkit-flex;
256    -webkit-align-items: center;
257    -webkit-flex-direction: row; /* This property is updated by C++ code. */
258    box-sizing: border-box;
259    height: 100%;
260    width: 100%;
261    border: 1px solid rgba(230, 230, 230, 0.35);
262    border-radius: 4px;
263    background-color: transparent;
264}
265
266/* The negative right margin causes the track to overflow its container. */
267input[type="range"]::-webkit-media-slider-container > div {
268    margin-right: -14px;
269}
270
271input[type="range"]::-webkit-media-slider-thumb {
272    -webkit-appearance: media-sliderthumb;
273    width: 12px;
274    height: 12px;
275    border-radius: 3px;
276    color: white;
277    margin-left: -7px;
278    margin-right: -7px;
279}
280
281audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
282    -webkit-appearance: media-toggle-closed-captions-button;
283    display: -webkit-flex;
284    -webkit-flex: none;
285    border: none;
286    box-sizing: border-box;
287    width: 30px;
288    height: 30px;
289    line-height: 30px;
290    margin: 0 9px 0 -7px;
291    outline: none;
292}
293
294video::-webkit-media-controls-closed-captions-container {
295    -webkit-appearance: media-closed-captions-container;
296    display: -webkit-flex;
297    position: absolute;
298    bottom: 35px;
299    z-index: 2;
300    background-color: rgba(20, 20, 20, 0.8);
301    border-radius: 5px 5px 0px 0px;
302    overflow: hidden;
303    max-width: -webkit-calc(100% - 48px); /* right + 10px */
304    max-height: -webkit-calc(100% - 35px); /* bottom + 10px */
305    cursor: default;
306    font-family: -webkit-small-control;
307    font-size: 10pt;
308    font-weight: normal;
309    font-style: normal;
310    color: white;
311    -webkit-user-select: none;
312    transition: height 0.10s linear;
313}
314
315video::-webkit-media-controls-closed-captions-container.out {
316    border-radius: 5px;
317}
318
319video::-webkit-media-controls-closed-captions-container h3 {
320    padding-top: 8px;
321    margin: 0;
322    padding-left: 17px;
323    padding-right: 15px;
324    font-size: 10pt;
325    font-weight: bold;
326    font-style: normal;
327}
328
329video::-webkit-media-controls-closed-captions-container ul {
330    list-style-type: none;
331    margin: 0 0 4px 0;
332    padding: 4px 0 0 0;
333}
334
335video::-webkit-media-controls-closed-captions-container li {
336    position: relative;
337    color: white;
338    margin: 0;
339    padding-left: 17px;
340    padding-right: 15px;
341    padding-top: 0.15em;
342    padding-bottom: 0.2em;
343    box-sizing: border-box;
344    overflow: hidden;
345    white-space: nowrap;
346    text-overflow: ellipsis;
347    outline: none;
348}
349video::-webkit-media-controls-closed-captions-container li.selected {
350    background-color: rgba(230, 230, 230, 0.15);
351}
352
353audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
354    -webkit-appearance: media-enter-fullscreen-button;
355    display: -webkit-flex;
356    -webkit-flex: none;
357    border: none;
358    box-sizing: border-box;
359    width: 30px;
360    height: 30px;
361    line-height: 30px;
362    margin: 0 9px 0 -7px;
363    outline: none;
364}
365