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 и магазин форума

Сен
394
208
Пользователь
во первых загловок можно сделать "ищу",во вторых,что ищите по extra.less? банеры,префиксы или что-то другое?
 
Сен
394
208
Пользователь
если не ошибаюсь то там баннеры крмп онлайн
 
Дек
95
13
Пользователь
они отличаются

они без обводки, мне надо баннеры как команда форума
 
Ноя
1,878
5,936
Команда форума
Администратор
все в заголовке
сылка на форум https://www.forum-cray-rp.online/index.php
Less:
@logoImages: 'https://www.forum-cray-rp.online/data/assets/logo/IMG_1014.png';

.svg-userBannerVariation(@color; @bg; @logo: @logoImages)
{
    color: @color;
    background-color: @bg;
    border: none;
}

.userBanner
{
    color: #fff;
    text-transform: uppercase;
    font-weight: 1000;
    font-size: 69%;
    border-radius: 90px 60px 90px 60px;
    padding: 5px 7px;
    background-size: 700% 700%;
    border: .6mm ridge rgba(255, 255, 255, .4);
    animation: AnimBanner 10s ease infinite;
    letter-spacing: .6px;
    position: relative;
    cursor: pointer;
    overflow: visible !important;
    margin-bottom: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;

    .message-userBanner& {
        display: flex;
    }

    &:before
    {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -12px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgba(127, 0, 255, .9);
        z-index: 2;
        filter: drop-shadow(0 0 5px rgba(127, 0, 255, .7));
    }

    &:after
    {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -20px;
        transform: translateX(-50%);
        width: 24px;
        height: 24px;
        background-image: url('@{logoImages}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, .8);
        box-shadow: 0 0 15px rgba(127, 0, 255, .9), inset 0 0 10px rgba(255, 255, 255, .3);
        z-index: 3;
        animation: pulseAvatar 4s ease-in-out infinite;
    }

    &:hover
    {
        animation-duration: 3s;
        box-shadow: 0 0 25px #7f00ff;
        transform: translateY(-2px);
        filter: brightness(1.15);

        &:after
        {
            animation-duration: 2s;
        }
    }

    &.userBanner--staff
    {
        .svg-userBannerVariation(#fff, #5c97bf);
        background-image: linear-gradient(270deg, #00b9ff, #d104ff, #2800ff);
        background-size: 900% 900%;
        border: .6mm ridge rgba(255, 255, 255, .4);
    }

    &.userBanner--super
    {
        background: linear-gradient(120deg, #ff0080, #7f00ff, #00ffd5, #00ff85, #ffe000) !important;
        background-size: 500% 500% !important;
        animation: superflow 5s linear infinite, AnimBanner 10s ease infinite !important;
        box-shadow: 0 0 30px rgba(255, 0, 128, .85);
        border: 1px solid rgba(255, 255, 255, .4);

        &:before
        {
            border-top: 10px solid rgba(255, 0, 128, .9);
            filter: drop-shadow(0 0 8px rgba(255, 0, 128, .8));
        }

        &:after
        {
            box-shadow: 0 0 20px rgba(255, 0, 128, .9), 0 0 10px rgba(0, 255, 213, .7), inset 0 0 12px rgba(255, 255, 255, .5);
            border: 2px solid rgba(255, 255, 255, .9);
            animation: pulseAvatarSuper 3s ease-in-out infinite;
        }

        &:hover
        {
            box-shadow: 0 0 40px #ff0080, 0 0 20px rgba(0, 255, 213, .8);
            transform: translateY(-3px) scale(1.02);

            &:after
            {
                animation-duration: 1.5s;
                transform: translateX(-50%) scale(1.15);
            }
        }
    }

    &.userBanner--razrab
    {
        background-image: linear-gradient(135deg, #ff2cdf, #7a00ff, #00c6ff);
    }
    
    &.userBanner--stadm
    {
        background-image: linear-gradient(135deg, #005eff, #00b4ff);
    }
    
    &.userBanner--redadmin
    {
        background-image: linear-gradient(270deg, #b22222, #dc143c, #8b0000);
    }
    
    &.userBanner--admin
    {
        background-image: linear-gradient(135deg, #7f00ff, #c300ff);
    }
    
    &.userBanner--Gladmin
    {
        background-image: linear-gradient(135deg, #00ff7f, #00c853);
    }
    
    &.userBanner--ZGadmin
    {
        background-image: linear-gradient(135deg, #00ffd5, #00bfa5);
    }
    
    &.userBanner--osnovatel
    {
        background-image: linear-gradient(135deg, #ffb347, #ffd700);
    }
    
    &.userBanner--rykproekta
    {
        background-image: linear-gradient(135deg, #ff1e1e, #8b0000);
    }
    
    &.userBanner--mlmoder
    {
        background-image: linear-gradient(135deg, #00f2ff, #00ffa2);
    }
    
    &.userBanner--stmod
    {
        background-image: linear-gradient(135deg, #3a7bd5, #00d2ff);
    }
    
    &.userBanner--moder
    {
        background-image: linear-gradient(135deg, #00c853, #aeea00);
    }
    
    &.userBanner--soskags
    {
        background-image: linear-gradient(135deg, #0fc, #43e97b);
    }
    
    &.userBanner--soskazgs
    {
        background-image: linear-gradient(135deg, #6a11cb, #2575fc);
    }
    
    &.userBanner--teh
    {
        background-image: linear-gradient(135deg, #ff512f, #f09819);
    }
    
    &.userBanner--ga
    {
        background-image: linear-gradient(135deg, #00ff85, #00b09b);
    }
    
    &.userBanner--lider
    {
        background-image: linear-gradient(135deg, #ffd700, #ff8c00);
    }
    
    &.userBanner--kur
    {
        background-image: linear-gradient(135deg, #ff4ecd, #6a00ff);
    }
    
    &.userBanner--vkteam
    {
        background-image: linear-gradient(135deg, #1e90ff, #6a5acd);
    }
    
    &.userBanner--user
    {
        background-image: linear-gradient(135deg, #2b2b2b, #000);
    }
    
    &.userBanner--zablok
    {
        background-image: linear-gradient(135deg, #000, #3b0000);
        color: #ff4d4d;
    }
    
    &.userBanner--sledfrac
    {
        background-image: linear-gradient(135deg, #1e3c72, #2a5298);
    }
    
    &.userBanner--grand
    {
        background-image: linear-gradient(135deg, #d4a373, #b8860b);
    }
    
    &.userBanner--black
    {
        background-image: linear-gradient(135deg, #500, #000);
    }
    
    &.userBanner--sueta
    {
        background-image: linear-gradient(135deg, #7f7f7f, #b5b5b5);
        color: #fff;
    }
    
    &.userBanner--hassle
    {
        background-image: linear-gradient(135deg, #ffd700, #ffa500);
    }
    
    &.userBanner--project
    {
        background-image: linear-gradient(135deg, #c300ff, #7f00ff);
    }
    
    &.userBanner--sponsor
    {
        background-image: linear-gradient(135deg, #4b0082, #7b68ee);
    }
    
    &.userBanner--spec
    {
        background-image: linear-gradient(135deg, #f00, #8b0000);
    }
    
    &.userBanner--zrpice
    {
        background-image: linear-gradient(135deg, #9f2fff, #ff3c9e, #00ffd5);
    }
    
    &.userBanner--furmangroup
    {
        background-image: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
    }
    
    &.userBanner--furmanvip
    {
        background-image: linear-gradient(135deg, #00c6ff, #7f00ff, #f0c);
    }
    
    &.userBanner--crmp
    {
        background-image: linear-gradient(135deg, #0ff, #f0f, #4b0082);
    }
    
    &.userBanner--respachegroup
    {
        background-image: linear-gradient(135deg, #f00, #000);
    }
    
    &.userBanner--admforum
    {
        background-image: linear-gradient(135deg, #ff512f, #ff9f00);
    }
    
    &.userBanner--zrykproektaall
    {
        background-image: linear-gradient(135deg, #ff512f, #ff9f00);
    }

    &.userBanner--wagnersex
    {
        color: #fff;
        border: none;
        background-image: linear-gradient(210deg, #8b0000, #000, #8b0000, #000, #8b0000, #000, #8b0000, #000);
        background-size: 900% 900%;
    }

    &.userBanner--winstongroup
    {
        color: #fff;
        border: none;
        background-image: linear-gradient(210deg, #7442c8, #9400d3, #000080, #f0f);
        background-size: 900% 900%;
        text-transform: uppercase;
        font-size: 87%;
        border-radius: 30px;
        text-align: center;
        padding: 1px 10px 3px;
        animation: AnimBanner 5s ease infinite;
    }

    &.userBanner--shontakers
    {
        color: #fff;
        border: none;
        background-image: linear-gradient(210deg, #8b0000, #000, #8b0000, #000, #8b0000, #000, #8b0000, #000);
        background-size: 900% 900%;
    }

    &.userBanner--gosharespach
    {
        color: #fff;
        border: none;
        background-image: linear-gradient(210deg, #f00, #00f, #f00, #00f, #f00, #00f, #f00, #00f);
        background-size: 900% 900%;
    }

    &.userBanner--sixseven
    {
        background-image: linear-gradient(270deg, #f00, #ffa500, #ff8c00);
    }

    &.userBanner--Lixvizz
    {
        background-image: linear-gradient(270deg, #ff1493, #ffc0cb, #c71585);
    }

    &.userBanner--furman
    {
        background-image: linear-gradient(270deg, #f00, #ff69b4, #0ff);
    }

    &.userBanner--michikatsu
    {
        background-image: linear-gradient(270deg, #f0f, #800080, #ffc0cb);
    }

    &.userBanner--osnov
    {
        background-image: linear-gradient(270deg, #feea10, #ff931e);
        color: #fff;
    }

    &.userBanner--ds
    {
        background-image: linear-gradient(270deg, #0ff, #1e90ff, #0000cd);
    }

    &.userBanner--devilschmo
    {
        background-image: linear-gradient(270deg, #8b4513, #f0f, #0ff);
    }

    &.userBanner--melky
    {
        background-image: linear-gradient(270deg, #9370db, #9932cc, #da70d6);
    }

    &.userBanner--dobryak
    {
        background-image: linear-gradient(270deg, #ff2400, #ff4d00, #ff6800);
    }

    &.userBanner--testaf
    {
        background-image: linear-gradient(270deg, #4b0082, #9400d3, #f0f);
    }

    &.userBanner--Cybers
    {
        background-image: linear-gradient(270deg, #800080, #8b008b, #800080);
    }

    &.userBanner--moderforuma
    {
        background-image: linear-gradient(270deg, #191970, #00bfff, #0ff);
    }

    &.userBanner--founder
    {
        background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10, #ff8c00);
    }

    &.userBanner--dominic
    {
        background-image: linear-gradient(270deg, #ffb3ff, #4d4dff, #8b4513);
    }

    &.userBanner--zamfounder
    {
        background-image: linear-gradient(270deg, #ffd700, #fff, #ff8c00, #fff);
        text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    }

    &.userBanner--takeshka
    {
        background-image: linear-gradient(270deg, #f0f, #ee82ee, #800080);
    }

    &.userBanner--ded
    {
        background-image: linear-gradient(270deg, #f00, #8b0000);
    }

    &.userBanner--shumov
    {
        background: linear-gradient(270deg, #ff1a1a, #f00, #c00, #900, #c00, #f00, #ff1a1a);
        background-size: 400% 400%;
        animation: redFlow 6s ease infinite;
    }

    &.userBanner--ryk
    {
        background-image: linear-gradient(270deg, #8b006d, #f00);
    }

    &.userBanner--pluxury
    {
        background-image: linear-gradient(270deg, #ff6745, #ffe7ab, #feb0ff, #ff8178, #ebb894, #ffcfad, #ffaf75);
    }

    &.userBanner--zrp
    {
        background: linear-gradient(135deg, #dc143c, #cd5c5c, #8b0000);
        background-size: 300% 300%;
    }

    &[class*="userBanner--"]:hover
    {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 12px 35px rgba(0, 0, 0, .7);
        filter: brightness(1.15);
    }
}

@media (max-width: @xf-responsiveMedium)
{
    .message:not(.message--forceColumns) .message-userTitle, .message:not(.message--forceColumns) .message-userBanner.userBanner
    {
        display: inline-flex;
    }

    .userBanner, .userBanner.userBanner--super
    {
        font-size: 65%;
        padding: 4px 10px;
    }

    .userBanner:after, .userBanner.userBanner--super:after
    {
        width: 20px;
        height: 20px;
        bottom: -18px;
    }

    .userBanner:before, .userBanner.userBanner--super:before
    {
        bottom: -10px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid rgba(127, 0, 255, .9);
    }

    .userBanner.userBanner--super:before
    {
        border-top: 8px solid rgba(255, 0, 128, .9);
    }
}

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

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

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

@keyframes gradientShift
{
    0%
    {
        background-position: 0% 50%;
    }

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

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

@keyframes superflow
{
    0%
    {
        background-position: 0% 50%;
    }

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

@keyframes pulseAvatar
{
    0%
    {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 15px rgba(127, 0, 255, .9), inset 0 0 10px rgba(255, 255, 255, .3);
    }

    50%
    {
        transform: translateX(-50%) scale(1.05);
        box-shadow: 0 0 20px #7f00ff, inset 0 0 12px rgba(255, 255, 255, .5);
    }

    100%
    {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 15px rgba(127, 0, 255, .9), inset 0 0 10px rgba(255, 255, 255, .3);
    }
}

@keyframes pulseAvatarSuper
{
    0%
    {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 20px rgba(255, 0, 128, .9), 0 0 10px rgba(0, 255, 213, .7), inset 0 0 12px rgba(255, 255, 255, .5);
    }

    25%
    {
        transform: translateX(-50%) scale(1.08);
        box-shadow: 0 0 25px #ff0080, 0 0 15px rgba(0, 255, 213, .9), inset 0 0 15px rgba(255, 255, 255, .7);
    }

    50%
    {
        transform: translateX(-50%) scale(1.05);
        box-shadow: 0 0 22px rgba(255, 224, 0, .9), 0 0 12px rgba(0, 255, 133, .7), inset 0 0 14px rgba(255, 255, 255, .6);
    }

    75%
    {
        transform: translateX(-50%) scale(1.1);
        box-shadow: 0 0 28px #00ffd5, 0 0 18px rgba(127, 0, 255, .8), inset 0 0 16px rgba(255, 255, 255, .8);
    }

    100%
    {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 20px rgba(255, 0, 128, .9), 0 0 10px rgba(0, 255, 213, .7), inset 0 0 12px rgba(255, 255, 255, .5);
    }
}

@keyframes redFlow
{
    0%
    {
        background-position: 0% 50%;
    }

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

    100%
    {
        background-position: 0% 50%;
    }
}
 
Дек
95
13
Пользователь
а если все вставляюе куда надо но не работает
 
Ноя
1,878
5,936
Команда форума
Администратор
Дек
95
13
Пользователь
ну я еще раз попробовал я вставил в екстра и у меня все баннеры слетели
 
Сверху