src/ui/file_manager/file_manager/foreground/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   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 }