Web Inspector: UI fonts should pull from system fonts automatically to whatever degre...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / DataGrid.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 .data-grid {
27     position: relative;
28     border: 1px solid #aaa;
29     outline: none;
30 }
31
32 .data-grid .highlight {
33     background-color: rgb(255, 230, 179);
34 }
35
36 .data-grid tr.selected .highlight {
37     background-color: transparent;
38 }
39
40 .data-grid table {
41     table-layout: fixed;
42     border-spacing: 0;
43     border-collapse: collapse;
44     width: 100%;
45     font-size: 10px;
46 }
47
48 .data-grid .data-container {
49     position: absolute;
50     top: 16px;
51     bottom: 0;
52     left: 0;
53     right: 0;
54     overflow-x: hidden;
55     overflow-y: overlay;
56 }
57
58 .data-grid.inline .data-container {
59     position: static;
60 }
61
62 .data-grid.inline {
63     border: 1px solid rgb(181, 181, 181);
64 }
65
66 .data-grid.no-header > table.header {
67     display: none;
68 }
69
70 .data-grid.no-header .data-container {
71     top: 0;
72 }
73
74 .data-grid th {
75     text-align: left;
76     vertical-align: middle;
77
78     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(to bottom, transparent, transparent),
79         linear-gradient(to bottom, white, white 25%, rgb(244, 244, 244) 50%, rgb(236, 236, 236) 50%, rgb(237, 237, 237));
80     background-size: 1px 11px, 0 0, 100% 100%;
81     background-position: left 2px, right 2px, center;
82     background-repeat: no-repeat;
83
84     box-shadow: inset rgba(255, 255, 255, 0.3) 0 -1px 0;
85     border-bottom: 1px solid rgb(182, 182, 182);
86
87     height: 15px;
88     font-weight: normal;
89     padding: 0 4px;
90     white-space: nowrap;
91     overflow: hidden;
92 }
93
94 .data-grid th:first-child {
95     background-position: -1px 2px, right 2px, center;
96 }
97
98 .data-grid th:active:first-child {
99     background-position: -1px 2px, right top, center;
100 }
101
102 .data-grid th:last-child {
103     background-position: left 2px, -1px 2px, center;
104 }
105
106 .data-grid th:active:last-child {
107     background-position: left top, -1px top, center;
108 }
109
110 .data-grid tr.filler {
111     display: table-row !important;
112     height: auto !important;
113 }
114
115 .data-grid tr.filler td {
116     height: auto !important;
117     padding: 0 !important;
118 }
119
120 .data-grid table.data {
121     position: absolute;
122     left: 0;
123     top: 0;
124     right: 0;
125     bottom: 0;
126     height: 100%;
127     border-top: 0 none transparent;
128     background-image: linear-gradient(to bottom, white, white 50%, rgb(243, 246, 250) 50%, rgb(243, 246, 250));
129     background-size: 100% 32px;
130     table-layout: fixed;
131 }
132
133 .data-grid.inline table.data {
134     position: static;
135 }
136
137 .data-grid table.data tr {
138     display: none;
139 }
140
141 .data-grid table.data tr.revealed {
142     display: table-row;
143 }
144
145 .data-grid td {
146     vertical-align: top;
147     height: 12px;
148     line-height: 12px;
149     padding: 2px 4px;
150     white-space: nowrap;
151     overflow: hidden;
152 }
153
154 .data-grid td:last-child {
155     padding-right: 16px;
156 }
157
158 .data-grid td > div, .data-grid th > div {
159     white-space: nowrap;
160     text-overflow: ellipsis;
161     overflow: hidden;
162 }
163
164 .data-grid .centered div {
165     text-align: center;
166 }
167
168 .data-grid .right div {
169     text-align: right;
170 }
171
172 .data-grid th.sortable div {
173     position: relative;
174 }
175
176 .data-grid th.sortable:not(.mouse-over-collapser):active {
177     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
178         linear-gradient(to bottom, rgb(224, 224, 224), rgb(224, 224, 224) 25%, rgb(214, 214, 214) 50%, rgb(207, 207, 207) 50%, rgb(208, 208, 208));
179     background-size: 1px 15px, 1px 15px, 100% 100%;
180     background-position: left top, right top, center;
181
182     box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px 0;
183     border-bottom: 1px solid rgb(160, 160, 160);
184 }
185
186 .data-grid th.sort-ascending, .data-grid th.sort-descending {
187     background-image: linear-gradient(to bottom, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)), linear-gradient(to bottom, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)),
188         linear-gradient(to bottom, rgb(199, 226, 246), rgb(169, 209, 239) 25%, rgb(158, 204, 239) 50%, rgb(142, 196, 237) 50%, rgb(187, 230, 245));
189     background-size: 1px 15px, 1px 15px, 100% 100%;
190     background-position: left top, right top, center;
191
192     box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px 0;
193     border-bottom: 1px solid rgb(130, 179, 210);
194 }
195
196 .data-grid th.sortable.sort-ascending:not(.mouse-over-collapser):active, .data-grid th.sortable.sort-descending:not(.mouse-over-collapser):active {
197     background-image: linear-gradient(to bottom, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)), linear-gradient(to bottom, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)),
198         linear-gradient(to bottom, rgb(144, 180, 227), rgb(109, 160, 220) 25%, rgb(96, 155, 221) 50%, rgb(77, 146, 219) 50%, rgb(130, 186, 227));
199     background-size: 1px 15px, 1px 15px, 100% 100%;
200     background-position: left top, right top, center;
201
202     border-bottom: 1px solid rgb(63, 125, 192);
203 }
204
205 .data-grid th:active + th,
206 .data-grid th.sort-ascending + th,
207 .data-grid th.sort-descending + th {
208     background-position: -1px 2px, -1px 2px, center;
209 }
210
211 .data-grid th:active + th.sort-ascending,
212 .data-grid th:active + th.sort-descending,
213 .data-grid th.sort-ascending + th:active,
214 .data-grid th.sort-descending + th:active {
215     background-position: -1px top, right top, center;
216 }
217
218 .data-grid th:first-child:active,
219 .data-grid th.sort-ascending:first-child,
220 .data-grid th.sort-descending:first-child {
221     background-position: -1px top, right top, center !important;
222 }
223
224 .data-grid th:last-child:active,
225 .data-grid th.sort-ascending:last-child,
226 .data-grid th.sort-descending:last-child {
227     background-position: left top, -1px top, center !important;
228 }
229
230 .data-grid th.sort-ascending > div:first-child,
231 .data-grid th.sort-descending > div:first-child {
232     padding-right: 10px;
233 }
234
235 .data-grid th.sort-ascending > div:first-child::after {
236     position: absolute;
237     top: 0;
238     bottom: 0;
239     right: 0;
240
241     margin-bottom: auto;
242     margin-top: auto;
243
244     width: 9px;
245     height: 8px;
246
247     content: "";
248
249     background-image: -webkit-canvas(data-grid-sort-indicator-up-arrow);
250     background-size: 9px 8px;
251     background-repeat: no-repeat;
252 }
253
254 .data-grid th.sort-descending > div:first-child::after {
255     position: absolute;
256     top: 0;
257     bottom: 0;
258     right: 0;
259
260     margin-bottom: auto;
261     margin-top: auto;
262
263     width: 9px;
264     height: 8px;
265
266     content: "";
267
268     background-image: -webkit-canvas(data-grid-sort-indicator-down-arrow);
269     background-size: 9px 8px;
270     background-repeat: no-repeat;
271 }
272
273 .data-grid button {
274     line-height: 19px;
275 }
276
277 body.window-inactive .data-grid th.sort-ascending,
278 body.window-inactive .data-grid th.sort-descending {
279     background-image: linear-gradient(to bottom, white, white 25%, rgb(244, 244, 244) 50%, rgb(236, 236, 236) 50%, rgb(237, 237, 237)),
280         linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
281     background-size: 100% 100%, 1px 11px;
282     background-position: center, right center;
283     background-repeat: no-repeat;
284     border-bottom: 1px solid rgb(182, 182, 182);
285 }
286
287 .data-grid tr.parent td.disclosure::before {
288     float: left;
289
290     content: "";
291
292     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
293     background-size: 8px 8px;
294     background-repeat: no-repeat;
295
296     width: 8px;
297     height: 8px;
298
299     margin-top: 2px;
300     margin-right: 2px;
301 }
302
303 .data-grid tr.parent.expanded td.disclosure::before {
304     background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
305 }
306
307 .data-grid:focus tr.parent.selected td.disclosure::before {
308     background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
309 }
310
311 .data-grid:focus tr.parent.expanded.selected td.disclosure::before {
312     background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
313 }
314
315 .data-grid tr.selected {
316     background-color: rgb(212, 212, 212) !important;
317     color: inherit !important;
318 }
319
320 .data-grid:focus tr.selected {
321     background-color: rgb(56, 121, 217) !important;
322     color: white !important;
323 }
324
325 .data-grid tr:not(.parent) td.disclosure {
326     text-indent: 10px;
327 }
328
329 .data-grid-resizer {
330     position: absolute;
331     top: 0;
332     bottom: 0;
333     width: 5px;
334     z-index: 500;
335     cursor: col-resize;
336 }