- Дек
- 3
- 0
Пользователь
3.1.1. Запрещено формулировать названия тем в требовательной форме (например, «Дайте…», «Сделайте…»).
Последнее редактирование модератором:
By registering with us, you'll be able to discuss, share and private message with other members of our community.
SignUp Now!.projectOwnerRed
{
background: linear-gradient(145deg, #2a0f0f, #3a1414, #4d1a1a);
border: 1.8px solid transparent;
border-image: linear-gradient(135deg, #ff4d4d, #f00, #c00, #900);
border-image-slice: 1;
border-radius: 40px;
padding: 3px 16px 3px 12px;
color: #fff0f0;
font-weight: 700;
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
box-shadow: 0 0 15px rgba(255, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
display: inline-flex;
align-items: center;
transition: all .25s ease;
position: relative;
&:before
{
content: "💎";
position: absolute;
left: -5px;
top: -8px;
font-size: 10px;
filter: drop-shadow(0 0 5px #f00);
animation: diamondFloat 3s infinite;
opacity: 0.9;
}
&:after
{
content: "✨";
position: absolute;
right: -5px;
bottom: -8px;
font-size: 10px;
filter: drop-shadow(0 0 5px #fa0);
animation: sparkFloat 3s infinite .5s;
opacity: 0.9;
}
&:hover
{
background: linear-gradient(145deg, #3a1414, #5a1e1e) !important;
border-image: linear-gradient(135deg, #fa0, #ff4d4d, #f00) !important;
border-image-slice: 1 !important;
box-shadow: 0 0 25px #f00, 0 0 40px #c00 !important;
transform: translateY(-2px) scale(1.02);
&:before, &:after
{
animation: sparkIntense 1s infinite;
}
}
}
.userBanner.userBanner--staff
{
background: linear-gradient(145deg, #2c2416, #3e351f);
border: 1.5px solid #f1c40f;
border-radius: 30px;
padding: 3px 14px 3px 10px;
color: #fff8e7;
font-weight: 600;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 2px 10px rgba(241, 196, 15, 0.4), inset 0 1px 3px rgba(255, 215, 0, 0.2);
backdrop-filter: blur(2px);
display: inline-flex;
align-items: center;
transition: all .25s ease;
position: relative;
&:before
{
content: "✦";
position: absolute;
left: -4px;
top: -4px;
font-size: 8px;
color: #f1c40f;
filter: drop-shadow(0 0 3px #f39c12);
opacity: 0.9;
animation: sparkRotate 3s infinite;
}
&:after
{
content: "✧";
position: absolute;
right: -4px;
bottom: -4px;
font-size: 8px;
color: #f39c12;
filter: drop-shadow(0 0 3px #f1c40f);
opacity: 0.9;
animation: sparkRotate 3s infinite .5s;
}
&:hover
{
background: linear-gradient(145deg, #3e351f, #4d4127);
border-color: #f39c12;
box-shadow: 0 0 18px #f1c40f, 0 0 30px #f39c12;
transform: translateY(-1px);
&:before, &:after
{
animation: sparkIntense 1s infinite;
color: #ffd700;
}
}
}
@keyframes sparkIntense
{
0%, 100%
{
transform: scale(1);
opacity: 0.9;
}
50%
{
transform: scale(1.5);
opacity: 1;
filter: drop-shadow(0 0 12px #ffd700);
}
}
@keyframes ownerPulse
{
0%, 100%
{
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 0 2px #ff4d4d);
}
50%
{
transform: scale(1.2) rotate(5deg);
filter: drop-shadow(0 0 15px #f00);
}
}
@keyframes diamondFloat
{
0%, 100%
{
transform: translateY(0) rotate(0deg);
opacity: 0.8;
}
50%
{
transform: translateY(-3px) rotate(10deg);
opacity: 1;
filter: drop-shadow(0 0 8px #f00);
}
}
@keyframes sparkFloat
{
0%, 100%
{
transform: translateY(0) scale(1);
opacity: 0.8;
}
50%
{
transform: translateY(-2px) scale(1.3);
opacity: 1;
filter: drop-shadow(0 0 10px #ffd700);
}
}
@keyframes sparkIntense
{
0%, 100%
{
transform: scale(1);
opacity: 0.9;
}
50%
{
transform: scale(1.5);
opacity: 1;
filter: drop-shadow(0 0 12px #ffd700);
}
}