OLD | NEW |
1 /* | 1 /* |
2 * Copyright (C) 2009 Apple Inc. All rights reserved. | 2 * Copyright (C) 2009 Apple Inc. All rights reserved. |
3 * Copyright (C) 2009 Google Inc. | 3 * Copyright (C) 2009 Google Inc. |
4 * | 4 * |
5 * Redistribution and use in source and binary forms, with or without | 5 * Redistribution and use in source and binary forms, with or without |
6 * modification, are permitted provided that the following conditions | 6 * modification, are permitted provided that the following conditions |
7 * are met: | 7 * are met: |
8 * 1. Redistributions of source code must retain the above copyright | 8 * 1. Redistributions of source code must retain the above copyright |
9 * notice, this list of conditions and the following disclaimer. | 9 * notice, this list of conditions and the following disclaimer. |
10 * 2. Redistributions in binary form must reproduce the above copyright | 10 * 2. Redistributions in binary form must reproduce the above copyright |
(...skipping 14 matching lines...) Expand all Loading... |
25 | 25 |
26 /* Chromium default media controls */ | 26 /* Chromium default media controls */ |
27 | 27 |
28 /* WARNING: This css file can only style <audio> and <video> elements */ | 28 /* WARNING: This css file can only style <audio> and <video> elements */ |
29 | 29 |
30 audio { | 30 audio { |
31 width: 300px; | 31 width: 300px; |
32 height: 30px; | 32 height: 30px; |
33 } | 33 } |
34 | 34 |
35 audio::-webkit-media-controls, | 35 audio::-internal-media-controls, |
36 video::-webkit-media-controls { | 36 video::-internal-media-controls { |
37 width: inherit; | 37 width: inherit; |
38 height: inherit; | 38 height: inherit; |
39 position: relative; | 39 position: relative; |
40 direction: ltr; | 40 direction: ltr; |
41 display: flex; | 41 display: flex; |
42 flex-direction: column; | 42 flex-direction: column; |
43 justify-content: flex-end; | 43 justify-content: flex-end; |
44 align-items: center; | 44 align-items: center; |
45 } | 45 } |
46 | 46 |
47 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
{ | 47 audio::-internal-media-controls-enclosure, video::-internal-media-controls-enclo
sure { |
48 width: 100%; | 48 width: 100%; |
49 max-width: 800px; | 49 max-width: 800px; |
50 height: 30px; | 50 height: 30px; |
51 flex-shrink: 0; | 51 flex-shrink: 0; |
52 bottom: 0; | 52 bottom: 0; |
53 text-indent: 0; | 53 text-indent: 0; |
54 padding: 0; | 54 padding: 0; |
55 box-sizing: border-box; | 55 box-sizing: border-box; |
56 } | 56 } |
57 | 57 |
58 video::-webkit-media-controls-enclosure { | 58 video::-internal-media-controls-enclosure { |
59 padding: 0px 5px 5px 5px; | 59 padding: 0px 5px 5px 5px; |
60 height: 35px; | 60 height: 35px; |
61 flex-shrink: 0; | 61 flex-shrink: 0; |
62 } | 62 } |
63 | 63 |
64 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | 64 audio::-internal-media-controls-panel, video::-internal-media-controls-panel { |
65 display: flex; | 65 display: flex; |
66 flex-direction: row; | 66 flex-direction: row; |
67 align-items: center; | 67 align-items: center; |
68 /* We use flex-start here to ensure that the play button is visible even | 68 /* We use flex-start here to ensure that the play button is visible even |
69 * if we are too small to show all controls. | 69 * if we are too small to show all controls. |
70 */ | 70 */ |
71 justify-content: flex-start; | 71 justify-content: flex-start; |
72 -webkit-user-select: none; | 72 -webkit-user-select: none; |
73 position: relative; | 73 position: relative; |
74 width: 100%; | 74 width: 100%; |
(...skipping 15 matching lines...) Expand all Loading... |
90 right: 0; | 90 right: 0; |
91 bottom: 0; | 91 bottom: 0; |
92 left: 0; | 92 left: 0; |
93 } | 93 } |
94 | 94 |
95 audio:-webkit-full-page-media, video:-webkit-full-page-media { | 95 audio:-webkit-full-page-media, video:-webkit-full-page-media { |
96 max-height: 100%; | 96 max-height: 100%; |
97 max-width: 100%; | 97 max-width: 100%; |
98 } | 98 } |
99 | 99 |
100 audio:-webkit-full-page-media::-webkit-media-controls-panel, | 100 audio:-webkit-full-page-media::-internal-media-controls-panel, |
101 video:-webkit-full-page-media::-webkit-media-controls-panel { | 101 video:-webkit-full-page-media::-internal-media-controls-panel { |
102 bottom: 0px; | 102 bottom: 0px; |
103 } | 103 } |
104 | 104 |
105 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { | 105 audio::-internal-media-controls-mute-button, video::-internal-media-controls-mut
e-button { |
106 -webkit-appearance: media-mute-button; | 106 -webkit-appearance: media-mute-button; |
107 display: flex; | 107 display: flex; |
108 flex: none; | 108 flex: none; |
109 border: none; | 109 border: none; |
110 box-sizing: border-box; | 110 box-sizing: border-box; |
111 width: 35px; | 111 width: 35px; |
112 height: 30px; | 112 height: 30px; |
113 line-height: 30px; | 113 line-height: 30px; |
114 margin: 0 6px 0 0; | 114 margin: 0 6px 0 0; |
115 padding: 0; | 115 padding: 0; |
116 background-color: initial; | 116 background-color: initial; |
117 color: inherit; | 117 color: inherit; |
118 } | 118 } |
119 | 119 |
120 audio::-webkit-media-controls-overlay-enclosure { | 120 audio::-internal-media-controls-overlay-enclosure { |
121 display: none; | 121 display: none; |
122 } | 122 } |
123 | 123 |
124 video::-webkit-media-controls-overlay-enclosure { | 124 video::-internal-media-controls-overlay-enclosure { |
125 display: flex; | 125 display: flex; |
126 position: relative; | 126 position: relative; |
127 flex-direction: column; | 127 flex-direction: column; |
128 justify-content: flex-end; | 128 justify-content: flex-end; |
129 align-items: center; | 129 align-items: center; |
130 flex: 1 1; | 130 flex: 1 1; |
131 width: 100%; | 131 width: 100%; |
132 max-width: 800px; | 132 max-width: 800px; |
133 text-indent: 0; | 133 text-indent: 0; |
134 box-sizing: border-box; | 134 box-sizing: border-box; |
135 overflow: hidden; | 135 overflow: hidden; |
136 } | 136 } |
137 | 137 |
138 video::-webkit-media-controls-overlay-play-button { | 138 video::-internal-media-controls-overlay-play-button { |
139 -webkit-appearance: media-overlay-play-button; | 139 -webkit-appearance: media-overlay-play-button; |
140 display: flex; | 140 display: flex; |
141 position: absolute; | 141 position: absolute; |
142 top: 50%; | 142 top: 50%; |
143 left: 50%; | 143 left: 50%; |
144 margin-left: -40px; | 144 margin-left: -40px; |
145 margin-top: -40px; | 145 margin-top: -40px; |
146 border: none; | 146 border: none; |
147 box-sizing: border-box; | 147 box-sizing: border-box; |
148 background-color: transparent; | 148 background-color: transparent; |
(...skipping 11 matching lines...) Expand all Loading... |
160 margin-left: 0px; | 160 margin-left: 0px; |
161 margin-top: 0px; | 161 margin-top: 0px; |
162 border: none; | 162 border: none; |
163 box-sizing: border-box; | 163 box-sizing: border-box; |
164 background-color: transparent; | 164 background-color: transparent; |
165 width: 30px; | 165 width: 30px; |
166 height: 30px; | 166 height: 30px; |
167 padding: 0; | 167 padding: 0; |
168 } | 168 } |
169 | 169 |
170 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { | 170 audio::-internal-media-controls-play-button, video::-internal-media-controls-pla
y-button { |
171 -webkit-appearance: media-play-button; | 171 -webkit-appearance: media-play-button; |
172 display: flex; | 172 display: flex; |
173 flex: none; | 173 flex: none; |
174 border: none; | 174 border: none; |
175 box-sizing: border-box; | 175 box-sizing: border-box; |
176 width: 30px; | 176 width: 30px; |
177 height: 30px; | 177 height: 30px; |
178 line-height: 30px; | 178 line-height: 30px; |
179 margin-left: 9px; | 179 margin-left: 9px; |
180 margin-right: 9px; | 180 margin-right: 9px; |
181 padding: 0; | 181 padding: 0; |
182 background-color: initial; | 182 background-color: initial; |
183 color: inherit; | 183 color: inherit; |
184 } | 184 } |
185 | 185 |
186 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
timeline-container { | 186 audio::-internal-media-controls-timeline-container, video::-internal-media-contr
ols-timeline-container { |
187 -webkit-appearance: media-controls-background; | 187 -webkit-appearance: media-controls-background; |
188 display: flex; | 188 display: flex; |
189 flex-direction: row; | 189 flex-direction: row; |
190 align-items: center; | 190 align-items: center; |
191 justify-content: flex-end; | 191 justify-content: flex-end; |
192 flex: 1 1; | 192 flex: 1 1; |
193 -webkit-user-select: none; | 193 -webkit-user-select: none; |
194 height: 16px; | 194 height: 16px; |
195 min-width: 0; | 195 min-width: 0; |
196 } | 196 } |
197 | 197 |
198 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display, | 198 audio::-internal-media-controls-current-time-display, video::-internal-media-con
trols-current-time-display, |
199 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { | 199 audio::-internal-media-controls-time-remaining-display, video::-internal-media-c
ontrols-time-remaining-display { |
200 -webkit-appearance: media-current-time-display; | 200 -webkit-appearance: media-current-time-display; |
201 -webkit-user-select: none; | 201 -webkit-user-select: none; |
202 flex: none; | 202 flex: none; |
203 display: flex; | 203 display: flex; |
204 border: none; | 204 border: none; |
205 cursor: default; | 205 cursor: default; |
206 | 206 |
207 height: 30px; | 207 height: 30px; |
208 margin: 0 9px 0 0; | 208 margin: 0 9px 0 0; |
209 padding: 0; | 209 padding: 0; |
210 | 210 |
211 line-height: 30px; | 211 line-height: 30px; |
212 font-family: Arial, Helvetica, sans-serif; | 212 font-family: Arial, Helvetica, sans-serif; |
213 font-size: 13px; | 213 font-size: 13px; |
214 font-weight: bold; | 214 font-weight: bold; |
215 font-style: normal; | 215 font-style: normal; |
216 color: white; | 216 color: white; |
217 | 217 |
218 letter-spacing: normal; | 218 letter-spacing: normal; |
219 word-spacing: normal; | 219 word-spacing: normal; |
220 text-transform: none; | 220 text-transform: none; |
221 text-indent: 0; | 221 text-indent: 0; |
222 text-shadow: none; | 222 text-shadow: none; |
223 text-decoration: none; | 223 text-decoration: none; |
224 } | 224 } |
225 | 225 |
226 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | 226 audio::-internal-media-controls-timeline, video::-internal-media-controls-timeli
ne { |
227 -webkit-appearance: media-slider; | 227 -webkit-appearance: media-slider; |
228 display: flex; | 228 display: flex; |
229 flex: 1 1 auto; | 229 flex: 1 1 auto; |
230 height: 8px; | 230 height: 8px; |
231 margin: 0 15px 0 0; | 231 margin: 0 15px 0 0; |
232 padding: 0; | 232 padding: 0; |
233 background-color: transparent; | 233 background-color: transparent; |
234 min-width: 25px; | 234 min-width: 25px; |
235 border: initial; | 235 border: initial; |
236 color: inherit; | 236 color: inherit; |
237 } | 237 } |
238 | 238 |
239 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { | 239 audio::-internal-media-controls-volume-slider, video::-internal-media-controls-v
olume-slider { |
240 -webkit-appearance: media-volume-slider; | 240 -webkit-appearance: media-volume-slider; |
241 display: flex; | 241 display: flex; |
242 /* The 1.9 value was empirically chosen to match old-flexbox behaviour | 242 /* The 1.9 value was empirically chosen to match old-flexbox behaviour |
243 * and be aesthetically pleasing. | 243 * and be aesthetically pleasing. |
244 */ | 244 */ |
245 flex: 1 1.9 auto; | 245 flex: 1 1.9 auto; |
246 height: 8px; | 246 height: 8px; |
247 max-width: 70px; | 247 max-width: 70px; |
248 margin: 0 15px 0 0; | 248 margin: 0 15px 0 0; |
249 padding: 0; | 249 padding: 0; |
(...skipping 22 matching lines...) Expand all Loading... |
272 /* The negative right margin causes the track to overflow its container. */ | 272 /* The negative right margin causes the track to overflow its container. */ |
273 input[type="range" i]::-webkit-media-slider-container > div { | 273 input[type="range" i]::-webkit-media-slider-container > div { |
274 margin-right: -14px; | 274 margin-right: -14px; |
275 } | 275 } |
276 | 276 |
277 input[type="range" i]::-webkit-media-slider-thumb { | 277 input[type="range" i]::-webkit-media-slider-thumb { |
278 margin-left: -7px; | 278 margin-left: -7px; |
279 margin-right: -7px; | 279 margin-right: -7px; |
280 } | 280 } |
281 | 281 |
282 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { | 282 audio::-internal-media-controls-fullscreen-button, video::-internal-media-contro
ls-fullscreen-button { |
283 -webkit-appearance: media-enter-fullscreen-button; | 283 -webkit-appearance: media-enter-fullscreen-button; |
284 display: flex; | 284 display: flex; |
285 flex: none; | 285 flex: none; |
286 border: none; | 286 border: none; |
287 box-sizing: border-box; | 287 box-sizing: border-box; |
288 width: 30px; | 288 width: 30px; |
289 height: 30px; | 289 height: 30px; |
290 line-height: 30px; | 290 line-height: 30px; |
291 margin-left: -5px; | 291 margin-left: -5px; |
292 margin-right: 9px; | 292 margin-right: 9px; |
(...skipping 11 matching lines...) Expand all Loading... |
304 width: 30px; | 304 width: 30px; |
305 height: 30px; | 305 height: 30px; |
306 line-height: 30px; | 306 line-height: 30px; |
307 margin-left: -5px; | 307 margin-left: -5px; |
308 margin-right: 9px; | 308 margin-right: 9px; |
309 padding: 0; | 309 padding: 0; |
310 background-color: initial; | 310 background-color: initial; |
311 color: inherit; | 311 color: inherit; |
312 } | 312 } |
313 | 313 |
314 audio::-webkit-media-controls-toggle-closed-captions-button { | 314 audio::-internal-media-controls-toggle-closed-captions-button { |
315 display: none; | 315 display: none; |
316 } | 316 } |
317 | 317 |
318 video::-webkit-media-controls-toggle-closed-captions-button { | 318 video::-internal-media-controls-toggle-closed-captions-button { |
319 -webkit-appearance: media-toggle-closed-captions-button; | 319 -webkit-appearance: media-toggle-closed-captions-button; |
320 display: flex; | 320 display: flex; |
321 flex: none; | 321 flex: none; |
322 border: none; | 322 border: none; |
323 box-sizing: border-box; | 323 box-sizing: border-box; |
324 width: 30px; | 324 width: 30px; |
325 height: 30px; | 325 height: 30px; |
326 line-height: 30px; | 326 line-height: 30px; |
327 margin-left: -5px; | 327 margin-left: -5px; |
328 margin-right: 9px; | 328 margin-right: 9px; |
329 padding: 0; | 329 padding: 0; |
330 background-color: initial; | 330 background-color: initial; |
331 color: inherit; | 331 color: inherit; |
332 } | 332 } |
333 | 333 |
334 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-con
trols-fullscreen-volume-slider { | 334 audio::-internal-media-controls-fullscreen-volume-slider, video::-internal-media
-controls-fullscreen-volume-slider { |
335 display: none; | 335 display: none; |
336 } | 336 } |
337 | 337 |
338 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media
-controls-fullscreen-volume-min-button { | 338 audio::-internal-media-controls-fullscreen-volume-min-button, video::-internal-m
edia-controls-fullscreen-volume-min-button { |
339 display: none; | 339 display: none; |
340 } | 340 } |
341 | 341 |
342 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media
-controls-fullscreen-volume-max-button { | 342 audio::-internal-media-controls-fullscreen-volume-max-button, video::-internal-m
edia-controls-fullscreen-volume-max-button { |
343 display: none; | 343 display: none; |
344 } | 344 } |
345 | 345 |
346 video::-webkit-media-text-track-container { | 346 video::-webkit-media-text-track-container { |
347 position: relative; | 347 position: relative; |
348 width: 100%; | 348 width: 100%; |
349 overflow: hidden; | 349 overflow: hidden; |
350 padding-bottom: 5px; | 350 padding-bottom: 5px; |
351 | 351 |
352 font: 22px sans-serif; | 352 font: 22px sans-serif; |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
412 font-weight: bold; | 412 font-weight: bold; |
413 } | 413 } |
414 | 414 |
415 video::-webkit-media-text-track-container u { | 415 video::-webkit-media-text-track-container u { |
416 text-decoration: underline; | 416 text-decoration: underline; |
417 } | 417 } |
418 | 418 |
419 video::-webkit-media-text-track-container i { | 419 video::-webkit-media-text-track-container i { |
420 font-style: italic; | 420 font-style: italic; |
421 } | 421 } |
OLD | NEW |