1/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. */ 4 5.media-button { 6 height: 28px; 7 position: relative; 8 width: 26px; 9} 10 11.media-button > div { 12 height: 100%; 13 opacity: 0; 14 pointer-events: none; 15 position: absolute; 16 transition: opacity 100ms linear; 17 width: 100%; 18} 19 20.media-button[state='default']:not(.disabled):not(:hover):not(:active) > 21 .default.normal, 22.media-button[state='default']:not(.disabled):hover > .default.hover, 23.media-button[state='default']:not(.disabled):active > .default.active, 24.media-button[state='playing']:not(.disabled):not(:hover):not(:active) > 25 .playing.normal, 26.media-button[state='playing']:not(.disabled):hover > .playing.hover, 27.media-button[state='playing']:not(.disabled):active > .playing.active, 28.media-button[state='ended']:not(.disabled):not(:hover):not(:active) > 29 .ended.normal, 30.media-button[state='ended']:not(.disabled):hover > .ended.hover, 31.media-button[state='ended']:not(.disabled):active > .ended.active, 32.media-button.disabled > .disabled { 33 opacity: 1; 34} 35 36/* Custom sliders for progress and volume. */ 37 38/* Customize the standard input[type='range']. */ 39.custom-slider > input[type='range'] { 40 -webkit-appearance: none !important; /* Hide the default thumb icon. */ 41 background: transparent; /* Hide the standard slider bar */ 42 height: 100%; 43 left: -2px; /* Required to align the input element with the parent. */ 44 outline: none; 45 position: absolute; 46 top: -2px; 47 width: 100%; 48} 49 50/* Custom thumb icon. */ 51.custom-slider > input[type='range']::-webkit-slider-thumb { 52 -webkit-appearance: none; 53 background-position: center center; 54 background-repeat: no-repeat; 55 height: 24px; 56 position: relative; 57 z-index: 2; 58} 59 60/* Custom slider bar (we hide the standard one). */ 61.custom-slider > .bar { 62 /* In order to match the horizontal position of the standard slider bar 63 left and right must be equal to 1/2 of the thumb icon width. */ 64 border-bottom-style: solid; 65 border-top-style: solid; 66 border-width: 1px; 67 bottom: 11px; 68 pointer-events: none; /* Mouse events pass through to the standard input. */ 69 position: absolute; 70 top: 11px; 71} 72 73.custom-slider > .bar > .filled, 74.custom-slider > .bar > .cap { 75 border-style: solid; 76 border-width: 1px; 77 bottom: -1px; 78 position: absolute; 79 top: -1px; 80} 81 82/* The filled portion of the slider bar to the left of the thumb. */ 83.custom-slider > .bar > .filled { 84 border-left-style: none; 85 border-right-style: none; 86 left: 0; 87 width: 0; /* The element style.width is manipulated from the code. */ 88} 89 90/* Rounded caps to the left and right of the slider bar. */ 91.custom-slider > .bar > .cap { 92 width: 4px; 93} 94 95/* Left cap is always filled, should be the same color as .filled. */ 96.custom-slider > .bar > .cap.left { 97 border-bottom-left-radius: 4px; 98 border-right-style: none; 99 border-top-left-radius: 4px; 100 right: 100%; 101} 102 103/* Right cap is always not filled. */ 104.custom-slider > .bar > .cap.right { 105 border-bottom-right-radius: 4px; 106 border-left-style: none; 107 border-top-right-radius: 4px; 108 left: 100%; 109} 110 111.custom-slider > .bar, 112.custom-slider > .bar > .cap.right { 113 background-color: rgba(0, 0, 0, 0.5); 114 border-color: #808080; 115} 116 117.custom-slider > .bar > .filled, 118.custom-slider > .bar > .cap.left { 119 background-image: linear-gradient(#c3c3c3, #d9d9d9); 120 border-color: #d9d9d9; 121} 122 123.custom-slider.disabled > .bar > .filled, 124.custom-slider.disabled > .bar > .cap.left { 125 background-color: rgba(0, 0, 0, 0.5); 126 background-image: none; 127} 128 129.custom-slider.disabled > .bar, 130.custom-slider.disabled > .bar > .filled, 131.custom-slider.disabled > .bar > .cap { 132 border-color: #404040; 133} 134 135.media-button.disabled, 136.custom-slider.disabled, 137.custom-slider.readonly { 138 pointer-events: none; 139} 140 141/* Progress seek marker (precise time shown on mouse hover. */ 142 143/* Thin vertical line across the slider bar */ 144.custom-slider > .bar > .seek-mark { 145 background-color: #202020; 146 bottom: -1px; 147 left: 0; 148 position: absolute; 149 top: -1px; 150 width: 0; 151} 152 153.custom-slider > .bar > .seek-mark.visible { 154 width: 1px; 155} 156 157.custom-slider > .bar > .seek-mark.inverted { 158 background-color: #808080; 159} 160 161/* Text label giving the precise time corresponding to the hover position. */ 162.custom-slider > .bar > .seek-mark > .seek-label { 163 -webkit-box-align: center; 164 -webkit-box-orient: horizontal; 165 -webkit-box-pack: center; 166 background: #202020; 167 border-top-left-radius: 2px; 168 border-top-right-radius: 2px; 169 bottom: 19px; 170 color: white; 171 display: -webkit-box; 172 font-size: 13px; 173 height: 15px; 174 left: 0; 175 opacity: 0; 176 overflow: hidden; 177 position: absolute; 178 transition: opacity 150ms ease; 179} 180 181.custom-slider > .bar > .seek-mark.visible > .seek-label { 182 opacity: 1; 183} 184 185/* Media controls in order of appearance. */ 186 187/* Play/pause button. */ 188 189.media-button.play { 190 margin-left: -7px; 191 margin-right: -7px; 192} 193 194.media-button.play > .default.normal { 195 background-image: -webkit-image-set( 196 url('../images/media/media_play.png') 1x, 197 url('../images/media/2x/media_play.png') 2x); 198} 199 200.media-button.play > .default.hover { 201 background-image: -webkit-image-set( 202 url('../images/media/media_play_hover.png') 1x, 203 url('../images/media/2x/media_play_hover.png') 2x); 204} 205 206.media-button.play > .default.active { 207 background-image: -webkit-image-set( 208 url('../images/media/media_play_down.png') 1x, 209 url('../images/media/2x/media_play_down.png') 2x); 210} 211 212.media-button.play > .playing.normal { 213 background-image: -webkit-image-set( 214 url('../images/media/media_pause.png') 1x, 215 url('../images/media/2x/media_pause.png') 2x); 216} 217 218.media-button.play > .playing.hover { 219 background-image: -webkit-image-set( 220 url('../images/media/media_pause_hover.png') 1x, 221 url('../images/media/2x/media_pause_hover.png') 2x); 222} 223 224.media-button.play > .playing.active { 225 background-image: -webkit-image-set( 226 url('../images/media/media_pause_down.png') 1x, 227 url('../images/media/2x/media_pause_down.png') 2x); 228} 229 230.media-button.play > .ended.normal { 231 background-image: -webkit-image-set( 232 url('../images/media/media_loop.png') 1x, 233 url('../images/media/2x/media_loop.png') 2x); 234} 235 236.media-button.play > .ended.hover { 237 background-image: -webkit-image-set( 238 url('../images/media/media_loop_hover.png') 1x, 239 url('../images/media/2x/media_loop_hover.png') 2x); 240} 241 242.media-button.play > .ended.active { 243 background-image: -webkit-image-set( 244 url('../images/media/media_loop_down.png') 1x, 245 url('../images/media/2x/media_loop_down.png') 2x); 246} 247 248.media-button.play > .disabled { 249 background-image: -webkit-image-set( 250 url('../images/media/media_play_disabled.png') 1x, 251 url('../images/media/2x/media_play_disabled.png') 2x); 252} 253 254/* Time controls: a slider and a text time display. */ 255 256.time-controls { 257 -webkit-box-align: center; 258 -webkit-box-flex: 1; 259 -webkit-box-orient: horizontal; 260 -webkit-box-pack: center; 261 display: -webkit-box; 262 height: 100%; 263} 264 265.custom-slider.progress { 266 -webkit-box-flex: 1; 267 display: -webkit-box; 268 height: 100%; 269 margin-left: -9px; /* Set the margins at the edges of the slider bar. */ 270 margin-right: -9px; 271 position: relative; 272} 273 274.custom-slider.progress > input[type='range']::-webkit-slider-thumb { 275 background-image: -webkit-image-set( 276 url('../images/media/media_slider_thumb.png') 1x, 277 url('../images/media/2x/media_slider_thumb.png') 2x); 278 width: 28px; 279} 280 281.custom-slider.progress > input[type='range']::-webkit-slider-thumb:hover { 282 background-image: -webkit-image-set( 283 url('../images/media/media_slider_thumb_hover.png') 1x, 284 url('../images/media/2x/media_slider_thumb_hover.png') 2x); 285} 286 287.custom-slider.progress > input[type='range']::-webkit-slider-thumb:active { 288 background-image: -webkit-image-set( 289 url('../images/media/media_slider_thumb_down.png') 1x, 290 url('../images/media/2x/media_slider_thumb_down.png') 2x); 291} 292 293.custom-slider.progress.disabled > input[type='range']::-webkit-slider-thumb { 294 background-image: none; 295} 296 297.custom-slider.progress > .bar { 298 left: 14px; /* Exactly 1/2 of the thumb width */ 299 right: 14px; 300} 301 302/* Time display. */ 303 304.time-controls > .time { 305 cursor: default; 306 height: 100%; 307 margin-left: 15px; 308 position: relative; 309} 310 311.time-controls > .time.disabled { 312 opacity: 0; 313} 314 315/* Invisible div used to compute the width required for the elapsed time. */ 316.time-controls > .time > .duration { 317 color: transparent; 318} 319 320.time-controls > .time > .current { 321 -webkit-box-align: center; 322 -webkit-box-orient: horizontal; 323 -webkit-box-pack: end; 324 color: white; 325 display: -webkit-box; 326 height: 100%; 327 position: absolute; 328 right: 0; 329 top: -1px; 330} 331 332/* Volume controls: sound button and volume slider */ 333 334.volume-controls { 335 -webkit-box-align: center; 336 -webkit-box-orient: horizontal; 337 -webkit-box-pack: center; 338 display: -webkit-box; 339 height: 100%; 340} 341 342/* Sound button */ 343 344.media-button.sound { 345 margin-left: -4px; 346 width: 31px; 347} 348 349.media-button.sound[level='0'] > .normal { 350 background-image: -webkit-image-set( 351 url('../images/media/media_sound_disabled.png') 1x, 352 url('../images/media/2x/media_sound_disabled.png') 2x); 353} 354 355.media-button.sound[level='0'] > .hover { 356 background-image: -webkit-image-set( 357 url('../images/media/media_sound_disabled_hover.png') 1x, 358 url('../images/media/2x/media_sound_disabled_hover.png') 2x); 359} 360 361.media-button.sound[level='0'] > .active { 362 background-image: -webkit-image-set( 363 url('../images/media/media_sound_disabled_down.png') 1x, 364 url('../images/media/2x/media_sound_disabled_down.png') 2x); 365} 366 367 368.media-button.sound[level='1'] > .normal { 369 background-image: -webkit-image-set( 370 url('../images/media/media_sound_level1.png') 1x, 371 url('../images/media/2x/media_sound_level1.png') 2x); 372} 373 374.media-button.sound[level='1'] > .hover { 375 background-image: -webkit-image-set( 376 url('../images/media/media_sound_level1_hover.png') 1x, 377 url('../images/media/2x/media_sound_level1_hover.png') 2x); 378} 379 380.media-button.sound[level='1'] > .active { 381 background-image: -webkit-image-set( 382 url('../images/media/media_sound_level1_down.png') 1x, 383 url('../images/media/2x/media_sound_level1_down.png') 2x); 384} 385 386 387.media-button.sound[level='2'] > .normal { 388 background-image: -webkit-image-set( 389 url('../images/media/media_sound_level2.png') 1x, 390 url('../images/media/2x/media_sound_level2.png') 2x); 391} 392 393.media-button.sound[level='2'] > .hover { 394 background-image: -webkit-image-set( 395 url('../images/media/media_sound_level2_hover.png') 1x, 396 url('../images/media/2x/media_sound_level2_hover.png') 2x); 397} 398 399.media-button.sound[level='2'] > .active { 400 background-image: -webkit-image-set( 401 url('../images/media/media_sound_level2_down.png') 1x, 402 url('../images/media/2x/media_sound_level2_down.png') 2x); 403} 404 405 406.media-button.sound[level='3'] > .normal { 407 background-image: -webkit-image-set( 408 url('../images/media/media_sound_full.png') 1x, 409 url('../images/media/2x/media_sound_full.png') 2x); 410} 411 412.media-button.sound[level='3'] > .hover { 413 background-image: -webkit-image-set( 414 url('../images/media/media_sound_full_hover.png') 1x, 415 url('../images/media/2x/media_sound_full_hover.png') 2x); 416} 417 418.media-button.sound[level='3'] > .active { 419 background-image: -webkit-image-set( 420 url('../images/media/media_sound_full_down.png') 1x, 421 url('../images/media/2x/media_sound_full_down.png') 2x); 422} 423 424 425.media-button.sound > .disabled { 426 background-image: -webkit-image-set( 427 url('../images/media/media_sound_full_disabled.png') 1x, 428 url('../images/media/2x/media_sound_full_disabled.png') 2x); 429} 430 431/* Volume slider. */ 432 433.custom-slider.volume { 434 height: 100%; 435 margin-left: -4px; 436 margin-right: -4px; 437 position: relative; 438 width: 60px; 439} 440 441.custom-slider.volume > input[type='range']::-webkit-slider-thumb { 442 background-image: -webkit-image-set( 443 url('../images/media/media_volume_slider_thumb.png') 1x, 444 url('../images/media/2x/media_volume_slider_thumb.png') 2x); 445 width: 20px; 446} 447 448.custom-slider.volume > input[type='range']::-webkit-slider-thumb:hover { 449 background-image: -webkit-image-set( 450 url('../images/media/media_volume_slider_thumb_hover.png') 1x, 451 url('../images/media/2x/media_volume_slider_thumb_hover.png') 2x); 452} 453 454.custom-slider.volume > input[type='range']::-webkit-slider-thumb:active { 455 background-image: -webkit-image-set( 456 url('../images/media/media_volume_slider_thumb_down.png') 1x, 457 url('../images/media/2x/media_volume_slider_thumb_down.png') 2x); 458} 459 460.custom-slider.volume.disabled > input[type='range']::-webkit-slider-thumb { 461 background-image: none; 462} 463 464.custom-slider.volume > .bar { 465 left: 10px; /* Exactly 1/2 of the thumb width */ 466 right: 10px; 467} 468 469/* Horizontal video control bar, all controls in a row. */ 470 471.video-controls { 472 -webkit-box-align: center; 473 -webkit-box-orient: horizontal; 474 -webkit-box-pack: center; 475 background: #202020; 476 border-radius: 5px; 477 display: -webkit-box; 478 font-size: 15px; 479 height: 30px; 480 opacity: 0.8; 481 padding-left: 15px; 482 padding-right: 15px; 483 pointer-events: auto; 484} 485 486.video-controls .time-controls, 487.video-controls .volume-controls { 488 margin-left: 15px; 489} 490 491/* Fullscreen button. */ 492/* There is no final decision whether we need a separate icon when toggled. */ 493 494.media-button.fullscreen { 495 margin-left: 9px; /* 15px visible margin - 6px whitespace in the icon. */ 496 margin-right: -6px; 497} 498 499.media-button.fullscreen > .normal { 500 background-image: -webkit-image-set( 501 url('../images/media/media_fullscreen.png') 1x, 502 url('../images/media/2x/media_fullscreen.png') 2x); 503} 504 505.media-button.fullscreen > .hover { 506 background-image: -webkit-image-set( 507 url('../images/media/media_fullscreen_hover.png') 1x, 508 url('../images/media/2x/media_fullscreen_hover.png') 2x); 509} 510 511.media-button.fullscreen > .active { 512 background-image: -webkit-image-set( 513 url('../images/media/media_fullscreen_down.png') 1x, 514 url('../images/media/2x/media_fullscreen_down.png') 2x); 515} 516 517.media-button.fullscreen > .disabled { 518 background-image: -webkit-image-set( 519 url('../images/media/media_fullscreen_disabled.png') 1x, 520 url('../images/media/2x/media_fullscreen_disabled.png') 2x); 521} 522 523.playback-state-icon { 524 background-color: #202020; 525 background-position: center center; 526 background-repeat: no-repeat; 527 border-radius: 2.5px; 528 height: 32px; 529 left: 50%; 530 margin-left: -16px; 531 margin-top: -16px; 532 opacity: 0; 533 pointer-events: none; 534 position: absolute; 535 top: 50%; 536 width: 32px; 537 z-index: 2; 538} 539 540.text-banner { 541 background-color: black; 542 border-radius: 10px; 543 color: white; 544 font-size: 18px; 545 left: 50%; 546 margin-left: -250px; 547 opacity: 0; 548 padding: 10px; 549 pointer-events: none; 550 position: absolute; 551 text-align: center; 552 text-shadow: 0 0 10px black; 553 top: 20%; 554 width: 500px; 555 z-index: 2; 556} 557 558.text-banner[visible] { 559 -webkit-animation: text-banner-blowup 3000ms; 560} 561 562.playback-state-icon[state] { 563 -webkit-animation: blowup 500ms; 564} 565 566@-webkit-keyframes blowup { 567 from { 568 opacity: 1; 569 } 570 to { 571 -webkit-transform: scale(3); 572 opacity: 0; 573 } 574} 575 576@-webkit-keyframes text-banner-blowup { 577 from { 578 -webkit-transform: scale(0.5); 579 opacity: 0; 580 } 581 20% { 582 -webkit-transform: scale(1); 583 opacity: 0.75; 584 } 585 80% { 586 -webkit-transform: scale(1); 587 opacity: 0.75; 588 } 589 to { 590 -webkit-transform: scale(3); 591 opacity: 0; 592 } 593} 594 595.playback-state-icon[state='play'] { 596 background-image: -webkit-image-set( 597 url('../images/media/media_play.png') 1x, 598 url('../images/media/2x/media_play.png') 2x); 599} 600 601.playback-state-icon[state='pause'] { 602 background-image: -webkit-image-set( 603 url('../images/media/media_pause.png') 1x, 604 url('../images/media/2x/media_pause.png') 2x); 605} 606