From 566ec1431c7fb6afb9c9bd3d5644d09af58ca117 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Tue, 25 Nov 2025 06:49:24 +0000 Subject: [PATCH] fix: Update zoom button to preferred purple shade #5c59b6 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. --- static/css/04-interactive/_buttons.css | 6 +++--- tests/mjs/67-button-colors-and-visibility-test.mjs | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/static/css/04-interactive/_buttons.css b/static/css/04-interactive/_buttons.css index 8a9b344..0a714e6 100644 --- a/static/css/04-interactive/_buttons.css +++ b/static/css/04-interactive/_buttons.css @@ -11,7 +11,7 @@ left: 2rem; width: 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; border: none; border-radius: 50%; @@ -29,12 +29,12 @@ opacity: 1; transform: translateY(-3px); 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 { 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 */ diff --git a/tests/mjs/67-button-colors-and-visibility-test.mjs b/tests/mjs/67-button-colors-and-visibility-test.mjs index 898f237..67f384c 100755 --- a/tests/mjs/67-button-colors-and-visibility-test.mjs +++ b/tests/mjs/67-button-colors-and-visibility-test.mjs @@ -260,7 +260,7 @@ async function testViewport(browser, viewport) { if (failures.length === 0) { console.log('✅ ALL TESTS PASSED\n'); 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('\nButton visibility works correctly:'); console.log(' ✅ All buttons visible at desktop viewport (>900px)');