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

fix: increase zoom control visibility - better contrast

Browse Source 
Visibility Improvements:
- Background: darker gray rgba(128, 128, 128, 0.7) instead of light transparent
- Base opacity: 0.7 (was 0.3) - much more visible by default
- Text: white/light gray instead of dark gray (better contrast on gray bg)
- Slider track: lighter gray rgba(200, 200, 200, 0.5) - more visible
- Slider thumb: bright white with light border - stands out clearly
- Reset button: lighter background with white text - easier to see
- Larger padding and sizing for better visibility
- Hover state: full opacity with darker background

Result: Control is clearly visible while maintaining elegant gray aesthetic
This commit is contained in:
juanatsap
2025-11-12 11:29:58 +00:00
parent 1c20a22522
commit ea18a86044
1 changed files with 45 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+45 -47
View File
@@ -3474,37 +3474,37 @@ html {
z-index: 900; z-index: 900;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.75rem;
padding: 0.5rem 1rem; padding: 0.65rem 1.25rem;
background: rgba(200, 200, 200, 0.15); background: rgba(128, 128, 128, 0.7);
backdrop-filter: blur(8px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(10px);
border-radius: 50px; border-radius: 50px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease; transition: all 0.3s ease;
opacity: 0.3; opacity: 0.7;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
} }
.zoom-control:hover { .zoom-control:hover {
opacity: 1; opacity: 1;
background: rgba(200, 200, 200, 0.25); background: rgba(128, 128, 128, 0.85);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
} }
/* Zoom Values (Labels) */ /* Zoom Values (Labels) */
.zoom-value { .zoom-value {
color: rgba(100, 100, 100, 0.8); color: rgba(255, 255, 255, 0.7);
font-size: 0.75rem; font-size: 0.8rem;
font-weight: 400; font-weight: 400;
min-width: 30px; min-width: 30px;
text-align: center; text-align: center;
} }
.zoom-value-current { .zoom-value-current {
color: rgba(60, 60, 60, 0.9); color: rgba(255, 255, 255, 0.95);
font-weight: 600; font-weight: 600;
font-size: 0.85rem; font-size: 0.9rem;
min-width: 35px; min-width: 35px;
} }
@@ -3513,20 +3513,20 @@ html {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 180px; width: 180px;
height: 4px; height: 5px;
border-radius: 2px; border-radius: 3px;
background: rgba(120, 120, 120, 0.3); background: rgba(200, 200, 200, 0.5);
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.zoom-slider:hover { .zoom-slider:hover {
background: rgba(120, 120, 120, 0.5); background: rgba(220, 220, 220, 0.6);
} }
.zoom-slider:focus { .zoom-slider:focus {
outline: 2px solid rgba(100, 100, 100, 0.5); outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -3534,21 +3534,20 @@ html {
.zoom-slider::-webkit-slider-thumb { .zoom-slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 16px; width: 18px;
height: 16px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.95); background: white;
border: 2px solid rgba(100, 100, 100, 0.6); border: 2px solid rgba(180, 180, 180, 0.8);
cursor: pointer; cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.zoom-slider::-webkit-slider-thumb:hover { .zoom-slider::-webkit-slider-thumb:hover {
transform: scale(1.1); transform: scale(1.1);
background: white; border-color: rgba(200, 200, 200, 1);
border-color: rgba(80, 80, 80, 0.8); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
} }
.zoom-slider::-webkit-slider-thumb:active { .zoom-slider::-webkit-slider-thumb:active {
@@ -3557,21 +3556,20 @@ html {
/* Firefox Slider Thumb */ /* Firefox Slider Thumb */
.zoom-slider::-moz-range-thumb { .zoom-slider::-moz-range-thumb {
width: 16px; width: 18px;
height: 16px; height: 18px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.95); background: white;
border: 2px solid rgba(100, 100, 100, 0.6); border: 2px solid rgba(180, 180, 180, 0.8);
cursor: pointer; cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.zoom-slider::-moz-range-thumb:hover { .zoom-slider::-moz-range-thumb:hover {
transform: scale(1.1); transform: scale(1.1);
background: white; border-color: rgba(200, 200, 200, 1);
border-color: rgba(80, 80, 80, 0.8); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
} }
.zoom-slider::-moz-range-thumb:active { .zoom-slider::-moz-range-thumb:active {
@@ -3580,9 +3578,9 @@ html {
/* Firefox Range Track */ /* Firefox Range Track */
.zoom-slider::-moz-range-track { .zoom-slider::-moz-range-track {
height: 4px; height: 5px;
border-radius: 2px; border-radius: 3px;
background: rgba(120, 120, 120, 0.3); background: rgba(200, 200, 200, 0.5);
} }
/* Reset Button */ /* Reset Button */
@@ -3590,12 +3588,12 @@ html {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0.25rem 0.5rem; padding: 0.3rem 0.6rem;
background: rgba(120, 120, 120, 0.15); background: rgba(200, 200, 200, 0.3);
border: 1px solid rgba(100, 100, 100, 0.3); border: 1px solid rgba(220, 220, 220, 0.4);
border-radius: 4px; border-radius: 5px;
color: rgba(80, 80, 80, 0.9); color: rgba(255, 255, 255, 0.9);
font-size: 0.75rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@@ -3603,9 +3601,9 @@ html {
} }
.zoom-reset-btn:hover { .zoom-reset-btn:hover {
background: rgba(120, 120, 120, 0.25); background: rgba(220, 220, 220, 0.4);
border-color: rgba(80, 80, 80, 0.5); border-color: rgba(240, 240, 240, 0.6);
color: rgba(60, 60, 60, 1); color: white;
} }
.zoom-reset-btn:active { .zoom-reset-btn:active {
@@ -3613,7 +3611,7 @@ html {
} }
.zoom-reset-btn:focus { .zoom-reset-btn:focus {
outline: 2px solid rgba(100, 100, 100, 0.5); outline: 2px solid rgba(255, 255, 255, 0.6);
outline-offset: 2px; outline-offset: 2px;
} }