Video controls, though hidden, are still interactive when in PiP
[WebKit-https.git] / Source / WebCore / Modules / mediacontrols / mediaControlsiOS.css
1 /*
2  * Copyright (C) 2012, 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 /* You'll see a lot of !important rules in this file. This is because
26    the inheritance and specificity of Shadow DOM trees is slightly
27    tricky. The page might have accidentally set a style and we have
28    to make sure it is reset. */
29
30 audio {
31     min-width: 260px;
32     height: 39px;
33 }
34
35 body:-webkit-full-page-media {
36     background-color: rgb(38, 38, 38);
37 }
38
39 video:-webkit-full-page-media {
40     margin: auto;
41     position: absolute;
42     top: 0;
43     right: 0;
44     bottom: 0;
45     left: 0;
46 }
47
48 video:-webkit-full-page-media::-webkit-media-controls-panel {
49     bottom: 0px;
50 }
51
52 ::-webkit-media-controls {
53     width: inherit;
54     height: inherit;
55     position: relative;
56     display: -webkit-flex;
57     -webkit-align-items: stretch;
58     -webkit-justify-content: flex-end;
59     -webkit-flex-direction: column;
60     font-family: -apple-system;
61     overflow: hidden;
62 }
63
64 video::-webkit-media-controls-panel input[type="button"],
65 audio::-webkit-media-controls-panel input[type="button"],
66 video::-webkit-media-controls-panel button,
67 audio::-webkit-media-controls-panel button {
68     padding: 0;
69     border: none;
70     -webkit-appearance: none;
71 }
72
73 video::-webkit-media-controls-inline-playback-placeholder,
74 audio::-webkit-media-controls-inline-playback-placeholder {
75     display: block;
76     z-index: 0;
77     width: 100%;
78     height: 100%;
79     background-color: black;
80     background-repeat: no-repeat;
81     background-position: 50% 50%;
82     background-size: 100% 50%;
83 }
84
85 video::-webkit-media-controls-inline-playback-placeholder.hidden,
86 audio::-webkit-media-controls-inline-playback-placeholder.hidden {
87     display: none;
88 }
89
90 video::-webkit-media-text-track-container,
91 audio::-webkit-media-text-track-container {
92     position: relative;
93     -webkit-flex: 1 1 auto;
94 }
95
96 video::-webkit-media-controls-panel-container {
97     -webkit-transform: translateZ(0);
98     width: 100%;
99     direction: ltr;
100     height: 50px;
101     position: absolute;
102     bottom: 0;
103     pointer-events: none;
104 }
105
106 audio::-webkit-media-controls-panel-container {
107     width: 100%;
108     direction: ltr;
109     height: 39px;
110     position: absolute;
111     bottom: 0;
112 }
113
114 video::-webkit-media-controls-panel-background {
115     -webkit-transform: translateZ(0);
116     width: 101%; /* Due to some rounding issues we make this a little bit wider than should be necessary. */
117     height: 51px; /* And taller. */
118     -webkit-appearance: media-controls-light-bar-background;
119     transition: opacity 0.25s linear;
120     opacity: 0;
121     pointer-events: none;
122     bottom: 0;
123     position: absolute;
124 }
125
126 audio::-webkit-media-controls-panel-background {
127     display: none;
128 }
129
130 video::-webkit-media-controls-panel-background.show,
131 video::-webkit-media-controls-panel-background.paused {
132     opacity: 1;
133 }
134
135 audio::-webkit-media-controls-panel,
136 video::-webkit-media-controls-panel {
137     box-sizing: border-box;
138     position: absolute;
139     bottom: 0;
140     width: 100%;
141     padding: 0;
142
143     -webkit-user-select: none;
144
145     display: -webkit-flex;
146     -webkit-flex-direction: row;
147     -webkit-flex-wrap: nowrap;
148     -webkit-justify-content: flex-start;
149     -webkit-align-items: center;
150
151     transition: opacity 0.25s linear;
152     -webkit-transform-origin: bottom left;
153 }
154
155 video::-webkit-media-controls-panel .hidden,
156 audio::-webkit-media-controls-panel .hidden {
157     display: none;
158 }
159
160 video::-webkit-media-controls-panel {
161     height: 50px;
162     opacity: 0;
163     pointer-events: none;
164     -webkit-transform: translate3d(0, 0, 0);
165 }
166
167 audio::-webkit-media-controls-panel {
168     height: 39px;
169     background-color: rgba(212, 212, 212, 1);
170 }
171
172 video::-webkit-media-controls-panel.show,
173 video::-webkit-media-controls-panel.paused {
174     pointer-events: auto;
175     opacity: 1;
176 }
177
178 video::-webkit-media-controls-panel.picture-in-picture {
179     pointer-events: none;
180 }
181
182 video::-webkit-media-controls-rewind-button,
183 audio::-webkit-media-controls-rewind-button,
184 video::-webkit-media-controls-panel .mute-box,
185 audio::-webkit-media-controls-panel .mute-box,
186 video::-webkit-media-controls-mute-button,
187 audio::-webkit-media-controls-mute-button,
188 video::-webkit-media-controls-volume-max-button,
189 video::-webkit-media-controls-panel .volume-box,
190 audio::-webkit-media-controls-panel .volume-box,
191 audio::-webkit-media-controls-volume-slider,
192 video::-webkit-media-controls-volume-slider {
193     display: none !important;
194 }
195
196 video::-webkit-media-controls-start-playback-button {
197     -webkit-appearance: none;
198     position: absolute;
199     width: 72px;
200     height: 72px;
201     left: calc(50% - 36px);
202     top: calc(50% - 36px);
203     -webkit-clip-path: circle(36px);
204     -webkit-transform: translate3d(0, 0, 0);
205 }
206
207 video::-webkit-media-controls-start-playback-background {
208     -webkit-appearance: none;
209     position: absolute;
210     width: 72px;
211     height: 72px;
212     background-color: rgba(255, 255, 255, 0.2);
213     -webkit-backdrop-filter: blur(10px) saturate(200%);
214 }
215
216 video::-webkit-media-controls-start-playback-tint {
217     -webkit-appearance: none;
218     position: absolute;
219     width: 72px;
220     height: 72px;
221     background-color: rgb(210, 210, 210);
222     mix-blend-mode: darken;
223 }
224
225 video::-webkit-media-controls-start-playback-button .webkit-media-controls-start-playback-glyph {
226     -webkit-appearance: none;
227     position: absolute;
228     width: 72px;
229     height: 72px;
230     opacity: 0.45;
231     mix-blend-mode: plus-darker;
232     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAMAAACZHrEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA/1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD64ociAAAAVHRSTlMAtCT5hQzkWQHAMPuVEetoAs46/qMZ83UG2Uiw94QL4Ve/LZMQZM04oPFz1keuIfaDCVS+KpDqYsmdGO9yBNVEHn9Ru4znj+ZdpstAIIjpagNDtxJhxoj+AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAdlJREFUeNrt2udSwkAYhWE09iCCsSv2rogdK2LvYjn3fy3mjwaUkqzZ3W+c817BM8yZDyYhkWCMMcYYY4wxxhhjjMVeS6ttQUVw2tptGwIM0NHZZVsRYIDuHtuMCgzcZK9tSIABUn1p25QAA2T6bVsqMPAGBuVggKHhETkYYHRMEAYYt3iSf2EwkZ2UgwGmpgVhgJlZQRi4c/NyMP5JXkjLwQCLS4Iw8JYNn2Q0bGXV6ElGk9bWBWGA3IYgDPKbW3Iw/kneFoQBdnYFYeDuGTjJYTHAfiEtBwMc6D7JUTDwDo/kYIDjk1M5GKB4Jgjjn+SSIAzy55pOsgrGP8kXgjDApY6TrIqBexX/SVbGANeFuB8y/QED3MjB3N6J+WTy2fgfTCpSvPtS7BRVzIOe72+lsej6ZSNjLIoYPWNRw2Qe9VEiYrSNJTpG41giY3JPminhMXrHEgmjeywRMM6zofdjYcZi7DG1jLGEw7yYGUsYjKPhd64qxtxYmmJMjqUJJlV+NW6pgzE9lkYY42Opjym+2aHUwKTKOh8HRcJYGktNjOU/sFSNxep75CqMzbH8wOh43KKKeTfybiAUxvpYAoyAsXxh3OSHbcN3MsbCGGOMMcYYY4wxxv57n0aw2iHhyI0VAAAAAElFTkSuQmCC');
233     background-repeat: no-repeat;
234     background-position: 50% 50%;
235     background-size: 100% 100%;
236 }
237
238 video::-webkit-media-controls-start-playback-button .webkit-media-controls-start-playback-background.active {
239     background-color: rgba(192, 192, 192, 0.2);
240 }
241
242 video::-webkit-media-controls-start-playback-button .webkit-media-controls-start-playback-glyph.failed {
243     background-image: url('data:image/png;base64,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');
244 }
245
246 /* ================== ALL INLINE BUTTONS ====================== */
247
248 video::-webkit-media-controls-play-button,
249 audio::-webkit-media-controls-play-button,
250 video::-webkit-media-controls-fullscreen-button,
251 audio::-webkit-media-controls-fullscreen-button,
252 video::-webkit-media-controls-wireless-playback-picker-button,
253 audio::-webkit-media-controls-wireless-playback-picker-button,
254 video::-webkit-media-controls-picture-in-picture-button,
255 audio::-webkit-media-controls-picture-in-picture-button {
256     -webkit-appearance: none;
257     display: block;
258     padding: 0;
259     border: 0;
260     -webkit-user-select: none;
261     background-repeat: no-repeat;
262     background-position: 50% 50%;
263     mix-blend-mode: plus-darker;
264     opacity: 0.55;
265     -webkit-mask-position: 50% 50%;
266     -webkit-mask-repeat: no-repeat;
267     -webkit-mask-origin: border-box;
268     background-color: black;
269     transition: background-color 250ms;
270 }
271
272 video::-webkit-media-controls-play-button,
273 video::-webkit-media-controls-fullscreen-button,
274 video::-webkit-media-controls-wireless-playback-picker-button,
275 video::-webkit-media-controls-picture-in-picture-button {
276     -webkit-transform: translate3d(0, 0, 0);
277 }
278
279 video::-webkit-media-controls-play-button:active,
280 audio::-webkit-media-controls-play-button:active,
281 video::-webkit-media-controls-fullscreen-button:active,
282 audio::-webkit-media-controls-fullscreen-button:active,
283 audio::-webkit-media-controls-wireless-playback-picker-button:active,
284 video::-webkit-media-controls-wireless-playback-picker-button:active,
285 video::-webkit-media-controls-picture-in-picture-button:active,
286 audio::-webkit-media-controls-picture-in-picture-button:active {
287     mix-blend-mode: normal;
288     opacity: 1;
289     background-color: white;
290     transition: background-color 0ms;
291 }
292
293 /* ================== PLAY BUTTON ====================== */
294
295 audio::-webkit-media-controls-play-button,
296 video::-webkit-media-controls-play-button {
297     margin-left: 4px;
298     -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAsCAYAAAANUxr1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2bENgEAMA0AHsf/EIB5GcIGgOEvpIuf6TJIjXfZyv+qfe67ywJT7Vf+WnwUICAgICAgICAgICAgICAgICAgICAjoyzxvgvPlG1X/EmAASwgGTpkrSW0AAAAASUVORK5CYII=');
299     -webkit-mask-size: 18px 22px;
300     -webkit-order: 1;
301 }
302
303 audio::-webkit-media-controls-play-button {
304     width: 42px;
305     height: 39px;
306 }
307
308 video::-webkit-media-controls-play-button {
309     width: 44px;
310     height: 50px;
311 }
312
313 audio::-webkit-media-controls-play-button.paused,
314 video::-webkit-media-controls-play-button.paused {
315     -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUZJREFUeNrU2S8sRWEYgPFzD7PZbDYbQSAoBBKFwgQTmKRpJE3SaBKFRKJJJphiCslNt1AERRBsNpvN/DmeL7ybGfLzne3Xn517d873vqcsimIOtSKDq0Id0zmEhktM5hAazjGWQ2g4xUgOocknjjFkDw0fOMSAPfR78AH67KHhDXvotYeGV+yg2x4aXrCFLntoeMYGOuyh4QnraLeHhkesos0eGh6wglZ7aLjHMlrsoeEOi2i2h4ZbLKC0h4ZrzP8XXMk0MPvbeFRJXf0cjyq5NB5NlIX/qsX/1non6/afvvHXrsESeGN/PMUDv8n8Cl0yv0L1hxL9MU9/cE6jyJp5FNEPd2lc3kSneQGxbV5ApJXOLnqsK5137JuXZLF27Dcvco8waF7knmDYvBo/w6j5Y8MFxs2fb9LEN2UfnmaKDD4xfgkwANpCXZrruKGvAAAAAElFTkSuQmCC');
316     -webkit-mask-size: 21px 22px;
317 }
318
319 /* ================== FULLSCREEN BUTTON ====================== */
320
321 video::-webkit-media-controls-fullscreen-button {
322     width: 44px;
323     height: 50px;
324     -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO5JREFUeNrs2F8KwjAMBvAoXsID6GEUPIKPw2sLPiu+CCIYO1nFhf1pWkw+YR9kTyv8KCNpR0TEyjqSUZiZ5vQH+d6dZ6gDDIy5BbyjISVwi4aUQEJDdgGhkH1AGOQQEAI5BnRHpgBdkalAN2QEnpsiNGQEamKKzAFK5CPUCg0YkbdQe8QdjFkifoPmjRr+wDoBJ2Bh1r9uRaW4UzNxKsQ2sxFjsUID1tmVIK0adQ7y/QfDcpJokeZALdIFqEG6AVORrsAUpDtwDAkBHELCAPuQUMAuJBxQIj/AheUVI2eRJfCifP9aP2boV7uXAAMArhj6EAChbh4AAAAASUVORK5CYII=');
325     -webkit-mask-size: 20px 20px;
326     -webkit-order: 5;
327 }
328
329 /* ================== AIRPLAY BUTTON ====================== */
330
331 audio::-webkit-media-controls-wireless-playback-picker-button,
332 video::-webkit-media-controls-wireless-playback-picker-button {
333     -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAkCAYAAAD/yagrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARlJREFUeNrsmDEOgjAUhtuYMLgwuTG6Mrt7AC/gCVycHLwBN+AEXIADuDO76ubm5OJgYnw+kldDiEb6aElJ3ku+gYSWL4/yl1QrpUCNoLSIehbVgfmBiIqoiIqoiIqoiIpoUKLmAhz+7u2QpUPRj5tL0TXyQm5IGqpo3cVHY64LkoQmmlIXocURiUMRnSHnL5KGAxK5Fu1CiUxooilSdRhTNBIlpk7bPtfq5orkFMmWFmOzRqcSWsNeRE/0mk3ljK5sOqzrn6Kc2jMka57IaqjdwmQlMLkjC9+S7azkckXmviRt15TtmndSnK/UNkV6Fzf3OLnMroh2FvBM3vcArRhA0rDlimYDSrIzdjOw5N+M1QCjOMdVbwEGAJbOn8QOMeI8AAAAAElFTkSuQmCC');
334     -webkit-mask-size: 21px 18px;
335     -webkit-order: 3;
336 }
337
338 audio::-webkit-media-controls-wireless-playback-picker-button {
339     width: 44px;
340     height: 39px;
341 }
342
343 video::-webkit-media-controls-wireless-playback-picker-button {
344     width: 44px;
345     height: 50px;
346 }
347
348 audio::-webkit-media-controls-wireless-playback-picker-button.playing,
349 video::-webkit-media-controls-wireless-playback-picker-button.playing {
350     opacity: 1;
351     mix-blend-mode: normal;
352     background-color: -apple-wireless-playback-target-active;
353 }
354
355 /* ================== PICTURE IN PICTURE BUTTON ====================== */
356
357 video::-webkit-media-controls-picture-in-picture-button {
358     width: 35px;
359     height: 44px;
360     -webkit-order: 5;
361     -webkit-mask-size: 23px 18px;
362     -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAkCAYAAAD2IghRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANhJREFUeNrslzEOwjAMRR2UA3AQ7sLKwsTEglg6sTIgLgs7qCZBRbIsWpDayHH1v/SHJmn0ZFutHYiIqX4F+cDMtCCncgseh1JiLJ5lxH+Br2qGZ2Gpa/IjeVMZ1/ur0ndgLdaeydsvF9/7LrYEz7oo+J0X8Kyz2GuT917As04K/uAFPKtR5xov4FnHLuIy+i7AqavxVr1jAh7H/HbRZE3QZGndBvaW1k1Z6VqdHtjzIBELZrHoKIfRzbpUxqY4IOJzLpWAiAMc4AAHOMAB/m9T9Bn1veklwACtBYmnlYBaIQAAAABJRU5ErkJggg==');
363 }
364
365 video::-webkit-media-controls-picture-in-picture-button.return-from-picture-in-picture {
366     -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAkCAYAAAD2IghRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAOZJREFUeNpiZGBg+M8w+AEjMuf///8MTAxDFAxZh7Pgi5IBBv+HZYgPS4f/JwJ/GA1xCjMnIfAejf9poHPvfyy5GFvS6KdjyYPLXeAKiFiH/0ZiT6GT46ni8CAg/onEn0WH/EEVh4OAL5rjFwIx81BwOAh4APE3JPGlNHQ8VR0OAs5A/BVJbjUQsw0Fh4OAHRB/RpLPG0wOJwSsoTXnfBolF5o5HARUBqL2pYbDB6bGBDqchYYlAk27cqPt8YFuHVIaxYyjIT6ckwrjaIiPOnzU4aMOH3X4qMNHHU5sowjWmxhqACDAAI3lmdvpn4aTAAAAAElFTkSuQmCC');
367 }
368
369 /* ================== SPACER ====================== */
370
371 video::-webkit-media-controls-spacer,
372 audio::-webkit-media-controls-spacer {
373     -webkit-appearance: none !important;
374     -webkit-flex: 1 1 0; /* Should be the same as the timeline container. */
375     -webkit-order: 2;
376     height: 8px;
377     margin: 0;
378     background-color: transparent !important;
379 }
380
381 /* ================== TIMELINE ====================== */
382
383 video::-webkit-media-controls-timeline,
384 audio::-webkit-media-controls-timeline {
385     -webkit-appearance: none !important;
386     -webkit-flex: 1 1 0;
387     height: 8px;
388     margin: 0;
389     background-color: transparent !important;
390     background-size: 100% 100%;
391     border: none !important;
392     border-radius: 0 !important;
393     box-sizing: content-box !important;
394 }
395
396 video::-webkit-media-controls-timeline {
397     -webkit-transform: translate3d(0, 0, 0);
398     mix-blend-mode: plus-darker;
399 }
400
401 audio::-webkit-media-controls-timeline::-webkit-slider-runnable-track,
402 video::-webkit-media-controls-timeline::-webkit-slider-runnable-track {
403     -webkit-appearance: none !important;
404     background: none !important;
405     border: none !important;
406 }
407
408 video::-webkit-media-controls-timeline::-webkit-slider-thumb,
409 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
410     -webkit-appearance: none !important;
411     width: 15px;
412     height: 50px;
413     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAiCAYAAABIiGl0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iUGl4ZWxtYXRvciAyLjIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTkwQ0UwODdBQTcxMTFFNEE5QTZGQTVGMjFBNkUxN0UiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTkwQ0UwODhBQTcxMTFFNEE5QTZGQTVGMjFBNkUxN0UiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1OTBDRTA4NUFBNzExMUU0QTlBNkZBNUYyMUE2RTE3RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1OTBDRTA4NkFBNzExMUU0QTlBNkZBNUYyMUE2RTE3RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pofoz4wAAAJGSURBVHjaxJfNTsJAEMfbLmoNaKIhIE18A+LReOXmi/gQnnwSLz6Fnjh4Id4kHElI5EDwpIkgImWdf/Nfs5ISCrR1kkmg7c5vZz/mw3WSy66oL7ojqqiQkPotOhGdaq1XGnMTvC+KlprN5kW9Xr8sFotnhUKhCsUHs9lsCB2NRu1Op3PfaDRa8vhDdCSqnQ0E3lX7/f6NGH7RCQXfYgzG0sZacthut6/G4/Gj3lAwFjZgKyn0qNfrXYdh+Ka3FNiALdhc6Sk+1CkL4Us997E0aXga5zmX3Y87vdVt9jTJnvPA/blJJZxEnbHwtJds8Mk6V2ZTAQMsAD1EJAQHpdSpk7GAARaYAPuISE5OQpYfeYwwmBeYrMhjZeJuHkKWAtj7B7DnJchQaQsylgvwHGktL6qwXsH0TE7NETw091gjiecFFtYzmNFSo3LICyysBzBxsI5xoWUJWllHL8lSfTnViFyTyGO4PhgMbrP2lgxNpnPAdBXkkBYDsg48lqbRDLrd7t18Pn9P21PYhG3zl8yoXsY+1zCjDEufgIxjMqPCHMm5wpdBBsVeQK2QpUzZs8dKsGY+SrG8DSxvj8j6DdOKHUPZhkO3KOiDBWiZDGW3MC4f7FPVYvKQyuE8YQvzFJMUcJg+qfit3YVKc4clqB8H3zAThWzmJmzstGN1fI511LVJXYzl7hZQ00F+2dA4sH3P7Am4a0zAeDklEODZYueoVgz+DS4rWk5tTdj2cmqt4tr9sccJFqyG3N4CGxrSu3AZ0MiPAAMAZrLkuVVmRJsAAAAASUVORK5CYII=');
414     background-repeat: no-repeat;
415     background-size: 15px 17px;
416     background-position: 0px 18px;
417     background-color: transparent !important;
418     border: none !important;
419     -webkit-transform: rotateZ(0deg);
420 }
421
422 video::-webkit-media-controls-timeline::-webkit-slider-thumb:active,
423 audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active {
424     background-color: transparent !important;
425 }
426
427 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
428     height: 39px;
429     background-position: 0px 12px;
430 }
431
432 video::-webkit-media-controls-current-time-display,
433 video::-webkit-media-controls-time-remaining-display,
434 audio::-webkit-media-controls-current-time-display,
435 audio::-webkit-media-controls-time-remaining-display {
436     -webkit-user-select: none;
437     -webkit-flex: 0 0 0;
438     display: -webkit-flex;
439     -webkit-align-items: center;
440     overflow-y: hidden;
441     overflow-x: hidden;
442     letter-spacing: normal;
443     word-spacing: normal;
444     line-height: normal;
445     text-transform: none;
446     text-indent: 0px;
447     text-decoration: none;
448     color: black;
449     mix-blend-mode: plus-darker;
450     opacity: 0.55;
451     height: 50px;
452     font-size: 13px;
453     font-family: -apple-system-monospaced-numbers;
454 }
455
456 audio::-webkit-media-controls-current-time-display,
457 video::-webkit-media-controls-current-time-display {
458     min-width: 32px;
459     -webkit-justify-content: flex-end;
460     padding-right: 6px;
461 }
462
463 audio::-webkit-media-controls-time-remaining-display,
464 video::-webkit-media-controls-time-remaining-display {
465     min-width: 38px;
466     -webkit-justify-content: flex-start;
467     padding-left: 6px;
468     margin-right: 6px;
469 }
470
471 video::-webkit-media-controls-timeline-container,
472 audio::-webkit-media-controls-timeline-container {
473     display: -webkit-flex;
474     -webkit-flex-direction: row;
475     -webkit-align-items: center;
476     -webkit-user-select: none;
477     -webkit-flex: 1 1 0; /* Any changes here should also be made on the spacer. */
478     position: relative;
479     padding: 0;
480     -webkit-order: 2;
481 }
482
483 audio::-webkit-media-controls-timeline-container {
484     padding-right: 10px;
485 }
486
487 audio::-webkit-media-controls-current-time-display.three-digit-time,
488 video::-webkit-media-controls-current-time-display.three-digit-time {
489     min-width: 31px;
490 }
491
492 audio::-webkit-media-controls-time-remaining-display.three-digit-time,
493 video::-webkit-media-controls-time-remaining-display.three-digit-time {
494     min-width: 40px;
495 }
496
497 audio::-webkit-media-controls-current-time-display.four-digit-time,
498 video::-webkit-media-controls-current-time-display.four-digit-time {
499     min-width: 40px;
500 }
501
502 audio::-webkit-media-controls-time-remaining-display.four-digit-time,
503 video::-webkit-media-controls-time-remaining-display.four-digit-time {
504     min-width: 49px;
505 }
506
507 audio::-webkit-media-controls-current-time-display.five-digit-time,
508 video::-webkit-media-controls-current-time-display.five-digit-time {
509     min-width: 51px;
510 }
511
512 audio::-webkit-media-controls-time-remaining-display.five-digit-time,
513 video::-webkit-media-controls-time-remaining-display.five-digit-time {
514     min-width: 60px;
515 }
516
517 audio::-webkit-media-controls-current-time-display.six-digit-time,
518 video::-webkit-media-controls-current-time-display.six-digit-time {
519     min-width: 60px;
520 }
521
522 audio::-webkit-media-controls-time-remaining-display.six-digit-time,
523 video::-webkit-media-controls-time-remaining-display.six-digit-time {
524     min-width: 69px;
525 }
526
527 /* ================== STATUS DISPLAY ====================== */
528
529 video::-webkit-media-controls-status-display,
530 audio::-webkit-media-controls-status-display {
531
532     overflow: hidden;
533     font-family: -apple-system;
534     letter-spacing: normal;
535     word-spacing: normal;
536     line-height: normal;
537     text-transform: none;
538     text-indent: 0px;
539     text-decoration: none;
540     color: black;
541     mix-blend-mode: plus-darker;
542     opacity: 0.55;
543     -webkit-order: 2;
544 }
545
546 /* ================== CAPTIONS ====================== */
547
548 video::-webkit-media-text-track-container {
549     position: relative;
550     width: 100%;
551     overflow: hidden;
552     padding-bottom: 5px;
553     z-index: 0;
554
555     text-align: center;
556     color: rgba(255, 255, 255, 1);
557
558     letter-spacing: normal;
559     word-spacing: normal;
560     text-transform: none;
561     text-indent: 0;
562     text-decoration: none;
563     pointer-events: none;
564     -webkit-user-select: none;
565     word-break: break-word;
566
567     -webkit-flex: 1 1;
568
569     -webkit-line-box-contain: block inline-box replaced;
570 }
571
572 video::cue {
573     background-color: rgba(0, 0, 0, 0.8);
574 }
575
576 video::-webkit-media-text-track-display {
577     position: absolute;
578     overflow: hidden;
579     white-space: pre-wrap;
580     -webkit-box-sizing: border-box;
581     font: 22px sans-serif;
582 }
583
584 video::-webkit-media-text-track-display-backdrop {
585     display: inline-block;
586 }
587
588 video::cue(:future) {
589     color: gray;
590 }
591
592 video::-webkit-media-text-track-container b {
593     font-weight: bold;
594 }
595
596 video::-webkit-media-text-track-container u {
597     text-decoration: underline;
598 }
599
600 video::-webkit-media-text-track-container i {
601     font-style: italic;
602 }
603
604 /* ==================== PLAYBACK PLACARD ==================== */
605
606 video::-webkit-media-controls-wireless-playback-status,
607 audio::-webkit-media-controls-wireless-playback-status {
608     display: block;
609     position: absolute;
610     left: 0px;
611     top: 0px;
612     width: 100%;
613     height: 100%;
614     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="-apple-system-gray" stroke-width="4"><rect x="2" y="2" width="127" height="76"/><line x1="30" y1="88" x2="101" y2="88"/></g></svg>');
615     background-color: rgb(51, 51, 53);
616     background-repeat: no-repeat;
617     background-position: 50% calc(.5 * (100% - 25px) - 21pt);
618     background-size: 131px auto;
619     color: -apple-system-gray;
620     font: -apple-system;
621     font-weight: 400;
622     vertical-align: text-bottom;
623 }
624
625 video::-webkit-media-controls-wireless-playback-text,
626 audio::-webkit-media-controls-wireless-playback-text {
627     cursor: default;
628     position: absolute;
629     width: 100%;
630     top: calc(.5 * (100% - 25px) + (.5 * (90px + 42pt) - 42pt));
631     -webkit-user-select: none;
632     margin: 0px;
633     height: 42pt;
634 }
635
636 video::-webkit-media-controls-wireless-playback-text-top,
637 audio::-webkit-media-controls-wireless-playback-text-top {
638     position: absolute;
639     top: 15pt;
640     width: 100%;
641     line-height: 12pt;
642     height: 12pt;
643     font-size: 12pt;
644     text-align: center;
645     margin: 0px;
646     color: -apple-system-gray;
647 }
648
649 video::-webkit-media-controls-wireless-playback-text-bottom,
650 audio::-webkit-media-controls-wireless-playback-text-bottom {
651     position: absolute;
652     bottom: 0;
653     left: 5%;
654     width: 90%;
655     line-height: 10pt;
656     height: 10pt;
657     font-size: 10pt;
658     text-align: center;
659     white-space: nowrap;
660     overflow: hidden;
661     text-overflow: ellipsis;
662     margin: 0px;
663 }
664
665 video::-webkit-media-controls-wireless-playback-status.small,
666 audio::-webkit-media-controls-wireless-playback-status.small {
667     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>');
668     background-position: 50% calc(.5 * (100% - 25px) - 5pt);
669     background-size: 62px auto;
670 }
671
672 video::-webkit-media-controls-wireless-playback-text-top.small,
673 audio::-webkit-media-controls-wireless-playback-text-top.small {
674     top: 4pt;
675 }
676
677 video::-webkit-media-controls-wireless-playback-text-bottom.small,
678 audio::-webkit-media-controls-wireless-playback-text-bottom.small {
679     display: none;
680 }
681
682 video::-webkit-media-controls-wireless-playback-status.picture-in-picture,
683 audio::-webkit-media-controls-wireless-playback-status.picture-in-picture
684 {
685     background-size: 304px auto;
686     background-position: 50% calc(.5 * (100% - 25px));
687     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 150"><g fill="none" stroke="-apple-system-gray" stroke-width="3"><path d="m 172,106 -81,0 c -3.5,0 -6,-2.5 -6,-6 l 0,-89 c 0,-3.5 2.5,-6 6,-6 l 122,0 c 3.5,0 6,2.5 6,6 l 0,57" /><path d="m 233,119 -53,0 c -3,0 -3,-0 -3,-3 l 0,-40 c 0,-3 0,-3 3,-3 l 53,0 c 3,0 3,0 3,3 l 0,40 c 0,3 0,3 -3,3 z" /></g></svg>');
688 }
689
690 video::-webkit-media-controls-wireless-playback-text-top.picture-in-picture,
691 audio::-webkit-media-controls-wireless-playback-text-top.picture-in-picture {
692     top: initial;
693     bottom: 0;
694 }
695
696 video::-webkit-media-controls-wireless-playback-text-bottom.picture-in-picture,
697 audio::-webkit-media-controls-wireless-playback-text-bottom.picture-in-picture {
698     display: none;
699 }
700
701 video::-webkit-media-controls-wireless-playback-status.hidden,
702 audio::-webkit-media-controls-wireless-playback-status.hidden {
703     display: none;
704 }
705
706 /* When PiP is active, we don't want the controls container showing. */
707 video::-webkit-media-controls-panel-container.picture-in-picture {
708     opacity: 0;
709     pointer-events: none;
710 }
711