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; |
(...skipping 118 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
129 pointer-events: auto; | 129 pointer-events: auto; |
130 } | 130 } |
131 | 131 |
132 /* Cast button. */ | 132 /* Cast button. */ |
133 | 133 |
134 .media-button.cast, | 134 .media-button.cast, |
135 .media-button.cast-button { | 135 .media-button.cast-button { |
136 background-image: -webkit-image-set( | 136 background-image: -webkit-image-set( |
137 url(../images/media/media_chromecast.png) 1x, | 137 url(../images/media/media_chromecast.png) 1x, |
138 url(../images/media/2x/media_chromecast.png) 2x); | 138 url(../images/media/2x/media_chromecast.png) 2x); |
| 139 border-radius: 2px; |
139 display: none; | 140 display: none; |
140 border-radius: 2px; | |
141 } | 141 } |
142 | 142 |
143 /* Reset browser's button style. */ | 143 /* Reset browser's button style. */ |
144 .media-button.cast { | 144 .media-button.cast { |
145 background-color: transparent; | 145 background-color: transparent; |
146 border: none; | 146 border: none; |
147 cursor: pointer; | 147 cursor: pointer; |
148 outline: none; | 148 outline: none; |
149 } | 149 } |
150 | 150 |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
187 | 187 |
188 .media-button.subtitles:not([showing]) { | 188 .media-button.subtitles:not([showing]) { |
189 opacity: 0.2; | 189 opacity: 0.2; |
190 } | 190 } |
191 | 191 |
192 .media-button.subtitles[unavailable] { | 192 .media-button.subtitles[unavailable] { |
193 display: none; | 193 display: none; |
194 } | 194 } |
195 | 195 |
196 .playback-state-icon { | 196 .playback-state-icon { |
197 -webkit-animation: none; | 197 animation: none; |
198 background-position: center center; | 198 background-position: center center; |
199 background-repeat: no-repeat; | 199 background-repeat: no-repeat; |
200 display: none; | 200 display: none; |
201 height: 32px; | 201 height: 32px; |
202 left: 50%; | 202 left: 50%; |
203 margin-left: -16px; | 203 margin-left: -16px; |
204 margin-top: -16px; | 204 margin-top: -16px; |
205 opacity: 0; | 205 opacity: 0; |
206 pointer-events: none; | 206 pointer-events: none; |
207 position: absolute; | 207 position: absolute; |
(...skipping 15 matching lines...) Expand all Loading... |
223 pointer-events: none; | 223 pointer-events: none; |
224 position: absolute; | 224 position: absolute; |
225 text-align: center; | 225 text-align: center; |
226 text-shadow: 0 0 10px black; | 226 text-shadow: 0 0 10px black; |
227 top: 20%; | 227 top: 20%; |
228 width: 500px; | 228 width: 500px; |
229 z-index: 2; | 229 z-index: 2; |
230 } | 230 } |
231 | 231 |
232 .text-banner[visible] { | 232 .text-banner[visible] { |
233 -webkit-animation: text-banner-blowup 3000ms; | 233 animation: text-banner-blowup 3000ms; |
234 display: block; | 234 display: block; |
235 } | 235 } |
236 | 236 |
237 .playback-state-icon[state] { | 237 .playback-state-icon[state] { |
238 display: block; | 238 display: block; |
239 } | 239 } |
240 | 240 |
241 @-webkit-keyframes blowup { | 241 @keyframes blowup { |
242 from { | 242 from { |
243 opacity: 1; | 243 opacity: 1; |
244 } | 244 } |
245 to { | 245 to { |
| 246 opacity: 0; |
246 transform: scale(3); | 247 transform: scale(3); |
247 opacity: 0; | |
248 } | 248 } |
249 } | 249 } |
250 | 250 |
251 @-webkit-keyframes text-banner-blowup { | 251 @keyframes text-banner-blowup { |
252 from { | 252 from { |
| 253 opacity: 0; |
253 transform: scale(0.5); | 254 transform: scale(0.5); |
254 opacity: 0; | |
255 } | 255 } |
256 20% { | 256 20% { |
| 257 opacity: 0.75; |
257 transform: scale(1); | 258 transform: scale(1); |
258 opacity: 0.75; | |
259 } | 259 } |
260 80% { | 260 80% { |
| 261 opacity: 0.75; |
261 transform: scale(1); | 262 transform: scale(1); |
262 opacity: 0.75; | |
263 } | 263 } |
264 to { | 264 to { |
| 265 opacity: 0; |
265 transform: scale(3); | 266 transform: scale(3); |
266 opacity: 0; | |
267 } | 267 } |
268 } | 268 } |
269 | 269 |
270 .playback-state-icon[state='play'] { | 270 .playback-state-icon[state='play'] { |
271 -webkit-animation: blowup 500ms; | 271 animation: blowup 500ms; |
272 background-image: -webkit-image-set( | 272 background-image: -webkit-image-set( |
273 url(../images/media/media_play_onscreen.png) 1x, | 273 url(../images/media/media_play_onscreen.png) 1x, |
274 url(../images/media/2x/media_play_onscreen.png) 2x); | 274 url(../images/media/2x/media_play_onscreen.png) 2x); |
275 } | 275 } |
276 | 276 |
277 .playback-state-icon[state='pause'] { | 277 .playback-state-icon[state='pause'] { |
278 -webkit-animation: blowup 500ms; | 278 animation: blowup 500ms; |
279 background-image: -webkit-image-set( | 279 background-image: -webkit-image-set( |
280 url(../images/media/media_pause_onscreen.png) 1x, | 280 url(../images/media/media_pause_onscreen.png) 1x, |
281 url(../images/media/2x/media_pause_onscreen.png) 2x); | 281 url(../images/media/2x/media_pause_onscreen.png) 2x); |
282 } | 282 } |
OLD | NEW |