monday last fixes before printing
This commit is contained in:
juanatsap
+54
-113
@@ -2823,28 +2823,13 @@ html {
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Fixed Buttons Container - Flexbox Layout
|
||||
Info Button (Bottom Left)
|
||||
======================================== */
|
||||
|
||||
.fixed-buttons-container {
|
||||
.info-button {
|
||||
position: fixed;
|
||||
left: 2rem; /* LEFT SIDE - buttons grow bottom to top */
|
||||
bottom: 2rem;
|
||||
display: grid; /* Use grid instead of flex for better control */
|
||||
grid-auto-flow: row; /* Stack vertically */
|
||||
gap: 1rem; /* 16px gap between buttons */
|
||||
justify-items: center;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* All buttons inside container - shared styles */
|
||||
.fixed-buttons-container > button,
|
||||
.fixed-buttons-container .info-button,
|
||||
.fixed-buttons-container .shortcuts-btn,
|
||||
.fixed-buttons-container .zoom-toggle-btn,
|
||||
.fixed-buttons-container .print-friendly-btn,
|
||||
.fixed-buttons-container .download-btn {
|
||||
position: relative !important; /* Override fixed positioning */
|
||||
left: 2rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--black-bar);
|
||||
@@ -2856,23 +2841,9 @@ html {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
opacity: 0.6;
|
||||
margin: 0;
|
||||
/* Each button transitions independently with stagger */
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Staggered animation delays - creates cascading wave effect */
|
||||
.fixed-buttons-container > *:nth-child(1) { transition-delay: 0s; }
|
||||
.fixed-buttons-container > *:nth-child(2) { transition-delay: 0.08s; }
|
||||
.fixed-buttons-container > *:nth-child(3) { transition-delay: 0.16s; }
|
||||
.fixed-buttons-container > *:nth-child(4) { transition-delay: 0.24s; }
|
||||
.fixed-buttons-container > *:nth-child(5) { transition-delay: 0.32s; }
|
||||
|
||||
/* Legacy selector for backwards compatibility */
|
||||
.info-button {
|
||||
background: var(--black-bar);
|
||||
color: white;
|
||||
z-index: 99;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0.6; /* Increased from 0.2 for better discoverability */
|
||||
}
|
||||
|
||||
.info-button:hover {
|
||||
@@ -2892,101 +2863,71 @@ html {
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Hover states for all buttons in container */
|
||||
.fixed-buttons-container .info-button:hover,
|
||||
.fixed-buttons-container .info-button.at-bottom {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.fixed-buttons-container .shortcuts-btn:hover,
|
||||
.fixed-buttons-container .shortcuts-btn.at-bottom {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #f39c12; /* Orange */
|
||||
}
|
||||
|
||||
.fixed-buttons-container .zoom-toggle-btn:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #3498db; /* Blue */
|
||||
}
|
||||
|
||||
.fixed-buttons-container .print-friendly-btn:hover,
|
||||
.fixed-buttons-container .print-friendly-btn.print-hover-sync {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: white;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.fixed-buttons-container .print-friendly-btn:hover iconify-icon,
|
||||
.fixed-buttons-container .print-friendly-btn.print-hover-sync iconify-icon {
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.fixed-buttons-container .download-btn:hover,
|
||||
.fixed-buttons-container .download-btn.pdf-hover-sync {
|
||||
opacity: 1;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
|
||||
background: #cd6060; /* PDF red */
|
||||
}
|
||||
|
||||
.fixed-buttons-container .download-btn iconify-icon {
|
||||
filter: brightness(0) invert(1); /* Always white */
|
||||
}
|
||||
|
||||
/* Mobile adjustments - Horizontal flexbox layout at bottom center */
|
||||
/* Mobile adjustments - Flexbox button layout at bottom center */
|
||||
@media (max-width: 900px) {
|
||||
/* Hide only zoom button and control on mobile */
|
||||
.fixed-buttons-container .zoom-toggle-btn,
|
||||
/* Hide only zoom control on mobile */
|
||||
.zoom-toggle-btn,
|
||||
.zoom-control {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Change container to horizontal layout at bottom center */
|
||||
.fixed-buttons-container {
|
||||
grid-auto-flow: column; /* Horizontal on mobile */
|
||||
left: 50%;
|
||||
transform: translateX(-50%); /* Center the container */
|
||||
bottom: 1.5rem;
|
||||
gap: 10px; /* Smaller gap on mobile */
|
||||
}
|
||||
|
||||
/* Buttons maintain same size and styles from desktop */
|
||||
.fixed-buttons-container > button,
|
||||
.fixed-buttons-container .info-button,
|
||||
.fixed-buttons-container .shortcuts-btn,
|
||||
.fixed-buttons-container .print-friendly-btn,
|
||||
.fixed-buttons-container .download-btn {
|
||||
/* Reset fixed positioning for all buttons on mobile */
|
||||
.download-btn,
|
||||
.print-friendly-btn,
|
||||
.shortcuts-btn,
|
||||
.info-button,
|
||||
.back-to-top {
|
||||
position: fixed !important;
|
||||
bottom: 1.5rem !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
opacity: 0.7 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.fixed-buttons-container > button:hover,
|
||||
.fixed-buttons-container .info-button:hover,
|
||||
.fixed-buttons-container .shortcuts-btn:hover,
|
||||
.fixed-buttons-container .print-friendly-btn:hover,
|
||||
.fixed-buttons-container .download-btn:hover,
|
||||
/* Flexbox container behavior - buttons arrange themselves */
|
||||
/* Buttons will be positioned using JavaScript or individual positioning */
|
||||
/* For now, use fixed spacing from center */
|
||||
|
||||
/* 4 buttons: Download, Print, Shortcuts, Info */
|
||||
/* Spacing: 10px gap between buttons, centered horizontally */
|
||||
/* Total width: 4 * 50px + 3 * 10px = 230px */
|
||||
/* Start position: 50% - 115px */
|
||||
|
||||
.download-btn {
|
||||
left: calc(50% - 115px) !important; /* First button: center - (230px/2) */
|
||||
}
|
||||
|
||||
.print-friendly-btn {
|
||||
left: calc(50% - 55px) !important; /* Second button: center - (230px/2) + 50px + 10px */
|
||||
}
|
||||
|
||||
.shortcuts-btn {
|
||||
left: calc(50% + 5px) !important; /* Third button: center - (230px/2) + 110px + 20px */
|
||||
}
|
||||
|
||||
.info-button {
|
||||
left: calc(50% + 65px) !important; /* Fourth button: center - (230px/2) + 170px + 30px */
|
||||
}
|
||||
|
||||
/* Hover effects - only Y transform */
|
||||
.download-btn:hover,
|
||||
.download-btn.pdf-hover-sync,
|
||||
.print-friendly-btn.print-hover-sync {
|
||||
opacity: 1 !important;
|
||||
.print-friendly-btn:hover,
|
||||
.print-friendly-btn.print-hover-sync,
|
||||
.shortcuts-btn:hover,
|
||||
.info-button:hover {
|
||||
transform: translateY(-3px) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* At-bottom state */
|
||||
/* Keep at-bottom state without transform */
|
||||
.info-button.at-bottom,
|
||||
.shortcuts-btn.at-bottom {
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3730,7 +3671,7 @@ html {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1 1 55%;
|
||||
flex: 1 1 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user