src/ui/file_manager/file_manager/audio_player/elements/control_panel.css

   1 /* Copyright 2014 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 /* Controls bar. */
   6 .controls {
   7   align-items: center;
   8   background-color: #fff;
   9   display: flex;
  10   flex-direction: column;
  11   height: 64px;
  12   justify-content: center;
  13   padding: 0;
  14 }
  15
  16 .controls .upper-controls {
  17   height: 32px;
  18   width: 100%
  19 }
  20
  21 .controls .lower-controls {
  22   height: 32px;
  23   width: 100%
  24 }
  25
  26 .audio-controls {
  27   align-items: center;
  28   display: flex;
  29   flex-direction: row;
  30   justify-content: center;
  31   padding: 0;
  32 }
  33
  34 /* Customized scrollbar for the playlist. */
  35
  36 .media-button {
  37   background-color: #fff;
  38   border: 0;
  39   height: 32px;
  40   outline: none;  /* TODO(yoshiki): Show outline only on keyboard focus. */
  41   padding: 0;
  42   position: relative;
  43   width: 32px;
  44 }
  45
  46 .media-button:active {
  47   background-image: -webkit-image-set(
  48       url('../assets/100/player_button_pressed.png') 1x,
  49       url('../assets/200/player_button_pressed.png') 2x);
  50 }
  51
  52 .media-button > div,
  53 .media-button.toggle > label > span {
  54   display: inline-block;
  55   height: 100%;
  56   pointer-events: none;
  57   transition: opacity 100ms linear;
  58   width: 100%;
  59 }
  60
  61 .media-button > div {
  62   left: 0;
  63   opacity: 0;
  64   position: absolute;
  65   top: 0;
  66 }
  67
  68 .media-button[state='default']:not(.disabled) > .default,
  69 .media-button[state='ended']:not(.disabled) > .ended,
  70 .media-button[state='playing']:not(.disabled) > .playing,
  71 .media-button.disabled > .disabled {
  72   opacity: 1;
  73 }
  74
  75 /* Custom sliders for progress and volume. */
  76
  77 /* Customize the standard input[type='range']. */
  78
  79 /* Time controls: a slider and a text time display. */
  80
  81 .time-controls {
  82   align-items: center;
  83   display: flex;
  84   flex-direction: row;
  85   height: 100%;
  86   justify-content: center;
  87 }
  88
  89 .custom-slider.progress {
  90   display: flex;
  91   flex: 1 1 auto;
  92   height: 100%;
  93   position: relative;
  94   z-index: 0;  /* Make a layer which includes the thumb on slider. */
  95 }
  96
  97 .custom-slider.progress > input[type='range']::-webkit-slider-thumb {
  98   background-image: -webkit-image-set(
  99       url('../assets/100/player_timeline_handler.png') 1x,
 100       url('../assets/200/player_timeline_handler.png') 2x);
 101   width: 28px;
 102 }
 103
 104 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:hover {
 105   background-image: -webkit-image-set(
 106       url('../assets/100/player_timeline_handler.png') 1x,
 107       url('../assets/200/player_timeline_handler.png') 2x);
 108 }
 109
 110 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:active {
 111   background-image: -webkit-image-set(
 112       url('../assets/100/player_timeline_handler_pressed.png') 1x,
 113       url('../assets/200/player_timeline_handler_pressed.png') 2x);
 114 }
 115
 116 .custom-slider.progress.disabled > input[type='range']::-webkit-slider-thumb {
 117   background-image: none;
 118 }
 119
 120 .time-controls > .time {
 121   cursor: default;
 122   height: 100%;
 123   position: relative;
 124   width: 53px;
 125 }
 126
 127 .time-controls > .time.disabled {
 128   opacity: 0;
 129 }
 130
 131 .custom-slider > input[type='range'] {
 132   -webkit-appearance: none !important;  /* Hide the default thumb icon. */
 133   background: transparent;  /* Hide the standard slider bar */
 134   height: 100%;
 135   left: -2px;  /* Required to align the input element with the parent. */
 136   outline: none;
 137   position: absolute;
 138   top: -2px;
 139   width: 100%;
 140 }
 141
 142 /* Custom thumb icon. */
 143 .custom-slider > input[type='range']::-webkit-slider-thumb {
 144   -webkit-appearance: none;
 145   background-position: center center;
 146   background-repeat: no-repeat;
 147   height: 24px;
 148   position: relative;
 149   z-index: 2;
 150 }
 151
 152 /* Custom slider bar (we hide the standard one). */
 153 .custom-slider > .bar {
 154   background-image: -webkit-image-set(
 155       url('../assets/100/player_timeline_base_center.png') 1x,
 156       url('../assets/200/player_timeline_base_center.png') 2x);
 157   /* In order to match the horizontal position of the standard slider bar
 158      left and right must be equal to 1/2 of the thumb icon width. */
 159   bottom: 15px;
 160   left: 14px;  /* Exactly 1/2 of the thumb width */
 161   pointer-events: none;  /* Mouse events pass through to the standard input. */
 162   position: absolute;
 163   right: 14px;
 164   top: 15px;
 165 }
 166
 167 .custom-slider > .bar > .filled,
 168 .custom-slider > .bar > .cap {
 169   bottom: 0;
 170   position: absolute;
 171   top: 0;
 172 }
 173
 174 /* The filled portion of the slider bar to the left of the thumb. */
 175 .custom-slider > .bar > .filled {
 176   background-image: -webkit-image-set(
 177       url('../assets/100/player_timeline_played_center.png') 1x,
 178       url('../assets/200/player_timeline_played_center.png') 2x);
 179   border-left-style: none;
 180   border-right-style: none;
 181   left: 0;
 182   width: 0; /* The element style.width is manipulated from the code. */
 183 }
 184
 185 /* Rounded caps to the left and right of the slider bar. */
 186 .custom-slider > .bar > .cap {
 187   width: 1px;
 188 }
 189
 190 /* Left cap is always filled, should be the same color as .filled. */
 191 .custom-slider > .bar > .cap.left {
 192   background-image: -webkit-image-set(
 193       url('../assets/100/player_timeline_played_left.png') 1x,
 194       url('../assets/200/player_timeline_played_left.png') 2x);
 195   right: 100%;
 196 }
 197
 198 /* Right cap is always not filled. */
 199 .custom-slider > .bar > .cap.right {
 200   background-image: -webkit-image-set(
 201       url('../assets/100/player_timeline_base_right.png') 1x,
 202       url('../assets/200/player_timeline_base_right.png') 2x);
 203   left: 100%;
 204 }
 205
 206 .media-button.disabled,
 207 .custom-slider.disabled,
 208 .custom-slider.readonly {
 209   pointer-events: none;
 210 }
 211
 212 /* Progress seek marker (precise time shown on mouse hover. */
 213
 214 /* Thin vertical line across the slider bar */
 215 .custom-slider > .bar > .seek-mark {
 216   background-color: #202020;
 217   bottom: -1px;
 218   left: 0;
 219   position: absolute;
 220   top: -1px;
 221   width: 0;
 222 }
 223
 224 .custom-slider > .bar > .seek-mark.visible {
 225   width: 1px;
 226 }
 227
 228 .custom-slider > .bar > .seek-mark.inverted {
 229   background-color: #808080;
 230 }
 231
 232 /* Text label giving the precise time corresponding to the hover position. */
 233 .custom-slider > .bar > .seek-mark > .seek-label {
 234   align-items: center;
 235   background: #202020;
 236   border-top-left-radius: 2px;
 237   border-top-right-radius: 2px;
 238   bottom: 19px;
 239   color: white;
 240   display: flex;
 241   flex-direction: row;
 242   font-size: 12px;
 243   height: 15px;
 244   justify-content: center;
 245   left: 0;
 246   opacity: 0;
 247   overflow: hidden;
 248   position: absolute;
 249   transition: opacity 150ms ease;
 250 }
 251
 252 .custom-slider > .bar > .seek-mark.visible > .seek-label {
 253   opacity: 1;
 254 }
 255
 256 /* Media controls in order of appearance. */
 257
 258 .audio-controls {
 259   align-items: center;
 260   display: flex;
 261   flex-direction: row;
 262   height: 100%;
 263   justify-content: center;
 264 }
 265
 266 /* Play/pause button. */
 267
 268 .media-button.toggle input {
 269   position: absolute;
 270   visibility: hidden;
 271 }
 272
 273 .media-button.shuffle-mode {
 274   margin-left: 5px;
 275   margin-right: 5px;
 276 }
 277
 278 .media-button.shuffle-mode > label > .icon {
 279   background-image: -webkit-image-set(
 280       url('../assets/100/player_button_shuffle.png') 1x,
 281       url('../assets/200/player_button_shuffle.png') 2x);
 282   pointer-events: auto;
 283 }
 284
 285 .media-button.shuffle-mode > label > input:checked + .icon {
 286   background-image: -webkit-image-set(
 287       url('../assets/100/player_button_shuffle_active.png') 1x,
 288       url('../assets/200/player_button_shuffle_active.png') 2x);
 289 }
 290
 291 .media-button.repeat {
 292   margin-left: 5px;
 293   margin-right: 0;
 294 }
 295
 296 .media-button.repeat > label > .icon {
 297   background-image: -webkit-image-set(
 298       url('../assets/100/player_button_repeat.png') 1x,
 299       url('../assets/200/player_button_repeat.png') 2x);
 300   pointer-events: auto;
 301 }
 302
 303 .media-button.repeat > label > input:checked + .icon {
 304   background-image: -webkit-image-set(
 305       url('../assets/100/player_button_repeat_active.png') 1x,
 306       url('../assets/200/player_button_repeat_active.png') 2x);
 307 }
 308
 309 .media-button.play {
 310   margin-left: 0;
 311   margin-right: 0;
 312 }
 313
 314 .media-button.play > .ended {
 315   background-image: -webkit-image-set(
 316       url('../assets/100/player_button_play.png') 1x,
 317       url('../assets/200/player_button_play.png') 2x);
 318 }
 319
 320 .media-button.play > .playing {
 321   background-image: -webkit-image-set(
 322       url('../assets/100/player_button_pause.png') 1x,
 323       url('../assets/200/player_button_pause.png') 2x);
 324 }
 325
 326 .media-button.previous {
 327   margin-left: 5px;
 328   margin-right: 0;
 329 }
 330
 331 .media-button.previous > .normal {
 332   background-image: -webkit-image-set(
 333       url('../assets/100/player_button_previous.png') 1x,
 334       url('../assets/200/player_button_previous.png') 2x);
 335 }
 336
 337 .media-button.next {
 338   margin-left: 0;
 339   margin-right: 5px;
 340 }
 341
 342 .media-button.next > .normal {
 343   background-image: -webkit-image-set(
 344       url('../assets/100/player_button_next.png') 1x,
 345       url('../assets/200/player_button_next.png') 2x);
 346 }
 347
 348 .media-button.volume {
 349   margin-left: 5px;
 350   margin-right: 5px;
 351 }
 352
 353 .media-button.volume > .normal {
 354   background-image: -webkit-image-set(
 355       url('../assets/100/player_button_volume.png') 1x,
 356       url('../assets/200/player_button_volume.png') 2x);
 357 }
 358
 359 .media-button.volume > label > .icon {
 360   background-image: -webkit-image-set(
 361       url('../assets/100/player_button_volume.png') 1x,
 362       url('../assets/200/player_button_volume.png') 2x);
 363   pointer-events: auto;
 364 }
 365
 366 .media-button.volume > label > input:checked + .icon {
 367   background-image: -webkit-image-set(
 368       url('../assets/100/player_button_volume_active.png') 1x,
 369       url('../assets/200/player_button_volume_active.png') 2x);
 370 }
 371
 372 .media-button.playlist {
 373   margin-left: 5px;
 374   margin-right: 5px;
 375 }
 376
 377 .media-button.playlist > label > .icon {
 378   background-image: -webkit-image-set(
 379       url('../assets/100/player_button_playlist.png') 1x,
 380       url('../assets/200/player_button_playlist.png') 2x);
 381   pointer-events: auto;
 382 }
 383
 384 .media-button.playlist > label > input:checked + .icon {
 385   background-image: -webkit-image-set(
 386       url('../assets/100/player_button_playlist_active.png') 1x,
 387       url('../assets/200/player_button_playlist_active.png') 2x);
 388 }
 389
 390
 391 /* Invisible div used to compute the width required for the elapsed time. */
 392 .time-controls > .time > .duration,
 393 .time-controls > .time > .current {
 394   align-items: center;
 395   color: #3d3d3d;
 396   display: flex;
 397   flex-direction: row;
 398   font-size: 12px;
 399   height: 100%;
 400   justify-content: flex-end;
 401   position: absolute;
 402   top: -1px;
 403 }
 404
 405 .time-controls > .time > .duration {
 406   left: 0;
 407 }
 408
 409 .time-controls > .time > .current {
 410   right: 0;
 411 }
 412
 413 /* Volume controls: sound button and volume slider */
 414
 415 #volumeContainer {
 416   border: 1px solid #ddd;
 417   border-radius: 2px;
 418   box-shadow: 0 2px 4px #777;
 419   height: 110px;
 420   position: fixed;
 421   width: 32px;
 422 }
 423
 424 #volumeContainer.default-hidden {
 425   visibility: hidden;
 426 }