[MediaControls][iOS] Enable JavaScript Media Controls on iOS.
[WebKit-https.git] / Source / WebCore / Modules / mediacontrols / mediaControlsiOS.css
1 /*
2  * Copyright (C) 2012, 2013 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 COMPUTER, 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 COMPUTER, 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: 44px;
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 }
56
57 video::-webkit-media-text-track-container,
58 audio::-webkit-media-text-track-container {
59     position: relative;
60     -webkit-flex: 1 1 auto;
61 }
62
63 video::-webkit-media-controls-panel,
64 audio::-webkit-media-controls-panel {
65     box-sizing: border-box;
66     position: relative;
67     bottom: 0;
68     width: 100%;
69     padding-top: 1px;
70     height: 44px;
71     line-height: 44px;
72     -webkit-user-select: none;
73     background-color: rgba(255, 255, 255, .5);
74
75     display: -webkit-flex;
76     -webkit-flex-direction: row;
77     -webkit-align-items: center;
78     -webkit-user-select: none;
79
80     transition: opacity 0.25s linear;
81 }
82
83 video::-webkit-media-controls-panel {
84     opacity: 0;
85 }
86
87 video::-webkit-media-controls-panel.show,
88 video::-webkit-media-controls-panel.paused,
89 video::-webkit-media-controls-panel:hover {
90     opacity: 1;
91 }
92
93
94 video::-webkit-media-controls-rewind-button,
95 audio::-webkit-media-controls-rewind-button,
96 video::-webkit-media-controls-panel .mute-box,
97 audio::-webkit-media-controls-panel .mute-box,
98 video::-webkit-media-controls-mute-button,
99 audio::-webkit-media-controls-mute-button,
100 video::-webkit-media-controls-volume-max-button,
101 video::-webkit-media-controls-panel .volume-box,
102 audio::-webkit-media-controls-panel .volume-box,
103 audio::-webkit-media-controls-volume-slider,
104 video::-webkit-media-controls-volume-slider {
105     display: none !important;
106 }
107
108 video::-webkit-media-controls-play-button,
109 audio::-webkit-media-controls-play-button,
110 video::-webkit-media-controls-fullscreen-button,
111 audio::-webkit-media-controls-fullscreen-button {
112     -webkit-appearance: none;
113     display: block;
114     padding: 0;
115     border: 0;
116     background-color: black;
117     -webkit-mask-origin: content-box;
118     -webkit-mask-repeat: no-repeat;
119     -webkit-mask-size: contain;
120     -webkit-user-select: none;
121 }
122
123 video::-webkit-media-controls-play-button:active,
124 audio::-webkit-media-controls-play-button:active,
125 video::-webkit-media-controls-fullscreen-button:active,
126 audio::-webkit-media-controls-fullscreen-button:active, {
127     background-color: white;
128 }
129
130 video::-webkit-media-controls-play-button,
131 audio::-webkit-media-controls-play-button {
132     margin-left: 34px;
133     margin-right: 13px;
134     width: 18px;
135     height: 16px;
136     -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 16"><rect x="1" y="0" width="5" height="16" fill="white"/><rect x="12" y="0" width="5" height="16" fill="white"/></svg>');
137 }
138
139 video::-webkit-media-controls-play-button.paused,
140 audio::-webkit-media-controls-play-button.paused {
141     -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 16"><path d="M 0,0 18,8 0,16 z" fill="white"/></svg>');
142 }
143
144 video::-webkit-media-controls-fullscreen-button,
145 audio::-webkit-media-controls-fullscreen-button {
146     margin-right: 34px;
147     margin-left: 13px;
148     width: 16px;
149     height: 16px;
150     -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px"><g stroke="white" fill="transparent"><path d="M .5,5 v -4.5 h 4.5M .5,.5 l 5.5,5.5" /> <path d="M 15.5,11 v 4.5 h -4.5 M 15.5,15.5 l -5.5,-5.5" /></g></svg>')
151 }
152
153 /* Retina images */
154 @media only screen and (-webkit-min-device-pixel-ratio: 2) {
155     video::-webkit-media-controls-fullscreen-button,
156     audio::-webkit-media-controls-fullscreen-button {
157         -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g stroke="white" stroke-width="2" fill="transparent"><path d="M 1,9 v -8 h 8 M 1,1 l 11,11" /> <path d="M 29,21 v 8 h -8 M 29,29 l -11,-11" /></g></svg>');
158     }
159 }
160
161 video::-webkit-media-controls-timeline,
162 audio::-webkit-media-controls-timeline {
163     -webkit-appearance: none;
164     -webkit-flex: 1 1 0;
165     height: 3px;
166     margin: 0;
167
168     border-radius: 1.5px;
169     background-color: black;
170 }
171
172 video::-webkit-media-controls-timeline::-webkit-slider-thumb,
173 audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
174     -webkit-appearance: none;
175     width: 15px;
176     height: 15px;
177     border: 0;
178     border-radius: 7.5px;
179     background-color: white !important;
180     color: white;
181     box-shadow: 0 0 1px rgba(0, 0, 0, .5);
182
183     /* rotateZ() forces the layer into compositing mode. Slider 
184        thumbs are small, so forcing a compositing layer is inexpensive,
185        and it keeps the slider from having to repaint while sliding. */
186     -webkit-transform: rotateZ(0deg);
187 }
188
189 video::-webkit-media-controls-current-time-display,
190 video::-webkit-media-controls-time-remaining-display,
191 audio::-webkit-media-controls-current-time-display,
192 audio::-webkit-media-controls-time-remaining-display {
193     -webkit-user-select: none;
194     -webkit-flex: 0 0 0;
195     display: -webkit-flex;
196     -webkit-justify-content: center;
197     -webkit-align-items: center;
198     cursor: default;
199     font: -webkit-small-control;
200     font-size: 10px;
201     overflow-y: hidden;
202     overflow-x: hidden;
203     width: 45px;
204     min-width: 45px;
205     color: black;
206     letter-spacing: normal;
207     word-spacing: normal;
208     line-height: normal;
209     text-transform: none;
210     text-indent: 0px;
211     text-decoration: none;
212 }
213
214 video::-webkit-media-controls-timeline-container,
215 audio::-webkit-media-controls-timeline-container {
216     display: -webkit-flex;
217     -webkit-flex-direction: row;
218     -webkit-align-items: center;
219     -webkit-user-select: none;
220     -webkit-flex: 1 1 0;
221     position: relative;
222     padding: 0;
223 }
224
225 video::-webkit-media-controls-panel .hidden,
226 audio::-webkit-media-controls-panel .hidden {
227     display: none;
228 }
229
230 video::-webkit-media-text-track-container {
231     position: relative;
232     width: 100%;
233     overflow: hidden;
234     padding-bottom: 5px;
235
236     text-align: center;
237     color: rgba(255, 255, 255, 1);
238
239     letter-spacing: normal;
240     word-spacing: normal;
241     text-transform: none;
242     text-indent: 0;
243     text-decoration: none;
244     pointer-events: none;
245     -webkit-user-select: none;
246     word-break: break-word;
247
248     -webkit-flex: 1 1;
249
250     -webkit-line-box-contain: block inline-box replaced;
251 }
252
253 video::cue {
254     background-color: rgba(0, 0, 0, 0.8);
255 }
256
257 video::-webkit-media-text-track-display {
258     position: absolute;
259     overflow: hidden;
260     white-space: pre-wrap;
261     -webkit-box-sizing: border-box;
262     font: 22px sans-serif;
263 }
264
265 video::cue(:future) {
266     color: gray;
267 }
268
269 video::-webkit-media-text-track-container b {
270     font-weight: bold;
271 }
272
273 video::-webkit-media-text-track-container u {
274     text-decoration: underline;
275 }
276
277 video::-webkit-media-text-track-container i {
278     font-style: italic;
279 }