forked from Kieran/zap.stream
feat: zap styles
This commit is contained in:
parent
15a068d5b4
commit
97b38e58b3
@ -101,6 +101,10 @@
|
|||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.live-chat .message .profile {
|
||||||
|
color: #34D2FE;
|
||||||
|
}
|
||||||
|
|
||||||
.live-chat .message.streamer .profile {
|
.live-chat .message.streamer .profile {
|
||||||
color: #F838D9;
|
color: #F838D9;
|
||||||
}
|
}
|
||||||
@ -121,14 +125,10 @@
|
|||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.live-chat .messages .pill {
|
.live-chat .messages {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.live-chat .messages .pill:hover {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.live-chat .zap {
|
.live-chat .zap {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -190,3 +190,34 @@
|
|||||||
.zap-icon {
|
.zap-icon {
|
||||||
color: #FFCB44;
|
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 null;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="pill">
|
<div className="zap-container">
|
||||||
<div className="zap">
|
<div className="zap">
|
||||||
<Icon name="zap" className="zap-icon" />
|
<Icon name="zap" className="zap-icon" />
|
||||||
<Profile
|
<Profile
|
||||||
@ -167,10 +167,11 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
|
|||||||
overrideName: parsed.anonZap ? "Anon" : undefined,
|
overrideName: parsed.anonZap ? "Anon" : undefined,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{formatSats(parsed.amount)}
|
zapped you
|
||||||
sats
|
<span className="zap-amount">{formatSats(parsed.amount)}</span>
|
||||||
|
sats
|
||||||
</div>
|
</div>
|
||||||
{parsed.content && <p>{parsed.content}</p>}
|
{parsed.content && <div className="zap-content">{parsed.content}</div>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user