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

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

Issue 23793002: Unprefix flexbox properties in various CSS files (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 3 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 | Annotate | Revision Log
« no previous file with comments | « Source/core/css/html.css ('k') | Source/core/css/mediaControlsAndroid.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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
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 }
OLDNEW
« no previous file with comments | « Source/core/css/html.css ('k') | Source/core/css/mediaControlsAndroid.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698