mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34: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>
153 lines
3.6 KiB
CSS
153 lines
3.6 KiB
CSS
/* ==========================================================================
|
|
Northwire Ops — dashboard layout
|
|
--------------------------------------------------------------------------
|
|
Layout only. A data-dense view is where a design system is tested hardest:
|
|
there are more things on screen than anywhere else, so any inconsistency in
|
|
spacing or weight shows up immediately. Nothing here restates the language —
|
|
even the chart draws itself in semantic colors.
|
|
========================================================================== */
|
|
|
|
html, body { block-size: 100%; }
|
|
|
|
.app {
|
|
display: grid;
|
|
grid-template-columns: 15rem 1fr;
|
|
min-block-size: 100svh;
|
|
}
|
|
|
|
@media (max-width: 62rem) {
|
|
.app { grid-template-columns: 1fr; }
|
|
.app__sidebar { display: none; }
|
|
}
|
|
|
|
.app__main {
|
|
min-inline-size: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.app__content {
|
|
flex: 1;
|
|
padding: var(--nv-space-6) var(--nv-layout-gutter) var(--nv-space-12);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--nv-space-6);
|
|
max-inline-size: 80rem;
|
|
inline-size: 100%;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.page-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: var(--nv-space-4);
|
|
}
|
|
|
|
/* --- Stat tiles -------------------------------------------------------------- */
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
|
|
gap: var(--nv-space-4);
|
|
}
|
|
|
|
.stat__value {
|
|
display: block;
|
|
margin-block: var(--nv-space-2) var(--nv-space-1);
|
|
font-size: var(--nv-font-size-3xl);
|
|
font-weight: var(--nv-font-weight-semibold);
|
|
letter-spacing: var(--nv-letter-spacing-tighter);
|
|
color: var(--nv-color-text-primary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* --- Chart --------------------------------------------------------------------
|
|
Drawn in semantic colors, so it follows the brand and both appearances with
|
|
no second palette to maintain. */
|
|
|
|
.chart {
|
|
inline-size: 100%;
|
|
block-size: 14rem;
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
|
|
.chart__grid {
|
|
stroke: var(--nv-color-border-subtle);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.chart__line {
|
|
fill: none;
|
|
stroke: var(--nv-color-accent);
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.chart__line--compare {
|
|
stroke: var(--nv-color-border-strong);
|
|
stroke-dasharray: 4 4;
|
|
}
|
|
|
|
.chart__area {
|
|
fill: url(#chart-fill);
|
|
}
|
|
|
|
.chart__labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-block-start: var(--nv-space-2);
|
|
}
|
|
|
|
/* --- Layout of the lower half --------------------------------------------------- */
|
|
|
|
.split {
|
|
display: grid;
|
|
gap: var(--nv-space-6);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (min-width: 70rem) {
|
|
.split { grid-template-columns: 1.6fr 1fr; }
|
|
}
|
|
|
|
.activity {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.activity li {
|
|
display: flex;
|
|
gap: var(--nv-space-3);
|
|
padding-block: var(--nv-space-3);
|
|
border-block-end: var(--nv-border-width) solid var(--nv-color-border-subtle);
|
|
}
|
|
|
|
.activity li:last-child { border-block-end: 0; }
|
|
|
|
.activity__mark {
|
|
inline-size: var(--nv-space-2);
|
|
block-size: var(--nv-space-2);
|
|
border-radius: var(--nv-radius-full);
|
|
margin-block-start: 0.45em;
|
|
flex: none;
|
|
background-color: var(--nv-color-border-strong);
|
|
}
|
|
|
|
.activity__mark--danger { background-color: var(--nv-color-danger); }
|
|
.activity__mark--success { background-color: var(--nv-color-success); }
|
|
.activity__mark--accent { background-color: var(--nv-color-accent); }
|
|
.activity__mark--warning { background-color: var(--nv-color-warning); }
|
|
|
|
.service-name {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--nv-space-2-5);
|
|
}
|