juanatsap
3b6d5e781a
Dev-only toggle button enables/disables photo backgrounds. Photos are auto-discovered from static/images/backgrounds/ and randomly selected on each page load. Production is unaffected — no button, no photo.
323 lines
8.6 KiB
CSS
323 lines
8.6 KiB
CSS
|
|
/* =============================================================================
|
|
KEYBOARD SHORTCUTS BUTTON & MODAL
|
|
============================================================================= */
|
|
|
|
/* Shortcuts Button (Fixed Left) - Mirrors info-button on opposite side */
|
|
/* Zoom Toggle Button (above shortcuts button) */
|
|
.zoom-toggle-btn {
|
|
position: fixed;
|
|
bottom: 10rem; /* Above shortcuts button */
|
|
left: 2rem;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--black-bar, #2b2b2b); /* Dark by default like other buttons */
|
|
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);
|
|
transition: all 0.3s ease;
|
|
z-index: 999;
|
|
opacity: 0.6; /* Match shortcuts button opacity */
|
|
}
|
|
|
|
.zoom-toggle-btn:hover {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
background: #5c59b6; /* Purple hover - distinct from info button blue */
|
|
}
|
|
|
|
.zoom-toggle-btn.at-bottom {
|
|
opacity: 1;
|
|
background: #5c59b6; /* Purple - matches hover, distinct from info button */
|
|
}
|
|
|
|
/* No special styling for active state - button looks same whether zoom is on or off */
|
|
|
|
.shortcuts-btn {
|
|
position: fixed;
|
|
bottom: 6rem; /* Above back-to-top button (2rem + 50px + gap) */
|
|
left: 2rem; /* LEFT SIDE instead of right */
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--black-bar, #2b2b2b);
|
|
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 */
|
|
}
|
|
|
|
.shortcuts-btn:hover {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
background: #f39c12; /* Orange hover */
|
|
}
|
|
|
|
.shortcuts-btn.at-bottom {
|
|
opacity: 1;
|
|
background: #f39c12; /* Orange when at bottom */
|
|
}
|
|
|
|
.shortcuts-btn:active {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Print-Friendly Button (second from top) */
|
|
.print-friendly-btn {
|
|
position: fixed;
|
|
bottom: 22rem; /* Below download button (26rem) */
|
|
left: 2rem;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--black-bar, #2b2b2b); /* Dark background by default */
|
|
color: white; /* White icon by default */
|
|
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);
|
|
transition: all 0.3s ease;
|
|
z-index: 999;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.print-friendly-btn iconify-icon {
|
|
color: white; /* White icon by default */
|
|
}
|
|
|
|
.print-friendly-btn:hover,
|
|
.print-friendly-btn.print-hover-sync {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
background: white !important; /* White background on hover */
|
|
color: #27ae60; /* Green icon on hover */
|
|
}
|
|
|
|
.print-friendly-btn:hover iconify-icon,
|
|
.print-friendly-btn.print-hover-sync iconify-icon {
|
|
color: #27ae60; /* Green icon on hover */
|
|
}
|
|
|
|
.print-friendly-btn.at-bottom {
|
|
opacity: 1;
|
|
background: white !important; /* White background - matches hover */
|
|
color: #27ae60; /* Green - matches hover */
|
|
}
|
|
|
|
.print-friendly-btn.at-bottom iconify-icon {
|
|
color: #27ae60; /* Green icon when at bottom */
|
|
}
|
|
|
|
/* Background Photo Toggle (Dev Only - above download button) */
|
|
.bg-photo-btn {
|
|
position: fixed;
|
|
bottom: 30rem;
|
|
left: 2rem;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--black-bar, #2b2b2b);
|
|
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);
|
|
transition: all 0.3s ease;
|
|
z-index: 999;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.bg-photo-btn:hover {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
background: #8e6b3e !important; /* Earthy brown — Lanzarote vibes */
|
|
}
|
|
|
|
.bg-photo-btn.at-bottom {
|
|
opacity: 1;
|
|
background: #8e6b3e !important;
|
|
}
|
|
|
|
/* Download Button (TOP POSITION - now first button after cmd-k removed) */
|
|
.download-btn {
|
|
position: fixed;
|
|
bottom: 26rem; /* Top button position */
|
|
left: 2rem;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: var(--black-bar, #2b2b2b);
|
|
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);
|
|
transition: all 0.3s ease;
|
|
z-index: 999;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.download-btn {
|
|
background: var(--black-bar, #2b2b2b); /* Gray by default like other buttons */
|
|
opacity: 0.6; /* Match other buttons */
|
|
}
|
|
|
|
.download-btn:hover,
|
|
.download-btn.pdf-hover-sync {
|
|
opacity: 1;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
|
background: #cd6060 !important; /* PDF red on hover */
|
|
}
|
|
|
|
.download-btn iconify-icon {
|
|
filter: brightness(0) invert(1); /* Always white */
|
|
transition: filter 0.3s ease;
|
|
}
|
|
|
|
.download-btn:hover iconify-icon {
|
|
filter: brightness(0) invert(1); /* Keep white on hover */
|
|
}
|
|
|
|
.download-btn.at-bottom {
|
|
opacity: 1;
|
|
background: #cd6060 !important; /* PDF red - matches hover */
|
|
}
|
|
|
|
/* Mobile adjustments - now handled by fluid sizing in _scroll-behavior.css
|
|
The 900px media query there uses clamp() for smooth scaling of all buttons and icons */
|
|
|
|
|
|
/* =============================================================================
|
|
CMD+K SEARCH BAR BUTTON (Integrated in Action Bar)
|
|
============================================================================= */
|
|
|
|
/* Search bar button - styled to look like a search input within the dark action bar */
|
|
.search-bar-btn {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.35rem 0.6rem !important;
|
|
background: rgba(255, 255, 255, 0.1) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
border-radius: 6px !important;
|
|
min-width: 140px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.search-bar-btn:hover {
|
|
background: rgba(255, 255, 255, 0.15) !important;
|
|
border-color: rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
|
|
.search-bar-icon {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-bar-text {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 0.8rem;
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.search-bar-keys {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-bar-keys kbd {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
|
|
font-size: 0.65rem;
|
|
font-weight: 500;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
|
border-radius: 3px;
|
|
padding: 0.1rem 0.3rem;
|
|
min-width: 1.2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Hide kbd keys on smaller screens to save space */
|
|
@media (max-width: 900px) {
|
|
.search-bar-keys {
|
|
display: none;
|
|
}
|
|
|
|
.search-bar-btn {
|
|
min-width: auto;
|
|
}
|
|
}
|
|
|
|
|
|
/* =============================================================================
|
|
NINJA-KEYS COMMAND BAR STYLING
|
|
============================================================================= */
|
|
|
|
ninja-keys {
|
|
--ninja-font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--ninja-accent-color: #667eea;
|
|
--ninja-z-index: 10000;
|
|
--ninja-width: 640px;
|
|
--ninja-backdrop-filter: blur(8px);
|
|
|
|
/* Light mode colors */
|
|
--ninja-modal-background: rgba(255, 255, 255, 0.95);
|
|
--ninja-modal-shadow: 0 16px 70px rgba(0, 0, 0, 0.2);
|
|
--ninja-text-color: #1a1a1a;
|
|
--ninja-secondary-text-color: #666;
|
|
--ninja-actions-background: #f5f5f5;
|
|
--ninja-selected-background: #667eea;
|
|
--ninja-selected-text-color: white;
|
|
--ninja-key-background: #e0e0e0;
|
|
--ninja-key-text-color: #333;
|
|
--ninja-footer-background: #f9f9f9;
|
|
--ninja-placeholder-color: #999;
|
|
}
|
|
|
|
/* Dark mode colors */
|
|
[data-color-theme="dark"] ninja-keys {
|
|
--ninja-modal-background: rgba(40, 40, 40, 0.95);
|
|
--ninja-text-color: #e0e0e0;
|
|
--ninja-secondary-text-color: #999;
|
|
--ninja-actions-background: #2a2a2a;
|
|
--ninja-key-background: #444;
|
|
--ninja-key-text-color: #e0e0e0;
|
|
--ninja-footer-background: #2a2a2a;
|
|
--ninja-placeholder-color: #777;
|
|
}
|
|
|
|
/* Shortcut highlight in shortcuts modal */
|
|
.shortcut-highlight {
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
|
border-radius: 8px;
|
|
padding: 0.5rem;
|
|
margin: -0.5rem;
|
|
}
|
|
|