655 lines
14 KiB
CSS
655 lines
14 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: #B0B0A8;
|
|
--color-text-tertiary: #AEAEA6;
|
|
|
|
/* Borders */
|
|
--color-border-subtle: #3E3E3A;
|
|
--color-border-visible: #3D3D38;
|
|
|
|
/* Accent (amber) */
|
|
--color-accent: #D97706;
|
|
--color-accent-hover: #B45309;
|
|
--color-accent-muted: rgba(217, 119, 6, 0.25);
|
|
--color-accent-text: #FBBF24;
|
|
|
|
/* Status colors (semantic only) */
|
|
--color-status-running: #34D399;
|
|
--color-status-warning: #EAB308;
|
|
--color-status-error: #EF4444;
|
|
--color-status-error-text: #F87171;
|
|
--color-status-info: #3B82F6;
|
|
|
|
/* Fonts */
|
|
--font-sans: 'Inter', system-ui, sans-serif;
|
|
--font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
|
|
--font-timer: var(--font-mono);
|
|
--font-ui: var(--font-sans);
|
|
}
|
|
|
|
/* Accent color overrides */
|
|
[data-accent="amber"] {
|
|
--color-accent: #D97706;
|
|
--color-accent-hover: #B45309;
|
|
--color-accent-muted: rgba(217, 119, 6, 0.25);
|
|
--color-accent-text: #FBBF24;
|
|
}
|
|
[data-accent="blue"] {
|
|
--color-accent: #3B82F6;
|
|
--color-accent-hover: #2563EB;
|
|
--color-accent-muted: rgba(59, 130, 246, 0.25);
|
|
--color-accent-text: #60A5FA;
|
|
}
|
|
[data-accent="purple"] {
|
|
--color-accent: #8B5CF6;
|
|
--color-accent-hover: #7C3AED;
|
|
--color-accent-muted: rgba(139, 92, 246, 0.25);
|
|
--color-accent-text: #C4B5FD;
|
|
}
|
|
[data-accent="green"] {
|
|
--color-accent: #10B981;
|
|
--color-accent-hover: #059669;
|
|
--color-accent-muted: rgba(16, 185, 129, 0.25);
|
|
--color-accent-text: #34D399;
|
|
}
|
|
[data-accent="red"] {
|
|
--color-accent: #EF4444;
|
|
--color-accent-hover: #DC2626;
|
|
--color-accent-muted: rgba(239, 68, 68, 0.25);
|
|
--color-accent-text: #F87171;
|
|
}
|
|
[data-accent="pink"] {
|
|
--color-accent: #EC4899;
|
|
--color-accent-hover: #DB2777;
|
|
--color-accent-muted: rgba(236, 72, 153, 0.25);
|
|
--color-accent-text: #F472B6;
|
|
}
|
|
[data-accent="cyan"] {
|
|
--color-accent: #06B6D4;
|
|
--color-accent-hover: #0891B2;
|
|
--color-accent-muted: rgba(6, 182, 212, 0.25);
|
|
--color-accent-text: #22D3EE;
|
|
}
|
|
|
|
/* Light mode */
|
|
[data-theme="light"] {
|
|
--color-bg-base: #FAFAF9;
|
|
--color-bg-surface: #FFFFFF;
|
|
--color-bg-elevated: #F5F5F4;
|
|
--color-bg-inset: #E7E5E4;
|
|
--color-text-primary: #1C1917;
|
|
--color-text-secondary: #44403C;
|
|
--color-text-tertiary: #57524D;
|
|
--color-border-subtle: #E7E5E4;
|
|
--color-border-visible: #D6D3D1;
|
|
--color-status-error-text: #B91C1C;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
#app {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: auto;
|
|
background-color: var(--color-bg-base);
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
background-color: var(--color-bg-base);
|
|
color: var(--color-text-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
box-shadow: 0 0 0 4px var(--color-bg-base);
|
|
}
|
|
|
|
input:focus-visible, select:focus-visible, textarea:focus-visible {
|
|
border-color: var(--color-accent) !important;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
#main-content p {
|
|
max-width: 80ch;
|
|
}
|
|
p + p {
|
|
margin-top: 1.5em;
|
|
}
|
|
|
|
.sr-only-focusable:focus {
|
|
position: static;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0.5rem 1rem;
|
|
margin: 0;
|
|
overflow: visible;
|
|
clip: auto;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Toast animations */
|
|
@keyframes toast-enter {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px) translateX(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-toast-enter {
|
|
animation: toast-enter 200ms ease-out;
|
|
}
|
|
|
|
@keyframes toast-exit {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
.animate-toast-exit {
|
|
animation: toast-exit 150ms ease-in forwards;
|
|
}
|
|
|
|
@keyframes toast-progress {
|
|
from { width: 100%; }
|
|
to { width: 0%; }
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Markdown inline styles */
|
|
.markdown-inline strong { font-weight: 600; }
|
|
.markdown-inline em { font-style: italic; }
|
|
.markdown-inline code {
|
|
padding: 0.1em 0.3em;
|
|
background: var(--color-bg-elevated);
|
|
border-radius: 3px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85em;
|
|
}
|
|
.markdown-inline a {
|
|
color: var(--color-accent-text);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================
|
|
MOTION SYSTEM - Transitions & Animations
|
|
============================================ */
|
|
|
|
/* Page transitions */
|
|
.page-enter-active {
|
|
transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.page-leave-active {
|
|
transition: opacity 150ms ease-out,
|
|
transform 150ms ease-out;
|
|
}
|
|
.page-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
.page-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|
|
|
|
/* List item transitions */
|
|
.list-enter-active {
|
|
transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.list-leave-active {
|
|
transition: opacity 150ms ease-in,
|
|
transform 150ms ease-in;
|
|
position: absolute;
|
|
}
|
|
.list-move {
|
|
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.list-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
.list-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
/* Tag chip transitions */
|
|
.chip-enter-active {
|
|
transition: opacity 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
.chip-leave-active {
|
|
transition: opacity 100ms ease-in,
|
|
transform 100ms ease-in;
|
|
}
|
|
.chip-enter-from {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
.chip-leave-to {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
/* Modal transitions */
|
|
.modal-enter-active {
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
.modal-leave-active {
|
|
transition: opacity 150ms ease-in;
|
|
}
|
|
.modal-enter-from,
|
|
.modal-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Dropdown transitions */
|
|
.dropdown-enter-active {
|
|
transition: opacity 150ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.dropdown-leave-active {
|
|
transition: opacity 100ms ease-in,
|
|
transform 100ms ease-in;
|
|
}
|
|
.dropdown-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(-4px) scale(0.95);
|
|
}
|
|
.dropdown-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
/* Content fade-in */
|
|
.fade-enter-active {
|
|
transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.fade-leave-active {
|
|
transition: opacity 150ms ease-out;
|
|
}
|
|
.fade-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
}
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Slide up (bulk action bar) */
|
|
.slide-up-enter-active {
|
|
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.slide-up-leave-active {
|
|
transition: transform 150ms ease-in,
|
|
opacity 150ms ease-in;
|
|
}
|
|
.slide-up-enter-from,
|
|
.slide-up-leave-to {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Expand/collapse (checklist, panels) */
|
|
.expand-enter-active {
|
|
transition: max-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
overflow: hidden;
|
|
}
|
|
.expand-leave-active {
|
|
transition: max-height 200ms ease-out,
|
|
opacity 200ms ease-out;
|
|
overflow: hidden;
|
|
}
|
|
.expand-enter-from {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
.expand-enter-to {
|
|
max-height: 500px;
|
|
opacity: 1;
|
|
}
|
|
.expand-leave-from {
|
|
max-height: 500px;
|
|
opacity: 1;
|
|
}
|
|
.expand-leave-to {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Tour overlay fade */
|
|
.tour-fade-enter-active {
|
|
transition: opacity 200ms ease-out;
|
|
}
|
|
.tour-fade-leave-active {
|
|
transition: opacity 150ms ease-in;
|
|
}
|
|
.tour-fade-enter-from,
|
|
.tour-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Skeleton shimmer */
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
.skeleton {
|
|
background: linear-gradient(90deg, var(--color-bg-elevated) 25%, var(--color-bg-surface) 50%, var(--color-bg-elevated) 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Empty state floating icon */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-4px); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Button interactive feedback */
|
|
.btn-primary {
|
|
transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
box-shadow 150ms ease;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
.btn-primary:active {
|
|
transform: scale(0.97);
|
|
transition-duration: 50ms;
|
|
}
|
|
|
|
.btn-icon:active {
|
|
transform: scale(0.85);
|
|
transition: transform 100ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
.btn-icon-delete:active {
|
|
transform: scale(0.85) rotate(-10deg);
|
|
transition: transform 100ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
/* Card hover lift */
|
|
.card-hover {
|
|
transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
|
|
box-shadow 200ms ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
.card-hover:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Progress bar animate-in */
|
|
.progress-bar {
|
|
transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
/* Timer start pulse */
|
|
@keyframes timer-pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.03); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.animate-timer-pulse {
|
|
animation: timer-pulse 300ms cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
/* Timer stop glow */
|
|
@keyframes timer-glow {
|
|
0% { text-shadow: 0 0 0 transparent; }
|
|
30% { text-shadow: 0 0 12px var(--color-accent-muted); }
|
|
100% { text-shadow: 0 0 0 transparent; }
|
|
}
|
|
|
|
.animate-timer-glow {
|
|
animation: timer-glow 600ms ease-out;
|
|
}
|
|
|
|
/* Respect reduced motion preference */
|
|
@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;
|
|
}
|
|
}
|
|
|
|
/* Manual reduced-motion override (applied via JS class on <html>) */
|
|
.reduce-motion *,
|
|
.reduce-motion *::before,
|
|
.reduce-motion *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
.reduce-motion .animate-pulse-colon,
|
|
.reduce-motion .animate-pulse-dot,
|
|
.reduce-motion .animate-pulse-seconds {
|
|
animation: none !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.reduce-motion .animate-float,
|
|
.reduce-motion .animate-timer-pulse,
|
|
.reduce-motion .animate-timer-glow,
|
|
.reduce-motion .skeleton {
|
|
animation: none !important;
|
|
}
|
|
|
|
.reduce-motion .btn-primary:hover,
|
|
.reduce-motion .btn-primary:active,
|
|
.reduce-motion .btn-icon:active,
|
|
.reduce-motion .btn-icon-delete:active,
|
|
.reduce-motion .card-hover:hover,
|
|
.reduce-motion .card-hover:active {
|
|
transform: none !important;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.btn-primary:hover,
|
|
.btn-primary:active,
|
|
.btn-icon:active,
|
|
.btn-icon-delete:active,
|
|
.card-hover:hover,
|
|
.card-hover:active {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
:root {
|
|
--color-text-secondary: #D0D0C8;
|
|
--color-text-tertiary: #C8C8C0;
|
|
--color-border-subtle: #5A5A54;
|
|
--color-border-visible: #7A7A72;
|
|
}
|
|
[data-theme="light"] {
|
|
--color-text-secondary: #2C2926;
|
|
--color-text-tertiary: #3A3632;
|
|
--color-border-subtle: #A8A29E;
|
|
--color-border-visible: #78716C;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
:focus-visible {
|
|
outline: 2px solid Highlight;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
header,
|
|
nav,
|
|
.fixed,
|
|
.sticky,
|
|
[role="tooltip"],
|
|
[role="status"],
|
|
.animate-pulse-dot,
|
|
.animate-float,
|
|
.sr-only-focusable,
|
|
button[aria-label="Minimize"],
|
|
button[aria-label="Maximize"],
|
|
button[aria-label="Restore"],
|
|
button[aria-label="Close"] {
|
|
display: none !important;
|
|
}
|
|
|
|
body,
|
|
[data-theme="dark"],
|
|
[data-theme="light"] {
|
|
background: white !important;
|
|
color: black !important;
|
|
}
|
|
|
|
* {
|
|
color: black !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #ccc;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
tr {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
a[href]::after {
|
|
content: " (" attr(href) ")";
|
|
font-size: 0.75em;
|
|
color: #666 !important;
|
|
}
|
|
|
|
main {
|
|
width: 100% !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
#app {
|
|
overflow: visible !important;
|
|
height: auto !important;
|
|
}
|
|
}
|