forked from Kieran/zap.stream
feat: zap styles
This commit is contained in:
parent
15a068d5b4
commit
97b38e58b3
@ -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;
|
||||
}
|
||||
|
@ -157,7 +157,7 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="pill">
|
||||
<div className="zap-container">
|
||||
<div className="zap">
|
||||
<Icon name="zap" className="zap-icon" />
|
||||
<Profile
|
||||
@ -167,10 +167,11 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
|
||||
overrideName: parsed.anonZap ? "Anon" : undefined,
|
||||
}}
|
||||
/>
|
||||
{formatSats(parsed.amount)}
|
||||
sats
|
||||
zapped you
|
||||
<span className="zap-amount">{formatSats(parsed.amount)}</span>
|
||||
sats
|
||||
</div>
|
||||
{parsed.content && <p>{parsed.content}</p>}
|
||||
{parsed.content && <div className="zap-content">{parsed.content}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user