| OLD | NEW |
| (Empty) |
| 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 | |
| 3 * found in the LICENSE file. */ | |
| 4 | |
| 5 .media-button { | |
| 6 height: 28px; | |
| 7 position: relative; | |
| 8 width: 26px; | |
| 9 } | |
| 10 | |
| 11 .media-button > div { | |
| 12 height: 100%; | |
| 13 opacity: 0; | |
| 14 pointer-events: none; | |
| 15 position: absolute; | |
| 16 transition: opacity 100ms linear; | |
| 17 width: 100%; | |
| 18 } | |
| 19 | |
| 20 .media-button[state='default']:not(.disabled):not(:hover):not(:active) > | |
| 21 .default.normal, | |
| 22 .media-button[state='default']:not(.disabled):hover > .default.hover, | |
| 23 .media-button[state='default']:not(.disabled):active > .default.active, | |
| 24 .media-button[state='playing']:not(.disabled):not(:hover):not(: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, | |
| 32 .media-button.disabled > .disabled { | |
| 33 opacity: 1; | |
| 34 } | |
| 35 | |
| 36 /* Custom sliders for progress and volume. */ | |
| 37 | |
| 38 /* Customize the standard input[type='range']. */ | |
| 39 .custom-slider > input[type='range'] { | |
| 40 -webkit-appearance: none !important; /* Hide the default thumb icon. */ | |
| 41 background: transparent; /* Hide the standard slider bar */ | |
| 42 height: 100%; | |
| 43 left: -2px; /* Required to align the input element with the parent. */ | |
| 44 outline: none; | |
| 45 position: absolute; | |
| 46 top: -2px; | |
| 47 width: 100%; | |
| 48 } | |
| 49 | |
| 50 /* Custom thumb icon. */ | |
| 51 .custom-slider > input[type='range']::-webkit-slider-thumb { | |
| 52 -webkit-appearance: none; | |
| 53 background-position: center center; | |
| 54 background-repeat: no-repeat; | |
| 55 height: 24px; | |
| 56 position: relative; | |
| 57 z-index: 2; | |
| 58 } | |
| 59 | |
| 60 /* Custom slider bar (we hide the standard one). */ | |
| 61 .custom-slider > .bar { | |
| 62 /* In order to match the horizontal position of the standard slider bar | |
| 63 left and right must be equal to 1/2 of the thumb icon width. */ | |
| 64 border-bottom-style: solid; | |
| 65 border-top-style: solid; | |
| 66 border-width: 1px; | |
| 67 bottom: 11px; | |
| 68 pointer-events: none; /* Mouse events pass through to the standard input. */ | |
| 69 position: absolute; | |
| 70 top: 11px; | |
| 71 } | |
| 72 | |
| 73 .custom-slider > .bar > .filled, | |
| 74 .custom-slider > .bar > .cap { | |
| 75 border-style: solid; | |
| 76 border-width: 1px; | |
| 77 bottom: -1px; | |
| 78 position: absolute; | |
| 79 top: -1px; | |
| 80 } | |
| 81 | |
| 82 /* The filled portion of the slider bar to the left of the thumb. */ | |
| 83 .custom-slider > .bar > .filled { | |
| 84 border-left-style: none; | |
| 85 border-right-style: none; | |
| 86 left: 0; | |
| 87 width: 0; /* The element style.width is manipulated from the code. */ | |
| 88 } | |
| 89 | |
| 90 /* Rounded caps to the left and right of the slider bar. */ | |
| 91 .custom-slider > .bar > .cap { | |
| 92 width: 4px; | |
| 93 } | |
| 94 | |
| 95 /* Left cap is always filled, should be the same color as .filled. */ | |
| 96 .custom-slider > .bar > .cap.left { | |
| 97 border-bottom-left-radius: 4px; | |
| 98 border-right-style: none; | |
| 99 border-top-left-radius: 4px; | |
| 100 right: 100%; | |
| 101 } | |
| 102 | |
| 103 /* Right cap is always not filled. */ | |
| 104 .custom-slider > .bar > .cap.right { | |
| 105 border-bottom-right-radius: 4px; | |
| 106 border-left-style: none; | |
| 107 border-top-right-radius: 4px; | |
| 108 left: 100%; | |
| 109 } | |
| 110 | |
| 111 .custom-slider > .bar, | |
| 112 .custom-slider > .bar > .cap.right { | |
| 113 background-color: rgba(0, 0, 0, 0.5); | |
| 114 border-color: #808080; | |
| 115 } | |
| 116 | |
| 117 .custom-slider > .bar > .filled, | |
| 118 .custom-slider > .bar > .cap.left { | |
| 119 background-image: linear-gradient(#c3c3c3, #d9d9d9); | |
| 120 border-color: #d9d9d9; | |
| 121 } | |
| 122 | |
| 123 .custom-slider.disabled > .bar > .filled, | |
| 124 .custom-slider.disabled > .bar > .cap.left { | |
| 125 background-color: rgba(0, 0, 0, 0.5); | |
| 126 background-image: none; | |
| 127 } | |
| 128 | |
| 129 .custom-slider.disabled > .bar, | |
| 130 .custom-slider.disabled > .bar > .filled, | |
| 131 .custom-slider.disabled > .bar > .cap { | |
| 132 border-color: #404040; | |
| 133 } | |
| 134 | |
| 135 .media-button.disabled, | |
| 136 .custom-slider.disabled, | |
| 137 .custom-slider.readonly { | |
| 138 pointer-events: none; | |
| 139 } | |
| 140 | |
| 141 /* Progress seek marker (precise time shown on mouse hover. */ | |
| 142 | |
| 143 /* Thin vertical line across the slider bar */ | |
| 144 .custom-slider > .bar > .seek-mark { | |
| 145 background-color: #202020; | |
| 146 bottom: -1px; | |
| 147 left: 0; | |
| 148 position: absolute; | |
| 149 top: -1px; | |
| 150 width: 0; | |
| 151 } | |
| 152 | |
| 153 .custom-slider > .bar > .seek-mark.visible { | |
| 154 width: 1px; | |
| 155 } | |
| 156 | |
| 157 .custom-slider > .bar > .seek-mark.inverted { | |
| 158 background-color: #808080; | |
| 159 } | |
| 160 | |
| 161 /* Text label giving the precise time corresponding to the hover position. */ | |
| 162 .custom-slider > .bar > .seek-mark > .seek-label { | |
| 163 -webkit-box-align: center; | |
| 164 -webkit-box-orient: horizontal; | |
| 165 -webkit-box-pack: center; | |
| 166 background: #202020; | |
| 167 border-top-left-radius: 2px; | |
| 168 border-top-right-radius: 2px; | |
| 169 bottom: 19px; | |
| 170 color: white; | |
| 171 display: -webkit-box; | |
| 172 font-size: 13px; | |
| 173 height: 15px; | |
| 174 left: 0; | |
| 175 opacity: 0; | |
| 176 overflow: hidden; | |
| 177 position: absolute; | |
| 178 transition: opacity 150ms ease; | |
| 179 } | |
| 180 | |
| 181 .custom-slider > .bar > .seek-mark.visible > .seek-label { | |
| 182 opacity: 1; | |
| 183 } | |
| 184 | |
| 185 /* Media controls in order of appearance. */ | |
| 186 | |
| 187 /* Play/pause button. */ | |
| 188 | |
| 189 .media-button.play { | |
| 190 margin-left: -7px; | |
| 191 margin-right: -7px; | |
| 192 } | |
| 193 | |
| 194 .media-button.play > .default.normal { | |
| 195 background-image: -webkit-image-set( | |
| 196 url('../images/media/media_play.png') 1x, | |
| 197 url('../images/media/2x/media_play.png') 2x); | |
| 198 } | |
| 199 | |
| 200 .media-button.play > .default.hover { | |
| 201 background-image: -webkit-image-set( | |
| 202 url('../images/media/media_play_hover.png') 1x, | |
| 203 url('../images/media/2x/media_play_hover.png') 2x); | |
| 204 } | |
| 205 | |
| 206 .media-button.play > .default.active { | |
| 207 background-image: -webkit-image-set( | |
| 208 url('../images/media/media_play_down.png') 1x, | |
| 209 url('../images/media/2x/media_play_down.png') 2x); | |
| 210 } | |
| 211 | |
| 212 .media-button.play > .playing.normal { | |
| 213 background-image: -webkit-image-set( | |
| 214 url('../images/media/media_pause.png') 1x, | |
| 215 url('../images/media/2x/media_pause.png') 2x); | |
| 216 } | |
| 217 | |
| 218 .media-button.play > .playing.hover { | |
| 219 background-image: -webkit-image-set( | |
| 220 url('../images/media/media_pause_hover.png') 1x, | |
| 221 url('../images/media/2x/media_pause_hover.png') 2x); | |
| 222 } | |
| 223 | |
| 224 .media-button.play > .playing.active { | |
| 225 background-image: -webkit-image-set( | |
| 226 url('../images/media/media_pause_down.png') 1x, | |
| 227 url('../images/media/2x/media_pause_down.png') 2x); | |
| 228 } | |
| 229 | |
| 230 .media-button.play > .ended.normal { | |
| 231 background-image: -webkit-image-set( | |
| 232 url('../images/media/media_loop.png') 1x, | |
| 233 url('../images/media/2x/media_loop.png') 2x); | |
| 234 } | |
| 235 | |
| 236 .media-button.play > .ended.hover { | |
| 237 background-image: -webkit-image-set( | |
| 238 url('../images/media/media_loop_hover.png') 1x, | |
| 239 url('../images/media/2x/media_loop_hover.png') 2x); | |
| 240 } | |
| 241 | |
| 242 .media-button.play > .ended.active { | |
| 243 background-image: -webkit-image-set( | |
| 244 url('../images/media/media_loop_down.png') 1x, | |
| 245 url('../images/media/2x/media_loop_down.png') 2x); | |
| 246 } | |
| 247 | |
| 248 .media-button.play > .disabled { | |
| 249 background-image: -webkit-image-set( | |
| 250 url('../images/media/media_play_disabled.png') 1x, | |
| 251 url('../images/media/2x/media_play_disabled.png') 2x); | |
| 252 } | |
| 253 | |
| 254 /* Time controls: a slider and a text time display. */ | |
| 255 | |
| 256 .time-controls { | |
| 257 -webkit-box-align: center; | |
| 258 -webkit-box-flex: 1; | |
| 259 -webkit-box-orient: horizontal; | |
| 260 -webkit-box-pack: center; | |
| 261 display: -webkit-box; | |
| 262 height: 100%; | |
| 263 } | |
| 264 | |
| 265 .custom-slider.progress { | |
| 266 -webkit-box-flex: 1; | |
| 267 display: -webkit-box; | |
| 268 height: 100%; | |
| 269 margin-left: -9px; /* Set the margins at the edges of the slider bar. */ | |
| 270 margin-right: -9px; | |
| 271 position: relative; | |
| 272 } | |
| 273 | |
| 274 .custom-slider.progress > input[type='range']::-webkit-slider-thumb { | |
| 275 background-image: -webkit-image-set( | |
| 276 url('../images/media/media_slider_thumb.png') 1x, | |
| 277 url('../images/media/2x/media_slider_thumb.png') 2x); | |
| 278 width: 28px; | |
| 279 } | |
| 280 | |
| 281 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:hover { | |
| 282 background-image: -webkit-image-set( | |
| 283 url('../images/media/media_slider_thumb_hover.png') 1x, | |
| 284 url('../images/media/2x/media_slider_thumb_hover.png') 2x); | |
| 285 } | |
| 286 | |
| 287 .custom-slider.progress > input[type='range']::-webkit-slider-thumb:active { | |
| 288 background-image: -webkit-image-set( | |
| 289 url('../images/media/media_slider_thumb_down.png') 1x, | |
| 290 url('../images/media/2x/media_slider_thumb_down.png') 2x); | |
| 291 } | |
| 292 | |
| 293 .custom-slider.progress.disabled > input[type='range']::-webkit-slider-thumb { | |
| 294 background-image: none; | |
| 295 } | |
| 296 | |
| 297 .custom-slider.progress > .bar { | |
| 298 left: 14px; /* Exactly 1/2 of the thumb width */ | |
| 299 right: 14px; | |
| 300 } | |
| 301 | |
| 302 /* Time display. */ | |
| 303 | |
| 304 .time-controls > .time { | |
| 305 cursor: default; | |
| 306 height: 100%; | |
| 307 margin-left: 15px; | |
| 308 position: relative; | |
| 309 } | |
| 310 | |
| 311 .time-controls > .time.disabled { | |
| 312 opacity: 0; | |
| 313 } | |
| 314 | |
| 315 /* Invisible div used to compute the width required for the elapsed time. */ | |
| 316 .time-controls > .time > .duration { | |
| 317 color: transparent; | |
| 318 } | |
| 319 | |
| 320 .time-controls > .time > .current { | |
| 321 -webkit-box-align: center; | |
| 322 -webkit-box-orient: horizontal; | |
| 323 -webkit-box-pack: end; | |
| 324 color: white; | |
| 325 display: -webkit-box; | |
| 326 height: 100%; | |
| 327 position: absolute; | |
| 328 right: 0; | |
| 329 top: -1px; | |
| 330 } | |
| 331 | |
| 332 /* Volume controls: sound button and volume slider */ | |
| 333 | |
| 334 .volume-controls { | |
| 335 -webkit-box-align: center; | |
| 336 -webkit-box-orient: horizontal; | |
| 337 -webkit-box-pack: center; | |
| 338 display: -webkit-box; | |
| 339 height: 100%; | |
| 340 } | |
| 341 | |
| 342 /* Sound button */ | |
| 343 | |
| 344 .media-button.sound { | |
| 345 margin-left: -4px; | |
| 346 width: 31px; | |
| 347 } | |
| 348 | |
| 349 .media-button.sound[level='0'] > .normal { | |
| 350 background-image: -webkit-image-set( | |
| 351 url('../images/media/media_sound_disabled.png') 1x, | |
| 352 url('../images/media/2x/media_sound_disabled.png') 2x); | |
| 353 } | |
| 354 | |
| 355 .media-button.sound[level='0'] > .hover { | |
| 356 background-image: -webkit-image-set( | |
| 357 url('../images/media/media_sound_disabled_hover.png') 1x, | |
| 358 url('../images/media/2x/media_sound_disabled_hover.png') 2x); | |
| 359 } | |
| 360 | |
| 361 .media-button.sound[level='0'] > .active { | |
| 362 background-image: -webkit-image-set( | |
| 363 url('../images/media/media_sound_disabled_down.png') 1x, | |
| 364 url('../images/media/2x/media_sound_disabled_down.png') 2x); | |
| 365 } | |
| 366 | |
| 367 | |
| 368 .media-button.sound[level='1'] > .normal { | |
| 369 background-image: -webkit-image-set( | |
| 370 url('../images/media/media_sound_level1.png') 1x, | |
| 371 url('../images/media/2x/media_sound_level1.png') 2x); | |
| 372 } | |
| 373 | |
| 374 .media-button.sound[level='1'] > .hover { | |
| 375 background-image: -webkit-image-set( | |
| 376 url('../images/media/media_sound_level1_hover.png') 1x, | |
| 377 url('../images/media/2x/media_sound_level1_hover.png') 2x); | |
| 378 } | |
| 379 | |
| 380 .media-button.sound[level='1'] > .active { | |
| 381 background-image: -webkit-image-set( | |
| 382 url('../images/media/media_sound_level1_down.png') 1x, | |
| 383 url('../images/media/2x/media_sound_level1_down.png') 2x); | |
| 384 } | |
| 385 | |
| 386 | |
| 387 .media-button.sound[level='2'] > .normal { | |
| 388 background-image: -webkit-image-set( | |
| 389 url('../images/media/media_sound_level2.png') 1x, | |
| 390 url('../images/media/2x/media_sound_level2.png') 2x); | |
| 391 } | |
| 392 | |
| 393 .media-button.sound[level='2'] > .hover { | |
| 394 background-image: -webkit-image-set( | |
| 395 url('../images/media/media_sound_level2_hover.png') 1x, | |
| 396 url('../images/media/2x/media_sound_level2_hover.png') 2x); | |
| 397 } | |
| 398 | |
| 399 .media-button.sound[level='2'] > .active { | |
| 400 background-image: -webkit-image-set( | |
| 401 url('../images/media/media_sound_level2_down.png') 1x, | |
| 402 url('../images/media/2x/media_sound_level2_down.png') 2x); | |
| 403 } | |
| 404 | |
| 405 | |
| 406 .media-button.sound[level='3'] > .normal { | |
| 407 background-image: -webkit-image-set( | |
| 408 url('../images/media/media_sound_full.png') 1x, | |
| 409 url('../images/media/2x/media_sound_full.png') 2x); | |
| 410 } | |
| 411 | |
| 412 .media-button.sound[level='3'] > .hover { | |
| 413 background-image: -webkit-image-set( | |
| 414 url('../images/media/media_sound_full_hover.png') 1x, | |
| 415 url('../images/media/2x/media_sound_full_hover.png') 2x); | |
| 416 } | |
| 417 | |
| 418 .media-button.sound[level='3'] > .active { | |
| 419 background-image: -webkit-image-set( | |
| 420 url('../images/media/media_sound_full_down.png') 1x, | |
| 421 url('../images/media/2x/media_sound_full_down.png') 2x); | |
| 422 } | |
| 423 | |
| 424 | |
| 425 .media-button.sound > .disabled { | |
| 426 background-image: -webkit-image-set( | |
| 427 url('../images/media/media_sound_full_disabled.png') 1x, | |
| 428 url('../images/media/2x/media_sound_full_disabled.png') 2x); | |
| 429 } | |
| 430 | |
| 431 /* Volume slider. */ | |
| 432 | |
| 433 .custom-slider.volume { | |
| 434 height: 100%; | |
| 435 margin-left: -4px; | |
| 436 margin-right: -4px; | |
| 437 position: relative; | |
| 438 width: 60px; | |
| 439 } | |
| 440 | |
| 441 .custom-slider.volume > input[type='range']::-webkit-slider-thumb { | |
| 442 background-image: -webkit-image-set( | |
| 443 url('../images/media/media_volume_slider_thumb.png') 1x, | |
| 444 url('../images/media/2x/media_volume_slider_thumb.png') 2x); | |
| 445 width: 20px; | |
| 446 } | |
| 447 | |
| 448 .custom-slider.volume > input[type='range']::-webkit-slider-thumb:hover { | |
| 449 background-image: -webkit-image-set( | |
| 450 url('../images/media/media_volume_slider_thumb_hover.png') 1x, | |
| 451 url('../images/media/2x/media_volume_slider_thumb_hover.png') 2x); | |
| 452 } | |
| 453 | |
| 454 .custom-slider.volume > input[type='range']::-webkit-slider-thumb:active { | |
| 455 background-image: -webkit-image-set( | |
| 456 url('../images/media/media_volume_slider_thumb_down.png') 1x, | |
| 457 url('../images/media/2x/media_volume_slider_thumb_down.png') 2x); | |
| 458 } | |
| 459 | |
| 460 .custom-slider.volume.disabled > input[type='range']::-webkit-slider-thumb { | |
| 461 background-image: none; | |
| 462 } | |
| 463 | |
| 464 .custom-slider.volume > .bar { | |
| 465 left: 10px; /* Exactly 1/2 of the thumb width */ | |
| 466 right: 10px; | |
| 467 } | |
| 468 | |
| 469 /* Horizontal video control bar, all controls in a row. */ | |
| 470 | |
| 471 .video-controls { | |
| 472 -webkit-box-align: center; | |
| 473 -webkit-box-orient: horizontal; | |
| 474 -webkit-box-pack: center; | |
| 475 background: #202020; | |
| 476 border-radius: 5px; | |
| 477 display: -webkit-box; | |
| 478 font-size: 15px; | |
| 479 height: 30px; | |
| 480 opacity: 0.8; | |
| 481 padding-left: 15px; | |
| 482 padding-right: 15px; | |
| 483 pointer-events: auto; | |
| 484 } | |
| 485 | |
| 486 .video-controls .time-controls, | |
| 487 .video-controls .volume-controls { | |
| 488 margin-left: 15px; | |
| 489 } | |
| 490 | |
| 491 /* Fullscreen button. */ | |
| 492 /* There is no final decision whether we need a separate icon when toggled. */ | |
| 493 | |
| 494 .media-button.fullscreen { | |
| 495 margin-left: 9px; /* 15px visible margin - 6px whitespace in the icon. */ | |
| 496 margin-right: -6px; | |
| 497 } | |
| 498 | |
| 499 .media-button.fullscreen > .normal { | |
| 500 background-image: -webkit-image-set( | |
| 501 url('../images/media/media_fullscreen.png') 1x, | |
| 502 url('../images/media/2x/media_fullscreen.png') 2x); | |
| 503 } | |
| 504 | |
| 505 .media-button.fullscreen > .hover { | |
| 506 background-image: -webkit-image-set( | |
| 507 url('../images/media/media_fullscreen_hover.png') 1x, | |
| 508 url('../images/media/2x/media_fullscreen_hover.png') 2x); | |
| 509 } | |
| 510 | |
| 511 .media-button.fullscreen > .active { | |
| 512 background-image: -webkit-image-set( | |
| 513 url('../images/media/media_fullscreen_down.png') 1x, | |
| 514 url('../images/media/2x/media_fullscreen_down.png') 2x); | |
| 515 } | |
| 516 | |
| 517 .media-button.fullscreen > .disabled { | |
| 518 background-image: -webkit-image-set( | |
| 519 url('../images/media/media_fullscreen_disabled.png') 1x, | |
| 520 url('../images/media/2x/media_fullscreen_disabled.png') 2x); | |
| 521 } | |
| 522 | |
| 523 .playback-state-icon { | |
| 524 background-color: #202020; | |
| 525 background-position: center center; | |
| 526 background-repeat: no-repeat; | |
| 527 border-radius: 2.5px; | |
| 528 height: 32px; | |
| 529 left: 50%; | |
| 530 margin-left: -16px; | |
| 531 margin-top: -16px; | |
| 532 opacity: 0; | |
| 533 pointer-events: none; | |
| 534 position: absolute; | |
| 535 top: 50%; | |
| 536 width: 32px; | |
| 537 z-index: 2; | |
| 538 } | |
| 539 | |
| 540 .text-banner { | |
| 541 background-color: black; | |
| 542 border-radius: 10px; | |
| 543 color: white; | |
| 544 font-size: 18px; | |
| 545 left: 50%; | |
| 546 margin-left: -250px; | |
| 547 opacity: 0; | |
| 548 padding: 10px; | |
| 549 pointer-events: none; | |
| 550 position: absolute; | |
| 551 text-align: center; | |
| 552 text-shadow: 0 0 10px black; | |
| 553 top: 20%; | |
| 554 width: 500px; | |
| 555 z-index: 2; | |
| 556 } | |
| 557 | |
| 558 .text-banner[visible] { | |
| 559 -webkit-animation: text-banner-blowup 3000ms; | |
| 560 } | |
| 561 | |
| 562 .playback-state-icon[state] { | |
| 563 -webkit-animation: blowup 500ms; | |
| 564 } | |
| 565 | |
| 566 @-webkit-keyframes blowup { | |
| 567 from { | |
| 568 opacity: 1; | |
| 569 } | |
| 570 to { | |
| 571 -webkit-transform: scale(3); | |
| 572 opacity: 0; | |
| 573 } | |
| 574 } | |
| 575 | |
| 576 @-webkit-keyframes text-banner-blowup { | |
| 577 from { | |
| 578 -webkit-transform: scale(0.5); | |
| 579 opacity: 0; | |
| 580 } | |
| 581 20% { | |
| 582 -webkit-transform: scale(1); | |
| 583 opacity: 0.75; | |
| 584 } | |
| 585 80% { | |
| 586 -webkit-transform: scale(1); | |
| 587 opacity: 0.75; | |
| 588 } | |
| 589 to { | |
| 590 -webkit-transform: scale(3); | |
| 591 opacity: 0; | |
| 592 } | |
| 593 } | |
| 594 | |
| 595 .playback-state-icon[state='play'] { | |
| 596 background-image: -webkit-image-set( | |
| 597 url('../images/media/media_play.png') 1x, | |
| 598 url('../images/media/2x/media_play.png') 2x); | |
| 599 } | |
| 600 | |
| 601 .playback-state-icon[state='pause'] { | |
| 602 background-image: -webkit-image-set( | |
| 603 url('../images/media/media_pause.png') 1x, | |
| 604 url('../images/media/2x/media_pause.png') 2x); | |
| 605 } | |
| OLD | NEW |