Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

ищу extra less

Сортировка по дате Сортировка по голосам
Aerial

Aerial

Ушёл
Мар
1,293
3,963
Продавец
Xyiiqreq написал(а):
https://forum.crmp.online/index.php - отсюда кто может дать их extra less
Нажмите для раскрытия...
CSS: 
.userBannerLight,.userBanner {
    --ub-radius: 0.5em;
    --ub-glow: rgba(198,40,40,0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    box-sizing: border-box;
    font-size: .68em;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    padding: .55em .85em;
    max-width: 100%;
    width: auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    border: none;
    border-radius: var(--ub-radius);
    cursor: default;
    isolation: isolate;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(90deg, #ff4d4d, #c62828, #ff4d4d);
    background-size: 300% 100%;
    background-position: 0% 50%;
    animation: AnimBanner 3s linear infinite;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2),0 6px 16px -6px var(--ub-glow),inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.18);
    transition: transform .25s ease,box-shadow .25s ease,filter .25s ease
}

.userBannerLight:before,.userBanner:before {
    content: "";
    position: absolute;
    top: -20%;
    left: -80%;
    width: 55%;
    height: 140%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0) 100%);
    filter: blur(1px);
    background-repeat: no-repeat;
    pointer-events: none;
    animation: light 3.6s infinite ease-in-out;
    z-index: 1
}

.userBannerLight:after,.userBanner:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 50% -30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 0
}

@media (hover: hover) and (pointer:fine) {
    .userBannerLight:hover,.userBanner:hover {
        transform:translateY(-1px);
        filter: brightness(1.08) saturate(1.05);
        box-shadow: 0 2px 4px rgba(0,0,0,0.22),0 10px 22px -8px var(--ub-glow),inset 0 1px 0 rgba(255,255,255,0.35),inset 0 -1px 0 rgba(0,0,0,0.22)
    }
}

.userBannerLight:active,.userBanner:active {
    transform: translateY(0) scale(.985)
}

.userBannerLight.staff,.userBanner.staff,.userBannerLight.userBanner--staff,.userBanner.userBanner--staff {
    background: linear-gradient(90deg, #8b0000, #b80, #8b0000, #0a4b8a);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.gts,.userBanner.gts {
    background: linear-gradient(90deg, #f33, #8b0000, #dc143c, #f33);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.dalaner,.userBanner.dalaner {
    background: linear-gradient(90deg, #000, #696969, #800080, #8b0000, #ff4500, #ffd700, #0f0, #0ff, #00f, #8a2be2, #ff1493, #000);
    background-size: 1200% 100%;
    animation: AnimBanner 12s linear infinite
}

.userBannerLight.anonim,.userBanner.anonim {
    background: linear-gradient(90deg, #2a2a2a, #111, #2a2a2a);
    background-size: 300% 100%;
    animation: AnimBanner 6s linear infinite
}

.userBannerLight.razrab,.userBanner.razrab {
    background: linear-gradient(90deg, #f819a7, #4619f8, #1e90ff, #f819a7);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.director,.userBanner.director {
    background: linear-gradient(90deg, #f00, #ffa500, #ff0, #800080, #0ff, #f00);
    background-size: 600% 100%;
    animation: AnimBanner 8s linear infinite
}

.userBannerLight.zamdirectora,.userBanner.zamdirectora {
    background: linear-gradient(90deg, #f00, #ff8c00, #ff0, #f00);
    background-size: 500% 100%;
    animation: AnimBanner 6s linear infinite
}

.userBannerLight.stadm,.userBanner.stadm {
    background: linear-gradient(90deg, #06f, #04b, #039, #06f);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.soskags,.userBanner.soskags {
    background: linear-gradient(90deg, #49cc2c, #00ced1, #49cc2c);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.soskazgs,.userBanner.soskazgs {
    background: linear-gradient(90deg, #06f, #ba55d3, #06f);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.redadmin,.userBanner.redadmin {
    background: linear-gradient(90deg, #b22222, #f00, #8b0000, #b22222);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.user,.userBanner.user {
    background: linear-gradient(90deg, #bcbbbb, #515151, #2a2a2a, #bcbbbb);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.admin,.userBanner.admin {
    background: linear-gradient(90deg, #f00, #dc00ff, #ff9400, #f00);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.mlmoder,.userBanner.mlmoder {
    background: linear-gradient(90deg, #80c3df, #0da, #0a8, #80c3df);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.gmvkds,.userBanner.gmvkds {
    background: linear-gradient(90deg, #00f, #0000cd, #1a1aff, #00f);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.teamvkds,.userBanner.teamvkds {
    background: linear-gradient(90deg, #4682b4, #1e90ff, #4682b4);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.stmod,.userBanner.stmod {
    background: linear-gradient(90deg, #f819a7, #0859fc, #f819a7);
    background-size: 300% 100%;
    animation: AnimBanner 3s linear infinite
}

.userBannerLight.moder,.userBanner.moder {
    background: linear-gradient(90deg, #4169e1, #1c5bfc, #5e29f0, #4169e1);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.osnov,.userBanner.osnov {
    background: linear-gradient(90deg, #feea10, #ff931e, #feea10);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.prov,.userBanner.prov {
    background: linear-gradient(90deg, #7b9de0, #a0b8e8, #7b9de0);
    background-size: 300% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.prem,.userBanner.prem {
    background: linear-gradient(90deg, #666df2, #8a90f5, #666df2);
    background-size: 300% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.ga,.userBanner.ga {
    background: linear-gradient(90deg, #32cd32, #008000, #20b2aa, #32cd32);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.takers,.userBanner.takers {
    background: linear-gradient(90deg, #f36, #ff6b3d, #ffd700, #2ecc71, #00bcd4, #9b59b6, #e84393, #6c5ce7, #00cec9, #fd79a8, #fdcb6e, #0984e3, #f36);
    background-size: 1300% 100%;
    animation: AnimBanner 10s linear infinite
}

.userBannerLight.lider,.userBanner.lider {
    background: linear-gradient(90deg, #da0, #f08b9a, #da0);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.kur,.userBanner.kur {
    background: linear-gradient(90deg, #b0284d, #497fff, #b0284d);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.liderfam,.userBanner.liderfam {
    background: linear-gradient(90deg, #b0284d, #497fff, #0ff, #00f, #00008b, #b0284d);
    background-size: 600% 100%;
    animation: AnimBanner 6s linear infinite
}

.userBannerLight.adm,.userBanner.adm {
    background: linear-gradient(90deg, #6b8e23, #82f358, #49cc2c, #6b8e23);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.mod,.userBanner.mod {
    background: linear-gradient(90deg, #49cc2c, #82f358, #49cc2c);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.teh,.userBanner.teh {
    background: linear-gradient(90deg, #ff4500, #b50, #c00, #ff4500);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.grand,.userBanner.grand {
    background: linear-gradient(90deg, #f4a460, #daa520, #d2691e, #f4a460);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.black,.userBanner.black {
    background: linear-gradient(90deg, #111, #f00, #111, #f00);
    background-size: 400% 100%;
    animation: AnimBanner 3s linear infinite
}

.userBannerLight.sueta,.userBanner.sueta {
    background: linear-gradient(90deg, #808080, #c0c0c0, #8b4513, #808080);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.hassle,.userBanner.hassle {
    background: linear-gradient(90deg, #ffd700, #ffa500, #ff8c00, #ffd700);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.test,.userBanner.test {
    background: linear-gradient(90deg, #c71585, #ff1493, #ff69b4, #c71585);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.maloy,.userBanner.maloy {
    background: linear-gradient(90deg, #800080, #800000, #800080);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.project,.userBanner.project {
    background: linear-gradient(90deg, #d600c1, #ba00d6, #9d00d6, #d600c1);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.sponsor,.userBanner.sponsor {
    background: linear-gradient(90deg, #6a5acd, #4b0082, #8a2be2, #6a5acd);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.spec,.userBanner.spec {
    background: linear-gradient(90deg, #f00, #8b0000, #dc143c, #f00);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.osnovatel,.userBanner.osnovatel {
    background: linear-gradient(90deg, #feea10, #ff931e, #feea10, #ff931e);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.Gladmin,.userBanner.Gladmin {
    background: linear-gradient(90deg, #5ade21, #008000, #5ade21, #008000);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.ZGadmin,.userBanner.ZGadmin {
    background: linear-gradient(90deg, #4bb524, #26e0af, #4bb524, #26e0af);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.rykproekta,.userBanner.rykproekta {
    background: linear-gradient(90deg, #8b006d, #f00, #8b006d);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.prempolziy,.userBanner.prempolziy {
    background: linear-gradient(90deg, #f819a7, #0859fc, #f819a7);
    background-size: 300% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.kmddsik,.userBanner.kmddsik {
    background: linear-gradient(90deg, #7b9de0, #0859fc, #7b9de0);
    background-size: 300% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.assistant,.userBanner.assistant {
    background: linear-gradient(90deg, #4b0082, #6a5acd, #483d8b, #4b0082);
    background-size: 400% 100%;
    animation: AnimBanner 5s linear infinite
}

.userBannerLight.saharteam,.userBanner.saharteam {
    background: linear-gradient(90deg, #3d98ff, #c6ff6b, #21ed73, #3d98ff, #f700df, #4d0045, #758cff, #00f, #3d98ff);
    background-size: 800% 100%;
    animation: AnimBanner 10s linear infinite
}

.userBannerLight.zgts,.userBanner.zgts {
    background: linear-gradient(90deg, #f00, #8b0000, #dc143c, #f00);
    background-size: 400% 100%;
    animation: AnimBanner 4s linear infinite
}

.userBannerLight.testaf,.userBanner.testaf {
    background-image: linear-gradient(270deg, #4b0082, #9400d3, #f0f, #4b0082);
    background-size: 300% 100%;
    border-color: rgba(148,0,211,0.6)
}

.memberHeader-banners .userBannerLight,.memberHeader-banners .userBanner,.memberTooltip-banners .userBannerLight,.memberTooltip-banners .userBanner {
    width: auto;
    max-width: 100%
}

@media (max-width: 650px) {
    .message:not(.message--forceColumns) .message-userBanner.userBanner.userBannerLight,.message:not(.message--forceColumns) .message-userBanner.userBanner.userBanner {
        display:inline-flex;
        width: auto;
        max-width: 100%;
        padding: .5em .9em;
        font-size: 0.7em;
        letter-spacing: 0.045em
    }
}

@media (max-width: 480px) {
    .userBannerLight,.userBanner {
        font-size:0.66em;
        padding: .45em .8em;
        letter-spacing: 0.035em;
        border-radius: 0.4em;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2),0 4px 12px -6px var(--ub-glow),inset 0 1px 0 rgba(255,255,255,0.28)
    }

    .userBannerLight:before,.userBanner:before {
        opacity: 0.8
    }
}

@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes light {
    0% {
        left: -80%;
        opacity: 0
    }

    15% {
        opacity: 1
    }

    50% {
        opacity: 1
    }

    85% {
        opacity: 1
    }

    100% {
        left: 100%;
        opacity: 0
    }
}

@media (prefers-reduced-motion:reduce) {
    .userBannerLight:before,.userBanner:before {
        animation: none
    }

    .userBanner,.userBanner * {
        animation: none !important;
        transition: none !important
    }

    .userBanner:hover {
        transform: none;
        filter: none
    }
}
Вставляй этот код в extra.less
 
Позитивный голос 0 Негативный голос
Войдите или зарегистрируйтесь для ответа.
Сверху