mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-30 22:32:06 +00:00
feat(ui): comprehensive design system improvements
This PR addresses 53 design issues identified in the UI codebase, implementing a more consistent and polished neobrutalism design system. Typography: - Improved font stacks with proper fallbacks - Added font smoothing for crisp text rendering Color/Theme: - Added neutral scale (50-900) for consistent grays - Added semantic log level colors with dark mode variants - Added category colors for feature cards - Added GLM badge color variable - Full dark mode support for all new variables Design Tokens: - Spacing scale (xs to 2xl) - Z-index scale (dropdown to toast) - Border radius tokens - Inset shadow variants Animations: - New transition timing variables - New easing curves (bounce, smooth, out-back) - Slide-in animations (top/bottom/left) - Bounce, shake, scale-pop animations - Stagger delay utilities - Enhanced YOLO fire effect with parallax layers Components: - Button size variants (sm/lg/icon) and loading state - Input variants (error/disabled/textarea) - Badge color and size variants - Card elevation variants (elevated/flat/sunken) - Progress bar shimmer animation - Stronger modal backdrop with blur - Neobrutalist tooltips - Enhanced empty state with striped pattern Component Fixes: - Replaced hardcoded colors with CSS variables - Fixed ProgressDashboard percentage alignment - Improved ChatMessage role-specific styling - Consistent category badge colors in FeatureModal - Improved step input styling in forms Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
M Zubair
@@ -1,11 +1,16 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Enable class-based dark mode in Tailwind v4 */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
/* ============================================================================
|
||||
Neobrutalism Design System
|
||||
============================================================================ */
|
||||
|
||||
@theme {
|
||||
/* Colors */
|
||||
/* -------------------------------------------------------------------------
|
||||
Colors - Primary palette
|
||||
------------------------------------------------------------------------- */
|
||||
--color-neo-bg: #fffef5;
|
||||
--color-neo-card: #ffffff;
|
||||
--color-neo-pending: #ffd60a;
|
||||
@@ -16,53 +21,195 @@
|
||||
--color-neo-border: #1a1a1a;
|
||||
--color-neo-text: #1a1a1a;
|
||||
--color-neo-text-secondary: #4a4a4a;
|
||||
--color-neo-text-muted: #6b6b6b;
|
||||
|
||||
/* Fonts */
|
||||
--font-neo-display: 'Space Grotesk', sans-serif;
|
||||
--font-neo-sans: 'DM Sans', sans-serif;
|
||||
--font-neo-mono: 'JetBrains Mono', monospace;
|
||||
/* Dark text for bright backgrounds (always dark regardless of theme) */
|
||||
--color-neo-text-on-bright: #1a1a1a;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-neo-sm: 2px 2px 0px rgba(0, 0, 0, 1);
|
||||
--shadow-neo-md: 4px 4px 0px rgba(0, 0, 0, 1);
|
||||
--shadow-neo-lg: 6px 6px 0px rgba(0, 0, 0, 1);
|
||||
--shadow-neo-xl: 8px 8px 0px rgba(0, 0, 0, 1);
|
||||
/* -------------------------------------------------------------------------
|
||||
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;
|
||||
|
||||
/* Transitions */
|
||||
/* -------------------------------------------------------------------------
|
||||
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
|
||||
============================================================================ */
|
||||
|
||||
@layer base {
|
||||
/* Ensure CSS variables are available globally */
|
||||
:root {
|
||||
--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;
|
||||
--font-neo-display: 'Space Grotesk', sans-serif;
|
||||
--font-neo-sans: 'DM Sans', sans-serif;
|
||||
--font-neo-mono: 'JetBrains Mono', monospace;
|
||||
--shadow-neo-sm: 2px 2px 0px rgba(0, 0, 0, 1);
|
||||
--shadow-neo-md: 4px 4px 0px rgba(0, 0, 0, 1);
|
||||
--shadow-neo-lg: 6px 6px 0px rgba(0, 0, 0, 1);
|
||||
--shadow-neo-xl: 8px 8px 0px rgba(0, 0, 0, 1);
|
||||
}
|
||||
/* 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 */
|
||||
@@ -93,6 +240,20 @@
|
||||
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;
|
||||
@@ -105,9 +266,9 @@
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
color: #1a1a1a;
|
||||
background-color: #ffffff;
|
||||
border: 3px solid #1a1a1a;
|
||||
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;
|
||||
@@ -126,8 +287,43 @@
|
||||
.neo-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: var(--shadow-neo-sm);
|
||||
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 currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
.neo-btn-primary {
|
||||
@@ -152,40 +348,99 @@
|
||||
|
||||
.neo-btn-ghost {
|
||||
background-color: transparent;
|
||||
color: #1a1a1a;
|
||||
color: var(--color-neo-text);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.neo-btn-ghost:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: #1a1a1a;
|
||||
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 {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
#8b0000 0%,
|
||||
#d64500 30%,
|
||||
#ff6a00 60%,
|
||||
#ffa500 100%
|
||||
);
|
||||
background-size: 100% 200%;
|
||||
position: relative;
|
||||
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;
|
||||
animation: fireGlow 0.8s ease-in-out infinite, fireGradient 1.5s ease-in-out infinite;
|
||||
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: linear-gradient(
|
||||
0deg,
|
||||
#a00000 0%,
|
||||
#e65c00 30%,
|
||||
#ff7800 60%,
|
||||
#ffb700 100%
|
||||
);
|
||||
background-size: 100% 200%;
|
||||
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 */
|
||||
@@ -194,15 +449,15 @@
|
||||
padding: 0.75rem 1rem;
|
||||
font-family: var(--font-neo-sans);
|
||||
font-size: 1rem;
|
||||
color: #1a1a1a;
|
||||
background-color: #ffffff;
|
||||
border: 3px solid #1a1a1a;
|
||||
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1);
|
||||
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: #4a4a4a;
|
||||
color: var(--color-neo-text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -213,6 +468,23 @@
|
||||
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;
|
||||
@@ -222,53 +494,105 @@
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #1a1a1a;
|
||||
border: 2px solid #1a1a1a;
|
||||
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: #ffffff;
|
||||
border: 3px solid #1a1a1a;
|
||||
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: #70e000;
|
||||
background-color: var(--color-neo-done);
|
||||
transition: width 0.5s ease-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Progress Bar Shimmer Effect */
|
||||
.neo-progress-bar::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.4);
|
||||
backdrop-filter: blur(2px);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
z-index: var(--z-modal-backdrop);
|
||||
}
|
||||
|
||||
.neo-modal {
|
||||
background-color: #ffffff;
|
||||
border: 4px solid #1a1a1a;
|
||||
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: #ffffff;
|
||||
border: 3px solid #1a1a1a;
|
||||
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 {
|
||||
@@ -276,7 +600,7 @@
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
color: #1a1a1a;
|
||||
color: var(--color-neo-text);
|
||||
background-color: transparent;
|
||||
text-align: left;
|
||||
border: none;
|
||||
@@ -285,26 +609,27 @@
|
||||
}
|
||||
|
||||
.neo-dropdown-item:hover {
|
||||
background-color: #ffd60a;
|
||||
background-color: var(--color-neo-pending);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
/* Tooltip - Neobrutalism style with light bg and dark text */
|
||||
.neo-tooltip {
|
||||
background-color: #1a1a1a;
|
||||
color: #ffffff;
|
||||
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;
|
||||
border: 2px solid #1a1a1a;
|
||||
box-shadow: var(--shadow-neo-sm);
|
||||
z-index: var(--z-tooltip);
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.neo-empty-state {
|
||||
background-color: var(--color-neo-bg);
|
||||
border: 4px dashed #1a1a1a;
|
||||
border: 4px dashed var(--color-neo-border);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -383,36 +708,165 @@
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
4px 4px 0 var(--color-neo-border),
|
||||
0 0 10px rgba(255, 100, 0, 0.5),
|
||||
0 0 20px rgba(255, 60, 0, 0.3);
|
||||
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 15px rgba(255, 80, 0, 0.6),
|
||||
0 0 30px rgba(255, 40, 0, 0.4);
|
||||
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 12px rgba(255, 120, 0, 0.7),
|
||||
0 0 25px rgba(255, 50, 0, 0.5);
|
||||
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 18px rgba(255, 70, 0, 0.55),
|
||||
0 0 35px rgba(255, 30, 0, 0.35);
|
||||
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%, 100% {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
@@ -456,6 +910,54 @@
|
||||
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);
|
||||
}
|
||||
@@ -479,15 +981,15 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #fffef5;
|
||||
border: 2px solid #1a1a1a;
|
||||
background: var(--color-neo-bg);
|
||||
border: 2px solid var(--color-neo-border);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #1a1a1a;
|
||||
border: 2px solid #1a1a1a;
|
||||
background: var(--color-neo-border);
|
||||
border: 2px solid var(--color-neo-border);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #4a4a4a;
|
||||
background: var(--color-neo-text-secondary);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user