| 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='0']:not(.disabled):not(:hover):not(:active) > |
| 21 .state0.normal, |
| 21 .media-button[state='0']:not(.disabled):hover > .state0.hover, | 22 .media-button[state='0']:not(.disabled):hover > .state0.hover, |
| 22 .media-button[state='0']:not(.disabled):active > .state0.active, | 23 .media-button[state='0']:not(.disabled):active > .state0.active, |
| 23 .media-button[state='1']:not(.disabled):not(:hover):not(:active) > .state1.norma
l, | 24 .media-button[state='1']:not(.disabled):not(:hover):not(:active) > |
| 25 .state1.normal, |
| 24 .media-button[state='1']:not(.disabled):hover > .state1.hover, | 26 .media-button[state='1']:not(.disabled):hover > .state1.hover, |
| 25 .media-button[state='1']:not(.disabled):active > .state1.active, | 27 .media-button[state='1']:not(.disabled):active > .state1.active, |
| 28 .media-button[state='2']:not(.disabled):not(:hover):not(:active) > |
| 29 .state2.normal, |
| 30 .media-button[state='2']:not(.disabled):hover > .state2.hover, |
| 31 .media-button[state='2']:not(.disabled):active > .state2.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 177 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 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 > .state1.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 > .state2.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 > .state2.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 > .state2.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 |