REGRESSION(r236705): Web Inspector: wrong text color for selected DataGrid row
[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     --data-grid-column-border-start: 1px solid transparent;
31     --data-grid-column-border-end: 0.5px solid var(--border-color);
32 }
33
34 .data-grid .highlight {
35     background-color: hsl(40, 100%, 85%);
36 }
37
38 .data-grid tr.selected .highlight {
39     background-color: transparent;
40 }
41
42 .data-grid table {
43     table-layout: fixed;
44     border-spacing: 0;
45     border-collapse: collapse;
46     width: 100%;
47 }
48
49 .data-grid .data-container {
50     position: absolute;
51     top: 23px;
52     bottom: 0;
53     left: 0;
54     right: 0;
55     overflow-x: hidden;
56     overflow-y: scroll;
57 }
58
59 .data-grid.inline .data-container {
60     position: static;
61     overflow-y: auto;
62 }
63
64 .data-grid.inline {
65     border: 0.5px solid var(--border-color);
66 }
67
68 .data-grid > .header-wrapper {
69     border-bottom: 1px solid var(--border-color);
70 }
71
72 .data-grid.no-header > .header-wrapper {
73     display: none;
74 }
75
76 .data-grid.no-header .data-container {
77     top: 0;
78 }
79
80 .data-grid th {
81     height: 22px;
82     padding: 0 6px;
83     text-align: start;
84     vertical-align: middle;
85     font-weight: normal;
86     white-space: nowrap;
87     background-color: var(--background-color);
88     overflow: hidden;
89 }
90
91 body[dir=ltr] .data-grid :matches(th, td):not(:last-child) {
92     border-right: var(--data-grid-column-border-end);
93 }
94
95 body[dir=rtl] .data-grid :matches(th, td):not(:last-child) {
96     border-left: var(--data-grid-column-border-end);
97 }
98
99 .data-grid th.sortable:active {
100     background-color: hsl(0, 0%, 70%);
101 }
102
103 .data-grid th:matches(.sort-ascending, .sort-descending) {
104     background-color: hsl(0, 0%, 90%);
105
106     --data-grid-sort-div-first-child-padding-end: 12px;
107 }
108
109 .data-grid tr.filler {
110     display: table-row !important;
111     height: auto !important;
112 }
113
114 .data-grid tr.filler td {
115     height: auto !important;
116     padding: 0 !important;
117 }
118
119 .data-grid table.data {
120     position: relative;
121     left: 0;
122     right: 0;
123     height: 100%;
124     border-top: 0 none transparent;
125     table-layout: fixed;
126 }
127
128 .data-grid:not(.variable-height-rows) table.data {
129     background-image: linear-gradient(to bottom, var(--even-zebra-stripe-row-background-color), var(--even-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color));
130     background-size: 100% 40px;
131 }
132
133 .data-grid:not(.variable-height-rows) > .data-container > table.data > tbody > tr > td > .cell-content {
134     height: 16px;
135 }
136
137 .data-grid:not(.variable-height-rows) table.data.odd-first-zebra-stripe {
138     background-image: linear-gradient(to bottom, var(--odd-zebra-stripe-row-background-color), var(--odd-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color));
139 }
140
141 .data-grid.inline table.data {
142     position: static;
143 }
144
145 .data-grid table.data tr {
146     display: none;
147 }
148
149 .data-grid table.data tr.revealed {
150     display: table-row;
151 }
152
153 .data-grid.variable-height-rows table.data tr:nth-child(odd) {
154     background-color: var(--odd-zebra-stripe-row-background-color);
155 }
156
157 .data-grid.variable-height-rows table.data tr:nth-child(even) {
158     background-color: var(--even-zebra-stripe-row-background-color);
159 }
160
161 .data-grid.variable-height-rows.odd-first-zebra-stripe table.data tr:nth-child(odd) {
162     background-color: var(--even-zebra-stripe-row-background-color);
163 }
164
165 .data-grid.variable-height-rows.odd-first-zebra-stripe table.data tr:nth-child(even) {
166     background-color: var(--odd-zebra-stripe-row-background-color);
167 }
168
169 .data-grid.variable-height-rows table.data tr.filler {
170  /* FIXME: This should show an alternating stripe, but it needs to know if the last row is even or odd. */
171     background-color: var(--even-zebra-stripe-row-background-color);
172 }
173
174 .data-grid td {
175     vertical-align: top;
176     height: 16px;
177     line-height: 16px;
178     padding: 2px 6px;
179     white-space: nowrap;
180     overflow: hidden;
181     font-family: -webkit-system-font, sans-serif;
182     font-variant-numeric: tabular-nums;
183 }
184
185 .data-grid td.spanning {
186     text-align: center;
187     color: hsl(0, 0%, 30%);
188     background-color: hsl(0, 0%, 95%);
189     pointer-events: none;
190 }
191
192 body[dir=ltr] .data-grid:focus tr.selected td:not(:last-child) {
193     border-right-color: hsl(210, 100%, 40%);
194 }
195
196 body[dir=rtl] .data-grid:focus tr.selected td:not(:last-child) {
197     border-left-color: hsl(210, 100%, 40%);
198 }
199
200 .data-grid :matches(th, td) > div {
201     white-space: nowrap;
202     text-overflow: ellipsis;
203     overflow: hidden;
204 }
205
206 /* FIXME: Remove this once <https://webkit.org/b/169972> is fixed. */
207 .data-grid td.editing > div {
208     text-overflow: clip;
209 }
210
211 .data-grid .centered div {
212     text-align: center;
213 }
214
215 .data-grid .right div {
216     text-align: end;
217 }
218
219 .data-grid th.sortable div {
220     position: relative;
221 }
222
223 body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
224     padding-right: var(--data-grid-sort-div-first-child-padding-end);
225 }
226
227 body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
228     padding-left: var(--data-grid-sort-div-first-child-padding-end);
229 }
230
231 .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
232     position: absolute;
233     top: 1px;
234     bottom: 0;
235     width: 9px;
236     height: 8px;
237     margin-bottom: auto;
238     margin-top: auto;
239     content: "";
240     background-size: 9px 8px;
241     background-repeat: no-repeat;
242 }
243
244 body[dir=ltr] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
245     right: 0;
246 }
247
248 body[dir=rtl] .data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child::after {
249     left: 0;
250 }
251
252 .data-grid th.sort-ascending > div:first-child::after {
253     background-image: url(../Images/SortIndicatorArrows.svg#up-arrow-normal);
254 }
255
256 .data-grid th.sort-descending > div:first-child::after {
257     background-image: url(../Images/SortIndicatorArrows.svg#down-arrow-normal);
258 }
259
260 .data-grid button {
261     line-height: 19px;
262 }
263
264 .data-grid tr.parent td.disclosure::before {
265     width: 13px;
266     height: 100%;
267     content: "";
268     background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
269     background-position-y: center;
270     background-size: 13px 13px;
271     background-repeat: no-repeat;
272 }
273
274 body[dir=rtl] .data-grid tr.parent td.disclosure::before {
275     transform: scaleX(-1);
276 }
277
278 body[dir=ltr] .data-grid tr.parent td.disclosure::before {
279     float: left;
280 }
281
282 body[dir=rtl] .data-grid tr.parent td.disclosure::before {
283     float: right;
284 }
285
286 .data-grid tr.parent.expanded td.disclosure::before {
287     background-image: url(../Images/DisclosureTriangles.svg#open-normal);
288 }
289
290 .data-grid:focus tr.parent.selected td.disclosure::before {
291     background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
292 }
293
294 .data-grid:focus tr.parent.expanded.selected td.disclosure::before {
295     background-image: url(../Images/DisclosureTriangles.svg#open-selected);
296 }
297
298 .data-grid tr.selected {
299     background-color: var(--selected-background-color-unfocused) !important;
300     color: inherit !important;
301 }
302
303 .data-grid:focus tr.selected {
304     background-color: var(--selected-background-color) !important;
305     color: var(--selected-foreground-color) !important;
306 }
307
308 .data-grid tr:not(.parent) td.disclosure {
309     text-indent: 13px;
310 }
311
312 .data-grid td .subtitle {
313     color: hsla(0, 0%, 0%, 0.7);
314 }
315
316 .data-grid td .subtitle::before {
317     content: " — ";
318 }
319
320 .data-grid:focus tr.selected td .subtitle {
321     color: hsla(0, 0%, 100%, 0.9);
322 }
323
324 .data-grid td.error {
325     color: var(--error-text-color);
326 }
327
328 .data-grid tr.selected td.error {
329     color: inherit;
330 }
331
332 .data-grid td .icon {
333     display: inline-block;
334     width: 16px;
335     height: 16px;
336     vertical-align: top;
337
338     --data-grid-icon-margin-end: 2px;
339 }
340
341 body[dir=ltr] .data-grid td .icon {
342     margin-right: var(--data-grid-icon-margin-end);
343 }
344
345 body[dir=rtl] .data-grid td .icon {
346     margin-left: var(--data-grid-icon-margin-end);
347 }
348
349 .data-grid td .go-to-arrow {
350     display: none;
351
352     --data-grid-go-to-arrow-margin-start: 2px;
353 }
354
355 body[dir=ltr] .data-grid td .go-to-arrow {
356     float: right;
357     margin-left: var(--data-grid-go-to-arrow-margin-start);
358 }
359
360 body[dir=rtl] .data-grid td .go-to-arrow {
361     float: left;
362     margin-right: var(--data-grid-go-to-arrow-margin-start);
363 }
364
365 .data-grid tr:matches(.selected, :hover) .go-to-arrow {
366     display: block;
367 }
368
369 .data-grid .resizer {
370     z-index: var(--z-index-resizer);
371     
372     --data-grid-resizer-translateX: -2.5px;
373 }
374
375 body[dir=ltr] .data-grid .resizer {
376     transform: translateX(var(--data-grid-resizer-translateX));
377 }
378
379 body[dir=rtl] .data-grid .resizer {
380     transform: translateX(calc(-1 * var(--data-grid-resizer-translateX)));
381 }
382
383 .data-grid table:matches(.header, .data) {
384     /* Hide starting border from first hidden columns. */
385     width: calc(100% + 1px);
386
387     --data-grid-table-margin-start: -1px;
388 }
389
390 body[dir=ltr] .data-grid table:matches(.header, .data) {
391     margin-left: var(--data-grid-table-margin-start);
392 }
393
394 body[dir=rtl] .data-grid table:matches(.header, .data) {
395     margin-right: var(--data-grid-table-margin-start);
396 }
397
398 body[dir=ltr] .data-grid :matches(th, td):first-child {
399     border-left: var(--data-grid-column-border-start);
400 }
401
402 body[dir=rtl] .data-grid :matches(th, td):first-child {
403     border-right: var(--data-grid-column-border-start);
404 }
405
406 @media (-webkit-min-device-pixel-ratio: 2) {
407     .data-grid table:matches(.header, .data) {
408         width: calc(100% + 0.5px);
409         
410         --data-grid-table-margin-start: -0.5px;
411     }
412
413     .data-grid :matches(th, td):first-child {
414         border-width: 0.5px;
415     }
416 }
417
418 .data-grid tr.editable .cell-content > input {
419     width: 100%;
420     height: 100%;
421     margin: 0;
422     padding: 0;
423     background: none;
424     border: none;
425     outline: none;
426 }
427
428 body:not(.window-inactive, .window-docked-inactive) .data-grid:focus tr.editable.selected .cell-content > input {
429     color: var(--selected-foreground-color);
430 }
431
432 @media (prefers-dark-interface) {
433     .data-grid td .subtitle {
434         color: var(--selected-secondary-text-color);
435     }
436
437     .data-grid:focus tr.selected td .subtitle {
438         color: hsla(0, 0%, var(--foreground-lightness), 0.9);
439     }
440
441     .data-grid tr.editable .cell-content > input {
442         color: inherit;
443     }
444
445     .data-grid td.spanning {
446         color: var(--text-color-secondary);
447         background-color: unset;
448     }
449 }