Web Inspector: UI fonts should pull from system fonts automatically to whatever degre...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / Main.css
1 /*
2  * Copyright (C) 2013 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 * {
27     box-sizing: border-box;
28 }
29
30 body {
31     display: -webkit-flex;
32     -webkit-flex-direction: column;
33
34     font-family: -webkit-system-font, sans-serif;
35     font-size: 11px;
36
37     position: absolute;
38     top: 0;
39     left: 0;
40     right: 0;
41     bottom: 0;
42
43     padding: 0;
44     margin: 0;
45
46     overflow: hidden;
47
48     -webkit-user-select: none;
49     -webkit-user-drag: none;
50
51     cursor: default;
52
53     -webkit-font-smoothing: subpixel-antialiased;
54
55     tab-size: 4; /* FIXME: This should be controlled by a setting. <rdar://problem/10593948> */
56 }
57
58 body.docked {
59     background-color: white;
60 }
61
62 body.docked.bottom {
63     border-top: 1px solid rgb(85, 85, 85);
64 }
65
66 body.docked.right {
67     border-left: 1px solid rgb(85, 85, 85);
68 }
69
70 #docked-resizer {
71     display: none;
72
73     z-index: 100;
74 }
75
76 body.docked #docked-resizer {
77     display: block;
78 }
79
80 body.docked.bottom #docked-resizer {
81     position: absolute;
82     top: 0;
83     left: 0;
84     right: 0;
85     height: 3px;
86
87     cursor: row-resize;
88 }
89
90 body.docked.right #docked-resizer {
91     position: absolute;
92     top: 0;
93     left: 0;
94     bottom: 0;
95     width: 3px;
96
97     cursor: col-resize;
98 }
99
100 body.docked.bottom #toolbar {
101     cursor: row-resize;
102 }
103
104 body.docked.bottom #toolbar .item:not(.flexible-space) {
105     cursor: default;
106 }
107
108 #main {
109     display: -webkit-flex;
110     -webkit-flex: 1;
111
112     background-color: white;
113
114     /* The position and z-index are needed to make negative z-index work in the DOM tree. */
115     position: relative;
116     z-index: 0;
117 }
118
119 #navigation-sidebar {
120     width: 300px;
121 }
122
123 body.docked.right #navigation-sidebar.collapsed > .resizer {
124     pointer-events: none;
125 }
126
127 #content {
128     display: -webkit-flex;
129     -webkit-flex-direction: column;
130     -webkit-flex: 1;
131 }
132
133 #content-browser {
134     -webkit-flex: 1;
135 }
136
137 #split-content-browser {
138     border-top: 1px solid rgb(153, 153, 153);
139 }
140
141 #split-content-browser > .navigation-bar {
142     cursor: row-resize;
143
144     background-image: linear-gradient(to bottom, rgb(248, 248, 248), rgb(226, 226, 226));
145 }
146
147 #split-content-browser > .navigation-bar .item:not(.flexible-space) {
148     cursor: default;
149 }
150
151 #details-sidebar {
152     width: 300px;
153 }
154
155 .message-text-view {
156     display: -webkit-flex;
157     z-index: 1000;
158
159     position: absolute;
160     top: 0;
161     left: 0;
162     right: 0;
163     bottom: 0;
164
165     padding-left: 20%;
166     padding-right: 20%;
167
168     -webkit-justify-content: center;
169     -webkit-align-items: center;
170
171     line-height: 20px;
172     white-space: pre-wrap;
173     text-align: center;
174
175     font-size: 18px;
176     font-weight: bold;
177
178     color: rgb(75%, 75%, 75%);
179     background-color: white;
180 }
181
182 .message-text-view.error {
183     color: rgb(224, 16, 16);
184 }
185
186 .message-text-view.error::before {
187     display: inline-block;
188
189     width: 20px;
190     height: 20px;
191     margin-right: 4px;
192     vertical-align: bottom;
193
194     background-image: url(../Images/Error.svg);
195     background-size: 100% 100%;
196     content: "";
197 }
198
199 .go-to-link {
200     color: rgb(85, 85, 85) !important;
201     text-decoration: underline !important;
202     cursor: pointer;
203 }
204
205 .go-to-link:not(.dont-float) {
206     float: right;
207     margin-left: 5px;
208     max-width: 100%;
209     text-overflow: ellipsis;
210     overflow: hidden;
211     white-space: nowrap;
212 }
213
214 .go-to-arrow {
215     -webkit-appearance: none;
216
217     padding: 0;
218     margin: 0;
219     border: none;
220
221     background-color: transparent;
222     background-image: -webkit-canvas(go-to-arrow-normal);
223     background-repeat: no-repeat;
224     background-position: center;
225     background-size: 10px 10px;
226
227     width: 16px;
228     height: 16px;
229
230  /* Workaround: for text boxes overlapping float:right. Give go-to arrows a z-index to ensure they are clickable.
231     <rdar://problem/11536832> Cannot access content view from Instruments navigator if name of file is truncated */
232     position: relative;
233     z-index: 1;
234 }
235
236 .go-to-arrow:active {
237     background-image: -webkit-canvas(go-to-arrow-normal-active);
238 }
239
240 :focus .selected .go-to-arrow {
241     background-image: -webkit-canvas(go-to-arrow-selected);
242 }
243
244 :focus .selected .go-to-arrow:active {
245     background-image: -webkit-canvas(go-to-arrow-selected-active);
246 }
247
248 .display-location {
249     font-style: italic !important;
250 }
251
252 .hidden {
253     display: none !important;
254 }
255
256 .node-link {
257     text-decoration: underline;
258     cursor: pointer;
259 }
260
261 .node-link-list, .node-link-list li {
262     display: block;
263     margin: 0;
264     padding: 0;
265     line-height: 1.2;
266 }
267
268 .node-link-list li {
269     margin: 0 0 0.4em;
270 }
271
272 .node-link-list li:last-child {
273     margin: 0;
274 }
275
276 .value-with-clarification .clarification {
277     color: #666;
278 }