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 21 matching lines...) Expand all Loading... |
32 audio { | 32 audio { |
33 width: 300px; | 33 width: 300px; |
34 height: 30px; | 34 height: 30px; |
35 } | 35 } |
36 | 36 |
37 ::-webkit-media-controls { | 37 ::-webkit-media-controls { |
38 width: inherit; | 38 width: inherit; |
39 height: inherit; | 39 height: inherit; |
40 position: relative; | 40 position: relative; |
41 direction: ltr; | 41 direction: ltr; |
42 display: -webkit-flex; | 42 display: flex; |
43 -webkit-flex-direction: column; | 43 flex-direction: column; |
44 -webkit-justify-content: flex-end; | 44 justify-content: flex-end; |
45 -webkit-align-items: center; | 45 align-items: center; |
46 } | 46 } |
47 | 47 |
48 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
{ | 48 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
{ |
49 width: 100%; | 49 width: 100%; |
50 max-width: 800px; | 50 max-width: 800px; |
51 height: 30px; | 51 height: 30px; |
52 -webkit-flex-shrink: 0; | 52 flex-shrink: 0; |
53 bottom: 0; | 53 bottom: 0; |
54 text-indent: 0; | 54 text-indent: 0; |
55 padding: 0; | 55 padding: 0; |
56 box-sizing: border-box; | 56 box-sizing: border-box; |
57 } | 57 } |
58 | 58 |
59 video::-webkit-media-controls-enclosure { | 59 video::-webkit-media-controls-enclosure { |
60 padding: 0px 5px 5px 5px; | 60 padding: 0px 5px 5px 5px; |
61 height: 35px; | 61 height: 35px; |
62 -webkit-flex-shrink: 0; | 62 flex-shrink: 0; |
63 } | 63 } |
64 | 64 |
65 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | 65 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { |
66 display: -webkit-flex; | 66 display: flex; |
67 -webkit-flex-direction: row; | 67 flex-direction: row; |
68 -webkit-align-items: center; | 68 align-items: center; |
69 /* We use flex-start here to ensure that the play button is visible even | 69 /* We use flex-start here to ensure that the play button is visible even |
70 * if we are too small to show all controls. | 70 * if we are too small to show all controls. |
71 */ | 71 */ |
72 -webkit-justify-content: flex-start; | 72 justify-content: flex-start; |
73 -webkit-user-select: none; | 73 -webkit-user-select: none; |
74 position: relative; | 74 position: relative; |
75 width: 100%; | 75 width: 100%; |
76 z-index: 0; | 76 z-index: 0; |
77 overflow: hidden; | 77 overflow: hidden; |
78 text-align: right; | 78 text-align: right; |
79 bottom: auto; | 79 bottom: auto; |
80 height: 30px; | 80 height: 30px; |
81 background-color: rgba(20, 20, 20, 0.8); | 81 background-color: rgba(20, 20, 20, 0.8); |
82 border-radius: 5px; | 82 border-radius: 5px; |
(...skipping 13 matching lines...) Expand all Loading... |
96 max-width: 100%; | 96 max-width: 100%; |
97 } | 97 } |
98 | 98 |
99 audio:-webkit-full-page-media::-webkit-media-controls-panel, | 99 audio:-webkit-full-page-media::-webkit-media-controls-panel, |
100 video:-webkit-full-page-media::-webkit-media-controls-panel { | 100 video:-webkit-full-page-media::-webkit-media-controls-panel { |
101 bottom: 0px; | 101 bottom: 0px; |
102 } | 102 } |
103 | 103 |
104 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { | 104 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { |
105 -webkit-appearance: media-mute-button; | 105 -webkit-appearance: media-mute-button; |
106 display: -webkit-flex; | 106 display: flex; |
107 -webkit-flex: none; | 107 flex: none; |
108 border: none; | 108 border: none; |
109 box-sizing: border-box; | 109 box-sizing: border-box; |
110 width: 35px; | 110 width: 35px; |
111 height: 30px; | 111 height: 30px; |
112 line-height: 30px; | 112 line-height: 30px; |
113 margin: 0 6px 0 0; | 113 margin: 0 6px 0 0; |
114 padding: 0; | 114 padding: 0; |
115 background-color: initial; | 115 background-color: initial; |
116 color: inherit; | 116 color: inherit; |
117 } | 117 } |
118 | 118 |
119 audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls
-overlay-play-button { | 119 audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls
-overlay-play-button { |
120 display: none; | 120 display: none; |
121 } | 121 } |
122 | 122 |
123 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { | 123 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { |
124 -webkit-appearance: media-play-button; | 124 -webkit-appearance: media-play-button; |
125 display: -webkit-flex; | 125 display: flex; |
126 -webkit-flex: none; | 126 flex: none; |
127 border: none; | 127 border: none; |
128 box-sizing: border-box; | 128 box-sizing: border-box; |
129 width: 30px; | 129 width: 30px; |
130 height: 30px; | 130 height: 30px; |
131 line-height: 30px; | 131 line-height: 30px; |
132 margin-left: 9px; | 132 margin-left: 9px; |
133 margin-right: 9px; | 133 margin-right: 9px; |
134 padding: 0; | 134 padding: 0; |
135 background-color: initial; | 135 background-color: initial; |
136 color: inherit; | 136 color: inherit; |
137 } | 137 } |
138 | 138 |
139 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
timeline-container { | 139 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
timeline-container { |
140 -webkit-appearance: media-controls-background; | 140 -webkit-appearance: media-controls-background; |
141 display: -webkit-flex; | 141 display: flex; |
142 -webkit-flex-direction: row; | 142 flex-direction: row; |
143 -webkit-align-items: center; | 143 align-items: center; |
144 -webkit-justify-content: flex-end; | 144 justify-content: flex-end; |
145 -webkit-flex: 1 1; | 145 flex: 1 1; |
146 -webkit-user-select: none; | 146 -webkit-user-select: none; |
147 height: 16px; | 147 height: 16px; |
148 min-width: 0; | 148 min-width: 0; |
149 } | 149 } |
150 | 150 |
151 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display, | 151 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display, |
152 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { | 152 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { |
153 -webkit-appearance: media-current-time-display; | 153 -webkit-appearance: media-current-time-display; |
154 -webkit-user-select: none; | 154 -webkit-user-select: none; |
155 -webkit-flex: none; | 155 flex: none; |
156 display: -webkit-flex; | 156 display: flex; |
157 border: none; | 157 border: none; |
158 cursor: default; | 158 cursor: default; |
159 | 159 |
160 height: 30px; | 160 height: 30px; |
161 margin: 0 9px 0 0; | 161 margin: 0 9px 0 0; |
162 padding: 0; | 162 padding: 0; |
163 | 163 |
164 line-height: 30px; | 164 line-height: 30px; |
165 font-family: Arial, Helvetica, sans-serif; | 165 font-family: Arial, Helvetica, sans-serif; |
166 font-size: 13px; | 166 font-size: 13px; |
167 font-weight: bold; | 167 font-weight: bold; |
168 font-style: normal; | 168 font-style: normal; |
169 color: white; | 169 color: white; |
170 | 170 |
171 letter-spacing: normal; | 171 letter-spacing: normal; |
172 word-spacing: normal; | 172 word-spacing: normal; |
173 text-transform: none; | 173 text-transform: none; |
174 text-indent: 0; | 174 text-indent: 0; |
175 text-shadow: none; | 175 text-shadow: none; |
176 text-decoration: none; | 176 text-decoration: none; |
177 } | 177 } |
178 | 178 |
179 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | 179 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { |
180 -webkit-appearance: media-slider; | 180 -webkit-appearance: media-slider; |
181 display: -webkit-flex; | 181 display: flex; |
182 -webkit-flex: 1 1 auto; | 182 flex: 1 1 auto; |
183 height: 8px; | 183 height: 8px; |
184 margin: 0 15px 0 0; | 184 margin: 0 15px 0 0; |
185 padding: 0; | 185 padding: 0; |
186 background-color: transparent; | 186 background-color: transparent; |
187 min-width: 25px; | 187 min-width: 25px; |
188 border: initial; | 188 border: initial; |
189 color: inherit; | 189 color: inherit; |
190 } | 190 } |
191 | 191 |
192 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { | 192 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { |
193 -webkit-appearance: media-volume-slider; | 193 -webkit-appearance: media-volume-slider; |
194 display: -webkit-flex; | 194 display: flex; |
195 /* The 1.9 value was empirically chosen to match old-flexbox behaviour | 195 /* The 1.9 value was empirically chosen to match old-flexbox behaviour |
196 * and be aesthetically pleasing. | 196 * and be aesthetically pleasing. |
197 */ | 197 */ |
198 -webkit-flex: 1 1.9 auto; | 198 flex: 1 1.9 auto; |
199 height: 8px; | 199 height: 8px; |
200 max-width: 70px; | 200 max-width: 70px; |
201 margin: 0 15px 0 0; | 201 margin: 0 15px 0 0; |
202 padding: 0; | 202 padding: 0; |
203 background-color: transparent; | 203 background-color: transparent; |
204 min-width: 15px; | 204 min-width: 15px; |
205 border: initial; | 205 border: initial; |
206 color: inherit; | 206 color: inherit; |
207 } | 207 } |
208 | 208 |
209 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. | 209 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. |
210 https://code.google.com/p/chromium/issues/detail?id=112508 | 210 https://code.google.com/p/chromium/issues/detail?id=112508 |
211 https://bugs.webkit.org/show_bug.cgi?id=62218 | 211 https://bugs.webkit.org/show_bug.cgi?id=62218 |
212 */ | 212 */ |
213 input[type="range"]::-webkit-media-slider-container { | 213 input[type="range"]::-webkit-media-slider-container { |
214 display: -webkit-flex; | 214 display: flex; |
215 -webkit-align-items: center; | 215 align-items: center; |
216 -webkit-flex-direction: row; /* This property is updated by C++ code. */ | 216 flex-direction: row; /* This property is updated by C++ code. */ |
217 box-sizing: border-box; | 217 box-sizing: border-box; |
218 height: 100%; | 218 height: 100%; |
219 width: 100%; | 219 width: 100%; |
220 border: 1px solid rgba(230, 230, 230, 0.35); | 220 border: 1px solid rgba(230, 230, 230, 0.35); |
221 border-radius: 4px; | 221 border-radius: 4px; |
222 background-color: transparent; /* Background drawing is managed by C++ code
to draw ranges. */ | 222 background-color: transparent; /* Background drawing is managed by C++ code
to draw ranges. */ |
223 } | 223 } |
224 | 224 |
225 /* The negative right margin causes the track to overflow its container. */ | 225 /* The negative right margin causes the track to overflow its container. */ |
226 input[type="range"]::-webkit-media-slider-container > div { | 226 input[type="range"]::-webkit-media-slider-container > div { |
227 margin-right: -14px; | 227 margin-right: -14px; |
228 } | 228 } |
229 | 229 |
230 input[type="range"]::-webkit-media-slider-thumb { | 230 input[type="range"]::-webkit-media-slider-thumb { |
231 margin-left: -7px; | 231 margin-left: -7px; |
232 margin-right: -7px; | 232 margin-right: -7px; |
233 } | 233 } |
234 | 234 |
235 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-se
ek-back-button { | 235 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-se
ek-back-button { |
236 -webkit-appearance: media-seek-back-button; | 236 -webkit-appearance: media-seek-back-button; |
237 display: -webkit-flex; | 237 display: flex; |
238 width: 16px; | 238 width: 16px; |
239 height: 16px; | 239 height: 16px; |
240 background-color: initial; | 240 background-color: initial; |
241 border: initial; | 241 border: initial; |
242 color: inherit; | 242 color: inherit; |
243 } | 243 } |
244 | 244 |
245 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls
-seek-forward-button { | 245 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls
-seek-forward-button { |
246 -webkit-appearance: media-seek-forward-button; | 246 -webkit-appearance: media-seek-forward-button; |
247 display: -webkit-flex; | 247 display: flex; |
248 width: 16px; | 248 width: 16px; |
249 height: 16px; | 249 height: 16px; |
250 background-color: initial; | 250 background-color: initial; |
251 border: initial; | 251 border: initial; |
252 color: inherit; | 252 color: inherit; |
253 } | 253 } |
254 | 254 |
255 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { | 255 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { |
256 -webkit-appearance: media-enter-fullscreen-button; | 256 -webkit-appearance: media-enter-fullscreen-button; |
257 display: -webkit-flex; | 257 display: flex; |
258 -webkit-flex: none; | 258 flex: none; |
259 border: none; | 259 border: none; |
260 box-sizing: border-box; | 260 box-sizing: border-box; |
261 width: 30px; | 261 width: 30px; |
262 height: 30px; | 262 height: 30px; |
263 line-height: 30px; | 263 line-height: 30px; |
264 margin-left: -5px; | 264 margin-left: -5px; |
265 margin-right: 9px; | 265 margin-right: 9px; |
266 padding: 0; | 266 padding: 0; |
267 background-color: initial; | 267 background-color: initial; |
268 color: inherit; | 268 color: inherit; |
269 } | 269 } |
270 | 270 |
271 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewin
d-button { | 271 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewin
d-button { |
272 display: none; | 272 display: none; |
273 background-color: initial; | 273 background-color: initial; |
274 border: initial; | 274 border: initial; |
275 color: inherit; | 275 color: inherit; |
276 } | 276 } |
277 | 277 |
278 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-co
ntrols-return-to-realtime-button { | 278 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-co
ntrols-return-to-realtime-button { |
279 display: none; | 279 display: none; |
280 background-color: initial; | 280 background-color: initial; |
281 border: initial; | 281 border: initial; |
282 color: inherit; | 282 color: inherit; |
283 } | 283 } |
284 | 284 |
285 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi
a-controls-toggle-closed-captions-button { | 285 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-medi
a-controls-toggle-closed-captions-button { |
286 -webkit-appearance: media-toggle-closed-captions-button; | 286 -webkit-appearance: media-toggle-closed-captions-button; |
287 display: -webkit-flex; | 287 display: flex; |
288 -webkit-flex: none; | 288 flex: none; |
289 border: none; | 289 border: none; |
290 box-sizing: border-box; | 290 box-sizing: border-box; |
291 width: 30px; | 291 width: 30px; |
292 height: 30px; | 292 height: 30px; |
293 line-height: 30px; | 293 line-height: 30px; |
294 margin-left: -5px; | 294 margin-left: -5px; |
295 margin-right: 9px; | 295 margin-right: 9px; |
296 padding: 0; | 296 padding: 0; |
297 background-color: initial; | 297 background-color: initial; |
298 color: inherit; | 298 color: inherit; |
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
330 | 330 |
331 letter-spacing: normal; | 331 letter-spacing: normal; |
332 word-spacing: normal; | 332 word-spacing: normal; |
333 text-transform: none; | 333 text-transform: none; |
334 text-indent: 0; | 334 text-indent: 0; |
335 text-decoration: none; | 335 text-decoration: none; |
336 pointer-events: none; | 336 pointer-events: none; |
337 -webkit-user-select: none; | 337 -webkit-user-select: none; |
338 word-break: break-word; | 338 word-break: break-word; |
339 | 339 |
340 -webkit-flex: 1 1; | 340 flex: 1 1; |
341 } | 341 } |
342 | 342 |
343 video::cue { | 343 video::cue { |
344 display: inline; | 344 display: inline; |
345 | 345 |
346 background-color: rgba(0, 0, 0, 0.8); | 346 background-color: rgba(0, 0, 0, 0.8); |
347 padding: 2px 2px; | 347 padding: 2px 2px; |
348 } | 348 } |
349 | 349 |
350 video::-webkit-media-text-track-region { | 350 video::-webkit-media-text-track-region { |
351 position: absolute; | 351 position: absolute; |
352 line-height: 5.33vh; | 352 line-height: 5.33vh; |
353 writing-mode: horizontal-tb; | 353 writing-mode: horizontal-tb; |
354 background: rgba(0, 0, 0, 0.8); | 354 background: rgba(0, 0, 0, 0.8); |
355 color: rgba(255, 255, 255, 1); | 355 color: rgba(255, 255, 255, 1); |
356 word-wrap: break-word; | 356 word-wrap: break-word; |
357 overflow-wrap: break-word; | 357 overflow-wrap: break-word; |
358 overflow: hidden; | 358 overflow: hidden; |
359 } | 359 } |
360 | 360 |
361 video::-webkit-media-text-track-region-container { | 361 video::-webkit-media-text-track-region-container { |
362 position: relative; | 362 position: relative; |
363 | 363 |
364 display: -webkit-flex; | 364 display: flex; |
365 -webkit-flex-flow: column; | 365 flex-flow: column; |
366 -webkit-flex-direction: column; | 366 flex-direction: column; |
367 } | 367 } |
368 | 368 |
369 video::-webkit-media-text-track-region-container.scrolling { | 369 video::-webkit-media-text-track-region-container.scrolling { |
370 transition: top 433ms linear; | 370 transition: top 433ms linear; |
371 } | 371 } |
372 | 372 |
373 | 373 |
374 video::-webkit-media-text-track-display { | 374 video::-webkit-media-text-track-display { |
375 position: absolute; | 375 position: absolute; |
376 overflow: hidden; | 376 overflow: hidden; |
377 white-space: pre-wrap; | 377 white-space: pre-wrap; |
378 -webkit-box-sizing: border-box; | 378 -webkit-box-sizing: border-box; |
379 -webkit-flex: 0 0 auto; | 379 flex: 0 0 auto; |
380 } | 380 } |
381 | 381 |
382 video::cue(:future) { | 382 video::cue(:future) { |
383 color: gray; | 383 color: gray; |
384 } | 384 } |
385 | 385 |
386 video::-webkit-media-text-track-container b { | 386 video::-webkit-media-text-track-container b { |
387 font-weight: bold; | 387 font-weight: bold; |
388 } | 388 } |
389 | 389 |
390 video::-webkit-media-text-track-container u { | 390 video::-webkit-media-text-track-container u { |
391 text-decoration: underline; | 391 text-decoration: underline; |
392 } | 392 } |
393 | 393 |
394 video::-webkit-media-text-track-container i { | 394 video::-webkit-media-text-track-container i { |
395 font-style: italic; | 395 font-style: italic; |
396 } | 396 } |
OLD | NEW |