05b4cbdf158742d0801b019fd3e64877613e0957
[WebKit-https.git] / Source / WebCore / Modules / mediacontrols / mediaControlsiOS.css
1 /*
2  * Copyright (C) 2012, 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     min-width: 260px;
27     height: 39px;
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 ::-webkit-media-controls {
48     width: inherit;
49     height: inherit;
50     position: relative;
51     display: -webkit-flex;
52     -webkit-align-items: stretch;
53     -webkit-justify-content: flex-end;
54     -webkit-flex-direction: column;
55     font-family: -apple-system-font;
56     overflow: hidden;
57     min-width: 260px;
58 }
59
60 video::-webkit-media-controls-panel input[type="button"],
61 audio::-webkit-media-controls-panel input[type="button"],
62 video::-webkit-media-controls-panel button,
63 audio::-webkit-media-controls-panel button {
64     padding: 0;
65     border: none;
66     -webkit-appearance: none;
67 }
68
69 video::-webkit-media-controls-wireless-playback-status,
70 audio::-webkit-media-controls-wireless-playback-status {
71     display: block;
72     width: 100%;
73     height: 100%;
74     background-color: black;
75     background-repeat: no-repeat;
76     background-position: 50% 50%;
77     background-size: 100% 50%;
78 }
79
80 video::-webkit-media-controls-wireless-playback-status.hidden,
81 audio::-webkit-media-controls-wireless-playback-status.hidden {
82     display: none;
83 }
84
85 audio::-webkit-media-controls-wireless-playback-picker-button,
86 video::-webkit-media-controls-wireless-playback-picker-button {
87     display: block;
88     background-color: black;
89     -webkit-mask-repeat: no-repeat;
90     -webkit-mask-position: 0 1px;
91 }
92
93 audio::-webkit-media-controls-wireless-playback-picker-button {
94     width: 44px;
95     height: 39px;
96     -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 39"><g fill="none"><path stroke="white" stroke-width="1" d="M15.5,24.5  10.5,24.5  10.5,11.5  31.5,11.5  31.5,24.5  26.5,24.5  31.5,24.5  31.5,11.5  10.5,11.5  10.5,24.5  15.5,24.5 Z" /><path fill="white" d="M21,21  13.5,29  28.5,29" /></g></svg>');
97 }
98
99 video::-webkit-media-controls-wireless-playback-picker-button {
100     width: 42px;
101     height: 44px;
102     -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 44"><g fill="none"><path stroke="white" stroke-width="1" d="M15,27.5  10.5,27.5  10.5,14.5  30.5,14.5  30.5,27.5  26,27.5  30.5,27.5  30.5,14.5  10.5,14.5  10.5,27.5  15,27.5 Z" /><path fill="white" d="M20.5,23.5  13,31.5  28,31.5" /></g></svg>');
103     opacity: 0.5;
104 }
105
106 video::-webkit-media-controls-wireless-playback-picker-button.active,
107 audio::-webkit-media-controls-wireless-playback-picker-button.active {
108     background-color: #1060FE;
109 }
110
111 video::-webkit-media-text-track-container,
112 audio::-webkit-media-text-track-container {
113     position: relative;
114     -webkit-flex: 1 1 auto;
115 }
116
117 audio::-webkit-media-controls-panel,
118 video::-webkit-media-controls-panel {
119     box-sizing: border-box;
120     position: absolute;
121     bottom: 0;
122
123     -webkit-user-select: none;
124
125     display: -webkit-flex;
126     -webkit-flex-direction: row;
127     -webkit-align-items: center;
128     -webkit-user-select: none;
129
130     transition: opacity 0.25s linear;
131     -webkit-transform-origin: bottom left;
132 }
133
134 video::-webkit-media-controls-panel {
135     background-color: rgba(255, 255, 255, 0.6);
136 }
137
138 audio::-webkit-media-controls-panel {
139     background-color: rgba(228, 228, 228, 1);
140 }
141
142
143 audio::-webkit-media-controls-panel {
144     height: 39px;
145     padding-right: 8px;
146     padding-left: 7px;
147 }
148
149 video::-webkit-media-controls-panel {
150     height: 44px;
151     width: 100%;
152     opacity: 0;
153     padding-right: 24px;
154     padding-left: 24px;
155 }
156
157 video::-webkit-media-controls-panel.show,
158 video::-webkit-media-controls-panel.paused,
159 video::-webkit-media-controls-panel:hover {
160     opacity: 1;
161 }
162
163 video::-webkit-media-controls-rewind-button,
164 audio::-webkit-media-controls-rewind-button,
165 video::-webkit-media-controls-panel .mute-box,
166 audio::-webkit-media-controls-panel .mute-box,
167 video::-webkit-media-controls-mute-button,
168 audio::-webkit-media-controls-mute-button,
169 video::-webkit-media-controls-volume-max-button,
170 video::-webkit-media-controls-panel .volume-box,
171 audio::-webkit-media-controls-panel .volume-box,
172 audio::-webkit-media-controls-volume-slider,
173 video::-webkit-media-controls-volume-slider {
174     display: none !important;
175 }
176
177 video::-webkit-media-controls-start-playback-button,
178 audio::-webkit-media-controls-start-playback-button {
179     -webkit-appearance: none;
180     display: block;
181     padding: 0;
182     border: 0;
183     position: absolute;
184     width: 72px;
185     height: 72px;
186     left: calc(50% - 36px);
187     top: calc(50% - 36px);
188     background-origin: content-box;
189     background-repeat: no-repeat;
190     background-position: center;
191     background-image: url('data:image/svg+xml,<svg viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg"><circle cx="72" cy="72" r="70" fill="rgba(247, 247, 247, .82)"/><path d="M48,36v74L109,74L48,36z" fill="rgba(129, 129, 129, .9)"/></svg>');
192 }
193
194 video::-webkit-media-controls-start-playback-button.failed,
195 audio::-webkit-media-controls-start-playback-button.failed {
196     background-image: url('data:image/svg+xml,<svg viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg"><circle cx="72" cy="72" r="70" fill="rgba(247, 247, 247, .82)"/><g fill="rgba(129, 129, 129, .9)"><rect x="14" y="70.4" transform="matrix(0.8493 0.5279 -0.5279 0.8493 48.8614 -27.1595)" width="116" height="3.2"/><polygon points="109,74 48,36 48,52.3 95.6,81.9 "/><polygon points="48,110 87.7,86.6 48,61.9 "/></g></svg>');
197 }
198
199 video::-webkit-media-controls-play-button,
200 audio::-webkit-media-controls-play-button,
201 video::-webkit-media-controls-fullscreen-button,
202 audio::-webkit-media-controls-fullscreen-button {
203     -webkit-appearance: none;
204     display: block;
205     padding: 0;
206     border: 0;
207     -webkit-user-select: none;
208     background-repeat: no-repeat;
209 }
210
211 audio::-webkit-media-controls-play-button {
212     width: 42px;
213     height: 39px;
214     background-size: 42px 39px;
215     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><g fill="rgba(2, 2, 2, 1)"><rect x="13" y="9.5" width="6" height="20.5"/><rect x="24" y="9.5" width="6" height="20.5"/></g></svg>');
216 }
217
218 audio::-webkit-media-controls-play-button:active {
219     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><g fill="white"><rect x="13" y="9.5" width="6" height="20.5"/><rect x="24" y="9.5" width="6" height="20.5"/></g></svg>');
220 }
221
222 audio::-webkit-media-controls-play-button.paused {
223     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><path fill="rgba(2, 2, 2, 1)" d="M11,9.5 32,20.5 11,31.5z"/></svg>');
224 }
225
226 video::-webkit-media-controls-fullscreen-button {
227     width: 35px;
228     height: 44px;
229     background-size: 35px 44px;
230     opacity: 0.9;
231     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 44"><g stroke="rgba(0, 0, 0, 0.4)" fill="none"><path d="M 10.5,20.5 v -5 h 5 M 10.5,15.5 l 5,5"/><path d="M 24.5,24.5 v 5 h -5 M 24.5,29.5 l -5,-5"/></g></svg>');
232 }
233
234 video::-webkit-media-controls-play-button {
235     width: 41px;
236     height: 44px;
237     background-size: 41px 44px;
238     opacity: 0.9;
239     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><g fill="rgba(0, 0, 0, 0.4)"><rect x="11" y="11" width="6" height="22"/><rect x="23" y="11" width="6" height="22"/></g></svg>');
240 }
241
242 video::-webkit-media-controls-play-button:active {
243     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><g fill="white"><rect x="11" y="11" width="6" height="22"/><rect x="23" y="11" width="6" height="22"/></g></svg>');
244 }
245
246 video::-webkit-media-controls-play-button.paused {
247     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><path fill="rgba(0, 0, 0, 0.4)" d="M10,11  31,22  10,33 Z"/></svg>');
248 }
249
250 video::-webkit-media-controls-fullscreen-button:active {
251     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 44"><g stroke="white" fill="none"><path d="M 10,20 v -5 h 5 M 10,15 l 5,5"/><path d="M 24,24 v 5 h -5 M 24,29 l -5,-5"/></g></svg>');
252 }
253
254 video::-webkit-media-controls-timeline,
255 audio::-webkit-media-controls-timeline {
256     -webkit-appearance: none;
257     -webkit-flex: 1 1 0;
258     height: 3px;
259     margin: 0;
260
261     border-radius: 1.5px;
262 }
263
264 video::-webkit-media-controls-timeline {
265     opacity: 0.75;
266 }
267
268 video::-webkit-media-controls-timeline::-webkit-slider-thumb,
269 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
270     -webkit-appearance: none;
271     width: 16px;
272     height: 16px;
273     border: 0;
274     border-radius: 8px;
275     background-image: url('data:image/svg+xml,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle r="7.75" cy="8" cx="8" fill="white" stroke="rgba(0, 0, 0, .25)" stroke-width=".5"/></svg>');
276     background-color: transparent !important;
277     box-shadow: 0 3px 1px -1px rgba(0, 0, 0, .15);
278
279     /* rotateZ() forces the layer into compositing mode. Slider 
280        thumbs are small, so forcing a compositing layer is inexpensive,
281        and it keeps the slider from having to repaint while sliding. */
282     -webkit-transform: rotateZ(0deg);
283 }
284
285 video::-webkit-media-controls-current-time-display,
286 video::-webkit-media-controls-time-remaining-display,
287 audio::-webkit-media-controls-current-time-display,
288 audio::-webkit-media-controls-time-remaining-display {
289     -webkit-user-select: none;
290     -webkit-flex: 0 0 0;
291     display: -webkit-flex;
292     -webkit-justify-content: center;
293     -webkit-align-items: center;
294     cursor: default;
295     overflow-y: hidden;
296     overflow-x: hidden;
297     min-width: 44px;
298     letter-spacing: normal;
299     word-spacing: normal;
300     line-height: normal;
301     text-transform: none;
302     text-indent: 0px;
303     text-decoration: none;
304 }
305
306 video::-webkit-media-controls-current-time-display,
307 video::-webkit-media-controls-time-remaining-display {
308     font-size: 13px;
309     color: rgba(0, 0, 0, .5);
310 }
311
312 video::-webkit-media-controls-current-time-display {
313     padding-left: 6px;
314 }
315
316 video::-webkit-media-controls-time-remaining-display {
317     padding-right: 13px;
318 }
319
320 audio::-webkit-media-controls-current-time-display, 
321 audio::-webkit-media-controls-time-remaining-display {
322     font-size: 12px;
323     color: rgba(5, 5, 5, 1);
324 }
325
326 video::-webkit-media-controls-timeline-container .hour-long-time,
327 audio::-webkit-media-controls-timeline-container .hour-long-time {
328     min-width: 67px;
329 }
330
331 video::-webkit-media-controls-timeline-container,
332 audio::-webkit-media-controls-timeline-container {
333     display: -webkit-flex;
334     -webkit-flex-direction: row;
335     -webkit-align-items: center;
336     -webkit-user-select: none;
337     -webkit-flex: 1 1 0;
338     position: relative;
339     padding: 0;
340 }
341
342 video::-webkit-media-controls-panel .hidden,
343 audio::-webkit-media-controls-panel .hidden {
344     display: none;
345 }
346
347 video::-webkit-media-text-track-container {
348     position: relative;
349     width: 100%;
350     overflow: hidden;
351     padding-bottom: 5px;
352     z-index: 0;
353
354     text-align: center;
355     color: rgba(255, 255, 255, 1);
356
357     letter-spacing: normal;
358     word-spacing: normal;
359     text-transform: none;
360     text-indent: 0;
361     text-decoration: none;
362     pointer-events: none;
363     -webkit-user-select: none;
364     word-break: break-word;
365
366     -webkit-flex: 1 1;
367
368     -webkit-line-box-contain: block inline-box replaced;
369 }
370
371 video::cue {
372     background-color: rgba(0, 0, 0, 0.8);
373 }
374
375 video::-webkit-media-text-track-display {
376     position: absolute;
377     overflow: hidden;
378     white-space: pre-wrap;
379     -webkit-box-sizing: border-box;
380     font: 22px sans-serif;
381 }
382
383 video::-webkit-media-text-track-display-backdrop {
384     display: inline-block;
385 }
386
387 video::cue(:future) {
388     color: gray;
389 }
390
391 video::-webkit-media-text-track-container b {
392     font-weight: bold;
393 }
394
395 video::-webkit-media-text-track-container u {
396     text-decoration: underline;
397 }
398
399 video::-webkit-media-text-track-container i {
400     font-style: italic;
401 }