.nightshade-table-wrap {
overflow: auto;
border: 1px solid var(--nightshade-panel-border);
border-radius: 9px;
}
.nightshade-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.nightshade-table thead th {
position: sticky;
top: 0;
text-align: left;
padding: 8px 10px;
background: var(--nightshade-panel-2);
color: var(--nightshade-text-dim);
border-bottom: 1px solid var(--nightshade-panel-border);
font-weight: 600;
white-space: nowrap;
}
.nightshade-table thead th.sortable {
cursor: pointer;
user-select: none;
}
.nightshade-table thead th.sortable:hover {
color: var(--nightshade-text);
}
.nightshade-table tbody td {
padding: 7px 10px;
border-bottom: 1px solid color-mix(in srgb, var(--nightshade-panel-border) 55%, transparent);
}
.nightshade-table tbody tr:hover {
background: var(--nightshade-hover);
}
.nightshade-table tbody tr:last-child td {
border-bottom: none;
}
.nightshade-table tbody tr.clickable {
cursor: pointer;
}
.nightshade-table tbody tr.selected {
background: var(--nightshade-accent-soft);
}
.nightshade-table thead th.sortable:focus-visible {
outline: 2px solid var(--nightshade-accent);
outline-offset: -2px;
}
.nightshade-table-shell {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 0;
}
.nightshade-table-filter {
align-self: flex-start;
min-width: 220px;
padding: 6px 10px;
border: 1px solid var(--nightshade-panel-border);
border-radius: 7px;
background: var(--nightshade-input-bg);
color: var(--nightshade-text);
font: inherit;
}
.nightshade-table-filter:focus {
outline: none;
border-color: var(--nightshade-accent);
}
.nightshade-table-wrap.sticky {
position: relative;
}
.nightshade-th {
position: relative;
}
.nightshade-th-label {
display: inline-flex;
align-items: center;
}
.nightshade-th-rank {
margin-left: 4px;
padding: 0 5px;
border-radius: 999px;
background: var(--nightshade-accent-soft);
color: var(--nightshade-accent);
font-size: 10px;
font-variant-numeric: tabular-nums;
}
.nightshade-th-grip {
position: absolute;
top: 0;
right: -3px;
width: 7px;
height: 100%;
cursor: col-resize;
touch-action: none;
}
.nightshade-th-grip:hover {
background: var(--nightshade-accent-soft);
}
.nightshade-spacer-row td {
border: none !important;
}
.nightshade-table-toolbar {
display: flex;
align-items: center;
gap: 8px;
}
.nightshade-table-columns {
position: relative;
}
.nightshade-table-columns-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 120;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 160px;
padding: 8px;
border: 1px solid var(--nightshade-panel-border);
border-radius: 9px;
background: var(--nightshade-panel);
box-shadow: var(--nightshade-shadow);
}
.nightshade-table-column-row {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.nightshade-table-pager {
display: flex;
align-items: center;
gap: 10px;
}
.nightshade-table-page {
color: var(--nightshade-text-dim);
font-variant-numeric: tabular-nums;
}
.nightshade-table tbody td.editable {
cursor: text;
}
.nightshade-cell-input {
width: 100%;
padding: 3px 6px;
border: 1px solid var(--nightshade-accent);
border-radius: 5px;
background: var(--nightshade-input-bg);
color: var(--nightshade-text);
font: inherit;
}
.nightshade-cell-input:focus {
outline: none;
}