| 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 /* Common styles for media buttons. */ | 5 /* Common styles for media buttons. */ |
| 6 | 6 |
| 7 .media-button { | 7 .media-button { |
| 8 background-position: center; | 8 background-position: center; |
| 9 background-repeat: no-repeat; | 9 background-repeat: no-repeat; |
| 10 flex: none; | 10 flex: none; |
| 11 height: 32px; | 11 height: 32px; |
| 12 position: relative; | 12 position: relative; |
| 13 width: 32px; | 13 width: 32px; |
| 14 } | 14 } |
| 15 | 15 |
| 16 .media-button:hover { |
| 17 background-color: rgba(153, 153, 153, 0.2); |
| 18 } |
| 19 |
| 20 .media-button:active { |
| 21 background-color: rgba(153, 153, 153, 0.4); |
| 22 } |
| 23 |
| 16 .media-button.disabled { | 24 .media-button.disabled { |
| 17 background-color: transparent; | 25 background-color: transparent; |
| 18 opacity: 0.26; | 26 opacity: 0.26; |
| 19 } | 27 } |
| 20 | 28 |
| 21 .media-button.disabled, | 29 .media-button.disabled, |
| 22 paper-slider[disabled], | 30 paper-slider[disabled], |
| 23 paper-slider.readonly { | 31 paper-slider.readonly { |
| 24 pointer-events: none; | 32 pointer-events: none; |
| 25 } | 33 } |
| (...skipping 101 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 127 pointer-events: auto; | 135 pointer-events: auto; |
| 128 } | 136 } |
| 129 | 137 |
| 130 /* Cast button. */ | 138 /* Cast button. */ |
| 131 | 139 |
| 132 .media-button.cast { | 140 .media-button.cast { |
| 133 background-image: -webkit-image-set( | 141 background-image: -webkit-image-set( |
| 134 url(../images/media/media_chromecast.png) 1x, | 142 url(../images/media/media_chromecast.png) 1x, |
| 135 url(../images/media/2x/media_chromecast.png) 2x); | 143 url(../images/media/2x/media_chromecast.png) 2x); |
| 136 display: none; | 144 display: none; |
| 137 border-radius: 2px; | |
| 138 } | |
| 139 | |
| 140 /* Reset browser's button style. */ | |
| 141 .media-button.cast { | |
| 142 background-color: transparent; | |
| 143 border: none; | |
| 144 cursor: pointer; | |
| 145 outline: none; | |
| 146 } | 145 } |
| 147 | 146 |
| 148 #video-player[cast-available][castable] .media-button.cast { | 147 #video-player[cast-available][castable] .media-button.cast { |
| 149 display: block; | 148 display: block; |
| 150 } | 149 } |
| 151 | 150 |
| 152 #video-player[casting] .media-button.cast { | 151 #video-player[casting] .media-button.cast { |
| 153 background-image: -webkit-image-set( | 152 background-image: -webkit-image-set( |
| 154 url(../images/media/media_chromecast_casting.png) 1x, | 153 url(../images/media/media_chromecast_casting.png) 1x, |
| 155 url(../images/media/2x/media_chromecast_casting.png) 2x); | 154 url(../images/media/2x/media_chromecast_casting.png) 2x); |
| 156 } | 155 } |
| 157 | 156 |
| 158 .media-button.cast:focus:not(.using-mouse) { | |
| 159 box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5); | |
| 160 } | |
| 161 | |
| 162 /* Fullscreen button. */ | 157 /* Fullscreen button. */ |
| 163 /* There is no final decision whether we need a separate icon when toggled. */ | 158 /* There is no final decision whether we need a separate icon when toggled. */ |
| 164 | 159 |
| 165 .media-button.fullscreen { | 160 .media-button.fullscreen { |
| 166 background-image: -webkit-image-set( | 161 background-image: -webkit-image-set( |
| 167 url(../images/media/media_fullscreen.png) 1x, | 162 url(../images/media/media_fullscreen.png) 1x, |
| 168 url(../images/media/2x/media_fullscreen.png) 2x); | 163 url(../images/media/2x/media_fullscreen.png) 2x); |
| 169 } | 164 } |
| 170 | 165 |
| 171 #controls[fullscreen] .media-button.fullscreen { | 166 #video-player[fullscreen] .media-button.fullscreen { |
| 172 background-image: -webkit-image-set( | 167 background-image: -webkit-image-set( |
| 173 url(../images/media/media_fullscreen_exit.png) 1x, | 168 url(../images/media/media_fullscreen_exit.png) 1x, |
| 174 url(../images/media/2x/media_fullscreen_exit.png) 2x); | 169 url(../images/media/2x/media_fullscreen_exit.png) 2x); |
| 175 } | 170 } |
| 176 | 171 |
| 177 .playback-state-icon { | 172 .playback-state-icon { |
| 178 -webkit-animation: none; | 173 -webkit-animation: none; |
| 179 background-position: center center; | 174 background-position: center center; |
| 180 background-repeat: no-repeat; | 175 background-repeat: no-repeat; |
| 181 display: none; | 176 display: none; |
| (...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 254 url(../images/media/media_play_onscreen.png) 1x, | 249 url(../images/media/media_play_onscreen.png) 1x, |
| 255 url(../images/media/2x/media_play_onscreen.png) 2x); | 250 url(../images/media/2x/media_play_onscreen.png) 2x); |
| 256 } | 251 } |
| 257 | 252 |
| 258 .playback-state-icon[state='pause'] { | 253 .playback-state-icon[state='pause'] { |
| 259 -webkit-animation: blowup 500ms; | 254 -webkit-animation: blowup 500ms; |
| 260 background-image: -webkit-image-set( | 255 background-image: -webkit-image-set( |
| 261 url(../images/media/media_pause_onscreen.png) 1x, | 256 url(../images/media/media_pause_onscreen.png) 1x, |
| 262 url(../images/media/2x/media_pause_onscreen.png) 2x); | 257 url(../images/media/2x/media_pause_onscreen.png) 2x); |
| 263 } | 258 } |
| OLD | NEW |