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