txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Darker icon borders/separators in dark theme + invert LIV Golf logo

Browse Source 
- Add --icon-border variable: #ddd (light) / #2a2a2a (dark)
- Add --item-separator variable: rgba(0,0,0,0.1) / rgba(255,255,255,0.05)
- Replace 6 hardcoded icon borders with var(--icon-border)
- Replace 3 hardcoded separators with var(--item-separator)
- Add CSS filter to invert LIV Golf logo in dark themes for visibility
- LIV Golf logo filter: invert(1) in dark/auto(dark), none in light
This commit is contained in:
juanatsap
2025-11-19 15:26:19 +00:00
parent 85de5b621f
commit ac73b49d8d
2 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_themes.css
+22
View File
@@ -36,6 +36,8 @@
/* 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);
@@ -84,6 +86,8 @@
/* Borders & Dividers */
--border-color: #404040;
--border-light: #333333;
--icon-border: #2a2a2a; /* Much darker, less visible border for icons */
--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);
@@ -133,6 +137,8 @@
/* Borders & Dividers */
--border-color: #404040;
--border-light: #333333;
--icon-border: #2a2a2a; /* Much darker, less visible border for icons */
--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);
@@ -283,3 +289,19 @@
transform: translateY(-3px) !important;
}
}
/* ==============================================================================
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);
}
/* 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;
}
}