| OLD | NEW |
| (Empty) |
| 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: 32px; | |
| 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 font-family: Segoe, "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif; | |
| 48 justify-content: flex-end; | |
| 49 align-items: center; | |
| 50 } | |
| 51 | |
| 52 audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure
{ | |
| 53 width: 100%; | |
| 54 height: 32px; | |
| 55 flex-shrink: 0; | |
| 56 bottom: 0; | |
| 57 text-indent: 0; | |
| 58 padding: 0; | |
| 59 margin: 0; | |
| 60 box-sizing: border-box; | |
| 61 } | |
| 62 | |
| 63 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { | |
| 64 display: flex; | |
| 65 flex-direction: row; | |
| 66 align-items: center; | |
| 67 /* We use flex-start here to ensure that the play button is visible even | |
| 68 * if we are too small to show all controls. | |
| 69 */ | |
| 70 justify-content: flex-start; | |
| 71 -webkit-user-select: none; | |
| 72 position: relative; | |
| 73 width: 100%; | |
| 74 z-index: 0; | |
| 75 overflow: hidden; | |
| 76 text-align: right; | |
| 77 bottom: auto; | |
| 78 height: 32px; | |
| 79 min-width: 48px; | |
| 80 line-height: 32px; | |
| 81 background-color: #fafafa; | |
| 82 /* The duration is also specified in MediaControlElements.cpp and LayoutTest
s/media/media-controls.js */ | |
| 83 transition: opacity 0.3s; | |
| 84 | |
| 85 font-size: 12px; | |
| 86 font-weight: normal; /* Make sure that we don't inherit non-defaults. */ | |
| 87 font-style: normal; | |
| 88 } | |
| 89 | |
| 90 audio:-webkit-full-page-media, video:-webkit-full-page-media { | |
| 91 max-height: 100%; | |
| 92 max-width: 100%; | |
| 93 } | |
| 94 | |
| 95 audio:-webkit-full-page-media::-webkit-media-controls-panel, | |
| 96 video:-webkit-full-page-media::-webkit-media-controls-panel { | |
| 97 bottom: 0px; | |
| 98 } | |
| 99 | |
| 100 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-bu
tton { | |
| 101 -webkit-appearance: media-mute-button; | |
| 102 display: flex; | |
| 103 flex: none; | |
| 104 box-sizing: border-box; | |
| 105 width: 32px; | |
| 106 height: 32px; | |
| 107 padding: 0px; | |
| 108 border-width: 0px; | |
| 109 background-color: initial; | |
| 110 color: inherit; | |
| 111 } | |
| 112 | |
| 113 audio::-webkit-media-controls-overlay-enclosure { | |
| 114 display: none; | |
| 115 } | |
| 116 | |
| 117 video::-webkit-media-controls-overlay-enclosure { | |
| 118 display: flex; | |
| 119 position: relative; | |
| 120 flex-direction: column; | |
| 121 justify-content: flex-end; | |
| 122 align-items: center; | |
| 123 flex: 1 1; | |
| 124 min-height: 0; | |
| 125 width: 100%; | |
| 126 /* prevent disambiguation zooms with the panel */ | |
| 127 margin-bottom: 10px; | |
| 128 text-indent: 0; | |
| 129 box-sizing: border-box; | |
| 130 overflow: hidden; | |
| 131 } | |
| 132 | |
| 133 video::-webkit-media-controls-overlay-play-button { | |
| 134 -webkit-appearance: media-overlay-play-button; | |
| 135 display: flex; | |
| 136 position: absolute; | |
| 137 top: 0; | |
| 138 left: 0; | |
| 139 margin: 0; | |
| 140 border-width: 0px; | |
| 141 background-color: transparent; | |
| 142 width: 100%; | |
| 143 height: 100%; | |
| 144 padding: 0; | |
| 145 } | |
| 146 | |
| 147 video::-internal-media-controls-overlay-cast-button { | |
| 148 -webkit-appearance: -internal-media-overlay-cast-off-button; | |
| 149 display: flex; | |
| 150 position: absolute; | |
| 151 top: 8px; | |
| 152 left: 8px; | |
| 153 margin-left: 0px; | |
| 154 margin-top: 0px; | |
| 155 border-width: 0px; | |
| 156 background-color: transparent; | |
| 157 width: 32px; | |
| 158 height: 32px; | |
| 159 padding: 0; | |
| 160 transition: opacity 0.3s; | |
| 161 } | |
| 162 | |
| 163 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-bu
tton { | |
| 164 -webkit-appearance: media-play-button; | |
| 165 display: flex; | |
| 166 flex: none; | |
| 167 box-sizing: border-box; | |
| 168 width: 32px; | |
| 169 height: 32px; | |
| 170 padding: 0px; | |
| 171 border-width: 0px; | |
| 172 background-color: initial; | |
| 173 color: inherit; | |
| 174 } | |
| 175 | |
| 176 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-
timeline-container { | |
| 177 -webkit-appearance: media-controls-background; | |
| 178 display: flex; | |
| 179 flex-direction: row; | |
| 180 align-items: center; | |
| 181 justify-content: flex-end; | |
| 182 flex: 1 1; | |
| 183 -webkit-user-select: none; | |
| 184 height: 48px; | |
| 185 padding: 0; | |
| 186 min-width: 0; | |
| 187 } | |
| 188 | |
| 189 audio::-webkit-media-controls-current-time-display, video::-webkit-media-control
s-current-time-display { | |
| 190 -webkit-appearance: media-current-time-display; | |
| 191 -webkit-user-select: none; | |
| 192 flex: none; | |
| 193 display: flex; | |
| 194 border: none; | |
| 195 cursor: default; | |
| 196 | |
| 197 height: 32px; | |
| 198 | |
| 199 /* text runs right to the edge of the container */ | |
| 200 padding: 0; | |
| 201 | |
| 202 color: #5a5a5a; | |
| 203 | |
| 204 letter-spacing: normal; | |
| 205 word-spacing: normal; | |
| 206 text-transform: none; | |
| 207 text-indent: 0; | |
| 208 text-shadow: none; | |
| 209 text-decoration: none; | |
| 210 } | |
| 211 | |
| 212 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-contr
ols-time-remaining-display { | |
| 213 -webkit-appearance: media-current-time-display; | |
| 214 -webkit-user-select: none; | |
| 215 flex: none; | |
| 216 display: flex; | |
| 217 border: none; | |
| 218 cursor: default; | |
| 219 | |
| 220 height: 32px; | |
| 221 | |
| 222 /* text runs right to the edge of the container, plus a little on | |
| 223 * the left to pad the leading "/" */ | |
| 224 padding: 0 0 0 4px; | |
| 225 | |
| 226 color: #5a5a5a; | |
| 227 | |
| 228 letter-spacing: normal; | |
| 229 word-spacing: normal; | |
| 230 text-transform: none; | |
| 231 text-indent: 0; | |
| 232 text-shadow: none; | |
| 233 text-decoration: none; | |
| 234 } | |
| 235 | |
| 236 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { | |
| 237 -webkit-appearance: media-slider; | |
| 238 display: flex; | |
| 239 flex: 1 1 auto; | |
| 240 height: 2px; | |
| 241 | |
| 242 /* Leave 6px on either side for the thumb. Use margin so that | |
| 243 * the slider doesn't extend into it. We also add 12px border. | |
| 244 */ | |
| 245 padding: 0; | |
| 246 margin: 0 18px 0 18px; | |
| 247 background-color: transparent; | |
| 248 min-width: 25px; | |
| 249 border: initial; | |
| 250 color: inherit; | |
| 251 } | |
| 252 | |
| 253 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volum
e-slider { | |
| 254 -webkit-appearance: media-volume-slider; | |
| 255 display: flex; | |
| 256 /* The 1.9 value was empirically chosen to match old-flexbox behaviour | |
| 257 * and be aesthetically pleasing. | |
| 258 */ | |
| 259 flex: 1 1.9 auto; | |
| 260 height: 2px; | |
| 261 max-width: 70px; | |
| 262 /* Leave room for the thumb, which has 6px radius. Use margin rather | |
| 263 * than padding so that the slider doesn't extend into it. We also | |
| 264 * leave an addition 12px margin. | |
| 265 */ | |
| 266 padding: 0; | |
| 267 margin: 0 18px 0 18px; | |
| 268 background-color: transparent; | |
| 269 min-width: 25px; | |
| 270 border: initial; | |
| 271 color: inherit; | |
| 272 } | |
| 273 | |
| 274 /* FIXME these shouldn't use special pseudoShadowIds, but nicer rules. | |
| 275 https://code.google.com/p/chromium/issues/detail?id=112508 | |
| 276 https://bugs.webkit.org/show_bug.cgi?id=62218 | |
| 277 */ | |
| 278 input[type="range" i]::-webkit-media-slider-container { | |
| 279 display: flex; | |
| 280 align-items: center; | |
| 281 flex-direction: row; /* This property is updated by C++ code. */ | |
| 282 box-sizing: border-box; | |
| 283 /** this positions the slider thumb for both time and volume. */ | |
| 284 height: 2px; | |
| 285 width: 100%; | |
| 286 background-color: transparent; /* Background drawing is managed by C++ code
to draw ranges. */ | |
| 287 } | |
| 288 | |
| 289 /* The negative right margin causes the track to overflow its container. */ | |
| 290 input[type="range" i]::-webkit-media-slider-container > div { | |
| 291 margin-right: -18px; /* box is 36px wide, get to the middle */ | |
| 292 margin-left: -18px; | |
| 293 } | |
| 294 | |
| 295 input[type="range" i]::-webkit-media-slider-thumb { | |
| 296 box-sizing: border-box; | |
| 297 width: 48px; | |
| 298 height: 48px; | |
| 299 padding: 0px; | |
| 300 } | |
| 301 | |
| 302 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-f
ullscreen-button { | |
| 303 -webkit-appearance: media-enter-fullscreen-button; | |
| 304 display: flex; | |
| 305 flex: none; | |
| 306 overflow: hidden; | |
| 307 box-sizing: border-box; | |
| 308 width: 32px; | |
| 309 height: 32px; | |
| 310 padding: 0px; | |
| 311 border-width: 0px; | |
| 312 background-color: initial; | |
| 313 color: inherit; | |
| 314 } | |
| 315 | |
| 316 audio::-internal-media-controls-cast-button, video::-internal-media-controls-cas
t-button { | |
| 317 -webkit-appearance: -internal-media-cast-off-button; | |
| 318 display: flex; | |
| 319 flex: none; | |
| 320 box-sizing: border-box; | |
| 321 width: 32px; | |
| 322 height: 32px; | |
| 323 padding: 0px; | |
| 324 border-width: 0px; | |
| 325 margin-left: 0px; | |
| 326 margin-right: 0px; | |
| 327 background-color: initial; | |
| 328 color: inherit; | |
| 329 } | |
| 330 | |
| 331 audio::-webkit-media-controls-toggle-closed-captions-button { | |
| 332 display: none; | |
| 333 } | |
| 334 | |
| 335 video::-webkit-media-controls-toggle-closed-captions-button { | |
| 336 -webkit-appearance: media-toggle-closed-captions-button; | |
| 337 display: flex; | |
| 338 flex: none; | |
| 339 box-sizing: border-box; | |
| 340 width: 32px; | |
| 341 height: 32px; | |
| 342 padding: 0px; | |
| 343 border-width: 0px; | |
| 344 margin-left: 0px; | |
| 345 margin-right: 0px; | |
| 346 background-color: initial; | |
| 347 color: inherit; | |
| 348 } | |
| 349 | |
| 350 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-con
trols-fullscreen-volume-slider { | |
| 351 display: none; | |
| 352 } | |
| 353 | |
| 354 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media
-controls-fullscreen-volume-min-button { | |
| 355 display: none; | |
| 356 } | |
| 357 | |
| 358 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media
-controls-fullscreen-volume-max-button { | |
| 359 display: none; | |
| 360 } | |
| 361 | |
| 362 video::-internal-media-controls-text-track-list, video::-internal-media-controls
-overflow-menu-list, audio::-internal-media-controls-overflow-menu-list { | |
| 363 position: absolute; | |
| 364 bottom: 4px; | |
| 365 right: 4px; | |
| 366 background-color: #fafafa; | |
| 367 max-width: 50%; | |
| 368 max-height: 250px; | |
| 369 min-width: 150px; | |
| 370 overflow-x: hidden; | |
| 371 overflow-y: auto; | |
| 372 white-space: nowrap; | |
| 373 font-size: 14px; | |
| 374 border-radius: 1px; | |
| 375 box-shadow: 0 8px 20px 1px rgba(0, 0, 0, 0.14), | |
| 376 0 3px 28px 2px rgba(0, 0, 0, 0.12), | |
| 377 0 5px 10px -3px rgba(0, 0, 0, 0.4); | |
| 378 } | |
| 379 | |
| 380 video::-internal-media-controls-text-track-list-item { | |
| 381 display: block; | |
| 382 color: #424242; | |
| 383 text-align: start; | |
| 384 line-height: 40px; | |
| 385 padding-right: 16px; | |
| 386 text-overflow: ellipsis; | |
| 387 } | |
| 388 | |
| 389 video::-internal-media-controls-text-track-list-item:hover, video::-internal-med
ia-controls-overflow-menu-list-item:hover, audio::-internal-media-controls-overf
low-menu-list-item:hover { | |
| 390 background-color: #e0e0e0; | |
| 391 } | |
| 392 | |
| 393 video::-internal-media-controls-text-track-list-item-input { | |
| 394 -webkit-appearance: -internal-media-track-selection-checkmark; | |
| 395 visibility: hidden; | |
| 396 left: 0; | |
| 397 vertical-align: middle; | |
| 398 margin: 0 5px 0 0; | |
| 399 width: 16px; | |
| 400 height: 16px; | |
| 401 margin-left: 12px; | |
| 402 } | |
| 403 | |
| 404 video::-internal-media-controls-text-track-list-item-input:checked { | |
| 405 visibility: visible; | |
| 406 } | |
| 407 | |
| 408 video::-internal-media-controls-text-track-list-kind-captions { | |
| 409 -webkit-appearance: -internal-media-closed-captions-icon; | |
| 410 height: 20px; | |
| 411 width: 20px; | |
| 412 margin-left: 10px; | |
| 413 vertical-align: middle; | |
| 414 } | |
| 415 | |
| 416 video::-internal-media-controls-text-track-list-kind-subtitles { | |
| 417 -webkit-appearance: -internal-media-subtitles-icon; | |
| 418 height: 20px; | |
| 419 width: 20px; | |
| 420 margin-left: 10px; | |
| 421 vertical-align: middle; | |
| 422 } | |
| 423 | |
| 424 video::-internal-media-controls-overflow-button, audio::-internal-media-controls
-overflow-button { | |
| 425 -webkit-appearance: -internal-media-overflow-button; | |
| 426 display: flex; | |
| 427 flex: none; | |
| 428 box-sizing: border-box; | |
| 429 width: 32px; | |
| 430 height: 32px; | |
| 431 padding: 0px; | |
| 432 border-width: 0px; | |
| 433 margin-left: 0px; | |
| 434 margin-right: 0px; | |
| 435 background-color: initial; | |
| 436 color: inherit; | |
| 437 } | |
| 438 | |
| 439 video::-internal-media-controls-download-button, audio::-internal-media-controls
-download-button { | |
| 440 -webkit-appearance: -internal-media-download-button; | |
| 441 display: flex; | |
| 442 flex: none; | |
| 443 box-sizing: border-box; | |
| 444 width: 32px; | |
| 445 height: 32px; | |
| 446 padding: 0px; | |
| 447 border-width: 0px; | |
| 448 margin-left: 0px; | |
| 449 margin-right: 0px; | |
| 450 background-color: initial; | |
| 451 color: inherit; | |
| 452 } | |
| 453 | |
| 454 video::-internal-media-controls-overflow-menu-list-item, audio::-internal-media-
controls-overflow-menu-list-item { | |
| 455 display: block; | |
| 456 color: #424242; | |
| 457 line-height: 40px; | |
| 458 padding-left: 28px; | |
| 459 } | |
| 460 | |
| 461 video::-webkit-media-text-track-container { | |
| 462 position: relative; | |
| 463 width: inherit; | |
| 464 height: inherit; | |
| 465 overflow: hidden; | |
| 466 | |
| 467 font: 22px sans-serif; | |
| 468 text-align: center; | |
| 469 color: rgba(255, 255, 255, 1); | |
| 470 | |
| 471 letter-spacing: normal; | |
| 472 word-spacing: normal; | |
| 473 text-transform: none; | |
| 474 text-indent: 0; | |
| 475 text-decoration: none; | |
| 476 pointer-events: none; | |
| 477 -webkit-user-select: none; | |
| 478 word-break: break-word; | |
| 479 } | |
| 480 | |
| 481 video::cue { | |
| 482 display: inline; | |
| 483 | |
| 484 background-color: rgba(0, 0, 0, 0.8); | |
| 485 padding: 2px 2px; | |
| 486 } | |
| 487 | |
| 488 video::-webkit-media-text-track-region { | |
| 489 position: absolute; | |
| 490 line-height: 5.33vh; | |
| 491 writing-mode: horizontal-tb; | |
| 492 background: rgba(0, 0, 0, 0.8); | |
| 493 color: rgba(255, 255, 255, 1); | |
| 494 word-wrap: break-word; | |
| 495 overflow-wrap: break-word; | |
| 496 overflow: hidden; | |
| 497 } | |
| 498 | |
| 499 video::-webkit-media-text-track-region-container { | |
| 500 position: relative; | |
| 501 | |
| 502 display: flex; | |
| 503 flex-flow: column; | |
| 504 flex-direction: column; | |
| 505 } | |
| 506 | |
| 507 video::-webkit-media-text-track-region-container.scrolling { | |
| 508 transition: top 433ms linear; | |
| 509 } | |
| 510 | |
| 511 | |
| 512 video::-webkit-media-text-track-display { | |
| 513 position: absolute; | |
| 514 overflow: hidden; | |
| 515 white-space: pre-wrap; | |
| 516 -webkit-box-sizing: border-box; | |
| 517 flex: 0 0 auto; | |
| 518 } | |
| 519 | |
| 520 video::cue(:future) { | |
| 521 color: gray; | |
| 522 } | |
| 523 | |
| 524 video::cue(b) { | |
| 525 font-weight: bold; | |
| 526 } | |
| 527 | |
| 528 video::cue(u) { | |
| 529 text-decoration: underline; | |
| 530 } | |
| 531 | |
| 532 video::cue(i) { | |
| 533 font-style: italic; | |
| 534 } | |
| OLD | NEW |