.table {
width: 100%;
user-select: none;
font-size: 13px;
}
.table > .head > .cell,
.table > .body ul > li > .cell {
display: inline-block;
width: calc(var(--table-cell-width) - var(--table-row-indent, 0px));
}
.table > .head {
height: 25px;
font-size: 11px;
}
.table > .head > .cell {
text-align: start;
height: 100%;
background-color: rgb(240, 240, 240);
border-top: 1px solid var(--table-head-cell-border-color);
border-bottom: 1px solid var(--table-head-cell-border-color);
--table-head-cell-border-color: rgb(199, 199, 199);
}
@media (prefers-color-scheme: dark) {
.table > .head > .cell {
background-color: rgb(46, 46, 46);
--table-head-cell-border-color: rgb(75, 75, 75);
}
}
body.window-unfocused .table > .head > .cell {
background-color: rgb(246, 246, 246);
--table-head-cell-border-color: rgb(205, 205, 205);
}
@media (prefers-color-scheme: dark) {
body.window-unfocused .table > .head > .cell {
background-color: rgb(48, 48, 48);
--table-head-cell-border-color: rgb(72, 72, 72);
}
}
.table > .head > .cell:active {
background-color: rgb(227, 227, 227);
}
@media (prefers-color-scheme: dark) {
.table > .head > .cell:active {
background-color: rgb(75, 75, 75);
--table-head-cell-border-color: rgb(98, 98, 98);
}
}
.table > .head > .cell:not(:first-child):active {
width: calc(var(--table-cell-width) - var(--table-row-indent, 0px) + 2px);
margin-inline-start: -2px;
padding-inline-start: 1px;
border-inline-start: 1px solid var(--table-head-cell-border-color);
}
.table > .head > .cell:not(:last-child):active {
border-inline-end: 1px solid var(--table-head-cell-border-color);
}
.table > .head > .cell:active,
.table > .head > .cell.table-sort-direction-ascending,
.table > .head > .cell.table-sort-direction-descending {
font-weight: 500;
}
.table > .head > .cell > .data {
display: inline-block;
width: 100%;
height: 17px;
margin-top: 3px;
padding: 1px 4px 0;
}
.table > .head > .cell:not(:active) + .cell:not(:active) > .data::before {
display: inline-block;
float: inline-start;
width: 1px;
height: 17px;
margin-top: -1px;
margin-inline-start: -5px;
content: "";
background-color: rgb(220, 220, 220);
}
@media (prefers-color-scheme: dark) {
.table > .head > .cell:not(:active) + .cell:not(:active) > .data::before {
background-color: rgb(72, 72, 72);
}
}
.table > .head > .cell.table-sort-direction-ascending > .data::after,
.table > .head > .cell.table-sort-direction-descending > .data::after {
content: "\2303";
}
.table > .head > .cell.table-sort-direction-ascending > .data::after,
.table > .head > .cell.table-sort-direction-descending > .data::after {
float: inline-end;
margin-inline-end: 2px;
font-size: 10px;
}
.table > .head > .cell:not(:last-child):active.table-sort-direction-ascending > .data::after,
.table > .head > .cell:not(:last-child):active.table-sort-direction-descending > .data::after {
margin-inline-end: 1px;
}
.table > .head > .cell.table-sort-direction-ascending > .data::after {
margin-top: 2px;
}
.table > .head > .cell.table-sort-direction-descending > .data::after {
transform: scaleY(-1);
}
.table > .body {
position: relative;
}
.table > .body > ul {
min-height: 100%;
background-image: linear-gradient(var(--table-row-odd-background-color), var(--table-row-odd-background-color) 50%, var(--table-row-even-background-color) 50%, var(--table-row-even-background-color));
background-size: 100% calc(var(--table-cell-height) * 2);
--table-row-odd-background-color: rgb(255, 255, 255);
--table-row-even-background-color: rgb(245, 245, 245);
}
@media (prefers-color-scheme: dark) {
.table > .body > ul {
--table-row-odd-background-color: rgb(33, 33, 33);
--table-row-even-background-color: rgb(43, 43, 43);
}
}
.table > .body ul {
margin: 0;
padding: 0;
padding-inline-start: var(--table-child-rows-padding-start);
list-style: none;
overflow: hidden;
--table-child-rows-padding-start: 16px;
}
.table > .body ul > li.selected {
color: var(--selected-text-color);
}
.table > .body ul > li.selected::before {
position: absolute;
right: 0;
left: 0;
height: var(--table-cell-height);
content: "";
background-color: var(--selected-background-color);
}
.table > .body ul > li.parent:not(.expanded) + ul {
display: none;
}
.table > .body ul > li > .cell {
position: relative;
z-index: 1;
height: var(--table-cell-height);
padding: 0 3px;
vertical-align: top;
line-height: var(--table-cell-height);
}
.table > .body > ul > li > .cell:not(:last-child) {
border-inline-end: 1px solid transparent;
}
.table > .body ul > li:not(.parent) > .cell:first-child > .disclosure {
display: none;
}
.table > .body ul > li.parent > .cell:first-child > .disclosure {
position: absolute;
}
.table > .body ul > li.parent > .cell:first-child > .disclosure {
margin-top: -1px;
margin-inline-start: -11px;
font-family: monospace;
color: rgb(128, 128, 128);
}
@media (prefers-color-scheme: dark) {
.table > .body ul > li.parent > .cell:first-child > .disclosure {
color: rgb(152, 152, 152);
}
}
body:not(.window-unfocused) .table > .body ul > li.parent.selected > .cell:first-child > .disclosure {
color: rgb(255, 255, 255);
}
@media (prefers-color-scheme: dark) {
body:not(.window-unfocused) .table > .body ul > li.parent.selected > .cell:first-child > .disclosure {
color: rgb(219, 230, 249);
}
}
body[dir="ltr"] .table > .body ul > li.parent:not(.expanded) > .cell:first-child > .disclosure::before {
content: "\25B6";
}
body[dir="rtl"] .table > .body ul > li.parent:not(.expanded) > .cell:first-child > .disclosure::before {
content: "\25C0";
}
.table > .body ul > li.parent.expanded > .cell:first-child > .disclosure::before {
content: "\25BC";
}
.table > .body ul > li > .cell > .data {
display: inline-block;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.table > .body ul > li > .cell:first-child {
--table-row-indent: calc(var(--table-child-rows-padding-start, 0px) * (var(--table-row-depth, 0) + 1));
}