ui/file_manager/audio_player/elements/track_list.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 :host {
   6   align-items: center;
   7   background: #f5f5f5;
   8   bottom: 72px;  /* Room for the controls bar. */
   9   color: #3d3d3d;
  10   cursor: default;
  11   display: flex;
  12   flex-direction: column;
  13   font-size: 10pt;
  14   justify-content: flex-start;
  15   left: 0;
  16   overflow-x: hidden;
  17   overflow-y: auto;
  18   position: absolute;
  19   right: 0;
  20   top: 0;
  21 }
  22
  23 /* Track item. */
  24 .track {
  25   align-items: center;
  26   display: flex;
  27   flex: 0 0 auto;
  28   flex-direction: row;
  29   height: 44px;
  30   justify-content: flex-start;
  31   padding-left: 20px;
  32   width: 100%;
  33 }
  34
  35 :host(:not([expanded]):host) > .track:not([active]) {
  36   display: none;
  37 }
  38
  39 /* In the expanded mode the selected track is highlighted. */
  40 .track[active] {
  41   background-color: rgb(66, 129, 244);
  42 }
  43
  44 /* Track data. */
  45
  46 .track .data {
  47   display: flex;
  48   flex: 1 1 auto;
  49   flex-direction: column;
  50   justify-content: center;
  51   margin-left: 0;
  52   margin-right: 4px;
  53 }
  54
  55 .track .data .data-title,
  56 .track .data .data-artist {
  57   font-size: 12px;
  58   overflow: hidden;
  59   text-overflow: ellipsis;
  60   white-space: nowrap;
  61 }
  62
  63 .track .data .data-title {
  64   color: #343434;
  65   font-weight: bold;
  66 }
  67
  68 .track .data .data-artist {
  69   color: #969696;
  70 }
  71
  72 .track[active] .data .data-title,
  73 .track[active] .data .data-artist {
  74   color: #fff;
  75 }