ui/file_manager/video_player/css/media_controls.css

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