77 lines
1.2 KiB
CSS
77 lines
1.2 KiB
CSS
|
html {
|
||
|
|
font-family: "Inter", sans-serif;
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
background: #101010;
|
||
|
|
}
|
||
|
|
|
||
|
|
#chat {
|
||
|
|
width: calc(100% - 1rem);
|
||
|
|
padding: .5rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: .5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-message {
|
||
|
|
width: calc(100% - 2.7rem);
|
||
|
|
margin: 0;
|
||
|
|
padding: .5rem .8rem .5rem 2rem;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
align-items: start;
|
||
|
|
gap: .5rem;
|
||
|
|
|
||
|
|
color: #f0f0f0;
|
||
|
|
background: #202020;
|
||
|
|
border-radius: .5rem;
|
||
|
|
text-shadow: 0 0 1rem #f0f0f080;
|
||
|
|
}
|
||
|
|
|
||
|
|
.system-message {
|
||
|
|
width: calc(100% - 1.5rem);
|
||
|
|
margin: 0;
|
||
|
|
padding: .5rem .8rem;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: .5rem;
|
||
|
|
|
||
|
|
color: #909090;
|
||
|
|
background: #202020;
|
||
|
|
text-shadow: none;
|
||
|
|
border-radius: .5rem;
|
||
|
|
|
||
|
|
font-size: .8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-avatar {
|
||
|
|
width: 2rem;
|
||
|
|
height: 2rem;
|
||
|
|
border-radius: 100%;
|
||
|
|
position: absolute;
|
||
|
|
transform: translate(-2.3rem,-.7rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-username {
|
||
|
|
color: #b7fd49;
|
||
|
|
color: var(--colour);
|
||
|
|
text-shadow: 0 0 1rem #b7fd4980;
|
||
|
|
text-shadow: 0 0 1rem var(--glow_colour);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.system-message .chat-username {
|
||
|
|
color: #909090;
|
||
|
|
text-shadow: inherit;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chat-content {
|
||
|
|
word-break: break-word;
|
||
|
|
}
|