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

Сен
1
-1
Пользователь
3.1.1. Запрещено формулировать названия тем в требовательной форме (например, «Дайте…», «Сделайте…»).
плиз дайте
 
Ноя
131
29
Пользователь
exstra.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;
        }
    });
}

Автор; @Kolpak
 
Сверху