initial commit
This commit is contained in:
developer committed
1 parent
5b935301e5
commit
85453852d5
105 files changed
+24846
No files matched your search
@@ -0,0 +1,246 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Dark-first operator console. Every colour the UI uses comes from the custom
|
||||
properties below, so a theme flip is a single attribute on <html> and never
|
||||
a re-render. Tailwind utilities read them through `@theme inline`, which
|
||||
keeps the var() reference in the generated CSS instead of freezing the
|
||||
value at build time. */
|
||||
|
||||
@custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
|
||||
/* Surfaces, from furthest back to closest to the reader. */
|
||||
--canvas: #0a0c10;
|
||||
--surface: #11141a;
|
||||
--surface-2: #161a21;
|
||||
--surface-3: #1d222b;
|
||||
--line: #242a34;
|
||||
--line-strong: #333b49;
|
||||
|
||||
/* Text. */
|
||||
--fg: #e7eaef;
|
||||
--fg-muted: #98a2b3;
|
||||
--fg-subtle: #6b7687;
|
||||
|
||||
/* One accent: emerald. */
|
||||
--accent: #34d399;
|
||||
--accent-strong: #10b981;
|
||||
--accent-fg: #04120c;
|
||||
--accent-soft: rgb(52 211 153 / 14%);
|
||||
--accent-ring: rgb(52 211 153 / 45%);
|
||||
|
||||
/* Semantics. */
|
||||
--ok: #34d399;
|
||||
--ok-soft: rgb(52 211 153 / 14%);
|
||||
--warn: #fbbf24;
|
||||
--warn-soft: rgb(251 191 36 / 14%);
|
||||
--danger: #f87171;
|
||||
--danger-soft: rgb(248 113 113 / 14%);
|
||||
--info: #60a5fa;
|
||||
--info-soft: rgb(96 165 250 / 14%);
|
||||
|
||||
--shadow-panel: 0 10px 30px -12px rgb(0 0 0 / 70%);
|
||||
--scroll-thumb: #2b323d;
|
||||
--scroll-thumb-hover: #3a4351;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
--canvas: #f4f6f8;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #ffffff;
|
||||
--surface-3: #eef1f5;
|
||||
--line: #e3e7ed;
|
||||
--line-strong: #cbd2dc;
|
||||
|
||||
--fg: #0f141b;
|
||||
--fg-muted: #55616f;
|
||||
--fg-subtle: #7b8794;
|
||||
|
||||
--accent: #059669;
|
||||
--accent-strong: #047857;
|
||||
--accent-fg: #ffffff;
|
||||
--accent-soft: rgb(5 150 105 / 10%);
|
||||
--accent-ring: rgb(5 150 105 / 40%);
|
||||
|
||||
--ok: #059669;
|
||||
--ok-soft: rgb(5 150 105 / 12%);
|
||||
--warn: #b45309;
|
||||
--warn-soft: rgb(180 83 9 / 12%);
|
||||
--danger: #dc2626;
|
||||
--danger-soft: rgb(220 38 38 / 10%);
|
||||
--info: #2563eb;
|
||||
--info-soft: rgb(37 99 235 / 10%);
|
||||
|
||||
--shadow-panel: 0 10px 30px -14px rgb(15 23 42 / 25%);
|
||||
--scroll-thumb: #cbd2dc;
|
||||
--scroll-thumb-hover: #aab3c0;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-canvas: var(--canvas);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-2: var(--surface-2);
|
||||
--color-surface-3: var(--surface-3);
|
||||
--color-line: var(--line);
|
||||
--color-line-strong: var(--line-strong);
|
||||
|
||||
--color-fg: var(--fg);
|
||||
--color-fg-muted: var(--fg-muted);
|
||||
--color-fg-subtle: var(--fg-subtle);
|
||||
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-strong: var(--accent-strong);
|
||||
--color-accent-fg: var(--accent-fg);
|
||||
--color-accent-soft: var(--accent-soft);
|
||||
|
||||
--color-ok: var(--ok);
|
||||
--color-ok-soft: var(--ok-soft);
|
||||
--color-warn: var(--warn);
|
||||
--color-warn-soft: var(--warn-soft);
|
||||
--color-danger: var(--danger);
|
||||
--color-danger-soft: var(--danger-soft);
|
||||
--color-info: var(--info);
|
||||
--color-info-soft: var(--info-soft);
|
||||
|
||||
--font-sans:
|
||||
ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
|
||||
sans-serif;
|
||||
--font-mono:
|
||||
ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas,
|
||||
"Liberation Mono", monospace;
|
||||
|
||||
--animate-fade-in: fade-in 180ms ease-out both;
|
||||
--animate-slide-up: slide-up 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
--animate-pulse-soft: pulse-soft 2.4s ease-in-out infinite;
|
||||
--animate-shimmer: shimmer 1.6s linear infinite;
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-soft {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100svh;
|
||||
background-color: var(--canvas);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--accent-soft);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* Numeric columns must not jitter as digits change. */
|
||||
.tabular {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: "tnum" 1;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scroll-thumb) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scroll-thumb);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 999px;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--scroll-thumb-hover);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user