ari/stream-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gpg: Signature made Fri 04 Sep 2026 00:58:11 IST

Browse source 
gpg:                using EDDSA key 25BB975698147F3F76719E0C60B5F0386E3DDB7Egpg:                using EDDSA key 25BB975698147F3F76719E0C60B5F0386E3DDB7E
gpg: Good signature from "ari melody <ari@arimelody.space>" [ultimate]
gpg:                 aka "ari melody <ari@arimelody.me>" [ultimate]
initial design for new chat widget
This commit is contained in:
ari melody 2026-09-04 00:58:11 +01:00
parent 4d0efce2e0
commit eab3c09b8b
Signed by: ari
GPG key ID: 60B5F0386E3DDB7E
8 changed files with 359 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

95
twitch/public/chat.css
View file

@ -0,0 +1,95 @@
/*
@font-face {
font-family: 'Darumadrop One';
src: url('/public/fonts/darumadrop-one/DarumadropOne-Regular.ttf') format('truetype');
}
*/
@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap');
body {
min-height: 100vh;
margin: 0;
padding: 0;
background: hsl(0 0 50%);
}
#chat {
position: relative;
top: .33em;
min-height: calc(100vh - .66em);
max-width: 600px;
margin: .33em;
display: flex;
flex-direction: column;
justify-content: end;
gap: .25em;
font-family: "Darumadrop One", sans-serif;
font-size: 32px;
line-height: 1em;
word-wrap: break-word;
&.end {
text-align: end;
align-items: end;
}
}
.message {
width: 100%;
--colour: hsl(0 0 75%);
color: hsl(0 0 100%);
text-shadow: .05em .05em 0 hsl(0 0 0 / 75%);
&.system {
width: 420px;
margin: 0 1em;
display: flex;
flex-direction: row;
--colour: hsl(0 0 100%);
color: var(--colour);
&.follow { --hue: 128; }
&.subscribe { --hue: 284; }
&.cheer { --hue: 222; }
&.raid { --hue: 28; }
&.poll { --hue: 269; }
&.shoutout { --hue: 104; }
&.point-redeem { --hue: 338; }
&.follow, &.subscribe, &.cheer, &.raid, &.poll, &.shoutout, &.point-redeem {
--colour: oklch(80% 80% var(--hue) / 100%);
}
.icon {
height: .5em;
margin-top: .3em;
margin-right: .2em;
transform: translateY(.15em);
aspect-ratio: 1;
background-color: var(--colour);
border-radius: 100%;
box-shadow: .05em .05em 0 hsl(0 0 0 / 75%);
}
}
p { margin: 0; }
.header {
color: var(--colour);
}
.content {
z-index: 1;
position: relative;
}
}