[go: nahoru, domu]
Google Git
Sign in
chromium / devtools / devtools-frontend / f746fe4a57190be85ee170add03a16cf6cd4ba27 / . / front_end / ui / legacy / components / data_grid / dataGrid.css
blob: 6089ae91f5cb51fd57b5c4d2d27aa0094473dbd4 [file] [log] [blame]
Tim van der Lippea53672d2021-07-08 14:52:35[diff] [blame]1/*
2 * Copyright 2021 The Chromium Authors. All rights reserved.
3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file.
5 */
6
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]7.data-grid {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]8 position: relative;
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]9 border: 1px solid var(--color-details-hairline-light) !important; /* stylelint-disable-line declaration-no-important */
Jack Franklin49a94812021-02-05 14:20:12[diff] [blame]10 /* See: crbug.com/1152736 for color variable migration. */
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]11 line-height: 120%;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]12}
13
14.data-grid table {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]15 table-layout: fixed;
16 border-spacing: 0;
17 border-collapse: separate;
18 height: 100%;
19 width: 100%;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]20}
21
22.data-grid .header-container,
23.data-grid .data-container {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]24 position: absolute;
25 left: 0;
26 right: 0;
27 overflow-x: hidden;
Victor Porofa294d0e2021-09-03 15:40:05[diff] [blame]28 background-color: var(--color-background);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]29}
30
31.data-grid .header-container {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]32 top: 0;
33 height: 21px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]34}
35
36.data-grid .data-container {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]37 top: 21px;
38 bottom: 0;
39 overflow-y: overlay;
40 transform: translateZ(0);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]41}
42
Brandon Goddard5bd7d462019-12-17 20:40:14[diff] [blame]43.data-grid .aria-live-label {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]44 width: 1px;
45 height: 1px;
46 overflow: hidden;
Brandon Goddard5bd7d462019-12-17 20:40:14[diff] [blame]47}
48
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]49.data-grid.inline .header-container,
50.data-grid.inline .data-container {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]51 position: static;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]52}
53
Sigurd Schneidera152d612020-06-24 13:50:58[diff] [blame]54.data-grid .corner {
55 width: 14px;
56 padding-right: 0;
57 padding-left: 0;
Tim van der Lippeaf02dec2021-05-04 13:56:19[diff] [blame]58 border-left: 0 none transparent !important; /* stylelint-disable-line declaration-no-important */
Sigurd Schneidera152d612020-06-24 13:50:58[diff] [blame]59}
60
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]61.data-grid.inline .corner {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]62 display: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]63}
64
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]65.data-grid.data-grid-fits-viewport .corner {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]66 display: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]67}
68
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]69.data-grid .top-filler-td,
70.data-grid .bottom-filler-td {
Tim van der Lippeaf02dec2021-05-04 13:56:19[diff] [blame]71 height: auto !important; /* stylelint-disable-line declaration-no-important */
72 padding: 0 !important; /* stylelint-disable-line declaration-no-important */
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]73}
74
75.data-grid table.data {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]76 position: absolute;
77 left: 0;
78 top: 0;
79 right: 0;
80 bottom: 0;
81 border-top: 0 none transparent;
82 table-layout: fixed;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]83}
84
85.data-grid.inline table.data {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]86 position: static;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]87}
88
89.data-grid table.data tr {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]90 display: none;
91 height: 20px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]92}
93
94.data-grid table.data tr.revealed {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]95 display: table-row;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]96}
97
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]98.striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd):not(.dirty):not(.selected),
99.striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even):not(.dirty):not(.selected) {
100 background-color: var(--color-background-elevation-1);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]101}
102
103.data-grid td,
104.data-grid th {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]105 white-space: nowrap;
106 text-overflow: ellipsis;
107 overflow: hidden;
108 line-height: 18px;
109 height: 18px;
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]110 border-left: 1px solid var(--color-details-hairline);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]111 padding: 1px 4px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]112}
113
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]114.data-grid td {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]115 vertical-align: top;
116 user-select: text;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]117}
118
119.data-grid th {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]120 text-align: left;
Jack Franklin374ec392021-04-27 15:36:55[diff] [blame]121 background-color: var(--color-background-elevation-1);
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]122 border-bottom: 1px solid var(--color-details-hairline);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]123 font-weight: normal;
124 vertical-align: middle;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]125}
126
Sigurd Schneidera152d612020-06-24 13:50:58[diff] [blame]127.data-grid th:first-child,
128.data-grid td:first-child {
Tim van der Lippeaf02dec2021-05-04 13:56:19[diff] [blame]129 border-left: none !important; /* stylelint-disable-line declaration-no-important */
Sigurd Schneidera152d612020-06-24 13:50:58[diff] [blame]130}
131
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]132.data-grid td > div,
133.data-grid th > div {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]134 white-space: nowrap;
135 text-overflow: ellipsis;
136 overflow: hidden;
Alex Rudenko32b93f82020-06-08 10:46:08[diff] [blame]137 min-width: 8px;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]138}
139
140.data-grid td.editing > div {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]141 text-overflow: clip;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]142}
143
144.data-grid .center {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]145 text-align: center;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]146}
147
148.data-grid .right {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]149 text-align: right;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]150}
151
152.data-grid th.sortable {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]153 position: relative;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]154}
155
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]156.data-grid th .sort-order-icon-container {
Kateryna Prokopenko69666ff2021-10-18 12:32:57[diff] [blame]157 background-color: var(--color-background-elevation-1);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]158 position: absolute;
159 top: 1px;
160 right: 0;
161 bottom: 1px;
162 display: flex;
163 align-items: center;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]164}
165
Kateryna Prokopenko69666ff2021-10-18 12:32:57[diff] [blame]166.data-grid th:hover .sort-order-icon-container {
167 background-color: var(--color-background-highlight);
168}
169
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]170.data-grid th .sort-order-icon {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]171 margin-right: 4px;
172 margin-bottom: -2px;
173 display: none;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]174}
175
176.data-grid th.sort-ascending .sort-order-icon,
177.data-grid th.sort-descending .sort-order-icon {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]178 display: block;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]179}
180
Danil Somsikovb9b8df32021-09-13 07:28:26[diff] [blame]181.data-grid th.sort-ascending,
182.data-grid th.sort-descending {
183 padding-right: 14px;
184}
185
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]186.data-grid th.sortable:hover {
Jack Franklin06c18612021-07-19 08:58:00[diff] [blame]187 background-color: var(--color-background-highlight);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]188}
189
Brandon Goddard4d4c87f2019-07-30 20:39:47[diff] [blame]190.data-grid .top-filler-td {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]191 border-bottom: 0 none transparent;
192 line-height: 0;
Brandon Goddard4d4c87f2019-07-30 20:39:47[diff] [blame]193}
194
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]195.data-grid button {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]196 line-height: 18px;
197 color: inherit;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]198}
199
200.data-grid td.disclosure::before {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]201 user-select: none;
Tim van der Lippe88ba72d2021-03-04 14:54:14[diff] [blame]202 -webkit-mask-image: var(--image-file-treeoutlineTriangles);
Tim van der Lippe2efbb1b2020-07-14 14:24:20[diff] [blame]203 -webkit-mask-position: 0 0;
204 -webkit-mask-size: 32px 24px;
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]205 float: left;
206 width: 8px;
207 height: 12px;
208 margin-right: 2px;
209 content: "";
210 position: relative;
211 top: 3px;
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]212 background-color: var(--color-text-secondary);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]213}
214
215.data-grid tr:not(.parent) td.disclosure::before {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]216 background-color: transparent;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]217}
218
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]219.data-grid tr.expanded td.disclosure::before {
Tim van der Lippe2efbb1b2020-07-14 14:24:20[diff] [blame]220 -webkit-mask-position: -16px 0;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]221}
222
223.data-grid table.data tr.revealed.selected {
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]224 background-color: var(--color-background-highlight);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]225 color: inherit;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]226}
227
Sigurd Schneider4b84d5b2021-02-17 11:03:14[diff] [blame]228.data-grid table.data tr.revealed.selected.dirty {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]229 color: var(--legacy-selection-fg-color);
Sigurd Schneider4b84d5b2021-02-17 11:03:14[diff] [blame]230}
231
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]232.data-grid.no-selection:focus-visible {
Tim van der Lippeaf02dec2021-05-04 13:56:19[diff] [blame]233 border: 1px solid var(--legacy-accent-color) !important; /* stylelint-disable-line declaration-no-important */
Brandon Goddardcba421f2019-10-31 16:09:49[diff] [blame]234}
235
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]236.data-grid:focus table.data tr.selected {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]237 background-color: var(--legacy-selection-bg-color);
238 color: var(--legacy-selection-fg-color);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]239}
240
Sigurd Schneider4b84d5b2021-02-17 11:03:14[diff] [blame]241.data-grid:focus tr.selected.dirty {
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]242 --override-data-grid-dirty-background-color: hsl(0deg 100% 70%);
Sigurd Schneider4b84d5b2021-02-17 11:03:14[diff] [blame]243}
244
245.data-grid table.data tr.selected.dirty {
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]246 --override-data-grid-dirty-background-color: hsl(0deg 100% 30%);
247
248 background-color: var(--override-data-grid-dirty-background-color);
Sigurd Schneider4b84d5b2021-02-17 11:03:14[diff] [blame]249}
250
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]251.data-grid:focus tr.selected .devtools-link {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]252 color: var(--legacy-selection-fg-color);
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]253}
254
255.data-grid:focus tr.parent.selected td.disclosure::before {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]256 background-color: var(--legacy-selection-fg-color);
Tim van der Lippe2efbb1b2020-07-14 14:24:20[diff] [blame]257 -webkit-mask-position: 0 0;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]258}
259
260.data-grid:focus tr.expanded.selected td.disclosure::before {
Jack Franklin9b1435f2021-04-28 13:25:49[diff] [blame]261 background-color: var(--legacy-selection-fg-color);
Tim van der Lippe2efbb1b2020-07-14 14:24:20[diff] [blame]262 -webkit-mask-position: -16px 0;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]263}
264
265.data-grid tr.inactive {
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]266 color: var(--color-text-disabled);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]267 font-style: italic;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]268}
269
270.data-grid tr.dirty {
Jack Franklincea0d712021-05-05 13:26:42[diff] [blame]271 --override-data-grid-dirty-background-color: hsl(0deg 100% 92%);
272
273 background-color: var(--override-data-grid-dirty-background-color);
274 color: var(--color-red);
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]275 font-style: normal;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]276}
277
Brian Cui6a60ef12019-12-18 21:31:48[diff] [blame]278.data-grid td.show-more {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]279 white-space: normal;
Brian Cui6a60ef12019-12-18 21:31:48[diff] [blame]280}
281
282.data-grid td.show-more::before {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]283 display: none;
Brian Cui6a60ef12019-12-18 21:31:48[diff] [blame]284}
285
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]286.data-grid-resizer {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]287 position: absolute;
288 top: 0;
289 bottom: 0;
290 width: 5px;
291 z-index: 500;
Blink Reformat4c46d092018-04-07 15:32:37[diff] [blame]292}
Kham Udome2250012020-02-17 20:40:25[diff] [blame]293
294@media (forced-colors: active) {
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]295 .sort-order-icon-container [is=ui-icon].icon-mask,
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]296 .data-grid td.disclosure::before {
297 forced-color-adjust: none;
298 background-color: ButtonText;
299 }
300
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]301 .data-grid.no-selection:focus-visible * {
302 color: ButtonText;
303 }
304
Sigurd Schneidera152d612020-06-24 13:50:58[diff] [blame]305 .data-grid th.sortable:hover *,
Tim van der Lippef746fe42021-11-04 16:11:54[diff] [blame^]306 .data-grid th.sortable:hover .sort-order-icon-container [is=ui-icon].icon-mask,
Sigurd Schneidera152d612020-06-24 13:50:58[diff] [blame]307 .data-grid tr.parent.selected td.disclosure::before,
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]308 .data-grid:focus tr.parent.selected td.disclosure::before,
Sigurd Schneidera152d612020-06-24 13:50:58[diff] [blame]309 .data-grid table.data tr.parent.revealed:hover td.disclosure::before {
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]310 background-color: HighlightText;
311 }
312
Sigurd Schneidera152d612020-06-24 13:50:58[diff] [blame]313 .striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd),
314 .striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even),
315 .request-cookies-view tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
316 .cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
317 background-color: canvas;
318 }
319
Peter Marshall9a3d85f2020-08-12 14:38:00[diff] [blame]320 .data-grid.no-selection:focus-visible {
Sigurd Schneidera152d612020-06-24 13:50:58[diff] [blame]321 forced-color-adjust: none;
322 border-color: Highlight;
323 }
324
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]325 .data-grid th.sortable:hover,
326 .data-grid table.data tr.revealed:hover,
327 .data-grid table.data tr.revealed.selected,
328 .striped-data-grid .revealed:hover.data-grid-data-grid-node:nth-child(odd),
329 .striped-data-grid-starts-with-odd .revealed:hover.data-grid-data-grid-node:nth-child(even),
330 .request-cookies-view tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
331 .cookies-table tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
332 forced-color-adjust: none;
333 background-color: Highlight;
334 }
335
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]336 .data-grid table.data tr.revealed:hover *,
337 .data-grid table.data tr.revealed.selected *,
338 .data-grid table.data tr.revealed:focus *,
339 .data-grid table.data tr.revealed:hover .heap-object-tag {
340 color: HighlightText;
341 }
342
Mathias Bynensb0c1f4b2020-05-15 14:34:41[diff] [blame]343 .data-grid th {
344 background-color: canvas;
345 border-color: Highlight;
346 }
Kham Udome2250012020-02-17 20:40:25[diff] [blame]347}