User:Bebiezaza/vectorDesktop.css

/* -- change font to MediaWiki original -- */ body { font-family: sans-serif !important; font-size: 16px; }

/* overwrite the stupidly larger font */ @media only screen and (min-width: 1500px) { .page-content { font-size: 14px; } } /* also do it to smaller screen size */ .page-content { font-size: 14px; }

/* also force it on main text */ .resizable-container { font-size: 14px; }

/* prevent hovered link from changing color */ a:hover { color: var(--theme-link-color); }

/* ===== Title and Headers; font and size ===== */ .page-header h1, .page-content h1, .page-content h2 { margin-bottom: 0.25em; padding: 0; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1.3; }

.page-header h1 { font-size: 1.8em; }

.page-content h1 { margin-top: 1em; font-size: 1.8em; }

.page-content h2 { margin-top: 1em; font-size: 1.5em; }

/* -- move Fandom left navbar to the top -- */ .global-navigation { position: static; width: auto; display: block; overflow: hidden; }

.global-navigation__top { float: left; } .global-navigation__bottom { float: right; }

.global-navigation__top, .global-navigation__bottom, .global-navigation__nav, .global-navigation__links { display: flex; width: max-content; }

.global-navigation__link { margin-left: 13px; }

/* fit Fandom logo into the space it has */ .global-navigation__logo .wds-icon { height: 34px; }

/* move user menu dropdown to the appropriate spot */ .global-navigation .wds-dropdown.is-attached-to-bottom .wds-dropdown__content { position: fixed; top: inherit; bottom: auto; left: auto; right: 0; z-index: 10; }

/* ===== small screen bruhness ===== */ @media only screen and (max-height: 650px) { /* stops the menu from going to bottom left */ .global-navigation__bottom { position: unset; }   /* stops small image size */ .global-navigation__icon svg { width: 24px; height: 24px; margin: 3px; } }

/* remove dropdown arrow */ .wds-dropdown:after, .wds-dropdown:before { content: none; }

/* -- shift size of stuffs to fit the whole page, taking up topnav space, giving way to vector leftnav -- */ .main-container { margin-left: 10em; padding: 1em; width: calc(100% - 11em); }

@media screen and (min-width: 982px) { .main-container { padding: 1.25em 1.5em 0 1.5em; margin-left: 11em; } }

/* curved border bruhness */ .page__main { border-radius: 0 !important; }

.search-modal:before, .fandom-sticky-header { left: 0; }

/* page base shifts */ .fandom-community-header__background.tileHorizontally.header { width: calc(100% + 2em); left: -1em; }

.page.page-is-edit, .ve-active .page { margin-top: 0; }

/* ===== Edit content size ===== */ .resizable-container { width: 100%; margin: 40px 0 0; max-width: 100%; }

.page { margin-top: 0; }

/* - new "vector" leftnav rendering -- */ /* ===== mw-panel ===== */ color: white; position: absolute; top: 60px; width: 10em; left: 0; }
 * 1) mw-panel {

@media screen and (min-width: 982px){ #mw-panel { padding-left: 0.5em; width: 10.5em; } }

/* ===== logo ===== */ margin-bottom: 1em; }
 * 1) p-logo {

display: block; width: 10em; height: 160px; display: flex; /* for img */ }
 * 1) p-logo a {

min-width: 100%; min-height: 100% }
 * 1) p-logo img {

/* ===== menu header ===== */ display: none }
 * 1) p-logo+.sidebar-header h3 {

.vector-menu-portal h3 { display: block; background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#FFF 33%,#FFF 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; color: #FFF; border: 0; padding: 0.25em 0; font-size: 0.75em; font-weight: normal; cursor: default; }

/* ===== menu ===== */ .vector-menu-portal { margin: 0 0.6em 0 0.7em; padding: 0.25em 0; }

.vector-menu-portal .vector-menu-content ul { list-style: none none; margin: 0; padding-top: 0.3em; }

.vector-menu-portal .vector-menu-content li { margin: 0; padding: 0.25em 0; font-size: 0.75em; line-height: 1.125em; word-wrap: break-word; }

color: #BFBFBF; }
 * 1) mw-panel a {

color: #FFF; }
 * 1) mw-panel a:hover {

/* - new "vector" topnav rendering -- */ /* ===== move topnav into place ===== */ top: 60px; right: 0; width: 100%; height: 40px; }
 * 1) mw-head {

margin-top: 2.5em; margin-bottom: -2.5em; }
 * 1) left-navigation, #right-navigation {

float: left; }
 * 1) left-navigation {

float: right; }
 * 1) right-navigation {

/* ===== make buttons ===== */ .vector-menu-tabs, .vector-menu-dropdown { float: left; }

.vector-menu-tabs li { background-image: linear-gradient(to top,var(--theme-page-background-color) 0,#fff 70%,transparent 100%); float: left; height: 40px; margin-bottom: 0; }

.vector-menu-tabs li.selected { background-image: linear-gradient(to top,#fff 0,#fff 70%,transparent 100%); }

.vector-menu-tabs li a { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#a7d7f9 100%); background-size: 2px 100%; background-repeat: no-repeat; display: block; font-size: 14px; padding: 12px 8px 4px; }

.vector-menu-tabs li.mw-list-item-left a { background-position: right bottom; } .vector-menu-tabs li.mw-list-item-right a { background-position: left bottom; }

.vector-menu-tabs li.selected a { color: #202122; text-decoration: none; }

/* ===== make dropdown ===== */ .vector-menu-dropdown { background-image: linear-gradient(to top,var(--theme-page-background-color) 0,#e7ebee 70%,transparent 100%); float: left; font-size: 14px; }

.vector-menu-dropdown span { display: block; padding: 12px 8px 4px; color: var(--theme-link-color); cursor: pointer; }

/* spliter for dropdown */ .vector-menu-dropdown span { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#a7d7f9 100%); background-size: 2px 100%; background-repeat: no-repeat; background-position: left bottom; }

.vector-menu-dropdown span::after { content: '▼'; }

.vector-menu-dropdown ul { position: absolute; display: none; right: -1px; z-index: 10; min-width: 61.76px; }

/* move dropdown to the right place */ .vector-menu-dropdown:hover { position: relative; }

/* ===== create proper dropdown box ===== */ .vector-menu-dropdown:hover ul { display: block; padding: 0 1px; background-color: gray; }

.vector-menu-dropdown li { background-color: #fff; margin: 0; }

.mw-dropdown-item a { padding: 0.5078125em; display: block; }

/* - Change webpage elements to match original mediawiki -- */ h1, h2 { margin-bottom: 0.6em; border-bottom: 1px solid #a2a9b1; }

.mw-editsection-bracket, .mw-editsection-divider { display: inline; }

/* Subpage text size */ .page-header__page-subtitle { font-size: 84%; }

/* ===== Table of Contents Header ===== */ .toc .toctitle { border-bottom: none; justify-content: center; padding: 0; }

.page-content #toc .toctitle { background-color: transparent; }

.toc .toctitle h2 { color: black; font-weight: bold; line-height: 1.3; }

/* ===== Table of Contents ===== */ .toc, .toccolours { border: 1px solid #a2a9b1; background-color: #f8f9fa; padding: 5px; font-size: 95%; }

.toc { display: table; padding: 7px; }

.page-content #toc ul { background-color: transparent; }

.toc ul li { margin-left: 0; }

li { margin-bottom: 0.1em; }

.toc ul ul { margin: 0 0 0 2em !important; }

.toc ul li a { color: #0645ad; line-height: 1.6; padding: 0; }

.toc ul li a:hover { background-color: transparent; }

.toc ul li a .tocnumber { color: #202122; padding-left: 0; padding-right: 0.5em; }

.toc ul li a .tocnumber:after { content: ""; }

/* -- edit source page -- */ /* why did fandom remove text box background color anyways */ .wikiEditor-ui { background-color: white; }

.wikiEditor-ui-top { min-height: 0 !important; }

.wikiEditor-ui-toolbar { padding: 0 !important; background-color: #f8f9fa; box-shadow: 0 2px 1px 0 rgb(0 0 0 / 10%); }

.editOptions { background-color: #eaecf0; color: #202122 !important; border: 1px solid #c8ccd1; border-top: 0; padding: 1em 1em 1.5em 1em; margin-bottom: 2em; }

.oo-ui-textInputWidget .oo-ui-inputWidget-input { background-color: #fff; border: 1px solid #a2a9b1 !important; }

.oo-ui-checkboxInputWidget { background-color: #fff; }

/* ===== text colors ===== */ .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { /* normal ButtonWidget */ background-color: #f8f9fa; } .oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { /* destructive ButtonWidget */ color: #DD3333; }

/* ===== something about hover, but this is a long boi ===== */ /* normal ButtonWidget */ .oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active).oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active).oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed:not(.oo-ui-flaggedElement-primary):not(.oo-ui-buttonElement-active).oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { color: #404244; background-color: #fff; }

/* destructive ButtonWidget */ .oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { color: #FD4242; }