mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-30 14:22:04 +00:00
02d0ef9865
- ChatMessage: use CSS variable syntax for bg-neo-accent and text consistency - DebugLogViewer: fix info log level to use --color-neo-log-info - TerminalTabs: use neo-hover-subtle for hover states instead of text color - globals.css: fix shimmer effect selector to target .neo-progress-fill - globals.css: fix loading spinner visibility with explicit border color - globals.css: add will-change for .neo-btn-yolo performance - App.tsx: group constants after imports - NewProjectModal: remove redundant styling (neo-card provides these) - Add tsconfig.tsbuildinfo to .gitignore and remove from tracking Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
997 lines
24 KiB
CSS
997 lines
24 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Enable class-based dark mode in Tailwind v4 */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
/* ============================================================================
|
|
Neobrutalism Design System
|
|
============================================================================ */
|
|
|
|
@theme {
|
|
/* -------------------------------------------------------------------------
|
|
Colors - Primary palette
|
|
------------------------------------------------------------------------- */
|
|
--color-neo-bg: #fffef5;
|
|
--color-neo-card: #ffffff;
|
|
--color-neo-pending: #ffd60a;
|
|
--color-neo-progress: #00b4d8;
|
|
--color-neo-done: #70e000;
|
|
--color-neo-accent: #ff006e;
|
|
--color-neo-danger: #ff5400;
|
|
--color-neo-border: #1a1a1a;
|
|
--color-neo-text: #1a1a1a;
|
|
--color-neo-text-secondary: #4a4a4a;
|
|
--color-neo-text-muted: #6b6b6b;
|
|
|
|
/* Dark text for bright backgrounds (always dark regardless of theme) */
|
|
--color-neo-text-on-bright: #1a1a1a;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Colors - Neutral scale
|
|
------------------------------------------------------------------------- */
|
|
--color-neo-neutral-50: #fafafa;
|
|
--color-neo-neutral-100: #f5f5f5;
|
|
--color-neo-neutral-200: #e5e5e5;
|
|
--color-neo-neutral-300: #d4d4d4;
|
|
--color-neo-neutral-400: #a3a3a3;
|
|
--color-neo-neutral-500: #737373;
|
|
--color-neo-neutral-600: #525252;
|
|
--color-neo-neutral-700: #404040;
|
|
--color-neo-neutral-800: #262626;
|
|
--color-neo-neutral-900: #171717;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Colors - Semantic states
|
|
------------------------------------------------------------------------- */
|
|
--color-neo-error-bg: #fef2f2;
|
|
--color-neo-error-border: #fecaca;
|
|
--color-neo-error-text: #dc2626;
|
|
--color-neo-error: #dc2626;
|
|
--color-neo-surface: #ffffff;
|
|
|
|
/* Hover states */
|
|
--color-neo-hover-subtle: rgba(0, 0, 0, 0.05);
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Colors - Log levels
|
|
------------------------------------------------------------------------- */
|
|
--color-neo-log-error: #ef4444;
|
|
--color-neo-log-warning: #f59e0b;
|
|
--color-neo-log-info: #3b82f6;
|
|
--color-neo-log-debug: #6b7280;
|
|
--color-neo-log-success: #22c55e;
|
|
|
|
/* GLM/Alternative API badge */
|
|
--color-neo-glm: #8b5cf6;
|
|
|
|
/* Additional semantic colors */
|
|
--color-neo-category-pink: #ff006e;
|
|
--color-neo-category-cyan: #00b4d8;
|
|
--color-neo-category-green: #70e000;
|
|
--color-neo-category-yellow: #ffd60a;
|
|
--color-neo-category-orange: #ff5400;
|
|
--color-neo-category-purple: #8338ec;
|
|
--color-neo-category-blue: #3a86ff;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Typography - Font stacks with proper fallbacks
|
|
------------------------------------------------------------------------- */
|
|
--font-neo-display: 'Archivo Black', 'Bebas Neue', 'Impact', system-ui, sans-serif;
|
|
--font-neo-sans: 'Work Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--font-neo-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Shadows - Solid black for light mode
|
|
------------------------------------------------------------------------- */
|
|
--shadow-neo-sm: 2px 2px 0px #1a1a1a;
|
|
--shadow-neo-md: 4px 4px 0px #1a1a1a;
|
|
--shadow-neo-lg: 6px 6px 0px #1a1a1a;
|
|
--shadow-neo-xl: 8px 8px 0px #1a1a1a;
|
|
--shadow-neo-left: -4px 0px 0px #1a1a1a;
|
|
--shadow-neo-left-lg: -8px 0px 0px #1a1a1a;
|
|
--shadow-neo-inset: inset 2px 2px 0 var(--color-neo-border);
|
|
--shadow-neo-inset-lg: inset 4px 4px 0 var(--color-neo-border);
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Transitions
|
|
------------------------------------------------------------------------- */
|
|
--transition-neo-fast: 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--transition-neo-normal: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
/* Transition timing */
|
|
--transition-fast: 150ms;
|
|
--transition-normal: 250ms;
|
|
--transition-slow: 400ms;
|
|
--transition-slower: 600ms;
|
|
|
|
/* Easing functions */
|
|
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Spacing scale
|
|
------------------------------------------------------------------------- */
|
|
--space-xs: 0.25rem;
|
|
--space-sm: 0.5rem;
|
|
--space-md: 1rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2rem;
|
|
--space-2xl: 3rem;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Z-index scale
|
|
------------------------------------------------------------------------- */
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-modal-backdrop: 300;
|
|
--z-modal: 400;
|
|
--z-tooltip: 500;
|
|
--z-toast: 600;
|
|
|
|
/* -------------------------------------------------------------------------
|
|
Border radius tokens
|
|
------------------------------------------------------------------------- */
|
|
--radius-sm: 0.125rem;
|
|
--radius-md: 0.25rem;
|
|
--radius-lg: 0.5rem;
|
|
--radius-full: 9999px;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Base Layer - Foundation styles
|
|
============================================================================ */
|
|
|
|
/* Dark mode - must be outside @layer to override @theme values */
|
|
.dark {
|
|
--color-neo-bg: #121212;
|
|
--color-neo-card: #1e1e1e;
|
|
--color-neo-pending: #ffca28;
|
|
--color-neo-progress: #26c6da;
|
|
--color-neo-done: #66bb6a;
|
|
--color-neo-accent: #f50057;
|
|
--color-neo-danger: #ff6e40;
|
|
--color-neo-border: #e0e0e0;
|
|
--color-neo-text: #f5f5f5;
|
|
--color-neo-text-secondary: #b0b0b0;
|
|
--color-neo-text-muted: #757575;
|
|
|
|
/* Dark text for bright backgrounds (unchanged in dark mode) */
|
|
--color-neo-text-on-bright: #1a1a1a;
|
|
|
|
/* Neutral scale for dark mode (inverted) */
|
|
--color-neo-neutral-50: #171717;
|
|
--color-neo-neutral-100: #262626;
|
|
--color-neo-neutral-200: #404040;
|
|
--color-neo-neutral-300: #525252;
|
|
--color-neo-neutral-400: #737373;
|
|
--color-neo-neutral-500: #a3a3a3;
|
|
--color-neo-neutral-600: #d4d4d4;
|
|
--color-neo-neutral-700: #e5e5e5;
|
|
--color-neo-neutral-800: #f5f5f5;
|
|
--color-neo-neutral-900: #fafafa;
|
|
|
|
/* Semantic error states for dark mode */
|
|
--color-neo-error-bg: rgba(244, 67, 54, 0.15);
|
|
--color-neo-error-border: rgba(244, 67, 54, 0.4);
|
|
--color-neo-error-text: #ef5350;
|
|
--color-neo-error: #ef5350;
|
|
--color-neo-surface: #1e1e1e;
|
|
|
|
/* Hover states */
|
|
--color-neo-hover-subtle: rgba(255, 255, 255, 0.08);
|
|
|
|
/* Log level colors for dark mode - adjusted for dark backgrounds */
|
|
--color-neo-log-error: #f87171;
|
|
--color-neo-log-warning: #fbbf24;
|
|
--color-neo-log-info: #60a5fa;
|
|
--color-neo-log-debug: #9ca3af;
|
|
--color-neo-log-success: #4ade80;
|
|
|
|
/* GLM/Alternative API badge for dark mode */
|
|
--color-neo-glm: #a78bfa;
|
|
|
|
/* Shadows - lighter for dark mode with subtle glow */
|
|
--shadow-neo-sm: 2px 2px 0px rgba(224, 224, 224, 0.7);
|
|
--shadow-neo-md: 4px 4px 0px rgba(224, 224, 224, 0.7);
|
|
--shadow-neo-lg: 6px 6px 0px rgba(224, 224, 224, 0.7);
|
|
--shadow-neo-xl: 8px 8px 0px rgba(224, 224, 224, 0.7);
|
|
--shadow-neo-left: -4px 0px 0px rgba(224, 224, 224, 0.7);
|
|
--shadow-neo-left-lg: -8px 0px 0px rgba(224, 224, 224, 0.7);
|
|
--shadow-neo-inset: inset 2px 2px 0 var(--color-neo-border);
|
|
--shadow-neo-inset-lg: inset 4px 4px 0 var(--color-neo-border);
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
font-family: var(--font-neo-sans);
|
|
background-color: var(--color-neo-bg);
|
|
color: var(--color-neo-text);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* Force form elements to inherit colors properly */
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
color: inherit;
|
|
font-family: inherit;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Component Layer - Reusable component styles
|
|
============================================================================ */
|
|
|
|
@layer components {
|
|
/* Cards */
|
|
.neo-card {
|
|
background: var(--color-neo-card);
|
|
border: 3px solid var(--color-neo-border);
|
|
box-shadow: var(--shadow-neo-md);
|
|
transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
|
|
}
|
|
|
|
.neo-card:hover {
|
|
transform: translate(-2px, -2px);
|
|
box-shadow: var(--shadow-neo-lg);
|
|
}
|
|
|
|
/* Card Elevation Variants */
|
|
.neo-card-elevated {
|
|
box-shadow: var(--shadow-neo-lg);
|
|
}
|
|
|
|
.neo-card-flat {
|
|
box-shadow: none;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.neo-card-sunken {
|
|
box-shadow: var(--shadow-neo-inset);
|
|
}
|
|
|
|
/* Buttons */
|
|
.neo-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
font-family: var(--font-neo-display);
|
|
font-weight: 700;
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
color: var(--color-neo-text);
|
|
background-color: var(--color-neo-card);
|
|
border: 3px solid var(--color-neo-border);
|
|
box-shadow: var(--shadow-neo-md);
|
|
transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.neo-btn:hover {
|
|
transform: translate(-2px, -2px);
|
|
box-shadow: var(--shadow-neo-lg);
|
|
}
|
|
|
|
.neo-btn:active {
|
|
transform: translate(2px, 2px);
|
|
box-shadow: var(--shadow-neo-sm);
|
|
}
|
|
|
|
.neo-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
box-shadow: var(--shadow-neo-sm) !important;
|
|
}
|
|
|
|
/* Button Size Variants */
|
|
.neo-btn-sm {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.neo-btn-lg {
|
|
padding: 0.875rem 1.75rem;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.neo-btn-icon {
|
|
padding: 0.5rem;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
/* Button Loading State */
|
|
.neo-btn-loading {
|
|
position: relative;
|
|
color: transparent;
|
|
}
|
|
|
|
.neo-btn-loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
margin: auto;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border: 2px solid var(--color-neo-border);
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
animation: spin 0.6s linear infinite;
|
|
}
|
|
|
|
.neo-btn-primary {
|
|
background-color: #ff006e;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.neo-btn-success {
|
|
background-color: #70e000;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.neo-btn-warning {
|
|
background-color: #ffd60a;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.neo-btn-danger {
|
|
background-color: #ff5400;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.neo-btn-ghost {
|
|
background-color: transparent;
|
|
color: var(--color-neo-text);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.neo-btn-ghost:hover {
|
|
background-color: rgba(128, 128, 128, 0.1);
|
|
color: var(--color-neo-text);
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* YOLO Mode Button - Animated fire effect for when YOLO mode is enabled */
|
|
.neo-btn-yolo {
|
|
position: relative;
|
|
will-change: transform, filter;
|
|
background:
|
|
radial-gradient(ellipse at 20% 80%, rgba(255, 200, 0, 0.4) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 80% 80%, rgba(255, 150, 0, 0.3) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 50% 90%, rgba(255, 100, 0, 0.5) 0%, transparent 40%),
|
|
linear-gradient(
|
|
0deg,
|
|
#8b0000 0%,
|
|
#c43500 20%,
|
|
#d64500 35%,
|
|
#ff6a00 55%,
|
|
#ff8c00 75%,
|
|
#ffa500 90%,
|
|
#ffcc00 100%
|
|
);
|
|
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 300%;
|
|
color: #ffffff;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 200, 0, 0.5);
|
|
animation:
|
|
fireGlow 0.8s ease-in-out infinite,
|
|
fireGradient 2s ease-in-out infinite,
|
|
fireFlicker 0.3s ease-in-out infinite;
|
|
overflow: visible;
|
|
}
|
|
|
|
.neo-btn-yolo::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
background:
|
|
radial-gradient(circle at 30% 100%, rgba(255, 200, 0, 0.6) 0%, transparent 30%),
|
|
radial-gradient(circle at 70% 100%, rgba(255, 150, 0, 0.5) 0%, transparent 25%),
|
|
radial-gradient(circle at 50% 100%, rgba(255, 100, 0, 0.7) 0%, transparent 35%);
|
|
background-size: 100% 200%;
|
|
z-index: -1;
|
|
animation: fireParticles 1.5s ease-in-out infinite;
|
|
filter: blur(4px);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.neo-btn-yolo::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -4px;
|
|
left: 10%;
|
|
right: 10%;
|
|
height: 8px;
|
|
background: linear-gradient(90deg,
|
|
transparent 0%,
|
|
rgba(255, 220, 0, 0.6) 20%,
|
|
rgba(255, 255, 200, 0.8) 50%,
|
|
rgba(255, 220, 0, 0.6) 80%,
|
|
transparent 100%
|
|
);
|
|
filter: blur(3px);
|
|
animation: fireFlicker 0.4s ease-in-out infinite reverse;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.neo-btn-yolo:hover {
|
|
background:
|
|
radial-gradient(ellipse at 20% 80%, rgba(255, 220, 0, 0.5) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 80% 80%, rgba(255, 180, 0, 0.4) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 50% 90%, rgba(255, 120, 0, 0.6) 0%, transparent 40%),
|
|
linear-gradient(
|
|
0deg,
|
|
#a00000 0%,
|
|
#d64500 20%,
|
|
#e65c00 35%,
|
|
#ff7800 55%,
|
|
#ff9c00 75%,
|
|
#ffb700 90%,
|
|
#ffdd00 100%
|
|
);
|
|
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 300%;
|
|
}
|
|
|
|
.neo-btn-yolo:hover::before {
|
|
opacity: 1;
|
|
filter: blur(6px);
|
|
}
|
|
|
|
/* Inputs */
|
|
.neo-input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
font-family: var(--font-neo-sans);
|
|
font-size: 1rem;
|
|
color: var(--color-neo-text);
|
|
background-color: var(--color-neo-card);
|
|
border: 3px solid var(--color-neo-border);
|
|
box-shadow: 3px 3px 0px rgba(128, 128, 128, 0.2);
|
|
transition: transform var(--transition-neo-fast), box-shadow var(--transition-neo-fast);
|
|
}
|
|
|
|
.neo-input::placeholder {
|
|
color: var(--color-neo-text-secondary);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.neo-input:focus {
|
|
outline: none;
|
|
transform: translate(-1px, -1px);
|
|
box-shadow: var(--shadow-neo-md);
|
|
border-color: #ff006e;
|
|
}
|
|
|
|
/* Input Variants */
|
|
.neo-input-error {
|
|
border-color: var(--color-neo-error);
|
|
background-color: color-mix(in srgb, var(--color-neo-error) 5%, var(--color-neo-surface));
|
|
}
|
|
|
|
.neo-input:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
background-color: var(--color-neo-neutral-200);
|
|
}
|
|
|
|
.neo-textarea {
|
|
min-height: 6rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* Badge */
|
|
.neo-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.75rem;
|
|
font-family: var(--font-neo-display);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: var(--color-neo-text);
|
|
border: 2px solid var(--color-neo-border);
|
|
}
|
|
|
|
/* Badge Color Variants */
|
|
.neo-badge-success {
|
|
background-color: var(--color-neo-done);
|
|
color: var(--color-neo-text-on-bright);
|
|
}
|
|
|
|
.neo-badge-warning {
|
|
background-color: var(--color-neo-pending);
|
|
color: var(--color-neo-text-on-bright);
|
|
}
|
|
|
|
.neo-badge-error {
|
|
background-color: var(--color-neo-error);
|
|
color: white;
|
|
}
|
|
|
|
.neo-badge-info {
|
|
background-color: var(--color-neo-progress);
|
|
color: var(--color-neo-text-on-bright);
|
|
}
|
|
|
|
/* Badge Size Variants */
|
|
.neo-badge-sm {
|
|
padding: 0.125rem 0.375rem;
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
.neo-badge-lg {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.neo-progress {
|
|
width: 100%;
|
|
height: 2rem;
|
|
background-color: var(--color-neo-card);
|
|
border: 3px solid var(--color-neo-border);
|
|
box-shadow: var(--shadow-neo-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.neo-progress-fill {
|
|
height: 100%;
|
|
background-color: var(--color-neo-done);
|
|
transition: width 0.5s ease-out;
|
|
position: relative;
|
|
}
|
|
|
|
/* Progress Bar Shimmer Effect */
|
|
.neo-progress-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255,255,255,0.2) 50%,
|
|
transparent 100%
|
|
);
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
/* Modal */
|
|
.neo-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(4px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: var(--z-modal-backdrop);
|
|
}
|
|
|
|
.neo-modal {
|
|
background-color: var(--color-neo-card);
|
|
border: 4px solid var(--color-neo-border);
|
|
box-shadow: var(--shadow-neo-xl);
|
|
animation: popIn 0.3s var(--transition-neo-fast);
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
overflow: auto;
|
|
z-index: var(--z-modal);
|
|
}
|
|
|
|
/* Dropdown */
|
|
.neo-dropdown {
|
|
background-color: var(--color-neo-card);
|
|
border: 3px solid var(--color-neo-border);
|
|
box-shadow: var(--shadow-neo-lg);
|
|
z-index: var(--z-dropdown);
|
|
}
|
|
|
|
.neo-dropdown-item {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
cursor: pointer;
|
|
color: var(--color-neo-text);
|
|
background-color: transparent;
|
|
text-align: left;
|
|
border: none;
|
|
font-size: 0.875rem;
|
|
transition: background-color var(--transition-neo-fast);
|
|
}
|
|
|
|
.neo-dropdown-item:hover {
|
|
background-color: var(--color-neo-pending);
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
/* Tooltip - Neobrutalism style with light bg and dark text */
|
|
.neo-tooltip {
|
|
background: var(--color-neo-surface);
|
|
color: var(--color-neo-text);
|
|
border: 2px solid var(--color-neo-border);
|
|
box-shadow: var(--shadow-neo-sm);
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
z-index: var(--z-tooltip);
|
|
}
|
|
|
|
/* Empty State */
|
|
.neo-empty-state {
|
|
background-color: var(--color-neo-bg);
|
|
border: 4px dashed var(--color-neo-border);
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Animations
|
|
============================================================================ */
|
|
|
|
@keyframes popIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes neoPulse {
|
|
0%, 100% {
|
|
box-shadow: 6px 6px 0px rgba(0, 180, 216, 0.3);
|
|
}
|
|
50% {
|
|
box-shadow: 6px 6px 0px rgba(0, 180, 216, 0.8);
|
|
}
|
|
}
|
|
|
|
@keyframes completePop {
|
|
0% {
|
|
transform: scale(0.8);
|
|
}
|
|
60% {
|
|
transform: scale(1.15);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes thoughtFade {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
filter: blur(2px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 200% center;
|
|
}
|
|
100% {
|
|
background-position: -200% center;
|
|
}
|
|
}
|
|
|
|
@keyframes fireGlow {
|
|
0%, 100% {
|
|
box-shadow:
|
|
4px 4px 0 var(--color-neo-border),
|
|
0 0 10px rgba(255, 100, 0, 0.6),
|
|
0 0 20px rgba(255, 60, 0, 0.4),
|
|
0 -5px 15px rgba(255, 200, 0, 0.3),
|
|
inset 0 -2px 8px rgba(255, 200, 0, 0.2);
|
|
}
|
|
25% {
|
|
box-shadow:
|
|
4px 4px 0 var(--color-neo-border),
|
|
0 0 18px rgba(255, 80, 0, 0.7),
|
|
0 0 35px rgba(255, 40, 0, 0.5),
|
|
0 -8px 20px rgba(255, 180, 0, 0.4),
|
|
inset 0 -3px 12px rgba(255, 180, 0, 0.25);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
4px 4px 0 var(--color-neo-border),
|
|
0 0 14px rgba(255, 120, 0, 0.8),
|
|
0 0 28px rgba(255, 50, 0, 0.6),
|
|
0 -6px 18px rgba(255, 220, 0, 0.35),
|
|
inset 0 -2px 10px rgba(255, 220, 0, 0.3);
|
|
}
|
|
75% {
|
|
box-shadow:
|
|
4px 4px 0 var(--color-neo-border),
|
|
0 0 22px rgba(255, 70, 0, 0.65),
|
|
0 0 40px rgba(255, 30, 0, 0.45),
|
|
0 -10px 25px rgba(255, 160, 0, 0.45),
|
|
inset 0 -4px 14px rgba(255, 160, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
@keyframes fireGradient {
|
|
0% {
|
|
background-position: 0% 100%;
|
|
}
|
|
25% {
|
|
background-position: 50% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 0%;
|
|
}
|
|
75% {
|
|
background-position: 50% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes fireFlicker {
|
|
0%, 100% {
|
|
filter: brightness(1) saturate(1);
|
|
}
|
|
25% {
|
|
filter: brightness(1.1) saturate(1.2);
|
|
}
|
|
50% {
|
|
filter: brightness(0.95) saturate(1.1);
|
|
}
|
|
75% {
|
|
filter: brightness(1.15) saturate(1.15);
|
|
}
|
|
}
|
|
|
|
@keyframes fireParticles {
|
|
0% {
|
|
background-position: 0% 100%, 50% 100%, 100% 100%;
|
|
}
|
|
50% {
|
|
background-position: 25% 0%, 50% 25%, 75% 0%;
|
|
}
|
|
100% {
|
|
background-position: 0% 100%, 50% 100%, 100% 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-top {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-bottom {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% {
|
|
transform: translateX(0);
|
|
}
|
|
10%, 30%, 50%, 70%, 90% {
|
|
transform: translateX(-4px);
|
|
}
|
|
20%, 40%, 60%, 80% {
|
|
transform: translateX(4px);
|
|
}
|
|
}
|
|
|
|
@keyframes scale-pop {
|
|
0% {
|
|
transform: scale(0.95);
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
transform: scale(1.02);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Utilities Layer
|
|
============================================================================ */
|
|
|
|
@layer utilities {
|
|
.animate-slide-in {
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.animate-pop-in {
|
|
animation: popIn 0.3s var(--transition-neo-fast);
|
|
}
|
|
|
|
.animate-pulse-neo {
|
|
animation: neoPulse 2s infinite;
|
|
}
|
|
|
|
.animate-complete {
|
|
animation: completePop 0.5s var(--transition-neo-fast);
|
|
}
|
|
|
|
.animate-thought-fade {
|
|
animation: thoughtFade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
|
|
}
|
|
|
|
.animate-shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-neo-text) 0%,
|
|
var(--color-neo-text) 40%,
|
|
var(--color-neo-progress) 50%,
|
|
var(--color-neo-text) 60%,
|
|
var(--color-neo-text) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
animation: shimmer 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Slide animations */
|
|
.animate-slide-in-top {
|
|
animation: slide-in-top var(--transition-normal) var(--ease-out-back);
|
|
}
|
|
|
|
.animate-slide-in-bottom {
|
|
animation: slide-in-bottom var(--transition-normal) var(--ease-out-back);
|
|
}
|
|
|
|
.animate-slide-in-left {
|
|
animation: slide-in-left var(--transition-normal) var(--ease-out-back);
|
|
}
|
|
|
|
/* Bounce and pop animations */
|
|
.animate-bounce-in {
|
|
animation: bounce-in var(--transition-slow) var(--ease-bounce);
|
|
}
|
|
|
|
.animate-scale-pop {
|
|
animation: scale-pop var(--transition-normal) var(--ease-out-back);
|
|
}
|
|
|
|
/* Error shake animation */
|
|
.animate-shake {
|
|
animation: shake 0.5s ease-in-out;
|
|
}
|
|
|
|
/* Stagger delay utilities for sequential animations */
|
|
.stagger-1 {
|
|
animation-delay: 50ms;
|
|
}
|
|
|
|
.stagger-2 {
|
|
animation-delay: 100ms;
|
|
}
|
|
|
|
.stagger-3 {
|
|
animation-delay: 150ms;
|
|
}
|
|
|
|
.stagger-4 {
|
|
animation-delay: 200ms;
|
|
}
|
|
|
|
.stagger-5 {
|
|
animation-delay: 250ms;
|
|
}
|
|
|
|
.font-display {
|
|
font-family: var(--font-neo-display);
|
|
}
|
|
|
|
.font-sans {
|
|
font-family: var(--font-neo-sans);
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: var(--font-neo-mono);
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Scrollbar Styling (outside layers for broad compatibility)
|
|
============================================================================ */
|
|
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--color-neo-bg);
|
|
border: 2px solid var(--color-neo-border);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--color-neo-border);
|
|
border: 2px solid var(--color-neo-border);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--color-neo-text-secondary);
|
|
}
|