By registering with us, you'll be able to discuss, share and private message with other members of our community.
SignUp Now!.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;
}
});
}