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 |