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