OLD | NEW |
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 /* Controls bar. */ | 5 /* Controls bar. */ |
6 .controls { | 6 .controls { |
7 align-items: center; | 7 align-items: center; |
8 background-color: white; | 8 background-color: white; |
9 display: flex; | 9 display: flex; |
10 flex-direction: column; | 10 flex-direction: column; |
(...skipping 16 matching lines...) Expand all Loading... |
27 flex-direction: row; | 27 flex-direction: row; |
28 justify-content: center; | 28 justify-content: center; |
29 padding: 0; | 29 padding: 0; |
30 } | 30 } |
31 | 31 |
32 /* Customized scrollbar for the playlist. */ | 32 /* Customized scrollbar for the playlist. */ |
33 | 33 |
34 .media-button { | 34 .media-button { |
35 background-color: transparent; | 35 background-color: transparent; |
36 border: 0; | 36 border: 0; |
| 37 flex: none; |
37 height: 32px; | 38 height: 32px; |
38 outline: none; /* TODO(yoshiki): Show outline only on keyboard focus. */ | 39 outline: none; /* TODO(yoshiki): Show outline only on keyboard focus. */ |
39 padding: 0; | 40 padding: 0; |
40 position: relative; | 41 position: relative; |
41 width: 32px; | 42 width: 32px; |
42 } | 43 } |
43 | 44 |
44 .media-button > div, | 45 .media-button > div, |
45 .media-button.toggle > label > span { | 46 .media-button.toggle > label > span { |
46 background-position: center; | 47 background-position: center; |
47 background-repeat: no-repeat; | 48 background-repeat: no-repeat; |
48 display: inline-block; | 49 display: inline-block; |
49 height: 100%; | 50 height: 100%; |
50 pointer-events: none; | 51 pointer-events: none; |
51 transition: opacity 100ms linear; | 52 transition: opacity 100ms linear; |
52 width: 100%; | 53 width: 100%; |
53 } | 54 } |
54 | 55 |
55 .media-button > div { | 56 .media-button > div { |
56 left: 0; | 57 left: 0; |
57 opacity: 0; | 58 opacity: 0; |
58 position: absolute; | 59 position: absolute; |
59 top: 0; | 60 top: 0; |
60 } | 61 } |
61 | 62 |
62 /* Custom sliders for progress and volume. */ | 63 /* Time and volume controls. */ |
63 | 64 |
64 /* Customize the standard input[type='range']. */ | 65 .time-volume-controls { |
65 | |
66 /* Time controls: a slider and a text time display. */ | |
67 | |
68 .time-controls { | |
69 align-items: center; | 66 align-items: center; |
70 display: flex; | 67 display: flex; |
71 flex-direction: row; | 68 flex-direction: row; |
72 height: 100%; | 69 height: 100%; |
73 justify-content: center; | 70 justify-content: center; |
74 } | 71 } |
75 | 72 |
76 .time-controls > .time-container { | 73 .time-volume-controls > .time-container { |
77 color: rgb(51, 51, 51); | 74 color: rgb(51, 51, 51); |
78 cursor: default; | 75 cursor: default; |
79 flex: none; | 76 flex: none; |
80 font-size: 12px; | 77 font-size: 12px; |
81 padding: 8px; | 78 padding: 8px; |
82 position: relative; | 79 position: relative; |
83 } | 80 } |
84 | 81 |
85 .time-container > .time { | 82 .time-container > .time { |
86 position: absolute; | 83 position: absolute; |
87 right: 8px; /* Should be same as time-container's right padding. */ | 84 right: 8px; /* Should be same as time-container's right padding. */ |
88 top: 8px; /* Should be same as time-container's top padding. */ | 85 top: 8px; /* Should be same as time-container's top padding. */ |
89 } | 86 } |
90 | 87 |
91 .time-container > .time.disabled { | 88 .time-container > .time.disabled { |
92 opacity: 0; | 89 opacity: 0; |
93 } | 90 } |
94 | 91 |
95 .time-container > .time-spacer { | 92 .time-container > .time-spacer { |
96 opacity: 0; /* This class is intended to be used as invisible spacer. */ | 93 opacity: 0; /* This class is intended to be used as invisible spacer. */ |
97 } | 94 } |
98 | 95 |
99 .time-controls > paper-slider { | 96 .time-volume-controls > paper-slider { |
100 --paper-slider-active-color: rgb(66, 133, 244); | 97 --paper-slider-active-color: rgb(66, 133, 244); |
101 --paper-slider-knob-color: rgb(64, 138, 241); | 98 --paper-slider-knob-color: rgb(64, 138, 241); |
102 flex: auto; | 99 flex: auto; |
103 } | 100 } |
104 | 101 |
| 102 #timeSlider { |
| 103 flex: 3 1 auto; |
| 104 width: 118px; |
| 105 } |
| 106 |
| 107 #volumeSlider { |
| 108 flex: 1 1 auto; |
| 109 width: 82px; |
| 110 } |
| 111 |
105 .media-button.disabled, | 112 .media-button.disabled, |
106 paper-slider.disabled { | 113 paper-slider.disabled { |
107 pointer-events: none; | 114 pointer-events: none; |
108 } | 115 } |
109 | 116 |
110 /* Media controls in order of appearance. */ | 117 /* Media controls in order of appearance. */ |
111 | 118 |
112 .audio-controls { | 119 .audio-controls { |
113 align-items: center; | 120 align-items: center; |
114 display: flex; | 121 display: flex; |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
169 } | 176 } |
170 | 177 |
171 .media-button.next { | 178 .media-button.next { |
172 background-image: -webkit-image-set( | 179 background-image: -webkit-image-set( |
173 url(../assets/100/player_button_next.png) 1x, | 180 url(../assets/100/player_button_next.png) 1x, |
174 url(../assets/200/player_button_next.png) 2x); | 181 url(../assets/200/player_button_next.png) 2x); |
175 margin-left: 0; | 182 margin-left: 0; |
176 margin-right: 8px; | 183 margin-right: 8px; |
177 } | 184 } |
178 | 185 |
179 .media-button.volume { | |
180 background-image: -webkit-image-set( | |
181 url(../assets/100/player_button_volume.png) 1x, | |
182 url(../assets/200/player_button_volume.png) 2x); | |
183 margin-left: 0; | |
184 margin-right: 8px; | |
185 pointer-events: auto; | |
186 } | |
187 | |
188 .media-button.playlist { | 186 .media-button.playlist { |
189 background-image: -webkit-image-set( | 187 background-image: -webkit-image-set( |
190 url(../assets/100/player_button_playlist.png) 1x, | 188 url(../assets/100/player_button_playlist.png) 1x, |
191 url(../assets/200/player_button_playlist.png) 2x); | 189 url(../assets/200/player_button_playlist.png) 2x); |
192 pointer-events: auto; | 190 pointer-events: auto; |
193 } | 191 } |
194 | 192 |
| 193 .media-button.volume { |
| 194 background-image: -webkit-image-set( |
| 195 url(../assets/100/player_button_volume.png) 1x, |
| 196 url(../assets/200/player_button_volume.png) 2x); |
| 197 pointer-events: auto; |
| 198 } |
| 199 |
| 200 :host([volume='0']) .media-button.volume { |
| 201 background-image: -webkit-image-set( |
| 202 url(../assets/100/player_button_volume_muted.png) 1x, |
| 203 url(../assets/200/player_button_volume_muted.png) 2x); |
| 204 } |
| 205 |
195 /* Invisible div used to compute the width required for the elapsed time. */ | 206 /* Invisible div used to compute the width required for the elapsed time. */ |
196 .time-controls > .time > .current { | 207 .time-controls > .time > .current { |
197 align-items: center; | 208 align-items: center; |
198 display: flex; | 209 display: flex; |
199 flex-direction: row; | 210 flex-direction: row; |
200 height: 100%; | 211 height: 100%; |
201 justify-content: flex-end; | 212 justify-content: flex-end; |
202 position: absolute; | 213 position: absolute; |
203 top: -1px; | 214 top: -1px; |
204 } | 215 } |
205 | |
206 /* Volume controls: sound button and volume slider */ | |
207 | |
208 #volumeContainer { | |
209 border: 1px solid #ddd; | |
210 border-radius: 2px; | |
211 box-shadow: 0 2px 4px #777; | |
212 height: 110px; | |
213 position: fixed; | |
214 width: 32px; | |
215 } | |
216 | |
217 #volumeContainer.default-hidden { | |
218 visibility: hidden; | |
219 } | |
OLD | NEW |