Web Inspector: new glyphs are visible on OS X 10.9 builds
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / DashboardContainerView.css
1 /*
2  * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .toolbar .dashboard-container {
27     position: relative;
28
29     width: 375px;
30
31     border-radius: 4px;
32     background-color: rgb(252, 252, 252);
33
34     border: 1px solid transparent;
35     box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, inset white 0 1px 0;
36
37     margin: 4px 10px;
38     overflow: hidden;
39 }
40
41 body.mac-platform.legacy .toolbar .dashboard-container {
42     border: 1px solid rgb(163, 163, 163);
43     background-color: transparent;
44     box-shadow: rgba(255, 255, 255, 0.45) 0 0px 0;
45 }
46
47 body.window-inactive .toolbar .dashboard-container {
48     border: 1px solid rgb(220, 220, 220);
49     background-color: rgb(246, 246, 246);
50     box-shadow: none;
51 }
52
53 body.mac-platform.legacy.window-inactive .toolbar .dashboard-container {
54     border: 1px solid rgb(196, 196, 196);
55     background-image: none;
56     background-color: rgb(239, 239, 239);
57     box-shadow: rgba(255, 255, 255, 0.45) 0 1px 0;
58 }
59
60 .toolbar.collapsed .dashboard-container {
61     width: 175px;
62 }
63
64 .toolbar.small-size.icon-and-label-vertical .dashboard-container,
65 .toolbar.normal-size.icon-and-label-vertical .dashboard-container {
66     margin-top: 6px;
67 }
68
69 /* Styles for the extra short style, one row with quite a small y-margin */
70
71 .toolbar.label-only .dashboard-container,
72 .toolbar.small-size.icon-only .dashboard-container,
73 .toolbar.small-size.icon-and-label-vertical .dashboard-container,
74 .toolbar.small-size.icon-and-label-horizontal .dashboard-container {
75     height: 22px;
76 }
77
78 /* Styles for the fairly short style, one row with quite a bit of y-margin */
79
80 .toolbar.normal-size.icon-only .dashboard-container,
81 .toolbar.normal-size.icon-and-label-vertical .dashboard-container,
82 .toolbar.normal-size.icon-and-label-horizontal .dashboard-container {
83     height: 30px;
84 }
85
86 /* Default styles for dashboards */
87
88 .toolbar .dashboard {
89     position: absolute;
90     top: 0;
91     bottom: 0;
92     left: 0;
93     right: 0;
94
95     padding: 0 10px 0 5px;
96
97     background-color: rgb(252, 252, 252);
98     box-shadow: inset white 0 1px 0;
99
100     -webkit-animation-duration: 0.4s;
101 }
102
103 body.window-inactive .toolbar .dashboard {
104     background-color: rgb(246, 246, 246);
105     box-shadow: none;
106 }
107
108 body.mac-platform.legacy .toolbar .dashboard,
109 body.mac-platform.legacy.window-inactive .toolbar .dashboard {
110     background-image: linear-gradient(to bottom, rgba(0, 128, 255, 0), rgba(0, 128, 255, 0.075)),
111         linear-gradient(to right, rgba(0, 0, 0, 0.09), transparent, rgba(0, 0, 0, 0.09)),
112         linear-gradient(to bottom, rgb(240, 244, 251), rgb(250, 253, 255));
113     background-size: 100% 6px, auto, auto;
114     background-position: bottom, center, center;
115     background-repeat: no-repeat;
116     background-color: transparent;
117     box-shadow: none;
118 }
119
120 .toolbar .dashboard.visible {
121     z-index: 1; /* Establish a stacking context. */
122 }
123
124 .toolbar .dashboard:not(.visible) {
125     opacity: 0;
126 }
127
128 .toolbar .dashboard.slide-out-up {
129     -webkit-animation-name: slide-top-edge;
130     -webkit-animation-direction: reverse;
131 }
132
133 .toolbar .dashboard.slide-out-down {
134     -webkit-animation-name: slide-bottom-edge;
135 }
136
137 .toolbar .dashboard.slide-in-up {
138     -webkit-animation-name: slide-bottom-edge;
139     -webkit-animation-direction: reverse;
140 }
141
142 .toolbar .dashboard.slide-in-down {
143     -webkit-animation-name: slide-top-edge;
144 }
145
146 @-webkit-keyframes slide-top-edge {
147     from {
148         -webkit-transform: translateY(-30px);
149     }
150     to {
151         -webkit-transform: translateY(0);
152     }
153 }
154
155 @-webkit-keyframes slide-bottom-edge {
156     from {
157         -webkit-transform: translateY(0);
158     }
159     to {
160         -webkit-transform: translateY(30px);
161     }
162 }
163
164 .dashboard-container .advance-arrow {
165     position: absolute;
166     right: 0px;
167     width: 10px;
168     height: 10px;
169     margin: 4px;
170     opacity: 0.6;
171
172     z-index: 1000;
173     background-repeat: no-repeat;
174     background-size: 8px;
175     background-image: url(../Images/UpDownArrows.svg);
176
177     transition-property: opacity;
178     transition-duration: 0.2s;
179 }
180
181 body.mac-platform.legacy .dashboard-container .advance-arrow {
182     background-image: url(../Images/Legacy/UpDownArrows.svg);
183 }
184
185 .dashboard-container .advance-arrow:hover {
186     opacity: 0.8;
187 }
188
189 .dashboard-container .advance-arrow:active {
190     opacity: 1;
191 }
192
193 .dashboard-container .advance-arrow.inactive {
194     opacity: 0;
195     pointer-events: none;
196 }
197
198 .toolbar.label-only .dashboard-container .advance-arrow {
199     width: 8px;
200     height: 8px;
201     margin: 2px 4px 2px 2px;
202     background-size: 6px;
203 }
204
205 .dashboard-container .advance-arrow.advance-forward {
206     top: 0;
207     background-position: 0% 0%;
208 }
209
210 .dashboard-container .advance-arrow.advance-backward {
211     bottom: 0;
212     background-position: 0% 100%;
213 }