src/ui/file_manager/file_manager/foreground/css/audio_player.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 body {
   6   -webkit-user-select: none;
   7   overflow: hidden;
   8   padding: 0;
   9 }
  10
  11 .audio-player {
  12   background-color: #1d1d1d;
  13   bottom: 0;
  14   color: white;
  15   cursor: default;
  16   font-family: Open Sans, Droid Sans Fallback, sans-serif;
  17   font-size: 10pt;
  18   left: 0;
  19   position: absolute;
  20   right: 0;
  21   top: 0;
  22 }
  23
  24 /* Title buttons.
  25  * In the collapsed/single-track mode they overlap the first track. */
  26
  27 .title-button {
  28   background-position: center center;
  29   background-repeat: no-repeat;
  30   cursor: pointer;
  31   height: 29px;
  32   opacity: 0.4;
  33   position: absolute;
  34   top: 0;
  35   width: 29px;
  36   z-index: 2;
  37 }
  38
  39 .title-button:hover {
  40   background-color: rgb(60, 126, 255) !important;
  41   opacity: 1;
  42 }
  43
  44 .audio-player:not(.collapsed):not(.single-track) > .title-button {
  45   background-color: #1f1f1f;
  46 }
  47
  48 .title-button.close {
  49   background-image: -webkit-image-set(
  50     url('../images/media/media_close.png') 1x,
  51     url('../images/media/2x/media_close.png') 2x);
  52   right: 0;
  53 }
  54
  55 .title-button.collapse {
  56   background-image: -webkit-image-set(
  57     url('../images/media/media_collapse.png') 1x,
  58     url('../images/media/2x/media_collapse.png') 2x);
  59   right: 0;
  60 }
  61
  62 .audio-player:not(.frameless) .title-button.close {
  63   display: none;
  64 }
  65
  66 .audio-player.frameless .title-button.collapse {
  67   right: 29px;
  68 }
  69
  70 .collapsed .title-button.collapse {
  71   background-image: -webkit-image-set(
  72     url('../images/media/media_expand.png') 1x,
  73     url('../images/media/2x/media_expand.png') 2x);
  74 }
  75
  76 .single-track .title-button.collapse {
  77   display: none;
  78 }
  79
  80 /* Common properties for track containers. */
  81 .audio-player > .track-list,
  82 .audio-player > .track-stack {
  83   bottom: 35px;  /* Room for the controls bar. */
  84   left: 0;
  85   position: absolute;
  86   right: 0;
  87 }
  88
  89 /* Scrollable list of tracks.
  90  * Displayed in expanded mode if there is more than one track. */
  91 .audio-player > .track-list {
  92   -webkit-box-align: center;
  93   -webkit-box-orient: vertical;
  94   -webkit-box-pack: start;
  95   display: -webkit-box;
  96   overflow-x: hidden;
  97   overflow-y: auto;
  98   top: 0;
  99 }
 100
 101 /* A single track container.
 102  * Displayed in the compact mode or when there is only one track. */
 103 .audio-player > .track-stack {
 104   height: 58px;
 105 }
 106
 107 .audio-player.collapsed > .track-list,
 108 .audio-player.single_track > .track-list,
 109 .audio-player:not(.collapsed):not(.single-track) > .track-stack {
 110   opacity: 0;
 111   pointer-events: none;
 112 }
 113
 114 /* Track item. */
 115 .track {
 116   -webkit-box-align: center;
 117   -webkit-box-orient: horizontal;
 118   -webkit-box-pack: start;
 119   display: -webkit-box;
 120   height: 58px;
 121   width: 100%;
 122 }
 123
 124 /* In the expanded mode the selected track is highlighted. */
 125 .track-list .track.selected {
 126   background-color: #2d2d2d;
 127 }
 128
 129 .track-list .track:hover {
 130   background-color: #272727 !important;
 131 }
 132
 133 .track-list .track:not(.selected) .data {
 134   opacity: 0.7;
 135 }
 136
 137 /* In the compact mode all tracks are in the same position, only the selected
 138   is visible.*/
 139 .track-stack > .track {
 140   position: absolute;
 141   top: 0;
 142 }
 143
 144 .track-stack > .track.selected {
 145   z-index: 1;
 146 }
 147
 148 /* Opacity transition is controlled differently for the text and the artwork.
 149  * Text transition looks better if fade-in and fade-out go in parallel.
 150  * For the artwork we start fading out the old icon only after the new one
 151  * is completely opaque (otherwise when transitioning between identical icons
 152  * we see some fading because the background transpires). */
 153 .track-stack > .track:not(.selected) .data,
 154 .track-stack > .track:not(.visible) .art {
 155   opacity: 0;
 156   transition: opacity 220ms ease-out;
 157 }
 158
 159 /* Track data. */
 160
 161 .track .art {
 162   box-sizing: border-box;
 163   height: 48px;
 164   margin: 4px 0 6px 4px;
 165   position: relative;
 166   width: 48px;
 167 }
 168
 169 .track .art.blank {
 170   background-color: #111;
 171   border: 1px solid #333;
 172 }
 173
 174 .track .art img {
 175   height: 100%;
 176   width: 100%;
 177 }
 178
 179 .track .art.blank img {
 180   display: none;
 181 }
 182
 183 .track .art.error {
 184   background-image: -webkit-image-set(
 185     url('../images/media/error.png') 1x,
 186     url('../images/media/2x/error.png') 2x);
 187   background-position: center center;
 188   background-repeat: no-repeat;
 189 }
 190
 191 .noart .track .art {
 192   display: none;
 193 }
 194
 195 .track .data {
 196   -webkit-box-flex: 1;
 197   -webkit-box-orient: vertical;
 198   -webkit-box-pack: center;
 199   display: -webkit-box;
 200   margin-left: 8px;
 201   margin-right: 4px;
 202 }
 203
 204 .track .data .data-title,
 205 .track .data .data-artist {
 206   overflow: hidden;
 207   text-overflow: ellipsis;
 208   white-space: nowrap;
 209 }
 210
 211 .track .data .data-title {
 212   font-weight: bold;
 213 }
 214
 215 /* TODO(kaznacheev): Set to 20px when the audio player is title-less. */
 216 .single-track .data-title {
 217   padding-right: 0;
 218 }
 219
 220 /* TODO(kaznacheev): Set to 50px when the audio player is title-less. */
 221 .collapsed:not(.single-track) .data-title {
 222   padding-right: 20px;
 223 }
 224
 225 /* Controls bar. */
 226
 227 .audio-controls {
 228   -webkit-box-align: center;
 229   -webkit-box-orient: horizontal;
 230   -webkit-box-pack: center;
 231   background-color: #2D2D2D;
 232   border-top: 1px solid rgba(255, 255, 255, 0.1);
 233   bottom: 0;
 234   display: -webkit-box;
 235   height: 30px;
 236   left: 0;
 237   padding: 0 0 4px 13px;
 238   position: absolute;
 239   right: 0;
 240 }
 241
 242 .audio-controls .media-button {
 243   height: 29px;
 244   margin-top: 1px;
 245   width: 29px;
 246 }
 247
 248 .audio-controls .media-button.play {
 249   margin-left: -10px;
 250   margin-right: -8px;
 251 }
 252
 253 .audio-controls .media-button.play > .default.normal,
 254 .audio-controls .media-button.play > .ended.normal {
 255   background-image: -webkit-image-set(
 256     url('../images/media/media_play_audio.png') 1x,
 257     url('../images/media/2x/media_play_audio.png') 2x);
 258 }
 259
 260 .audio-controls .media-button.play > .default.hover,
 261 .audio-controls .media-button.play > .ended.hover {
 262   background-image: -webkit-image-set(
 263     url('../images/media/media_play_audio_hover.png') 1x,
 264     url('../images/media/2x/media_play_audio_hover.png') 2x);
 265 }
 266
 267 .audio-controls .media-button.play > .default.active,
 268 .audio-controls .media-button.play > .ended.active {
 269   background-image: -webkit-image-set(
 270     url('../images/media/media_play_audio_down.png') 1x,
 271     url('../images/media/2x/media_play_audio_down.png') 2x);
 272 }
 273
 274 .audio-controls .media-button.play > .playing.normal {
 275   background-image: -webkit-image-set(
 276     url('../images/media/media_pause_audio.png') 1x,
 277     url('../images/media/2x/media_pause_audio.png') 2x);
 278 }
 279
 280 .audio-controls .media-button.play > .playing.hover {
 281   background-image: -webkit-image-set(
 282     url('../images/media/media_pause_audio_hover.png') 1x,
 283     url('../images/media/2x/media_pause_audio_hover.png') 2x);
 284 }
 285
 286 .audio-controls .media-button.play > .playing.active {
 287   background-image: -webkit-image-set(
 288     url('../images/media/media_pause_audio_down.png') 1x,
 289     url('../images/media/2x/media_pause_audio_down.png') 2x);
 290 }
 291
 292 .audio-controls .time-controls {
 293   margin-left: 10px;
 294   margin-right: 9px;
 295 }
 296
 297 .audio-controls .time-controls .time {
 298   margin-left: 11px;
 299 }
 300
 301 .media-button.previous {
 302   margin-left: -2px;
 303 }
 304
 305 .media-button.previous > .normal {
 306   background-image: -webkit-image-set(
 307     url('../images/media/media_previous.png') 1x,
 308     url('../images/media/2x/media_previous.png') 2x);
 309 }
 310
 311 .media-button.previous > .hover {
 312   background-image: -webkit-image-set(
 313     url('../images/media/media_previous_hover.png') 1x,
 314     url('../images/media/2x/media_previous_hover.png') 2x);
 315 }
 316
 317 .media-button.previous > .active {
 318   background-image: -webkit-image-set(
 319     url('../images/media/media_previous_down.png') 1x,
 320     url('../images/media/2x/media_previous_down.png') 2x);
 321 }
 322
 323 .media-button.next {
 324   margin-right: -2px;
 325 }
 326
 327 .media-button.next > .normal {
 328   background-image: -webkit-image-set(
 329     url('../images/media/media_next.png') 1x,
 330     url('../images/media/2x/media_next.png') 2x);
 331 }
 332
 333 .media-button.next > .hover {
 334   background-image: -webkit-image-set(
 335     url('../images/media/media_next_hover.png') 1x,
 336     url('../images/media/2x/media_next_hover.png') 2x);
 337 }
 338
 339 .media-button.next > .active {
 340   background-image: -webkit-image-set(
 341     url('../images/media/media_next_down.png') 1x,
 342     url('../images/media/2x/media_next_down.png') 2x);
 343 }
 344
 345 .single-track .media-button.next,
 346 .single-track .media-button.previous {
 347   display: none;
 348 }
 349
 350 /* Customized scrollbar for the playlist. */
 351
 352 ::-webkit-scrollbar {
 353   height: 16px;
 354   width: 16px;
 355 }
 356
 357 ::-webkit-scrollbar-button {
 358   height: 0;
 359   width: 0;
 360 }
 361
 362 ::-webkit-scrollbar-thumb {
 363   background-clip: padding-box;
 364   background-color: rgba(255, 255, 255, 0.15);
 365   box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),
 366               inset 0 -1px 0  rgba(0, 0, 0, 0.07);
 367   min-height: 28px;
 368   padding-top: 100px;
 369 }
 370
 371 ::-webkit-scrollbar-thumb:hover {
 372   background-color: rgba(255,255,255,0.20);
 373   box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
 374 }
 375
 376 ::-webkit-scrollbar-thumb:active {
 377   background-color: rgba(255, 255, 255, 0.25);
 378   box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
 379 }
 380
 381 ::-webkit-scrollbar-thumb:vertical {
 382   border-bottom: 0 solid transparent;
 383   border-left: 5px solid transparent;
 384   border-right: 0 solid transparent;
 385   border-top: 0 solid transparent;
 386 }
 387
 388 ::-webkit-scrollbar-track:hover {
 389   background-color: rgba(0, 0, 0, 0.05);
 390   box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10);
 391 }
 392
 393 ::-webkit-scrollbar-track:active {
 394   background-color: rgba(0, 0, 0, 0.05);
 395   box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
 396               inset -1px -1px 0 rgba(0, 0, 0, 0.07);
 397 }
 398
 399 ::-webkit-scrollbar-track:vertical {
 400   background-clip: padding-box;
 401   background-color: transparent;
 402   border-left: 5px solid transparent;
 403   border-right: 0 solid transparent;
 404 }