txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2ebb9f529301644a5b091d60c69284ce37cf0774
cv-site/static/css/color-theme.css
T
juanatsap 2ebb9f5293 fix: Use each button's hover color for at-bottom state + add zoom button 
**Bug 1: Wrong at-bottom colors**
- All buttons were showing orange (#f39c12) when at bottom
- User wanted each button to use its own hover color

**Bug 2: Zoom button missing at-bottom state**
- Zoom/search button wasn't changing color at bottom

**Fix - Updated .at-bottom styles to match hover colors:**

Download PDF button:
- Was: Orange (#f39c12)
- Now: PDF Red (#cd6060) - matches hover

Print Friendly button:
- Was: Orange (#f39c12)
- Now: White background + Green icon (#27ae60) - matches hover

Shortcuts button:
- Kept: Orange (#f39c12) - already correct

Color Theme Switcher:
- Was: Uniform orange
- Now: Dynamic colors based on theme mode
  - Light mode: Yellow (#f39c12)
  - Dark mode: Blue (#3498db)
  - Auto mode: Purple (#9b59b6)

Info button:
- Already correct: Green (#27ae60)

Back-to-top button:
- Already correct: Green (#27ae60)

Zoom button:
- Added: Blue (#3498db) - matches hover
- Added to scroll handler in utils._hs

**Result**: Each button now shows its characteristic color when page
is scrolled to bottom, providing consistent visual feedback that matches
the hover state.

Files changed:
- static/hyperscript/utils._hs: Added zoom button
- static/css/main.css: Updated 3 button colors
- static/css/color-theme.css: Dynamic theme colors
2025-11-19 09:35:17 +00:00

286 lines
8.2 KiB
CSS
Raw Blame History

/* ==============================================================================
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 - Softer version of dark theme */
--page-bg: #b8bbbe;
/* 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;
/* 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 - Original background */
--page-bg: rgb(82, 86, 89);
/* 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;
/* 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) */
--sidebar-bg: #2a2a2a;
/* 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 - Original background */
--page-bg: rgb(82, 86, 89);
/* 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;
/* 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) */
--sidebar-bg: #2a2a2a;
/* 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;
bottom: 14rem; /* Middle position - between print (18rem) and shortcuts (10rem) */
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar);
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: #f39c12 !important; /* Warm sun yellow for light mode */
}
.color-theme-switcher:hover[data-theme-mode="dark"] {
background: #3498db !important; /* Cool moon 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: #f39c12 !important; /* Warm sun yellow for light mode */
}
.color-theme-switcher.at-bottom[data-theme-mode="dark"] {
opacity: 1;
background: #3498db !important; /* Cool moon 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: 0.7 !important;
transform: none !important;
/* Position before info button: 5 buttons total */
/* Download, Print, Shortcuts, Theme, Info */
/* Total width: 5 * 50px + 4 * 10px = 290px */
left: calc(50% + 35px) !important; /* Fourth button */
}
.color-theme-switcher:hover {
opacity: 1 !important;
transform: translateY(-3px) !important;
}
}
Reference in New Issue View Git Blame Copy Permalink