mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-02 20:24:26 +00:00
23b8dd376d
Bevelled controls with light falling across them, fields as wells, solid windows, and glass kept for the chrome that floats over everything else. Warm graphite in dark, soft paper in light, one brand color driving both. Ships its own fonts (Instrument Sans, JetBrains Mono; OFL). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
95 lines
2.5 KiB
CSS
95 lines
2.5 KiB
CSS
/* ==========================================================================
|
|
Niveus — Table
|
|
--------------------------------------------------------------------------
|
|
<div class="nv-table-frame">
|
|
<table class="nv-table"> … </table>
|
|
</div>
|
|
|
|
Rows of the same kind of thing. The frame handles the overflow, because a
|
|
table is the one component that legitimately refuses to get narrower — it
|
|
scrolls sideways inside its frame rather than forcing the page to.
|
|
|
|
Numbers belong in .nv-table__number: aligned to the end and set in tabular
|
|
figures, so columns of digits line up and can be compared by eye.
|
|
========================================================================== */
|
|
|
|
.nv-table-frame {
|
|
inline-size: 100%;
|
|
overflow-x: auto;
|
|
overscroll-behavior-inline: contain;
|
|
}
|
|
|
|
.nv-table {
|
|
inline-size: 100%;
|
|
border-collapse: collapse;
|
|
font: var(--nv-font-body);
|
|
text-align: start;
|
|
}
|
|
|
|
.nv-table th {
|
|
padding: var(--nv-space-2-5) var(--nv-space-4);
|
|
font: var(--nv-font-caption);
|
|
font-weight: var(--nv-font-weight-semibold);
|
|
letter-spacing: var(--nv-letter-spacing-wide);
|
|
color: var(--nv-color-text-tertiary);
|
|
text-align: start;
|
|
white-space: nowrap;
|
|
border-block-end: var(--nv-border-width) solid var(--nv-color-border);
|
|
}
|
|
|
|
.nv-table td {
|
|
padding: var(--nv-space-3) var(--nv-space-4);
|
|
color: var(--nv-color-text-secondary);
|
|
border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* The first cell in a row names it, so it carries the reading weight. */
|
|
.nv-table td:first-child {
|
|
color: var(--nv-color-text-primary);
|
|
font-weight: var(--nv-font-weight-medium);
|
|
}
|
|
|
|
.nv-table tbody tr:last-child td {
|
|
border-block-end: 0;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
.nv-table tbody tr {
|
|
transition: var(--nv-transition-colors);
|
|
}
|
|
|
|
.nv-table tbody tr:hover {
|
|
background-color: var(--nv-color-surface-hover);
|
|
}
|
|
}
|
|
|
|
.nv-table__number {
|
|
text-align: end;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.nv-table__actions {
|
|
inline-size: 1%;
|
|
white-space: nowrap;
|
|
text-align: end;
|
|
}
|
|
|
|
.nv-table--compact th {
|
|
padding-block: var(--nv-space-2);
|
|
}
|
|
|
|
.nv-table--compact td {
|
|
padding-block: var(--nv-space-2);
|
|
}
|
|
|
|
/* Rows that lead somewhere. Same physical language as an interactive card:
|
|
it responds to a pointer, so it must look like it can be pressed. */
|
|
.nv-table--interactive tbody tr {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nv-table--interactive tbody tr:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--nv-focus-ring);
|
|
}
|