User:Dr.Bryan/HutorStyle.css

/* Variables */
 * root {

--accent: var(--theme-accent-color); --accent-hover: var(--theme-accent-color--hover); --accent--rgb: var(--theme-accent-color--rgb); --accent-mix: var(--theme-page-accent-mix-color); /* --accent-light: var(--theme-page-accent-mix-color); */ --text-color: var(--theme-page-text-color); --text-hover: var(--theme-page-text-color--hover); --text--rgb: var(--theme-page-text-color--rgb); --text-mix: var(--theme-page-text-mix-color); --link: var(--theme-link-color); --link-hover: var(--theme-link-color--hover); --link--rgb: var(--theme-link-color--rgb); --page-bg: var(--theme-page-background-color); --page--rgb: var(--theme-page-background-color--rgb); --page-sec: var(--theme-page-background-color--secondary); --page-sec--rgb: var(--theme-page-background-color--secondary--rgb); --border: var(--theme-border-color); --border--rgb: var(--theme-border-color--rgb); --nav-bg: var(--theme-sticky-nav-background-color); --nav-bg--rgb: var(--theme-sticky-nav-background-color--rgb); }

/* Classes */ .accent-bg {background: var(--theme-accent-color);} .accent-hover {background: var(--theme-accent-color--hover);} .accent--rgb {background: var(--theme-accent-color--rgb);} .text-color {color: var(--theme-page-text-color);} .text-hover {color: var(--theme-page-text-color--hover);} .text-mix {color: var(--theme-page-text-mix-color);} .link-color {color: var(--theme-link-color);} .link-hover {color: var(--theme-link-color--hover);} .link--rgb {color: var(--theme-link-color--rgb);} .link-bg {background: var(--theme-link-color);} .link-bg-hover {background: var(--theme-link-color--hover);} .link-bg--rgb {background: var(--theme-link-color--rgb);} .page-bg {background: var(--theme-page-background-color);} .page--rgb {background: var(--theme-page-background-color--rgb);} .page-sec {background: var(--theme-page-background-color--secondary);} .page-sec--rgb {background: var(--theme-page-background-color--secondary--rgb);} .border-accent {border-color: var(--theme-accent-color) !important;} .border-color {border-color: var(--theme-border-color) !important;}

/* == Paddings; Margins == */ .page-content p, .page-content section {margin: unset;} /* В инфобоксах (при наличии костыля)*/ p:empty, p.empty-p + p {display: none;} /* На прочих страницах (например, где вместо инфобокса только картинка) */ .ns-0:not(.mainpage):not(.action-history) .page-content .mw-parser-output > p:first-of-type, .ns-0:not(.mainpage):not(.action-history) .page-content .mw-parser-output > p+p {margin: 0;} .page-content .mw-content-ltr .mw-parser-output > p, .page-content .mw-content-ltr .mw-parser-output > p+h2, .page-content .mw-content-ltr .mw-parser-output > h3, .page-content .mw-content-ltr table p {margin: 0 0 .5em !important; padding: 0; line-height: 1.5;} .page-content .mw-content-ltr .mw-parser-output dl {margin: 0 0 .6em;}

/* -- Scrollbar -- */
 * -webkit-scrollbar {

width: 14px; background: rgb(var(--theme-sticky-nav-background-color--rgb),.2); }
 * -webkit-scrollbar-thumb {

background: var(--theme-accent-color); border: 1px solid var(--theme-accent-color); border-radius: 3px; }
 * -webkit-scrollbar-thumb:hover {

border-color: #222; background: var(--theme-accent-color--hover); }

.page:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgb(var(--theme-page-background-color--rgb),.9); backdrop-filter: blur(5px); z-index: -1; }

/* Headers */ .page-content h2 .mw-headline, .page-content h3 .mw-headline { background-image: linear-gradient(to top,rgba(var(--accent-rgb),.2),transparent,transparent); padding: 0px 5px; }

/* -- Отступы -- */ .page__main { /*padding: 20px 15px 20px 25px;*/ background: none; } .page__right-rail {background-color: rgb(var(--theme-page-background-color--rgb),.4);} .page__right-rail.is-rail-hidden {width: 1em !important;}

/* -- page-side-tools -- */ .page-side-tools :is(a, button), .page-side-tools__right > :is(a, button) {opacity: .3; transition: .4s;} .theme-fandomdesktop-dark .page-side-tools :is(a, button), .theme-fandomdesktop-dark .page-side-tools__right > :is(a, button) {opacity: .5;} .page-side-tools:hover :is(a, button), .page-side-tools__right:hover :is(a, button) {opacity: 1;} /* -- Тогглер правой колонки -- */ .page-side-tools__wrapper {--page-bg: var(--theme-page-background-color);} .page-side-tools__wrapper.right {z-index: 1;} .right-rail-toggle { background-color: var(--page-bg) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 12px 0px; opacity: .5; transition: .5s; } .right-rail-toggle:hover {background-color: var(--page-bg); opacity: 1;} .right-rail-toggle svg {fill: var(--theme-link-color); transition: all .3s !important;} .right-rail-toggle:hover svg {fill: var(--theme-link-color--hover);}

/* -- Header -- */ .page__main h1 {font-size: 28px; line-height: normal;} .page-header {margin: 0 0 10px; line-height: normal; border-bottom: 1px solid var(--theme-border-color);} .page-header__top {align-items: center; font-size: 14px;} .page-header__bottom {padding: .5em 0;} .page-header__actions, .page-header__categories>:last-child {padding: 0;} .page-header__languages {margin: 0 20px 0 10px;} .page-header__languages .wds-dropdown__toggle { margin: 0; font-weight: 400; transition: .3s; color: var(--theme-link-color); text-transform: capitalize; }

.page .mw-editsection {opacity: 0; transition: .3s ease-out;} .page :is(h1,h2,h3,h4,h5,h6):hover .mw-editsection {opacity: 1;}

/* -- WikiaBar -- */ .wikia-bar {height: 22px; padding-left: 0 !important;}

/* Wrapper */ .WikiaBarWrapper, .WikiaBarCollapseWrapper .wikia-bar-collapse { background-color: var(--theme-page-accent-mix-color); } .WikiaBarWrapper .tools>li:hover {background-color: rgb(var(--theme-accent-color--rgb),.5);} /* first li */ .WikiaBarWrapper ul.tools li:first-child {border-radius: 20px 0 0 20px;}

/* == wds-dropdown == */ .fandom-community-header__local-navigation .wds-dropdown:hover .wds-dropdown__content {	animation: wds-dropdown--slide-in .4s ease; transition: 1s; } .fandom-community-header__local-navigation .wds-dropdown:before, .fandom-community-header__local-navigation .wds-dropdown:after, .fandom-community-header__local-navigation .wds-dropdown:hover .wds-dropdown-level-nested__content {	animation: wds-dropdown-chevron--slide-in .4s ease; }

/* == Rail == */ /* Модули */ /* :is(.new-pages-rail-module,.activity-module) li:not(:last-child) {border-bottom: 1px solid var(--border) !important;} */ .rail-module, .new-pages-module, .module, .admin-dashboard__module { /* margin: 0 0 30px !important; */ /* border: 1px solid var(--border) !important; */ box-shadow: 0 0 5px rgba(0,0,0, .2); padding: .2em 1em; border-radius: 8px; border-bottom: none; } .right-rail-wrapper h2, .right-rail-wrapper h3 { /* font-size: 1rem !important; */ font-weight: 400 !important; /* line-height: normal; */ /* height: 20px; */ /* border: 0 !important; */ /* margin: 4px 0; */ background-image: linear-gradient(to top,rgba(var(--theme-link-color--rgb),.15),transparent,transparent); }

/* = Discord = */ .discord-widget-container { margin-right: unset; width: 100%; height: fit-content; } .widget-body { max-height: 220px; min-height: 130px; } .discord-widget-container .widget-header {display: none;}

/* = New images modile = */ .photo-module > div { margin: 3px 10px !important;box-sizing: border-box !important; } .photo-module .wds-button.wds-is-secondary {border: 0; border-radius: 8px;} .photo-module .wds-button.wds-is-secondary:hover {background-color: rgba(var(--theme-link-color--rgb),.15); } .photo-module .pm-carousel-control {font-size: 1.4em !important; font-weight: 400;} .photo-module .pm-carousel-container {border: 1px solid var(--theme-border-color); margin: 0; width: auto; padding: 3px; border-radius: 8px;}

/* == Other == */ /* -- Chevrons transition -- */ .wds-dropdown__toggle-chevron {transition: .3s;}

/* -- Used templates -- */ .templatesUsed ul { display: flex; flex-wrap: wrap; margin: 0; list-style: none; gap: 5px; } .templatesUsed ul li { background-color: rgb(var(--link--rgb),.1); padding: 0 3px; border-radius: 8px; font-size: .8em; } .templatesUsed ul li:before { content: '{{'; font-family: monospace; } .templatesUsed ul li:after { content: '}}'; font-family: monospace; }

/*== Animation == */ @keyframes wds-dropdown--slide-in { from { opacity: 0; transform: translate(-50%, 10px); }

to { opacity: 1; transform: translate(-50%, 0); } } @keyframes wds-dropdown-chevron--slide-in { from { opacity: 0; transform: translate(0%, 10px); }

to { opacity: 1; transform: translate(0%, 0); } }