| 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 |