Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(872)

Side by Side Diff: remoting/webapp/toolbar.css

Issue 9129009: Change tool-bar behaviour to click-to-show. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Fixed linter errors and comment. Created 8 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 /* Copyright (c) 2011 The Chromium Authors. All rights reserved. 1 /* Copyright (c) 2011 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: -45px; 8 top: -48px;
9 width: 640px; 9 width: 640px;
10 -webkit-transition: top 0.2s linear; 10 -webkit-transition: top 0.15s ease;
11 -webkit-transition-delay: 0.7s;
12 font-size: 13px; 11 font-size: 13px;
13 pointer-events: none; 12 pointer-events: none;
14 z-index: 1; 13 z-index: 1;
15 } 14 }
16 15
17 .toolbar-container button { 16 .toolbar-container button {
18 padding: 3px 9px; 17 padding: 3px 9px;
19 } 18 }
20 19
21 .toolbar-visible { 20 .toolbar-visible {
22 top: -8px; 21 top: -8px;
23 -webkit-transition-delay: 0s;
24 } 22 }
25 23
26 .toolbar-container div { 24 .toolbar-container div {
27 margin-left: auto; 25 margin-left: auto;
28 margin-right: auto; 26 margin-right: auto;
29 } 27 }
30 28
31 .toolbar-stub { 29 .toolbar-stub {
32 position: absolute; 30 position: absolute;
33 width: 134px; 31 width: 134px;
34 height: 7px; 32 height: 7px;
35 left: 253px; 33 left: 253px;
36 border-bottom-left-radius: 7px; 34 border-bottom-left-radius: 7px;
37 border-bottom-right-radius: 7px; 35 border-bottom-right-radius: 7px;
38 background-color: #4695ff; 36 background-color: #4695ff;
39 -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 37 -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
40 pointer-events: all; 38 pointer-events: all;
41 clip: rect(0, 999px, 999px, -999px); 39 clip: rect(0, 999px, 999px, -999px);
40 -webkit-transition: height 0.15s ease;
41 }
42
43 .toolbar-stub-extended,
44 .toolbar-visible .toolbar-stub {
45 height: 14px;
42 } 46 }
43 47
44 .toolbar-border { 48 .toolbar-border {
45 border-radius: 7px; 49 border-radius: 7px;
46 border: 3px solid #4695ff; 50 border: 3px solid #4695ff;
47 width: 620px; 51 width: 620px;
48 padding: 10px 7px 5px 7px; 52 padding: 10px 7px 5px 7px;
49 background-color: #e9e9e9; 53 background-color: #e9e9e9;
50 -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 54 -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
51 pointer-events: all; 55 pointer-events: all;
52 } 56 }
53 57
54 /* Ensure that the 'connected to' string doesn't make the tool-bar overflow */ 58 /* Ensure that the 'connected to' string doesn't make the tool-bar overflow */
55 #connected-to { 59 #connected-to {
56 display: inline-block; 60 display: inline-block;
57 max-width: 280px; 61 max-width: 280px;
58 overflow: hidden; 62 overflow: hidden;
59 margin-__MSG_@@bidi_end_edge__: 8px; 63 margin-__MSG_@@bidi_end_edge__: 8px;
60 white-space: nowrap; 64 white-space: nowrap;
61 } 65 }
62 66
63 .end-align { 67 .end-align {
64 float: __MSG_@@bidi_end_edge__; 68 float: __MSG_@@bidi_end_edge__;
65 } 69 }
66 70
67 .arrow-down { 71 .arrow-down {
72 position: absolute;
68 width: 0; 73 width: 0;
69 height: 0; 74 height: 0;
70 border-left: 5px solid transparent; 75 border-left: 5px solid transparent;
71 border-right: 5px solid transparent; 76 border-right: 5px solid transparent;
72 border-top: 5px solid white; 77 border-top: 5px solid white;
73 left: auto; 78 left: 62px;
74 right: auto; 79 bottom: 2px;
80 opacity: 0.5;
81 -webkit-transition: bottom 0.15s ease, opacity 0.1s linear;
75 } 82 }
83
84 .toolbar-stub-extended .arrow-down,
85 .toolbar-visible .arrow-down {
86 bottom: 6px;
87 }
88
89
90 .toolbar-stub:hover .arrow-down {
91 opacity: 1.0;
92 }
93
94 .toolbar-visible .arrow-down {
95 -webkit-transform: rotate(180deg);
96 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698