txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify zoom control - transparent, monochrome, minimal

Browse Source 
UI Changes:
- Made control transparent by default (opacity: 0.3), fully visible on hover
- Removed all colors - pure monochrome gray design
- Removed search icon (magnify) - no search functionality
- Changed reset icon to simple "100" text button
- Simplified layout: just 50 - slider - 100 - 200 - reset
- Moved higher: bottom 70px (desktop), 50px (tablet), 40px (mobile)

Visual Design:
- Transparent gray background with subtle blur
- Gray slider track (no rainbow gradient)
- Smaller, minimal sizing
- Numbers without % symbol for cleaner look
- Reset button shows "100" instead of circular arrows

Code Cleanup:
- Removed .zoom-label and icon markup
- Removed .zoom-slider-container wrapper
- Updated updateZoomDisplay() to use correct ID
- Simplified CSS - removed unused label styles
- Updated mobile responsive breakpoints
This commit is contained in:
juanatsap
2025-11-12 11:09:42 +00:00
parent 93b471b7e3
commit 1c20a22522
3 changed files with 96 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+77 -154
View File
@@ -3468,106 +3468,65 @@ html {
.zoom-control {
position: fixed;
bottom: 20px;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
z-index: 900;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1.5rem;
background: rgba(43, 43, 43, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(200, 200, 200, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 50px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
opacity: 0.3;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.zoom-control:hover {
background: rgba(43, 43, 43, 0.98);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}
/* Zoom Label with Icon */
.zoom-label {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
margin: 0;
}
.zoom-label iconify-icon {
color: var(--accent-blue);
flex-shrink: 0;
}
/* Screen Reader Only Text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Slider Container */
.zoom-slider-container {
display: flex;
align-items: center;
gap: 0.75rem;
opacity: 1;
background: rgba(200, 200, 200, 0.25);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Zoom Values (Labels) */
.zoom-value {
color: rgba(255, 255, 255, 0.7);
font-size: 0.85rem;
font-weight: 500;
min-width: 40px;
color: rgba(100, 100, 100, 0.8);
font-size: 0.75rem;
font-weight: 400;
min-width: 30px;
text-align: center;
}
.zoom-value-current {
color: white;
color: rgba(60, 60, 60, 0.9);
font-weight: 600;
font-size: 0.95rem;
font-size: 0.85rem;
min-width: 35px;
}
/* Range Slider Styling */
.zoom-slider {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 6px;
border-radius: 3px;
background: linear-gradient(
to right,
#e74c3c 0%,
#f39c12 25%,
var(--accent-blue) 50%,
#3498db 75%,
#27ae60 100%
);
width: 180px;
height: 4px;
border-radius: 2px;
background: rgba(120, 120, 120, 0.3);
outline: none;
cursor: pointer;
transition: opacity 0.2s;
transition: all 0.2s ease;
}
.zoom-slider:hover {
opacity: 0.9;
background: rgba(120, 120, 120, 0.5);
}
.zoom-slider:focus {
outline: 2px solid var(--accent-blue);
outline: 2px solid rgba(100, 100, 100, 0.5);
outline-offset: 2px;
}
@@ -3575,60 +3534,55 @@ html {
.zoom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
width: 16px;
height: 16px;
border-radius: 50%;
background: white;
border: 2px solid var(--accent-blue);
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(100, 100, 100, 0.6);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.zoom-slider::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 3px 12px rgba(0, 102, 204, 0.5);
transform: scale(1.1);
background: white;
border-color: rgba(80, 80, 80, 0.8);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.zoom-slider::-webkit-slider-thumb:active {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.6);
}
/* Firefox Slider Thumb */
.zoom-slider::-moz-range-thumb {
width: 20px;
height: 20px;
width: 16px;
height: 16px;
border-radius: 50%;
background: white;
border: 2px solid var(--accent-blue);
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(100, 100, 100, 0.6);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
}
.zoom-slider::-moz-range-thumb:hover {
transform: scale(1.15);
box-shadow: 0 3px 12px rgba(0, 102, 204, 0.5);
transform: scale(1.1);
background: white;
border-color: rgba(80, 80, 80, 0.8);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.zoom-slider::-moz-range-thumb:active {
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.6);
}
/* Firefox Range Track */
.zoom-slider::-moz-range-track {
height: 6px;
border-radius: 3px;
background: linear-gradient(
to right,
#e74c3c 0%,
#f39c12 25%,
var(--accent-blue) 50%,
#3498db 75%,
#27ae60 100%
);
height: 4px;
border-radius: 2px;
background: rgba(120, 120, 120, 0.3);
}
/* Reset Button */
@@ -3636,102 +3590,71 @@ html {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
padding: 0.25rem 0.5rem;
background: rgba(120, 120, 120, 0.15);
border: 1px solid rgba(100, 100, 100, 0.3);
border-radius: 4px;
color: rgba(80, 80, 80, 0.9);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transition: all 0.2s ease;
flex-shrink: 0;
}
.zoom-reset-btn:hover {
background: var(--accent-blue);
border-color: var(--accent-blue);
transform: rotate(180deg);
background: rgba(120, 120, 120, 0.25);
border-color: rgba(80, 80, 80, 0.5);
color: rgba(60, 60, 60, 1);
}
.zoom-reset-btn:active {
transform: rotate(180deg) scale(0.95);
transform: scale(0.95);
}
.zoom-reset-btn:focus {
outline: 2px solid var(--accent-blue);
outline: 2px solid rgba(100, 100, 100, 0.5);
outline-offset: 2px;
}
.zoom-reset-btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
}
/* Mobile Responsive - Smaller on mobile */
@media (max-width: 768px) {
.zoom-control {
bottom: 15px;
padding: 0.6rem 1.2rem;
gap: 0.75rem;
border-radius: 40px;
}
.zoom-label {
font-size: 0.85rem;
}
.zoom-label iconify-icon {
width: 18px;
height: 18px;
bottom: 50px;
padding: 0.4rem 0.8rem;
gap: 0.4rem;
}
.zoom-slider {
width: 150px;
height: 5px;
}
.zoom-slider::-webkit-slider-thumb {
width: 18px;
height: 18px;
}
.zoom-slider::-moz-range-thumb {
width: 18px;
height: 18px;
width: 140px;
}
.zoom-value {
font-size: 0.8rem;
min-width: 35px;
font-size: 0.7rem;
min-width: 25px;
}
.zoom-value-current {
font-size: 0.9rem;
font-size: 0.8rem;
min-width: 30px;
}
.zoom-reset-btn {
width: 32px;
height: 32px;
}
.zoom-reset-btn svg {
width: 14px;
height: 14px;
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
}
}
/* Very Small Screens - Ultra Compact */
@media (max-width: 480px) {
.zoom-control {
bottom: 10px;
padding: 0.5rem 1rem;
gap: 0.5rem;
bottom: 40px;
padding: 0.35rem 0.7rem;
gap: 0.35rem;
}
.zoom-slider {
width: 120px;
width: 100px;
}
/* Hide min/max labels on very small screens */
static/js/main.js
+2 -2
View File
@@ -357,10 +357,10 @@
*/
function updateZoomDisplay(zoomValue) {
const slider = document.getElementById('zoom-slider');
const display = document.getElementById('zoom-display');
const display = document.getElementById('zoom-value-current');
if (display) {
display.textContent = `${zoomValue}%`;
display.textContent = zoomValue;
}
if (slider) {
templates/index.html
+17 -29
View File
@@ -456,44 +456,32 @@
<!-- Zoom Control (Fixed Bottom Center) -->
<div id="zoom-control" class="zoom-control no-print" role="group" aria-label="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}">
<label for="zoom-slider" class="zoom-label">
<iconify-icon icon="mdi:magnify" width="20" height="20" aria-hidden="true"></iconify-icon>
<span class="sr-only">{{if eq .Lang "es"}}Nivel de zoom{{else}}Zoom level{{end}}</span>
</label>
<span class="zoom-value zoom-value-min" aria-hidden="true">50</span>
<div class="zoom-slider-container">
<span class="zoom-value zoom-value-min" aria-hidden="true">50%</span>
<input
type="range"
id="zoom-slider"
class="zoom-slider"
min="50"
max="200"
step="5"
value="100"
aria-label="{{if eq .Lang "es"}}Ajustar nivel de zoom del CV{{else}}Adjust CV zoom level{{end}}"
aria-valuemin="50"
aria-valuemax="200"
aria-valuenow="100"
aria-valuetext="100%">
<input
type="range"
id="zoom-slider"
class="zoom-slider"
min="50"
max="200"
step="5"
value="100"
aria-label="{{if eq .Lang "es"}}Ajustar nivel de zoom del CV{{else}}Adjust CV zoom level{{end}}"
aria-valuemin="50"
aria-valuemax="200"
aria-valuenow="100"
aria-valuetext="100%">
<span id="zoom-value-current" class="zoom-value zoom-value-current" aria-live="polite">100</span>
<span id="zoom-value-current" class="zoom-value zoom-value-current" aria-live="polite">100%</span>
<span class="zoom-value zoom-value-max" aria-hidden="true">200%</span>
</div>
<span class="zoom-value zoom-value-max" aria-hidden="true">200</span>
<button
id="zoom-reset"
class="zoom-reset-btn"
aria-label="{{if eq .Lang "es"}}Restablecer zoom al 100%{{else}}Reset zoom to 100%{{end}}"
title="{{if eq .Lang "es"}}Restablecer{{else}}Reset{{end}}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
<path d="M21 3v5h-5"/>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
<path d="M3 21v-5h5"/>
</svg>
100
</button>
</div>