OLD | NEW |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 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 .media-button { | 5 .media-button { |
6 height: 28px; | 6 height: 28px; |
7 position: relative; | 7 position: relative; |
8 width: 26px; | 8 width: 26px; |
9 } | 9 } |
10 | 10 |
11 .media-button > div { | 11 .media-button > div { |
12 -webkit-transition: opacity 100ms linear; | 12 -webkit-transition: opacity 100ms linear; |
13 height: 100%; | 13 height: 100%; |
14 opacity: 0; | 14 opacity: 0; |
15 pointer-events: none; | 15 pointer-events: none; |
16 position: absolute; | 16 position: absolute; |
17 width: 100%; | 17 width: 100%; |
18 } | 18 } |
19 | 19 |
20 .media-button[state='0']:not(.disabled):not(:hover):not(:active) > .state0.norma
l, | 20 .media-button[state='default']:not(.disabled):not(:hover):not(:active) > |
21 .media-button[state='0']:not(.disabled):hover > .state0.hover, | 21 .default.normal, |
22 .media-button[state='0']:not(.disabled):active > .state0.active, | 22 .media-button[state='default']:not(.disabled):hover > .default.hover, |
23 .media-button[state='1']:not(.disabled):not(:hover):not(:active) > .state1.norma
l, | 23 .media-button[state='default']:not(.disabled):active > .default.active, |
24 .media-button[state='1']:not(.disabled):hover > .state1.hover, | 24 .media-button[state='playing']:not(.disabled):not(:hover):not(:active) > |
25 .media-button[state='1']:not(.disabled):active > .state1.active, | 25 .playing.normal, |
| 26 .media-button[state='playing']:not(.disabled):hover > .playing.hover, |
| 27 .media-button[state='playing']:not(.disabled):active > .playing.active, |
| 28 .media-button[state='ended']:not(.disabled):not(:hover):not(:active) > |
| 29 .ended.normal, |
| 30 .media-button[state='ended']:not(.disabled):hover > .ended.hover, |
| 31 .media-button[state='ended']:not(.disabled):active > .ended.active, |
26 .media-button.disabled > .disabled { | 32 .media-button.disabled > .disabled { |
27 opacity: 1; | 33 opacity: 1; |
28 } | 34 } |
29 | 35 |
30 /* Custom sliders for progress and volume. */ | 36 /* Custom sliders for progress and volume. */ |
31 | 37 |
32 /* Customize the standard input[type='range']. */ | 38 /* Customize the standard input[type='range']. */ |
33 .custom-slider > input[type='range'] { | 39 .custom-slider > input[type='range'] { |
34 -webkit-appearance: none !important; /* Hide the default thumb icon. */ | 40 -webkit-appearance: none !important; /* Hide the default thumb icon. */ |
35 background: transparent; /* Hide the standard slider bar */ | 41 background: transparent; /* Hide the standard slider bar */ |
(...skipping 141 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
177 | 183 |
178 /* Media controls in order of appearance. */ | 184 /* Media controls in order of appearance. */ |
179 | 185 |
180 /* Play/pause button. */ | 186 /* Play/pause button. */ |
181 | 187 |
182 .media-button.play { | 188 .media-button.play { |
183 margin-left: -7px; | 189 margin-left: -7px; |
184 margin-right: -7px; | 190 margin-right: -7px; |
185 } | 191 } |
186 | 192 |
187 .media-button.play > .state0.normal { | 193 .media-button.play > .default.normal { |
188 background-image: -webkit-image-set( | 194 background-image: -webkit-image-set( |
189 url('../images/media/media_play.png') 1x, | 195 url('../images/media/media_play.png') 1x, |
190 url('../images/media/2x/media_play.png') 2x); | 196 url('../images/media/2x/media_play.png') 2x); |
191 } | 197 } |
192 | 198 |
193 .media-button.play > .state0.hover { | 199 .media-button.play > .default.hover { |
194 background-image: -webkit-image-set( | 200 background-image: -webkit-image-set( |
195 url('../images/media/media_play_hover.png') 1x, | 201 url('../images/media/media_play_hover.png') 1x, |
196 url('../images/media/2x/media_play_hover.png') 2x); | 202 url('../images/media/2x/media_play_hover.png') 2x); |
197 } | 203 } |
198 | 204 |
199 .media-button.play > .state0.active { | 205 .media-button.play > .default.active { |
200 background-image: -webkit-image-set( | 206 background-image: -webkit-image-set( |
201 url('../images/media/media_play_down.png') 1x, | 207 url('../images/media/media_play_down.png') 1x, |
202 url('../images/media/2x/media_play_down.png') 2x); | 208 url('../images/media/2x/media_play_down.png') 2x); |
203 } | 209 } |
204 | 210 |
205 .media-button.play > .state1.normal { | 211 .media-button.play > .playing.normal { |
206 background-image: -webkit-image-set( | 212 background-image: -webkit-image-set( |
207 url('../images/media/media_pause.png') 1x, | 213 url('../images/media/media_pause.png') 1x, |
208 url('../images/media/2x/media_pause.png') 2x); | 214 url('../images/media/2x/media_pause.png') 2x); |
209 } | 215 } |
210 | 216 |
211 .media-button.play > .state1.hover { | 217 .media-button.play > .playing.hover { |
212 background-image: -webkit-image-set( | 218 background-image: -webkit-image-set( |
213 url('../images/media/media_pause_hover.png') 1x, | 219 url('../images/media/media_pause_hover.png') 1x, |
214 url('../images/media/2x/media_pause_hover.png') 2x); | 220 url('../images/media/2x/media_pause_hover.png') 2x); |
215 } | 221 } |
216 | 222 |
217 .media-button.play > .state1.active { | 223 .media-button.play > .playing.active { |
218 background-image: -webkit-image-set( | 224 background-image: -webkit-image-set( |
219 url('../images/media/media_pause_down.png') 1x, | 225 url('../images/media/media_pause_down.png') 1x, |
220 url('../images/media/2x/media_pause_down.png') 2x); | 226 url('../images/media/2x/media_pause_down.png') 2x); |
221 } | 227 } |
222 | 228 |
| 229 .media-button.play > .ended.normal { |
| 230 background-image: -webkit-image-set( |
| 231 url('../images/media/media_loop.png') 1x, |
| 232 url('../images/media/2x/media_loop.png') 2x); |
| 233 } |
| 234 |
| 235 .media-button.play > .ended.hover { |
| 236 background-image: -webkit-image-set( |
| 237 url('../images/media/media_loop_hover.png') 1x, |
| 238 url('../images/media/2x/media_loop_hover.png') 2x); |
| 239 } |
| 240 |
| 241 .media-button.play > .ended.active { |
| 242 background-image: -webkit-image-set( |
| 243 url('../images/media/media_loop_down.png') 1x, |
| 244 url('../images/media/2x/media_loop_down.png') 2x); |
| 245 } |
| 246 |
223 .media-button.play > .disabled { | 247 .media-button.play > .disabled { |
224 background-image: -webkit-image-set( | 248 background-image: -webkit-image-set( |
225 url('../images/media/media_play_disabled.png') 1x, | 249 url('../images/media/media_play_disabled.png') 1x, |
226 url('../images/media/2x/media_play_disabled.png') 2x); | 250 url('../images/media/2x/media_play_disabled.png') 2x); |
227 } | 251 } |
228 | 252 |
229 /* Time controls: a slider and a text time display. */ | 253 /* Time controls: a slider and a text time display. */ |
230 | 254 |
231 .time-controls { | 255 .time-controls { |
232 -webkit-box-align: center; | 256 -webkit-box-align: center; |
(...skipping 297 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
530 background-image: -webkit-image-set( | 554 background-image: -webkit-image-set( |
531 url('../images/media/media_play.png') 1x, | 555 url('../images/media/media_play.png') 1x, |
532 url('../images/media/2x/media_play.png') 2x); | 556 url('../images/media/2x/media_play.png') 2x); |
533 } | 557 } |
534 | 558 |
535 .playback-state-icon[state='pause'] { | 559 .playback-state-icon[state='pause'] { |
536 background-image: -webkit-image-set( | 560 background-image: -webkit-image-set( |
537 url('../images/media/media_pause.png') 1x, | 561 url('../images/media/media_pause.png') 1x, |
538 url('../images/media/2x/media_pause.png') 2x); | 562 url('../images/media/2x/media_pause.png') 2x); |
539 } | 563 } |
OLD | NEW |