You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
241 lines
11 KiB
CSS
241 lines
11 KiB
CSS
/* ================================================================
|
|
SiMS Next design system — premium, themeable, offline-safe.
|
|
References: Stripe Dashboard (light clarity), Linear (dark, crisp
|
|
hairlines), Notion (neutral warmth). Fonts are bundled (Inter
|
|
Variable + JetBrains Mono Variable) — shop fonts are never trusted.
|
|
Mode + accent apply via <html data-theme=… data-accent=…> (theme.ts).
|
|
Class names are stable: restyling here restyles every screen.
|
|
================================================================ */
|
|
|
|
:root {
|
|
--font: 'Inter Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
--mono: 'JetBrains Mono Variable', 'Cascadia Mono', Consolas, monospace;
|
|
|
|
--radius: 8px;
|
|
--radius-lg: 14px;
|
|
--pad: 12px;
|
|
--speed: 140ms;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(16, 20, 28, 0.06);
|
|
--shadow-md: 0 2px 8px rgba(16, 20, 28, 0.08), 0 1px 2px rgba(16, 20, 28, 0.05);
|
|
--shadow-lg: 0 16px 48px rgba(16, 20, 28, 0.22), 0 4px 12px rgba(16, 20, 28, 0.1);
|
|
}
|
|
|
|
/* ---- accents (option to change colour) ---- */
|
|
[data-accent='indigo'] { --accent: #4f5df0; --accent-strong: #3f4cd9; --accent-contrast: #ffffff; }
|
|
[data-accent='blue'] { --accent: #2f7ce8; --accent-strong: #2368ca; --accent-contrast: #ffffff; }
|
|
[data-accent='emerald'] { --accent: #14957a; --accent-strong: #0f7f68; --accent-contrast: #ffffff; }
|
|
[data-accent='violet'] { --accent: #8250df; --accent-strong: #6f42c1; --accent-contrast: #ffffff; }
|
|
[data-accent='rose'] { --accent: #d4497c; --accent-strong: #bb3a6a; --accent-contrast: #ffffff; }
|
|
[data-accent='amber'] { --accent: #b97e10; --accent-strong: #a06a08; --accent-contrast: #ffffff; }
|
|
|
|
/* ---- light (default): Stripe-like clarity ---- */
|
|
:root, [data-theme='light'] {
|
|
--bg: #f6f7f9;
|
|
--bg-raised: #ffffff;
|
|
--bg-hover: #f0f2f5;
|
|
--bg-inset: #eef0f3;
|
|
--border: #e4e7ec;
|
|
--border-strong: #d4d9e0;
|
|
--text: #1a1f27;
|
|
--text-dim: #667084;
|
|
--ok: #147a52;
|
|
--warn: #9a6700;
|
|
--err: #c93a3a;
|
|
--accent-soft: color-mix(in srgb, var(--accent) 10%, var(--bg-raised));
|
|
--ok-soft: #e5f5ec;
|
|
--warn-soft: #fcf3dc;
|
|
--err-soft: #fdecec;
|
|
--scrollbar: #c9cfd8;
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* ---- dark: Linear-like depth ---- */
|
|
[data-theme='dark'] {
|
|
--bg: #0e1116;
|
|
--bg-raised: #161a21;
|
|
--bg-hover: #1e242e;
|
|
--bg-inset: #0a0d11;
|
|
--border: #262c37;
|
|
--border-strong: #333b49;
|
|
--text: #e8ecf1;
|
|
--text-dim: #8b95a6;
|
|
--ok: #43c288;
|
|
--warn: #e6b23e;
|
|
--err: #ef6a63;
|
|
--accent: color-mix(in srgb, var(--accent-strong) 20%, #7c8cff);
|
|
--accent-soft: color-mix(in srgb, var(--accent) 16%, var(--bg-raised));
|
|
--ok-soft: color-mix(in srgb, #43c288 14%, var(--bg-raised));
|
|
--warn-soft: color-mix(in srgb, #e6b23e 14%, var(--bg-raised));
|
|
--err-soft: color-mix(in srgb, #ef6a63 14%, var(--bg-raised));
|
|
--scrollbar: #333b49;
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
|
|
--shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ================= base ================= */
|
|
* { box-sizing: border-box; }
|
|
html, body, #root { height: 100%; margin: 0; }
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font: 400 14px/1.5 var(--font);
|
|
font-feature-settings: 'cv05', 'cv11';
|
|
-webkit-font-smoothing: antialiased;
|
|
transition: background var(--speed) ease, color var(--speed) ease;
|
|
}
|
|
h1, h2, h3 { letter-spacing: -0.015em; font-weight: 600; }
|
|
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
|
|
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
|
|
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
|
|
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
|
|
|
|
.num {
|
|
font-family: var(--font);
|
|
font-variant-numeric: tabular-nums lining-nums;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
/* ================= controls ================= */
|
|
button.wf {
|
|
background: var(--bg-raised); color: var(--text);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius); padding: 7px 14px;
|
|
font: 500 13.5px/1.45 var(--font); cursor: pointer;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: background var(--speed), border-color var(--speed), box-shadow var(--speed), transform 80ms;
|
|
}
|
|
button.wf:hover { background: var(--bg-hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
|
|
button.wf:active { transform: translateY(1px); box-shadow: none; }
|
|
button.wf.primary {
|
|
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent-strong));
|
|
border-color: var(--accent-strong); color: var(--accent-contrast); font-weight: 600;
|
|
box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-strong) 45%, transparent);
|
|
}
|
|
button.wf.primary:hover { filter: brightness(1.06); }
|
|
button.wf.danger { border-color: color-mix(in srgb, var(--err) 55%, var(--border-strong)); color: var(--err); }
|
|
button.wf.danger:hover { background: var(--err-soft); }
|
|
button.wf kbd {
|
|
background: color-mix(in srgb, currentColor 14%, transparent);
|
|
border-radius: 4px; padding: 0 5px; margin-left: 8px;
|
|
font-family: var(--mono); font-size: 10.5px; font-weight: 500;
|
|
}
|
|
|
|
input.wf, select.wf {
|
|
background: var(--bg-raised); color: var(--text);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius); padding: 7px 11px;
|
|
font: 400 13.5px/1.45 var(--font); width: 100%;
|
|
box-shadow: inset 0 1px 2px rgba(16, 20, 28, 0.04);
|
|
transition: border-color var(--speed), box-shadow var(--speed);
|
|
}
|
|
input.wf::placeholder { color: var(--text-dim); }
|
|
input.wf:focus, select.wf:focus {
|
|
outline: none; border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
|
|
}
|
|
|
|
/* ================= page scaffolding ================= */
|
|
.wf-page { padding: 24px 28px; max-width: 1400px; }
|
|
.wf-page-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
|
|
.wf-page-head h1 { font-size: 21px; margin: 0; }
|
|
.wf-page-desc { color: var(--text-dim); margin: 0 0 18px; max-width: 72ch; }
|
|
.wf-toolbar { display: flex; gap: 8px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
|
|
.wf-toolbar .spacer { flex: 1; }
|
|
|
|
/* ================= tables ================= */
|
|
table.wf {
|
|
border-collapse: separate; border-spacing: 0; width: 100%;
|
|
background: var(--bg-raised); border: 1px solid var(--border);
|
|
border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm);
|
|
}
|
|
table.wf th, table.wf td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--border); }
|
|
table.wf tr:last-child td { border-bottom: none; }
|
|
table.wf th {
|
|
background: color-mix(in srgb, var(--bg) 55%, var(--bg-raised));
|
|
color: var(--text-dim); font-weight: 600; font-size: 11px;
|
|
text-transform: uppercase; letter-spacing: 0.06em;
|
|
}
|
|
table.wf tbody tr { transition: background var(--speed); }
|
|
table.wf tbody tr:hover td { background: var(--accent-soft); }
|
|
table.wf td.num, table.wf th.num { text-align: right; }
|
|
|
|
/* ================= badges ================= */
|
|
.wf-badge {
|
|
display: inline-block; border-radius: 999px; padding: 2px 10px;
|
|
font-size: 12px; font-weight: 500;
|
|
background: var(--bg-inset); color: var(--text-dim);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.wf-badge.ok { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
|
|
.wf-badge.warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
|
|
.wf-badge.err { color: var(--err); background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 25%, transparent); }
|
|
.wf-badge.accent { color: var(--accent-strong); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
|
|
[data-theme='dark'] .wf-badge.accent { color: var(--accent); }
|
|
|
|
/* ================= stat cards ================= */
|
|
.wf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; margin: 16px 0; }
|
|
.wf-stat {
|
|
background: var(--bg-raised); border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg); padding: 16px;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: box-shadow var(--speed), transform var(--speed), border-color var(--speed);
|
|
}
|
|
.wf-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-strong); }
|
|
.wf-stat .label { color: var(--text-dim); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.wf-stat .value { font-size: 27px; font-weight: 650; letter-spacing: -0.02em; margin-top: 6px; }
|
|
.wf-stat .hint { color: var(--text-dim); font-size: 12.5px; margin-top: 3px; }
|
|
|
|
/* ================= misc surfaces ================= */
|
|
.wf-empty {
|
|
border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
|
|
padding: 38px; text-align: center; color: var(--text-dim); margin: 14px 0;
|
|
background: color-mix(in srgb, var(--bg-raised) 55%, transparent);
|
|
}
|
|
|
|
.wf-field { margin-bottom: 13px; }
|
|
.wf-field > label {
|
|
display: block; color: var(--text-dim); font-size: 12px; font-weight: 550;
|
|
margin-bottom: 5px; letter-spacing: 0.01em;
|
|
}
|
|
|
|
.wf-modal-back {
|
|
position: fixed; inset: 0; background: rgba(10, 13, 18, 0.45);
|
|
backdrop-filter: blur(5px);
|
|
display: flex; align-items: center; justify-content: center; z-index: 50;
|
|
}
|
|
.wf-modal {
|
|
background: var(--bg-raised); border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg); padding: 22px;
|
|
min-width: 430px; max-width: 740px; max-height: 85vh; overflow: auto;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.wf-modal h2 { margin: 0 0 14px; font-size: 17px; }
|
|
|
|
.wf-notice {
|
|
border-radius: var(--radius); padding: 9px 13px; margin: 10px 0;
|
|
border: 1px solid var(--border); background: var(--bg-raised);
|
|
font-size: 13px; box-shadow: var(--shadow-sm);
|
|
}
|
|
.wf-notice.ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); }
|
|
.wf-notice.warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
|
|
.wf-notice.err { border-color: color-mix(in srgb, var(--err) 35%, transparent); background: var(--err-soft); }
|
|
|
|
/* ================= theme switcher ================= */
|
|
.wf-themer { display: flex; align-items: center; gap: 6px; }
|
|
.wf-themer .swatch {
|
|
width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
|
|
border: 2px solid transparent; padding: 0;
|
|
transition: transform 80ms, border-color var(--speed);
|
|
}
|
|
.wf-themer .swatch:hover { transform: scale(1.18); }
|
|
.wf-themer .swatch.active { border-color: var(--text); }
|
|
.wf-themer .mode {
|
|
background: var(--bg-inset); border: 1px solid var(--border);
|
|
border-radius: 999px; padding: 3px 10px; cursor: pointer;
|
|
font: 500 12px var(--font); color: var(--text-dim);
|
|
}
|
|
.wf-themer .mode:hover { color: var(--text); border-color: var(--border-strong); }
|