Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(26)

Side by Side Diff: ui/file_manager/video_player/css/media_controls.css

Issue 2692803003: Remove webkit prefixes for CSS Animation in ui/ styles (Closed)
Patch Set: rebase Created 3 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698