fix: remove blue active state from zoom button and restore Show Zoom menu item
- Removed .zoom-active CSS class and JavaScript logic - Zoom button stays same gray color whether zoom is on or off - Fixed Show Zoom menu button visibility (changed inline style to zoom-hidden class) - Menu item now correctly appears when zoom is hidden
This commit is contained in:
+2
-12
@@ -3757,7 +3757,7 @@ html {
|
|||||||
|
|
||||||
.zoom-control:hover {
|
.zoom-control:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background: rgba(128, 128, 128, 0.85);
|
background: rgb(91 91 91);
|
||||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3989,17 +3989,7 @@ html {
|
|||||||
background: #3498db; /* Blue hover */
|
background: #3498db; /* Blue hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
.zoom-toggle-btn.zoom-active {
|
/* No special styling for active state - button looks same whether zoom is on or off */
|
||||||
opacity: 1;
|
|
||||||
background: rgba(52, 152, 219, 0.5); /* Semi-transparent blue when active */
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-toggle-btn.zoom-active:hover {
|
|
||||||
background: #2980b9; /* Darker blue on hover when active */
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4); /* Blue glow */
|
|
||||||
}
|
|
||||||
|
|
||||||
.shortcuts-btn {
|
.shortcuts-btn {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
+3
-10
@@ -362,12 +362,12 @@
|
|||||||
if (show) {
|
if (show) {
|
||||||
zoomControl.classList.remove('zoom-hidden');
|
zoomControl.classList.remove('zoom-hidden');
|
||||||
if (showBtn) showBtn.classList.add('zoom-hidden');
|
if (showBtn) showBtn.classList.add('zoom-hidden');
|
||||||
if (toggleBtn) toggleBtn.classList.add('zoom-active');
|
// Don't add zoom-active class - button stays same color
|
||||||
localStorage.setItem('cv-zoom-visible', 'true');
|
localStorage.setItem('cv-zoom-visible', 'true');
|
||||||
} else {
|
} else {
|
||||||
zoomControl.classList.add('zoom-hidden');
|
zoomControl.classList.add('zoom-hidden');
|
||||||
if (showBtn) showBtn.classList.remove('zoom-hidden');
|
if (showBtn) showBtn.classList.remove('zoom-hidden');
|
||||||
if (toggleBtn) toggleBtn.classList.remove('zoom-active');
|
// Don't remove zoom-active class - wasn't added
|
||||||
localStorage.setItem('cv-zoom-visible', 'false');
|
localStorage.setItem('cv-zoom-visible', 'false');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -403,15 +403,8 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set initial toggle button state (only active if explicitly 'true')
|
// No need to set initial state since we don't use zoom-active class anymore
|
||||||
const isVisible = localStorage.getItem('cv-zoom-visible');
|
const isVisible = localStorage.getItem('cv-zoom-visible');
|
||||||
if (toggleBtn) {
|
|
||||||
if (isVisible === 'true') {
|
|
||||||
toggleBtn.classList.add('zoom-active');
|
|
||||||
} else {
|
|
||||||
toggleBtn.classList.remove('zoom-active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Zoom control initialized. localStorage cv-zoom-visible:', isVisible);
|
console.log('Zoom control initialized. localStorage cv-zoom-visible:', isVisible);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -73,7 +73,7 @@
|
|||||||
<iconify-icon icon="mdi:arrow-expand-all" width="20" height="20"></iconify-icon>
|
<iconify-icon icon="mdi:arrow-expand-all" width="20" height="20"></iconify-icon>
|
||||||
<span>{{if eq .Lang "es"}}Expandir Todo{{else}}Expand All{{end}}</span>
|
<span>{{if eq .Lang "es"}}Expandir Todo{{else}}Expand All{{end}}</span>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" id="show-zoom-menu-btn" class="menu-item menu-item-action" style="display: none;">
|
<a href="#" id="show-zoom-menu-btn" class="menu-item menu-item-action zoom-hidden">
|
||||||
<iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
|
<iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
|
||||||
<span>{{if eq .Lang "es"}}Zoom{{else}}Zoom{{end}}</span>
|
<span>{{if eq .Lang "es"}}Zoom{{else}}Zoom{{end}}</span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user