Chromium Code Reviews| 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 |