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);