From eaece794d7c315fd314c0bc1cd78ffa33b2d016b Mon Sep 17 00:00:00 2001 From: Vuong Hoang Date: Mon, 20 Jul 2026 12:52:31 -0700 Subject: [PATCH] fix(booth): button legibility in the Australis theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Wipe "×" is now an opaque dark control-scrim with an always-light glyph, so it stays legible over bright thumbnails bleeding through AND in both themes (the glyph no longer follows --fg-*, which flipped dark-on-dark in light mode). - "Wipe now" is a red-outline danger button (bright-red text/border, fills red on hover) instead of muted gray-on-transparent that read as illegible. - Destructive hover text is white on red (was dark-on-red, low contrast). - Nudge expiry sub-text --fg-muted -> --fg-3 for a bit more contrast. --- services/booth/booth/templates/base.html | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/services/booth/booth/templates/base.html b/services/booth/booth/templates/base.html index 7d1b326..c7ca678 100644 --- a/services/booth/booth/templates/base.html +++ b/services/booth/booth/templates/base.html @@ -102,13 +102,15 @@ .card .meta{padding:.7rem .85rem .85rem} .card .name{display:block;font-family:var(--font-display);font-weight:600;color:var(--fg-0);word-break:break-word} .card .name:hover{text-decoration:none;color:var(--aus-bright-cyan)} - .card .sub{color:var(--fg-muted);font-size:.72rem;font-family:var(--font-mono);letter-spacing:.03em;margin-top:.3rem} + .card .sub{color:var(--fg-3);font-size:.72rem;font-family:var(--font-mono);letter-spacing:.03em;margin-top:.3rem} .wipe{position:absolute;top:.5rem;right:.5rem;margin:0} - .wipe button{cursor:pointer;border:1px solid var(--border-default);background:rgba(20,22,29,.6); - color:var(--fg-3);width:1.9rem;height:1.9rem;border-radius:var(--radius-md);font-size:1.1rem;line-height:1; - backdrop-filter:blur(4px);transition:.14s var(--ease-out)} - .wipe button:hover{border-color:var(--aus-red);color:var(--aus-black);background:var(--aus-red)} + /* opaque dark control-scrim + always-light glyph — legible over any thumbnail + AND in both themes (glyph must NOT follow --fg-*, which flips dark on light). */ + .wipe button{cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(16,18,25,.86); + color:#e9eef0;width:1.9rem;height:1.9rem;border-radius:var(--radius-md);font-size:1.1rem;line-height:1; + backdrop-filter:blur(6px);transition:.14s var(--ease-out)} + .wipe button:hover{border-color:var(--aus-red);color:#fff;background:var(--aus-red)} /* booth page */ .boothhead{display:flex;align-items:center;gap:1rem;flex-wrap:wrap; @@ -116,10 +118,13 @@ .boothhead .back{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.08em;color:var(--fg-3)} .boothhead h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.5rem; letter-spacing:-.01em;word-break:break-word;flex:1 1 auto;color:var(--fg-0)} - .boothhead .sub{color:var(--fg-muted);font-size:.74rem;font-family:var(--font-mono);letter-spacing:.06em} + .boothhead .sub{color:var(--fg-3);font-size:.74rem;font-family:var(--font-mono);letter-spacing:.06em} .wipe-lg{position:static} + /* red-outline danger button — legible on the dark canvas, fills on hover */ .wipe-lg button{width:auto;height:auto;padding:.42rem .85rem;border-radius:var(--radius-md); - font-size:.72rem;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase} + font-size:.72rem;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase; + background:transparent;border-color:var(--aus-red);color:var(--aus-bright-red)} + .wipe-lg button:hover{background:var(--aus-red);border-color:var(--aus-red);color:#fff} .gallery{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .item{margin:0;background:var(--rk-panel);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);