tajniak81andClaude Opus 5
3c34b708b9
The control-mode picker offered all five paths to everyone, always. When one of them is broken in a deployment — OCPP is, right now — there was nothing to do about it: the superadmin could pick a different mode for the global layer, but the option stayed in every organization's and every user's dropdown, waiting to be chosen. The cascade could impose a mode. It could not withdraw one. So each layer now carries a second, separate thing: a list of the modes it hides from the layers below it. controlModesDisabled sits beside controlMode, on the global layer as a plugin config field and on an organization as part of the same pluginSettings blob its credentials already live in. A superadmin ticking Own CSMS and Proxy CSMS takes both OCPP paths out of every picker underneath; an org admin ticking Modbus takes it out of their own users'. Three decisions are worth naming. A hide-list governs the layers below, not the layer holding it. The superadmin can keep running Proxy globally while hiding it from everyone else, which is what you want while a mode is being repaired rather than retired: the operator testing the fix is the one person who still needs to select it. The alternative, a list that also invalidates its own layer's choice, would have made the panel contradict itself — a mode chosen in one field and switched off in the one below it. But a hidden mode really is hidden, not merely absent from a dropdown. A user who had picked Proxy last month stops resolving to Proxy the moment the superadmin hides it, and falls back to monitoring only. Filtering the picker alone would have left every existing charger on the broken path and quietly disagreed with the list the operator had just filled in. Resolution now walks the layers accumulating what each hides from the next, so a stored value only takes effect if the layers above it still permit it. And off is never hideable. It is what a charger falls back to and what an empty cascade resolves to, so a layer that could take it away could leave the layer below with a picker holding no valid choice at all. It is not among the checkboxes in any of the three clients, and the parser drops it if it arrives anyway. The panel needed a field shape it did not have — several options, any number chosen — so ConfigField grows a "multiselect" type, stored as the comma-separated string that fits the flat map every other field already uses. That is generic: any plugin can declare one now, and the PUT body is unchanged. The phone's field specs grew the same way, a scopeOptions hook that narrows a declared option list to what the server still offers, rather than teaching the integration card about control modes specifically. Both clients clamp a stored mode that has since been hidden back to off before drawing the picker, so the box shows what will actually happen rather than a choice that would be dropped on save. Verified: Go tests pass, both frontends build, flutter analyze is clean, and the panel's new checkbox field was rendered against the real stylesheet. The end-to-end path — superadmin hides a mode, an org admin and then a user reload and find it gone — has not been walked on a live stack; the panel is embedded in the Go binary, so the remote deployment needs a rebuild before any of this is visible there. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
339 lines
8.9 KiB
CSS
339 lines
8.9 KiB
CSS
/* DriverVault webfonts — Archivo (UI + display, italic 800 is the brand voice) + DM Mono (data/labels).
|
|
Must precede @import "tailwindcss": Tailwind v4 inlines its import into many
|
|
rules, so any @import after it would violate CSS's "imports must come first"
|
|
and be dropped from the build — which left the panel on system-ui while the
|
|
Web App, which has always had this order, rendered the real wordmark. */
|
|
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&family=DM+Mono:ital,wght@0,400;0,500&display=swap");
|
|
|
|
@import "tailwindcss";
|
|
|
|
/* Tailwind v4 defaults dark: to prefers-color-scheme; switch to a class strategy
|
|
so theme.js can toggle `.dark` on <html>. */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* ============================================================================
|
|
DriverVault design tokens (subset used by the API panel). Raw ramps + semantic
|
|
aliases; html.dark re-points the aliases so utilities flip for free.
|
|
========================================================================== */
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
--brand-900: #0b1730;
|
|
--brand-800: #0f1e3d;
|
|
--brand-700: #1e40af;
|
|
--brand-600: #2563eb;
|
|
--brand-500: #3b82f6;
|
|
--brand-400: #60a5fa;
|
|
--brand-300: #93c5fd;
|
|
--brand-200: #c7dbfb;
|
|
--brand-100: #e8f0fd;
|
|
|
|
--ink-900: #0f1e3d;
|
|
--ink-700: #28374f;
|
|
--ink-600: #3e4e68;
|
|
--ink-500: #5c6b85;
|
|
--ink-400: #7a8aa6;
|
|
--ink-300: #b4bece;
|
|
--ink-200: #d6deea;
|
|
--ink-100: #e4e9f2;
|
|
--ink-50: #eef2f8;
|
|
--ink-25: #f7f9fc;
|
|
--white: #ffffff;
|
|
|
|
--success-600: #1f8a5b;
|
|
--success-100: #e1f3ea;
|
|
--warning-600: #d9822b;
|
|
--warning-100: #fbeddd;
|
|
--danger-600: #dc2a45;
|
|
--danger-100: #fbe3e7;
|
|
--info-600: #2563eb;
|
|
--info-100: #e8f0fd;
|
|
|
|
--surface-page: var(--ink-25);
|
|
--surface-card: var(--white);
|
|
--surface-sunken: var(--ink-50);
|
|
|
|
--border-subtle: var(--ink-100);
|
|
--border-default: var(--ink-200);
|
|
--border-strong: var(--ink-300);
|
|
|
|
--text-strong: var(--ink-900);
|
|
--text-body: var(--ink-600);
|
|
--text-muted: var(--ink-400);
|
|
--text-brand: var(--brand-700);
|
|
|
|
--accent: var(--brand-600);
|
|
--accent-hover: var(--brand-700);
|
|
--focus-ring: var(--brand-400);
|
|
|
|
--shadow-xs: 0 1px 2px rgba(15, 30, 61, 0.06);
|
|
--shadow-sm: 0 1px 2px rgba(15, 30, 61, 0.04), 0 2px 6px rgba(15, 30, 61, 0.06);
|
|
--shadow-md: 0 1px 2px rgba(15, 30, 61, 0.04), 0 12px 30px -12px rgba(15, 30, 61, 0.14);
|
|
|
|
--font-display: "Archivo", system-ui, sans-serif;
|
|
--font-sans: "Archivo", system-ui, sans-serif;
|
|
--font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
|
|
--success-100: #12352a;
|
|
--warning-100: #3a2a16;
|
|
--danger-100: #3a1620;
|
|
--info-100: #122a4d;
|
|
|
|
--surface-page: #0b1730;
|
|
--surface-card: #13233f;
|
|
--surface-sunken: #0f1e38;
|
|
|
|
--border-subtle: #21324f;
|
|
--border-default: #2c3f5e;
|
|
--border-strong: #3c5173;
|
|
|
|
--text-strong: #f2f6fc;
|
|
--text-body: #b7c4d9;
|
|
--text-muted: #7c8ca8;
|
|
--text-brand: #93c5fd;
|
|
|
|
--accent: #3b82f6;
|
|
--accent-hover: #60a5fa;
|
|
--focus-ring: #60a5fa;
|
|
|
|
--success-600: #35b27a;
|
|
--warning-600: #e0a03a;
|
|
--danger-600: #e85c74;
|
|
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.4);
|
|
--shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 30px -12px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Map tokens into Tailwind's theme so semantic utilities exist and flip in dark
|
|
mode without a dark: variant. Utility names mirror the DriverVault web app.
|
|
========================================================================== */
|
|
@theme inline {
|
|
--font-sans: var(--font-sans);
|
|
--font-mono: var(--font-mono);
|
|
|
|
--color-brand-300: var(--brand-300);
|
|
--color-brand-400: var(--brand-400);
|
|
--color-brand-500: var(--brand-500);
|
|
--color-brand-600: var(--brand-600);
|
|
--color-brand-700: var(--brand-700);
|
|
--color-brand-900: var(--brand-900);
|
|
|
|
--color-page: var(--surface-page);
|
|
--color-card: var(--surface-card);
|
|
--color-sunken: var(--surface-sunken);
|
|
|
|
--color-strong: var(--text-strong);
|
|
--color-body: var(--text-body);
|
|
--color-muted: var(--text-muted);
|
|
--color-brandtext: var(--text-brand);
|
|
|
|
--color-subtle: var(--border-subtle);
|
|
--color-default: var(--border-default);
|
|
--color-strongline: var(--border-strong);
|
|
|
|
--color-accent: var(--accent);
|
|
--color-accent-hover: var(--accent-hover);
|
|
|
|
--color-success: var(--success-600);
|
|
--color-success-soft: var(--success-100);
|
|
--color-warning: var(--warning-600);
|
|
--color-warning-soft: var(--warning-100);
|
|
--color-danger: var(--danger-600);
|
|
--color-danger-soft: var(--danger-100);
|
|
--color-info: var(--info-600);
|
|
--color-info-soft: var(--info-100);
|
|
|
|
--radius-control: 12px;
|
|
--radius-card: 18px;
|
|
--radius-pill: 999px;
|
|
|
|
--shadow-xs: var(--shadow-xs);
|
|
--shadow-sm: var(--shadow-sm);
|
|
--shadow-card: var(--shadow-md);
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
background: var(--surface-page);
|
|
color: var(--text-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Small mono eyebrow labels (uppercase, tracked out). */
|
|
.eyebrow {
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Monospaced data (methods, paths, latencies) so columns align. */
|
|
.data {
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.02em;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Secondary button (theme toggle). */
|
|
.dh-btn-ghost {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
height: 34px;
|
|
padding: 0 12px;
|
|
border-radius: var(--radius-control);
|
|
border: 1px solid var(--border-default);
|
|
background: var(--surface-card);
|
|
color: var(--text-strong);
|
|
font-family: var(--font-sans);
|
|
font-weight: 600;
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: background-color 140ms ease, border-color 140ms ease;
|
|
}
|
|
.dh-btn-ghost:hover {
|
|
background: var(--surface-sunken);
|
|
border-color: var(--border-strong);
|
|
}
|
|
.dh-btn-ghost:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
}
|
|
|
|
/* Primary button (save, sign in, create). */
|
|
.dh-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
height: 34px;
|
|
padding: 0 14px;
|
|
border-radius: var(--radius-control);
|
|
border: 1px solid transparent;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-family: var(--font-sans);
|
|
font-weight: 600;
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
transition: background-color 140ms ease;
|
|
}
|
|
.dh-btn:hover:not(:disabled) {
|
|
background: var(--accent-hover);
|
|
}
|
|
.dh-btn:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
}
|
|
.dh-btn:disabled,
|
|
.dh-btn-ghost:disabled,
|
|
.dh-btn-danger:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Destructive button (delete a user, an org, an external plugin). */
|
|
.dh-btn-danger {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
border-radius: var(--radius-control);
|
|
border: 1px solid var(--border-default);
|
|
background: transparent;
|
|
color: var(--danger-600);
|
|
font-family: var(--font-sans);
|
|
font-weight: 600;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: background-color 140ms ease, border-color 140ms ease;
|
|
}
|
|
.dh-btn-danger:hover:not(:disabled) {
|
|
background: var(--danger-100);
|
|
border-color: var(--danger-600);
|
|
}
|
|
|
|
/* Form controls. */
|
|
.dh-input,
|
|
.dh-select {
|
|
width: 100%;
|
|
height: 36px;
|
|
padding: 0 10px;
|
|
border-radius: var(--radius-control);
|
|
border: 1px solid var(--border-default);
|
|
background: var(--surface-card);
|
|
color: var(--text-strong);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.8125rem;
|
|
transition: border-color 140ms ease;
|
|
}
|
|
.dh-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
.dh-input:focus,
|
|
.dh-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
}
|
|
/* Checkbox for multiselect config fields. accent-color keeps the native control
|
|
(and its keyboard behaviour) while tinting it to the panel's accent. */
|
|
.dh-checkbox {
|
|
width: 15px;
|
|
height: 15px;
|
|
flex: none;
|
|
accent-color: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
.dh-checkbox:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px var(--focus-ring);
|
|
border-radius: 3px;
|
|
}
|
|
.dh-label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-family: var(--font-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Status pill (health badges, roles, plugin kinds). */
|
|
.dh-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 9px;
|
|
border-radius: var(--radius-pill);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dh-card {
|
|
border: 1px solid var(--border-subtle);
|
|
background: var(--surface-card);
|
|
border-radius: var(--radius-card);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|