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