feat: enhance zoom and print button UX

Print Button Improvements:
- Hover shows white background with green icon (was green bg + white icon)
- Applied to all print buttons: fixed, action bar, and menu
- Default state remains dark gray with white icon

Zoom Control Improvements:
- Text now 100% white (was 70-95% opacity) for better readability
- Increased font sizes: labels 0.95rem (was 0.8rem), current value 1.05rem (was 0.9rem)
- Hover zoom toggle button highlights zoom control with blue glow shadow
- Active zoom button uses semi-transparent blue rgba(52, 152, 219, 0.5) instead of solid

Z-Index Fix:
- Hamburger menu now appears above fixed buttons (z-index: 1000 vs 999)
This commit is contained in:
juanatsap
2025-11-16 13:29:40 +00:00
parent bfb7b35c50
commit b9e9e09d71
2 changed files with 45 additions and 19 deletions
+40 -18
View File
@@ -461,19 +461,25 @@ iconify-icon {
filter: brightness(0) invert(1); /* Keep white on hover */
}
/* Print Friendly button - transparent by default, green on hover */
/* Print Friendly button - white bg with green icon on hover */
.print-btn {
background: transparent;
background: transparent !important;
color: white !important;
}
.print-btn:hover,
.print-btn.print-hover-sync {
background: #27ae60 !important;
color: white !important;
background: white !important; /* White background on hover */
color: #27ae60 !important; /* Green icon on hover */
}
.print-btn:hover iconify-icon {
color: white;
.print-btn iconify-icon {
color: white; /* White icon by default */
}
.print-btn:hover iconify-icon,
.print-btn.print-hover-sync iconify-icon {
color: #27ae60; /* Green icon on hover */
}
/* CV Length Toggle - Center of action bar */
@@ -2435,7 +2441,7 @@ text-align: center;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
overflow-y: auto;
z-index: 99;
z-index: 1000; /* Above fixed buttons (z-index: 999) */
pointer-events: none; /* Disable pointer events when hidden */
opacity: 0;
}
@@ -2679,10 +2685,10 @@ text-align: center;
color: var(--accent-blue);
}
/* Print button in menu - Green hover to match other print buttons */
/* Print button in menu - White bg with green icon on hover */
.menu-print-btn:hover,
.menu-print-btn.print-hover-sync {
background: rgba(39, 174, 96, 0.08) !important;
background: white !important;
color: #27ae60 !important;
}
@@ -3709,6 +3715,12 @@ html {
user-select: none; /* Prevent text selection while dragging */
}
/* Zoom control highlight when hovering zoom toggle button */
.zoom-control.zoom-highlight {
opacity: 1;
box-shadow: 0 0 20px rgba(52, 152, 219, 0.6), 0 3px 10px rgba(0, 0, 0, 0.3);
}
/* Hidden state for zoom control and show button */
.zoom-hidden {
display: none !important;
@@ -3751,17 +3763,17 @@ html {
/* Zoom Values (Labels) */
.zoom-value {
color: rgba(255, 255, 255, 0.7);
font-size: 0.8rem;
font-weight: 400;
color: rgba(255, 255, 255, 1); /* 100% white */
font-size: 0.95rem; /* Bigger */
font-weight: 500; /* Medium weight */
min-width: 30px;
text-align: center;
}
.zoom-value-current {
color: rgba(255, 255, 255, 0.95);
color: rgba(255, 255, 255, 1); /* 100% white */
font-weight: 600;
font-size: 0.9rem;
font-size: 1.05rem; /* Bigger */
min-width: 35px;
}
@@ -3979,7 +3991,7 @@ html {
.zoom-toggle-btn.zoom-active {
opacity: 1;
background: #3498db; /* Blue when active */
background: rgba(52, 152, 219, 0.5); /* Semi-transparent blue when active */
color: white;
}
@@ -4032,8 +4044,8 @@ html {
left: 2rem;
width: 50px;
height: 50px;
background: var(--black-bar);
color: white;
background: var(--black-bar); /* Dark background by default */
color: white; /* White icon by default */
border: none;
border-radius: 50%;
cursor: pointer;
@@ -4046,12 +4058,22 @@ html {
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: #27ae60 !important; /* Green hover */
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 */
}
/* Download Button (above print-friendly) */