Index: ui/file_manager/audio_player/elements/track_list.css |
diff --git a/ui/file_manager/audio_player/elements/track_list.css b/ui/file_manager/audio_player/elements/track_list.css |
index 1b3f3d55c4e4d3d1f2250b3d04a38a2c2ff2c455..a2f31a29a061606a3c91f251ac529e6c3d22ec6a 100644 |
--- a/ui/file_manager/audio_player/elements/track_list.css |
+++ b/ui/file_manager/audio_player/elements/track_list.css |
@@ -4,9 +4,9 @@ |
:host { |
align-items: center; |
- background: #f5f5f5; |
+ background: rgb(245, 245, 245); |
bottom: 72px; /* Room for the controls bar. */ |
- color: #3d3d3d; |
+ color: rgb(51, 51, 51); |
cursor: default; |
display: flex; |
flex-direction: column; |
@@ -26,9 +26,8 @@ |
display: flex; |
flex: 0 0 auto; |
flex-direction: row; |
- height: 44px; |
+ height: 48px; |
justify-content: flex-start; |
- padding-left: 20px; |
width: 100%; |
} |
@@ -36,9 +35,32 @@ |
display: none; |
} |
-/* In the expanded mode the selected track is highlighted. */ |
-.track[active] { |
- background-color: rgb(66, 129, 244); |
+:host([expanded]) > .track:hover { |
+ background-color: rgba(0, 0, 0, 0.08); |
+} |
+ |
+/* Track icon. */ |
+.track .icon { |
+ background-position: center; |
+ background-repeat: no-repeat; |
+ flex: none; |
+ height: 32px; |
+ margin: 8px; |
+ pointer-events: none; |
+ width: 32px; |
+} |
+ |
+.track:hover .icon { |
+ background-image: -webkit-image-set( |
+ url(../assets/100/playlist_play.png) 1x, |
+ url(../assets/200/playlist_play.png) 2x); |
+ pointer-events: auto; |
+} |
+ |
+.track[active] .icon { |
+ background-image: -webkit-image-set( |
+ url(../assets/100/playlist_now_playing.png) 1x, |
+ url(../assets/200/playlist_now_playing.png) 2x); |
} |
/* Track data. */ |
@@ -54,22 +76,18 @@ |
.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; |
+ color: rgb(51, 51, 51); |
+ font-size: 13px; |
+ font-weight: 500; |
} |
.track .data .data-artist { |
- color: #969696; |
-} |
- |
-.track[active] .data .data-title, |
-.track[active] .data .data-artist { |
- color: #fff; |
+ color: rgb(100, 100, 100); |
+ font-size: 12px; |
} |