257 lines
6.4 KiB
CSS
257 lines
6.4 KiB
CSS
/*
|
|
* admin-canvas SDK styling — the whole SDK's CSS, in one file, no build step.
|
|
* Loaded with a plain <link>; nothing here reaches the network.
|
|
*
|
|
* A near-verbatim copy of digest-engine/render/digest-canvas-sdk/glow.css (docs/
|
|
* project-plan.md Phase 12), duplicated per Phase 13's decision to keep the two
|
|
* canvases decoupled — the `digest-` prefix is renamed to `admin-` throughout, the
|
|
* globe-specific rules are dropped (no globe here), and stat/chart/image/video
|
|
* rules are added at the bottom.
|
|
*/
|
|
|
|
:root {
|
|
--admin-bg: #070b12;
|
|
--admin-panel: rgba(16, 24, 38, 0.82);
|
|
--admin-edge: rgba(120, 180, 255, 0.28);
|
|
--admin-text: #d7e3f4;
|
|
--admin-muted: #8ba0bd;
|
|
--admin-accent: #8ab4ff;
|
|
--admin-good: #35d488;
|
|
--admin-warn: #e0a000;
|
|
--admin-glow-color: var(--admin-accent);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Glow / holo utilities — shared by window chrome and the new window kinds.
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.admin-glow {
|
|
text-shadow:
|
|
0 0 4px var(--admin-glow-color),
|
|
0 0 12px var(--admin-glow-color);
|
|
animation: admin-pulse 3.2s ease-in-out infinite;
|
|
}
|
|
|
|
.admin-glow-box {
|
|
box-shadow:
|
|
0 0 0 1px var(--admin-edge),
|
|
0 0 24px -6px var(--admin-glow-color),
|
|
0 18px 40px -24px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
@keyframes admin-pulse {
|
|
0%, 100% { filter: brightness(1); }
|
|
50% { filter: brightness(1.45); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.admin-glow { animation: none; }
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Canvas
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.admin-canvas {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
color: var(--admin-text);
|
|
background: radial-gradient(circle at 50% 0%, #0d1626 0%, var(--admin-bg) 70%);
|
|
font-family: "Inter", "Noto Sans", "DejaVu Sans", system-ui, sans-serif;
|
|
}
|
|
|
|
.admin-canvas-empty,
|
|
.admin-canvas-raw {
|
|
margin: 1rem;
|
|
padding: 1rem;
|
|
border: 1px solid var(--admin-edge);
|
|
border-radius: 8px;
|
|
color: var(--admin-muted);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-family: "DejaVu Sans Mono", ui-monospace, monospace;
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Window chrome
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.admin-window {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
border: 1px solid var(--admin-edge);
|
|
border-radius: 12px;
|
|
background: var(--admin-panel);
|
|
backdrop-filter: blur(6px);
|
|
box-shadow:
|
|
0 0 24px -10px var(--admin-accent),
|
|
0 20px 46px -28px rgba(0, 0, 0, 0.95);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.admin-window-positioned {
|
|
position: absolute;
|
|
}
|
|
|
|
.admin-window-titlebar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.55rem 0.85rem;
|
|
border-bottom: 1px solid var(--admin-edge);
|
|
background: linear-gradient(180deg, rgba(120, 180, 255, 0.12), rgba(120, 180, 255, 0.02));
|
|
}
|
|
|
|
.admin-window-dots {
|
|
flex: none;
|
|
width: 34px;
|
|
height: 8px;
|
|
background-image: radial-gradient(circle, var(--admin-accent) 3px, transparent 3px);
|
|
background-size: 12px 8px;
|
|
background-repeat: repeat-x;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.admin-window-title {
|
|
margin: 0;
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
color: var(--admin-accent);
|
|
}
|
|
|
|
.admin-window-body {
|
|
flex: 1 1 auto;
|
|
padding: 0.8rem 0.95rem 1rem;
|
|
font-size: 0.92rem;
|
|
line-height: 1.55;
|
|
overflow: auto;
|
|
}
|
|
|
|
.admin-window-body p { margin: 0 0 0.7rem; }
|
|
.admin-window-body p:last-child { margin-bottom: 0; }
|
|
.admin-window-body code {
|
|
padding: 0.05em 0.35em;
|
|
border-radius: 4px;
|
|
background: rgba(120, 180, 255, 0.12);
|
|
font-family: "DejaVu Sans Mono", ui-monospace, monospace;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.admin-window-list {
|
|
margin: 0;
|
|
padding-left: 1.1rem;
|
|
}
|
|
.admin-window-list li { margin-bottom: 0.4rem; }
|
|
|
|
.admin-window-error {
|
|
margin: 0;
|
|
padding: 0.8rem 0.95rem;
|
|
color: var(--admin-muted);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-family: "DejaVu Sans Mono", ui-monospace, monospace;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Stat cards — the 'stat' window kind (see render.js).
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.admin-window-stat .admin-window-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
gap: 0.2rem;
|
|
padding-top: 1.4rem;
|
|
padding-bottom: 1.4rem;
|
|
}
|
|
|
|
.admin-stat-value {
|
|
font-size: 2.6rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: var(--admin-accent);
|
|
}
|
|
|
|
.admin-stat-unit {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
margin-left: 0.25rem;
|
|
color: var(--admin-muted);
|
|
}
|
|
|
|
.admin-stat-label {
|
|
font-size: 0.85rem;
|
|
color: var(--admin-muted);
|
|
}
|
|
|
|
.admin-stat-trend-up { color: var(--admin-warn); }
|
|
.admin-stat-trend-down { color: var(--admin-good); }
|
|
.admin-stat-trend-flat { color: var(--admin-muted); }
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Image / video — the 'image' and 'video' window kinds.
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.admin-media {
|
|
display: block;
|
|
width: 100%;
|
|
max-height: 60vh;
|
|
object-fit: contain;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Chart — the 'chart' window kind: a dependency-free inline SVG bar/sparkline.
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.admin-chart-svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
.admin-chart-bar {
|
|
fill: var(--admin-accent);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.admin-chart-bar-label,
|
|
.admin-chart-bar-value {
|
|
fill: var(--admin-muted);
|
|
font-size: 6px;
|
|
font-family: "DejaVu Sans Mono", ui-monospace, monospace;
|
|
}
|
|
|
|
.admin-chart-sparkline-path {
|
|
fill: none;
|
|
stroke: var(--admin-accent);
|
|
stroke-width: 1.6;
|
|
stroke-linejoin: round;
|
|
stroke-linecap: round;
|
|
filter: drop-shadow(0 0 3px var(--admin-accent));
|
|
}
|
|
|
|
.admin-chart-sparkline-fill {
|
|
fill: url(#admin-chart-sparkline-gradient);
|
|
opacity: 0.25;
|
|
stroke: none;
|
|
}
|
|
|
|
.admin-window-body-caption {
|
|
margin: 0.5rem 0 0;
|
|
font-size: 0.78rem;
|
|
color: var(--admin-muted);
|
|
text-align: center;
|
|
}
|