vh/esh-pfi-infrastructure
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(booth): button legibility in the Australis theme

Browse Source 
- 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.
This commit is contained in:
Vuong Hoang
2026-07-20 12:52:31 -07:00
parent 3b6fa4a962
commit eaece794d7
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/booth/booth/templates/base.html
+12 -7
View File
@@ -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);