blob: b4700f47559fbc04447f976ae710f83a95a0df0b [file] [log] [blame]
/* Copyright 2014 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
:host {
align-items: center;
background: #f5f5f5;
bottom: 72px; /* Room for the controls bar. */
color: #3d3d3d;
cursor: default;
display: flex;
flex-direction: column;
font-family: Noto Sans UI, sans-serif;
font-size: 10pt;
justify-content: flex-start;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
}
/* Track item. */
.track {
align-items: center;
display: flex;
flex: 0 0 auto;
flex-direction: row;
height: 44px;
justify-content: flex-start;
padding-left: 20px;
width: 100%;
}
:host(:not([expanded]):host) > .track:not([active]) {
display: none;
}
/* In the expanded mode the selected track is highlighted. */
.track[active] {
background-color: rgb(66, 129, 244);
}
/* Track data. */
.track .data {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
margin-left: 0;
margin-right: 4px;
}
.track .data .data-title,
.track .data .data-artist {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.track .data .data-title {
color: #343434;
font-weight: bold;
}
.track .data .data-artist {
color: #969696;
}
.track[active] .data .data-title,
.track[active] .data .data-artist {
color: #fff;
}