You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
1.6 KiB
92 lines
1.6 KiB
.root { |
|
position: relative; |
|
font-size: 0.9rem; |
|
padding: 5px 15px 5px 5px; |
|
padding-left: 1rem; |
|
.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 { |
|
display: flex; |
|
align-items: center; |
|
font-family: var(--theme-header-font-family); |
|
font-weight: bold; |
|
.userName { |
|
margin-left: .3rem; |
|
} |
|
} |
|
.message { |
|
color: var(--color-owncast-gray-300); |
|
|
|
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; |
|
& button:focus, |
|
& button:active { |
|
display: block !important; |
|
} |
|
} |
|
|
|
&:hover .modMenuWrapper { |
|
display: block; |
|
} |
|
} |
|
|
|
|
|
|