mandalore/gateway-gamers.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make filter button active/inactive state clearer in dark mode

Browse Source 
btn-outline + btn-active read too similarly to tell apart at a glance
in dark mode. Now: active buttons are solid-colored, matching the
badge they control (warning for Format, info for Scope, same colors
already used on the event cards), and inactive buttons are a dimmed
outline. Color alone now tells you what a button does; fill vs. outline
tells you whether it's on.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SBzcNkW7JcYipnAX6HfgmK
This commit is contained in:
mandalore
2026-09-04 16:38:21 -05:00
co-authored by Claude Sonnet 5
parent a5a922d684
commit 463371d199
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/events/index.html
+4 -4
View File
@@ -21,11 +21,11 @@
<!-- Filters: toggle any combination off to narrow the list below -->
<div class="flex flex-wrap items-center gap-2 mb-8" id="filters">
<span class="text-xs uppercase tracking-widest opacity-50 mr-1">Format</span>
<button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="format" data-filter-value="Singles">Singles</button>
<button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="format" data-filter-value="Team Event">Team Event</button>
<button type="button" class="btn btn-sm btn-warning" data-filter-group="format" data-filter-value="Singles">Singles</button>
<button type="button" class="btn btn-sm btn-warning" data-filter-group="format" data-filter-value="Team Event">Team Event</button>
<span class="text-xs uppercase tracking-widest opacity-50 ml-3 mr-1">Scope</span>
<button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="scope" data-filter-value="RTT">RTT</button>
<button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="scope" data-filter-value="GT">GT</button>
<button type="button" class="btn btn-sm btn-info" data-filter-group="scope" data-filter-value="RTT">RTT</button>
<button type="button" class="btn btn-sm btn-info" data-filter-group="scope" data-filter-value="GT">GT</button>
</div>
<!-- Loading skeleton -->