valknar
e1e571754a
Imports the visual direction from a claude.ai/design session ("PulseNode
Dashboard.dc.html") and reconciles it with the app's existing choices
rather than a wholesale swap: kept the IBM Plex Sans/Mono + Space
Grotesk typography and the pulse-green accent concept from the earlier
pass, adopted the imported design's structural ideas - a real
tonal/elevation token system (derived divider/muted colors via
color-mix instead of hardcoded per-theme duplicates, actual box-shadow
elevation), a 12-column bento grid with per-widget-type column spans
instead of uniform equal-width cards, fading-edge section dividers,
and a shared WidgetCard/MetricBar/StatusTag vocabulary so every widget
type stops repeating its own card markup.
Icons come from @phosphor-icons/react's /ssr entrypoint (bundled at
build time) rather than the imported design's unpkg.com CDN script -
that script is fine for the standalone design-tool preview, but a
runtime third-party call would break the self-hosted-only principle
already established (fonts self-hosted via next/font, no external
requests). New app/icon.svg reuses the same nav badge mark as the
favicon, replacing the never-touched create-next-app default.
Two new pieces of real functionality prompted by the design's mockup
toast/live-indicator, not just decoration: a "live" WebSocket
connection-status indicator (lib/ws/client.ts now tracks and exposes
real connection state), and a toast that fires on actual config:update
and config:error events - the latter finally surfaces config validation
failures in the browser, previously visible only in server logs despite
being designed for exactly this back in M1.
161 lines
3.5 KiB
CSS
161 lines
3.5 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--pn-bg: #1a1d1f;
|
|
--pn-surface: #24282b;
|
|
--pn-surface-raised: #2b3033;
|
|
--pn-fg: #f2f4f5;
|
|
--pn-fg-muted: color-mix(in srgb, var(--pn-fg) 55%, transparent);
|
|
--pn-border: color-mix(in srgb, var(--pn-fg) 14%, transparent);
|
|
--pn-accent: #5ee08c;
|
|
--pn-status-up: #5ee08c;
|
|
--pn-status-down: #ff5f6d;
|
|
--pn-status-degraded: #ffb84c;
|
|
--pn-shadow-sm: 0 0 0 1px var(--pn-border);
|
|
--pn-shadow-md: 0 0 0 1px var(--pn-border), 0 6px 18px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--pn-bg: #e9ebec;
|
|
--pn-surface: #f6f7f7;
|
|
--pn-surface-raised: #eceded;
|
|
--pn-fg: #1e2224;
|
|
--pn-accent: #339a5a;
|
|
--pn-status-up: #339a5a;
|
|
--pn-status-down: #dc2626;
|
|
--pn-status-degraded: #d97706;
|
|
--pn-shadow-md: 0 0 0 1px var(--pn-border), 0 6px 18px rgba(30, 32, 45, 0.1);
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root:not([data-theme]) {
|
|
--pn-bg: #e9ebec;
|
|
--pn-surface: #f6f7f7;
|
|
--pn-surface-raised: #eceded;
|
|
--pn-fg: #1e2224;
|
|
--pn-accent: #339a5a;
|
|
--pn-status-up: #339a5a;
|
|
--pn-status-down: #dc2626;
|
|
--pn-status-degraded: #d97706;
|
|
--pn-shadow-md: 0 0 0 1px var(--pn-border), 0 6px 18px rgba(30, 32, 45, 0.1);
|
|
}
|
|
}
|
|
|
|
@theme inline {
|
|
--color-bg: var(--pn-bg);
|
|
--color-surface: var(--pn-surface);
|
|
--color-surface-raised: var(--pn-surface-raised);
|
|
--color-border: var(--pn-border);
|
|
--color-fg: var(--pn-fg);
|
|
--color-fg-muted: var(--pn-fg-muted);
|
|
--color-accent: var(--pn-accent);
|
|
--color-status-up: var(--pn-status-up);
|
|
--color-status-down: var(--pn-status-down);
|
|
--color-status-degraded: var(--pn-status-degraded);
|
|
--radius-md: 0.625rem;
|
|
--radius-lg: 1rem;
|
|
--font-sans: var(--font-plex-sans);
|
|
--font-mono: var(--font-plex-mono);
|
|
--font-display: var(--font-space-grotesk);
|
|
}
|
|
|
|
body {
|
|
background: var(--pn-bg);
|
|
color: var(--pn-fg);
|
|
}
|
|
|
|
/* Rules fade to transparent at both ends instead of stopping cleanly. */
|
|
.pn-hr {
|
|
height: 1px;
|
|
flex: 1;
|
|
background: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
var(--pn-border) 32px,
|
|
var(--pn-border) calc(100% - 32px),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.pn-card {
|
|
transition:
|
|
box-shadow 0.18s ease,
|
|
transform 0.18s ease,
|
|
background 0.3s ease,
|
|
border-color 0.3s ease;
|
|
box-shadow: var(--pn-shadow-sm);
|
|
}
|
|
.pn-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
var(--pn-shadow-md),
|
|
0 0 0 1px color-mix(in srgb, var(--pn-accent) 35%, transparent);
|
|
}
|
|
|
|
@keyframes pn-toast-in {
|
|
from {
|
|
transform: translateY(12px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.pn-toast {
|
|
animation: pn-toast-in 0.28s ease;
|
|
}
|
|
|
|
@keyframes pn-spin-in {
|
|
from {
|
|
transform: rotate(-60deg) scale(0.6);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: rotate(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.pn-spin-in {
|
|
animation: pn-spin-in 0.35s ease;
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0 color-mix(in srgb, var(--pn-status-up) 55%, transparent);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 4px color-mix(in srgb, var(--pn-status-up) 0%, transparent);
|
|
}
|
|
}
|
|
.status-pulse {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.status-pulse,
|
|
.pn-toast,
|
|
.pn-spin-in {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.pn-bento {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.pn-bento {
|
|
grid-template-columns: repeat(6, 1fr) !important;
|
|
}
|
|
.pn-bento > * {
|
|
grid-column: 1 / -1 !important;
|
|
grid-row: auto !important;
|
|
}
|
|
.pn-live-label {
|
|
display: none !important;
|
|
}
|
|
}
|