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 |