:root {
--group-gradient: linear-gradient(to right, #562f2d 0, #8f1515 22%, #974049 45%, #9d3f47 50%, #9b2e2e 55%, #7e2d34 78%, #561410 100%);
--group-bg: #19161a url(https://i.ibb.co/C1v6G7F/test.webp);
--group-logo: url(https://i.ibb.co/KrpRNLh/Hazbin-Logo.webp);
--group-border: #2a1519;
--group-inner: url(/imgs/noisy.png) top center repeat transparent;
--group-inner-color: #1a1a1aab;
--group-color-0: transparent;
--group-color-1: #0e0c0d;
--group-color-2: #c1bc9d;
--group-color-3: #656385;
--group-color-4: #110f10;
--group-color-5: #3e1e22;
--group-color-6: #a2a999;
--group-color-7: #b1353a;
--group-color-8: #0e0e0f6b;
--group-color-9: #141313c7;
--group-color-10: #6e685d;
--group-color-11: #1a1313c7;
--group-color-12: #0b0d0e;
--group-color-13: #0e0d0f;
--group-color-14: #d1d1d1;
--group-color-15: #c7c7c7;
--group-color-16: #1f1f21;
--group-color-17: #8b8599;
--group-color-18: #938b7b;
--group-color-19: #50242c;
--group-color-20: #b3b1ac;
}
/*Фон*/
html::before {
position: fixed;
background: var(--group-bg);
background-size: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
border-bottom: none;
content: ㅤ;
}
body::before{
position: fixed;
top: 0;
right: 0;
left: 0;
height: 350px;
background-size: cover !important;
background: url(https://i.ibb.co/80fpJqK/ewe.webp) no-repeat top center;
border-bottom: 20px solid #2a1519 !important;
border-top: 5px solid #2a1519 !important;
z-index: 1;
content: ㅤ;
}
/*Тело форума*/
.p-body {
padding: 50px 50px 50px 0px;
margin-top: 280px;
background: var(--group-inner);
border: solid 10px var(--group-border);
background-color: var(--group-color-1) !important;
border-radius: 0px;
}
.p-body-inner {border: 1px solid var(--group-border); background: var(--group-inner-color);}
.block-footer {padding: 0;}
/*Шапка форума*/
.groupCoverFrame.groupCoverFrame--setup {display: none;}
.p-header {
z-index: 1 !important;
position: absolute !important;
margin: 0 auto;
color: transparent;
top: 50px;
border-bottom: none;
height: 300px !important;
background-color: transparent !important;
background: var(--group-logo) no-repeat 50%;
}
/*Навигация*/
.userbar, .p-staffBar {
background-color: var(--group-color-1) !important;
background: var(--group-inner);
border-bottom: 1px solid var(--group-border);
color: var(--group-color-7);
}
.p-navgroup-link.badgeContainer, .p-navgroup-link.p-navgroup-link--iconic i:after, .p-navgroup-link.badgeContainer.badgeContainer--highlighted{
opacity: .7 !important;
color: transparent;
letter-spacing: 1px;
background-image: var(--group-gradient) !important;
-webkit-background-clip: text;}
.p-nav-opposite { z-index: 2;
background: var(--group-inner);
border: solid 4px var(--group-border);
background-color: var(--group-color-1) !important;
border-top: none;
border-radius: 0 0px 20px 20px;}
.p-nav-list .p-navEl {color: transparent !important; opacity: .7; background-image: var(--group-gradient); -webkit-background-clip: text;}
.p-nav-list .p-navEl-splitTrigger, .p-nav-list .p-navEl.is-selected, .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen):hover, .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen) .p-navEl-link:hover, .p-nav-list .p-navEl:not(.is-selected):not(.is-menuOpen) .p-navEl-splitTrigger:hover {color: transparent !important; opacity: 1; background-image: var(--group-gradient);}
.groupCover-header .listPlain {margin-top: 362px; padding-left: 10px; top: 0; left: 0; position: absolute;}
.groupViewNav .groupViewNav--item a {
background: var(--group-color-5);
border: 2px solid var(--group-border) !important;
margin-right: 3px;
padding: 5px;
color: var(--group-color-6);
font-family: Constantine;
font-size: 0.9em;
}
.groupViewNav .groupViewNav--item a:hover {color: var(--group-color-7) !important;}
.groupViewNav--item:hover, .groupViewNav--item.is-active { background-color: transparent;}
.p-breadcrumbs--container { z-index: 9; margin-top: 0px;}
.p-breadcrumbs li a, .p-breadcrumbs li:last-child a { color: var(--group-color-6) ; margin-right: 10px;}
.p-breadcrumbs li a:hover, .p-breadcrumbs li:last-child a:hover { color: var(--group-color-7) ;}
.p-breadcrumbs li:after { display: none;}
/*Кнопки*/
.groupHeader-navList .groupHeader-navList--user { margin-left: -15px;}
.button.button--cta, a.button.button--cta, .button.button--link, a.button.button--link, .button.button--primary, a.button.button--primary, .button.button--scroll, a.button.button--scroll, .button.button--link:hover, a.button.button--link:hover, .button.button--link:active, a.button.button--link:active, .button.button--link:focus, a.button.button--link:focus .button, a.button, .inlineModBar .button{
border-radius: 0;
background: var(--group-color-5);
border: 1px solid var(--group-border) !important;
margin-right: 1px;
padding: 5px;
color: var(--group-color-6);
font-family: Constantine;
font-size: 0.7em;
}
.p-body-sideNavContent .pairs a:hover, .pairs a:hover, a:hover {
color: var(--group-color-7) !important;
}
.template-tlg_group_discussions .block-outer {margin-top: -82px;float: right;}
.h-dFlex { margin-top: -30px;}
.js-quickThreadFields .structItem.structItem--quickCreate, .block-container, .structItem.structItem--quickCreate, .structItemContainer-group:not(.structItemContainer-group--sticky) {background: transparent; border: none;}
.template-forum_list .p-body-inner, .p-body-inner {padding-left: 15px !important;padding-right: 15px !important;}
/*Форумы и темы*/
.shareButtons-label, .p-description, .p-staffBar, .p-footer .p-footer-copyright, .p-title h1.p-title-value {display: none;}
.p-title h2.p-title-value { font-size: 1.1em !important;
margin: 0 auto;
text-align: center !important;
color: transparent !important;
background-image: var(--group-gradient) !important;
-webkit-background-clip: text;text-shadow: none !important;}
.p-body-pageContent .block-container, .p-body-sideNavContent .block-container {
color: var(--group-color-6);
border-radius: 0;
background: transparent;
padding: 5px;
box-shadow: none;
border: none;
}
.node--depth1 .node-body, .node--depth1 .block-body .node-body:hover {outline: none;outline-offset: 0;}
.node-extra {display: block;
width: 100%;
background: var(--group-color-9);
padding: 10px;
border-top: 1px solid var(--group-color-4);
font-size: 13px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;}
.node-statsMeta dt.pairs, .node-statsMeta dt.pairs i{color: var(--group-color-6);}
.node-icon i {display: block; width: 50px; height: 50px; line-height: 100%; font-size: 42px; background: transparent; color: var(--group-color-10); border-radius: 6px; margin: 0 auto; margin-top: 0; margin-right: 0;}
.node-title {text-align: center; border-bottom: solid 1px var(--group-color-4); font-family: Constantine; margin-top: -20px;}
.node--depth1 .node-title {font-size: 1.4em !important; text-transform: uppercase;}
.node-extra-row {opacity: 0.8; color: var(--group-color-6);}
.listInline a {color: var(--group-color-6); text-decoration: none;}
.node-extra a {opacity: 0.6; color: var(--group-color-7) !important; font-family: Constantine;}
.node-extra a: hover {color: var(--group-color-6) !important; opacity: 1; }
.message-attribution {border-bottom: 0px solid;}
.node--depth1 .node--newIndicator {display: none !important;}
.node--depth2 .node--newIndicator, .node--newIndicator, .structItem.is-unread .structItem-title a:not(.labelLink):after {font-size: 8px;color:var(--group-color-7); background: transparent;vertical-align: middle;padding-left: 0;}
.node--unread .node-icon i{background: transparent;color:var(--group-color-7);}
.template-tlg_group_discussions .node--depth2 .node-body {
margin-top: -2px;
}
.node-body, .block-body .node-body:hover {
border-radius: 0px;
background: var(--group-color-11);
border: solid 1px var(--group-border);
}
.node-title a, .node-title a:hover {
color: transparent !important;
background-image: var(--group-gradient);
-webkit-background-clip: text;
font-weight: 100;
font-size:1em;
text-align: right;
text-shadow: 1px 1px 2px #0000002e;
}
.node-icon { margin-top: -1px;}
.pairs dt, .node-statsMeta .pairs dt i, .node-description {color: var(--group-color-6) !important;}
.node-subNodeMenu {display: flex;float: right;margin-top: -30px;}
.node-subNodeMenu .menuTrigger {color: var(--group-color-6);}
.js-quickThreadFields .structItem.structItem--quickCreate, .block-container, .structItem.structItem--quickCreate, .structItemContainer-group:not(.structItemContainer-group--sticky){color: var(--group-color-6);}
.structItem-title a, .structItem-cell--latest a, .structItem-minor a, .structItem-minor, .pairs dt, .pairs dd, .structItem-minor {color: var(--group-color-6);}
.structItem.structItem--thread:hover {background: var(--group-color-8);}
.block-minorHeader a, .block-minorHeader {color: var(--group-color-6); border-bottom: 1px solid var(--group-border); font-size: 12px;}
.stickyItemContainer.stickyItemContainer-sticky .structItem {box-shadow: none;border: 1px solid var(--group-border);}
/*Оверлей*/
.overlay {padding: 0px; color: var(--group-color-6) !important; margin-right: auto; width: 100%; max-width: 1000px; border-radius: 0px; background: var(--group-color-11); border: solid 1px var(--group-border) !important;}
.overlay .block-container { background: var(--group-color-11); color: var(--group-color-6) !important;}
.overlay-title {color: var(--group-color-6); background: var(--group-color-0); border-bottom: solid 1px var(--group-border);}
.overlay-titleCloser {color: var(--group-color-6);}
.formSubmitRow-bar {background: var(--group-color-0); border-top: 1px solid var(--group-border);}
.formRow dt {border-color: var(--group-border);}
.formRowSep {border-top: 1px solid var(--group-border);}
.formRow .iconic i, .inputChoices .iconic i{color: var(--group-color-6);}
.formRow .iconic i:hover, .inputChoices .iconic i:hover, .inputChoices .iconic:hover i, .inputChoices .iconic:hover i{color: var(--group-color-7);}
.block--messages .message, .block--messages .block-row {
color: var(--group-color-13);
background: var(--group-color-14);
border-radius: 0px;
border: 1px solid var(--group-border) !important;
box-shadow: inset 1px 1px 10px #000 !important;
}
.message-cell .message-cell--main .is-editing, .formRow .formRow-explain, .inputChoices{color: var(--group-color-18);}
.blockStatus {
color: var(--group-color-6);
background: var(--group-color-4);
border: 1px solid var(--group-border);
border-left: 1px solid var(--group-border);
}
.bbCodeInline {color: var(--group-color-2); background: var(--group-color-4);}
/*Инпуты и форма ответа*/
.input, .input:focus, .input.is-focused, .inputGroup.inputGroup--joined .inputGroup-text, .inputGroup.inputGroup--joined .input+.inputGroup-text, .inputGroup.inputGroup--joined .input+.input, .inputGroup.inputGroup--joined .inputGroup-text+.input {
font-size: 12px !important;
color: var(--group-color-6);
background:var(--group-color-13)!important;
border: solid 1px var(--group-border) !important;
border-radius: 0;
padding: 3px;
}
/*Форма ответа*/
.fr-box.fr-basic .fr-element, .fr-box.fr-basic.is-focused .fr-element, .fr-box .fr-counter {color: var(--group-color-12); background: var(--group-color-14) !important;}
.fr-box.fr-basic .fr-toolbar.fr-top {border: solid 1px var(--group-border); border-color: var(--group-border); border-radius: 0px;}
.fr-box.fr-basic .fr-wrapper {background: var(--group-color-14); border: solid 1px var(--group-border); border-color: var(--group-border);}
.fr-box.bbWrapper.fr-basic.is-focused {background: transparent;}
.fr-toolbar .fr-btn-grp, .fr-toolbar .fr-btn-grp.is-focused {background: var(--group-color-12);}
.fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn, .fr-modal .fr-command.fr-btn {color: var(--group-color-7);}
.fr-toolbar .fr-command.fr-btn.fr-dropdown:after, .fr-popup .fr-command.fr-btn.fr-dropdown:after, .fr-modal .fr-command.fr-btn.fr-dropdown:after{border-top: 4px solid var(--group-border);}
.fr-box .fr-counter, .js-quickThreadFields .fr-box .fr-counter {border: 1px solid var(--group-border);}
.fr-toolbar .fr-btn-grp, .fr-toolbar .fr-btn-grp.is-focused {background: var(--group-color-13); border: 0px solid var(--group-border);}
.fr-dropdown-menu {background: var(--group-color-13); color: var(--group-color-6);}
.fr-toolbar .fr-command.fr-btn.fr-active:not(.fr-disabled), .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:hover {color: var(--group-color-2); background: var(--group-color-4);}
.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li.klEMTemplateGroupTitle, .fr-toolbar .fr-command.fr-btn.fr-disabled, .fr-popup .fr-command.fr-btn.fr-disabled, .fr-modal .fr-command.fr-btn.fr-disabled {color: var(--group-color-2);}
.fr-dropdown-content a {color: var(--group-color-6) !important; text-decoration: none;}
.fr-popup, .fr-command.fr-btn+.fr-dropdown-menu {color: var(--group-color-7); background: var(--group-color-13);}
.fr-toolbar .fr-more-toolbar {background: var(--group-color-12);color: var(--group-color-2);}
.fr-desktop .fr-command:hover:not(.fr-table-cell), .fr-desktop .fr-command:focus:not(.fr-table-cell), .fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell), .fr-desktop .fr-command.fr-expanded:not(.fr-table-cell), .fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active{background: var(--group-color-4);}
.fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active) {background: var(--group-color-4);}
.fr-box.fr-basic.is-preview, .fr-box.fr-basic.is-preview .fr-toolbar .fr-btn-grp.rte-tab--preview, .fr-box.fr-basic.is-focused {background: var(--group-color-14);color: var(--group-color-12);}
.fr-toolbar .fr-btn-grp.rte-tab--preview .fr-command.fr-btn:hover, .fr-toolbar .fr-btn-grp.rte-tab--preview .fr-command.fr-btn .fr-active {background: var(--group-color-4);}
::-webkit-scrollbar-track {background: var(--group-color-12) !important;}
::-webkit-scrollbar-thumb {background: var(--group-color-7) !important; border-radius: 1px;}
::-webkit-scrollbar {width: 4px !important;}
/*Менюшка*/
.menu-content {
font-size: 11px;
font-family: Constantine;
padding: 3px;
border-radius: 0px;
border-color: var(--group-border);
border: 1px solid var(--group-border) !important;
color: var(--group-color-6);
background: var(--group-color-12);
}
.menu-header, .menu-footer.menu-footer--split {
color: var(--group-color-7);
background: var(--group-color-9);
border-radius: 0px;
font-size: 12px;
}
.message-newIndicator, a.message-newIndicator {
font-size: 90%;
color: var(--group-color-6);
background: var(--group-color-5);
border: 1px solid var(--group-border);
}
.menu-linkRow { color: var(--group-color-6);}
.menu-linkRow.is-selected, .menu-linkRow:hover, .menu-linkRow:focus {
color: var(--group-color-6);
text-decoration: none;
background: var(--group-color-9);
}
.button.button--plain, a.button.button--plain { display: none;}
.menu-separator, .menu-row.menu-row--separated, .menu-footer, .formRow.formRow--fullWidth{border-top: 1px solid var(--group-border) !important;}
.subNodeMenu .subNodeLink, .subNodeLink:before, .subNodeLink .subNodeLink-icon {color: var(--group-color-6);}
.subNodeMenu .subNodeLink:hover {background: var(--group-color-9);}
.block-filterBar .filterBar-filterToggle, .block-filterBar .filterBar-menuTrigger, .block-filterBar .filterBar-filterToggle:hover, .block-filterBar .filterBar-menuTrigger:hover {
color: var(--group-color-6); background: var(--group-color-12);border: 1px solid var(---group-border);}
span.uw_down_arrow, span.uw_large_smiley, .uw_search_menu .button.button--plain, a.button.button--plain, .uw_smileys_bar .hScroller-action {color: var(--group-color-6) !important;}
.tabs--standalone .tabs-tab.is-active {color: var(--group-color-7) !important;background-image: var(--group-color-0) !important; -webkit-background-clip: text !important;background: transparent;border: 2px solid var(--group-border);font-weight: 600;}
.tabs--standalone .tabs-tab { border: 1px solid var(--group-border); color: var(--group-color-6) !important; background-image: var(--group-color-0) !important;}
h3.block-userActivity--header{ font-size: 0.7em; color: #838383 !important; background-image: none !important; -webkit-background-clip: text; background: transparent;}
a {color: var(--group-color-19);}
a:hover{color: var(--group-color-7);}
.bbTable table tbody tr th {background: var(--group-color-15);}
/*ББ-коды и прочее*/
.bbCodeBlock, .fr-view blockquote {
background:var(--group-color-15);
border: 1px solid var(---group-border);
border-left: 3px solid var(--group-color-5);
border-radius: 0px;
color: var(--group-color-12);}
.bbCodeBlock--code.bbCodeBlock--screenLimited .bbCodeBlock-header, .button.button--longText, a.button.button--longText, bbCodeInline, .bbCodeBlock-title {color: var(--group-color-12); background:var(--group-color-20);}
.bbCodeBlock--code.bbCodeBlock--screenLimited .bbCodeBlock-header .bbCodeBlock-actions .action { color: var(--group-color-4);}
.inlineModBar, .message.is-mod-selected, .block--messages .message.is-mod-selected { background: var(--group-color-5);color: var(--group-color-2);}
.block--messages .message:not(.message--simple) .message-inner .message-cell.message-cell--user, .block--messages .message:not(.message--simple) .message-inner .message-cell.message-cell--action {border: 4px solid var(--group-border) !important; border-left: none !important; margin-left: -3px;margin-right: 2px; background: var(--group-color-13);}
.avatar img {background:var(--group-color-12);}
.message-top .message-avatar .avatar, .av img {border: 2px solid var(--group-border);}
.message-name {color: var(--group-color-2);}
.message-userName { background: var(--group-color-4); border: 1px solid var(--group-border); border-left: none; border-right: none;}
.message-userExtras .pairs {border: 2px solid var(--group-border); color: var(--group-color-2); background: var(--group-color-4); border-radius: 0;}
.message-userExtras .pairs dd {color: var(--group-color-18);}
.PS {margin-top: -9px !important; border: 4px solid var(--group-border);}
.av { margin-left: -274px;
margin-top: 60px !important;}
.ANKETA {
color: var(--group-color-6);
border: 1px solid var(--group-border);
background: var(--group-bg) fixed center center;
}
.INFOPERS h8, .ANKETA h7 {
background: var(--group-color-4);
color: var(--group-color-6);
border: 1px solid var(--group-border);
}
.ANKETA h7{border: none;}
.INFOPERS t,.ANKBLOCK {
color: var(--group-color-12);
background: var(--group-color-15);
border: 1px solid var(--group-border);}
.ANKIMG img { border: 1px solid var(--group-border);}
.nic {background: var(--group-color-4); color: var(--group-color-18); margin-left: -271px;}
.el img, .el [data-s9e-mediaembed] {
background: var(--group-color-2);
background: linear-gradient(0deg, var(--group-color-5) 20%, var(--group-border) 80%);}
.info {
background: var(--group-color-4);
color: var(--group-color-18);
border: 1px solid var(--group-border);
margin: 0 auto;
border-bottom: 1px solid var(--group-border);
}
h2.info {color: var(--group-color-18);}
::selection, .fr-wrapper ::selection { background: var(--group-color-5);color: var(--group-color-6);}
.menu-row.menu-row--alt {color: var(--group-color-6); background: var(--group-color-13);}
.menu-tabHeader .tabs-tab.is-active {color: var(--group-color-6);}
.menu-tabHeader .tabs-tab.is-active { color: var(--group-color-7);border-color: var(--group-border);}
.subNodeLink.subNodeLink--unread:before, .subNodeLink.subNodeLink--unread .subNodeLink-icon {color: var(--group-color-7);}
/*МОБИЛКА*/
@media (max-width: 480px){
.p-header {display: none;}
.p-body {margin-top: 100px; width: 95%;}
.p-body-main {width: 95%;}
.p-body-content {width: 100%;}
.groupCover-header .listPlain { margin-top: -130px; padding-left: 0; margin-left: -20px;}
.groupCover-header .groupHeader-navList--user { position: absolute; bottom: -15px; margin-right: -1px; right: 0;}
.p-body-inner { border-left: 0px;}
.template-forum_list .p-body-inner { padding-left: 2px !important;}
.p-body-inner { padding-left: 10px !important; padding-right: 0px;}
.message-avatar-wrapper .message-avatar-online, .message-avatar-wrapper .message-avatar-offline { margin-left: auto;}
.av, .nic { display: none;}
.p-nav-opposite .p-nav-menuTrigger { top: 0px; background: var(--group-color-4); color: var(--group-color-2);}
.offCanvasMenu--nav .offCanvasMenu-header, .offCanvasMenu--nav .offCanvasMenu-content {
color: var(--group-color-2);
background: var(--group-color-13);
border-bottom: solid 1px var(--group-border);
}
.offCanvasMenu--nav .offCanvasMenu-linkHolder.is-selected {
color: var(--group-color-2);
background: var(--group-color-5);
}
.offCanvasMenu--nav .offCanvasMenu-list li {
border-top-color: var(--group-border);
}
.offCanvasMenu--nav .offCanvasMenu-list {
border-bottom: 1px solid var(--group-border);
}
}
.png "rats2 :rats2:")
