juanatsap
0956c78d00
Following LogRocket CSS best practices: - Added fallback values to 150+ CSS variable usages across 22 files - Fallbacks use light theme defaults for consistent behavior - Improves compatibility with older browsers - Example: var(--text-primary) → var(--text-primary, #1a1a1a) Variables with fallbacks: - Colors: text-primary, text-secondary, text-muted, accent-blue, etc. - Backgrounds: page-bg, paper-bg, action-bar-bg, sidebar-bg - Shadows: shadow-sm, shadow-md, shadow-lg - Borders: border-color, border-light, icon-border CSS Variables Best Practices compliance: 6/7 recommendations now followed
354 lines
12 KiB
CSS
354 lines
12 KiB
CSS
/* ==============================================================================
|
|
COLOR THEME SYSTEM
|
|
============================================================================== */
|
|
/*
|
|
IMPORTANT: This is the COLOR theme system (light/dark/auto)
|
|
This is SEPARATE from the LAYOUT theme (.theme-clean)
|
|
|
|
- COLOR theme: Controls backgrounds, text colors, shadows
|
|
- LAYOUT theme (.theme-clean): Controls sidebars, layout structure
|
|
|
|
Both systems work independently and can be combined.
|
|
*/
|
|
|
|
/* ==============================================================================
|
|
LIGHT THEME (DEFAULT)
|
|
============================================================================== */
|
|
:root {
|
|
/* Page Background - Light gray for concentric squares pattern */
|
|
--page-bg: #d6d6d6;
|
|
|
|
/* Concentric Squares Pattern - Light */
|
|
--page-bg-pattern: repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
|
|
repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(75, 85, 99, 0.06) 5px, rgba(75, 85, 99, 0.06) 6px, transparent 6px, transparent 15px),
|
|
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px),
|
|
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(107, 114, 128, 0.04) 10px, rgba(107, 114, 128, 0.04) 11px, transparent 11px, transparent 30px);
|
|
|
|
/* Paper/Card Backgrounds */
|
|
--paper-bg: #ffffff;
|
|
--paper-secondary-bg: #f5f5f5;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #1a1a1a;
|
|
--text-secondary: #333333;
|
|
--text-muted: #666666;
|
|
--text-light: #999999;
|
|
|
|
/* Action Bar & Navigation */
|
|
--action-bar-bg: #2b2b2b;
|
|
--action-bar-text: #ffffff;
|
|
--action-bar-text-muted: rgba(255, 255, 255, 0.85);
|
|
|
|
/* Borders & Dividers */
|
|
--border-color: #333333;
|
|
--border-light: #e0e0e0;
|
|
--icon-border: #ddd; /* Light visible border for icons */
|
|
--item-separator: rgba(0, 0, 0, 0.1); /* Light separator between items */
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
--shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5);
|
|
|
|
/* Interactive Elements */
|
|
--button-bg: transparent;
|
|
--button-bg-hover: rgba(0, 0, 0, 0.05);
|
|
--button-bg-active: rgba(0, 0, 0, 0.1);
|
|
|
|
/* Accent Colors (unchanged in dark mode) */
|
|
--accent-blue: #0066cc;
|
|
--accent-green: #27ae60;
|
|
|
|
/* Sidebar (for non-clean theme) */
|
|
--sidebar-bg: #d1d4d2;
|
|
|
|
/* Legacy CV content variables - theme-aware overrides */
|
|
--text-dark: #1a1a1a; /* Dark text for light background */
|
|
--text-gray: #333333; /* Secondary text for light background */
|
|
}
|
|
|
|
/* ==============================================================================
|
|
DARK THEME
|
|
============================================================================== */
|
|
[data-color-theme="dark"] {
|
|
/* Page Background - Medium gray for dark pattern visibility */
|
|
--page-bg: #3a3a3a;
|
|
|
|
/* Diagonal Grid with Green Glow - Dark */
|
|
--page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px),
|
|
repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px);
|
|
|
|
/* Paper/Card Backgrounds */
|
|
--paper-bg: #1a1a1a;
|
|
--paper-secondary-bg: #2a2a2a;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #e0e0e0;
|
|
--text-secondary: #d0d0d0;
|
|
--text-muted: #b0b0b0;
|
|
--text-light: #808080;
|
|
|
|
/* Action Bar & Navigation */
|
|
--action-bar-bg: #1a1a1a;
|
|
--action-bar-text: #e0e0e0;
|
|
--action-bar-text-muted: rgba(224, 224, 224, 0.85);
|
|
|
|
/* Borders & Dividers */
|
|
--border-color: #404040;
|
|
--border-light: #333333;
|
|
--icon-border: #5e5e5e; /* Medium gray border for icons in dark theme */
|
|
--item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
|
|
|
|
/* Interactive Elements */
|
|
--button-bg: transparent;
|
|
--button-bg-hover: rgba(255, 255, 255, 0.05);
|
|
--button-bg-active: rgba(255, 255, 255, 0.1);
|
|
|
|
/* Accent Colors - slightly brighter in dark mode */
|
|
--accent-blue: #3399ff;
|
|
--accent-green: #2ecc71;
|
|
|
|
/* Sidebar (for non-clean theme) - darker than light theme but lighter than main content */
|
|
--sidebar-bg: #3a3d3e;
|
|
|
|
/* Legacy CV content variables - theme-aware overrides */
|
|
--text-dark: #e0e0e0; /* Light text for dark background */
|
|
--text-gray: #d0d0d0; /* Secondary text for dark background */
|
|
}
|
|
|
|
/* ==============================================================================
|
|
AUTO THEME - Follows System Preference
|
|
============================================================================== */
|
|
@media (prefers-color-scheme: dark) {
|
|
[data-color-theme="auto"] {
|
|
/* Page Background - Medium gray for dark pattern visibility */
|
|
--page-bg: #3a3a3a;
|
|
|
|
/* Diagonal Grid with Green Glow - Dark */
|
|
--page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px),
|
|
repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.15) 0, rgba(0, 255, 128, 0.15) 1px, transparent 1px, transparent 20px);
|
|
|
|
/* Paper/Card Backgrounds */
|
|
--paper-bg: #1a1a1a;
|
|
--paper-secondary-bg: #2a2a2a;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #e0e0e0;
|
|
--text-secondary: #d0d0d0;
|
|
--text-muted: #b0b0b0;
|
|
--text-light: #808080;
|
|
|
|
/* Action Bar & Navigation */
|
|
--action-bar-bg: #1a1a1a;
|
|
--action-bar-text: #e0e0e0;
|
|
--action-bar-text-muted: rgba(224, 224, 224, 0.85);
|
|
|
|
/* Borders & Dividers */
|
|
--border-color: #404040;
|
|
--border-light: #333333;
|
|
--icon-border: #5e5e5e; /* Medium gray border for icons in dark theme */
|
|
--item-separator: rgba(255, 255, 255, 0.05); /* Very subtle separator in dark theme */
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
|
|
|
|
/* Interactive Elements */
|
|
--button-bg: transparent;
|
|
--button-bg-hover: rgba(255, 255, 255, 0.05);
|
|
--button-bg-active: rgba(255, 255, 255, 0.1);
|
|
|
|
/* Accent Colors - slightly brighter in dark mode */
|
|
--accent-blue: #3399ff;
|
|
--accent-green: #2ecc71;
|
|
|
|
/* Sidebar (for non-clean theme) - matches explicit dark theme */
|
|
--sidebar-bg: #3a3d3e;
|
|
|
|
/* Legacy CV content variables - theme-aware overrides */
|
|
--text-dark: #e0e0e0; /* Light text for dark background */
|
|
--text-gray: #d0d0d0; /* Secondary text for dark background */
|
|
}
|
|
}
|
|
|
|
/* ==============================================================================
|
|
THEME SWITCHER BUTTON STYLES - Dynamic colors based on theme mode
|
|
============================================================================== */
|
|
.color-theme-switcher {
|
|
position: fixed !important; /* Override .has-tooltip position: relative */
|
|
bottom: 14rem; /* Middle position - between print (18rem) and shortcuts (10rem) */
|
|
left: 2rem;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--black-bar, #2b2b2b);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.3s ease;
|
|
z-index: 999;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Dynamic colors ONLY on hover based on active theme mode */
|
|
.color-theme-switcher:hover[data-theme-mode="light"] {
|
|
background: #d4b200 !important; /* Bright sun yellow (gold) for light mode */
|
|
}
|
|
|
|
.color-theme-switcher:hover[data-theme-mode="dark"] {
|
|
background: #013c77 !important; /* Dark nighty blue for dark mode */
|
|
}
|
|
|
|
.color-theme-switcher:hover[data-theme-mode="auto"] {
|
|
background: #9b59b6 !important; /* Purple for auto mode (mix of both) */
|
|
}
|
|
|
|
.color-theme-switcher:hover {
|
|
opacity: 1 !important;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* At-bottom state - dynamic colors based on theme mode (matches hover) */
|
|
.color-theme-switcher.at-bottom[data-theme-mode="light"] {
|
|
opacity: 1;
|
|
background: #d4b200 !important; /* Bright sun yellow (gold) for light mode */
|
|
}
|
|
|
|
.color-theme-switcher.at-bottom[data-theme-mode="dark"] {
|
|
opacity: 1;
|
|
background: #013c77 !important; /* Dark nighty blue for dark mode */
|
|
}
|
|
|
|
.color-theme-switcher.at-bottom[data-theme-mode="auto"] {
|
|
opacity: 1;
|
|
background: #9b59b6 !important; /* Purple for auto mode */
|
|
}
|
|
|
|
.color-theme-switcher iconify-icon {
|
|
color: white !important;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.color-theme-switcher:hover iconify-icon {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Hide the internal theme buttons - we'll cycle through on click */
|
|
.theme-option-btn {
|
|
display: none;
|
|
}
|
|
|
|
/* ==============================================================================
|
|
ICON COLOR PRESERVATION
|
|
============================================================================== */
|
|
/* Ensure all iconify icons keep their intended colors across themes */
|
|
|
|
/* Section icons - keep their brand colors */
|
|
.section-icon iconify-icon,
|
|
.project-icon iconify-icon,
|
|
.course-icon iconify-icon,
|
|
.default-project-icon iconify-icon {
|
|
color: inherit !important;
|
|
}
|
|
|
|
/* Toggle switch icons - keep their state-specific colors */
|
|
/* Note: Already defined in main.css with !important - just ensure they're not overridden */
|
|
|
|
/* Hamburger menu and site icons */
|
|
.site-icon iconify-icon,
|
|
.site-icon-mobile iconify-icon {
|
|
color: white !important;
|
|
}
|
|
|
|
/* CV content icons */
|
|
.cv-paper iconify-icon {
|
|
color: inherit !important;
|
|
}
|
|
|
|
/* Error toast icon */
|
|
.error-icon iconify-icon {
|
|
color: #dc3545 !important;
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 900px) {
|
|
.color-theme-switcher {
|
|
position: fixed !important;
|
|
bottom: 1.5rem !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
width: 50px !important;
|
|
height: 50px !important;
|
|
opacity: 1 !important; /* Full opacity on mobile (no transparency with blur bar) */
|
|
transform: none !important;
|
|
/* Position in 6-button layout: Download, Print, Shortcuts, Theme, Info, Back-to-top */
|
|
/* Total width: 6 * 50px + 5 * 10px = 350px */
|
|
left: calc(50% + 5px) !important; /* Fourth button */
|
|
}
|
|
|
|
/* Show theme colors at FULL opacity on mobile (no transparency with blur bar) */
|
|
.color-theme-switcher[data-theme-mode="light"] {
|
|
background: rgba(212, 178, 0, 1) !important; /* Gold - full opacity */
|
|
}
|
|
|
|
.color-theme-switcher[data-theme-mode="dark"] {
|
|
background: rgba(1, 60, 119, 1) !important; /* Blue - full opacity */
|
|
}
|
|
|
|
.color-theme-switcher[data-theme-mode="auto"] {
|
|
background: rgba(155, 89, 182, 1) !important; /* Purple - full opacity */
|
|
}
|
|
|
|
/* Full color opacity on hover (already at full opacity, just add transform) */
|
|
.color-theme-switcher:hover[data-theme-mode="light"] {
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.color-theme-switcher:hover[data-theme-mode="dark"] {
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.color-theme-switcher:hover[data-theme-mode="auto"] {
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
/* REAL MOBILE DEVICES: 5 buttons without shortcuts */
|
|
/* Download, Print, Theme, Info, Back-to-top */
|
|
/* Total width: 5 * 50px + 4 * 10px = 290px */
|
|
.is-mobile-device .color-theme-switcher {
|
|
left: calc(50% - 25px) !important; /* Third button (no gap) */
|
|
}
|
|
}
|
|
|
|
/* ==============================================================================
|
|
SPECIFIC LOGO FIXES FOR DARK THEME
|
|
============================================================================== */
|
|
/* LIV Golf logo is black - invert it in dark themes for visibility */
|
|
[data-color-theme="dark"] img[src*="livgolf"],
|
|
[data-color-theme="auto"] img[src*="livgolf"] {
|
|
filter: invert(1);
|
|
border-color: #a1a1a1 !important; /* Inverted #5e5e5e - becomes #5e5e5e after invert */
|
|
}
|
|
|
|
/* Only apply invert to auto theme when system is in dark mode */
|
|
@media (prefers-color-scheme: light) {
|
|
[data-color-theme="auto"] img[src*="livgolf"] {
|
|
filter: none;
|
|
border-color: var(--icon-border, #ddd) !important; /* Reset to normal border */
|
|
}
|
|
}
|