juanatsap
da483ae9f1
Issues fixed: 1. Zoom button now uses purple color (rgba(155, 89, 182, 0.7)) instead of blue 2. Info button keeps blue color (rgba(52, 152, 219, 0.7)) 3. Both buttons now show distinct colors in default state, not just on hover 4. Device detection now considers viewport width, not just user agent 5. Buttons no longer hide in responsive mode at desktop viewport sizes Changes: - Updated zoom-toggle-btn to use purple background color - Updated info-button to use blue background color (explicit, not var) - Modified device-detection.js to check viewport width (≤900px) in addition to UA - Added resize listener to update device class dynamically - Created test (67-button-colors-and-visibility-test.mjs) to verify fixes Testing: - Desktop (1278px): All buttons visible with distinct colors - Mobile (375px): Zoom/shortcuts hidden, core buttons visible - Device detection now viewport-aware (prevents hiding at desktop sizes)
358 lines
11 KiB
CSS
358 lines
11 KiB
CSS
/* ========================================
|
|
Scroll Direction - Hide/Show Header
|
|
======================================== */
|
|
|
|
/* Add smooth transition to header elements */
|
|
.action-bar,
|
|
.navigation-menu {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Hide header when scrolling down */
|
|
.action-bar.header-hidden {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.navigation-menu.header-hidden {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
/* ========================================
|
|
Back to Top Button
|
|
======================================== */
|
|
|
|
.back-to-top {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--black-bar);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
z-index: 99;
|
|
transition: all 0.3s ease;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.back-to-top:hover {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
background: #27ae60;
|
|
}
|
|
|
|
.back-to-top.at-bottom {
|
|
opacity: 1;
|
|
background: #27ae60;
|
|
}
|
|
|
|
.back-to-top:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 768px) {
|
|
.back-to-top {
|
|
bottom: 1.5rem;
|
|
right: 1.5rem;
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
Info Button (Bottom Left)
|
|
======================================== */
|
|
|
|
.info-button {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 2rem;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(52, 152, 219, 0.7); /* Blue with transparency - distinct from zoom purple */
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
z-index: 99;
|
|
transition: all 0.3s ease;
|
|
opacity: 0.6; /* Increased from 0.2 for better discoverability */
|
|
}
|
|
|
|
.info-button:hover {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
background: #3498db; /* Blue - different from back-to-top green */
|
|
}
|
|
|
|
.info-button.at-bottom {
|
|
opacity: 1;
|
|
background: #3498db; /* Blue - different from back-to-top green */
|
|
}
|
|
|
|
.info-button:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Hide keyboard shortcuts button on real mobile devices (no keyboard) */
|
|
.is-mobile-device .shortcuts-btn,
|
|
.is-mobile-device .zoom-toggle-btn,
|
|
.is-mobile-device .zoom-control {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Mobile adjustments - Flexbox button layout at bottom center */
|
|
@media (max-width: 900px) {
|
|
/* Hide zoom control on mobile (keyboard shortcuts now visible on desktop mobile view) */
|
|
.zoom-toggle-btn,
|
|
.zoom-control {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Reset fixed positioning for FLEXBOX buttons on mobile (exclude back-to-top) */
|
|
.download-btn,
|
|
.print-friendly-btn,
|
|
.shortcuts-btn,
|
|
.info-button {
|
|
position: fixed !important;
|
|
bottom: 1.5rem !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
width: 50px !important;
|
|
height: 50px !important;
|
|
/* Removed opacity: 1 !important to allow .footer-hovered to work */
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Mobile: Show colors at full opacity (no transparency with blur bar) */
|
|
.download-btn {
|
|
background: rgba(205, 96, 96, 1) !important; /* PDF red - full opacity */
|
|
opacity: 1 !important; /* Override base opacity */
|
|
}
|
|
|
|
.print-friendly-btn {
|
|
background: rgba(255, 255, 255, 1) !important; /* White - full opacity */
|
|
opacity: 1 !important; /* Override base opacity */
|
|
}
|
|
|
|
.print-friendly-btn iconify-icon {
|
|
color: #27ae60 !important; /* Green icon */
|
|
}
|
|
|
|
.shortcuts-btn {
|
|
background: rgba(243, 156, 18, 1) !important; /* Orange - full opacity */
|
|
opacity: 1 !important; /* Override base opacity */
|
|
}
|
|
|
|
.info-button {
|
|
background: rgba(52, 152, 219, 1) !important; /* Blue - full opacity, different from back-to-top */
|
|
opacity: 1 !important; /* Override base opacity */
|
|
}
|
|
|
|
.back-to-top {
|
|
background: rgba(39, 174, 96, 1) !important; /* Green - full opacity */
|
|
opacity: 1 !important; /* Full opacity (no transparency with blur bar) */
|
|
}
|
|
|
|
/* Flexbox container behavior - buttons arrange themselves */
|
|
/* Buttons will be positioned using JavaScript or individual positioning */
|
|
/* For now, use fixed spacing from center */
|
|
|
|
/* 6 buttons: Download, Print, Shortcuts, Theme, Info, Back-to-top */
|
|
/* Spacing: 10px gap between buttons, centered horizontally */
|
|
/* Total width: 6 * 50px + 5 * 10px = 350px */
|
|
/* Start position: 50% - 175px */
|
|
|
|
.download-btn {
|
|
left: calc(50% - 175px) !important; /* First button */
|
|
}
|
|
|
|
.print-friendly-btn {
|
|
left: calc(50% - 115px) !important; /* Second button */
|
|
}
|
|
|
|
.shortcuts-btn {
|
|
left: calc(50% - 55px) !important; /* Third button */
|
|
}
|
|
|
|
/* Theme switcher button - fourth position (defined in color-theme.css) */
|
|
/* left: calc(50% + 5px) !important; */
|
|
|
|
.info-button {
|
|
left: calc(50% + 65px) !important; /* Fifth button */
|
|
}
|
|
|
|
/* Back-to-top button - now part of the button row (sixth button) */
|
|
.back-to-top {
|
|
position: fixed !important;
|
|
bottom: 1.5rem !important;
|
|
left: calc(50% + 125px) !important; /* Sixth button (last) */
|
|
right: auto !important; /* Override previous right positioning */
|
|
width: 50px !important;
|
|
height: 50px !important;
|
|
/* Removed fixed opacity - will be controlled by .at-bottom class */
|
|
display: flex !important; /* Ensure it's always displayed */
|
|
}
|
|
|
|
/* REAL MOBILE DEVICES: 5 buttons without shortcuts (no gap) */
|
|
/* Total width: 5 * 50px + 4 * 10px = 290px, start at 50% - 145px */
|
|
.is-mobile-device .download-btn {
|
|
left: calc(50% - 145px) !important; /* First button */
|
|
}
|
|
|
|
.is-mobile-device .print-friendly-btn {
|
|
left: calc(50% - 85px) !important; /* Second button */
|
|
}
|
|
|
|
/* Theme switcher on mobile - third position (see color-theme.css for override) */
|
|
|
|
.is-mobile-device .info-button {
|
|
left: calc(50% + 35px) !important; /* Fourth button */
|
|
}
|
|
|
|
.is-mobile-device .back-to-top {
|
|
left: calc(50% + 95px) !important; /* Fifth button (last) */
|
|
}
|
|
|
|
/* Always show back-to-top on mobile (don't wait for scroll) */
|
|
.back-to-top:hover {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Hover effects - Full color opacity on hover */
|
|
.download-btn:hover,
|
|
.download-btn.pdf-hover-sync {
|
|
background: rgba(205, 96, 96, 1) !important; /* Full red opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.print-friendly-btn:hover,
|
|
.print-friendly-btn.print-hover-sync {
|
|
background: rgba(255, 255, 255, 1) !important; /* Full white opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.shortcuts-btn:hover {
|
|
background: rgba(243, 156, 18, 1) !important; /* Full orange opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.info-button:hover {
|
|
background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.back-to-top:hover {
|
|
background: rgba(39, 174, 96, 1) !important; /* Full green opacity */
|
|
transform: translateY(-3px) !important;
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
/* Keep at-bottom state - full opacity colors for each button */
|
|
.download-btn.at-bottom {
|
|
background: rgba(205, 96, 96, 1) !important; /* Full red opacity */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.print-friendly-btn.at-bottom {
|
|
background: rgba(255, 255, 255, 1) !important; /* Full white opacity */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.shortcuts-btn.at-bottom {
|
|
background: rgba(243, 156, 18, 1) !important; /* Full orange opacity */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.info-button.at-bottom {
|
|
background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.back-to-top.at-bottom {
|
|
background: rgba(39, 174, 96, 1) !important; /* Full green opacity - NO transparency */
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Make all buttons semi-transparent when footer is hovered (applied via JS) */
|
|
.download-btn.footer-hovered,
|
|
.print-friendly-btn.footer-hovered,
|
|
.shortcuts-btn.footer-hovered,
|
|
.info-button.footer-hovered,
|
|
.back-to-top.footer-hovered,
|
|
.color-theme-switcher.footer-hovered {
|
|
opacity: 0.2 !important; /* Make buttons very transparent to see footer */
|
|
pointer-events: none !important; /* Prevent interaction when footer is hovered */
|
|
}
|
|
}
|
|
|
|
/* Very narrow mobile - Stack buttons vertically or adjust spacing if needed */
|
|
@media (max-width: 483px) {
|
|
/* For very narrow screens, you may need to adjust button spacing or size */
|
|
/* For now, keep the same horizontal layout but buttons might overflow slightly */
|
|
/* Users can scroll horizontally if needed, or we can reduce button sizes */
|
|
}
|
|
|
|
/* ========================================
|
|
Mobile: Keep action bar visible (prevent hiding on scroll)
|
|
======================================== */
|
|
@media (max-width: 900px) {
|
|
/* Prevent action bar from hiding on scroll on mobile */
|
|
.action-bar.header-hidden {
|
|
transform: translateY(0) !important; /* Override hide behavior */
|
|
}
|
|
|
|
.navigation-menu.header-hidden {
|
|
transform: translateY(0) !important; /* Override hide behavior */
|
|
}
|
|
|
|
/* Add bottom padding to footer so text isn't hidden behind button bar */
|
|
footer.no-print {
|
|
padding-bottom: 120px !important; /* More clearance for 6 buttons + spacing */
|
|
transition: all 0.3s ease;
|
|
z-index: 1 !important; /* Keep footer behind buttons (buttons have z-index: 99) */
|
|
position: relative;
|
|
}
|
|
|
|
/* Footer hover effect - enlarge text when touched (for button transparency) */
|
|
footer.no-print.footer-hovered {
|
|
/* Only used for button transparency interaction */
|
|
}
|
|
|
|
/* Footer text automatically enlarges when at page bottom */
|
|
footer.no-print.at-bottom {
|
|
padding-bottom: 130px !important; /* Extra space when enlarged */
|
|
}
|
|
|
|
footer.no-print.at-bottom p,
|
|
footer.no-print.at-bottom a {
|
|
font-size: 1.2em !important;
|
|
font-weight: 500 !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|