.userBanner {
text-transform: uppercase;
font-weight: 800;
padding: 3px 5px 3px 3px;
border: 1px solid transparent;
border-radius: 10px;
text-align: center;
display: inline-flex;
justify-content: space-between;
background-size: 500% 500%;
animation: AnimBanner 10s ease infinite;
align-items: center;
align-content: center;
position: relative
}
.userBanner strong {
font-size: 85%;
font-family: 'Montserrat',sans-serif;
font-weight: 800;
padding-left: 3px;
line-height: .95;
text-shadow: 1px 0 1px rgba(0,0,0,0.5),0 1px 1px rgba(0,0,0,0.5),-1px 0 1px rgba(0,0,0,0.5),0 -1px 1px rgba(0,0,0,0.5)
}
.message-userBanner.userBanner {
display: flex
}
@media (max-width: 650px) {
.message:not(.message--forceColumns) .message-userTitle,.message:not(.message--forceColumns) .message-userBanner.userBanner {
display:inline-flex
}
}
.userBanner.userBanner--staff {
color: #fff;
background-color: #5c97bf;
border: none;
background-image: linear-gradient(to right, #8b008b 0%, #00bfff 100%);
background-image: linear-gradient(270deg, #00b9ff, #d104ff, #2800ff);
background-size: 900% 900%
}
.userBanner.userBanner--staff .userBanner-before:before {
content: '';
display: block;
width: 13px;
height: 13px;
background: url('Ссылка или путь') no-repeat center / 23px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}
.userBanner.userBanner--название {
color: #fff;
background-color: #7fff00;
border: none;
background-image: linear-gradient(to right, #ffd700 0%, #ff0 100%)
}
.userBanner.userBanner--название .userBanner-before:before {
content: '';
display: block;
width: 13px;
height: 13px;
background: url('Ссылка или путь') no-repeat center / 23px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
filter: opacity(100%);
padding: 2px;
border-radius: 50%
}