ari melody
eab3c09b8b
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
95 lines
1.6 KiB
CSS
95 lines
1.6 KiB
CSS
/*
|
|
@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;
|
|
}
|
|
}
|