Tighten WebContent sandbox
[WebKit-https.git] / Source / WebCore / Modules / mediacontrols / mediaControlsApple.css
1 /*
2  * Copyright (C) 2013, 2014 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 }
60
61 video::-webkit-media-text-track-container,
62 audio::-webkit-media-text-track-container {
63     position: relative;
64     -webkit-flex: 1 1 auto;
65 }
66
67 video::-webkit-media-controls-panel,
68 audio::-webkit-media-controls-panel {
69     box-sizing: border-box;
70     position: relative;
71     bottom: 0;
72     width: 100%;
73     padding-top: 1px;
74     min-height: 25px;
75     height: 25px;
76     line-height: 25px;
77     -webkit-user-select: none;
78     background-color: transparent;
79     background-image: -webkit-linear-gradient(top,
80         rgba(0,  0,  0,  .92) 0,
81         rgba(0,  0,  0,  .92) 1px,
82         rgba(89, 89, 89, .92) 1px,
83         rgba(89, 89, 89, .92) 2px,
84         rgba(60, 60, 60, .92) 2px,
85         rgba(35, 35, 35, .92) 12px,
86         rgba(30, 30, 30, .92) 12px,
87         rgba(30, 30, 30, .92) 13px,
88         rgba(25, 25, 25, .92) 13px,
89         rgba(17, 17, 17, .92) 100%
90     );
91
92     display: -webkit-flex;
93     -webkit-flex-direction: row;
94     -webkit-align-items: center;
95     -webkit-user-select: none;
96
97     direction: ltr;
98
99     transition: opacity 0.25s linear;
100 }
101
102 video::-webkit-media-controls-panel {
103     cursor: none;
104     opacity: 0;
105 }
106
107 video::-webkit-media-controls-panel.show,
108 video::-webkit-media-controls-panel.paused,
109 video::-webkit-media-controls-panel:hover {
110     cursor: inherit;
111     opacity: 1;
112 }
113
114 video::-webkit-media-controls-panel button,
115 audio::-webkit-media-controls-panel button {
116     -webkit-appearance: none;
117     display: block;
118     padding: 0;
119     border: 0;
120     height: 16px;
121     width: 16px;
122     background-color: transparent;
123     color: white;
124     background-origin: content-box;
125     background-repeat: no-repeat;
126     background-position: center;
127     -webkit-filter: drop-shadow(black 0 1px 1px);
128 }
129
130 video::-webkit-media-controls-panel button:active,
131 audio::-webkit-media-controls-panel button:active {
132     -webkit-filter: drop-shadow(white 0 0 10px);
133 }
134
135 video::-webkit-media-controls-rewind-button,
136 audio::-webkit-media-controls-rewind-button {
137     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 17"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.44444" stop-color="rgb(216, 216, 216)"/><stop offset="0.44444" stop-color="rgb(208, 208, 208)"/><stop offset="0.55555" stop-color="rgb(208, 208, 208)"/><stop offset="0.55555" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><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" fill="url(#gradient)"/><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.681 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.683,0.599" fill="url(#gradient)"/><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" fill="url(#gradient)"/></svg>');
138     width: 16px;
139     height: 18px;
140     margin-bottom: 1px;
141     margin-left: 6px;
142     margin-right: 4px;
143 }
144
145 video::-webkit-media-controls-play-button,
146 audio::-webkit-media-controls-play-button {
147     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><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 0,0 v 16 h 6 v -16 h -6 z" fill="url(#gradient)"/><path d="M 9,0 v 16 h 6 v -16 h -6 z" fill="url(#gradient)"/></svg>');
148     margin-left: 6px;
149     margin-right: 1px;
150 }
151
152 video::-webkit-media-controls-play-button.paused,
153 audio::-webkit-media-controls-play-button.paused {
154     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><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 0,0 15,7 0,15 z" fill="url(#gradient)"/></svg>');
155 }
156
157 video::-webkit-media-controls-panel .mute-box,
158 audio::-webkit-media-controls-panel .mute-box {
159     width: 22px;
160     height: 22px;
161     margin-right: 2px;
162
163     position: relative;
164     display: -webkit-flex;
165     -webkit-flex-direction: column;
166     -webkit-justify-content: center;
167     -webkit-align-items: center;
168 }
169
170 video::-webkit-media-controls-mute-button,
171 audio::-webkit-media-controls-mute-button,
172 video::-webkit-media-controls-volume-max-button {
173     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><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 0,9 0,-4 3,0 3,-3 0,10 -3,-3 -3,0 z" style="fill:url(#gradient) "/><path d="m 10.449,1.087 c 1.963,1.055 3.322,3.291 3.322,5.881 0,2.642 -1.402,4.913 -3.424,5.945" style="fill:none;stroke:url(#gradient);stroke-width:1.25;stroke-linecap:round;"/><path d="m 9.13,3.134 c 1.289,0.681 2.181,2.142 2.181,3.835 0,1.743001 -0.939,3.24 -2.285,3.897" style="fill:none;stroke:url(#gradient);stroke-width:1.25;stroke-linecap:round;"/><path d="M 7.794,5.175 C 8.403001,5.491 8.827001,6.167 8.827001,6.971 8.827001,7.818 8.356,8.537001 7.688,8.826" style="fill:none;stroke:url(#gradient);stroke-width:1.25;stroke-linecap:round;"/></svg>');
174     width: 14px;
175 }
176
177 video::-webkit-media-controls-panel .volume-box,
178 audio::-webkit-media-controls-panel .volume-box {
179     position: absolute;
180     box-sizing: border-box;
181     height: 22px;
182     bottom: 0;
183     left: 0;
184
185     -webkit-transform: rotate(-90deg);
186     -webkit-transform-origin: 11px 11px;
187
188     background-color: transparent;
189     background-image: -webkit-linear-gradient(
190         left,
191         rgba(17, 17, 17,  0.92),
192         rgba(42, 42, 42, 0.92)
193     );
194     border: 1px solid rgba(0, 0, 0, 0.95);
195     border-radius: 12px;
196
197     display: -webkit-flex;
198     -webkit-flex-direction: row;
199     -webkit-align-items: center;
200     -webkit-justify-content: flex-end;
201
202     opacity: 0;
203     /* make zero width (rather than display:none) for AX and FKA */
204     width: 0; /* will become 114px when shown */
205
206 }
207
208 /* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */
209 video::-webkit-media-controls-panel .mute-box:hover .volume-box,
210 video::-webkit-media-controls-panel .volume-box:hover,
211 video::-webkit-media-controls-panel .volume-box:active,
212 audio::-webkit-media-controls-panel .mute-box:hover .volume-box,
213 audio::-webkit-media-controls-panel .volume-box:hover,
214 audio::-webkit-media-controls-panel .volume-box:active {
215     opacity: 1;
216     /* resize to usable amount (rather than display:none) for AX and FKA */
217     width: 114px;
218 }
219
220 audio::-webkit-media-controls-volume-slider,
221 video::-webkit-media-controls-volume-slider {
222     -webkit-appearance: none;
223     box-sizing: border-box;
224     height: 10px;
225     width: 80px;
226     padding: 0;
227     margin-right: 6px;
228
229     border-radius: 5px;
230     background-color: transparent;
231     background-image: -webkit-linear-gradient(
232         top,
233         rgba(15, 15, 15, .85) 0,
234         rgba(23, 23, 23, .85) 50%,
235         rgba(15, 15, 15, .85) 100%
236     );
237     border: 1px solid rgba(0, 0, 0, 0.875);
238 }
239
240 video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
241 audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
242     -webkit-appearance: none;
243     width: 8px;
244     height: 8px;
245     border-radius: 4px;
246     background-color: transparent;
247
248     /* rotateZ() forces the layer into compositing mode.
249     Slider thumbs are small, so forcing a compositing layer is inexpensive,
250        and it keeps the slider from having to repaint while sliding. */
251     -webkit-transform: rotateZ(0);
252     background-image: -webkit-linear-gradient(
253         left,
254         rgba(99, 99, 99, 1),
255         rgba(144, 144, 144, 1)
256     );
257     box-shadow: inset -1px 0 0 rgba(255, 255, 255, .5), 0 1px rgba(255, 255, 255, .14);
258 }
259 video::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active,
260 video::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb,
261 audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb::-webkit-slider-thumb:active,
262 audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb:active::-webkit-slider-thumb {
263     background-image: -webkit-linear-gradient(
264         right top,
265         rgba(160, 160, 160, 1),
266         rgba(221, 221, 221, 1)
267     );
268 }
269
270 video::-webkit-media-controls-mute-button.muted,
271 audio::-webkit-media-controls-mute-button.muted,
272 video::-webkit-media-controls-volume-min-button {
273     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><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 0,9 0,-4 3,0 3,-3 0,10 -3,-3 -3,0 z" fill="url(#gradient)"/></svg>');
274 }
275
276 video::-webkit-media-controls-toggle-closed-captions-button,
277 audio::-webkit-media-controls-toggle-closed-captions-button {
278     width: 16px;
279     height: 16px;
280     margin: 0 7px;
281     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 105"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.46875" stop-color="rgb(216, 216, 216)"/><stop offset="0.46875" stop-color="rgb(208, 208, 208)"/><stop offset="0.53125" stop-color="rgb(208, 208, 208)"/><stop offset="0.53125" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M98.766,43.224c0-23.163-21.775-41.94-48.637-41.94c-26.859,0-48.635,18.777-48.635,41.94c0,18.266,13.546,33.796,32.444,39.549c1.131,8.356,26.037,24.255,22.864,19.921c-4.462-6.096-5.159-13.183-5.07-17.566C77.85,84.397,98.766,65.923,98.766,43.224z" fill="url(#gradient)"/></svg>');
282     outline: 0;
283 }
284
285 video::-webkit-media-controls-closed-captions-container,
286 audio::-webkit-media-controls-closed-captions-container {
287     -webkit-appearance: media-closed-captions-container;
288     position: absolute;
289     display: block;
290     right: 38px;
291     bottom: 29px;
292     max-width: calc(100% - 48px); /* right + 10px */
293     max-height: calc(100% - 39px); /* bottom + 10px */
294     overflow-x: hidden;
295     overflow-y: scroll;
296     background-color: rgba(0, 0, 0, 0.85);
297     border: 3px solid rgba(128, 128, 128, 0.75);
298     border-radius: 10px;
299     cursor: default;
300     z-index: 2;
301     text-align: initial;
302 }
303
304 video::-webkit-media-controls-closed-captions-container .list,
305 audio::-webkit-media-controls-closed-captions-container .list {
306     display: block;
307     font-family: "Helvetica Bold", Helvetica, sans-serif;
308     font-size: 10pt;
309     -webkit-user-select: none;
310 }
311
312 video::-webkit-media-controls-closed-captions-container h3,
313 audio::-webkit-media-controls-closed-captions-container h3 {
314     margin: 0;
315     color: rgb(117, 117, 117);
316     text-shadow: 0 1px 0 black;
317     -webkit-margin-start: 23px;
318     padding-top: 4px;
319     font-weight: bold;
320     font-size: 10pt;
321 }
322
323 video::-webkit-media-controls-closed-captions-container ul,
324 audio::-webkit-media-controls-closed-captions-container ul {
325     list-style-type: none;
326     margin: 0 0 4px 0;
327     padding: 0;
328     font-weight: bold;
329 }
330
331 video::-webkit-media-controls-closed-captions-container li,
332 audio::-webkit-media-controls-closed-captions-container li {
333     position: relative;
334     color: white;
335     background-image: none;
336     text-shadow: 0 1px 0 black;
337     margin: 0;
338     padding-left: 37px;
339     padding-right: 35px;
340     padding-top: 0.15em;
341     padding-bottom: 0.2em;
342     box-sizing: border-box;
343     overflow: hidden;
344     white-space: nowrap;
345     text-overflow: ellipsis;
346     border-top: 1px solid transparent;
347     border-bottom: 1px solid transparent;
348 }
349
350 video::-webkit-media-controls-closed-captions-container li:focus,
351 audio::-webkit-media-controls-closed-captions-container li:focus {
352     outline: 0;
353     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.3)), color-stop(1, rgba(255, 255, 255, 0.2)));
354 }
355
356 video::-webkit-media-controls-closed-captions-container li:hover,
357 audio::-webkit-media-controls-closed-captions-container li:hover {
358     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(79, 112, 246)), color-stop(1, rgb(26, 68, 243)));
359     border-top: 1px solid rgb(70, 103, 234);
360     border-bottom: 1px solid rgb(3, 54, 229);
361 }
362
363 video::-webkit-media-controls-closed-captions-container li.selected::before,
364 audio::-webkit-media-controls-closed-captions-container li.selected::before {
365     display: block;
366     content: "";
367     position: absolute;
368     top: 0.25em;
369     width: 1.1em;
370     height: 1.1em;
371     -webkit-margin-start: -20px;
372     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>');
373     background-repeat: no-repeat;
374 }
375
376 video::-webkit-media-controls-closed-captions-container li.selected:hover::before,
377 audio::-webkit-media-controls-closed-captions-container li.selected:hover::before {
378     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" 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>');
379 }
380
381 video::-webkit-media-controls-fullscreen-button,
382 audio::-webkit-media-controls-fullscreen-button {
383     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 14,1 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 1,14 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>');
384     margin: 0 7px;
385 }
386 video::-webkit-media-controls-fullscreen-button.exit,
387 audio::-webkit-media-controls-fullscreen-button.exit {
388     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>');
389 }
390 video::-webkit-media-controls-status-display,
391 audio::-webkit-media-controls-status-display {
392     cursor: default;
393     font: -webkit-small-control;
394     font-size: 9px;
395     overflow: hidden;
396     color: white;
397     text-shadow: black 0px 1px 1px;
398
399     letter-spacing: normal;
400     word-spacing: normal;
401     line-height: 25px;
402     text-transform: none;
403     text-indent: 0;
404     text-decoration: none;
405     text-align: left;
406
407     padding: 0 12px;
408
409     -webkit-flex: 1 1 0;
410 }
411 video::-webkit-media-controls-timeline,
412 audio::-webkit-media-controls-timeline {
413     -webkit-appearance: none;
414     -webkit-flex: 1 1 0;
415     height: 9px;
416     margin: 0;
417
418     border-radius: 4.5px;
419     background-color: rgb(74, 74, 74);
420     box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08);
421 }
422 video::-webkit-media-controls-timeline::-webkit-slider-thumb,
423 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
424     -webkit-appearance: none;
425     width:6px;
426     height: 6px;
427     background-color: white;
428
429     /* rotateZ() forces the layer into compositing mode.
430     Slider thumbs are small, so forcing a compositing layer is inexpensive,
431        and it keeps the slider from having to repaint while sliding. */
432     -webkit-transform: translateY(1px) rotateZ(-45deg);
433
434     background-image: -webkit-gradient(
435         linear,
436         left bottom,
437         right top,
438         color-stop(0, rgba(99,  99,  99,  1)),
439         color-stop(1, rgba(144, 144, 144, 1))
440     );
441 }
442 video::-webkit-media-controls-timeline::-webkit-slider-thumb:active,
443 video::-webkit-media-controls-timeline:active::-webkit-slider-thumb,
444 audio::-webkit-media-controls-timeline::-webkit-slider-thumb:active,
445 audio::-webkit-media-controls-timeline:active::-webkit-slider-thumb,
446  {
447     background-image: -webkit-gradient(
448         linear,
449         left bottom,
450         right top,
451         color-stop(0, rgba(160, 160, 160, 1)),
452         color-stop(1, rgba(221, 221, 221, 1))
453     );
454 }
455 video::-webkit-media-controls-current-time-display,
456 video::-webkit-media-controls-time-remaining-display,
457 audio::-webkit-media-controls-current-time-display,
458 audio::-webkit-media-controls-time-remaining-display {
459     -webkit-user-select: none;
460     -webkit-flex: 0 0 0;
461     display: -webkit-flex;
462     -webkit-justify-content: center;
463     -webkit-align-items: center;
464     cursor: default;
465     font: -webkit-small-control;
466     font-size: 9px;
467     overflow-y: hidden;
468     overflow-x: hidden;
469     width: 45px;
470     min-width: 45px;
471     color: white;
472     text-shadow: black 0px 1px 1px;
473     letter-spacing: normal;
474     word-spacing: normal;
475     line-height: normal;
476     text-transform: none;
477     text-indent: 0px;
478     text-decoration: none;
479 }
480
481 video::-webkit-media-controls-timeline-container .hour-long-time,
482 audio::-webkit-media-controls-timeline-container .hour-long-time {
483     min-width: 67px;
484 }
485
486 video::-webkit-media-controls-timeline-container,
487 audio::-webkit-media-controls-timeline-container {
488     display: -webkit-flex;
489     -webkit-flex-direction: row;
490     -webkit-align-items: center;
491     -webkit-user-select: none;
492     -webkit-flex: 1 1 0;
493     position: relative;
494     padding: 0;
495 }
496
497 video::-webkit-media-controls-panel .thumbnail-track,
498 audio::-webkit-media-controls-panel .thumbnail-track {
499     position: relative;
500     -webkit-flex: 1 1 0;
501     height: 9px;
502     margin: 0 2px;
503     display: -webkit-flex;
504     -webkit-align-items: stretch;
505     -webkit-flex-direction: column;
506 }
507
508 video::-webkit-media-controls-panel .thumbnail,
509 audio::-webkit-media-controls-panel .thumbnail {
510     position: absolute;
511     opacity: 0;
512     transition: opacity 0.25s linear;
513     bottom: 15px;
514     width: 100px;
515     height: 58px;
516     margin-left: -50px;
517     border: 5px solid black;
518     box-shadow: 0 0 3px white;
519     border-radius: 3px;
520 }
521
522 video::-webkit-media-controls-panel .thumbnail-image,
523 audio::-webkit-media-controls-panel .thumbnail-image {
524     width: 100%;
525     height: 100%;
526 }
527
528 video::-webkit-media-controls-panel .thumbnail.show,
529 audio::-webkit-media-controls-panel .thumbnail.show {
530     opacity: 1;
531 }
532
533 video::-webkit-media-controls-panel .hidden,
534 audio::-webkit-media-controls-panel .hidden {
535     display: none;
536 }
537
538 /* Full Screen */
539
540 /* 
541     Page stylesheets are not allowed to override the style of media
542     controls while in full screen mode, so many if not all the rules
543     defined in this section will be marked as !important to enforce
544     this restriction 
545 */
546
547 video:-webkit-full-screen::-webkit-media-controls-panel {
548     -webkit-align-items: flex-start !important;
549     -webkit-justify-content: flex-end !important;
550
551     width: 440px !important;
552     height: 60px !important;
553     margin: 0 auto 50px auto !important;
554     padding-top: 10px !important;
555
556     background: -webkit-linear-gradient(top,
557         rgba(45, 45, 45, .97) 0,
558         rgba(30, 30, 30, .97) 19px,
559         rgba(25, 25, 25, .97) 19px,
560         rgba(25, 25, 25, .97) 20px,
561         rgba(19, 19, 19, .97) 20px,
562         rgba(12, 12, 12, .97) 100%
563     ) !important;
564
565     box-shadow: 
566         inset 0 -1px 1px rgba(0, 0, 0, 0.5),
567         inset 0  1px 0 0px   rgba(255, 255, 255, 0.15),
568         inset 0 -1px 0 0px   rgba(202, 202, 202, 0.09),
569         0  0   0 1px rgba(0, 0, 0, 0.5);
570     border-radius: 8px !important;
571
572     transition: opacity 0.3s linear !important;
573 }
574
575 video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
576     opacity: 0 ! important;
577     transition: opacity 0 ! important;
578 }
579
580 video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
581     -webkit-transform: none;
582     opacity: 1;
583     left: 11px;
584     top: 13px;
585     width: 90px;
586     height: 14px;
587     display: -webkit-flex;
588     -webkit-flex-direction: row;
589     -webkit-align-items: center;
590     background-image: none;
591     border: none;
592 }
593
594 video:-webkit-full-screen::-webkit-media-controls-volume-slider {
595     height: 6px;
596     border-radius: 3px;
597     background-image: -webkit-linear-gradient(top,
598         rgba(16, 16, 16, .300) 0,
599         rgba(9,  9,  9,  .629) 100%
600     );
601     box-shadow: inset -1px 0 0 rgba(0, 0, 0, .68), 0 1px rgba(255, 255, 255, .08);
602 }
603
604 video:-webkit-full-screen::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
605     width: 10px;
606     height: 10px;
607     border-radius: 5px;
608
609     /* rotateZ() forces the layer into compositing mode.
610     Slider thumbs are small, so forcing a compositing layer is inexpensive,
611        and it keeps the slider from having to repaint while sliding. */
612     -webkit-transform: rotateZ(270deg);
613 }
614
615 video:-webkit-full-screen::-webkit-media-controls-play-button {
616     position: absolute;
617     
618     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 22"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.478" stop-color="rgb(216, 216, 216)"/><stop offset="0.478" stop-color="rgb(208, 208, 208)"/><stop offset="0.522" stop-color="rgb(208, 208, 208)"/><stop offset="0.522" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 0,0 0,22 8,22 8,0 z" fill="url(#gradient)"/><path d="M 13,0 13,22 21,22 21,0 z" fill="url(#gradient)"/></svg>');
619
620     width: 22px;
621     height: 23px;
622     left: 209px;
623     top: 9px;
624     margin: 0;
625     padding: 0;
626 }
627
628 video:-webkit-full-screen::-webkit-media-controls-play-button.paused {
629     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 22"><linearGradient id="gradient" x2="0" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(216, 216, 216)"/><stop offset="0.478" stop-color="rgb(216, 216, 216)"/><stop offset="0.478" stop-color="rgb(208, 208, 208)"/><stop offset="0.522" stop-color="rgb(208, 208, 208)"/><stop offset="0.522" stop-color="rgb(200, 200, 200)"/><stop offset="1" stop-color="rgb(208, 208, 208)"/></linearGradient><path d="M 0,0 21,11 0,22 z" fill="url(#gradient)"/></svg>');
630 }
631
632 video:-webkit-full-screen::-webkit-media-controls-rewind-button {
633     position: absolute;
634     left: 162px;
635     top: 13px;
636     width: 18px;
637     height: 18px;
638 }
639
640 video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
641     position: absolute;
642
643
644     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 15"><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 22,0 11,7 22,15 z" fill="url(#gradient)"/><path d="M 11,0 0,7 11,15 z" fill="url(#gradient)"/></svg>');
645
646     width: 23px;
647     height: 16px;
648     left: 156px;
649     top: 13px;
650 }
651
652 video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
653     position: absolute;
654     display: -webkit-flex;
655     width: 29px;
656     height: 16px;
657     left: 262px;
658     top: 13px;
659 }
660
661 video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
662     position: absolute;
663
664     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 15"><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 0,0 11,7 0,15 z" fill="url(#gradient)"/><path d="M 11,0 22,7 11,15 z" fill="url(#gradient)"/></svg>');
665
666     width: 23px;
667     height: 16px;
668     left: 256px;
669     top: 13px;
670 }
671
672 video:-webkit-full-screen::-webkit-media-controls-timeline-container {
673     height: auto;
674     width: 420px;
675     position: absolute;
676     bottom: 9px;
677     left: 8px;
678     right: 8px;
679 }
680
681 video:-webkit-full-screen::-webkit-media-controls-status-display {
682     width: 420px;
683     position: absolute;
684     bottom: 7px;
685     left: 8px;
686     right: 8px;
687 }
688
689 video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
690     bottom: 114px;
691     right: calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */
692     max-width: calc(50% + 173px); /* right + 10px */
693     max-height: calc(100% - 124px); /* bottom + 10px */
694 }
695
696 video::-webkit-media-text-track-container {
697     position: relative;
698     width: 100%;
699     overflow: hidden;
700     padding-bottom: 5px;
701
702     text-align: center;
703     color: rgba(255, 255, 255, 1);
704
705     letter-spacing: normal;
706     word-spacing: normal;
707     text-transform: none;
708     text-indent: 0;
709     text-decoration: none;
710     pointer-events: none;
711     -webkit-user-select: none;
712     word-break: break-word;
713
714     -webkit-flex: 1 1;
715
716     -webkit-line-box-contain: block inline-box replaced;
717 }
718
719 video::cue {
720     background-color: rgba(0, 0, 0, 0.8);
721 }
722
723 video::-webkit-media-text-track-display {
724     position: absolute;
725     overflow: hidden;
726     white-space: pre-wrap;
727     -webkit-box-sizing: border-box;
728     font: 22px sans-serif;
729 }
730
731 video::cue(:future) {
732     color: gray;
733 }
734
735 video::-webkit-media-text-track-container b {
736     font-weight: bold;
737 }
738
739 video::-webkit-media-text-track-container u {
740     text-decoration: underline;
741 }
742
743 video::-webkit-media-text-track-container i {
744     font-style: italic;
745 }
746
747 video::-webkit-media-text-track-container .hidden,
748 audio::-webkit-media-text-track-container .hidden {
749     display: none;
750 }