OLD | NEW |
| (Empty) |
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 | |
3 * found in the LICENSE file. */ | |
4 | |
5 /* Controls bar. */ | |
6 .controls { | |
7 align-items: center; | |
8 background-color: #fff; | |
9 display: flex; | |
10 flex-direction: column; | |
11 height: 64px; | |
12 justify-content: center; | |
13 padding: 0; | |
14 } | |
15 | |
16 .controls .upper-controls { | |
17 height: 32px; | |
18 width: 100% | |
19 } | |
20 | |
21 .controls .lower-controls { | |
22 height: 32px; | |
23 width: 100% | |
24 } | |
25 | |
26 .audio-controls { | |
27 align-items: center; | |
28 display: flex; | |
29 flex-direction: row; | |
30 justify-content: center; | |
31 padding: 0; | |
32 } | |
33 | |
34 /* Customized scrollbar for the playlist. */ | |
35 | |
36 .media-button { | |
37 background-color: #fff; | |
38 border: 0; | |
39 height: 32px; | |
40 outline: none; /* TODO(yoshiki): Show outline only on keyboard focus. */ | |
41 padding: 0; | |
42 position: relative; | |
43 width: 32px; | |
44 } | |
45 | |
46 .media-button:active { | |
47 background-image: -webkit-image-set( | |
48 url('../assets/100/player_button_pressed.png') 1x, | |
49 url('../assets/200/player_button_pressed.png') 2x); | |
50 } | |
51 | |
52 .media-button > div, | |
53 .media-button.toggle > label > span { | |
54 display: inline-block; | |
55 height: 100%; | |
56 pointer-events: none; | |
57 transition: opacity 100ms linear; | |
58 width: 100%; | |
59 } | |
60 | |
61 .media-button > div { | |
62 left: 0; | |
63 opacity: 0; | |
64 position: absolute; | |
65 top: 0; | |
66 } | |
67 | |
68 .media-button[state='default']:not(.disabled) > .default, | |
69 .media-button[state='ended']:not(.disabled) > .ended, | |
70 .media-button[state='playing']:not(.disabled) > .playing, | |
71 .media-button.disabled > .disabled { | |
72 opacity: 1; | |
73 } | |
74 | |
75 /* Custom sliders for progress and volume. */ | |
76 | |
77 /* Customize the standard input[type='range']. */ | |
78 | |
79 /* Time controls: a slider and a text time display. */ | |
80 | |
81 .time-controls { | |
82 align-items: center; | |
83 display: flex; | |
84 flex-direction: row; | |
85 height: 100%; | |
86 justify-content: center; | |
87 } | |
88 | |
89 .custom-slider.progress { | |
90 display: flex; | |
91 flex: 1 1 auto; | |
92 height: 100%; | |
93 position: relative; | |
94 z-index: 0; /* Make a layer which includes the thumb on slider. */ | |
95 } | |
96 | |
97 .custom-slider.progress > input[type='range']::-webkit-slider-thumb { | |
98 background-image: -webkit-image-set( | |
99 url('../assets/100/player_timeline_handler.png') 1x, | |
100 url('../assets/200/player_timeline_handler.png') 2x); | |
101 width: 28px; | |
102 } | |
103 | |
104 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:hover { | |
105 background-image: -webkit-image-set( | |
106 url('../assets/100/player_timeline_handler.png') 1x, | |
107 url('../assets/200/player_timeline_handler.png') 2x); | |
108 } | |
109 | |
110 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:active { | |
111 background-image: -webkit-image-set( | |
112 url('../assets/100/player_timeline_handler_pressed.png') 1x, | |
113 url('../assets/200/player_timeline_handler_pressed.png') 2x); | |
114 } | |
115 | |
116 .custom-slider.progress.disabled > input[type='range']::-webkit-slider-thumb { | |
117 background-image: none; | |
118 } | |
119 | |
120 .time-controls > .time { | |
121 cursor: default; | |
122 height: 100%; | |
123 position: relative; | |
124 width: 53px; | |
125 } | |
126 | |
127 .time-controls > .time.disabled { | |
128 opacity: 0; | |
129 } | |
130 | |
131 .custom-slider > input[type='range'] { | |
132 -webkit-appearance: none !important; /* Hide the default thumb icon. */ | |
133 background: transparent; /* Hide the standard slider bar */ | |
134 height: 100%; | |
135 left: -2px; /* Required to align the input element with the parent. */ | |
136 outline: none; | |
137 position: absolute; | |
138 top: -2px; | |
139 width: 100%; | |
140 } | |
141 | |
142 /* Custom thumb icon. */ | |
143 .custom-slider > input[type='range']::-webkit-slider-thumb { | |
144 -webkit-appearance: none; | |
145 background-position: center center; | |
146 background-repeat: no-repeat; | |
147 height: 24px; | |
148 position: relative; | |
149 z-index: 2; | |
150 } | |
151 | |
152 /* Custom slider bar (we hide the standard one). */ | |
153 .custom-slider > .bar { | |
154 background-image: -webkit-image-set( | |
155 url('../assets/100/player_timeline_base_center.png') 1x, | |
156 url('../assets/200/player_timeline_base_center.png') 2x); | |
157 /* In order to match the horizontal position of the standard slider bar | |
158 left and right must be equal to 1/2 of the thumb icon width. */ | |
159 bottom: 15px; | |
160 left: 14px; /* Exactly 1/2 of the thumb width */ | |
161 pointer-events: none; /* Mouse events pass through to the standard input. */ | |
162 position: absolute; | |
163 right: 14px; | |
164 top: 15px; | |
165 } | |
166 | |
167 .custom-slider > .bar > .filled, | |
168 .custom-slider > .bar > .cap { | |
169 bottom: 0; | |
170 position: absolute; | |
171 top: 0; | |
172 } | |
173 | |
174 /* The filled portion of the slider bar to the left of the thumb. */ | |
175 .custom-slider > .bar > .filled { | |
176 background-image: -webkit-image-set( | |
177 url('../assets/100/player_timeline_played_center.png') 1x, | |
178 url('../assets/200/player_timeline_played_center.png') 2x); | |
179 border-left-style: none; | |
180 border-right-style: none; | |
181 left: 0; | |
182 width: 0; /* The element style.width is manipulated from the code. */ | |
183 } | |
184 | |
185 /* Rounded caps to the left and right of the slider bar. */ | |
186 .custom-slider > .bar > .cap { | |
187 width: 1px; | |
188 } | |
189 | |
190 /* Left cap is always filled, should be the same color as .filled. */ | |
191 .custom-slider > .bar > .cap.left { | |
192 background-image: -webkit-image-set( | |
193 url('../assets/100/player_timeline_played_left.png') 1x, | |
194 url('../assets/200/player_timeline_played_left.png') 2x); | |
195 right: 100%; | |
196 } | |
197 | |
198 /* Right cap is always not filled. */ | |
199 .custom-slider > .bar > .cap.right { | |
200 background-image: -webkit-image-set( | |
201 url('../assets/100/player_timeline_base_right.png') 1x, | |
202 url('../assets/200/player_timeline_base_right.png') 2x); | |
203 left: 100%; | |
204 } | |
205 | |
206 .media-button.disabled, | |
207 .custom-slider.disabled, | |
208 .custom-slider.readonly { | |
209 pointer-events: none; | |
210 } | |
211 | |
212 /* Progress seek marker (precise time shown on mouse hover. */ | |
213 | |
214 /* Thin vertical line across the slider bar */ | |
215 .custom-slider > .bar > .seek-mark { | |
216 background-color: #202020; | |
217 bottom: -1px; | |
218 left: 0; | |
219 position: absolute; | |
220 top: -1px; | |
221 width: 0; | |
222 } | |
223 | |
224 .custom-slider > .bar > .seek-mark.visible { | |
225 width: 1px; | |
226 } | |
227 | |
228 .custom-slider > .bar > .seek-mark.inverted { | |
229 background-color: #808080; | |
230 } | |
231 | |
232 /* Text label giving the precise time corresponding to the hover position. */ | |
233 .custom-slider > .bar > .seek-mark > .seek-label { | |
234 align-items: center; | |
235 background: #202020; | |
236 border-top-left-radius: 2px; | |
237 border-top-right-radius: 2px; | |
238 bottom: 19px; | |
239 color: white; | |
240 display: flex; | |
241 flex-direction: row; | |
242 font-size: 12px; | |
243 height: 15px; | |
244 justify-content: center; | |
245 left: 0; | |
246 opacity: 0; | |
247 overflow: hidden; | |
248 position: absolute; | |
249 transition: opacity 150ms ease; | |
250 } | |
251 | |
252 .custom-slider > .bar > .seek-mark.visible > .seek-label { | |
253 opacity: 1; | |
254 } | |
255 | |
256 /* Media controls in order of appearance. */ | |
257 | |
258 .audio-controls { | |
259 align-items: center; | |
260 display: flex; | |
261 flex-direction: row; | |
262 height: 100%; | |
263 justify-content: center; | |
264 } | |
265 | |
266 /* Play/pause button. */ | |
267 | |
268 .media-button.toggle input { | |
269 position: absolute; | |
270 visibility: hidden; | |
271 } | |
272 | |
273 .media-button.shuffle-mode { | |
274 margin-left: 5px; | |
275 margin-right: 5px; | |
276 } | |
277 | |
278 .media-button.shuffle-mode > label > .icon { | |
279 background-image: -webkit-image-set( | |
280 url('../assets/100/player_button_shuffle.png') 1x, | |
281 url('../assets/200/player_button_shuffle.png') 2x); | |
282 pointer-events: auto; | |
283 } | |
284 | |
285 .media-button.shuffle-mode > label > input:checked + .icon { | |
286 background-image: -webkit-image-set( | |
287 url('../assets/100/player_button_shuffle_active.png') 1x, | |
288 url('../assets/200/player_button_shuffle_active.png') 2x); | |
289 } | |
290 | |
291 .media-button.repeat { | |
292 margin-left: 5px; | |
293 margin-right: 0; | |
294 } | |
295 | |
296 .media-button.repeat > label > .icon { | |
297 background-image: -webkit-image-set( | |
298 url('../assets/100/player_button_repeat.png') 1x, | |
299 url('../assets/200/player_button_repeat.png') 2x); | |
300 pointer-events: auto; | |
301 } | |
302 | |
303 .media-button.repeat > label > input:checked + .icon { | |
304 background-image: -webkit-image-set( | |
305 url('../assets/100/player_button_repeat_active.png') 1x, | |
306 url('../assets/200/player_button_repeat_active.png') 2x); | |
307 } | |
308 | |
309 .media-button.play { | |
310 margin-left: 0; | |
311 margin-right: 0; | |
312 } | |
313 | |
314 .media-button.play > .ended { | |
315 background-image: -webkit-image-set( | |
316 url('../assets/100/player_button_play.png') 1x, | |
317 url('../assets/200/player_button_play.png') 2x); | |
318 } | |
319 | |
320 .media-button.play > .playing { | |
321 background-image: -webkit-image-set( | |
322 url('../assets/100/player_button_pause.png') 1x, | |
323 url('../assets/200/player_button_pause.png') 2x); | |
324 } | |
325 | |
326 .media-button.previous { | |
327 margin-left: 5px; | |
328 margin-right: 0; | |
329 } | |
330 | |
331 .media-button.previous > .normal { | |
332 background-image: -webkit-image-set( | |
333 url('../assets/100/player_button_previous.png') 1x, | |
334 url('../assets/200/player_button_previous.png') 2x); | |
335 } | |
336 | |
337 .media-button.next { | |
338 margin-left: 0; | |
339 margin-right: 5px; | |
340 } | |
341 | |
342 .media-button.next > .normal { | |
343 background-image: -webkit-image-set( | |
344 url('../assets/100/player_button_next.png') 1x, | |
345 url('../assets/200/player_button_next.png') 2x); | |
346 } | |
347 | |
348 .media-button.volume { | |
349 margin-left: 5px; | |
350 margin-right: 5px; | |
351 } | |
352 | |
353 .media-button.volume > .normal { | |
354 background-image: -webkit-image-set( | |
355 url('../assets/100/player_button_volume.png') 1x, | |
356 url('../assets/200/player_button_volume.png') 2x); | |
357 } | |
358 | |
359 .media-button.volume > label > .icon { | |
360 background-image: -webkit-image-set( | |
361 url('../assets/100/player_button_volume.png') 1x, | |
362 url('../assets/200/player_button_volume.png') 2x); | |
363 pointer-events: auto; | |
364 } | |
365 | |
366 .media-button.volume > label > input:checked + .icon { | |
367 background-image: -webkit-image-set( | |
368 url('../assets/100/player_button_volume_active.png') 1x, | |
369 url('../assets/200/player_button_volume_active.png') 2x); | |
370 } | |
371 | |
372 .media-button.playlist { | |
373 margin-left: 5px; | |
374 margin-right: 5px; | |
375 } | |
376 | |
377 .media-button.playlist > label > .icon { | |
378 background-image: -webkit-image-set( | |
379 url('../assets/100/player_button_playlist.png') 1x, | |
380 url('../assets/200/player_button_playlist.png') 2x); | |
381 pointer-events: auto; | |
382 } | |
383 | |
384 .media-button.playlist > label > input:checked + .icon { | |
385 background-image: -webkit-image-set( | |
386 url('../assets/100/player_button_playlist_active.png') 1x, | |
387 url('../assets/200/player_button_playlist_active.png') 2x); | |
388 } | |
389 | |
390 | |
391 /* Invisible div used to compute the width required for the elapsed time. */ | |
392 .time-controls > .time > .duration, | |
393 .time-controls > .time > .current { | |
394 align-items: center; | |
395 color: #3d3d3d; | |
396 display: flex; | |
397 flex-direction: row; | |
398 font-size: 12px; | |
399 height: 100%; | |
400 justify-content: flex-end; | |
401 position: absolute; | |
402 top: -1px; | |
403 } | |
404 | |
405 .time-controls > .time > .duration { | |
406 left: 0; | |
407 } | |
408 | |
409 .time-controls > .time > .current { | |
410 right: 0; | |
411 } | |
412 | |
413 /* Volume controls: sound button and volume slider */ | |
414 | |
415 #volumeContainer { | |
416 border: 1px solid #ddd; | |
417 border-radius: 2px; | |
418 box-shadow: 0 2px 4px #777; | |
419 height: 110px; | |
420 position: fixed; | |
421 width: 32px; | |
422 } | |
423 | |
424 #volumeContainer.default-hidden { | |
425 visibility: hidden; | |
426 } | |
OLD | NEW |