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