fix: Apply at-bottom color to ALL buttons consistently
**Issue**: Only info and shortcuts buttons were showing orange color when scrolled to bottom of page. Download PDF, Print Friendly, and Color Theme buttons were missing this visual feedback. **Fix**: 1. Added all buttons to at-bottom class logic in utils._hs: - #download-button - #print-friendly-button - .color-theme-switcher 2. Added CSS .at-bottom styles for missing buttons: - .download-btn.at-bottom - .print-friendly-btn.at-bottom - .color-theme-switcher.at-bottom **Result**: All fixed buttons now show unified orange (#f39c12) background when page is scrolled to bottom (within 50px), providing consistent visual feedback across all controls. Files changed: - static/hyperscript/utils._hs: Added 3 buttons to scroll handler - static/css/main.css: Added 2 .at-bottom styles - static/css/color-theme.css: Added 1 .at-bottom style
This commit is contained in:
@@ -199,6 +199,12 @@
|
|||||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* At-bottom state - unified orange for all theme modes */
|
||||||
|
.color-theme-switcher.at-bottom {
|
||||||
|
opacity: 1;
|
||||||
|
background: #f39c12 !important; /* Orange when at bottom */
|
||||||
|
}
|
||||||
|
|
||||||
.color-theme-switcher iconify-icon {
|
.color-theme-switcher iconify-icon {
|
||||||
color: white !important;
|
color: white !important;
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
|
|||||||
@@ -4147,6 +4147,11 @@ html {
|
|||||||
color: #27ae60; /* Green icon on hover */
|
color: #27ae60; /* Green icon on hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.print-friendly-btn.at-bottom {
|
||||||
|
opacity: 1;
|
||||||
|
background: #f39c12; /* Orange when at bottom */
|
||||||
|
}
|
||||||
|
|
||||||
/* Download Button (TOP POSITION) */
|
/* Download Button (TOP POSITION) */
|
||||||
.download-btn {
|
.download-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -4190,6 +4195,11 @@ html {
|
|||||||
filter: brightness(0) invert(1); /* Keep white on hover */
|
filter: brightness(0) invert(1); /* Keep white on hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.download-btn.at-bottom {
|
||||||
|
opacity: 1;
|
||||||
|
background: #f39c12; /* Orange when at bottom */
|
||||||
|
}
|
||||||
|
|
||||||
/* Mobile adjustments */
|
/* Mobile adjustments */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.shortcuts-btn {
|
.shortcuts-btn {
|
||||||
|
|||||||
@@ -114,12 +114,18 @@ def handleScroll()
|
|||||||
add .at-bottom to #back-to-top
|
add .at-bottom to #back-to-top
|
||||||
add .at-bottom to #info-button
|
add .at-bottom to #info-button
|
||||||
add .at-bottom to #shortcuts-button
|
add .at-bottom to #shortcuts-button
|
||||||
|
add .at-bottom to #download-button
|
||||||
|
add .at-bottom to #print-friendly-button
|
||||||
|
add .at-bottom to .color-theme-switcher
|
||||||
end
|
end
|
||||||
|
|
||||||
if not isAtBottom
|
if not isAtBottom
|
||||||
remove .at-bottom from #back-to-top
|
remove .at-bottom from #back-to-top
|
||||||
remove .at-bottom from #info-button
|
remove .at-bottom from #info-button
|
||||||
remove .at-bottom from #shortcuts-button
|
remove .at-bottom from #shortcuts-button
|
||||||
|
remove .at-bottom from #download-button
|
||||||
|
remove .at-bottom from #print-friendly-button
|
||||||
|
remove .at-bottom from .color-theme-switcher
|
||||||
end
|
end
|
||||||
|
|
||||||
-- Update last scroll position
|
-- Update last scroll position
|
||||||
|
|||||||
Reference in New Issue
Block a user