| 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 #preview-area.preview-area { | 5 #preview-area.preview-area { |
| 6 -webkit-box-flex: 1; | 6 -webkit-box-flex: 1; |
| 7 -webkit-user-select: none; | 7 -webkit-user-select: none; |
| 8 background-color: #e6e6e6; | 8 background-color: #e6e6e6; |
| 9 overflow: hidden; | 9 overflow: hidden; |
| 10 position: relative; | 10 position: relative; |
| 11 } | 11 } |
| 12 | 12 |
| 13 .preview-area-plugin-wrapper { | 13 .preview-area-plugin-wrapper { |
| 14 height: 100%; | 14 height: 100%; |
| 15 position: absolute; | 15 position: absolute; |
| 16 width: 100%; | 16 width: 100%; |
| 17 } | 17 } |
| 18 | 18 |
| 19 #preview-area .preview-area-plugin { | 19 #preview-area .preview-area-plugin { |
| 20 /* pluginFadeInTransitionDuration = 200ms */ | |
| 21 -webkit-transition: opacity 200ms linear; | |
| 22 /* pluginFadeInTransitionDelay = overlayFadeOutTransitionDuration = 100ms */ | |
| 23 -webkit-transition-delay: 100ms; | |
| 24 border: none; | 20 border: none; |
| 25 cursor: inherit; | 21 cursor: inherit; |
| 26 height: 100%; | 22 height: 100%; |
| 27 opacity: 1; | 23 opacity: 1; |
| 24 /* pluginFadeInTransitionDuration = 200ms */ |
| 25 transition: opacity 200ms linear; |
| 26 /* pluginFadeInTransitionDelay = overlayFadeOutTransitionDuration = 100ms */ |
| 27 transition-delay: 100ms; |
| 28 width: 100%; | 28 width: 100%; |
| 29 } | 29 } |
| 30 | 30 |
| 31 #preview-area .preview-area-plugin.invisible { | 31 #preview-area .preview-area-plugin.invisible { |
| 32 opacity: 0; |
| 32 /* pluginFadeOutTransitionDuration = 100ms */ | 33 /* pluginFadeOutTransitionDuration = 100ms */ |
| 33 -webkit-transition: opacity 100ms linear; | 34 transition: opacity 100ms linear; |
| 34 /* pluginFadeOutTransitionDelay = 250ms */ | 35 /* pluginFadeOutTransitionDelay = 250ms */ |
| 35 -webkit-transition-delay: 250ms; | 36 transition-delay: 250ms; |
| 36 opacity: 0; | |
| 37 } | 37 } |
| 38 | 38 |
| 39 #preview-area .preview-area-overlay-layer { | 39 #preview-area .preview-area-overlay-layer { |
| 40 -webkit-transition: opacity 200ms linear; | |
| 41 /* overlayFadeInTransitionDelay = pluginFadeOutTransitionDelay + | |
| 42 * pluginFadeOutTransitionDuration = 350ms */ | |
| 43 -webkit-transition-delay: 350ms; | |
| 44 -webkit-user-select: none; | 40 -webkit-user-select: none; |
| 45 background: #e6e6e6; | 41 background: #e6e6e6; |
| 46 height: 100%; | 42 height: 100%; |
| 47 margin: 0; | 43 margin: 0; |
| 48 opacity: 1; | 44 opacity: 1; |
| 49 position: absolute; | 45 position: absolute; |
| 46 transition: opacity 200ms linear; |
| 47 /* overlayFadeInTransitionDelay = pluginFadeOutTransitionDelay + |
| 48 * pluginFadeOutTransitionDuration = 350ms */ |
| 49 transition-delay: 350ms; |
| 50 width: 100%; | 50 width: 100%; |
| 51 z-index: 1; | 51 z-index: 1; |
| 52 } | 52 } |
| 53 | 53 |
| 54 #preview-area .preview-area-overlay-layer.invisible { | 54 #preview-area .preview-area-overlay-layer.invisible { |
| 55 /* overlayFadeOutTransitionDuration = 100ms */ | |
| 56 -webkit-transition: opacity 100ms linear; | |
| 57 opacity: 0; | 55 opacity: 0; |
| 58 pointer-events: none; | 56 pointer-events: none; |
| 57 /* overlayFadeOutTransitionDuration = 100ms */ |
| 58 transition: opacity 100ms linear; |
| 59 } | 59 } |
| 60 | 60 |
| 61 #preview-area .preview-area-messages { | 61 #preview-area .preview-area-messages { |
| 62 height: 100%; | 62 height: 100%; |
| 63 } | 63 } |
| 64 | 64 |
| 65 #preview-area .preview-area-message { | 65 #preview-area .preview-area-message { |
| 66 color: #404040; | 66 color: #404040; |
| 67 font-size: 1.1em; | 67 font-size: 1.1em; |
| 68 position: relative; | 68 position: relative; |
| 69 text-align: center; | 69 text-align: center; |
| 70 text-shadow: 0 1px 0 rgba(255, 255, 255, .5); | 70 text-shadow: 0 1px 0 rgba(255, 255, 255, .5); |
| 71 top: 50%; | 71 top: 50%; |
| 72 } | 72 } |
| 73 | 73 |
| 74 #preview-area .preview-area-no-plugin-action-area { | 74 #preview-area .preview-area-no-plugin-action-area { |
| 75 margin-top: 12px; | 75 margin-top: 12px; |
| 76 } | 76 } |
| 77 | 77 |
| 78 #preview-area .preview-area-open-system-dialog-button-throbber { | 78 #preview-area .preview-area-open-system-dialog-button-throbber { |
| 79 vertical-align: middle; | 79 vertical-align: middle; |
| 80 } | 80 } |
| OLD | NEW |