Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(235)

Side by Side Diff: ui/file_manager/audio_player/elements/track_list.css

Issue 1458733003: Reland MD Audio Player. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: forcePlay -> forceToPlay Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 /* Copyright 2014 The Chromium Authors. All rights reserved. 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 2 * Use of this source code is governed by a BSD-style license that can be
3 * found in the LICENSE file. */ 3 * found in the LICENSE file. */
4 4
5 :host { 5 :host {
6 align-items: center; 6 align-items: center;
7 background: #f5f5f5; 7 background: rgb(245, 245, 245);
8 bottom: 72px; /* Room for the controls bar. */ 8 bottom: 72px; /* Room for the controls bar. */
9 color: #3d3d3d; 9 color: rgb(51, 51, 51);
10 cursor: default; 10 cursor: default;
11 display: flex; 11 display: flex;
12 flex-direction: column; 12 flex-direction: column;
13 font-size: 10pt; 13 font-size: 10pt;
14 justify-content: flex-start; 14 justify-content: flex-start;
15 left: 0; 15 left: 0;
16 overflow-x: hidden; 16 overflow-x: hidden;
17 overflow-y: auto; 17 overflow-y: auto;
18 position: absolute; 18 position: absolute;
19 right: 0; 19 right: 0;
20 top: 0; 20 top: 0;
21 } 21 }
22 22
23 /* Track item. */ 23 /* Track item. */
24 .track { 24 .track {
25 align-items: center; 25 align-items: center;
26 display: flex; 26 display: flex;
27 flex: 0 0 auto; 27 flex: 0 0 auto;
28 flex-direction: row; 28 flex-direction: row;
29 height: 44px; 29 height: 48px;
30 justify-content: flex-start; 30 justify-content: flex-start;
31 padding-left: 20px;
32 width: 100%; 31 width: 100%;
33 } 32 }
34 33
35 :host(:not([expanded])) > .track:not([active]) { 34 :host(:not([expanded])) > .track:not([active]) {
36 display: none; 35 display: none;
37 } 36 }
38 37
39 /* In the expanded mode the selected track is highlighted. */ 38 :host([expanded]) > .track:hover {
40 .track[active] { 39 background-color: rgba(0, 0, 0, 0.08);
41 background-color: rgb(66, 129, 244); 40 }
41
42 /* Track icon. */
43 .track .icon {
44 background-position: center;
45 background-repeat: no-repeat;
46 flex: none;
47 height: 32px;
48 margin: 8px;
49 pointer-events: none;
50 width: 32px;
51 }
52
53 .track:hover .icon {
54 background-image: -webkit-image-set(
55 url(../assets/100/playlist_play.png) 1x,
56 url(../assets/200/playlist_play.png) 2x);
57 pointer-events: auto;
58 }
59
60 .track[active] .icon {
61 background-image: -webkit-image-set(
62 url(../assets/100/playlist_now_playing.png) 1x,
63 url(../assets/200/playlist_now_playing.png) 2x);
42 } 64 }
43 65
44 /* Track data. */ 66 /* Track data. */
45 67
46 .track .data { 68 .track .data {
47 display: flex; 69 display: flex;
48 flex: 1 1 auto; 70 flex: 1 1 auto;
49 flex-direction: column; 71 flex-direction: column;
50 justify-content: center; 72 justify-content: center;
51 margin-left: 0; 73 margin-left: 0;
52 margin-right: 4px; 74 margin-right: 4px;
53 } 75 }
54 76
55 .track .data .data-title, 77 .track .data .data-title,
56 .track .data .data-artist { 78 .track .data .data-artist {
57 font-size: 12px;
58 overflow: hidden; 79 overflow: hidden;
59 text-overflow: ellipsis; 80 text-overflow: ellipsis;
60 white-space: nowrap; 81 white-space: nowrap;
61 } 82 }
62 83
63 .track .data .data-title { 84 .track .data .data-title {
64 color: #343434; 85 color: rgb(51, 51, 51);
65 font-weight: bold; 86 font-size: 13px;
87 font-weight: 500;
66 } 88 }
67 89
68 .track .data .data-artist { 90 .track .data .data-artist {
69 color: #969696; 91 color: rgb(100, 100, 100);
92 font-size: 12px;
70 } 93 }
71
72 .track[active] .data .data-title,
73 .track[active] .data .data-artist {
74 color: #fff;
75 }
OLDNEW
« no previous file with comments | « ui/file_manager/audio_player/elements/control_panel.js ('k') | ui/file_manager/audio_player/elements/track_list.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698