Just add to
Also, you can slightly adjust and get this.
extra.less
.
Less:
.userBanner {
&.message-userBanner {
border-top-left-radius: 0;
border-top-right-radius: 0;
position: relative;
&.userBanner--staff {
span {
background-color: rgb(63, 81, 106);
}
}
span {
position: absolute;
top: -3px;
background-color: inherit;
width: 5px;
height: 3px;
@media (max-width: (@xf-responsiveMedium)) {
display: none;
}
&.userBanner-after {
border-top-right-radius: 3px;
right: 0;
}
&.userBanner-before {
border-top-left-radius: 3px;
left: 0;
}
}
}
}
Less:
.message:not(.message--simple) {
.message-user {
border: 1px solid #e7e7e7;
padding: 9px 3px 3px;
@media (max-width: (@xf-responsiveMedium)) {
border: none;
padding: 0;
}
}
.userBanner {
&.message-userBanner {
border-top-left-radius: 0;
border-top-right-radius: 0;
position: relative;
margin-right: -9px;
margin-left: -9px;
&.userBanner--staff {
span {
background-color: rgb(63, 81, 106);
}
}
span {
position: absolute;
top: -3px;
background-color: inherit;
width: 5px;
height: 3px;
@media (max-width: (@xf-responsiveMedium)) {
display: none;
}
&.userBanner-after {
border-top-right-radius: 3px;
right: 0;
}
&.userBanner-before {
border-top-left-radius: 3px;
left: 0;
}
}
}
}
}