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 .media-button { | 5 .media-button { |
6 height: 28px; | 6 height: 28px; |
7 position: relative; | 7 position: relative; |
8 width: 26px; | 8 width: 26px; |
9 } | 9 } |
10 | 10 |
(...skipping 518 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
529 margin-left: -16px; | 529 margin-left: -16px; |
530 margin-top: -16px; | 530 margin-top: -16px; |
531 opacity: 0; | 531 opacity: 0; |
532 pointer-events: none; | 532 pointer-events: none; |
533 position: absolute; | 533 position: absolute; |
534 top: 50%; | 534 top: 50%; |
535 width: 32px; | 535 width: 32px; |
536 z-index: 2; | 536 z-index: 2; |
537 } | 537 } |
538 | 538 |
539 .text-banner { | |
540 background-color: black; | |
541 border-radius: 10px; | |
542 color: white; | |
543 font-size: 18px; | |
544 left: 50%; | |
545 margin-left: -250px; | |
hirono
2013/06/20 09:20:46
Is it OK for RTL mode?
mtomasz
2013/06/20 09:31:59
It is fine, just centering. I've just double check
| |
546 opacity: 0; | |
547 padding: 10px; | |
548 pointer-events: none; | |
549 position: absolute; | |
550 text-align: center; | |
551 text-shadow: 0 0 10px black; | |
552 top: 20%; | |
553 width: 500px; | |
554 z-index: 2; | |
555 } | |
556 | |
557 .text-banner[visible] { | |
558 -webkit-animation: text-banner-blowup 3000ms; | |
559 } | |
560 | |
539 .playback-state-icon[state] { | 561 .playback-state-icon[state] { |
540 -webkit-animation: blowup 500ms; | 562 -webkit-animation: blowup 500ms; |
541 } | 563 } |
542 | 564 |
543 @-webkit-keyframes blowup { | 565 @-webkit-keyframes blowup { |
544 from { | 566 from { |
545 opacity: 1; | 567 opacity: 1; |
546 } | 568 } |
547 to { | 569 to { |
548 -webkit-transform: scale(3); | 570 -webkit-transform: scale(3); |
549 opacity: 0; | 571 opacity: 0; |
550 } | 572 } |
551 } | 573 } |
552 | 574 |
575 @-webkit-keyframes text-banner-blowup { | |
576 from { | |
577 -webkit-transform: scale(0.5); | |
578 opacity: 0; | |
579 } | |
580 20% { | |
581 -webkit-transform: scale(1); | |
582 opacity: 0.75; | |
583 } | |
584 80% { | |
585 -webkit-transform: scale(1); | |
586 opacity: 0.75; | |
587 } | |
588 to { | |
589 -webkit-transform: scale(3); | |
590 opacity: 0; | |
591 } | |
592 } | |
593 | |
553 .playback-state-icon[state='play'] { | 594 .playback-state-icon[state='play'] { |
554 background-image: -webkit-image-set( | 595 background-image: -webkit-image-set( |
555 url('../images/media/media_play.png') 1x, | 596 url('../images/media/media_play.png') 1x, |
556 url('../images/media/2x/media_play.png') 2x); | 597 url('../images/media/2x/media_play.png') 2x); |
557 } | 598 } |
558 | 599 |
559 .playback-state-icon[state='pause'] { | 600 .playback-state-icon[state='pause'] { |
560 background-image: -webkit-image-set( | 601 background-image: -webkit-image-set( |
561 url('../images/media/media_pause.png') 1x, | 602 url('../images/media/media_pause.png') 1x, |
562 url('../images/media/2x/media_pause.png') 2x); | 603 url('../images/media/2x/media_pause.png') 2x); |
563 } | 604 } |
OLD | NEW |