mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
455d8f8169
Changed the way the background is set on self sent messages and some styling. Fixed chat container not scrolling. Added 'go to bottom' button.
81 lines
1.4 KiB
SCSS
81 lines
1.4 KiB
SCSS
.root {
|
|
position: relative;
|
|
font-size: 0.9rem;
|
|
padding: 5px 15px 5px 5px;
|
|
padding-left: 1rem;
|
|
// animation: chatFadeIn .1s ease-in;
|
|
.background {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: currentColor;
|
|
opacity: 0.07;
|
|
border-radius: .25rem;
|
|
overflow: hidden;
|
|
}
|
|
.user {
|
|
font: var(--theme-header-font-family);
|
|
color: var(--color-owncast-grey-100);
|
|
font-weight: bold;
|
|
}
|
|
.message {
|
|
color: var(--color-owncast-grey-100);
|
|
|
|
mark {
|
|
color: white;
|
|
padding: 0.1em 0.4em;
|
|
border-radius: 0.5em 0.3em;
|
|
background: transparent;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
rgba(255, 225, 0, 0.1),
|
|
rgba(255, 225, 0, 0.358) 4%,
|
|
rgba(255, 225, 0, 0.3)
|
|
);
|
|
-webkit-box-decoration-break: clone;
|
|
box-decoration-break: clone;
|
|
}
|
|
}
|
|
.customBorder {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 5px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
&:after {
|
|
content: '';
|
|
width: 10px;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0%;
|
|
right: 0px;
|
|
background-color: currentColor;
|
|
border-radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
&.ownMessage {
|
|
.customBorder {
|
|
left: auto;
|
|
right: 0px;
|
|
&:after {
|
|
left: 0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes chatFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|