[GTK] MEDIA_CONTROLS_SCRIPT support
[WebKit-https.git] / Source / WebCore / css / mediaControlsGtk.css
1 /*
2  * Copyright (C) 2009 Apple Inc.  All rights reserved.
3  * Copyright (C) 2009 Google Inc.
4  * Copyright (C) 2012 Zan Dobersek <zandobersek@gmail.com>
5  * Copyright (C) 2012 Igalia S.L.
6  *
7  * Redistribution and use in source and binary forms, with or without
8  * modification, are permitted provided that the following conditions
9  * are met:
10  * 1. Redistributions of source code must retain the above copyright
11  *    notice, this list of conditions and the following disclaimer.
12  * 2. Redistributions in binary form must reproduce the above copyright
13  *    notice, this list of conditions and the following disclaimer in the
14  *    documentation and/or other materials provided with the distribution.
15  *
16  * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
17  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
19  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
20  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
21  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
22  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
23  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
24  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26  */
27
28 /* These are based on the Chromium media controls */
29
30 body:-webkit-full-page-media {
31     background-color: rgb(0, 0, 0);
32 }
33
34 audio {
35     width: 300px;
36     height: 30px;
37 }
38
39 audio:-webkit-full-page-media, video:-webkit-full-page-media {
40     max-height: 100%;
41     max-width: 100%;
42 }
43
44 audio:-webkit-full-page-media::-webkit-media-controls-panel,
45 video:-webkit-full-page-media::-webkit-media-controls-panel {
46     bottom: 0px;
47 }
48
49 ::-webkit-media-controls {
50     display: -webkit-flex;
51     -webkit-flex-direction: column;
52     -webkit-justify-content: flex-end;
53     -webkit-align-items: center;
54 }
55
56 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
57     width: 100%;
58     max-width: 800px;
59     height: 30px;
60     bottom: 0;
61     text-indent: 0;
62     padding: 0;
63     box-sizing: border-box;
64     overflow: visible;
65 }
66
67 video::-webkit-media-controls-enclosure {
68     padding: 5px;
69     height: 40px;
70 }
71
72 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
73     display: -webkit-flex;
74     -webkit-flex-direction: row;
75     -webkit-align-items: center;
76     -webkit-justify-content: flex-start;
77     bottom: auto;
78     height: 30px;
79     background-color: rgba(20, 20, 20, 0.8);
80     border-radius: 5px;
81     overflow: visible;
82     transition: opacity 0.25s linear;
83 }
84
85 video::-webkit-media-controls-panel {
86     opacity: 0;
87 }
88
89 video::-webkit-media-controls-panel.show,
90 video::-webkit-media-controls-panel.paused {
91     opacity: 1;
92 }
93
94 video::-webkit-media-controls-panel div.mute-box,
95 audio::-webkit-media-controls-panel div.mute-box {
96     display: -webkit-flex;
97     -webkit-flex: none;
98     box-sizing: border-box;
99     width: 30px;
100     height: 30px;
101     margin: 0 9px 0 -7px;
102 }
103
104 video::-webkit-media-controls-panel div.mute-box.hidden,
105 audio::-webkit-media-controls-panel div.mute-box.hidden {
106     display: none;
107 }
108
109 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
110     -webkit-appearance: media-mute-button;
111     display: -webkit-flex;
112     -webkit-flex: none;
113     border: none;
114     box-sizing: border-box;
115     width: 30px;
116     height: 30px;
117     line-height: 30px;
118     outline: none;
119 }
120
121 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
122     -webkit-appearance: media-play-button;
123     display: -webkit-flex;
124     -webkit-flex: none;
125     border: none;
126     box-sizing: border-box;
127     width: 30px;
128     height: 30px;
129     line-height: 30px;
130     margin: 0 9px;
131     outline: none;
132 }
133
134 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
135 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
136     -webkit-appearance: media-current-time-display;
137     -webkit-user-select: none;
138     -webkit-flex: none;
139     border: none;
140     cursor: default;
141
142     height: 30px;
143     margin: 0 15px 0 0;
144
145     line-height: 30px;
146     font-family: -webkit-small-control;
147     font-size: 13px;
148     font-weight: normal;
149     font-style: normal;
150     color: white;
151
152     letter-spacing: normal;
153     word-spacing: normal;
154     text-transform: none;
155     text-indent: 0;
156     text-shadow: none;
157     text-decoration: none;
158 }
159
160 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
161     display: block;
162 }
163
164 audio::-webkit-media-controls-time-remaining-display,
165 video::-webkit-media-controls-time-remaining-display {
166     display: none;
167 }
168
169 audio::-webkit-media-controls-time-remaining-display.show,
170 video::-webkit-media-controls-time-remaining-display.show {
171     display: block;
172 }
173
174 audio::-webkit-media-controls-current-time-display.hidden,
175 video::-webkit-media-controls-current-time-display.hidden,
176 audio::-webkit-media-controls-time-remaining-display.hidden,
177 video::-webkit-media-controls-time-remaining-display.hidden {
178     display: none;
179 }
180
181 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
182     -webkit-appearance: media-slider;
183     display: -webkit-flex;
184     -webkit-flex: 1 1 auto;
185     height: 8px;
186     margin: 0 15px 0 1px;
187     padding: 0;
188     background-color: transparent;
189     min-width: 25px;
190     border-radius: 4px;
191     color: rgba(230, 230, 230, 0.35);
192     outline: none;
193 }
194
195 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
196     -webkit-appearance: media-volume-slider-container;
197     overflow: hidden;
198     position: absolute;
199     padding: 0;
200     height: 100px;
201     width: 30px;
202     bottom: 30px;
203     z-index: 2;
204     background-color: rgba(20, 20, 20, 0.8);
205     right: 9px;
206     border-radius: 5px 5px 0px 0px;
207     transition: height 0.10s linear;
208 }
209
210 audio::-webkit-media-controls-volume-slider-container.hidden,
211 video::-webkit-media-controls-volume-slider-container.hidden {
212     height: 0;
213 }
214
215 audio::-webkit-media-controls-volume-slider-container.down,
216 video::-webkit-media-controls-volume-slider-container.down {
217     bottom: -100px;
218     border-radius: 0px 0px 5px 5px;
219     transition: height 0.10s linear, bottom 0.10s linear;
220 }
221
222 audio::-webkit-media-controls-panel .hidden.down,
223 video::-webkit-media-controls-panel .hidden.down {
224     bottom: 0;
225 }
226
227 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
228     -webkit-appearance: media-volume-slider;
229     display: -webkit-flex;
230     -webkit-align-items: center;
231     -webkit-flex-direction: column;
232     box-sizing: border-box;
233     height: 80px;
234     width: 8px;
235     margin: 10px auto;
236     border-radius: 4px;
237     background-color: transparent;
238     color: rgba(230, 230, 230, 0.35);
239     outline: none;
240 }
241
242 audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div {
243     margin: -7px 0;
244 }
245
246 audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb, video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-thumb {
247     -webkit-appearance: media-volume-sliderthumb;
248     width: 12px;
249     height: 12px;
250     border-radius: 3px;
251     color: white;
252     margin: 0;
253 }
254
255 input[type="range"]::-webkit-media-slider-container {
256     display: -webkit-flex;
257     -webkit-align-items: center;
258     -webkit-flex-direction: row; /* This property is updated by C++ code. */
259     box-sizing: border-box;
260     height: 100%;
261     width: 100%;
262     border: 1px solid rgba(230, 230, 230, 0.35);
263     border-radius: 4px;
264     background-color: transparent;
265 }
266
267 /* The negative right margin causes the track to overflow its container. */
268 input[type="range"]::-webkit-media-slider-container > div {
269     margin-right: -14px;
270 }
271
272 input[type="range"]::-webkit-media-slider-thumb {
273     -webkit-appearance: media-sliderthumb;
274     width: 12px;
275     height: 12px;
276     border-radius: 3px;
277     color: white;
278     margin-left: -7px;
279     margin-right: -7px;
280 }
281
282 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
283     -webkit-appearance: media-toggle-closed-captions-button;
284     display: -webkit-flex;
285     -webkit-flex: none;
286     border: none;
287     box-sizing: border-box;
288     width: 30px;
289     height: 30px;
290     line-height: 30px;
291     margin: 0 9px 0 -7px;
292     outline: none;
293 }
294
295 video::-webkit-media-controls-closed-captions-container {
296     -webkit-appearance: media-closed-captions-container;
297     display: -webkit-flex;
298     position: absolute;
299     bottom: 35px;
300     z-index: 2;
301     background-color: rgba(20, 20, 20, 0.8);
302     border-radius: 5px 5px 0px 0px;
303     overflow: hidden;
304     max-width: -webkit-calc(100% - 48px); /* right + 10px */
305     max-height: -webkit-calc(100% - 35px); /* bottom + 10px */
306     cursor: default;
307     font-family: -webkit-small-control;
308     font-size: 10pt;
309     font-weight: normal;
310     font-style: normal;
311     color: white;
312     -webkit-user-select: none;
313     transition: height 0.10s linear;
314 }
315
316 video::-webkit-media-controls-closed-captions-container h3 {
317     margin: 1px 10px;
318     padding-top: 4px;
319 }
320
321 video::-webkit-media-controls-closed-captions-container ul {
322     list-style-type: none;
323     margin: 0 0 4px 0;
324     padding: 0;
325 }
326
327 video::-webkit-media-controls-closed-captions-container li {
328     position: relative;
329     color: white;
330     margin: 0;
331     padding-left: 17px;
332     padding-right: 15px;
333     padding-top: 0.15em;
334     padding-bottom: 0.2em;
335     box-sizing: border-box;
336     overflow: hidden;
337     white-space: nowrap;
338     text-overflow: ellipsis;
339     outline: none;
340 }
341 video::-webkit-media-controls-closed-captions-container li.selected {
342     background-color: rgba(230, 230, 230, 0.15);
343 }
344
345 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
346     -webkit-appearance: media-enter-fullscreen-button;
347     display: -webkit-flex;
348     -webkit-flex: none;
349     border: none;
350     box-sizing: border-box;
351     width: 30px;
352     height: 30px;
353     line-height: 30px;
354     margin: 0 9px 0 -7px;
355     outline: none;
356 }
357
358 video::-webkit-media-controls-panel button.hidden,
359 audio::-webkit-media-controls-panel button.hidden {
360     display: none;
361 }