Index: ui/file_manager/audio_player/elements/track_info_panel.css |
diff --git a/ui/file_manager/audio_player/elements/track_info_panel.css b/ui/file_manager/audio_player/elements/track_info_panel.css |
index 181acf0009c3ea2f7d11ddf47acf0a1b0d73f067..c091c3c812f4437f779c09e2883bfdb8fc35c4b5 100644 |
--- a/ui/file_manager/audio_player/elements/track_info_panel.css |
+++ b/ui/file_manager/audio_player/elements/track_info_panel.css |
@@ -7,7 +7,6 @@ |
background: rgb(245, 245, 245); |
color: rgb(51, 51, 51); |
cursor: default; |
- display: flex; |
fukino
2016/02/02 06:24:20
I think this shouldn't be removed. If it is block,
ryoh
2016/02/02 08:15:49
We no longer use flex. Just a block.
I removed fle
|
flex-direction: column; |
font-size: 10pt; |
justify-content: space-around; |
@@ -17,20 +16,30 @@ |
/* Track item. */ |
.track { |
align-items: center; |
+ background-color: rgba(255, 255, 255, 0.9); |
display: flex; |
height: 48px; |
justify-content: space-between; |
width: 100%; |
} |
-/* Track icon. */ |
+:host[expanded] .track { |
+ bottom: 0px; |
+ position: absolute; |
+} |
+ |
+/* artwork icon(expanded) */ |
.track .icon-wrapper { |
flex: none; |
height: 48px; |
width: 48px; |
} |
-.icon-wrapper .icon { |
+:host[expanded] .icon { |
+ visibility: hidden; |
+} |
+ |
+:host(:not([expanded])) .icon { |
background-position: center; |
background-repeat: no-repeat; |
background-size: contain; |
@@ -40,16 +49,43 @@ |
width: 48px; |
} |
-.icon-wrapper .icon-background { |
- background: -webkit-image-set( |
- url(../assets/100/playlist_now_playing.png) 1x, |
- url(../assets/200/playlist_now_playing.png) 2x) |
- center |
- no-repeat; |
- 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: 320px; |
fukino
2016/02/02 06:24:20
The width of audio player is not necessarily 320px
ryoh
2016/02/02 08:15:49
Done.
|
+} |
+ |
+.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, |
fukino
2016/02/02 06:24:20
As player_no_artwork.png is big, could you reduce
ryoh
2016/02/02 08:15:49
Done.
|
+ url(../assets/200/player_no_artwork.png) 2x); |
+ background-position: center; |
+ background-repeat: no-repeat; |
+ height: calc(320px - 48px); |
+ width: 320px; |
+} |
+ |
+:host[artwork-available][expanded] .icon-expanded { |
+ background-position: center; |
+ background-repeat: no-repeat; |
+ background-size: contain; |
+ height: 320px; |
+ width: 320px; |
} |
/* expand icon. */ |
@@ -61,20 +97,13 @@ |
width: 48px; |
} |
-:host(:not([available])) > .track .expand { |
- background-image: -webkit-image-set( |
- url(../assets/100/player_cover_open.png) 1x, |
- url(../assets/200/player_cover_open.png) 2x); |
- opacity: 0.1; |
-} |
- |
-:host([available]:not([expanded])) > .track .expand { |
+: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([available][expanded]) > .track .expand { |
+: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); |