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 | 5 |
6 .toolbar-container { | 6 .toolbar-container { |
7 position: fixed; | 7 position: fixed; |
8 top: -48px; | 8 top: -48px; |
9 width: 640px; | 9 width: 640px; |
10 -webkit-transition: top 0.15s ease; | 10 transition: top 0.15s ease; |
11 font-size: 13px; | 11 font-size: 13px; |
12 pointer-events: none; | 12 pointer-events: none; |
13 z-index: 1; | 13 z-index: 1; |
14 } | 14 } |
15 | 15 |
16 .toolbar-visible { | 16 .toolbar-visible { |
17 top: -8px; | 17 top: -8px; |
18 } | 18 } |
19 | 19 |
20 .toolbar-stub { | 20 .toolbar-stub { |
21 position: absolute; | 21 position: absolute; |
22 width: 134px; | 22 width: 134px; |
23 height: 7px; | 23 height: 7px; |
24 left: 243px; | 24 left: 243px; |
25 border-bottom-left-radius: 7px; | 25 border-bottom-left-radius: 7px; |
26 border-bottom-right-radius: 7px; | 26 border-bottom-right-radius: 7px; |
27 background-color: #4695ff; | 27 background-color: #4695ff; |
28 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); | 28 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); |
29 pointer-events: all; | 29 pointer-events: all; |
30 clip: rect(0, 999px, 999px, -999px); | 30 clip: rect(0, 999px, 999px, -999px); |
31 -webkit-transition: height 0.15s ease; | 31 transition: height 0.15s ease; |
32 } | 32 } |
33 | 33 |
34 .toolbar-stub-extended, | 34 .toolbar-stub-extended, |
35 .toolbar-visible .toolbar-stub { | 35 .toolbar-visible .toolbar-stub { |
36 height: 14px; | 36 height: 14px; |
37 } | 37 } |
38 | 38 |
39 .toolbar-border { | 39 .toolbar-border { |
40 border-radius: 7px; | 40 border-radius: 7px; |
41 border: 3px solid #4695ff; | 41 border: 3px solid #4695ff; |
(...skipping 27 matching lines...) Expand all Loading... |
69 .arrow-down { | 69 .arrow-down { |
70 position: absolute; | 70 position: absolute; |
71 width: 0; | 71 width: 0; |
72 height: 0; | 72 height: 0; |
73 border-left: 5px solid transparent; | 73 border-left: 5px solid transparent; |
74 border-right: 5px solid transparent; | 74 border-right: 5px solid transparent; |
75 border-top: 5px solid white; | 75 border-top: 5px solid white; |
76 left: 62px; | 76 left: 62px; |
77 bottom: 2px; | 77 bottom: 2px; |
78 opacity: 0.5; | 78 opacity: 0.5; |
79 -webkit-transition: bottom 0.15s ease, opacity 0.1s linear; | 79 transition: bottom 0.15s ease, opacity 0.1s linear; |
80 } | 80 } |
81 | 81 |
82 .toolbar-stub-extended .arrow-down, | 82 .toolbar-stub-extended .arrow-down, |
83 .toolbar-visible .arrow-down { | 83 .toolbar-visible .arrow-down { |
84 bottom: 6px; | 84 bottom: 6px; |
85 } | 85 } |
86 | 86 |
87 | 87 |
88 .toolbar-stub:hover .arrow-down { | 88 .toolbar-stub:hover .arrow-down { |
89 opacity: 1.0; | 89 opacity: 1.0; |
90 } | 90 } |
91 | 91 |
92 .toolbar-visible .arrow-down { | 92 .toolbar-visible .arrow-down { |
93 -webkit-transform: rotate(180deg); | 93 transform: rotate(180deg); |
94 } | 94 } |
OLD | NEW |