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

feat: improve zoom control UX - circular button with colorful hover

Browse Source 
Design improvements based on user feedback:
- Move current zoom value inside circular reset button
- Add colorful gradient (red→orange→blue→green) to slider on hover
- Make reset button perfectly circular (44px diameter)
- Dynamic value display updates in real-time inside button
- Maintains gray monochrome when not hovering
- Enhanced visual feedback with smooth color transitions
- Mobile responsive with smaller circular button (38px)

Technical changes:
- HTML: Moved #zoom-value-current span inside button
- CSS: border-radius 50%, min-width/min-height for perfect circle
- CSS: Gradient hover for both WebKit and Firefox sliders
- JavaScript: Already compatible (targets same element ID)
This commit is contained in:
juanatsap
2025-11-12 11:37:40 +00:00
parent ea18a86044
commit b6aeb697fe
2 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+40 -10
View File
@@ -3518,11 +3518,18 @@ html {
background: rgba(200, 200, 200, 0.5);
outline: none;
cursor: pointer;
transition: all 0.2s ease;
transition: all 0.3s ease;
}
/* Colorful gradient on hover */
.zoom-control:hover .zoom-slider,
.zoom-slider:hover {
background: rgba(220, 220, 220, 0.6);
background: linear-gradient(to right,
#ef4444 0%, /* red */
#f97316 25%, /* orange */
#3b82f6 50%, /* blue */
#22c55e 100% /* green */
);
}
.zoom-slider:focus {
@@ -3581,25 +3588,46 @@ html {
height: 5px;
border-radius: 3px;
background: rgba(200, 200, 200, 0.5);
transition: all 0.3s ease;
}
/* Reset Button */
/* Firefox Range Track - Colorful on hover */
.zoom-control:hover .zoom-slider::-moz-range-track,
.zoom-slider:hover::-moz-range-track {
background: linear-gradient(to right,
#ef4444 0%, /* red */
#f97316 25%, /* orange */
#3b82f6 50%, /* blue */
#22c55e 100% /* green */
);
}
/* Reset Button - Circular with dynamic value inside */
.zoom-reset-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.3rem 0.6rem;
min-width: 44px;
min-height: 44px;
padding: 0.5rem;
background: rgba(200, 200, 200, 0.3);
border: 1px solid rgba(220, 220, 220, 0.4);
border-radius: 5px;
border: 2px solid rgba(220, 220, 220, 0.4);
border-radius: 50%;
color: rgba(255, 255, 255, 0.9);
font-size: 0.8rem;
font-weight: 600;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
transition: all 0.3s ease;
flex-shrink: 0;
}
.zoom-reset-btn #zoom-value-current {
color: inherit;
font-size: inherit;
font-weight: inherit;
min-width: auto;
}
.zoom-reset-btn:hover {
background: rgba(220, 220, 220, 0.4);
border-color: rgba(240, 240, 240, 0.6);
@@ -3638,8 +3666,10 @@ html {
}
.zoom-reset-btn {
min-width: 38px;
min-height: 38px;
font-size: 0.7rem;
padding: 0.2rem 0.4rem;
padding: 0.4rem;
}
}