owncast/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
t1enne e6cc3a39d1 Added moderator menu to messages and some other styling.
created new ant overrides file.

Ignore the static directory
2022-07-01 22:53:56 +02:00

92 lines
1.6 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;
z-index: -1;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: currentColor;
opacity: 0.07;
border-radius: .25rem;
overflow: hidden;
}
.user {
font-family: var(--theme-header-font-family);
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: var(--theme-rounded-corners);
}
}
&.ownMessage {
.customBorder {
left: auto;
right: 0px;
&:after {
left: 0px;
}
}
}
.modMenuWrapper {
position: absolute;
display: none;
top: 0;
right: 10px;
}
&:hover .modMenuWrapper {
display: block;
}
}
@keyframes chatFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}