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

fix: Update zoom button to preferred purple shade #5c59b6

Browse Source 
Changed zoom button color from #9b59b6 to #5c59b6 for better visual appeal.
The new shade is more blue-tinted, creating a vibrant indigo/periwinkle appearance
that remains distinct from the info button blue.

Changes:
- Updated zoom-toggle-btn background: rgba(92, 89, 182, 0.7)
- Updated hover state: #5c59b6
- Updated at-bottom state: #5c59b6
- Updated test output to reflect correct hex code

Test verified: All buttons visible and colors distinct at all viewports.
This commit is contained in:
juanatsap
2025-11-25 06:49:24 +00:00
parent da483ae9f1
commit 566ec1431c
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_buttons.css
+3 -3
View File
@@ -11,7 +11,7 @@
left: 2rem; left: 2rem;
width: 50px; width: 50px;
height: 50px; height: 50px;
background: rgba(155, 89, 182, 0.7); /* Purple with transparency - distinct from info button blue */ background: rgba(92, 89, 182, 0.7); /* Purple (#5c59b6) with transparency - distinct from info button blue */
color: white; color: white;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
@@ -29,12 +29,12 @@
opacity: 1; opacity: 1;
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
background: #9b59b6; /* Purple hover - distinct from info button blue */ background: #5c59b6; /* Purple hover - distinct from info button blue */
} }
.zoom-toggle-btn.at-bottom { .zoom-toggle-btn.at-bottom {
opacity: 1; opacity: 1;
background: #9b59b6; /* Purple - matches hover, distinct from info button */ background: #5c59b6; /* Purple - matches hover, distinct from info button */
} }
/* No special styling for active state - button looks same whether zoom is on or off */ /* No special styling for active state - button looks same whether zoom is on or off */
tests/mjs/67-button-colors-and-visibility-test.mjs
+1 -1
View File
@@ -260,7 +260,7 @@ async function testViewport(browser, viewport) {
if (failures.length === 0) { if (failures.length === 0) {
console.log('✅ ALL TESTS PASSED\n'); console.log('✅ ALL TESTS PASSED\n');
console.log('Button colors are distinct:'); console.log('Button colors are distinct:');
console.log(' 🔍 Zoom button: Purple (#9b59b6)'); console.log(' 🔍 Zoom button: Purple (#5c59b6)');
console.log(' ℹ️ Info button: Blue (#3498db)'); console.log(' ℹ️ Info button: Blue (#3498db)');
console.log('\nButton visibility works correctly:'); console.log('\nButton visibility works correctly:');
console.log(' ✅ All buttons visible at desktop viewport (>900px)'); console.log(' ✅ All buttons visible at desktop viewport (>900px)');