CF- Сообщения
- 203
- Реакции
- 128
Код:
.userBanner {
padding: 3px 6px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 6px;
background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
background-size: 200% 100%;
background-position: 100% 0;
animation: shine 3s infinite linear, breathe 4s infinite ease-in-out;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.userBanner:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.userBanner.moderator {
background-color: #2980B9;
}
.userBanner.active {
background-color: #27AE60;
}
.userBanner.professional {
background-color: #8E44AD;
}
.userBanner.editor {
background-color: #C2185B;
}
.userBanner.admin {
background-color: #D32F2F;
animation: shine 3s linear infinite, pulse 2.2s ease-in-out infinite;
}
.userBanner.user {
background-color: #7F8C8D;
}
.userBanner.userBanner--staff {
background-color: #29b8b9;
animation: shine 3s linear infinite, pulse 2.2s ease-in-out infinite;
}
.message-userDetails .userBanner {
display: block;
width: 120px;
margin: 5px auto;
}
.memberHeader-banners .userBanner,
.memberTooltip-banners .userBanner {
display: inline-block;
width: auto;
margin: 0 4px 4px 0;
vertical-align: middle;
}
@media (max-width: 480px) {
.message-userDetails .userBanner {
width: 100px;
font-size: 10px;
}
.memberHeader-banners .userBanner,
.memberTooltip-banners .userBanner {
font-size: 10px;
}
}
@keyframes shine {
to {
background-position: -100% 0;
}
}
@keyframes breathe {
0%,
100% {
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
}
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}
50% {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
}
