266 lines
6.3 KiB
CSS
266 lines
6.3 KiB
CSS
/*
|
|
* digest-canvas SDK styling — the whole SDK's CSS, in one file, no build step.
|
|
* Loaded with a plain <link>; nothing here reaches the network.
|
|
*/
|
|
|
|
:root {
|
|
--digest-bg: #070b12;
|
|
--digest-panel: rgba(16, 24, 38, 0.82);
|
|
--digest-edge: rgba(120, 180, 255, 0.28);
|
|
--digest-text: #d7e3f4;
|
|
--digest-muted: #8ba0bd;
|
|
--digest-accent: #8ab4ff;
|
|
--digest-red: #e00000;
|
|
--digest-glow-color: var(--digest-accent);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Glow / holo utilities — shared by globe markers and window chrome.
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.digest-glow {
|
|
text-shadow:
|
|
0 0 4px var(--digest-glow-color),
|
|
0 0 12px var(--digest-glow-color);
|
|
animation: digest-pulse 3.2s ease-in-out infinite;
|
|
}
|
|
|
|
.digest-glow-box {
|
|
box-shadow:
|
|
0 0 0 1px var(--digest-edge),
|
|
0 0 24px -6px var(--digest-glow-color),
|
|
0 18px 40px -24px rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
@keyframes digest-pulse {
|
|
0%, 100% { filter: brightness(1); }
|
|
50% { filter: brightness(1.45); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.digest-glow { animation: none; }
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Canvas
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.digest-canvas {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
color: var(--digest-text);
|
|
background: radial-gradient(circle at 50% 0%, #0d1626 0%, var(--digest-bg) 70%);
|
|
font-family: "Inter", "Noto Sans", "DejaVu Sans", system-ui, sans-serif;
|
|
}
|
|
|
|
.digest-canvas-empty,
|
|
.digest-canvas-raw {
|
|
margin: 1rem;
|
|
padding: 1rem;
|
|
border: 1px solid var(--digest-edge);
|
|
border-radius: 8px;
|
|
color: var(--digest-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
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.digest-window {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
border: 1px solid var(--digest-edge);
|
|
border-radius: 12px;
|
|
background: var(--digest-panel);
|
|
backdrop-filter: blur(6px);
|
|
box-shadow:
|
|
0 0 24px -10px var(--digest-accent),
|
|
0 20px 46px -28px rgba(0, 0, 0, 0.95);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.digest-window-positioned {
|
|
position: absolute;
|
|
}
|
|
|
|
.digest-window-titlebar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.55rem 0.85rem;
|
|
border-bottom: 1px solid var(--digest-edge);
|
|
background: linear-gradient(180deg, rgba(120, 180, 255, 0.12), rgba(120, 180, 255, 0.02));
|
|
}
|
|
|
|
.digest-window-dots {
|
|
flex: none;
|
|
width: 34px;
|
|
height: 8px;
|
|
background-image: radial-gradient(circle, var(--digest-accent) 3px, transparent 3px);
|
|
background-size: 12px 8px;
|
|
background-repeat: repeat-x;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.digest-window-title {
|
|
margin: 0;
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
color: var(--digest-accent);
|
|
}
|
|
|
|
.digest-window-body {
|
|
flex: 1 1 auto;
|
|
padding: 0.8rem 0.95rem 1rem;
|
|
font-size: 0.92rem;
|
|
line-height: 1.55;
|
|
overflow: auto;
|
|
}
|
|
|
|
.digest-window-body p { margin: 0 0 0.7rem; }
|
|
.digest-window-body p:last-child { margin-bottom: 0; }
|
|
.digest-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;
|
|
}
|
|
|
|
.digest-window-list {
|
|
margin: 0;
|
|
padding-left: 1.1rem;
|
|
}
|
|
.digest-window-list li { margin-bottom: 0.4rem; }
|
|
|
|
.digest-window-error {
|
|
margin: 0;
|
|
padding: 0.8rem 0.95rem;
|
|
color: var(--digest-muted);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-family: "DejaVu Sans Mono", ui-monospace, monospace;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.digest-window-globe .digest-window-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Globe
|
|
* --------------------------------------------------------------------------- */
|
|
|
|
.digest-globe {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 520px;
|
|
aspect-ratio: 1 / 1;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.digest-globe-caption {
|
|
margin: 0.7rem 0 0;
|
|
font-size: 0.85rem;
|
|
color: var(--digest-muted);
|
|
}
|
|
|
|
.digest-globe-svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.digest-globe-ocean {
|
|
fill: #0b1728;
|
|
stroke: none;
|
|
}
|
|
|
|
.digest-globe-limb {
|
|
fill: none;
|
|
stroke: var(--digest-accent);
|
|
stroke-width: 0.8;
|
|
opacity: 0.65;
|
|
filter: drop-shadow(0 0 6px var(--digest-accent));
|
|
}
|
|
|
|
.digest-globe-graticule path {
|
|
fill: none;
|
|
stroke: var(--digest-accent);
|
|
stroke-width: 0.35;
|
|
opacity: 0.18;
|
|
}
|
|
|
|
.digest-globe-land path {
|
|
fill: none;
|
|
stroke: var(--digest-accent);
|
|
stroke-width: 0.9;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.digest-globe-markers {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.digest-globe-marker {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
transform: translate(-50%, -50%);
|
|
transition: opacity 120ms linear;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.digest-marker-icon {
|
|
font-size: 1.05rem;
|
|
line-height: 1;
|
|
color: var(--digest-accent);
|
|
}
|
|
|
|
.digest-marker-label {
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 4px;
|
|
background: rgba(7, 11, 18, 0.72);
|
|
font-size: 0.62rem;
|
|
letter-spacing: 0.04em;
|
|
color: var(--digest-text);
|
|
}
|
|
|
|
/*
|
|
* ☭ (U+262D HAMMER AND SICKLE). Nerd Fonts patches do NOT carry this codepoint,
|
|
* so the usual kiosk font stack renders it as tofu. This stack lists the fonts
|
|
* that actually ship the glyph (Noto Symbols 2 and DejaVu Sans are both present
|
|
* on a stock Debian thin-client image) ahead of any UI font, and the emoji
|
|
* fallbacks cover a browser that only has a colour font for it.
|
|
*/
|
|
.digest-icon-hammer-sickle {
|
|
font-family: "Noto Sans Symbols 2", "Noto Sans Symbols2", "Symbola", "DejaVu Sans",
|
|
"Segoe UI Symbol", "Noto Color Emoji", sans-serif;
|
|
font-size: 1.25rem;
|
|
color: var(--digest-red);
|
|
--digest-glow-color: var(--digest-red);
|
|
text-shadow:
|
|
0 0 5px var(--digest-red),
|
|
0 0 14px var(--digest-red);
|
|
}
|
|
|
|
.digest-icon-star {
|
|
font-family: "DejaVu Sans", "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
|
|
}
|