mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-01-07 12:10:04 -06:00
7525b44702
• Enhanced CSS variable system with comprehensive color palettes (50-900 scales) • Implemented modern glass morphism effects with backdrop-blur throughout • Added smooth animations and micro-interactions for better user feedback • Created reusable component system with modern styling patterns • Improved mobile experience with better touch interactions and responsive design • Enhanced dark theme with better contrast ratios and visual hierarchy • Updated navbar to use square corners and fixed dark mode styling issues • Applied consistent styling patterns from clients page across all templates • Added comprehensive theme template for future customizations • Maintained existing blue color scheme while modernizing visual appearance • Optimized CSS architecture with global styling patterns and reduced duplication • Enhanced accessibility with proper focus states and WCAG compliance • Improved button system with gradients, animations, and consistent interactions Files modified: - app/static/base.css: Enhanced with modern styling system - app/static/mobile.css: Improved mobile experience and touch interactions - app/static/theme-template.css: Comprehensive theme export template - app/templates/_components.html: Modernized reusable components - Multiple template files: Applied consistent styling patterns - Documentation: Added comprehensive guides and summaries Breaking changes: None - all existing functionality preserved
505 lines
20 KiB
CSS
505 lines
20 KiB
CSS
/* TimeTracker Modern Theme Template - Enhanced CSS Variables */
|
|
/* This file contains the complete modern theme system used in TimeTracker */
|
|
/* It can be used as a template for future customizations while maintaining consistency */
|
|
|
|
/* ===== MODERN LIGHT THEME VARIABLES ===== */
|
|
:root {
|
|
/* Primary Color Palette - Enhanced Modern Blue */
|
|
--primary-color: #3b82f6; /* Main brand color - Modern Blue */
|
|
--primary-dark: #2563eb; /* Darker shade for hover states */
|
|
--primary-light: #93c5fd; /* Lighter shade for subtle accents */
|
|
--primary-50: #eff6ff; /* Ultra light blue */
|
|
--primary-100: #dbeafe; /* Very light blue */
|
|
--primary-200: #bfdbfe; /* Light blue */
|
|
--primary-300: #93c5fd; /* Medium light blue */
|
|
--primary-400: #60a5fa; /* Medium blue */
|
|
--primary-500: #3b82f6; /* Base blue */
|
|
--primary-600: #2563eb; /* Medium dark blue */
|
|
--primary-700: #1d4ed8; /* Dark blue */
|
|
--primary-800: #1e40af; /* Very dark blue */
|
|
--primary-900: #1e3a8a; /* Ultra dark blue */
|
|
|
|
/* Semantic Color System */
|
|
--secondary-color: #64748b; /* Neutral gray for secondary elements */
|
|
--success-color: #10b981; /* Enhanced green for success states */
|
|
--success-light: #d1fae5; /* Light success background */
|
|
--danger-color: #ef4444; /* Enhanced red for error/danger states */
|
|
--danger-light: #fee2e2; /* Light danger background */
|
|
--warning-color: #f59e0b; /* Enhanced orange for warning states */
|
|
--warning-light: #fef3c7; /* Light warning background */
|
|
--info-color: #06b6d4; /* Enhanced cyan for informational states */
|
|
--info-light: #cffafe; /* Light info background */
|
|
|
|
/* Neutral Color Palette - Enhanced */
|
|
--gray-50: #f9fafb; /* Ultra light gray */
|
|
--gray-100: #f3f4f6; /* Very light gray */
|
|
--gray-200: #e5e7eb; /* Light gray */
|
|
--gray-300: #d1d5db; /* Medium light gray */
|
|
--gray-400: #9ca3af; /* Medium gray */
|
|
--gray-500: #6b7280; /* Base gray */
|
|
--gray-600: #4b5563; /* Medium dark gray */
|
|
--gray-700: #374151; /* Dark gray */
|
|
--gray-800: #1f2937; /* Very dark gray */
|
|
--gray-900: #111827; /* Ultra dark gray */
|
|
|
|
/* Background Colors - Modern Hierarchy */
|
|
--dark-color: #1e293b; /* Dark backgrounds */
|
|
--light-color: #f8fafc; /* Light backgrounds */
|
|
--body-bg: #ffffff; /* Main body background */
|
|
--surface-color: #ffffff; /* Surface backgrounds */
|
|
--surface-variant: #f8fafc; /* Variant surface backgrounds */
|
|
--surface-hover: #f1f5f9; /* Hover surface backgrounds */
|
|
--surface-pressed: #e2e8f0; /* Pressed surface backgrounds */
|
|
|
|
/* Border and Divider Colors - Refined */
|
|
--border-color: #e2e8f0; /* Standard borders */
|
|
--border-light: #f1f5f9; /* Light borders */
|
|
--border-strong: #cbd5e1; /* Strong borders */
|
|
--divider-color: #e2e8f0; /* Divider lines */
|
|
|
|
/* Text Colors - Improved Hierarchy */
|
|
--text-primary: #1e293b; /* Primary text color */
|
|
--text-secondary: #475569; /* Secondary text color */
|
|
--text-tertiary: #64748b; /* Tertiary text color */
|
|
--text-muted: #9ca3af; /* Muted text color */
|
|
--text-on-primary: #ffffff; /* Text on primary backgrounds */
|
|
--text-on-dark: #f8fafc; /* Text on dark backgrounds */
|
|
|
|
/* Component Backgrounds - Enhanced */
|
|
--navbar-bg: rgba(255, 255, 255, 0.95); /* Glass navigation bar */
|
|
--navbar-border: rgba(226, 232, 240, 0.6); /* Navigation border */
|
|
--dropdown-bg: #ffffff; /* Dropdown menu background */
|
|
--card-bg: #ffffff; /* Card background */
|
|
--input-bg: #ffffff; /* Input background */
|
|
--input-border: #d1d5db; /* Input border */
|
|
--input-focus: #3b82f6; /* Input focus color */
|
|
|
|
/* Visual Effects - Modern Shadows and Gradients */
|
|
--bg-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
|
--bg-gradient-subtle: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
--card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
--card-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
--card-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.12);
|
|
--focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.12);
|
|
--focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.12);
|
|
|
|
/* Spacing and Layout - Refined System */
|
|
--border-radius: 8px; /* Standard border radius */
|
|
--border-radius-lg: 12px; /* Large border radius */
|
|
--border-radius-sm: 6px; /* Small border radius */
|
|
--border-radius-xs: 4px; /* Extra small border radius */
|
|
--border-radius-full: 9999px; /* Full border radius (circular) */
|
|
--section-spacing: 2.5rem; /* Section spacing */
|
|
--card-spacing: 1.5rem; /* Card spacing */
|
|
--mobile-section-spacing: 1.5rem; /* Mobile section spacing */
|
|
--mobile-card-spacing: 1rem; /* Mobile card spacing */
|
|
--navbar-height: 72px; /* Navigation bar height */
|
|
--container-padding: 1.5rem; /* Container padding */
|
|
--grid-gap: 1.5rem; /* Grid gap */
|
|
--grid-gap-sm: 1rem; /* Small grid gap */
|
|
|
|
/* Transitions and Animations - Enhanced */
|
|
--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
--animation-duration: 0.3s;
|
|
--animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Typography - Enhanced Scale */
|
|
--font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-family-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;
|
|
--font-weight-light: 300;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--font-weight-extrabold: 800;
|
|
--line-height-tight: 1.25;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.625;
|
|
|
|
/* Interactive States */
|
|
--hover-opacity: 0.9;
|
|
--active-opacity: 0.95;
|
|
--disabled-opacity: 0.5;
|
|
--loading-opacity: 0.6;
|
|
|
|
/* Z-Index Scale */
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1020;
|
|
--z-fixed: 1030;
|
|
--z-modal-backdrop: 1040;
|
|
--z-modal: 1050;
|
|
--z-popover: 1060;
|
|
--z-tooltip: 1070;
|
|
--z-toast: 1080;
|
|
|
|
/* Bootstrap Integration - Enhanced */
|
|
--bs-body-bg: var(--body-bg);
|
|
--bs-body-color: var(--text-primary);
|
|
--bs-body-font-family: var(--font-family-sans);
|
|
--bs-body-font-size: 0.95rem;
|
|
--bs-body-line-height: var(--line-height-normal);
|
|
--bs-card-bg: var(--card-bg);
|
|
--bs-card-border-color: var(--border-color);
|
|
--bs-card-border-radius: var(--border-radius);
|
|
--bs-dropdown-bg: var(--dropdown-bg);
|
|
--bs-dropdown-border-color: var(--border-color);
|
|
--bs-dropdown-link-color: var(--text-secondary);
|
|
--bs-dropdown-link-hover-bg: var(--surface-hover);
|
|
--bs-dropdown-link-hover-color: var(--text-primary);
|
|
}
|
|
|
|
/* ===== MODERN DARK THEME VARIABLES ===== */
|
|
[data-theme="dark"] {
|
|
/* Primary Color Palette - Enhanced for dark theme */
|
|
--primary-color: #60a5fa; /* Lighter blue for better contrast */
|
|
--primary-dark: #3b82f6; /* Standard blue for hover */
|
|
--primary-light: #93c5fd; /* Light blue accent */
|
|
--primary-50: #1e3a8a; /* Dark blue (reversed) */
|
|
--primary-100: #1e40af; /* Very dark blue */
|
|
--primary-200: #1d4ed8; /* Dark blue */
|
|
--primary-300: #2563eb; /* Medium dark blue */
|
|
--primary-400: #3b82f6; /* Medium blue */
|
|
--primary-500: #60a5fa; /* Base blue (lighter for dark) */
|
|
--primary-600: #93c5fd; /* Medium light blue */
|
|
--primary-700: #bfdbfe; /* Light blue */
|
|
--primary-800: #dbeafe; /* Very light blue */
|
|
--primary-900: #eff6ff; /* Ultra light blue */
|
|
|
|
/* Semantic Color System - Dark theme */
|
|
--secondary-color: #94a3b8; /* Lighter gray for visibility */
|
|
--success-color: #34d399; /* Brighter green for dark theme */
|
|
--success-light: #064e3b; /* Dark success background */
|
|
--danger-color: #f87171; /* Brighter red for dark theme */
|
|
--danger-light: #7f1d1d; /* Dark danger background */
|
|
--warning-color: #fbbf24; /* Brighter orange for dark theme */
|
|
--warning-light: #78350f; /* Dark warning background */
|
|
--info-color: #38bdf8; /* Brighter cyan for dark theme */
|
|
--info-light: #164e63; /* Dark info background */
|
|
|
|
/* Neutral Color Palette - Dark theme (reversed) */
|
|
--gray-50: #0f172a; /* Dark gray (reversed) */
|
|
--gray-100: #1e293b; /* Very dark gray */
|
|
--gray-200: #334155; /* Dark gray */
|
|
--gray-300: #475569; /* Medium dark gray */
|
|
--gray-400: #64748b; /* Medium gray */
|
|
--gray-500: #94a3b8; /* Base gray (lighter for dark) */
|
|
--gray-600: #cbd5e1; /* Medium light gray */
|
|
--gray-700: #e2e8f0; /* Light gray */
|
|
--gray-800: #f1f5f9; /* Very light gray */
|
|
--gray-900: #f8fafc; /* Ultra light gray */
|
|
|
|
/* Background Colors - Dark theme specific */
|
|
--dark-color: #0f172a; /* Very dark blue-gray */
|
|
--light-color: #1e293b; /* Dark blue-gray */
|
|
--body-bg: #0b1220; /* Main dark background */
|
|
--surface-color: #0f172a; /* Surface backgrounds */
|
|
--surface-variant: #1e293b; /* Variant surface backgrounds */
|
|
--surface-hover: #334155; /* Hover surface backgrounds */
|
|
--surface-pressed: #475569; /* Pressed surface backgrounds */
|
|
|
|
/* Border and Divider Colors - Dark theme */
|
|
--border-color: #334155; /* Dark borders with better contrast */
|
|
--border-light: #1e293b; /* Light borders for dark theme */
|
|
--border-strong: #475569; /* Strong borders for dark theme */
|
|
--divider-color: #334155; /* Divider lines */
|
|
|
|
/* Text Colors - Dark theme */
|
|
--text-primary: #f1f5f9; /* Light gray for primary text */
|
|
--text-secondary: #cbd5e1; /* Medium gray for secondary text */
|
|
--text-tertiary: #94a3b8; /* Tertiary text color */
|
|
--text-muted: #64748b; /* Muted gray for less important text */
|
|
--text-on-primary: #ffffff; /* Text on primary backgrounds */
|
|
--text-on-dark: #0f172a; /* Text on light backgrounds in dark theme */
|
|
|
|
/* Component Backgrounds - Dark theme */
|
|
--navbar-bg: rgba(11, 18, 32, 0.95); /* Glass navigation bar for dark */
|
|
--navbar-border: rgba(51, 65, 85, 0.6); /* Navigation border for dark */
|
|
--dropdown-bg: #0f172a; /* Dark dropdown */
|
|
--card-bg: #0f172a; /* Dark cards */
|
|
--input-bg: #1e293b; /* Input background for dark */
|
|
--input-border: #475569; /* Input border for dark */
|
|
--input-focus: #60a5fa; /* Input focus color for dark */
|
|
|
|
/* Visual Effects - Dark theme */
|
|
--bg-gradient: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
|
|
--bg-gradient-subtle: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
|
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
|
|
--card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
|
|
--card-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
|
|
--card-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
|
|
--focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.2);
|
|
--focus-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.2);
|
|
--focus-ring-success: 0 0 0 3px rgba(52, 211, 153, 0.2);
|
|
|
|
/* Bootstrap Integration - Dark theme */
|
|
--bs-body-bg: var(--body-bg);
|
|
--bs-body-color: var(--text-primary);
|
|
--bs-body-font-family: var(--font-family-sans);
|
|
--bs-card-bg: var(--card-bg);
|
|
--bs-card-border-color: var(--border-color);
|
|
--bs-dropdown-bg: var(--dropdown-bg);
|
|
--bs-dropdown-border-color: var(--border-color);
|
|
--bs-dropdown-link-color: var(--text-secondary);
|
|
--bs-dropdown-link-hover-bg: var(--surface-hover);
|
|
--bs-dropdown-link-hover-color: var(--text-primary);
|
|
}
|
|
|
|
/* ===== MOBILE-SPECIFIC VARIABLES ===== */
|
|
:root {
|
|
/* Mobile Touch Targets and Spacing */
|
|
--mobile-touch-target: 52px; /* Minimum touch target size */
|
|
--mobile-nav-height: 70px; /* Mobile navigation height */
|
|
--mobile-tabbar-height: 64px; /* Bottom tab bar height */
|
|
--mobile-card-padding: 1.25rem; /* Mobile card padding */
|
|
--mobile-button-height: 52px; /* Mobile button height */
|
|
--mobile-input-height: 56px; /* Mobile input height */
|
|
--mobile-border-radius: 4px; /* Mobile border radius */
|
|
--mobile-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
--mobile-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* ===== ENHANCED USAGE EXAMPLES ===== */
|
|
|
|
/* Example 1: Modern Themed Card with Glass Effect */
|
|
/*
|
|
.modern-card {
|
|
background: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--card-shadow);
|
|
color: var(--text-primary);
|
|
transition: var(--transition-slow);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modern-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
|
|
opacity: 0;
|
|
transition: opacity var(--transition);
|
|
}
|
|
|
|
.modern-card:hover {
|
|
box-shadow: var(--card-shadow-hover);
|
|
transform: translateY(-4px) scale(1.02);
|
|
border-color: var(--primary-200);
|
|
}
|
|
|
|
.modern-card:hover::before {
|
|
opacity: 0.8;
|
|
}
|
|
*/
|
|
|
|
/* Example 2: Enhanced Primary Button with Gradient */
|
|
/*
|
|
.btn-modern-primary {
|
|
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-600) 100%);
|
|
border: 1px solid var(--primary-color);
|
|
color: var(--text-on-primary);
|
|
border-radius: var(--border-radius);
|
|
padding: 0.875rem 1.5rem;
|
|
font-weight: var(--font-weight-medium);
|
|
transition: var(--transition-slow);
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.btn-modern-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
.btn-modern-primary:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-modern-primary:hover {
|
|
background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
|
|
}
|
|
*/
|
|
|
|
/* Example 3: Modern Status Badge System */
|
|
/*
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 0.875rem;
|
|
border-radius: var(--border-radius-full);
|
|
font-size: 0.8rem;
|
|
font-weight: var(--font-weight-medium);
|
|
letter-spacing: 0.025em;
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.status-badge--success {
|
|
background: rgba(16, 185, 129, 0.1);
|
|
color: var(--success-color);
|
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
.status-badge--warning {
|
|
background: rgba(245, 158, 11, 0.1);
|
|
color: var(--warning-color);
|
|
border: 1px solid rgba(245, 158, 11, 0.2);
|
|
}
|
|
|
|
.status-badge--danger {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: var(--danger-color);
|
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
}
|
|
*/
|
|
|
|
/* Example 4: Responsive Grid with Modern Spacing */
|
|
/*
|
|
.modern-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--grid-gap);
|
|
margin-bottom: var(--section-spacing);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.modern-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--grid-gap-sm);
|
|
margin-bottom: var(--mobile-section-spacing);
|
|
}
|
|
}
|
|
*/
|
|
|
|
/* Example 5: Modern Form Styling */
|
|
/*
|
|
.modern-form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.modern-form-label {
|
|
display: block;
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.modern-form-control {
|
|
width: 100%;
|
|
padding: 0.875rem 1rem;
|
|
border: 2px solid var(--input-border);
|
|
border-radius: var(--border-radius);
|
|
background: var(--input-bg);
|
|
color: var(--text-primary);
|
|
font-size: 0.95rem;
|
|
transition: var(--transition);
|
|
font-family: var(--font-family-sans);
|
|
}
|
|
|
|
.modern-form-control:focus {
|
|
outline: none;
|
|
border-color: var(--input-focus);
|
|
box-shadow: var(--focus-ring);
|
|
transform: translateY(-1px);
|
|
}
|
|
*/
|
|
|
|
/* ===== COMPREHENSIVE THEME CUSTOMIZATION GUIDE ===== */
|
|
/*
|
|
MODERN TIMETRACKER THEME CUSTOMIZATION GUIDE
|
|
============================================
|
|
|
|
1. COLOR SYSTEM CUSTOMIZATION:
|
|
- Primary colors: Modify --primary-* variables for brand colors
|
|
- Semantic colors: Adjust --success-*, --danger-*, --warning-*, --info-* for status colors
|
|
- Neutral palette: Update --gray-* variables for consistent grayscale
|
|
- Always maintain both light and dark theme variants
|
|
|
|
2. SPACING SYSTEM:
|
|
- Layout spacing: --section-spacing, --card-spacing for consistent layouts
|
|
- Component spacing: --grid-gap, --container-padding for internal spacing
|
|
- Mobile spacing: --mobile-* variables for responsive design
|
|
- Border radius: --border-radius-* for consistent corner styles
|
|
|
|
3. TYPOGRAPHY SYSTEM:
|
|
- Font families: --font-family-sans, --font-family-mono
|
|
- Font weights: --font-weight-* for consistent typography hierarchy
|
|
- Line heights: --line-height-* for optimal readability
|
|
|
|
4. VISUAL EFFECTS:
|
|
- Shadows: --card-shadow-* for depth and elevation
|
|
- Gradients: --bg-gradient-* for modern visual appeal
|
|
- Focus rings: --focus-ring-* for accessibility
|
|
- Transitions: --transition-* for smooth interactions
|
|
|
|
5. COMPONENT CUSTOMIZATION:
|
|
- Navigation: --navbar-* variables for header styling
|
|
- Cards: --card-* variables for content containers
|
|
- Forms: --input-* variables for form elements
|
|
- Interactive states: --hover-*, --active-* for user feedback
|
|
|
|
6. MOBILE OPTIMIZATION:
|
|
- Touch targets: --mobile-touch-target for accessibility
|
|
- Responsive spacing: --mobile-* variables for smaller screens
|
|
- Navigation: --mobile-nav-height, --mobile-tabbar-height
|
|
|
|
7. ACCESSIBILITY CONSIDERATIONS:
|
|
- Maintain WCAG contrast ratios (4.5:1 for normal text, 3:1 for large text)
|
|
- Ensure focus indicators are visible and consistent
|
|
- Test with screen readers and keyboard navigation
|
|
- Verify color-blind friendly combinations
|
|
|
|
8. DARK THEME BEST PRACTICES:
|
|
- Increase contrast for better readability
|
|
- Use appropriate shadow intensities
|
|
- Ensure interactive elements remain discoverable
|
|
- Test in various lighting conditions
|
|
|
|
9. CUSTOMIZATION WORKFLOW:
|
|
- Start with color palette modifications
|
|
- Test in both light and dark themes
|
|
- Verify mobile responsiveness
|
|
- Check accessibility compliance
|
|
- Document any custom additions
|
|
|
|
10. INTEGRATION WITH BOOTSTRAP:
|
|
- Use --bs-* variables for Bootstrap integration
|
|
- Override Bootstrap defaults through CSS variables
|
|
- Maintain consistency with custom components
|
|
|
|
EXAMPLE CUSTOM COLOR SCHEME:
|
|
---------------------------
|
|
For a green-themed variant, replace blue primary colors:
|
|
--primary-color: #10b981;
|
|
--primary-dark: #059669;
|
|
--primary-light: #6ee7b7;
|
|
|
|
And adjust the full color scale accordingly in both themes.
|
|
|
|
Remember to test all changes thoroughly across different devices,
|
|
browsers, and accessibility tools before deployment.
|
|
*/
|