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:
+15
-5
@@ -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 */
|
||||
|
||||
Reference in New Issue
Block a user