159 lines
2.9 KiB
CSS
159 lines
2.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* Background layers */
|
|
--color-bg-base: #1A1A18;
|
|
--color-bg-surface: #222220;
|
|
--color-bg-elevated: #2C2C28;
|
|
--color-bg-inset: #141413;
|
|
|
|
/* Text hierarchy (warm whites) */
|
|
--color-text-primary: #F5F5F0;
|
|
--color-text-secondary: #8A8A82;
|
|
--color-text-tertiary: #5A5A54;
|
|
|
|
/* Borders */
|
|
--color-border-subtle: #2E2E2A;
|
|
--color-border-visible: #3D3D38;
|
|
|
|
/* Accent (amber) */
|
|
--color-accent: #D97706;
|
|
--color-accent-hover: #B45309;
|
|
--color-accent-muted: rgba(217, 119, 6, 0.12);
|
|
--color-accent-text: #FBBF24;
|
|
|
|
/* Status colors (semantic only) */
|
|
--color-status-running: #34D399;
|
|
--color-status-warning: #EAB308;
|
|
--color-status-error: #EF4444;
|
|
--color-status-info: #3B82F6;
|
|
|
|
/* Fonts */
|
|
--font-sans: 'Inter', system-ui, sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body, #app {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
font-size: 0.8125rem;
|
|
line-height: 1.5;
|
|
background-color: var(--color-bg-base);
|
|
color: var(--color-text-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
input:focus, select:focus, textarea:focus {
|
|
border-color: var(--color-accent) !important;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--color-accent-muted);
|
|
}
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-border-subtle);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-text-tertiary);
|
|
}
|
|
|
|
/* Pulse animation for running timer dot */
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.animate-pulse-dot {
|
|
animation: pulse-dot 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Pulse animation for timer seconds */
|
|
@keyframes pulse-seconds {
|
|
0%, 100% { opacity: 0.85; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.animate-pulse-seconds {
|
|
animation: pulse-seconds 1s ease-in-out infinite;
|
|
}
|
|
|
|
/* Modal animations */
|
|
@keyframes modal-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-modal-enter {
|
|
animation: modal-enter 200ms ease-out;
|
|
}
|
|
|
|
/* Toast animations */
|
|
@keyframes toast-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-toast-enter {
|
|
animation: toast-enter 200ms ease-out;
|
|
}
|
|
|
|
@keyframes toast-exit {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.animate-toast-exit {
|
|
animation: toast-exit 150ms ease-in forwards;
|
|
}
|
|
|
|
/* Pulse animation for timer colon */
|
|
@keyframes pulse-colon {
|
|
0%, 100% { opacity: 0.4; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.animate-pulse-colon {
|
|
animation: pulse-colon 1s ease-in-out infinite;
|
|
}
|