owncast/web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

79 lines
1.4 KiB
SCSS
Raw Normal View History

2023-01-11 11:51:39 +03:00
$border-style: 4px solid currentColor;
2022-10-22 11:44:15 +03:00
$p-size: 8px;
2022-05-22 17:10:34 +03:00
.root {
2022-07-10 09:56:31 +03:00
* {
2022-08-11 07:41:56 +03:00
z-index: 100;
}
border-left: $border-style;
position: relative;
2022-05-22 17:10:34 +03:00
font-size: 0.9rem;
padding: 0px $p-size $p-size $p-size;
color: var(--theme-color-components-chat-text);
2022-05-22 17:10:34 +03:00
.user {
display: flex;
align-items: center;
2022-08-22 02:01:35 +03:00
font-family: var(--theme-text-display-font-family);
2022-10-22 11:44:15 +03:00
font-weight: 600;
2022-05-22 17:10:34 +03:00
}
2022-05-22 17:10:34 +03:00
.message {
overflow: hidden;
overflow-wrap: anywhere;
2022-10-22 11:44:15 +03:00
font-weight: 500;
mark {
padding-left: 0.35em;
padding-right: 0.35em;
color: var(--theme-color-palette-12);
}
2022-05-22 17:10:34 +03:00
}
&.ownMessage {
border-left: none;
border-right: $border-style;
2022-07-02 10:56:03 +03:00
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: currentColor;
opacity: 0.07;
border-radius: 0.25rem;
overflow: hidden;
}
}
.modMenuWrapper {
position: absolute;
display: none;
top: 0;
right: 10px;
2023-01-19 07:23:12 +03:00
color: var(--theme-color-components-text-on-light);
& button:focus,
& button:active {
display: block !important;
}
2023-01-19 07:23:12 +03:00
button {
border-radius: var(--theme-rounded-corners);
opacity: 0.8;
}
}
&:hover .modMenuWrapper {
display: block;
}
}
2022-08-22 03:22:24 +03:00
.messagePadding {
2022-11-13 23:43:15 +03:00
padding: 0.4rem 5px 0px 5px;
}
.messagePaddingCollapsed {
2022-11-13 23:43:15 +03:00
padding: 0px 5px 0px 5px;
2022-08-22 03:22:24 +03:00
}