diff --git a/src/element/live-chat.css b/src/element/live-chat.css index f517141..ce361bc 100644 --- a/src/element/live-chat.css +++ b/src/element/live-chat.css @@ -101,6 +101,10 @@ float: left; } +.live-chat .message .profile { + color: #34D2FE; +} + .live-chat .message.streamer .profile { color: #F838D9; } @@ -121,14 +125,10 @@ margin-left: 8px; } -.live-chat .messages .pill { +.live-chat .messages { color: white; } -.live-chat .messages .pill:hover { - cursor: default; -} - .live-chat .zap { display: flex; align-items: center; @@ -190,3 +190,34 @@ .zap-icon { color: #FFCB44; } + +.zap-container { + position: relative; + border-radius: 12px; + border: 1px solid transparent; + background: black; + background-clip: padding-box; + padding: 8px 12px; +} + +.zap-container:before { + content: ''; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + z-index: -1; + margin: -1px; + background: linear-gradient(to bottom right, #FF902B, #F83838); + border-radius: inherit; +} + +.zap-container .profile { + color: #FFCB44; +} + +.zap-container .zap-amount { + color: #FFCB44; +} + +.zap-content { + margin-top: 8px; +} diff --git a/src/element/live-chat.tsx b/src/element/live-chat.tsx index ece4367..9c4dbeb 100644 --- a/src/element/live-chat.tsx +++ b/src/element/live-chat.tsx @@ -157,7 +157,7 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) { return null; } return ( -
+
- {formatSats(parsed.amount)} -   sats + zapped you + {formatSats(parsed.amount)} + sats
- {parsed.content &&

{parsed.content}

} + {parsed.content &&
{parsed.content}
}
); }