Index: ui/file_manager/audio_player/elements/control_panel.css |
diff --git a/ui/file_manager/audio_player/elements/control_panel.css b/ui/file_manager/audio_player/elements/control_panel.css |
index fd9a4a431e4f57b36eb6883ad2a08ac01a859f39..c4b60757f7978f86b9e1ffb1a8ea0daf71119252 100644 |
--- a/ui/file_manager/audio_player/elements/control_panel.css |
+++ b/ui/file_manager/audio_player/elements/control_panel.css |
@@ -34,6 +34,7 @@ |
.media-button { |
background-color: transparent; |
border: 0; |
+ flex: none; |
height: 32px; |
outline: none; /* TODO(yoshiki): Show outline only on keyboard focus. */ |
padding: 0; |
@@ -59,13 +60,9 @@ |
top: 0; |
} |
-/* Custom sliders for progress and volume. */ |
- |
-/* Customize the standard input[type='range']. */ |
+/* Time and volume controls. */ |
-/* Time controls: a slider and a text time display. */ |
- |
-.time-controls { |
+.time-volume-controls { |
align-items: center; |
display: flex; |
flex-direction: row; |
@@ -73,7 +70,7 @@ |
justify-content: center; |
} |
-.time-controls > .time-container { |
+.time-volume-controls > .time-container { |
color: rgb(51, 51, 51); |
cursor: default; |
flex: none; |
@@ -96,12 +93,22 @@ |
opacity: 0; /* This class is intended to be used as invisible spacer. */ |
} |
-.time-controls > paper-slider { |
+.time-volume-controls > paper-slider { |
--paper-slider-active-color: rgb(66, 133, 244); |
--paper-slider-knob-color: rgb(64, 138, 241); |
flex: auto; |
} |
+#timeSlider { |
+ flex: 3 1 auto; |
+ width: 118px; |
+} |
+ |
+#volumeSlider { |
+ flex: 1 1 auto; |
+ width: 82px; |
+} |
+ |
.media-button.disabled, |
paper-slider.disabled { |
pointer-events: none; |
@@ -176,20 +183,24 @@ paper-slider.disabled { |
margin-right: 8px; |
} |
+.media-button.playlist { |
+ background-image: -webkit-image-set( |
+ url(../assets/100/player_button_playlist.png) 1x, |
+ url(../assets/200/player_button_playlist.png) 2x); |
+ pointer-events: auto; |
+} |
+ |
.media-button.volume { |
background-image: -webkit-image-set( |
url(../assets/100/player_button_volume.png) 1x, |
url(../assets/200/player_button_volume.png) 2x); |
- margin-left: 0; |
- margin-right: 8px; |
pointer-events: auto; |
} |
-.media-button.playlist { |
+:host([volume='0']) .media-button.volume { |
background-image: -webkit-image-set( |
- url(../assets/100/player_button_playlist.png) 1x, |
- url(../assets/200/player_button_playlist.png) 2x); |
- pointer-events: auto; |
+ url(../assets/100/player_button_volume_muted.png) 1x, |
+ url(../assets/200/player_button_volume_muted.png) 2x); |
} |
/* Invisible div used to compute the width required for the elapsed time. */ |
@@ -202,18 +213,3 @@ paper-slider.disabled { |
position: absolute; |
top: -1px; |
} |
- |
-/* Volume controls: sound button and volume slider */ |
- |
-#volumeContainer { |
- border: 1px solid #ddd; |
- border-radius: 2px; |
- box-shadow: 0 2px 4px #777; |
- height: 110px; |
- position: fixed; |
- width: 32px; |
-} |
- |
-#volumeContainer.default-hidden { |
- visibility: hidden; |
-} |