From f23a0488854a58bea8c0cb2ddc8e1c424a6828f4 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sun, 16 Aug 2026 00:38:49 -0700 Subject: Hats: put your money where your head is — supporter hats perch above the avatar everywhere it appears, from 21-sat beanie to 2.1M-sat top hat; the crown stays on the founder MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01JtaatFfAbx91Nh3xqKVqKz --- src/style.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 8716d81..5c41a26 100644 --- a/src/style.css +++ b/src/style.css @@ -479,6 +479,20 @@ hr.divider { margin: 16px 0; } .menu-backdrop { position: fixed; inset: 0; z-index: 40; } .avatar-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 41; min-width: 170px; } .chat-avatar.fallback.loading { background: var(--surface2); } + +/* hats: a supporter hat perched above any avatar. The wrapper takes the + avatar's place in the layout; the hat overflows upward, clicks fall + through it. */ +.hat-wrap { position: relative; display: inline-flex; flex-shrink: 0; } +.ava-hat { position: absolute; left: 50%; z-index: 1; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28)); } +.ava-hat svg { display: block; width: 100%; height: auto; } +.hat-row { display: flex; gap: 12px; align-items: center; padding: 9px 2px; } +.hat-row + .hat-row { border-top: 1px solid var(--line); } +.hat-demo { position: relative; display: inline-flex; width: 34px; height: 34px; flex-shrink: 0; margin-top: 12px; } +.hat-demo-head { width: 100%; height: 100%; border-radius: 50%; background: var(--accent-soft); } +.hat-btn { white-space: nowrap; flex-shrink: 0; } +.hat-btn.wearing { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } +.hat-btn.confirm { border-color: var(--green); color: var(--green); } .wallet-row-btn { font-size: 19px; line-height: 1; padding: 8px 12px; } .chat-avatar.header-ava.fallback { align-items: center; justify-content: center; display: flex; color: var(--muted); } -- cgit v1.2.3