mirror of
https://github.com/Dvorinka/Dash.git
synced 2026-10-28 15:51:27 +00:00
Tomas DvorakandDevin
d1486d5ec8
Replaces the static HTML page with a Next.js 15 + Tailwind v4 + Motion app. The hero renders the dashboard itself - live tiles, ticking clock, wandering metrics, pulsing status dots - instead of screenshots. Adds a playable four-renderer switcher (bento/cards/index/console) with layout animations, live monitor/domain/system mocks, and a cycling alert feed. Vercel project dash is now git-connected with root dir landing/; pushes deploy automatically. Canonical alias: dash-homelab.vercel.app. Authored By: TDvorak <[email protected]> Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
68 lines
1.7 KiB
CSS
68 lines
1.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Product tokens — same palette as the app (apps/frontend/src/index.css). */
|
|
@theme {
|
|
--color-bg: #0a0a0a;
|
|
--color-surface: #111111;
|
|
--color-surface-hover: #161616;
|
|
--color-line: rgba(255, 255, 255, 0.08);
|
|
--color-line-strong: rgba(255, 255, 255, 0.14);
|
|
--color-text: #fafafa;
|
|
--color-dim: #a1a1aa;
|
|
--color-faint: #52525b;
|
|
--color-accent: #3b82f6;
|
|
--color-up: #22c55e;
|
|
--color-down: #f59e0b;
|
|
--color-destructive: #ef4444;
|
|
--color-iconbg: #1c1c1e;
|
|
|
|
--ease-snap: cubic-bezier(0.2, 0, 0, 1);
|
|
|
|
--font-sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: var(--font-geist-mono), ui-monospace, monospace;
|
|
|
|
--animate-pulse-dot: pulse-dot 2.4s ease-in-out infinite;
|
|
--animate-float: float 7s ease-in-out infinite;
|
|
--animate-scan: scan 5s linear infinite;
|
|
--animate-draw: draw 2.2s var(--ease-snap) forwards;
|
|
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
|
|
50% { opacity: 0.75; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
|
|
}
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-5px); }
|
|
}
|
|
@keyframes scan {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(400%); }
|
|
}
|
|
@keyframes draw {
|
|
to { stroke-dashoffset: 0; }
|
|
}
|
|
}
|
|
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after {
|
|
animation: none !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|