LogalDeveloper/owncast
0
Fork 0
Code Activity

Added background to own messages in chat and the rounded border.

Browse Source 
Closes #1985
This commit is contained in:
t1enne
2022-06-29 08:22:22 +02:00
parent 5e4334ac01
commit d93922f1d0
2 changed files with 43 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View File

@@ -1,10 +1,9 @@
.root {
position: relative;
font-size: 0.9rem;
padding: 5px;
padding-left: 1rem;
margin: 8px 5px;
border-left: 2px solid;
border-radius: 0.3rem;
.user {
font: var(--theme-header-font-family);
color: var(--color-owncast-grey-100);
@@ -28,10 +27,32 @@
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 {
border-left: 0px;
border-right: 2px solid;
&.ownMessage {
.customBorder {
left: auto;
right: 0px;
&:after {
left: 0px;
}
}
}
}