124 lines
2.5 KiB
CSS
124 lines
2.5 KiB
CSS
|
@import 'tailwindcss';
|
||
|
|
|
||
|
|
@theme {
|
||
|
|
--color-bg: #0a0a0b;
|
||
|
|
--color-bg-elevated: #111114;
|
||
|
|
--color-bg-subtle: #16161a;
|
||
|
|
--color-fg: #fafafa;
|
||
|
|
--color-fg-muted: #a1a1aa;
|
||
|
|
--color-fg-subtle: #71717a;
|
||
|
|
--color-border: #1f1f22;
|
||
|
|
--color-border-strong: #2a2a2e;
|
||
|
|
--color-accent: #6366f1;
|
||
|
|
--color-accent-fg: #ffffff;
|
||
|
|
--color-success: #22c55e;
|
||
|
|
--color-warn: #f59e0b;
|
||
|
|
--color-danger: #ef4444;
|
||
|
|
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||
|
|
--font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
|
||
|
|
--radius-sm: 4px;
|
||
|
|
--radius-md: 6px;
|
||
|
|
--radius-lg: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer base {
|
||
|
|
* {
|
||
|
|
border-color: var(--color-border);
|
||
|
|
}
|
||
|
|
html {
|
||
|
|
color-scheme: dark;
|
||
|
|
background: var(--color-bg);
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
text-rendering: optimizeLegibility;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
background: var(--color-bg);
|
||
|
|
color: var(--color-fg);
|
||
|
|
font-family: var(--font-sans);
|
||
|
|
font-feature-settings: 'cv11', 'ss01';
|
||
|
|
}
|
||
|
|
::selection {
|
||
|
|
background: rgba(99, 102, 241, 0.3);
|
||
|
|
color: var(--color-fg);
|
||
|
|
}
|
||
|
|
/* Focus rings */
|
||
|
|
:focus-visible {
|
||
|
|
outline: 2px solid var(--color-accent);
|
||
|
|
outline-offset: 2px;
|
||
|
|
}
|
||
|
|
/* Scrollbars */
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 10px;
|
||
|
|
height: 10px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
background: var(--color-border-strong);
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-thumb:hover {
|
||
|
|
background: var(--color-fg-subtle);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer components {
|
||
|
|
.panel {
|
||
|
|
background: var(--color-bg-elevated);
|
||
|
|
border: 1px solid var(--color-border);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
}
|
||
|
|
.panel-subtle {
|
||
|
|
background: var(--color-bg-subtle);
|
||
|
|
border: 1px solid var(--color-border);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
}
|
||
|
|
.mono {
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
letter-spacing: -0.01em;
|
||
|
|
}
|
||
|
|
/* Reduced motion */
|
||
|
|
@media (prefers-reduced-motion: reduce) {
|
||
|
|
*,
|
||
|
|
*::before,
|
||
|
|
*::after {
|
||
|
|
animation-duration: 0.001ms !important;
|
||
|
|
animation-iteration-count: 1 !important;
|
||
|
|
transition-duration: 0.001ms !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse-dot {
|
||
|
|
0%, 100% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
opacity: 0.5;
|
||
|
|
transform: scale(0.9);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes shimmer {
|
||
|
|
0% {
|
||
|
|
background-position: -1000px 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
background-position: 1000px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fade-in {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(2px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|