fix: Back-to-top button positioning in mobile + consistent hover effects

Fixed two UI bugs in button styling:

**1. Back-to-top button position in mobile:**
- BEFORE: Button was included in flexbox layout but not positioned (defaulted to left)
- AFTER: Excluded from flexbox layout, positioned at bottom-right (1.5rem) - same as desktop
- Mobile flexbox layout now has 5 buttons (download, print, shortcuts, theme, info)
- Back-to-top stays independently positioned at bottom-right corner

**2. Consistent hover effects for all buttons:**
- BEFORE: Only info and shortcuts buttons had enhanced box-shadow on hover
- AFTER: All buttons (download, print, shortcuts, info, back-to-top) have consistent hover effects
- Added `box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important` to mobile hover states
- Creates unified "edge glow" effect across all button hovers

**Technical changes:**
- Split mobile button reset into two groups (flexbox buttons vs back-to-top)
- Enhanced mobile hover effect with box-shadow for visual consistency
- Maintains desktop behavior (back-to-top at bottom-right: 2rem)

Files modified: static/css/main.css
This commit is contained in:
juanatsap
2025-11-18 21:42:01 +00:00
parent 6e2b042c8d
commit cc6ca6e6ba
+15 -5
View File
@@ -2883,12 +2883,11 @@ html {
display: none !important;
}
/* Reset fixed positioning for all buttons on mobile */
/* Reset fixed positioning for FLEXBOX buttons on mobile (exclude back-to-top) */
.download-btn,
.print-friendly-btn,
.shortcuts-btn,
.info-button,
.back-to-top {
.info-button {
position: fixed !important;
bottom: 1.5rem !important;
left: auto !important;
@@ -2899,6 +2898,15 @@ html {
transform: none !important;
}
/* Keep back-to-top button at bottom-right (same as desktop) */
.back-to-top {
position: fixed !important;
bottom: 1.5rem !important;
right: 1.5rem !important;
width: 50px !important;
height: 50px !important;
}
/* Flexbox container behavior - buttons arrange themselves */
/* Buttons will be positioned using JavaScript or individual positioning */
/* For now, use fixed spacing from center */
@@ -2927,15 +2935,17 @@ html {
left: calc(50% + 95px) !important; /* Fifth button (last) */
}
/* Hover effects - only Y transform */
/* Hover effects - only Y transform + enhanced shadow */
.download-btn:hover,
.download-btn.pdf-hover-sync,
.print-friendly-btn:hover,
.print-friendly-btn.print-hover-sync,
.shortcuts-btn:hover,
.info-button:hover {
.info-button:hover,
.back-to-top:hover {
transform: translateY(-3px) !important;
opacity: 1 !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
/* Keep at-bottom state without transform */