Unreviewed, rolling out r183687.
[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     z-index: 0;
75     bottom: 0;
76     width: 100%;
77     min-height: 45px;
78     height: 45px;
79     line-height: 25px;
80     -webkit-user-select: none;
81     -webkit-user-drag: element;
82     background-color: transparent;
83     padding-top: 20px;
84
85     display: -webkit-flex;
86     -webkit-flex-direction: row;
87     -webkit-align-items: center;
88     -webkit-user-select: none;
89
90     direction: ltr;
91
92     transition: opacity 0.25s linear;
93 }
94
95 video::-webkit-media-controls-panel {
96     cursor: none;
97     opacity: 0;
98 }
99
100 video::-webkit-media-controls-panel.show,
101 video::-webkit-media-controls-panel.paused,
102 video::-webkit-media-controls-panel:hover {
103     cursor: inherit;
104     opacity: 1;
105 }
106
107 video::-webkit-media-controls-panel-background-container,
108 audio::-webkit-media-controls-panel-background-container {
109     position: absolute;
110     left: 0;
111     top: 0;
112     width: 100%;
113     min-height: 45px;
114     height: 45px;
115     -webkit-clip-path: inset(20px 0px 0px 0px);
116 }
117
118 audio::-webkit-media-controls-panel-background-container {
119     background-color: black;
120 }
121
122 video::-webkit-media-controls-panel-tint,
123 audio::-webkit-media-controls-panel-tint {
124     position: absolute;
125     left: 0;
126     top: 0;
127     width: 100%;
128     min-height: 45px;
129     height: 45px;
130     background-color: rgb(41, 41, 41);
131     mix-blend-mode: lighten;
132 }
133
134 video::-webkit-media-controls-panel-background,
135 audio::-webkit-media-controls-panel-background {
136     position: absolute;
137     left: 0;
138     top: 0;
139     width: 100%;
140     min-height: 45px;
141     height: 45px;
142     background-color: rgba(30, 30, 30, 0.45);
143     -webkit-backdrop-filter: saturate(180%) blur(20px);
144 }
145
146 video::-webkit-media-controls-panel button,
147 audio::-webkit-media-controls-panel button {
148     -webkit-appearance: none;
149     display: block;
150     padding: 0;
151     border: 0;
152     height: 15px;
153     background-color: transparent;
154     color: white;
155     background-origin: content-box;
156     background-repeat: no-repeat;
157     background-position: center;
158     -webkit-transform: translateZ(0);
159     mix-blend-mode: plus-lighter;
160 }
161
162 video::-webkit-media-controls-panel button:focus,
163 audio::-webkit-media-controls-panel button:focus {
164     outline: 0;
165 }
166
167 video::-webkit-media-controls-rewind-button,
168 audio::-webkit-media-controls-rewind-button {
169     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>');
170     width: 16px;
171     min-width: 16px;
172     height: 18px;
173     margin-bottom: 1px;
174     margin-left: 16px;
175 }
176
177 video::-webkit-media-controls-play-button,
178 audio::-webkit-media-controls-play-button {
179     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>');
180     margin-left: 16px;
181     width: 12px;
182     min-width: 12px;
183 }
184
185 video::-webkit-media-controls-play-button.paused,
186 audio::-webkit-media-controls-play-button.paused {
187     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>');
188     width: 12px;
189 }
190
191 video::-webkit-media-controls-panel .mute-box,
192 audio::-webkit-media-controls-panel .mute-box {
193     width: 14px;
194     min-width: 14px;
195     height: 25px;
196     margin-right: 16px;
197     position: relative;
198     display: -webkit-flex;
199     -webkit-flex-direction: column;
200     -webkit-justify-content: center;
201     -webkit-align-items: center;
202 }
203
204 video::-webkit-media-controls-mute-button,
205 audio::-webkit-media-controls-mute-button,
206 video::-webkit-media-controls-volume-max-button {
207     width: 14px;
208     min-width: 14px;
209     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>');
210 }
211
212 video::-webkit-media-controls-panel .volume-box,
213 audio::-webkit-media-controls-panel .volume-box {
214     position: absolute;
215     box-sizing: border-box;
216     height: 63px;
217     bottom: 0;
218     left: 0;
219     
220     -webkit-clip-path: inset(20px 20px 20px 20px round 0px 4px 4px 0px);
221     -webkit-transform: rotate(-90deg) translateY(-51.5px) translateX(31.5px);
222
223     background-color: transparent;
224     border-bottom-right-radius: 4px;
225     border-top-right-radius: 4px;
226
227     display: -webkit-flex;
228     -webkit-flex-direction: row;
229     -webkit-align-items: center;
230     -webkit-justify-content: flex-end;
231
232     opacity: 0;
233     /* make zero width (rather than display:none) for AX and FKA */
234     width: 0; /* will become 101px when shown */
235
236 }
237
238 audio::-webkit-media-controls-panel .volume-box {
239     background-color: black;
240 }
241
242 video::-webkit-media-controls-volume-slider-container-background,
243 audio::-webkit-media-controls-volume-slider-container-background {
244     position: absolute;
245     left: 0;
246     top: 0;
247     width: 100%;
248     height: 100%;
249     border-bottom-right-radius: 4px;
250     border-top-right-radius: 4px;
251     background-color: rgba(30, 30, 30, 0.45);
252     -webkit-backdrop-filter: saturate(180%) blur(20px);
253 }
254
255 video::-webkit-media-controls-volume-slider-container-tint,
256 audio::-webkit-media-controls-volume-slider-container-tint {
257     position: absolute;
258     left: 0;
259     top: 0;
260     height: 100%;
261     width: 100%;
262     border-bottom-right-radius: 4px;
263     border-top-right-radius: 4px;
264     background-color: rgb(41, 41, 41);
265     mix-blend-mode: lighten;
266 }
267
268 /* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */
269 video::-webkit-media-controls-panel .mute-box:hover .volume-box,
270 video::-webkit-media-controls-panel .volume-box:hover,
271 video::-webkit-media-controls-panel .volume-box:active,
272 audio::-webkit-media-controls-panel .mute-box:hover .volume-box,
273 audio::-webkit-media-controls-panel .volume-box:hover,
274 audio::-webkit-media-controls-panel .volume-box:active {
275     opacity: 1;
276     /* resize to usable amount (rather than display:none) for AX and FKA */
277     width: 116px;
278 }
279
280 audio::-webkit-media-controls-volume-slider,
281 video::-webkit-media-controls-volume-slider {
282     -webkit-appearance: none !important;
283     box-sizing: border-box !important;
284     height: 9px !important;
285     width: 64px !important;
286     padding: 0 !important;
287     margin-right: 30px !important;
288
289     background-color: transparent !important;
290     background-size: 100% 100%;
291     background-repeat: no-repeat;
292     mix-blend-mode: plus-lighter;
293 }
294
295 video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
296 audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
297     -webkit-appearance: none !important;
298     width: 7px !important;
299     height: 7px !important;
300     visibility: hidden;
301 }
302
303 video::-webkit-media-controls-mute-button.muted,
304 audio::-webkit-media-controls-mute-button.muted,
305 video::-webkit-media-controls-volume-min-button {
306     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>');
307 }
308
309 video::-webkit-media-controls-wireless-playback-picker-button,
310 audio::-webkit-media-controls-wireless-playback-picker-button {
311     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>');
312     margin-right: 16px;
313     width: 16px;
314     min-width: 16px;
315 }
316
317 video::-webkit-media-controls-wireless-playback-picker-button.playing,
318 audio::-webkit-media-controls-wireless-playback-picker-button.playing {
319     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>');
320 }
321
322 video::-webkit-media-controls-toggle-closed-captions-button,
323 audio::-webkit-media-controls-toggle-closed-captions-button {
324     width: 16px;
325     min-width: 16px;
326     margin-right: 16px;
327     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>');
328     outline: 0;
329 }
330
331 video::-webkit-media-controls-closed-captions-container,
332 audio::-webkit-media-controls-closed-captions-container {
333     -webkit-appearance: media-closed-captions-container;
334     position: absolute;
335     display: block;
336     right: 38px;
337     bottom: 29px;
338     max-width: calc(100% - 48px); /* right + 10px */
339     max-height: calc(100% - 39px); /* bottom + 10px */
340     overflow-x: hidden;
341     overflow-y: scroll;
342     background-color: rgba(0, 0, 0, 0.8);
343     border: 1px solid rgba(128, 128, 128, 0.75);
344     border-radius: 6px;
345     cursor: default;
346     z-index: 2;
347     text-align: initial;
348 }
349
350 video::-webkit-media-controls-closed-captions-container .list,
351 audio::-webkit-media-controls-closed-captions-container .list {
352     display: block;
353     -webkit-user-select: none;
354 }
355
356 video::-webkit-media-controls-closed-captions-container h3,
357 audio::-webkit-media-controls-closed-captions-container h3 {
358     margin: 0;
359     color: rgb(140, 140, 140);
360     text-shadow: 0 1px 0 black;
361     -webkit-margin-start: 16px;
362     padding-top: 4px;
363     font-size: 11px;
364 }
365
366 video::-webkit-media-controls-closed-captions-container ul,
367 audio::-webkit-media-controls-closed-captions-container ul {
368     list-style-type: none;
369     margin: 0 0 8px 0;
370     padding: 0;
371 }
372
373 video::-webkit-media-controls-closed-captions-container li,
374 audio::-webkit-media-controls-closed-captions-container li {
375     position: relative;
376     color: white;
377     background-image: none;
378     text-shadow: 0 1px 0 black;
379     margin: 0;
380     padding-left: 28px;
381     padding-right: 28px;
382     padding-top: 0.15em;
383     padding-bottom: 0.2em;
384     box-sizing: border-box;
385     overflow: hidden;
386     white-space: nowrap;
387     text-overflow: ellipsis;
388     border-top: 1px solid transparent;
389     border-bottom: 1px solid transparent;
390 }
391
392 video::-webkit-media-controls-closed-captions-container li:focus,
393 audio::-webkit-media-controls-closed-captions-container li:focus {
394     outline: 0;
395     background-color: rgba(140, 140, 140, 0.5);
396 }
397
398 video::-webkit-media-controls-closed-captions-container li:hover,
399 audio::-webkit-media-controls-closed-captions-container li:hover {
400     background-color: rgba(26, 68, 243, 0.6);
401 }
402
403 video::-webkit-media-controls-closed-captions-container li.selected::before,
404 audio::-webkit-media-controls-closed-captions-container li.selected::before {
405     display: block;
406     content: "";
407     position: absolute;
408     top: 0.25em;
409     width: 1.1em;
410     height: 1.1em;
411     -webkit-margin-start: -20px;
412     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>');
413     background-repeat: no-repeat;
414 }
415
416 video::-webkit-media-controls-closed-captions-container li.selected:hover::before,
417 audio::-webkit-media-controls-closed-captions-container li.selected:hover::before {
418     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>');
419 }
420
421 video::-webkit-media-controls-fullscreen-button,
422 audio::-webkit-media-controls-fullscreen-button {
423     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>');
424     margin-right: 7px;
425     width: 14px;
426     min-width: 14px;
427 }
428
429 video::-webkit-media-controls-fullscreen-button.exit,
430 audio::-webkit-media-controls-fullscreen-button.exit {
431     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>');
432     margin-right: 11px;
433     margin-top: 6px;
434 }
435
436 video::-webkit-media-controls-optimized-fullscreen-button,
437 audio::-webkit-media-controls-optimized-fullscreen-button {
438     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>');
439     margin: 0 7px;
440 }
441
442 video::-webkit-media-controls-status-display,
443 audio::-webkit-media-controls-status-display {
444     cursor: default;
445     overflow: hidden;
446     color: white;
447     opacity: .45;
448     mix-blend-mode: plus-lighter;
449
450     letter-spacing: normal;
451     word-spacing: normal;
452     line-height: 25px;
453     text-transform: none;
454     text-indent: 0;
455     text-decoration: none;
456     text-align: left;
457
458     padding: 0 12px;
459
460     -webkit-flex: 1 1 0;
461 }
462 video::-webkit-media-controls-timeline,
463 audio::-webkit-media-controls-timeline {
464     -webkit-appearance: none !important;
465     -webkit-flex: 1 1 0 !important;
466     height: 17px !important;
467     margin: 0 !important;
468     background-size: 100% 100% !important;
469     background-repeat: no-repeat;
470     background-color: transparent;
471     mix-blend-mode: plus-lighter;
472
473 }
474 video::-webkit-media-controls-timeline::-webkit-slider-thumb,
475 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
476     -webkit-appearance: none !important;
477     width:3px !important;
478     height: 15px !important;
479 }
480  
481 video::-webkit-media-controls-current-time-display,
482 video::-webkit-media-controls-time-remaining-display,
483 audio::-webkit-media-controls-current-time-display,
484 audio::-webkit-media-controls-time-remaining-display {
485     -webkit-user-select: none;
486     -webkit-flex: 0 0 0;
487     display: -webkit-flex;
488     cursor: default;
489     overflow-y: hidden;
490     overflow-x: hidden;
491     color: white;
492     opacity: .45;
493     letter-spacing: normal;
494     word-spacing: normal;
495     line-height: normal;
496     text-transform: none;
497     text-indent: 0px;
498     text-decoration: none;
499     position: relative;
500     bottom: 0.5px;
501     font-family: -apple-system-monospaced-numbers;
502     -webkit-text-size-adjust:none;
503     mix-blend-mode: plus-lighter;
504 }
505
506 video::-webkit-media-controls-current-time-display,
507 audio::-webkit-media-controls-current-time-display {
508     margin-left: 8px;
509     margin-right: 8px;
510     width: 32px;
511     min-width: 32px;
512     -webkit-justify-content: flex-end;
513 }
514
515 video::-webkit-media-controls-time-remaining-display,
516 audio::-webkit-media-controls-time-remaining-display {
517     margin-left: 8px;
518     margin-right: 16px;
519     width: 37px;
520     min-width: 37px;
521     -webkit-justify-content: flex-start;
522 }
523
524 video::-webkit-media-controls-time-remaining-display.five-digit-time,
525 audio::-webkit-media-controls-time-remaining-display.five-digit-time {
526     min-width: 47px;
527 }
528
529 video::-webkit-media-controls-current-time-display.five-digit-time,
530 audio::-webkit-media-controls-current-time-display.five-digit-time {
531     min-width: 42px;
532 }
533
534 video::-webkit-media-controls-time-remaining-display.six-digit-time,
535 audio::-webkit-media-controls-time-remaining-display.six-digit-time {
536     min-width: 54px;
537 }
538
539 video::-webkit-media-controls-current-time-display.six-digit-time,
540 audio::-webkit-media-controls-current-time-display.six-digit-time {
541     min-width: 49px;
542 }
543
544 video::-webkit-media-controls-timeline-container,
545 audio::-webkit-media-controls-timeline-container {
546     display: -webkit-flex;
547     -webkit-flex-direction: row;
548     -webkit-align-items: center;
549     -webkit-user-select: none;
550     -webkit-flex: 1 1 0;
551     position: relative;
552     padding: 0;
553 }
554
555 video::-webkit-media-controls-panel .thumbnail-track,
556 audio::-webkit-media-controls-panel .thumbnail-track {
557     position: relative;
558     -webkit-flex: 1 1 0;
559     height: 17 px;
560     margin: 0 2px;
561     display: -webkit-flex;
562     -webkit-align-items: stretch;
563     -webkit-flex-direction: column;
564 }
565
566 video::-webkit-media-controls-panel .thumbnail,
567 audio::-webkit-media-controls-panel .thumbnail {
568     position: absolute;
569     opacity: 0;
570     transition: opacity 0.25s linear;
571     bottom: 15px;
572     width: 100px;
573     height: 58px;
574     margin-left: -50px;
575     border: 5px solid black;
576     box-shadow: 0 0 3px white;
577     border-radius: 3px;
578 }
579
580 video::-webkit-media-controls-panel .thumbnail-image,
581 audio::-webkit-media-controls-panel .thumbnail-image {
582     width: 100%;
583     height: 100%;
584 }
585
586 video::-webkit-media-controls-panel .thumbnail.show,
587 audio::-webkit-media-controls-panel .thumbnail.show {
588     opacity: 1;
589 }
590
591 video::-webkit-media-controls-panel.hidden,
592 audio::-webkit-media-controls-panel.hidden {
593     display: none;
594 }
595
596 video::-webkit-media-controls-panel .hidden,
597 audio::-webkit-media-controls-panel .hidden {
598     display: none;
599 }
600
601 /* Full Screen */
602
603 /* 
604     Page stylesheets are not allowed to override the style of media
605     controls while in full screen mode, so many if not all the rules
606     defined in this section will be marked as !important to enforce
607     this restriction 
608 */
609
610 video:-webkit-full-screen::-webkit-media-controls-panel {
611     -webkit-align-items: flex-start !important;
612     -webkit-justify-content: flex-end !important;
613     -webkit-clip-path: inset(20px round 6px);
614     
615     width: 480px !important;
616     height: 104px !important;
617     margin: 0 auto 32px auto !important;
618     padding: 20px;
619     padding-top: 30px !important;
620
621     background-color: transparent;
622     border-radius: 6px !important;
623
624     transition: opacity 0.3s linear !important;
625 }
626
627 video:-webkit-full-screen::-webkit-media-controls-panel-tint,
628 audio:-webkit-full-screen::-webkit-media-controls-panel-tint {
629     position: absolute;
630     left: 0;
631     top: 0;
632     width: 480px !important;
633     height: 104px !important;
634     border-radius: 6px !important;
635     background-color: rgb(41, 41, 41);
636     mix-blend-mode: lighten;
637 }
638
639 video:-webkit-full-screen::-webkit-media-controls-panel-background,
640 audio:-webkit-full-screen::-webkit-media-controls-panel-background {
641     position: absolute;
642     left: 0;
643     top: 0;
644     width: 480px !important;
645     height: 104px !important;
646     border-radius: 6px !important;
647     background-color: rgba(30, 30, 30, 0.45);
648     -webkit-backdrop-filter: saturate(180%) blur(20px);
649 }
650
651 video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
652     opacity: 0 ! important;
653     transition: opacity 0 ! important;
654 }
655
656 video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
657     -webkit-transform: none;
658     -webkit-clip-path: none;
659     opacity: 1;
660     left: 32px;
661     top: 35px;
662     width: 96px;
663     height: 17px;
664     display: -webkit-flex;
665     -webkit-flex-direction: row;
666     -webkit-align-items: center;
667     background-color: transparent;
668     border: none;
669 }
670
671 video:-webkit-full-screen::-webkit-media-controls-volume-slider {
672     background-color: transparent;
673     width: 60px !important;
674     margin: 0 !important;
675 }
676
677 video:-webkit-full-screen::-webkit-media-controls-mute-button,
678 audio:-webkit-full-screen::-webkit-media-controls-mute-button,
679 video:-webkit-full-screen::-webkit-media-controls-volume-max-button {
680     width: 14px !important;
681     margin-left: 6px !important;
682     margin-bottom: 2px !important;
683     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>');
684 }
685 video:-webkit-full-screen::-webkit-media-controls-mute-button,
686 audio:-webkit-full-screen::-webkit-media-controls-mute-button,
687 video:-webkit-full-screen::-webkit-media-controls-volume-min-button {
688     width: 14px !important;
689     margin-right: 2px !important;
690     margin-bottom: 2px !important;
691     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>');
692 }
693
694 video:-webkit-full-screen::-webkit-media-controls-play-button {
695     position: absolute;
696     
697     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>');
698
699     width: 21px;
700     height: 23px;
701     left: 230px;
702     top: 32px;
703     margin: 0;
704     padding: 0;
705 }
706
707 video:-webkit-full-screen::-webkit-media-controls-play-button.paused {
708     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>');
709 }
710
711 video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
712     position: absolute;
713
714     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>');
715
716     width: 24px;
717     height: 15px;
718     left: 176px;
719     top: 36px;
720 }
721
722 video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
723     position: absolute;
724     display: -webkit-flex;
725     width: 29px;
726     height: 16px;
727     left: 262px;
728     top: 13px;
729 }
730
731 video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
732     position: absolute;
733
734     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>');
735
736     width: 24px;
737     height: 15px;
738     left: 275px;
739     top: 36px;
740 }
741
742 video:-webkit-full-screen::-webkit-media-controls-timeline-container {
743     height: auto;
744     width: 440px;
745     position: absolute;
746     bottom: 28px;
747     left: 20px;
748 }
749
750 video:-webkit-full-screen::-webkit-media-controls-current-time-display {
751     margin-left: 12px;
752 }
753
754 video:-webkit-full-screen::-webkit-media-controls-time-remaining-display {
755     margin-right: 12px;
756 }
757
758 video:-webkit-full-screen::-webkit-media-controls-status-display {
759     width: 440px;
760     position: absolute;
761     bottom: 25px;
762     text-align: center;
763     padding: 0;
764     left: 20px;
765 }
766
767 video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
768 audio:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button {
769     margin-top: 6px;
770     margin-right:24px;
771 }
772
773 video:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button,
774 audio:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button {
775     margin-top: 6px;
776     margin-right:24px;
777 }
778
779 video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
780     bottom: 100px;
781     right: calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */
782     max-width: calc(50% + 173px); /* right + 10px */
783     max-height: calc(100% - 124px); /* bottom + 10px */
784 }
785
786 video::-webkit-media-text-track-container {
787     position: relative;
788     width: 100%;
789     overflow: hidden;
790     padding-bottom: 5px;
791
792     text-align: center;
793     color: rgba(255, 255, 255, 1);
794
795     letter-spacing: normal;
796     word-spacing: normal;
797     text-transform: none;
798     text-indent: 0;
799     text-decoration: none;
800     pointer-events: none;
801     -webkit-user-select: none;
802
803     -webkit-flex: 1 1;
804
805     -webkit-line-box-contain: block inline-box replaced;
806 }
807
808 video::cue {
809     background-color: rgba(0, 0, 0, 0.8);
810 }
811
812 video::-webkit-media-text-track-display {
813     position: absolute;
814     overflow: hidden;
815     white-space: pre-wrap;
816     -webkit-box-sizing: border-box;
817     font: 22px sans-serif;
818 }
819
820 video::-webkit-media-text-track-display-backdrop {
821     display: inline-block;
822 }
823
824 video::cue(:future) {
825     color: gray;
826 }
827
828 video::-webkit-media-text-track-container b {
829     font-weight: bold;
830 }
831
832 video::-webkit-media-text-track-container u {
833     text-decoration: underline;
834 }
835
836 video::-webkit-media-text-track-container i {
837     font-style: italic;
838 }
839
840 video::-webkit-media-text-track-container .hidden,
841 audio::-webkit-media-text-track-container .hidden {
842     display: none;
843 }
844
845 /* ============ ACTIVE VERSIONS OF ALL BUTTONS ============= */
846
847 video::-webkit-media-controls-mute-button:active,
848 audio::-webkit-media-controls-mute-button:active,
849 video::-webkit-media-controls-volume-max-button:active {
850     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>');
851 }
852
853 video::-webkit-media-controls-panel button.muted:active,
854 audio::-webkit-media-controls-panel button.muted:active,
855 video::-webkit-media-controls-volume-min-button:active {
856     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>');
857 }
858
859 video::-webkit-media-controls-toggle-closed-captions-button:active,
860 audio::-webkit-media-controls-toggle-closed-captions-button:active {
861     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>');
862 }
863
864 video::-webkit-media-controls-rewind-button:active,
865 audio::-webkit-media-controls-rewind-button:active {
866     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>');
867 }
868
869 video::-webkit-media-controls-panel button.paused:active,
870 audio::-webkit-media-controls-panel button.paused:active {
871     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>');
872 }
873
874 video::-webkit-media-controls-play-button:active,
875 audio::-webkit-media-controls-play-button:active {
876     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>');
877 }
878
879 video:-webkit-full-screen::-webkit-media-controls-mute-button:active,
880 audio:-webkit-full-screen::-webkit-media-controls-mute-button:active,
881 video:-webkit-full-screen::-webkit-media-controls-volume-max-button:active {
882     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>');
883 }
884 video:-webkit-full-screen::-webkit-media-controls-mute-button:active,
885 audio:-webkit-full-screen::-webkit-media-controls-mute-button:active,
886 video:-webkit-full-screen::-webkit-media-controls-volume-min-button:active {
887     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>');
888 }
889
890 video:-webkit-full-screen::-webkit-media-controls-play-button:active{
891     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>');
892 }
893
894 video:-webkit-full-screen::-webkit-media-controls-panel button.paused:active {
895     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>');
896 }
897
898 video:-webkit-full-screen::-webkit-media-controls-seek-back-button:active {
899     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>');
900 }
901
902 video:-webkit-full-screen::-webkit-media-controls-seek-forward-button:active {
903     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>');
904 }
905
906 video::-webkit-media-controls-fullscreen-button:active,
907 audio::-webkit-media-controls-fullscreen-button:active {
908     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>');
909 }
910
911 video::-webkit-media-controls-panel button.exit:active,
912 audio::-webkit-media-controls-panel button.exit:active {
913     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>');
914 }
915
916 video::-webkit-media-controls-wireless-playback-picker-button:active,
917 audio::-webkit-media-controls-wireless-playback-picker-button:active {
918     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>');
919 }
920
921 /* ==================== AIRPLAY PLACARD ==================== */
922
923 video::-webkit-media-controls-wireless-playback-status,
924 audio::-webkit-media-controls-wireless-playback-status {
925     display: block;
926     position: absolute;
927     left: 0px;
928     top: 0px;
929     width: 100%;
930     height: 100%;
931     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>');
932     background-color: black;
933     background-repeat: no-repeat;
934     background-position: 50% calc(.5 * (100% - 25px) - 21pt);
935     background-size: 131px auto;
936     color: rgb(145,145,145);
937     font: -webkit-small-control;
938     vertical-align: text-bottom;
939 }
940
941 video::-webkit-media-controls-wireless-playback-text,
942 audio::-webkit-media-controls-wireless-playback-text {
943     cursor: default;
944     position: absolute;
945     width: 100%;
946     top: calc(.5 * (100% - 25px) + (.5 * (90px + 42pt) - 42pt));
947     -webkit-user-select: none;
948     margin: 0px;
949     height: 42pt;
950 }
951
952 video::-webkit-media-controls-wireless-playback-text-top,
953 audio::-webkit-media-controls-wireless-playback-text-top {
954     position: absolute;
955     top: 15pt;
956     width: 100%;
957     line-height: 12pt;
958     height: 12pt;
959     font-size: 12pt;
960     text-align: center;
961     margin: 0px;
962 }
963
964 video::-webkit-media-controls-wireless-playback-text-bottom,
965 audio::-webkit-media-controls-wireless-playback-text-bottom {
966     position: absolute;
967     bottom: 0;
968     left: 5%;
969     width: 90%;
970     line-height: 10pt;
971     height: 10pt;
972     font-size: 10pt;
973     text-align: center;
974     white-space: nowrap;
975     overflow: hidden;
976     text-overflow: ellipsis;
977     margin: 0px;
978 }
979
980 video::-webkit-media-controls-wireless-playback-status.small,
981 audio::-webkit-media-controls-wireless-playback-status.small {
982     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>');
983     background-position: 50% calc(.5 * (100% - 25px) - 5pt);
984     background-size: 62px auto;
985 }
986
987 video::-webkit-media-controls-wireless-playback-text-top.small,
988 audio::-webkit-media-controls-wireless-playback-text-top.small {
989     top: 4pt;
990 }
991
992 video::-webkit-media-controls-wireless-playback-text-bottom.small,
993 audio::-webkit-media-controls-wireless-playback-text-bottom.small {
994     display: none;
995 }
996
997 video::-webkit-media-controls-wireless-playback-status.hidden,
998 audio::-webkit-media-controls-wireless-playback-status.hidden {
999     display: none;
1000 }