.userBanner {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 13px !important;
margin: 3px !important;
min-height: 24px;
border-radius: 8px !important;
background: rgba(20,20,20,0.88) !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: .4px;
color: #fff !important;
border: 2px solid transparent;
transition: .2s
}
.userBanner:hover {
transform: scale(1.03);
filter: brightness(1.08)
}
.userBanner.userBanner--techlead {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 15px #f00,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--forumadmin {
border-color: #B06CFF;
box-shadow: 0 0 5px #c896ff,0 0 15px #b06cff,0 0 25px rgba(176,108,255,0.5),inset 0 0 8px rgba(200,150,255,0.4)
}
.userBanner.userBanner--prmanager {
border-color: #F2B04D;
box-shadow: 0 0 5px #f6c67a,0 0 15px #f2b04d,0 0 25px rgba(242,176,77,0.5),inset 0 0 8px rgba(246,198,122,0.4)
}
.userBanner.userBanner--sysmod {
border-color: #61D9FF;
box-shadow: 0 0 5px #8ee4ff,0 0 15px #61d9ff,0 0 25px rgba(97,217,255,0.5),inset 0 0 8px rgba(142,228,255,0.4)
}
.userBanner.userBanner--specialadmin {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 15px #f00,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--ceo {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 15px #f00,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--director {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 15px #f00,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--developer {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 15px #f00,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--forummod {
border-color: #D991FF;
box-shadow: 0 0 5px #e8b5ff,0 0 15px #d991ff,0 0 25px rgba(217,145,255,0.5),inset 0 0 8px rgba(232,181,255,0.4)
}
.userBanner.userBanner--owner {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 20px #f00,0 0 35px rgba(255,0,0,0.7),inset 0 0 12px rgba(255,68,68,0.5)
}
.userBanner.userBanner--techspec {
border-color: #F0A86A;
box-shadow: 0 0 5px #f5c08e,0 0 15px #f0a86a,0 0 25px rgba(240,168,106,0.5),inset 0 0 8px rgba(245,192,142,0.4);
color: #f1f5f9 !important
}
.userBanner.userBanner--rootadmin {
border-color: #39FF8F;
box-shadow: 0 0 5px #6fffaf,0 0 15px #39ff8f,0 0 25px rgba(57,255,143,0.5),inset 0 0 8px rgba(111,255,175,0.4)
}
.userBanner.userBanner--testlead {
border-color: #F5F06A;
box-shadow: 0 0 5px #f9f694,0 0 15px #f5f06a,0 0 25px rgba(245,240,106,0.5),inset 0 0 8px rgba(249,246,148,0.4)
}
.userBanner.userBanner--apricot {
border-color: #fdba74;
box-shadow: 0 0 5px #fed7aa,0 0 15px #fdba74,0 0 25px rgba(253,186,116,0.5),inset 0 0 8px rgba(254,215,170,0.4)
}
.userBanner.userBanner--vicelead {
border-color: #E79BFF;
box-shadow: 0 0 5px #f0c2ff,0 0 15px #e79bff,0 0 25px rgba(231,155,255,0.5),inset 0 0 8px rgba(240,194,255,0.4)
}
.userBanner.userBanner--viceadmin {
border-color: #6CFF7A;
box-shadow: 0 0 5px #9affa4,0 0 15px #6cff7a,0 0 25px rgba(108,255,122,0.5),inset 0 0 8px rgba(154,255,164,0.4)
}
.userBanner.userBanner--curadmin {
border-color: #8A7DFF;
box-shadow: 0 0 5px #b0a8ff,0 0 15px #8a7dff,0 0 25px rgba(138,125,255,0.5),inset 0 0 8px rgba(176,168,255,0.4)
}
.userBanner.userBanner--vicetest {
border-color: #F0EA63;
box-shadow: 0 0 5px #f6f28e,0 0 15px #f0ea63,0 0 25px rgba(240,234,99,0.5),inset 0 0 8px rgba(246,242,142,0.4)
}
.userBanner.userBanner--chiefwatcher {
border-color: #5E93FF;
box-shadow: 0 0 5px #8eb3ff,0 0 15px #5e93ff,0 0 25px rgba(94,147,255,0.5),inset 0 0 8px rgba(142,179,255,0.4)
}
.userBanner.userBanner--vicewatcher {
border-color: #72A3FF;
box-shadow: 0 0 5px #9dc0ff,0 0 15px #72a3ff,0 0 25px rgba(114,163,255,0.5),inset 0 0 8px rgba(157,192,255,0.4)
}
.userBanner.userBanner--senioradmin {
border-color: #F5D85A;
box-shadow: 0 0 5px #f9e68a,0 0 15px #f5d85a,0 0 25px rgba(245,216,90,0.5),inset 0 0 8px rgba(249,230,138,0.4)
}
.userBanner.userBanner--qa {
border-color: #a3e635;
box-shadow: 0 0 5px #bef264,0 0 15px #a3e635,0 0 25px rgba(163,230,53,0.5),inset 0 0 8px rgba(190,242,100,0.4)
}
.userBanner.userBanner--admin {
border-color: #F2C85B;
box-shadow: 0 0 5px #f6da8a,0 0 15px #f2c85b,0 0 25px rgba(242,200,91,0.5),inset 0 0 8px rgba(246,218,138,0.4)
}
.userBanner.userBanner--seniormod {
border-color: #8CE8FF;
box-shadow: 0 0 5px #b8f1ff,0 0 15px #8ce8ff,0 0 25px rgba(140,232,255,0.5),inset 0 0 8px rgba(184,241,255,0.4)
}
.userBanner.userBanner--leader {
border-color: #6CEEFF;
box-shadow: 0 0 5px #9ef3ff,0 0 15px #6ceeff,0 0 25px rgba(108,238,255,0.5),inset 0 0 8px rgba(158,243,255,0.4)
}
.userBanner.userBanner--moderator {
border-color: #8ABEFF;
box-shadow: 0 0 5px #b0d6ff,0 0 15px #8abeff,0 0 25px rgba(138,190,255,0.5),inset 0 0 8px rgba(176,214,255,0.4)
}
.userBanner.userBanner--serverred {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 15px #f00,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--santa {
border-color: #87E9FF;
box-shadow: 0 0 5px #b8f2ff,0 0 20px #87e9ff,0 0 35px rgba(135,233,255,0.6),inset 0 0 12px rgba(184,242,255,0.5);
color: #f0f9ff !important
}
.userBanner.userBanner--serverblue {
border-color: #3b82f6;
box-shadow: 0 0 5px #60a5fa,0 0 15px #3b82f6,0 0 25px rgba(59,130,246,0.5),inset 0 0 8px rgba(96,165,250,0.4)
}
.userBanner.userBanner--servergreen {
border-color: #22c55e;
box-shadow: 0 0 5px #4ade80,0 0 15px #22c55e,0 0 25px rgba(34,197,94,0.5),inset 0 0 8px rgba(74,222,128,0.4)
}
.userBanner.userBanner--leaddev {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 15px #f00,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--devhead {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 15px #f00,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--webdev {
border-color: #FF0000;
box-shadow: 0 0 5px #f44,0 0 15px #f00,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--user {
border-color: #6b7280;
box-shadow: 0 0 5px #9ca3af,0 0 12px #6b7280,0 0 20px rgba(107,114,128,0.4),inset 0 0 6px rgba(156,163,175,0.3)
}
.userBanner.userBanner--staff {
border-color: #FFD700;
box-shadow: 0 0 5px #ffe44d,0 0 15px #ffd700,0 0 25px rgba(255,0,0,0.5),inset 0 0 8px rgba(255,68,68,0.4)
}
.userBanner.userBanner--projectteam {
border-color: #FFD700;
box-shadow: 0 0 5px #ffe44d,0 0 15px #ffd700,0 0 25px rgba(255,215,0,0.5),inset 0 0 8px rgba(255,228,77,0.4)
}
.skwjj {
color: #ffff00 !important;
text-shadow: 0 0 2px rgba(255,255,0,0.9),0 0 6px rgba(255,255,0,0.8),0 0 12px rgba(255,255,0,0.7),0 0 20px rgba(255,255,0,0.6),0 0 35px rgba(255,255,0,0.4);
background: linear-gradient(45deg, #0a0a00, #332b00, #1a1a00, #4d3e00);
background-size: 400% 400%;
animation: gradientShift 6s ease infinite
}
.information {
color: #ffff00 !important;
text-shadow: 0 0 2px rgba(255,255,0,0.9),0 0 6px rgba(255,255,0,0.8),0 0 12px rgba(255,255,0,0.7),0 0 20px rgba(255,255,0,0.6),0 0 35px rgba(255,255,0,0.4)
}
.review {
color: #cccccc !important;
text-shadow: 0 0 2px rgba(180,180,180,0.9),0 0 6px rgba(160,160,160,0.8),0 0 12px rgba(140,140,140,0.7),0 0 20px rgba(120,120,120,0.6),0 0 35px rgba(100,100,100,0.4);
position: relative;
padding-left: 26px
}
.review::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid rgba(180,180,180,0.3);
border-top: 2px solid #ccc;
border-radius: 50%;
animation: spin .8s linear infinite;
box-shadow: 0 0 4px rgba(180,180,180,0.7),0 0 10px rgba(160,160,160,0.5)
}
@keyframes spin {
from {
transform: translateY(-50%) rotate(0deg)
}
to {
transform: translateY(-50%) rotate(360deg)
}
}
.important {
color: #ff3333 !important;
text-shadow: 0 0 2px rgba(255,50,50,0.9),0 0 6px rgba(255,30,30,0.8),0 0 12px rgba(255,0,0,0.7),0 0 20px rgba(220,0,0,0.6),0 0 35px rgba(200,0,0,0.4);
position: relative;
padding-left: 28px
}
.important::before {
content: "!";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: #ff3333;
color: #1a0000;
font-size: 13px;
font-weight: bold;
line-height: 18px;
text-align: center;
border-radius: 50%;
animation: alertPulse 1s ease-in-out infinite;
box-shadow: 0 0 6px rgba(255,50,50,0.9),0 0 14px rgba(255,0,0,0.7),0 0 24px rgba(220,0,0,0.5)
}
@keyframes alertPulse {
0%,100% {
box-shadow: 0 0 6px rgba(255,50,50,0.9),0 0 14px rgba(255,0,0,0.7),0 0 24px rgba(220,0,0,0.5);
transform: translateY(-50%) scale(1)
}
50% {
box-shadow: 0 0 10px #ff3232,0 0 22px rgba(255,0,0,0.9),0 0 36px rgba(220,0,0,0.7);
transform: translateY(-50%) scale(1.15)
}
}
.no {
color: #ff3333 !important;
text-shadow: 0 0 2px rgba(255,50,50,0.9),0 0 6px rgba(255,30,30,0.8),0 0 12px rgba(255,0,0,0.7),0 0 20px rgba(220,0,0,0.6),0 0 35px rgba(200,0,0,0.4);
position: relative;
padding-left: 28px
}
.no::before {
content: "✖";
position: absolute;
left: 0;
top: 38%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: #ff3333;
color: #1a0000;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-align: center;
border-radius: 50%;
animation: alertPulse 1s ease-in-out infinite;
box-shadow: 0 0 6px rgba(255,50,50,0.9),0 0 14px rgba(255,0,0,0.7),0 0 24px rgba(220,0,0,0.5)
}
.yes {
color: #33ff33 !important;
text-shadow: 0 0 2px rgba(50,255,50,0.9),0 0 6px rgba(30,255,30,0.8),0 0 12px rgba(0,255,0,0.7),0 0 20px rgba(0,220,0,0.6),0 0 35px rgba(0,200,0,0.4);
position: relative;
padding-left: 28px
}
.yes::before {
content: "✔";
position: absolute;
left: 0;
top: 38%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: #33ff33;
color: #001a00;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-align: center;
border-radius: 50%;
box-shadow: 0 0 6px rgba(50,255,50,0.9),0 0 14px rgba(0,255,0,0.7),0 0 24px rgba(0,220,0,0.5)
}
.closed {
color: #ff3333 !important;
text-shadow: 0 0 2px rgba(255,50,50,0.9),0 0 6px rgba(255,30,30,0.8),0 0 12px rgba(255,0,0,0.7),0 0 20px rgba(220,0,0,0.6),0 0 35px rgba(200,0,0,0.4);
position: relative;
padding-left: 28px
}
.closed::before {
content: "🔒";
position: absolute;
left: 0;
top: 38%;
transform: translateY(-50%);
font-size: 14px;
line-height: 1;
text-shadow: 0 0 6px rgba(255,50,50,0.9),0 0 14px rgba(255,0,0,0.7),0 0 24px rgba(220,0,0,0.5)
}
.check {
color: #cccccc !important;
text-shadow: 0 0 2px rgba(180,180,180,0.9),0 0 6px rgba(160,160,160,0.8),0 0 12px rgba(140,140,140,0.7),0 0 20px rgba(120,120,120,0.6),0 0 35px rgba(100,100,100,0.4);
position: relative;
padding-left: 28px
}
.check::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 18px;
height: 18px;
border: 2px solid rgba(160,160,160,0.6);
border-radius: 50%;
transform: translateY(-50%) scale(0);
animation: circlePop .4s ease-out forwards;
box-shadow: 0 0 6px rgba(160,160,160,0.5),0 0 14px rgba(130,130,130,0.3)
}
.check::after {
content: "";
position: absolute;
left: 5px;
top: 42%;
width: 8px;
height: 14px;
border-right: 2px solid #aaa;
border-bottom: 2px solid #aaa;
transform: translateY(-50%) rotate(45deg) scale(0);
animation: checkDraw .4s ease-out forwards;
animation-delay: 0.15s;
box-shadow: 0 0 4px rgba(160,160,160,0.6),0 0 10px rgba(130,130,130,0.4)
}
@keyframes circlePop {
to {
transform: translateY(-50%) scale(1)
}
}
@keyframes checkDraw {
to {
transform: translateY(-50%) rotate(45deg) scale(1)
}
}
.zero {
color: #33ff33 !important;
text-shadow: 0 0 2px rgba(50,255,50,0.9),0 0 6px rgba(30,255,30,0.8),0 0 12px rgba(0,255,0,0.7),0 0 20px rgba(0,220,0,0.6),0 0 35px rgba(0,200,0,0.4)
}
.check {
color: #cccccc !important;
text-shadow: 0 0 2px rgba(180,180,180,0.9),0 0 6px rgba(160,160,160,0.8),0 0 12px rgba(140,140,140,0.7),0 0 20px rgba(120,120,120,0.6),0 0 35px rgba(100,100,100,0.4);
position: relative;
padding-left: 28px
}
.check::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 18px;
height: 18px;
border: 2px solid rgba(160,160,160,0.6);
border-radius: 50%;
transform: translateY(-50%) scale(0);
animation: circlePop .4s ease-out forwards;
box-shadow: 0 0 6px rgba(160,160,160,0.5),0 0 14px rgba(130,130,130,0.3)
}
.check::after {
content: "";
position: absolute;
left: 5px;
top: 42%;
width: 8px;
height: 14px;
border-right: 2px solid #aaa;
border-bottom: 2px solid #aaa;
transform: translateY(-50%) rotate(45deg) scale(0);
animation: checkDraw .4s ease-out forwards;
animation-delay: 0.15s;
box-shadow: 0 0 4px rgba(160,160,160,0.6),0 0 10px rgba(130,130,130,0.4)
}
@keyframes circlePop {
to {
transform: translateY(-50%) scale(1)
}
}
@keyframes checkDraw {
to {
transform: translateY(-50%) rotate(45deg) scale(1)
}
}
.stop {
color: #ff3333 !important;
text-shadow: 0 0 2px rgba(255,50,50,0.9),0 0 6px rgba(255,30,30,0.8),0 0 12px rgba(255,0,0,0.7),0 0 20px rgba(220,0,0,0.6),0 0 35px rgba(200,0,0,0.4);
position: relative;
padding-left: 28px
}
.stop::before {
content: "✖";
position: absolute;
left: 0;
top: 38%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: #ff3333;
color: #1a0000;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-align: center;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255,50,50,0.9),0 0 14px rgba(255,0,0,0.7),0 0 24px rgba(220,0,0,0.5)
}
.top {
color: #33ff33 !important;
text-shadow: 0 0 2px rgba(50,255,50,0.9),0 0 6px rgba(30,255,30,0.8),0 0 12px rgba(0,255,0,0.7),0 0 20px rgba(0,220,0,0.6),0 0 35px rgba(0,200,0,0.4);
position: relative;
padding-left: 28px
}
.top::before {
content: "✔";
position: absolute;
left: 0;
top: 38%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: #33ff33;
color: #001a00;
font-size: 12px;
font-weight: bold;
line-height: 18px;
text-align: center;
border-radius: 50%;
box-shadow: 0 0 6px rgba(50,255,50,0.9),0 0 14px rgba(0,255,0,0.7),0 0 24px rgba(0,220,0,0.5)
}
.drive {
color: #ff3333 !important;
text-shadow: 0 0 2px rgba(255,50,50,0.9),0 0 6px rgba(255,30,30,0.8),0 0 12px rgba(255,0,0,0.7),0 0 20px rgba(220,0,0,0.6),0 0 35px rgba(200,0,0,0.4);
position: relative;
padding-left: 28px
}
.drive::before {
content: "!";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
background: #ff3333;
color: #1a0000;
font-size: 13px;
font-weight: bold;
line-height: 18px;
text-align: center;
border-radius: 50%;
animation: alertPulse 1s ease-in-out infinite;
box-shadow: 0 0 6px rgba(255,50,50,0.9),0 0 14px rgba(255,0,0,0.7),0 0 24px rgba(220,0,0,0.5)
}
@keyframes alertPulse {
0%,100% {
box-shadow: 0 0 6px rgba(255,50,50,0.9),0 0 14px rgba(255,0,0,0.7),0 0 24px rgba(220,0,0,0.5);
transform: translateY(-50%) scale(1)
}
50% {
box-shadow: 0 0 10px #ff3232,0 0 22px rgba(255,0,0,0.9),0 0 36px rgba(220,0,0,0.7);
transform: translateY(-50%) scale(1.15)
}
}
.zh {
color: #ffff00 !important;
text-shadow: 0 0 2px rgba(255,255,0,0.9),0 0 6px rgba(255,255,0,0.8),0 0 12px rgba(255,255,0,0.7),0 0 20px rgba(255,255,0,0.6),0 0 35px rgba(255,255,0,0.4)
}
.testbefore {
color: #cccccc !important;
text-shadow: 0 0 2px rgba(180,180,180,0.9),0 0 6px rgba(160,160,160,0.8),0 0 12px rgba(140,140,140,0.7),0 0 20px rgba(120,120,120,0.6),0 0 35px rgba(100,100,100,0.4);
position: relative;
padding-left: 26px
}
.testbefore::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid rgba(180,180,180,0.3);
border-top: 2px solid #ccc;
border-radius: 50%;
animation: spin .8s linear infinite;
box-shadow: 0 0 4px rgba(180,180,180,0.7),0 0 10px rgba(160,160,160,0.5)
}
@keyframes spin {
from {
transform: translateY(-50%) rotate(0deg)
}
to {
transform: translateY(-50%) rotate(360deg)
}
}
.help {
color: #ff0000 !important;
text-shadow: 0 0 2px rgba(255,0,0,0.9),0 0 6px rgba(255,0,0,0.8),0 0 12px rgba(255,0,0,0.7),0 0 20px rgba(255,0,0,0.6),0 0 35px rgba(255,0,0,0.4)
}
