mirror of
https://github.com/phranck/TUIkit.git
synced 2026-06-20 09:54:37 +00:00
429 lines
9.3 KiB
CSS
429 lines
9.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
@font-face {
|
|
font-family: "WarText";
|
|
src: url("/fonts/WarText.ttf") format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Themes: Green → Amber → Red → Violet → Blue → White */
|
|
|
|
/* Theme: Green (default) */
|
|
:root,
|
|
[data-theme="green"] {
|
|
--avatar-hue: 70deg;
|
|
--background: #060a07;
|
|
--foreground: #33ff33;
|
|
--accent: #66ff66;
|
|
--accent-secondary: #00cc00;
|
|
--accent-glow: 102, 255, 102;
|
|
--accent-glow-secondary: 0, 204, 0;
|
|
--accent-glow-tertiary: 31, 143, 31;
|
|
--headline-color: #33ff33;
|
|
--headline-glow: 51, 255, 51;
|
|
--muted: #1f8f1f;
|
|
--border: #2d5a2d;
|
|
--container-body: #0e271c;
|
|
--container-cap: #0a1b13;
|
|
}
|
|
|
|
/* Theme: Amber */
|
|
[data-theme="amber"] {
|
|
--avatar-hue: 10deg;
|
|
--background: #0a0706;
|
|
--foreground: #ffaa00;
|
|
--accent: #ffcc33;
|
|
--accent-secondary: #cc9900;
|
|
--accent-glow: 255, 204, 51;
|
|
--accent-glow-secondary: 204, 153, 0;
|
|
--accent-glow-tertiary: 143, 102, 0;
|
|
--headline-color: #ffaa00;
|
|
--headline-glow: 255, 170, 0;
|
|
--muted: #8f6600;
|
|
--border: #5a4a2d;
|
|
--container-body: #251710;
|
|
--container-cap: #1e110e;
|
|
}
|
|
|
|
/* Theme: Red */
|
|
[data-theme="red"] {
|
|
--avatar-hue: -30deg;
|
|
--background: #0a0606;
|
|
--foreground: #ff4444;
|
|
--accent: #ff6666;
|
|
--accent-secondary: #cc4444;
|
|
--accent-glow: 255, 68, 68;
|
|
--accent-glow-secondary: 204, 51, 51;
|
|
--accent-glow-tertiary: 143, 34, 34;
|
|
--headline-color: #ff4444;
|
|
--headline-glow: 255, 68, 68;
|
|
--muted: #8f2222;
|
|
--border: #5a2d2d;
|
|
--container-body: #281112;
|
|
--container-cap: #1e0f10;
|
|
}
|
|
|
|
/* Theme: Violet */
|
|
[data-theme="violet"] {
|
|
--avatar-hue: 210deg;
|
|
--background: #08060a;
|
|
--foreground: #bb77ff;
|
|
--accent: #cc99ff;
|
|
--accent-secondary: #9944dd;
|
|
--accent-glow: 204, 153, 255;
|
|
--accent-glow-secondary: 153, 68, 221;
|
|
--accent-glow-tertiary: 119, 68, 170;
|
|
--headline-color: #bb77ff;
|
|
--headline-glow: 187, 119, 255;
|
|
--muted: #7744aa;
|
|
--border: #4a2d5a;
|
|
--container-body: #1a1028;
|
|
--container-cap: #120c1e;
|
|
}
|
|
|
|
/* Theme: Blue (VFD) */
|
|
[data-theme="blue"] {
|
|
--avatar-hue: 160deg;
|
|
--background: #060708;
|
|
--foreground: #00aaff;
|
|
--accent: #33bbff;
|
|
--accent-secondary: #0099dd;
|
|
--accent-glow: 51, 187, 255;
|
|
--accent-glow-secondary: 0, 153, 221;
|
|
--accent-glow-tertiary: 0, 102, 153;
|
|
--headline-color: #00aaff;
|
|
--headline-glow: 0, 170, 255;
|
|
--muted: #006699;
|
|
--border: #2d4a5a;
|
|
--container-body: #0e1825;
|
|
--container-cap: #0a121c;
|
|
}
|
|
|
|
/* Theme: White */
|
|
[data-theme="white"] {
|
|
--background: #06070a;
|
|
--foreground: #e8e8e8;
|
|
--accent: #ffffff;
|
|
--accent-secondary: #c0c0c0;
|
|
--accent-glow: 255, 255, 255;
|
|
--accent-glow-secondary: 192, 192, 192;
|
|
--accent-glow-tertiary: 120, 120, 120;
|
|
--headline-color: #e8e8e8;
|
|
--headline-glow: 232, 232, 232;
|
|
--muted: #787878;
|
|
--border: #484848;
|
|
--container-body: #111a2a;
|
|
--container-cap: #0d131d;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-secondary: var(--accent-secondary);
|
|
--color-muted: var(--muted);
|
|
--color-border: var(--border);
|
|
--color-container-body: var(--container-body);
|
|
--color-container-cap: var(--container-cap);
|
|
--font-sans: var(--font-nunito);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-nunito), system-ui, sans-serif;
|
|
font-size: 1.375rem;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
/* Smooth scroll */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Code block styling */
|
|
code {
|
|
font-family: var(--font-geist-mono), ui-monospace, monospace;
|
|
}
|
|
|
|
/* Cloud animation keyframes — slow, massive wandering paths */
|
|
@keyframes cloud-drift {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0.5;
|
|
}
|
|
10% {
|
|
transform: translate(900px, -500px) scale(1.15);
|
|
opacity: 0.6;
|
|
}
|
|
22% {
|
|
transform: translate(-600px, 800px) scale(0.85);
|
|
opacity: 0.4;
|
|
}
|
|
38% {
|
|
transform: translate(1100px, 300px) scale(1.1);
|
|
opacity: 0.55;
|
|
}
|
|
52% {
|
|
transform: translate(-900px, -700px) scale(0.9);
|
|
opacity: 0.45;
|
|
}
|
|
68% {
|
|
transform: translate(500px, -1000px) scale(1.08);
|
|
opacity: 0.5;
|
|
}
|
|
82% {
|
|
transform: translate(-400px, 600px) scale(0.92);
|
|
opacity: 0.48;
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes cloud-drift-reverse {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0.4;
|
|
}
|
|
12% {
|
|
transform: translate(-1000px, 600px) scale(1.12);
|
|
opacity: 0.55;
|
|
}
|
|
25% {
|
|
transform: translate(700px, -900px) scale(0.88);
|
|
opacity: 0.35;
|
|
}
|
|
40% {
|
|
transform: translate(-500px, -800px) scale(1.08);
|
|
opacity: 0.5;
|
|
}
|
|
55% {
|
|
transform: translate(1100px, 400px) scale(0.92);
|
|
opacity: 0.42;
|
|
}
|
|
70% {
|
|
transform: translate(-800px, 700px) scale(1.06);
|
|
opacity: 0.48;
|
|
}
|
|
85% {
|
|
transform: translate(400px, -500px) scale(0.95);
|
|
opacity: 0.44;
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
/* Spinner light pulse — fade in, hold with subtle flicker, fade out */
|
|
@keyframes spinner-pulse {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
}
|
|
12% {
|
|
opacity: var(--peak-opacity, 0.5);
|
|
transform: scale(1);
|
|
}
|
|
30% {
|
|
opacity: calc(var(--peak-opacity, 0.5) * 0.6);
|
|
}
|
|
45% {
|
|
opacity: var(--peak-opacity, 0.5);
|
|
}
|
|
60% {
|
|
opacity: calc(var(--peak-opacity, 0.5) * 0.7);
|
|
}
|
|
75% {
|
|
opacity: var(--peak-opacity, 0.5);
|
|
}
|
|
88% {
|
|
opacity: calc(var(--peak-opacity, 0.5) * 0.4);
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
}
|
|
|
|
/* Spinner light inward drift — flies toward center, shrinks as if receding into the scene.
|
|
Uses --drift-x and --drift-y in px set inline by SpinnerLights component. */
|
|
@keyframes spinner-pulse-inward {
|
|
0% {
|
|
opacity: 0;
|
|
translate: 0px 0px;
|
|
scale: 1;
|
|
}
|
|
10% {
|
|
opacity: var(--peak-opacity, 0.5);
|
|
scale: 0.95;
|
|
}
|
|
30% {
|
|
opacity: calc(var(--peak-opacity, 0.5) * 0.7);
|
|
scale: 0.8;
|
|
}
|
|
50% {
|
|
opacity: var(--peak-opacity, 0.5);
|
|
scale: 0.6;
|
|
}
|
|
70% {
|
|
opacity: calc(var(--peak-opacity, 0.5) * 0.6);
|
|
scale: 0.4;
|
|
}
|
|
90% {
|
|
opacity: calc(var(--peak-opacity, 0.5) * 0.3);
|
|
scale: 0.2;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
translate: var(--drift-x) var(--drift-y);
|
|
scale: 0.1;
|
|
}
|
|
}
|
|
|
|
/* Headline cursor blink — classic terminal block cursor on/off */
|
|
@keyframes cursor-blink {
|
|
0%,
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
51%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@utility animate-cursor-blink {
|
|
animation: cursor-blink 1s step-end infinite;
|
|
}
|
|
|
|
@utility bg-frosted-glass {
|
|
background-color: color-mix(in srgb, var(--container-body) 50%, transparent);
|
|
}
|
|
|
|
@utility text-glow {
|
|
text-shadow:
|
|
0 0 4px rgba(var(--accent-glow), 0.55),
|
|
0 0 11px rgba(var(--accent-glow), 0.22);
|
|
}
|
|
|
|
@keyframes theme-pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.4; transform: scale(0.75); }
|
|
}
|
|
|
|
/* CRT scanline - moving element from top to bottom within container only */
|
|
@keyframes crt-scanline-move {
|
|
0% {
|
|
transform: translateY(-150px);
|
|
}
|
|
100% {
|
|
transform: translateY(calc(100% + 150px));
|
|
}
|
|
}
|
|
|
|
@keyframes cloud-drift-slow {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0.35;
|
|
}
|
|
14% {
|
|
transform: translate(800px, 900px) scale(1.1);
|
|
opacity: 0.5;
|
|
}
|
|
28% {
|
|
transform: translate(-1000px, -400px) scale(0.88);
|
|
opacity: 0.3;
|
|
}
|
|
42% {
|
|
transform: translate(600px, -1100px) scale(1.06);
|
|
opacity: 0.45;
|
|
}
|
|
57% {
|
|
transform: translate(-700px, 500px) scale(0.92);
|
|
opacity: 0.38;
|
|
}
|
|
72% {
|
|
transform: translate(1000px, -300px) scale(1.04);
|
|
opacity: 0.42;
|
|
}
|
|
86% {
|
|
transform: translate(-500px, 800px) scale(0.96);
|
|
opacity: 0.4;
|
|
}
|
|
100% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0.35;
|
|
}
|
|
}
|
|
|
|
/* CRT afterglow — phosphor dot fades after image collapse */
|
|
@keyframes crt-afterglow {
|
|
0% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
30% {
|
|
opacity: 0.7;
|
|
transform: scale(0.8);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(0.2);
|
|
}
|
|
}
|
|
|
|
/* ── Avatar tint — monochrome in theme color, full color on hover ──── */
|
|
|
|
img.avatar-tinted {
|
|
filter: grayscale(1) brightness(0.7) sepia(1) saturate(3) hue-rotate(var(--avatar-hue, 70deg));
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
[data-theme="white"] img.avatar-tinted {
|
|
filter: grayscale(1) brightness(0.8);
|
|
}
|
|
|
|
.group:hover img.avatar-tinted {
|
|
filter: none;
|
|
}
|
|
|
|
/* ── Dashboard Utilities ──────────────────────────────────────────────── */
|
|
|
|
@keyframes skeleton-pulse {
|
|
0%, 100% { opacity: 0.15; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
|
|
@utility animate-skeleton {
|
|
animation: skeleton-pulse 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes spin-slow {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@utility animate-spin-slow {
|
|
animation: spin-slow 1.5s linear infinite;
|
|
}
|
|
|
|
/* ── Reduced Motion ──────────────────────────────────────────────────── */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|