d74c5f290c95ef39bb76406145475e71faccc93a
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / DefaultDashboardView.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 body.web .toolbar.collapsed .dashboard.default > .time,
27 body.web .toolbar.collapsed .dashboard.default > .resourcesSize,
28 body.web .toolbar.collapsed .dashboard.default > .logs {
29     display: none;
30 }
31
32 body.javascript .toolbar .dashboard.default > .time,
33 body.javascript .toolbar .dashboard.default > .resourcesSize,
34 body.javascript .toolbar .dashboard.default > .resourcesCount {
35     display: none;
36 }
37
38 .toolbar .dashboard.default {
39     display: flex;
40     flex-flow: row nowrap;
41     justify-content: space-between;
42 }
43
44 .toolbar .dashboard.default > .item {
45     line-height: 13px;
46
47     padding: 0 5px;
48
49     display: flex;
50
51     min-width: 45px;
52
53     justify-content: center;
54     align-items: center;
55
56     border-radius: 4px;
57     border: 1px solid transparent;
58 }
59
60 body.mac-platform.legacy .toolbar .dashboard.default > .item {
61     font-family: Helvetica, sans-serif;
62     font-weight: bold;
63 }
64
65 .toolbar .dashboard.default > .time,
66 .toolbar .dashboard.default > .resourcesSize {
67     min-width: 70px;
68 }
69
70 .toolbar .dashboard.default > .item.enabled:hover {
71     border: 1px solid rgba(0, 0, 0, 0.1);
72 }
73
74 .toolbar .dashboard.default > .item.enabled:active {
75     border: 1px solid rgba(0, 0, 0, 0.2);
76 }
77
78 .toolbar .dashboard.default > .item > * {
79     display: flex;
80     align-items: center;
81 }
82
83 .toolbar .dashboard.default > .item > img {
84     opacity: 0.2;
85     width: 16px;
86     height: 16px;
87     pointer-events: none;
88 }
89
90 .toolbar .dashboard.default > .item.enabled > img {
91     opacity: 0.5;
92 }
93
94 .toolbar .dashboard.default > .item.enabled:hover > img {
95     opacity: 0.65;
96 }
97
98 .toolbar .dashboard.default > .item > div {
99     display: flex;
100     flex: 1;
101
102     color: rgba(0, 0, 0, 0.2);
103     padding-left: 2px;
104 }
105
106 .toolbar .dashboard.default > .item.enabled > div {
107     color: rgba(0, 0, 0, 0.7);
108 }
109
110 .toolbar .dashboard.default > .item.enabled:hover > div {
111     color: rgba(0, 0, 0, 0.85);
112 }
113
114 .toolbar .dashboard.default > .resourcesCount > img {
115     content: url(../Images/Resources.svg);
116 }
117
118 .toolbar .dashboard.default > .time > img {
119     content: url(../Images/Time.svg);
120 }
121
122 .toolbar .dashboard.default > .logs > img {
123     content: url(../Images/Logs.svg);
124 }
125
126 .toolbar .dashboard.default > .resourcesSize > img {
127     content: url(../Images/Weight.svg);
128 }
129
130 .toolbar .dashboard.default > .errors > img {
131     content: url(../Images/Errors.svg);
132 }
133
134 .toolbar .dashboard.default > .errors.enabled > img {
135     content: url(../Images/ErrorsEnabled.svg);
136     opacity: 0.9;
137 }
138
139 body.mac-platform.legacy .toolbar .dashboard.default > .resourcesCount > img {
140     content: url(../Images/Legacy/Resources.svg);
141 }
142
143 body.mac-platform.legacy .toolbar .dashboard.default > .time > img {
144     content: url(../Images/Legacy/Time.svg);
145 }
146
147 body.mac-platform.legacy .toolbar .dashboard.default > .logs > img {
148     content: url(../Images/Legacy/Logs.svg);
149 }
150
151 body.mac-platform.legacy .toolbar .dashboard.default > .resourcesSize > img {
152     content: url(../Images/Legacy/Weight.svg);
153 }
154
155 body.mac-platform.legacy .toolbar .dashboard.default > .errors > img {
156     content: url(../Images/Legacy/Errors.svg);
157 }
158
159 body.mac-platform.legacy .toolbar .dashboard.default > .errors.enabled > img {
160     content: url(../Images/Legacy/ErrorsEnabled.svg);
161 }
162
163 .toolbar .dashboard.default > .errors.enabled:hover > img {
164     opacity: 1;
165 }
166
167 .toolbar .dashboard.default > .errors.enabled > div {
168     color: rgba(201, 55, 57, 0.9);
169 }
170
171 .toolbar .dashboard.default > .errors.enabled:hover > div {
172     color: rgb(201, 55, 57);
173 }
174
175 .toolbar .dashboard.default > .issues > img {
176     content: url(../Images/Issues.svg);
177 }
178
179 .toolbar .dashboard.default > .issues.enabled > img {
180     content: url(../Images/IssuesEnabled.svg);
181     opacity: 0.9;
182 }
183
184 body.mac-platform.legacy .toolbar .dashboard.default > .issues > img {
185     content: url(../Images/Legacy/Issues.svg);
186 }
187
188 body.mac-platform.legacy .toolbar .dashboard.default > .issues.enabled > img {
189     content: url(../Images/Legacy/IssuesEnabled.svg);
190 }
191
192 .toolbar .dashboard.default > .issues.enabled:hover > img {
193     opacity: 1;
194 }
195
196 .toolbar .dashboard.default > .issues.enabled > div {
197     color: rgba(224, 164, 4, 0.9);
198 }
199
200 .toolbar .dashboard.default > .issues.enabled:hover > div {
201     color: rgb(224, 164, 4);
202 }
203
204 /* Styles for the pulsing animated state of console items */
205
206 .toolbar .dashboard.default > .item.pulsing {
207     -webkit-animation-name: console-item-pulse;
208     -webkit-animation-duration: 0.75s;
209 }
210
211 @-webkit-keyframes console-item-pulse {
212     50% { opacity: 0.6; }
213 }
214
215
216 /* Styles for the extra short style, one row with quite a small y-margin */
217
218 .toolbar.label-only .dashboard.default > .item,
219 .toolbar.small-size.icon-only .dashboard.default > .item,
220 .toolbar.small-size.icon-and-label-vertical .dashboard.default > .item,
221 .toolbar.small-size.icon-and-label-horizontal .dashboard.default > .item {
222     margin: 1px 0;
223 }
224
225 /* Styles for the fairly short style, one row with quite a bit of y-margin */
226
227 .toolbar.normal-size.icon-only .dashboard.default > .item,
228 .toolbar.normal-size.icon-and-label-vertical .dashboard.default > .item,
229 .toolbar.normal-size.icon-and-label-horizontal .dashboard.default > .item {
230     margin: 4px 0;
231 }