c0dac35fae18c99dff9537e84e1088ae75266ed5
[WebKit-https.git] / Source / WebCore / Modules / mediacontrols / mediaControlsApple.css
1 /*
2  * Copyright (C) 2013, 2014, 2015 Apple Inc.  All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
17  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
20  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
21  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
22  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 
23  */
24
25 audio {
26     width: 200px;
27     height: 25px;
28 }
29
30 body:-webkit-full-page-media {
31     background-color: rgb(38, 38, 38);
32 }
33
34 video:-webkit-full-page-media {
35     margin: auto;
36     position: absolute;
37     top: 0;
38     right: 0;
39     bottom: 0;
40     left: 0;
41 }
42
43 video:-webkit-full-page-media::-webkit-media-controls-panel {
44     bottom: 0px;
45 }
46
47 video:-webkit-full-page-media::-webkit-media-controls-panel.no-video {
48     opacity: 1;
49 }
50
51 ::-webkit-media-controls {
52     width: inherit;
53     height: inherit;
54     position: relative;
55     display: -webkit-flex;
56     -webkit-align-items: stretch;
57     -webkit-justify-content: flex-end;
58     -webkit-flex-direction: column;
59     font: -webkit-small-control;
60     white-space: nowrap;
61     -webkit-font-smoothing: subpixel-antialiased;
62 }
63
64 video::-webkit-media-text-track-container,
65 audio::-webkit-media-text-track-container {
66     position: relative;
67     -webkit-flex: 1 1 auto;
68 }
69
70 video::-webkit-media-controls-panel,
71 audio::-webkit-media-controls-panel {
72     box-sizing: border-box;
73     position: relative;
74     bottom: 0;
75     width: 100%;
76     min-height: 45px;
77     height: 45px;
78     line-height: 25px;
79     -webkit-user-select: none;
80     -webkit-user-drag: element;
81     background-color: transparent;
82     padding-top: 20px;
83
84     display: -webkit-flex;
85     -webkit-flex-direction: row;
86     -webkit-align-items: center;
87     -webkit-user-select: none;
88
89     direction: ltr;
90
91     transition: opacity 0.25s linear;
92 }
93
94 video::-webkit-media-controls-panel {
95     cursor: none;
96     opacity: 0;
97 }
98
99 video::-webkit-media-controls-panel.show,
100 video::-webkit-media-controls-panel.paused,
101 video::-webkit-media-controls-panel:hover {
102     cursor: inherit;
103     opacity: 1;
104 }
105
106 video::-webkit-media-controls-panel-background-container,
107 audio::-webkit-media-controls-panel-background-container {
108     position: absolute;
109     left: 0;
110     top: 0;
111     width: 100%;
112     min-height: 45px;
113     height: 45px;
114     -webkit-clip-path: inset(20px 0px 0px 0px);
115 }
116
117 audio::-webkit-media-controls-panel-background-container {
118     background-color: black;
119 }
120
121 video::-webkit-media-controls-panel-tint,
122 audio::-webkit-media-controls-panel-tint {
123     position: absolute;
124     left: 0;
125     top: 0;
126     width: 100%;
127     min-height: 45px;
128     height: 45px;
129     background-color: rgb(41, 41, 41);
130     mix-blend-mode: lighten;
131 }
132
133 video::-webkit-media-controls-panel-background,
134 audio::-webkit-media-controls-panel-background {
135     position: absolute;
136     left: 0;
137     top: 0;
138     width: 100%;
139     min-height: 45px;
140     height: 45px;
141     background-color: rgba(30, 30, 30, 0.45);
142     -webkit-backdrop-filter: saturate(180%) blur(20px);
143 }
144
145 video::-webkit-media-controls-panel button,
146 audio::-webkit-media-controls-panel button {
147     -webkit-appearance: none;
148     display: block;
149     padding: 0;
150     border: 0;
151     height: 15px;
152     background-color: transparent;
153     color: white;
154     background-origin: content-box;
155     background-repeat: no-repeat;
156     background-position: center;
157     -webkit-transform: translateZ(0);
158     mix-blend-mode: plus-lighter;
159 }
160
161 video::-webkit-media-controls-panel button:focus,
162 audio::-webkit-media-controls-panel button:focus {
163     outline: 0;
164 }
165
166 video::-webkit-media-controls-rewind-button,
167 audio::-webkit-media-controls-rewind-button {
168     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17" fill="rgba(255,255,255,0.45)"><path d="m 7.9131,2 0,-1.548 -2.586,2.155 0,-2.171 -2.582,2.208 2.582,2.175 0,-2.139 2.586,2.155 0,-1.276 c 3.138,0.129 5.491,2.681 5.543,5.838 l -1.031,0 0.016,0.215 1.015,0 c -0.06,3.19 -2.629,5.765 -5.819,5.833 l 0,-1.018 -0.214,0 0,1.021 c -3.21,-0.047 -5.801,-2.631 -5.862,-5.836 l 1.045,0 -0.016,-0.215 -1.045,0 c -0.052,-0.288 -0.318,-0.654 -0.766,-0.654 -0.538,0 -0.755,0.484 -0.755,0.75 0,4.146 3.331,7.506 7.476,7.506 4.146,0 7.506,-3.36 7.506,-7.506 0,-4.059 -3.066,-7.357 -7.093,-7.493"/><path d="m 5.1729,11.0518 c -0.38,0 -0.668,-0.129 -0.945,-0.366 -0.083,-0.071 -0.186,-0.134 -0.338,-0.134 -0.277,0 -0.511,0.238 -0.511,0.521 0,0.154 0.083,0.301 0.179,0.383 0.394,0.346 0.911,0.563 1.601,0.563 1.077,0 1.739,-0.451 1.739,-1.608 l 0,-0.013 c 0,-0.911 -0.641,-1.265 -1.296,-1.376 l 0.945,-0.919 c 0.193,-0.19 0.317,-0.337 0.317,-0.604 0,-0.294 -0.228,-0.477 -0.538,-0.477 l -2.354,0 c -0.248,0 -0.455,0.21 -0.455,0.464 0,0.253 0.207,0.463 0.455,0.463 l 1.485,0 -0.939,0.961 c -0.166,0.169 -0.228,0.295 -0.228,0.444 0,0.25 0.207,0.463 0.455,0.463 l 0.166,0 c 0.594,0 0.945,0.222 0.945,0.624 l 0,0.012 c 0,0.367 -0.282,0.599 -0.453,0.599"/><path d="m 10.354,9.5342 c 0,0.876 -0.379,1.525 -0.979,1.525 -0.599,0 -0.992,-0.655 -0.992,-1.539 l 0,-0.012 c 0,-0.884 0.388,-1.527 0.979,-1.527 0.592,0 0.992,0.663 0.992,1.539 l 0,0.014 z m -0.979,-2.512 c -1.197,0 -2.008,1.097 -2.008,2.498 l 0,0.014 c 0,1.401 0.792,2.484 1.995,2.484 1.205,0 2.01,-1.097 2.01,-2.498 l 0,-0.012 c 0,-1.402 -0.805,-2.486 -1.997,-2.486"/></svg>');
169     width: 16px;
170     min-width: 16px;
171     height: 18px;
172     margin-bottom: 1px;
173     margin-left: 16px;
174 }
175
176 video::-webkit-media-controls-play-button,
177 audio::-webkit-media-controls-play-button {
178     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="rgba(255,255,255,0.45)"><rect x="0" y="1" width="4" height="13"/><rect x="8" y="1" width="4" height="13"/></svg>');
179     margin-left: 16px;
180     width: 12px;
181     min-width: 12px;
182 }
183
184 video::-webkit-media-controls-play-button.paused,
185 audio::-webkit-media-controls-play-button.paused {
186     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="rgba(255,255,255,0.45)"><path d="M 0,1 12,7.5 0,14 z"/></svg>');
187     width: 12px;
188 }
189
190 video::-webkit-media-controls-panel .mute-box,
191 audio::-webkit-media-controls-panel .mute-box {
192     width: 14px;
193     min-width: 14px;
194     height: 25px;
195     margin-right: 16px;
196     position: relative;
197     display: -webkit-flex;
198     -webkit-flex-direction: column;
199     -webkit-justify-content: center;
200     -webkit-align-items: center;
201 }
202
203 video::-webkit-media-controls-mute-button,
204 audio::-webkit-media-controls-mute-button,
205 video::-webkit-media-controls-volume-max-button {
206     width: 14px;
207     min-width: 14px;
208     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.45)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.45)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.45)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
209 }
210
211 video::-webkit-media-controls-panel .volume-box,
212 audio::-webkit-media-controls-panel .volume-box {
213     position: absolute;
214     box-sizing: border-box;
215     height: 63px;
216     bottom: 0;
217     left: 0;
218     
219     -webkit-clip-path: inset(20px 20px 20px 20px round 0px 4px 4px 0px);
220     -webkit-transform: rotate(-90deg) translateY(-51.5px) translateX(31.5px);
221
222     background-color: transparent;
223     border-bottom-right-radius: 4px;
224     border-top-right-radius: 4px;
225
226     display: -webkit-flex;
227     -webkit-flex-direction: row;
228     -webkit-align-items: center;
229     -webkit-justify-content: flex-end;
230
231     opacity: 0;
232     /* make zero width (rather than display:none) for AX and FKA */
233     width: 0; /* will become 101px when shown */
234
235 }
236
237 audio::-webkit-media-controls-panel .volume-box {
238     background-color: black;
239 }
240
241 video::-webkit-media-controls-volume-slider-container-background,
242 audio::-webkit-media-controls-volume-slider-container-background {
243     position: absolute;
244     left: 0;
245     top: 0;
246     width: 100%;
247     height: 100%;
248     border-bottom-right-radius: 4px;
249     border-top-right-radius: 4px;
250     background-color: rgba(30, 30, 30, 0.45);
251     -webkit-backdrop-filter: saturate(180%) blur(20px);
252 }
253
254 video::-webkit-media-controls-volume-slider-container-tint,
255 audio::-webkit-media-controls-volume-slider-container-tint {
256     position: absolute;
257     left: 0;
258     top: 0;
259     height: 100%;
260     width: 100%;
261     border-bottom-right-radius: 4px;
262     border-top-right-radius: 4px;
263     background-color: rgb(41, 41, 41);
264     mix-blend-mode: lighten;
265 }
266
267 /* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */
268 video::-webkit-media-controls-panel .mute-box:hover .volume-box,
269 video::-webkit-media-controls-panel .volume-box:hover,
270 video::-webkit-media-controls-panel .volume-box:active,
271 audio::-webkit-media-controls-panel .mute-box:hover .volume-box,
272 audio::-webkit-media-controls-panel .volume-box:hover,
273 audio::-webkit-media-controls-panel .volume-box:active {
274     opacity: 1;
275     /* resize to usable amount (rather than display:none) for AX and FKA */
276     width: 116px;
277 }
278
279 audio::-webkit-media-controls-volume-slider,
280 video::-webkit-media-controls-volume-slider {
281     -webkit-appearance: none !important;
282     box-sizing: border-box !important;
283     height: 9px !important;
284     width: 64px !important;
285     padding: 0 !important;
286     margin-right: 30px !important;
287
288     background-color: transparent !important;
289     background-size: 100% 100%;
290     background-repeat: no-repeat;
291     mix-blend-mode: plus-lighter;
292 }
293
294 video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
295 audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
296     -webkit-appearance: none !important;
297     width: 7px !important;
298     height: 7px !important;
299     visibility: hidden;
300 }
301
302 video::-webkit-media-controls-mute-button.muted,
303 audio::-webkit-media-controls-mute-button.muted,
304 video::-webkit-media-controls-volume-min-button {
305     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.45)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.45)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.45)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/></svg>');
306 }
307
308 video::-webkit-media-controls-wireless-playback-picker-button,
309 audio::-webkit-media-controls-wireless-playback-picker-button {
310     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.45)"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0.5 L 16,0.5 L 16,15.5 L 0,15.5 z M 0,14.5 L 16,14.5 L 8,5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="2" width="15" height="8"/><path stroke="none" fill="rgba(255,255,255,0.45)" d="M 3.5,13.25 L 12.5,13.25 L 8,8 z"/></svg>');
311     margin-right: 16px;
312     width: 16px;
313     min-width: 16px;
314 }
315
316 video::-webkit-media-controls-wireless-playback-picker-button.playing,
317 audio::-webkit-media-controls-wireless-playback-picker-button.playing {
318     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgb(0,172,245)"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0.5 L 16,0.5 L 16,15.5 L 0,15.5 z M 0,14.5 L 16,14.5 L 8,5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="2" width="15" height="8"/><path stroke="none" fill="rgb(0,172,245)" d="M 3.5,13.25 L 12.5,13.25 L 8,8 z"/></svg>');
319 }
320
321 video::-webkit-media-controls-toggle-closed-captions-button,
322 audio::-webkit-media-controls-toggle-closed-captions-button {
323     width: 16px;
324     min-width: 16px;
325     margin-right: 16px;
326     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="rgba(255,255,255,0.45)"  fill="none"><defs> <clipPath id="cut-hole"><rect x="0" y="1" width="16" height="10"/><rect x="0" y="11" width="9" height="1"/><rect x="11" y="11" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="1.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,6.5 h 4"/><path d="M 7,6.5 h 7"/><path d="M 3,8.5 h 2"/><path d="M 6,8.5 h 3"/><path d="M 10,8.5 h 3"/><path d="M 8.5,11.5 L 8.5,13.75 L 11,11"/></svg>');
327     outline: 0;
328 }
329
330 video::-webkit-media-controls-closed-captions-container,
331 audio::-webkit-media-controls-closed-captions-container {
332     -webkit-appearance: media-closed-captions-container;
333     position: absolute;
334     display: block;
335     right: 38px;
336     bottom: 29px;
337     max-width: calc(100% - 48px); /* right + 10px */
338     max-height: calc(100% - 39px); /* bottom + 10px */
339     overflow-x: hidden;
340     overflow-y: scroll;
341     background-color: rgba(0, 0, 0, 0.8);
342     border: 1px solid rgba(128, 128, 128, 0.75);
343     border-radius: 6px;
344     cursor: default;
345     z-index: 2;
346     text-align: initial;
347 }
348
349 video::-webkit-media-controls-closed-captions-container .list,
350 audio::-webkit-media-controls-closed-captions-container .list {
351     display: block;
352     -webkit-user-select: none;
353 }
354
355 video::-webkit-media-controls-closed-captions-container h3,
356 audio::-webkit-media-controls-closed-captions-container h3 {
357     margin: 0;
358     color: rgb(140, 140, 140);
359     text-shadow: 0 1px 0 black;
360     -webkit-margin-start: 16px;
361     padding-top: 4px;
362     font-size: 11px;
363 }
364
365 video::-webkit-media-controls-closed-captions-container ul,
366 audio::-webkit-media-controls-closed-captions-container ul {
367     list-style-type: none;
368     margin: 0 0 8px 0;
369     padding: 0;
370 }
371
372 video::-webkit-media-controls-closed-captions-container li,
373 audio::-webkit-media-controls-closed-captions-container li {
374     position: relative;
375     color: white;
376     background-image: none;
377     text-shadow: 0 1px 0 black;
378     margin: 0;
379     padding-left: 28px;
380     padding-right: 28px;
381     padding-top: 0.15em;
382     padding-bottom: 0.2em;
383     box-sizing: border-box;
384     overflow: hidden;
385     white-space: nowrap;
386     text-overflow: ellipsis;
387     border-top: 1px solid transparent;
388     border-bottom: 1px solid transparent;
389 }
390
391 video::-webkit-media-controls-closed-captions-container li:focus,
392 audio::-webkit-media-controls-closed-captions-container li:focus {
393     outline: 0;
394     background-color: rgba(140, 140, 140, 0.5);
395 }
396
397 video::-webkit-media-controls-closed-captions-container li:hover,
398 audio::-webkit-media-controls-closed-captions-container li:hover {
399     background-color: rgba(26, 68, 243, 0.6);
400 }
401
402 video::-webkit-media-controls-closed-captions-container li.selected::before,
403 audio::-webkit-media-controls-closed-captions-container li.selected::before {
404     display: block;
405     content: "";
406     position: absolute;
407     top: 0.25em;
408     width: 1.1em;
409     height: 1.1em;
410     -webkit-margin-start: -20px;
411     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgb(163, 163, 163)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
412     background-repeat: no-repeat;
413 }
414
415 video::-webkit-media-controls-closed-captions-container li.selected:hover::before,
416 audio::-webkit-media-controls-closed-captions-container li.selected:hover::before {
417     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgba(255,255,255,0.45)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
418 }
419
420 video::-webkit-media-controls-fullscreen-button,
421 audio::-webkit-media-controls-fullscreen-button {
422     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.45)" stroke-width="1.25" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
423     margin-right: 7px;
424     width: 14px;
425     min-width: 14px;
426 }
427
428 video::-webkit-media-controls-fullscreen-button.exit,
429 audio::-webkit-media-controls-fullscreen-button.exit {
430     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.45)" stroke-width="1.25" fill="none"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
431     margin-right: 11px;
432     margin-top: 6px;
433 }
434
435 video::-webkit-media-controls-optimized-fullscreen-button,
436 audio::-webkit-media-controls-optimized-fullscreen-button {
437     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" transform="rotate(90,0,0)"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(216, 216, 216)"/><stop offset="0.4375" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(208, 208, 208)"/><stop offset="0.5" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 7,8 m 0,6 -2,-2 -2,2 c 0,0 -1,1 -2,0 -1,-1 0,-2 0,-2 l 2,-2 -2,-2 6,0 z" style="fill:url(#gradient) "/><path d="M 8,7 m 0,-6 2,2 2,-2 c 0,0 1,-1 2,0 1,1 0,2 0,2 l -2,2 2,2 -6,0 z" style="fill:url(#gradient) "/></svg>');
438     margin: 0 7px;
439 }
440
441 video::-webkit-media-controls-status-display,
442 audio::-webkit-media-controls-status-display {
443     cursor: default;
444     overflow: hidden;
445     color: white;
446     opacity: .45;
447     mix-blend-mode: plus-lighter;
448
449     letter-spacing: normal;
450     word-spacing: normal;
451     line-height: 25px;
452     text-transform: none;
453     text-indent: 0;
454     text-decoration: none;
455     text-align: left;
456
457     padding: 0 12px;
458
459     -webkit-flex: 1 1 0;
460 }
461 video::-webkit-media-controls-timeline,
462 audio::-webkit-media-controls-timeline {
463     -webkit-appearance: none !important;
464     -webkit-flex: 1 1 0 !important;
465     height: 17px !important;
466     margin: 0 !important;
467     background-size: 100% 100% !important;
468     background-repeat: no-repeat;
469     background-color: transparent;
470     mix-blend-mode: plus-lighter;
471
472 }
473 video::-webkit-media-controls-timeline::-webkit-slider-thumb,
474 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
475     -webkit-appearance: none !important;
476     width:3px !important;
477     height: 15px !important;
478 }
479  
480 video::-webkit-media-controls-current-time-display,
481 video::-webkit-media-controls-time-remaining-display,
482 audio::-webkit-media-controls-current-time-display,
483 audio::-webkit-media-controls-time-remaining-display {
484     -webkit-user-select: none;
485     -webkit-flex: 0 0 0;
486     display: -webkit-flex;
487     cursor: default;
488     overflow-y: hidden;
489     overflow-x: hidden;
490     color: white;
491     opacity: .45;
492     letter-spacing: normal;
493     word-spacing: normal;
494     line-height: normal;
495     text-transform: none;
496     text-indent: 0px;
497     text-decoration: none;
498     position: relative;
499     bottom: 0.5px;
500     font-family: -apple-system-monospaced-numbers;
501     -webkit-text-size-adjust:none;
502     mix-blend-mode: plus-lighter;
503 }
504
505 video::-webkit-media-controls-current-time-display,
506 audio::-webkit-media-controls-current-time-display {
507     margin-left: 8px;
508     margin-right: 8px;
509     width: 32px;
510     min-width: 32px;
511     -webkit-justify-content: flex-end;
512 }
513
514 video::-webkit-media-controls-time-remaining-display,
515 audio::-webkit-media-controls-time-remaining-display {
516     margin-left: 8px;
517     margin-right: 16px;
518     width: 37px;
519     min-width: 37px;
520     -webkit-justify-content: flex-start;
521 }
522
523 video::-webkit-media-controls-time-remaining-display.five-digit-time,
524 audio::-webkit-media-controls-time-remaining-display.five-digit-time {
525     min-width: 47px;
526 }
527
528 video::-webkit-media-controls-current-time-display.five-digit-time,
529 audio::-webkit-media-controls-current-time-display.five-digit-time {
530     min-width: 42px;
531 }
532
533 video::-webkit-media-controls-time-remaining-display.six-digit-time,
534 audio::-webkit-media-controls-time-remaining-display.six-digit-time {
535     min-width: 54px;
536 }
537
538 video::-webkit-media-controls-current-time-display.six-digit-time,
539 audio::-webkit-media-controls-current-time-display.six-digit-time {
540     min-width: 49px;
541 }
542
543 video::-webkit-media-controls-timeline-container,
544 audio::-webkit-media-controls-timeline-container {
545     display: -webkit-flex;
546     -webkit-flex-direction: row;
547     -webkit-align-items: center;
548     -webkit-user-select: none;
549     -webkit-flex: 1 1 0;
550     position: relative;
551     padding: 0;
552 }
553
554 video::-webkit-media-controls-panel .thumbnail-track,
555 audio::-webkit-media-controls-panel .thumbnail-track {
556     position: relative;
557     -webkit-flex: 1 1 0;
558     height: 17 px;
559     margin: 0 2px;
560     display: -webkit-flex;
561     -webkit-align-items: stretch;
562     -webkit-flex-direction: column;
563 }
564
565 video::-webkit-media-controls-panel .thumbnail,
566 audio::-webkit-media-controls-panel .thumbnail {
567     position: absolute;
568     opacity: 0;
569     transition: opacity 0.25s linear;
570     bottom: 15px;
571     width: 100px;
572     height: 58px;
573     margin-left: -50px;
574     border: 5px solid black;
575     box-shadow: 0 0 3px white;
576     border-radius: 3px;
577 }
578
579 video::-webkit-media-controls-panel .thumbnail-image,
580 audio::-webkit-media-controls-panel .thumbnail-image {
581     width: 100%;
582     height: 100%;
583 }
584
585 video::-webkit-media-controls-panel .thumbnail.show,
586 audio::-webkit-media-controls-panel .thumbnail.show {
587     opacity: 1;
588 }
589
590 video::-webkit-media-controls-panel.hidden,
591 audio::-webkit-media-controls-panel.hidden {
592     display: none;
593 }
594
595 video::-webkit-media-controls-panel .hidden,
596 audio::-webkit-media-controls-panel .hidden {
597     display: none;
598 }
599
600 /* Full Screen */
601
602 /* 
603     Page stylesheets are not allowed to override the style of media
604     controls while in full screen mode, so many if not all the rules
605     defined in this section will be marked as !important to enforce
606     this restriction 
607 */
608
609 video:-webkit-full-screen::-webkit-media-controls-panel {
610     -webkit-align-items: flex-start !important;
611     -webkit-justify-content: flex-end !important;
612     -webkit-clip-path: inset(20px round 6px);
613     
614     width: 480px !important;
615     height: 104px !important;
616     margin: 0 auto 32px auto !important;
617     padding: 20px;
618     padding-top: 30px !important;
619
620     background-color: transparent;
621     border-radius: 6px !important;
622
623     transition: opacity 0.3s linear !important;
624 }
625
626 video:-webkit-full-screen::-webkit-media-controls-panel-tint,
627 audio:-webkit-full-screen::-webkit-media-controls-panel-tint {
628     position: absolute;
629     left: 0;
630     top: 0;
631     width: 480px !important;
632     height: 104px !important;
633     border-radius: 6px !important;
634     background-color: rgb(41, 41, 41);
635     mix-blend-mode: lighten;
636 }
637
638 video:-webkit-full-screen::-webkit-media-controls-panel-background,
639 audio:-webkit-full-screen::-webkit-media-controls-panel-background {
640     position: absolute;
641     left: 0;
642     top: 0;
643     width: 480px !important;
644     height: 104px !important;
645     border-radius: 6px !important;
646     background-color: rgba(30, 30, 30, 0.45);
647     -webkit-backdrop-filter: saturate(180%) blur(20px);
648 }
649
650 video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
651     opacity: 0 ! important;
652     transition: opacity 0 ! important;
653 }
654
655 video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
656     -webkit-transform: none;
657     -webkit-clip-path: none;
658     opacity: 1;
659     left: 32px;
660     top: 35px;
661     width: 96px;
662     height: 17px;
663     display: -webkit-flex;
664     -webkit-flex-direction: row;
665     -webkit-align-items: center;
666     background-color: transparent;
667     border: none;
668 }
669
670 video:-webkit-full-screen::-webkit-media-controls-volume-slider {
671     background-color: transparent;
672     width: 60px !important;
673     margin: 0 !important;
674 }
675
676 video:-webkit-full-screen::-webkit-media-controls-mute-button,
677 audio:-webkit-full-screen::-webkit-media-controls-mute-button,
678 video:-webkit-full-screen::-webkit-media-controls-volume-max-button {
679     width: 14px !important;
680     margin-left: 6px !important;
681     margin-bottom: 2px !important;
682     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.45)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.45)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.45)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
683 }
684 video:-webkit-full-screen::-webkit-media-controls-mute-button,
685 audio:-webkit-full-screen::-webkit-media-controls-mute-button,
686 video:-webkit-full-screen::-webkit-media-controls-volume-min-button {
687     width: 14px !important;
688     margin-right: 2px !important;
689     margin-bottom: 2px !important;
690     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="rgba(255,255,255,0.45)" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="rgba(255,255,255,0.45)" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="rgba(255,255,255,0.45)" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/></svg>');
691 }
692
693 video:-webkit-full-screen::-webkit-media-controls-play-button {
694     position: absolute;
695     
696     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="rgba(255,255,255,0.45)"><path d="M 0,0 0,22 8,22 8,0 z"/><path d="M 13,0 13,22 21,22 21,0 z"/></svg>');
697
698     width: 21px;
699     height: 23px;
700     left: 230px;
701     top: 32px;
702     margin: 0;
703     padding: 0;
704 }
705
706 video:-webkit-full-screen::-webkit-media-controls-play-button.paused {
707     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="rgba(255,255,255,0.45)"><path d="M 0,0 21,11.5 0,23 z"/></svg>');
708 }
709
710 video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
711     position: absolute;
712
713     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="rgba(255,255,255,0.45)"><path d="M 24,0 12,7 24,15 z"/><path d="M 12,0 0,7 12,15 z"/></svg>');
714
715     width: 24px;
716     height: 15px;
717     left: 176px;
718     top: 36px;
719 }
720
721 video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
722     position: absolute;
723     display: -webkit-flex;
724     width: 29px;
725     height: 16px;
726     left: 262px;
727     top: 13px;
728 }
729
730 video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
731     position: absolute;
732
733     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="rgba(255,255,255,0.45)"><path d="M 0,0 12,7 0,15 z"/><path d="M 12,0 24,7 12,15 z"/></svg>');
734
735     width: 24px;
736     height: 15px;
737     left: 275px;
738     top: 36px;
739 }
740
741 video:-webkit-full-screen::-webkit-media-controls-timeline-container {
742     height: auto;
743     width: 440px;
744     position: absolute;
745     bottom: 28px;
746     left: 20px;
747 }
748
749 video:-webkit-full-screen::-webkit-media-controls-current-time-display {
750     margin-left: 12px;
751 }
752
753 video:-webkit-full-screen::-webkit-media-controls-time-remaining-display {
754     margin-right: 12px;
755 }
756
757 video:-webkit-full-screen::-webkit-media-controls-status-display {
758     width: 440px;
759     position: absolute;
760     bottom: 25px;
761     text-align: center;
762     padding: 0;
763     left: 20px;
764 }
765
766 video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
767 audio:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button {
768     margin-top: 6px;
769     margin-right:24px;
770 }
771
772 video:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button,
773 audio:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button {
774     margin-top: 6px;
775     margin-right:24px;
776 }
777
778 video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
779     bottom: 100px;
780     right: calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */
781     max-width: calc(50% + 173px); /* right + 10px */
782     max-height: calc(100% - 124px); /* bottom + 10px */
783 }
784
785 video::-webkit-media-text-track-container {
786     position: relative;
787     width: 100%;
788     overflow: hidden;
789     padding-bottom: 5px;
790
791     text-align: center;
792     color: rgba(255, 255, 255, 1);
793
794     letter-spacing: normal;
795     word-spacing: normal;
796     text-transform: none;
797     text-indent: 0;
798     text-decoration: none;
799     pointer-events: none;
800     -webkit-user-select: none;
801
802     -webkit-flex: 1 1;
803
804     -webkit-line-box-contain: block inline-box replaced;
805 }
806
807 video::cue {
808     background-color: rgba(0, 0, 0, 0.8);
809 }
810
811 video::-webkit-media-text-track-display {
812     position: absolute;
813     overflow: hidden;
814     white-space: pre-wrap;
815     -webkit-box-sizing: border-box;
816     font: 22px sans-serif;
817 }
818
819 video::-webkit-media-text-track-display-backdrop {
820     display: inline-block;
821 }
822
823 video::cue(:future) {
824     color: gray;
825 }
826
827 video::-webkit-media-text-track-container b {
828     font-weight: bold;
829 }
830
831 video::-webkit-media-text-track-container u {
832     text-decoration: underline;
833 }
834
835 video::-webkit-media-text-track-container i {
836     font-style: italic;
837 }
838
839 video::-webkit-media-text-track-container .hidden,
840 audio::-webkit-media-text-track-container .hidden {
841     display: none;
842 }
843
844 /* ============ ACTIVE VERSIONS OF ALL BUTTONS ============= */
845
846 video::-webkit-media-controls-mute-button:active,
847 audio::-webkit-media-controls-mute-button:active,
848 video::-webkit-media-controls-volume-max-button:active {
849     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="white" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="white" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
850 }
851
852 video::-webkit-media-controls-panel button.muted:active,
853 audio::-webkit-media-controls-panel button.muted:active,
854 video::-webkit-media-controls-volume-min-button:active {
855     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="white" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="white" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/></svg>');
856 }
857
858 video::-webkit-media-controls-toggle-closed-captions-button:active,
859 audio::-webkit-media-controls-toggle-closed-captions-button:active {
860     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="white"  fill="none"><defs> <clipPath id="cut-hole"><rect x="0" y="1" width="16" height="10"/><rect x="0" y="11" width="9" height="1"/><rect x="11" y="11" width="5" height="1"/></clipPath></defs> <rect x="0.5" y="1.5" rx="1" ry="1" width="15" height="10" clip-path="url(#cut-hole)"/><path d="M 2,6.5 h 4"/><path d="M 7,6.5 h 7"/><path d="M 3,8.5 h 2"/><path d="M 6,8.5 h 3"/><path d="M 10,8.5 h 3"/><path d="M 8.5,11.5 L 8.5,13.75 L 11,11"/></svg>');
861 }
862
863 video::-webkit-media-controls-rewind-button:active,
864 audio::-webkit-media-controls-rewind-button:active {
865     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17" fill="white"><path d="m 7.9131,2 0,-1.548 -2.586,2.155 0,-2.171 -2.582,2.208 2.582,2.175 0,-2.139 2.586,2.155 0,-1.276 c 3.138,0.129 5.491,2.681 5.543,5.838 l -1.031,0 0.016,0.215 1.015,0 c -0.06,3.19 -2.629,5.765 -5.819,5.833 l 0,-1.018 -0.214,0 0,1.021 c -3.21,-0.047 -5.801,-2.631 -5.862,-5.836 l 1.045,0 -0.016,-0.215 -1.045,0 c -0.052,-0.288 -0.318,-0.654 -0.766,-0.654 -0.538,0 -0.755,0.484 -0.755,0.75 0,4.146 3.331,7.506 7.476,7.506 4.146,0 7.506,-3.36 7.506,-7.506 0,-4.059 -3.066,-7.357 -7.093,-7.493"/><path d="m 5.1729,11.0518 c -0.38,0 -0.668,-0.129 -0.945,-0.366 -0.083,-0.071 -0.186,-0.134 -0.338,-0.134 -0.277,0 -0.511,0.238 -0.511,0.521 0,0.154 0.083,0.301 0.179,0.383 0.394,0.346 0.911,0.563 1.601,0.563 1.077,0 1.739,-0.451 1.739,-1.608 l 0,-0.013 c 0,-0.911 -0.641,-1.265 -1.296,-1.376 l 0.945,-0.919 c 0.193,-0.19 0.317,-0.337 0.317,-0.604 0,-0.294 -0.228,-0.477 -0.538,-0.477 l -2.354,0 c -0.248,0 -0.455,0.21 -0.455,0.464 0,0.253 0.207,0.463 0.455,0.463 l 1.485,0 -0.939,0.961 c -0.166,0.169 -0.228,0.295 -0.228,0.444 0,0.25 0.207,0.463 0.455,0.463 l 0.166,0 c 0.594,0 0.945,0.222 0.945,0.624 l 0,0.012 c 0,0.367 -0.282,0.599 -0.453,0.599"/><path d="m 10.354,9.5342 c 0,0.876 -0.379,1.525 -0.979,1.525 -0.599,0 -0.992,-0.655 -0.992,-1.539 l 0,-0.012 c 0,-0.884 0.388,-1.527 0.979,-1.527 0.592,0 0.992,0.663 0.992,1.539 l 0,0.014 z m -0.979,-2.512 c -1.197,0 -2.008,1.097 -2.008,2.498 l 0,0.014 c 0,1.401 0.792,2.484 1.995,2.484 1.205,0 2.01,-1.097 2.01,-2.498 l 0,-0.012 c 0,-1.402 -0.805,-2.486 -1.997,-2.486"/></svg>');
866 }
867
868 video::-webkit-media-controls-panel button.paused:active,
869 audio::-webkit-media-controls-panel button.paused:active {
870     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="white"><path d="M 0,1 12,7.5 0,14 z"/></svg>');
871 }
872
873 video::-webkit-media-controls-play-button:active,
874 audio::-webkit-media-controls-play-button:active {
875     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 15" fill="white"><rect x="0" y="1" width="4" height="13"/><rect x="8" y="1" width="4" height="13"/></svg>');
876 }
877
878 video:-webkit-full-screen::-webkit-media-controls-mute-button:active,
879 audio:-webkit-full-screen::-webkit-media-controls-mute-button:active,
880 video:-webkit-full-screen::-webkit-media-controls-volume-max-button:active {
881     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="white" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="white" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/><path d="M 10,3.5 C 13,4.5 13,11.5 10,12.5" /><path d="M 11,1.5 C 15.67,3.5 15.67,12.5 11,14.5"/></svg>');
882 }
883 video:-webkit-full-screen::-webkit-media-controls-mute-button:active,
884 audio:-webkit-full-screen::-webkit-media-controls-mute-button:active,
885 video:-webkit-full-screen::-webkit-media-controls-volume-min-button:active {
886     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" stroke="white" fill="none" stroke-width="1.25" stroke-linecap="round"><defs><clipPath id="cut-hole"><rect x="3" y="0" width="3.5" height="15"/></clipPath></defs><path stroke="none" fill="white" shape-rendering="crispEdges" d="M 0,10 0,6 3,6 3,10 z"/><path stroke="none" fill="white" clip-path="url(#cut-hole)" shape-rendering="crispEdges" d="M 3.5,6 6.5,3 6.5,13 3.5,10 z"/><path d="M 9,5.5 C 10.75,7 10.75,9 9,10.5"/></svg>');
887 }
888
889 video:-webkit-full-screen::-webkit-media-controls-play-button:active{
890     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="white"><path d="M 0,0 0,22 8,22 8,0 z"/><path d="M 13,0 13,22 21,22 21,0 z"/></svg>');
891 }
892
893 video:-webkit-full-screen::-webkit-media-controls-panel button.paused:active {
894     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23" fill="white"><path d="M 0,0 21,11.5 0,23 z"/></svg>');
895 }
896
897 video:-webkit-full-screen::-webkit-media-controls-seek-back-button:active {
898     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="white"><path d="M 24,0 12,7 24,15 z"/><path d="M 12,0 0,7 12,15 z"/></svg>');
899 }
900
901 video:-webkit-full-screen::-webkit-media-controls-seek-forward-button:active {
902     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 15" fill="white"><path d="M 0,0 12,7 0,15 z"/><path d="M 12,0 24,7 12,15 z"/></svg>');
903 }
904
905 video::-webkit-media-controls-fullscreen-button:active,
906 audio::-webkit-media-controls-fullscreen-button:active {
907     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" stroke-width="1.25" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
908 }
909
910 video::-webkit-media-controls-panel button.exit:active,
911 audio::-webkit-media-controls-panel button.exit:active {
912     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="white" stroke-width="1.25" fill="none"><path d="M 7.5,0.5 L 7.5,6 L 13,6"/><path d="M 0,8 L 5.5,8 L 5.5,13.5"/><path stroke-linecap="round" d="M 7.5,6 L 12.5,1"/><path stroke-linecap="round" d="M 5.5,8 L 0.5,13"/></svg>');
913 }
914
915 video::-webkit-media-controls-wireless-playback-picker-button:active,
916 audio::-webkit-media-controls-wireless-playback-picker-button:active {
917     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 15" stroke="white"><defs> <clipPath fill-rule="evenodd" id="cut-hole"><path d="M 0,0.5 L 16,0.5 L 16,15.5 L 0,15.5 z M 0,14.5 L 16,14.5 L 8,5 z"/></clipPath></defs><rect fill="none" clip-path="url(#cut-hole)" x="0.5" y="2" width="15" height="8"/><path stroke="none" fill="white" d="M 3.5,13.25 L 12.5,13.25 L 8,8 z"/></svg>');
918 }
919
920 /* ==================== AIRPLAY PLACARD ==================== */
921
922 video::-webkit-media-controls-wireless-playback-status,
923 audio::-webkit-media-controls-wireless-playback-status {
924     display: block;
925     position: absolute;
926     left: 0px;
927     top: 0px;
928     width: 100%;
929     height: 100%;
930     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131 90"><g fill="none" stroke="rgb(146,146,146)" stroke-width="4"><rect x="2" y="2" width="127" height="76"/><line x1="30" y1="88" x2="101" y2="88"/></g></svg>');
931     background-color: black;
932     background-repeat: no-repeat;
933     background-position: 50% calc(.5 * (100% - 25px) - 21pt);
934     background-size: 131px auto;
935     color: rgb(145,145,145);
936     font: -webkit-small-control;
937     vertical-align: text-bottom;
938 }
939
940 video::-webkit-media-controls-wireless-playback-text,
941 audio::-webkit-media-controls-wireless-playback-text {
942     cursor: default;
943     position: absolute;
944     width: 100%;
945     top: calc(.5 * (100% - 25px) + (.5 * (90px + 42pt) - 42pt));
946     -webkit-user-select: none;
947     margin: 0px;
948     height: 42pt;
949 }
950
951 video::-webkit-media-controls-wireless-playback-text-top,
952 audio::-webkit-media-controls-wireless-playback-text-top {
953     position: absolute;
954     top: 15pt;
955     width: 100%;
956     line-height: 12pt;
957     height: 12pt;
958     font-size: 12pt;
959     text-align: center;
960     margin: 0px;
961 }
962
963 video::-webkit-media-controls-wireless-playback-text-bottom,
964 audio::-webkit-media-controls-wireless-playback-text-bottom {
965     position: absolute;
966     bottom: 0;
967     left: 5%;
968     width: 90%;
969     line-height: 10pt;
970     height: 10pt;
971     font-size: 10pt;
972     text-align: center;
973     white-space: nowrap;
974     overflow: hidden;
975     text-overflow: ellipsis;
976     margin: 0px;
977 }
978
979 video::-webkit-media-controls-wireless-playback-status.small,
980 audio::-webkit-media-controls-wireless-playback-status.small {
981     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62 43"><g fill="none" stroke="rgb(146,146,146)" stroke-width="2"><rect x="1" y="1" width="60" height="36"/><line x1="14" y1="42" x2="48" y2="42"/></g></svg>');
982     background-position: 50% calc(.5 * (100% - 25px) - 5pt);
983     background-size: 62px auto;
984 }
985
986 video::-webkit-media-controls-wireless-playback-text-top.small,
987 audio::-webkit-media-controls-wireless-playback-text-top.small {
988     top: 4pt;
989 }
990
991 video::-webkit-media-controls-wireless-playback-text-bottom.small,
992 audio::-webkit-media-controls-wireless-playback-text-bottom.small {
993     display: none;
994 }
995
996 video::-webkit-media-controls-wireless-playback-status.hidden,
997 audio::-webkit-media-controls-wireless-playback-status.hidden {
998     display: none;
999 }