Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(11)

Side by Side Diff: Source/core/css/mediaControlsNew.css

Issue 1156993013: New media playback UI. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: fixed some tests from previous CL. Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 /**/ 1 /*
2 * Copyright (C) 2009 Apple Inc. All rights reserved.
3 * Copyright (C) 2015 Google Inc.
4 *
5 * Redistribution and use in source and binary forms, with or without
6 * modification, are permitted provided that the following conditions
7 * are met:
8 * 1. Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer.
10 * 2. Redistributions in binary form must reproduce the above copyright
11 * notice, this list of conditions and the following disclaimer in the
12 * documentation and/or other materials provided with the distribution.
13 *
14 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
15 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
16 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
17 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR
18 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
19 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24 */
25
26 /* Chromium default media controls */
27
28 /* WARNING: This css file can only style <audio> and <video> elements */
29
30 audio:not([controls]) {
31 display: none !important;
32 }
33
34 audio {
35 width: 300px;
36 height: 48px;
37 }
38
39 audio::-webkit-media-controls,
40 video::-webkit-media-controls {
41 width: inherit;
42 height: inherit;
43 position: relative;
44 direction: ltr;
45 display: flex;
46 flex-direction: column;
47 justify-content: flex-end;
48 align-items: center;
49 }
50
51 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure {
52 width: 100%;
53 height: 48px;
54 flex-shrink: 0;
55 bottom: 0;
56 text-indent: 0;
57 padding: 0;
58 margin: 0;
59 box-sizing: border-box;
60 }
61
62 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
63 display: flex;
64 flex-direction: row;
65 align-items: center;
66 /* We use flex-start here to ensure that the play button is visible even
67 * if we are too small to show all controls.
68 */
69 justify-content: flex-start;
70 -webkit-user-select: none;
71 position: relative;
72 width: 100%;
73 z-index: 0;
74 overflow: hidden;
75 text-align: right;
76 bottom: auto;
77 height: 48px;
78 min-width: 48px;
79 background-color: #fafafa;
80 /* The duration is also specified in MediaControlElements.cpp and LayoutTest s/media/media-controls.js */
81 transition: opacity 0.3s;
82
83 font-family: Segoe, "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif ;
84 font-size: 14px;
85 font-weight: normal; /* Make sure that we don't inherit non-defaults. */
86 font-style: normal;
87 }
88
89 video:-webkit-full-page-media {
90 margin: auto;
91 position: absolute;
92 top: 0;
93 right: 0;
94 bottom: 0;
95 left: 0;
96 }
97
98 audio:-webkit-full-page-media, video:-webkit-full-page-media {
99 max-height: 100%;
100 max-width: 100%;
101 }
102
103 audio:-webkit-full-page-media::-webkit-media-controls-panel,
104 video:-webkit-full-page-media::-webkit-media-controls-panel {
105 bottom: 0px;
106 }
107
108 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu tton {
109 -webkit-appearance: media-mute-button;
110 display: flex;
111 flex: none;
112 border: none;
113 box-sizing: border-box;
114 width: 48px;
115 height: 48px;
116 line-height: 48px;
117 padding: 12px;
118 background-color: initial;
119 color: inherit;
120 }
121
122 audio::-webkit-media-controls-overlay-enclosure {
123 display: none;
124 }
125
126 video::-webkit-media-controls-overlay-enclosure {
127 display: flex;
128 position: relative;
129 flex-direction: column;
130 justify-content: flex-end;
131 align-items: center;
132 flex: 1 1;
133 min-height: 0;
134 width: 100%;
135 margin-bottom: 10px;
136 text-indent: 0;
137 box-sizing: border-box;
138 overflow: hidden;
139 }
140
141 video::-webkit-media-controls-overlay-play-button {
142 -webkit-appearance: media-overlay-play-button;
143 display: flex;
144 position: absolute;
145 top: 0;
146 left: 0;
147 margin: 0;
148 border: none;
149 box-sizing: border-box;
150 background-color: transparent;
151 width: 100%;
152 height: 100%;
153 padding: 0;
154 }
155
156 video::-internal-media-controls-overlay-cast-button {
157 -webkit-appearance: -internal-media-overlay-cast-off-button;
158 display: flex;
159 position: absolute;
160 top: 5%;
161 left: 5%;
162 margin-left: 0px;
163 margin-top: 0px;
164 border: none;
165 box-sizing: border-box;
166 background-color: transparent;
167 width: 30px;
168 height: 30px;
169 padding: 0;
170 }
171
172 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu tton {
173 -webkit-appearance: media-play-button;
174 display: flex;
175 flex: none;
176 border-sizing: border-box;
177 width: 48px;
178 height: 48px;
179 line-height: 48px;
180 padding: 12px;
181 background-color: initial;
182 color: inherit;
183 }
184
185 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls- timeline-container {
186 -webkit-appearance: media-controls-background;
187 display: flex;
188 flex-direction: row;
189 align-items: center;
190 justify-content: flex-end;
191 flex: 1 1;
192 -webkit-user-select: none;
193 height: 48px;
194 padding: 0;
195 min-width: 0;
196 }
197
198 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control s-current-time-display {
199 -webkit-appearance: media-current-time-display;
200 -webkit-user-select: none;
201 flex: none;
202 display: flex;
203 border: none;
204 cursor: default;
205
206 height: 48px;
207
208 /* text runs right to the edge of the container */
209 padding: 0;
210
211 line-height: 48px;
212 color: #5a5a5a;
213
214 letter-spacing: normal;
215 word-spacing: normal;
216 text-transform: none;
217 text-indent: 0;
218 text-shadow: none;
219 text-decoration: none;
220 }
221
222 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr ols-time-remaining-display {
223 -webkit-appearance: media-current-time-display;
224 -webkit-user-select: none;
225 flex: none;
226 display: flex;
227 border: none;
228 cursor: default;
229
230 height: 48px;
231
232 /* text runs right to the edge of the container, plus a little on
233 * the left to pad the leading "/" */
234 padding: 0 0 0 4px;
235
236 line-height: 48px;
237 color: #5a5a5a;
238
239 letter-spacing: normal;
240 word-spacing: normal;
241 text-transform: none;
242 text-indent: 0;
243 text-shadow: none;
244 text-decoration: none;
245 }
246
247 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
248 -webkit-appearance: media-slider;
249 display: flex;
250 flex: 1 1 auto;
251 height: 48px;
252
253 /* Leave 6px on either side for the thumb. Use margin so that
254 * the slider doesn't extend into it. We also add 12px border.
255 */
256 padding: 0;
257 margin: 0 18px 0 18px;
258 background-color: transparent;
259 min-width: 25px;
260 border: initial;
261 color: inherit;
262 }
263
264 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum e-slider {
265 -webkit-appearance: media-volume-slider;
266 display: flex;
267 /* The 1.9 value was empirically chosen to match old-flexbox behaviour
268 * and be aesthetically pleasing.
269 */
270 flex: 1 1.9 auto;
271 height: 48px;
272 max-width: 70px;
273 /* Leave room for the thumb, which has 6px radius. Use margin rather
274 * than padding so that the slider doesn't extend into it. We also
275 * leave an addition 12px margin.
276 */
277 padding: 0;
278 margin: 0 18px 0 18px;
279 background-color: transparent;
280 min-width: 25px;
281 border: initial;
282 color: inherit;
283 }
284
285 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules.
286 https://code.google.com/p/chromium/issues/detail?id=112508
287 https://bugs.webkit.org/show_bug.cgi?id=62218
288 */
289 input[type="range" i]::-webkit-media-slider-container {
290 display: flex;
291 align-items: center;
292 flex-direction: row; /* This property is updated by C++ code. */
293 box-sizing: border-box;
294 /** this positions the slider thumb for both time and volume. */
295 height: 48px;
296 width: 100%;
297 background-color: transparent; /* Background drawing is managed by C++ code to draw ranges. */
298 }
299
300 /* The negative right margin causes the track to overflow its container. */
301 input[type="range" i]::-webkit-media-slider-container > div {
302 margin-right: -18px; /* box is 36px wide, get to the middle */
303 margin-left: -18px;
304 }
305
306 input[type="range" i]::-webkit-media-slider-thumb {
307 box-sizing: border-box;
308 width: 48px;
309 height: 48px;
310 padding: 0px;
311 }
312
313 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f ullscreen-button {
314 -webkit-appearance: media-enter-fullscreen-button;
315 display: flex;
316 flex: none;
317 overflow: hidden;
318 border: none;
319 box-sizing: border-box;
320 width: 48px;
321 height: 48px;
322 line-height: 48px;
323 background-color: initial;
324 color: inherit;
325 }
326
327 audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas t-button {
328 -webkit-appearance: -internal-media-cast-off-button;
329 display: flex;
330 flex: none;
331 border: none;
332 box-sizing: border-box;
333 width: 48px;
334 height: 48px;
335 line-height: 48px;
336 margin-left: 0px;
337 margin-right: 0px;
338 padding: 12px;
339 background-color: initial;
340 color: inherit;
341 }
342
343 audio::-webkit-media-controls-toggle-closed-captions-button {
344 display: none;
345 }
346
347 video::-webkit-media-controls-toggle-closed-captions-button {
348 -webkit-appearance: media-toggle-closed-captions-button;
349 display: flex;
350 flex: none;
351 border: none;
352 box-sizing: border-box;
353 width: 48px;
354 height: 48px;
355 line-height: 48px;
356 margin-left: 0px;
357 margin-right: 0px;
358 padding: 12px;
359 background-color: initial;
360 color: inherit;
361 }
362
363 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-con trols-fullscreen-volume-slider {
364 display: none;
365 }
366
367 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media -controls-fullscreen-volume-min-button {
368 display: none;
369 }
370
371 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media -controls-fullscreen-volume-max-button {
372 display: none;
373 }
374
375 video::-webkit-media-text-track-container {
376 position: relative;
377 width: inherit;
378 height: inherit;
379 overflow: hidden;
380
381 font: 22px sans-serif;
382 text-align: center;
383 color: rgba(255, 255, 255, 1);
384
385 letter-spacing: normal;
386 word-spacing: normal;
387 text-transform: none;
388 text-indent: 0;
389 text-decoration: none;
390 pointer-events: none;
391 -webkit-user-select: none;
392 word-break: break-word;
393 }
394
395 video::cue {
396 display: inline;
397
398 background-color: rgba(0, 0, 0, 0.8);
399 padding: 2px 2px;
400 }
401
402 video::-webkit-media-text-track-region {
403 position: absolute;
404 line-height: 5.33vh;
405 writing-mode: horizontal-tb;
406 background: rgba(0, 0, 0, 0.8);
407 color: rgba(255, 255, 255, 1);
408 word-wrap: break-word;
409 overflow-wrap: break-word;
410 overflow: hidden;
411 }
412
413 video::-webkit-media-text-track-region-container {
414 position: relative;
415
416 display: flex;
417 flex-flow: column;
418 flex-direction: column;
419 }
420
421 video::-webkit-media-text-track-region-container.scrolling {
422 transition: top 433ms linear;
423 }
424
425
426 video::-webkit-media-text-track-display {
427 position: absolute;
428 overflow: hidden;
429 white-space: pre-wrap;
430 -webkit-box-sizing: border-box;
431 flex: 0 0 auto;
432 }
433
434 video::cue(:future) {
435 color: gray;
436 }
437
438 video::-webkit-media-text-track-container b {
439 font-weight: bold;
440 }
441
442 video::-webkit-media-text-track-container u {
443 text-decoration: underline;
444 }
445
446 video::-webkit-media-text-track-container i {
447 font-style: italic;
448 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698