From 487ce42361eb93b8235cd1e9dc10ac0175f5988d Mon Sep 17 00:00:00 2001 From: Davide Scaini Date: Thu, 14 May 2026 16:24:00 +0200 Subject: [PATCH] Explore: type pill dark/light theme split; freeze active pill on hover in dark theme --- site/src/components/Explore.svelte | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/site/src/components/Explore.svelte b/site/src/components/Explore.svelte index 4d89748..ce7eec6 100644 --- a/site/src/components/Explore.svelte +++ b/site/src/components/Explore.svelte @@ -438,10 +438,13 @@ .pill.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .pill.small { padding: 0.15rem 0.45rem; font-size: 0.67rem; } - .type-pill { border-color: color-mix(in srgb, var(--type-color) 45%, transparent); color: color-mix(in srgb, var(--type-color) 65%, var(--text-5)); background: rgba(128,128,128,0.70); } + .type-pill { border-color: color-mix(in srgb, var(--type-color) 45%, transparent); color: color-mix(in srgb, var(--type-color) 65%, var(--text-5)); background: rgba(128,128,128,0.70); } + .type-pill.active { background: var(--type-color); border-color: var(--type-color); color: var(--pill-text-on); } + .type-pill:hover { border-color: var(--type-color); color: var(--type-color); } + .type-pill.active:hover { background: var(--type-color); border-color: var(--type-color); color: var(--pill-text-on); } :global([data-theme="light"]) .type-pill:not(.active) { background: transparent; } - .type-pill.active { background: var(--type-color); border-color: var(--type-color); color: var(--pill-text-on); } - .type-pill:hover { border-color: var(--type-color); color: var(--type-color); } + :global([data-theme="light"]) .type-pill.active { background: color-mix(in srgb, var(--type-color) 18%, transparent); color: var(--type-color); } + :global([data-theme="light"]) .type-pill.active:hover { background: color-mix(in srgb, var(--type-color) 18%, transparent); border-color: var(--type-color); color: var(--type-color); } .type-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--type-color); flex-shrink: 0; } .year-pills { margin-bottom: 0.4rem; }