| /* Copyright 2016 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: rgb(245, 245, 245); |
| color: rgb(51, 51, 51); |
| cursor: default; |
| font-size: 10pt; |
| overflow: hidden; |
| } |
| |
| /* Track item. */ |
| .track { |
| align-items: center; |
| background-color: rgba(255, 255, 255, 1.0); |
| display: flex; |
| height: 48px; |
| justify-content: space-between; |
| width: 100%; |
| } |
| |
| :host([expanded]) .track { |
| background-color: rgba(255, 255, 255, 0.9); |
| bottom: 0px; |
| position: absolute; |
| } |
| |
| /* artwork icon(expanded) */ |
| .track .icon-wrapper { |
| flex: none; |
| height: 48px; |
| width: 48px; |
| } |
| |
| :host([expanded]) .icon { |
| visibility: hidden; |
| } |
| |
| :host(:not([expanded])) .icon { |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: contain; |
| height: 48px; |
| pointer-events: none; |
| position: absolute; |
| width: 48px; |
| } |
| |
| /* artwork icon(expanded) */ |
| |
| .track-wrapper { |
| background-color: rgb(32, 32, 34); |
| position: relative; |
| } |
| |
| :host(:not([artwork-available])[expanded]) .track-wrapper { |
| height: 320px; |
| position: relative; |
| width: 100%; |
| } |
| |
| .icon-expanded { |
| background-size: 0 0; |
| } |
| |
| :host(:not([expanded])) .icon-unavailable-expanded { |
| background-size: 0 0; |
| } |
| |
| :host(:not([artwork-available])[expanded]) .icon-unavailable-expanded { |
| background-image: -webkit-image-set( |
| url(../assets/100/player_no_artwork.png) 1x, |
| url(../assets/200/player_no_artwork.png) 2x); |
| background-position: center; |
| background-repeat: no-repeat; |
| height: calc(320px - 48px); |
| margin-left: auto; |
| margin-right: auto; |
| width: 320px; |
| } |
| |
| :host([artwork-available][expanded]) .icon-expanded { |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: contain; |
| height: 320px; |
| margin-left: auto; |
| margin-right: auto; |
| width: 320px; |
| } |
| |
| /* expand icon. */ |
| .track .expand { |
| background-position: center; |
| background-repeat: no-repeat; |
| flex: none; |
| height: 48px; |
| width: 48px; |
| } |
| |
| :host(:not([expanded])) .track .expand { |
| background-image: -webkit-image-set( |
| url(../assets/100/player_cover_open.png) 1x, |
| url(../assets/200/player_cover_open.png) 2x); |
| } |
| |
| :host([expanded]) .track .expand { |
| background-image: -webkit-image-set( |
| url(../assets/100/player_cover_close.png) 1x, |
| url(../assets/200/player_cover_close.png) 2x); |
| } |
| |
| /* Track data. */ |
| |
| .track .data { |
| display: flex; |
| flex-direction: column; |
| justify-content: space-around; |
| min-width: 0; |
| } |
| |
| .track .data .data-title, |
| .track .data .data-artist { |
| flex: auto; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| text-align: center; |
| white-space: nowrap; |
| } |
| |
| .track .data .data-title { |
| color: rgb(51, 51, 51); |
| font-size: 13px; |
| font-weight: 500; |
| } |
| |
| .track .data .data-artist { |
| color: rgb(100, 100, 100); |
| font-size: 12px; |
| } |