61ba12a95ce25a762ccbeb5f8f6f02e1862a473a
[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 }
83
84 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
85     -webkit-appearance: media-mute-button;
86     display: -webkit-flex;
87     -webkit-flex: none;
88     border: none;
89     box-sizing: border-box;
90     width: 30px;
91     height: 30px;
92     line-height: 30px;
93     margin: 0 9px 0 -7px;
94 }
95
96 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
97     -webkit-appearance: media-play-button;
98     display: -webkit-flex;
99     -webkit-flex: none;
100     border: none;
101     box-sizing: border-box;
102     width: 30px;
103     height: 30px;
104     line-height: 30px;
105     margin: 0 9px;
106 }
107
108 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
109 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
110     -webkit-appearance: media-current-time-display;
111     -webkit-user-select: none;
112     -webkit-flex: none;
113     display: block;
114     border: none;
115     cursor: default;
116
117     height: 30px;
118     margin: 0 15px 0 0;
119
120     line-height: 30px;
121     font-family: -webkit-small-control;
122     font-size: 13px;
123     font-weight: normal;
124     font-style: normal;
125     color: white;
126
127     letter-spacing: normal;
128     word-spacing: normal;
129     text-transform: none;
130     text-indent: 0;
131     text-shadow: none;
132     text-decoration: none;
133 }
134
135 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
136     -webkit-appearance: media-slider;
137     display: -webkit-flex;
138     -webkit-flex: 1 1 auto;
139     height: 8px;
140     margin: 0 15px 0 1px;
141     padding: 0;
142     background-color: transparent;
143     min-width: 25px;
144     border-radius: 4px;
145     color: rgba(230, 230, 230, 0.35);
146 }
147
148 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
149     -webkit-appearance: media-volume-slider-container;
150     position: absolute;
151     padding: 0;
152     height: 100px;
153     width: 30px;
154     bottom: 30px;
155     z-index: 2;
156     background-color: rgba(20, 20, 20, 0.8);
157     right: 9px;
158     border-radius: 5px 5px 0px 0px;
159 }
160
161 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
162     -webkit-appearance: media-volume-slider;
163     display: -webkit-flex;
164     -webkit-align-items: center;
165     -webkit-flex-direction: column;
166     box-sizing: border-box;
167     height: 80px;
168     width: 8px;
169     margin: 10px auto;
170     border-radius: 4px;
171     background-color: transparent;
172     color: rgba(230, 230, 230, 0.35);
173 }
174
175 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 {
176     margin: -7px 0;
177 }
178
179 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 {
180     -webkit-appearance: media-volume-sliderthumb;
181     width: 12px;
182     height: 12px;
183     border-radius: 3px;
184     color: white;
185     margin: 0;
186 }
187
188 input[type="range"]::-webkit-media-slider-container {
189     display: -webkit-flex;
190     -webkit-align-items: center;
191     -webkit-flex-direction: row; /* This property is updated by C++ code. */
192     box-sizing: border-box;
193     height: 100%;
194     width: 100%;
195     border: 1px solid rgba(230, 230, 230, 0.35);
196     border-radius: 4px;
197     background-color: transparent;
198 }
199
200 /* The negative right margin causes the track to overflow its container. */
201 input[type="range"]::-webkit-media-slider-container > div {
202     margin-right: -14px;
203 }
204
205 input[type="range"]::-webkit-media-slider-thumb {
206     -webkit-appearance: media-sliderthumb;
207     width: 12px;
208     height: 12px;
209     border-radius: 3px;
210     color: white;
211     margin-left: -7px;
212     margin-right: -7px;
213 }
214
215 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
216     -webkit-appearance: media-toggle-closed-captions-button;
217     display: -webkit-flex;
218     -webkit-flex: none;
219     border: none;
220     box-sizing: border-box;
221     width: 30px;
222     height: 30px;
223     line-height: 30px;
224     margin: 0 9px 0 -7px;
225     background-repeat:no-repeat;
226     background-position:center;
227     background-image: url('data:image/svg+xml,<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata90"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title>Gnome Symbolic Icon Theme</dc:title></cc:Work></rdf:RDF></metadata><g id="layer9" transform="translate(-101,-357)"><path id="path12148" style="block-progression:tb;color:#bebebe;direction:ltr;text-indent:0;text-align:start;enable-background:accumulate;text-transform:none;" fill="#bebebe" d="m104.75,357.06c-2.0602,0-3.75,1.6898-3.75,3.75v4.4375c0,2.0602,1.6898,3.75,3.75,3.75h4.9375l3.75,2.6562,1.5938,1.125v-1.9688l-0.0313-2.5c1.1106-0.59715,1.9688-1.6526,1.9688-3.0625v-4.4375c0-2.0602-1.6898-3.75-3.75-3.75h-8.4688zm0,2,8.4688,0c0.9868,0,1.75,0.7632,1.75,1.75v4.4375c0,0.86273-0.63508,1.541-1.125,1.625l-0.84,0.12v0.84375,1.0312l-2.4062-1.6875-0.25-0.1875h-0.3125-5.2812c-0.9868,0-1.75-0.7632-1.75-1.75v-4.4375c0-0.9868,0.7632-1.75,1.75-1.75z"/></g></svg>');
228 }
229
230 video::-webkit-media-controls-closed-captions-container {
231     -webkit-appearance: media-closed-captions-container;
232     position: absolute;
233     display: block;
234     right: 38px;
235     bottom: 35px;
236     max-width: -webkit-calc(100% - 48px); /* right + 10px */
237     max-height: -webkit-calc(100% - 35px); /* bottom + 10px */
238     overflow-x: hidden;
239     overflow-y: auto;
240     background-color: rgba(20, 20, 20, 0.8);
241     border-radius: 10px;
242     cursor: default;
243     z-index: 2;
244 }
245
246 video::-webkit-media-controls-closed-captions-track-list {
247     display: block;
248     font-family: "Helvetica Bold", Helvetica;
249     font-size: 10pt;
250     -webkit-user-select: none;
251 }
252
253 video::-webkit-media-controls-closed-captions-track-list h3 {
254     margin: 1px 30px;
255     color: #757575;
256     text-shadow: 0 1px 0 black;
257     padding-top: 0px;
258     font-weight: bold;
259     font-size: 10pt;
260 }
261
262 video::-webkit-media-controls-closed-captions-track-list ul {
263     list-style-type: none;
264     margin: 0 0 4px 0;
265     padding: 0;
266     font-weight: bold;
267 }
268
269 video::-webkit-media-controls-closed-captions-track-list li {
270     position: relative;
271     color: white;
272     background-image: none;
273     text-shadow: 0 1px 0 black;
274     margin: 0;
275     padding-left: 37px;
276     padding-right: 35px;
277     padding-top: 0.15em;
278     padding-bottom: 0.2em;
279     box-sizing: border-box;
280     overflow: hidden;
281     white-space: nowrap;
282     text-overflow: ellipsis;
283     border-top: 1px solid rgba(0, 0, 0, 0);
284     border-bottom: 1px solid rgba(0, 0, 0, 0);
285 }
286 video::-webkit-media-controls-closed-captions-track-list li.selected {
287     background-color: rgba(230, 230, 230, 0.15);
288 }
289
290 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
291     -webkit-appearance: media-enter-fullscreen-button;
292     display: -webkit-flex;
293     -webkit-flex: none;
294     border: none;
295     box-sizing: border-box;
296     width: 30px;
297     height: 30px;
298     line-height: 30px;
299     margin: 0 9px 0 -7px;
300 }