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

fix: Complete mobile button fixes - transparency, color, and layout

Browse Source 
Fixes three critical mobile UI issues:

1. Theme Button Transparency (FIXED)
   - Changed theme button from 50% to full opacity on mobile
   - Updated _themes.css with rgba(x, y, z, 1) for all theme modes
   - Added opacity: 1 !important to mobile media query

2. Info Button Color Differentiation (FIXED)
   - Changed info button from green (#27ae60) to blue (#3498db)
   - Now visually distinct from green back-to-top button
   - Updated all states: default, hover, at-bottom

3. Button Layout Reorganization (FIXED)
   - Added .is-mobile-device rules for 5-button layout (no shortcuts)
   - Buttons centered without gap: Download, Print, Theme, Info, Back-to-top
   - Total width: 290px (5 buttons + 4 gaps) vs 350px (6 buttons)

Files modified:
- static/css/01-foundation/_themes.css - Primary theme button fix
- static/css/04-interactive/_scroll-behavior.css - Info color + layout
- static/css/color-theme.css - Mobile device positioning sync
- tests/mjs/53-final-mobile-fixes-test.mjs - Comprehensive validation

Test results:
✅ Shortcuts hidden on real mobile (iPhone user agent)
✅ 5 buttons evenly spaced with no gap (60px spacing)
✅ Info button blue (52, 152, 219) vs back-to-top green (39, 174, 96)
✅ Theme button full opacity (alpha: 1, opacity: 1)
This commit is contained in:
juanatsap
2025-11-25 04:56:09 +00:00
parent 3fdfacf2fe
commit 2a5a11e78d
4 changed files with 202 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_themes.css
+16 -9
View File
@@ -290,40 +290,47 @@
right: auto !important;
width: 50px !important;
height: 50px !important;
/* Removed opacity: 1 !important to allow .footer-hovered to work */
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 50% transparency by default on mobile */
/* 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, 0.5) !important; /* Gold at 50% */
background: rgba(212, 178, 0, 1) !important; /* Gold - full opacity */
}
.color-theme-switcher[data-theme-mode="dark"] {
background: rgba(1, 60, 119, 0.5) !important; /* Blue at 50% */
background: rgba(1, 60, 119, 1) !important; /* Blue - full opacity */
}
.color-theme-switcher[data-theme-mode="auto"] {
background: rgba(155, 89, 182, 0.5) !important; /* Purple at 50% */
background: rgba(155, 89, 182, 1) !important; /* Purple - full opacity */
}
/* Full color opacity on hover */
/* Full color opacity on hover (already at full opacity, just add transform) */
.color-theme-switcher:hover[data-theme-mode="light"] {
background: rgba(212, 178, 0, 1) !important; /* Full gold opacity */
transform: translateY(-3px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
.color-theme-switcher:hover[data-theme-mode="dark"] {
background: rgba(1, 60, 119, 1) !important; /* Full blue opacity */
transform: translateY(-3px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
.color-theme-switcher:hover[data-theme-mode="auto"] {
background: rgba(155, 89, 182, 1) !important; /* Full purple opacity */
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) */
}
}