Welcome!

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

SignUp Now!

Баннеры RUSSIA RP

Ноя
2,110
7,676
Команда форума
Администратор
Надеюсь, что максины не вставят вас в ступор. Код в шаблон extra.less
Less:
.m-groupBannerVariation(@color; @background; @border; @hoverBackground; @hoverBorder; @hoverShadow)
{
    color: @color;
    background: @background;
    border-color: @border;

    &:hover
    {
        background: @hoverBackground;
        border-color: @hoverBorder;
        box-shadow: @hoverShadow;
    }
}

.m-groupBanners(@rules)
{
    .gen_prok, .team_forum, .gl_admin, .rukovod, .fsb, .mvd, .rosgvardia, .vs_rf, .smi, .adm_prez, .verh_sud, .cgb, .team_project, .owner, .deputy_owner, .so_owner, .zga, .spec_admin, .gs_gos, .gs_pre, .gs_nel, .vzgs_gos, .vzgs_pre, .vzgs_nel, .admin, .adm, .verh_admin, .owner_helper, .global_admin, .io_owner, .ceo, .premium, .old, .user, .legend_goss, .legend_ghetto, .legend_mafia, .hitmans, .yakuza, .rus_maf, .owner_owner
    {
        @rules();
    }
}

.m-groupBanners({
    position: relative;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    gap: 9px;
    isolation: isolate;
    overflow: hidden;
    height: 36px;
    min-height: 36px;
    margin: 7px 0;
    padding: 4px 14px 4px 7px;
    border: 1px solid;
    border-radius: 5px;
    font-size: 11px;
    font-weight: @xf-fontWeightHeavy;
    letter-spacing: .45px;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: 0 3px 11px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .2), inset 0 -2px rgba(0, 0, 0, .35);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;

    &::before
    {
        content: "";
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex: 0 0 27px;
        width: 27px;
        min-width: 27px;
        max-width: 27px;
        height: 27px;
        margin: 0;
        font-family: "Segoe UI Symbol", "Segoe UI Emoji", Georgia, Arial, sans-serif;
        font-size: 22px;
        line-height: 27px;
        text-align: center;
        text-shadow: 0 1px 2px #000, 0 0 3px rgba(0, 0, 0, .8);
        transform-origin: center;
    }

    &::after
    {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        width: 30%;
        height: 100%;
        background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .08) 70%, transparent);
        opacity: 0;
        pointer-events: none;
        transform: translateX(-220%) skewX(-20deg);
    }

    &:hover
    {
        transform: translateY(-1px);

        &::after
        {
            animation: groupBannerShine 1.25s ease-out forwards;
        }
    }
});

.team_forum
{
    .m-groupBannerVariation(#f7f9fb; linear-gradient(90deg, #252b31 0 5px, transparent 5px), linear-gradient(135deg, #343b42, #858e95); #aeb7bd; linear-gradient(90deg, #303941 0 5px, transparent 5px), linear-gradient(135deg, #414a52, #a5afb5); #e1e8ec; 0 4px 17px rgba(130, 150, 165, .55));

    &::before
    {
        content: "⚙";
        color: #f5f7f8;
        font-family: "Segoe UI Symbol", Arial, sans-serif;
        font-size: 23px;
    }

    &:hover::before
    {
        animation: groupBannerGear .8s linear infinite;
    }
}

.gen_prok
{
    .m-groupBannerVariation(#fff8df; linear-gradient(90deg, #a7192e 0 5px, transparent 5px), linear-gradient(135deg, #071b32, #155d84); #c7a557; linear-gradient(90deg, #be1d32 0 5px, transparent 5px), linear-gradient(135deg, #0b2949, #2080ad); #f0ce72; 0 4px 17px rgba(0, 105, 165, .65));

    &::before
    {
        background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Emblem_of_the_Office_of_the_Prosecutor_General_of_Russia.svg/1280px-Emblem_of_the_Office_of_the_Prosecutor_General_of_Russia.svg.png") center / contain no-repeat;
        filter: drop-shadow(0 1px 1px #020b14) drop-shadow(0 0 2px rgba(255, 211, 105, .5));
    }

    &:hover::before
    {
        animation: groupBannerEmblemPulse 1.25s ease-in-out infinite;
    }
}

.gl_admin
{
    .m-groupBannerVariation(#effff3; linear-gradient(90deg, #0d2e20 0 5px, transparent 5px), linear-gradient(135deg, #123b28, #286b46); #6caf82; linear-gradient(90deg, #165334 0 5px, transparent 5px), linear-gradient(135deg, #195236, #35875a); #9ce0ad; 0 4px 14px rgba(0, 125, 55, .55));

    &::before
    {
        content: "♛";
        color: #d9ffe3;
        font-family: Georgia, serif;
        font-size: 24px;
    }

    &:hover::before
    {
        animation: groupBannerGreenCrown 1.1s ease-in-out infinite;
    }
}

.rukovod
{
    .m-groupBannerVariation(#fff1f3; linear-gradient(90deg, #4b0711 0 5px, transparent 5px), linear-gradient(135deg, #26070d, #4b0d18 52%, #741526); #9b3b49; linear-gradient(90deg, #760b1b 0 5px, transparent 5px), linear-gradient(135deg, #380912, #681323 52%, #9d243b); #df7180; 0 5px 18px rgba(125, 0, 20, .8));

    &::before
    {
        content: "🛡";
        color: #f4d27a;
        font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
        font-size: 22px;
    }

    &:hover::before
    {
        animation: groupBannerShield 1.1s ease-in-out infinite;
    }
}

.fsb
{
    .m-groupBannerVariation(#f5f8ff; linear-gradient(90deg, #a51e2b 0 5px, transparent 5px), linear-gradient(135deg, #071a32, #176895); #6e9fc6; linear-gradient(90deg, #c32635 0 5px, transparent 5px), linear-gradient(135deg, #0b2749, #2588b8); #a9d8f5; 0 4px 18px rgba(0, 105, 180, .65));

    &::before
    {
        background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/FSB_Emblem.png/960px-FSB_Emblem.png") center / contain no-repeat;
        filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px rgba(255, 211, 93, .5));
    }

    &:hover::before
    {
        animation: groupBannerEmblemPulse 1.25s ease-in-out infinite;
    }
}

.mvd
{
    .m-groupBannerVariation(#fff8dc; linear-gradient(90deg, #a7192e 0 5px, transparent 5px), linear-gradient(135deg, #07182b, #174d70); #c6a653; linear-gradient(90deg, #c5233d 0 5px, transparent 5px), linear-gradient(135deg, #0b2340, #216b94); #f0d77e; 0 5px 18px rgba(13, 93, 145, .65));

    &::before
    {
        background: url("https://upload.wikimedia.org/wikipedia/commons/1/19/MVD_Russia.png") center / 22px 22px no-repeat;
        border: 2px solid #e5c86d;
        border-radius: 50%;
        box-shadow: 0 0 0 1px #382b12, 0 1px 3px rgba(0, 0, 0, .8), inset 0 0 4px rgba(255, 255, 255, .55);
    }

    &:hover::before
    {
        animation: groupBannerMvdBadge 1.1s ease-in-out infinite;
    }
}

.rosgvardia
{
    .m-groupBannerVariation(#fff4f4; linear-gradient(90deg, #fff 0 5px, transparent 5px), linear-gradient(135deg, #710819, #d3213a); #f2c4c9; linear-gradient(90deg, #fff 0 5px, transparent 5px), linear-gradient(135deg, #920b22, #ee3a50); #fff; 0 5px 18px rgba(225, 20, 45, .7));

    &::before
    {
        background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/National_Guard_of_Russia_patch_01.svg/1280px-National_Guard_of_Russia_patch_01.svg.png") center / contain no-repeat;
        filter: drop-shadow(0 1px 2px #000);
    }
}

.vs_rf
{
    .m-groupBannerVariation(#f5ffe9; linear-gradient(90deg, #d8b85b 0 5px, transparent 5px), linear-gradient(135deg, #173d20, #527f38); #c7d58e; linear-gradient(90deg, #f5d979 0 5px, transparent 5px), linear-gradient(135deg, #245a2c, #6ca049); #f3e49a; 0 5px 18px rgba(80, 155, 55, .7));

    &::before
    {
        background: url("https://static.tildacdn.com/tild3366-3265-4163-a632-303264626363/IMG_7345.png") center / contain no-repeat;
        filter: drop-shadow(0 1px 2px #000);
    }
}

.smi
{
    .m-groupBannerVariation(#fff; linear-gradient(90deg, #fff 0 5px, transparent 5px), linear-gradient(115deg, #a70d2b, #c7193d 45%, #154d9d); #b9d2f2; linear-gradient(90deg, #fff 0 5px, transparent 5px), linear-gradient(115deg, #d31940, #e72a50 45%, #2878cc); #fff; 0 5px 18px rgba(55, 110, 220, .75));

    &::before
    {
        background: url("https://static.tildacdn.com/tild6338-6663-4566-b465-373365666664/_Vm1000.png") center / contain no-repeat;
        filter: drop-shadow(0 1px 2px #000);
    }
}

.adm_prez
{
    .m-groupBannerVariation(#f8fafb; linear-gradient(90deg, #c5cbd0 0 5px, transparent 5px), linear-gradient(135deg, #30363c, #737c84); #b5bdc3; linear-gradient(90deg, #eef2f4 0 5px, transparent 5px), linear-gradient(135deg, #444c54, #aab3ba); #f1f4f5; 0 5px 18px rgba(170, 185, 195, .65));

    &::before
    {
        background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Emblem_of_the_President_of_Russia.svg/1280px-Emblem_of_the_President_of_Russia.svg.png") center / contain no-repeat;
        filter: drop-shadow(0 1px 2px #000);
    }
}

.verh_sud
{
    .m-groupBannerVariation(#fff3ff; linear-gradient(90deg, #e0b8ef 0 5px, transparent 5px), linear-gradient(135deg, #351746, #75409b); #c99be0; linear-gradient(90deg, #f0d1ff 0 5px, transparent 5px), linear-gradient(135deg, #4b2263, #a15dcc); #f2d9ff; 0 5px 18px rgba(155, 75, 205, .7));

    &::before
    {
        background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Emblem_of_the_Judicial_Department.svg/1280px-Emblem_of_the_Judicial_Department.svg.png") center / contain no-repeat;
        filter: drop-shadow(0 1px 2px #000);
    }
}

.cgb
{
    .m-groupBannerVariation(#fff1fa; linear-gradient(90deg, #ffb9da 0 5px, transparent 5px), linear-gradient(135deg, #68234d, #c85f91); #f0a8c8; linear-gradient(90deg, #ffd0e6 0 5px, transparent 5px), linear-gradient(135deg, #873263, #eb83b2); #ffd8eb; 0 5px 18px rgba(220, 75, 145, .7));

    &::before
    {
        background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Emblem_of_Ministry_of_Health_of_Russia.svg/960px-Emblem_of_Ministry_of_Health_of_Russia.svg.png") center / contain no-repeat;
        filter: drop-shadow(0 1px 2px #000);
    }
}

.team_project, .owner
{
    .m-groupBannerVariation(#fff3f4; linear-gradient(90deg, #650b18 0 5px, transparent 5px), linear-gradient(135deg, #350912, #751725 52%, #b52d43); #c86472; linear-gradient(90deg, #8b1022 0 5px, transparent 5px), linear-gradient(135deg, #4d0c18, #9b2036 52%, #df4b61); #f19aa5; 0 5px 18px rgba(180, 15, 35, .7));
}

.team_project::before
{
    content: "⚙";
    color: #ffd8de;
}

.owner::before
{
    content: "♛";
    color: #ffe19a;
    font-family: Georgia, serif;
    font-size: 24px;
}

.deputy_owner
{
    .m-groupBannerVariation(#fff0f2; linear-gradient(90deg, #420710 0 5px, transparent 5px), linear-gradient(135deg, #28070d, #741727); #a74352; linear-gradient(90deg, #680b19 0 5px, transparent 5px), linear-gradient(135deg, #3d0a12, #9b2138); #df7886; 0 5px 18px rgba(145, 0, 25, .8));

    &::before
    {
        content: "♜";
        color: #f1c979;
        font-family: Georgia, serif;
        font-size: 24px;
    }
}

.so_owner
{
    .m-groupBannerVariation(#fff9df; linear-gradient(90deg, #80600e 0 5px, transparent 5px), linear-gradient(135deg, #503a0b, #a87c1c); #d8b95b; linear-gradient(90deg, #ad8018 0 5px, transparent 5px), linear-gradient(135deg, #6e500e, #ca9c31); #ffed9b; 0 5px 18px rgba(210, 155, 30, .75));

    &::before
    {
        content: "♚";
        color: #ffe292;
        font-family: Georgia, serif;
        font-size: 24px;
    }
}

.zga
{
    .m-groupBannerVariation(#edfff1; linear-gradient(90deg, #0b2d1c 0 5px, transparent 5px), linear-gradient(135deg, #102f20, #1e5635 52%, #36764d); #609a70; linear-gradient(90deg, #12442a 0 5px, transparent 5px), linear-gradient(135deg, #17442a, #2b7045 52%, #4d9863); #9ad8a8; 0 5px 18px rgba(0, 125, 55, .65));

    &::before
    {
        content: "🛡";
        color: #d8ffe1;
    }
}

.spec_admin, .global_admin
{
    .m-groupBannerVariation(#fff5f6; linear-gradient(90deg, #8f0015 0 5px, transparent 5px), linear-gradient(135deg, #4a0008 0%, #b00020 52%, #ed173b 100%); #ff526d; linear-gradient(90deg, #c40027 0 5px, transparent 5px), linear-gradient(135deg, #72000f 0%, #dc002e 52%, #ff3b5d 100%); #ff9aaa; 0 5px 18px rgba(220, 0, 35, .85), 0 0 8px rgba(255, 45, 75, .4));
    text-shadow: 0 1px 2px #2a0005, 0 0 3px rgba(255, 55, 80, .45);

    &:hover::before
    {
        filter: drop-shadow(0 0 5px rgba(255, 190, 200, .9)) drop-shadow(0 1px 2px #3a0008);
    }
}

.spec_admin::before
{
    content: "★";
    color: #ffd0d7;
}

.global_admin::before
{
    content: "✦";
    color: #ffc0ca;
}

.gs_gos, .gs_pre, .gs_nel
{
    .m-groupBannerVariation(#f4fff1; linear-gradient(90deg, #5f9f59 0 5px, transparent 5px), linear-gradient(135deg, #477b45, #76ad64 52%, #a4d47b); #c0e4a8; linear-gradient(90deg, #78bb6d 0 5px, transparent 5px), linear-gradient(135deg, #5b974f, #91c973 52%, #c0eb92); #e0ffd0; 0 5px 18px rgba(105, 190, 80, .65));
    text-shadow: 0 1px 2px #294a28;
}

.gs_gos::before
{
    content: "🏛";
    color: #efffdd;
}

.gs_pre::before
{
    content: "☠";
    color: #fff1bd;
}

.gs_nel::before
{
    content: "⚠";
    color: #fff3a8;
}

.vzgs_gos, .vzgs_pre, .vzgs_nel
{
    .m-groupBannerVariation(#fff8e9; linear-gradient(90deg, #a64a0c 0 5px, transparent 5px), linear-gradient(135deg, #71310b, #b86116 52%, #dc8a2c); #eab56b; linear-gradient(90deg, #cc6815 0 5px, transparent 5px), linear-gradient(135deg, #91400d, #d8791c 52%, #f2ae4d); #ffe0a1; 0 5px 18px rgba(220, 120, 25, .7));
}

.vzgs_gos::before
{
    content: "🏛";
    color: #fff0bc;
}

.vzgs_pre::before
{
    content: "☠";
    color: #ffe0a0;
}

.vzgs_nel::before
{
    content: "⚠";
    color: #ffe5a6;
}

.admin, .adm
{
    .m-groupBannerVariation(#fff8d8; linear-gradient(90deg, #f0bd3f 0 5px, transparent 5px), linear-gradient(135deg, #29200b, #725514 52%, #c19128); #f0ce68; linear-gradient(90deg, #ffe28a 0 5px, transparent 5px), linear-gradient(135deg, #4b370d, #a4771c 52%, #e0b447); #fff1a9; 0 5px 20px rgba(235, 175, 35, .8), inset 0 1px rgba(255, 255, 255, .45), inset 0 -2px rgba(0, 0, 0, .3));
    text-shadow: 0 1px 2px #302000, 0 0 1px #1b1200;
    box-shadow: 0 3px 11px rgba(90, 55, 0, .65), inset 0 1px rgba(255, 245, 180, .3), inset 0 -2px rgba(0, 0, 0, .4);

    &::before
    {
        content: "⚙";
        color: #ffe69a;
        font-family: "Segoe UI Symbol", Arial, sans-serif;
        font-size: 23px;
    }

    &:hover::before
    {
        animation: groupBannerGear .8s linear infinite;
    }
}

.verh_admin
{
    .m-groupBannerVariation(#effff2; linear-gradient(90deg, #174c2c 0 5px, transparent 5px), linear-gradient(135deg, #1d5b35, #43945b); #8bd49a; linear-gradient(90deg, #236b3b 0 5px, transparent 5px), linear-gradient(135deg, #2a7845, #63b877); #b9f2c3; 0 5px 18px rgba(40, 165, 80, .7));

    &::before
    {
        content: "♛";
        color: #d9ffe0;
        font-family: Georgia, serif;
        font-size: 24px;
    }
}

.owner_helper
{
    .m-groupBannerVariation(#e9fff0; linear-gradient(90deg, #092416 0 5px, transparent 5px), linear-gradient(135deg, #0c281a, #1d5132); #4e8d64; linear-gradient(90deg, #103b23 0 5px, transparent 5px), linear-gradient(135deg, #143b25, #2c7147); #83c995; 0 5px 18px rgba(0, 105, 50, .7));

    &::before
    {
        content: "⚜";
        color: #bff0ca;
    }
}

.io_owner, .ceo
{
    .m-groupBannerVariation(#fff9df; linear-gradient(90deg, #8b6410 0 5px, transparent 5px), linear-gradient(135deg, #5a410c, #b18424); #e5c766; linear-gradient(90deg, #b78519 0 5px, transparent 5px), linear-gradient(135deg, #775510, #d1a13a); #fff0a5; 0 5px 18px rgba(220, 165, 35, .75));
    text-shadow: 0 1px 2px #3d2804;
}

.io_owner::before
{
    content: "⌛";
    color: #ffe9a0;
}

.ceo::before
{
    content: "★";
    color: #fff0a4;
}

.premium
{
    .m-groupBannerVariation(#fff9dc; linear-gradient(90deg, #9b7014 0 5px, transparent 5px), linear-gradient(135deg, #62470c, #a97d1f 52%, #d3a63f); #efd276; linear-gradient(90deg, #c09120 0 5px, transparent 5px), linear-gradient(135deg, #806013, #c29631 52%, #edc75d); #fff3ad; 0 5px 18px rgba(225, 175, 45, .8));

    &::before
    {
        content: "♛";
        color: #fff0a4;
        font-family: Georgia, serif;
        font-size: 25px;
    }
}

.old
{
    .m-groupBannerVariation(#f8efff; linear-gradient(90deg, #57247d 0 5px, transparent 5px), linear-gradient(135deg, #291238, #603184 52%, #8d55ad); #c59bdf; linear-gradient(90deg, #7433a2 0 5px, transparent 5px), linear-gradient(135deg, #3b1850, #7841a0 52%, #ae70cd); #ead3ff; 0 5px 18px rgba(145, 70, 205, .75));

    &::before
    {
        content: "✦";
        color: #edcfff;
    }
}

.user
{
    .m-groupBannerVariation(#f1f3f5; linear-gradient(90deg, #454b51 0 5px, transparent 5px), linear-gradient(135deg, #30363c, #626b73 52%, #89939b); #adb7be; linear-gradient(90deg, #606970 0 5px, transparent 5px), linear-gradient(135deg, #444c54, #7d8992 52%, #aeb8bf); #edf2f5; 0 5px 18px rgba(145, 160, 170, .65));

    &::before
    {
        content: "♟";
        color: #e3e7ea;
    }
}

.legend_goss
{
    .m-groupBannerVariation(#edf7ff; linear-gradient(90deg, #1d6095 0 5px, transparent 5px), linear-gradient(135deg, #103657, #216d9f 52%, #4398c9); #8dcaeb; linear-gradient(90deg, #287fba 0 5px, transparent 5px), linear-gradient(135deg, #174b76, #2d86bd 52%, #62b4df); #c4ecff; 0 5px 18px rgba(35, 145, 215, .75));

    &::before
    {
        content: "🏛";
        color: #d9f2ff;
    }
}

.legend_ghetto
{
    .m-groupBannerVariation(#edfff0; linear-gradient(90deg, #247244 0 5px, transparent 5px), linear-gradient(135deg, #123a25, #287348 52%, #4c9b62); #8ed09a; linear-gradient(90deg, #35945a 0 5px, transparent 5px), linear-gradient(135deg, #195332, #358957 52%, #65ba78); #bff4c7; 0 5px 18px rgba(40, 160, 80, .7));

    &::before
    {
        content: "★";
        color: #d9ffd1;
    }
}

.legend_mafia
{
    .m-groupBannerVariation(#fff3e7; linear-gradient(90deg, #754021 0 5px, transparent 5px), linear-gradient(135deg, #3b2114, #70401f 52%, #a76b35); #d4a171; linear-gradient(90deg, #96552c 0 5px, transparent 5px), linear-gradient(135deg, #512b18, #8d5328 52%, #c18447); #f0c99b; 0 5px 18px rgba(160, 85, 35, .7));

    &::before
    {
        content: "♠";
        color: #f4d2a1;
        font-family: Georgia, serif;
        font-size: 24px;
    }
}

.hitmans
{
    .m-groupBannerVariation(#f5f6f7; linear-gradient(90deg, #252a2f 0 5px, transparent 5px), linear-gradient(135deg, #353b41, #626b73 52%, #89939b); #aeb8bf; linear-gradient(90deg, #414951 0 5px, transparent 5px), linear-gradient(135deg, #4b535b, #7d878f 52%, #adb7be); #edf2f5; 0 5px 18px rgba(145, 160, 170, .7));

    &::before
    {
        content: "🎯";
        color: #f0f2f4;
    }
}

.yakuza
{
    .m-groupBannerVariation(#fff1f2; linear-gradient(90deg, #610914 0 5px, transparent 5px), linear-gradient(135deg, #30070d, #781927 52%, #b83245); #d36b77; linear-gradient(90deg, #850d1c 0 5px, transparent 5px), linear-gradient(135deg, #470a12, #a52338 52%, #df4d62); #f3a0a9; 0 5px 18px rgba(180, 15, 35, .75));

    &::before
    {
        content: "⛩";
        color: #ffe0a5;
        font-size: 23px;
    }
}

.rus_maf
{
    .m-groupBannerVariation(#f3f4f5; linear-gradient(90deg, #24282c 0 5px, transparent 5px), linear-gradient(135deg, #30353a, #5e666d 52%, #818b93); #aab4bb; linear-gradient(90deg, #3f464c 0 5px, transparent 5px), linear-gradient(135deg, #454d54, #747e86 52%, #a1abb2); #edf2f5; 0 5px 18px rgba(135, 150, 160, .7));

    &::before
    {
        content: "♠";
        color: #e2e5e8;
        font-family: Georgia, serif;
        font-size: 25px;
    }
}

.owner_owner
{
    .m-groupBannerVariation(#fff0f2; linear-gradient(90deg, #3b060e 0 5px, transparent 5px), linear-gradient(135deg, #21060b 0%, #4d0d18 52%, #711526 100%); #a54150; linear-gradient(90deg, #620914 0 5px, transparent 5px), linear-gradient(135deg, #320811 0%, #681323 52%, #98213a 100%); #df7180; 0 5px 19px rgba(135, 0, 25, .85), 0 0 0 1px rgba(255, 125, 140, .18), inset 0 1px rgba(255, 235, 238, .3), inset 0 -2px rgba(0, 0, 0, .35));
    box-shadow: 0 3px 11px rgba(55, 0, 10, .7), inset 0 1px rgba(255, 220, 225, .2), inset 0 -2px rgba(0, 0, 0, .4);
    text-shadow: 0 1px 2px #170206, 0 0 1px #000;

    &::before
    {
        content: "♔";
        color: #f6d17a;
        font-family: Georgia, serif;
        font-size: 25px;
    }

    &::after
    {
        background: linear-gradient(105deg, transparent, rgba(255, 241, 241, .08) 30%, rgba(255, 255, 255, .95) 50%, rgba(255, 241, 241, .08) 70%, transparent);
    }

    &:hover::before
    {
        animation: groupBannerOwnerCrown 1.1s ease-in-out infinite;
    }
}

.message--post .message-cell--user
{
    .m-groupBanners({
        display: flex;
        width: 100%;
        height: auto;
        min-height: 36px;
        padding: 5px 40px;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.1;
        overflow-wrap: anywhere;
        word-break: normal;
        text-wrap: balance;

        &::before
        {
            position: absolute;
            top: 50%;
            left: 7px;
            margin: 0;
            transform: translateY(-50%);
            z-index: 3;
        }
    });
}

.memberTooltip
{
    .m-groupBanners({
        display: flex;
        width: 100%;
        height: auto;
        min-height: 36px;
        max-height: none;
        padding: 5px 40px;
        justify-content: center;
        text-align: center;
        white-space: normal;
        line-height: 1.15;
        overflow-wrap: anywhere;
        word-break: normal;
        text-wrap: balance;

        &::before
        {
            position: absolute;
            top: 50%;
            left: 7px;
            margin: 0;
            transform: translateY(-50%);
            z-index: 3;
        }
    });
}

.message--post .message-cell--user, .memberTooltip
{
    .team_forum:hover::before, .admin:hover::before, .adm:hover::before
    {
        animation-name: groupBannerGearCentered;
    }

    .gen_prok:hover::before, .fsb:hover::before
    {
        animation-name: groupBannerEmblemPulseCentered;
    }

    .gl_admin:hover::before
    {
        animation-name: groupBannerGreenCrownCentered;
    }

    .rukovod:hover::before
    {
        animation-name: groupBannerShieldCentered;
    }

    .mvd:hover::before
    {
        animation-name: groupBannerMvdBadgeCentered;
    }

    .owner_owner:hover::before
    {
        animation-name: groupBannerOwnerCrownCentered;
    }
}

@media (max-width: @xf-responsiveMedium)
{
    .m-groupBanners({
        max-width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        padding-right: 10px;
        gap: 7px;
        font-size: 10px;
        letter-spacing: .25px;
    });
}

@media (max-width: @xf-responsiveNarrow)
{
    .m-groupBanners({
        gap: 5px;
        padding-left: 5px;
        padding-right: 8px;
        font-size: 9px;
        letter-spacing: .15px;

        &::before
        {
            flex-basis: 25px;
            width: 25px;
            min-width: 25px;
            max-width: 25px;
            height: 25px;
            font-size: 20px;
            line-height: 25px;
        }
    });

    .message--post .message-cell--user, .memberTooltip
    {
        .m-groupBanners({
            padding-left: 35px;
            padding-right: 35px;
            font-size: 10px;
            letter-spacing: .2px;

            &::before
            {
                left: 5px;
                width: 25px;
                min-width: 25px;
                max-width: 25px;
                height: 25px;
            }
        });
    }
}

@keyframes groupBannerShine
{
    0%
    {
        opacity: 0;
        transform: translateX(-220%) skewX(-20deg);
    }

    20%
    {
        opacity: .9;
    }

    100%
    {
        opacity: 0;
        transform: translateX(430%) skewX(-20deg);
    }
}

@keyframes groupBannerGear
{
    from
    {
        transform: rotate(0deg);
    }
    
    to
    {
        transform: rotate(360deg);
    }
}

@keyframes groupBannerGearCentered
{
    from
    {
        transform: translateY(-50%) rotate(0deg);
    }
    
    to
    {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes groupBannerEmblemPulse
{
    0%, 100%
    {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 1px 2px #000);
    }

    35%
    {
        transform: scale(1.08) rotate(-4deg);
    }

    55%
    {
        transform: scale(1.15) rotate(0deg);
        filter: drop-shadow(0 0 7px rgba(255, 225, 130, .95)) drop-shadow(0 1px 2px #000);
    }

    75%
    {
        transform: scale(1.06) rotate(4deg);
    }
}

@keyframes groupBannerEmblemPulseCentered
{
    0%, 100%
    {
        transform: translateY(-50%) scale(1) rotate(0deg);
        filter: drop-shadow(0 1px 2px #000);
    }

    35%
    {
        transform: translateY(-50%) scale(1.08) rotate(-4deg);
    }

    55%
    {
        transform: translateY(-50%) scale(1.15) rotate(0deg);
        filter: drop-shadow(0 0 7px rgba(255, 225, 130, .95)) drop-shadow(0 1px 2px #000);
    }

    75%
    {
        transform: translateY(-50%) scale(1.06) rotate(4deg);
    }
}

@keyframes groupBannerGreenCrown
{
    0%, 100%
    {
        color: #d9ffe3;
        transform: rotate(0deg) scale(1);
    }

    35%
    {
        transform: rotate(-8deg) scale(1.12);
    }

    70%
    {
        color: #fff;
        transform: rotate(8deg) scale(1.06);
        filter: drop-shadow(0 0 5px rgba(177, 255, 194, .9));
    }
}

@keyframes groupBannerGreenCrownCentered
{
    0%, 100%
    {
        color: #d9ffe3;
        transform: translateY(-50%) rotate(0deg) scale(1);
    }

    35%
    {
        transform: translateY(-50%) rotate(-8deg) scale(1.12);
    }

    70%
    {
        color: #fff;
        transform: translateY(-50%) rotate(8deg) scale(1.06);
        filter: drop-shadow(0 0 5px rgba(177, 255, 194, .9));
    }
}

@keyframes groupBannerShield
{
    0%, 100%
    {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
    }

    40%
    {
        transform: scale(1.1) rotate(-4deg);
    }

    60%
    {
        color: #ffe6a0;
        transform: scale(1.14) rotate(0deg);
        filter: drop-shadow(0 0 7px rgba(255, 207, 104, .9)) drop-shadow(0 1px 2px #000);
    }

    80%
    {
        transform: scale(1.06) rotate(4deg);
    }
}

@keyframes groupBannerShieldCentered
{
    0%, 100%
    {
        transform: translateY(-50%) scale(1) rotate(0deg);
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
    }

    40%
    {
        transform: translateY(-50%) scale(1.1) rotate(-4deg);
    }

    60%
    {
        color: #ffe6a0;
        transform: translateY(-50%) scale(1.14) rotate(0deg);
        filter: drop-shadow(0 0 7px rgba(255, 207, 104, .9)) drop-shadow(0 1px 2px #000);
    }

    80%
    {
        transform: translateY(-50%) scale(1.06) rotate(4deg);
    }
}

@keyframes groupBannerMvdBadge
{
    0%, 100%
    {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) drop-shadow(0 1px 2px #000);
    }

    35%
    {
        transform: scale(1.08) rotate(-4deg);
    }

    55%
    {
        transform: scale(1.15) rotate(0deg);
        filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 221, 113, .95)) drop-shadow(0 1px 2px #000);
    }

    75%
    {
        transform: scale(1.06) rotate(4deg);
    }
}

@keyframes groupBannerMvdBadgeCentered
{
    0%, 100%
    {
        transform: translateY(-50%) scale(1) rotate(0deg);
        filter: brightness(1) drop-shadow(0 1px 2px #000);
    }

    35%
    {
        transform: translateY(-50%) scale(1.08) rotate(-4deg);
    }

    55%
    {
        transform: translateY(-50%) scale(1.15) rotate(0deg);
        filter: brightness(1.18) drop-shadow(0 0 6px rgba(255, 221, 113, .95)) drop-shadow(0 1px 2px #000);
    }

    75%
    {
        transform: translateY(-50%) scale(1.06) rotate(4deg);
    }
}

@keyframes groupBannerOwnerCrown
{
    0%, 100%
    {
        color: #f6d17a;
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 1px 2px #000);
    }

    35%
    {
        transform: scale(1.1) rotate(-5deg);
    }

    55%
    {
        color: #fff0a4;
        transform: scale(1.16) rotate(0deg);
        filter: drop-shadow(0 0 7px rgba(255, 215, 110, .95)) drop-shadow(0 1px 2px #000);
    }

    75%
    {
        transform: scale(1.06) rotate(5deg);
    }
}

@keyframes groupBannerOwnerCrownCentered
{
    0%, 100%
    {
        color: #f6d17a;
        transform: translateY(-50%) scale(1) rotate(0deg);
        filter: drop-shadow(0 1px 2px #000);
    }

    35%
    {
        transform: translateY(-50%) scale(1.1) rotate(-5deg);
    }

    55%
    {
        color: #fff0a4;
        transform: translateY(-50%) scale(1.16) rotate(0deg);
        filter: drop-shadow(0 0 7px rgba(255, 215, 110, .95)) drop-shadow(0 1px 2px #000);
    }

    75%
    {
        transform: translateY(-50%) scale(1.06) rotate(5deg);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .m-groupBanners({
        transition: none;

        &::before, &::after
        {
            animation: none !important;
        }

        &:hover
        {
            transform: none;
        }
    });
}
 

Вложения

  • 1789762524794.png
    1789762524794.png
    164.4 KB · Просмотры: 14
Сверху