From b9e9e09d71b3b8b151c680976fe81a0a02529bf5 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Sun, 16 Nov 2025 13:29:40 +0000
Subject: [PATCH] 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)
---
 static/css/main.css                           | 58 +++++++++++++------
 .../partials/widgets/zoom-toggle-button.html  |  6 +-
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index e56d0e6..be9bb6e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -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) */
diff --git a/templates/partials/widgets/zoom-toggle-button.html b/templates/partials/widgets/zoom-toggle-button.html
index 30a1c2d..d3188ad 100644
--- a/templates/partials/widgets/zoom-toggle-button.html
+++ b/templates/partials/widgets/zoom-toggle-button.html
@@ -4,7 +4,11 @@
     id="zoom-toggle-button"
     class="fixed-btn zoom-toggle-btn no-print"
     aria-label="{{if eq .Lang "es"}}Alternar control de zoom{{else}}Toggle zoom control{{end}}"
-    title="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}">
+    title="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}"
+    _="on mouseenter
+         add .zoom-highlight to #zoom-control
+       on mouseleave
+         remove .zoom-highlight from #zoom-control">
     <iconify-icon icon="mdi:magnify" width="28" height="28"></iconify-icon>
 </button>
 {{end}}