| 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 |