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;
    }
}

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

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


/* 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 ===== */
#mw-panel {
    color: white;
    position: absolute;
    top: 60px;
    width: 10em;
    left: 0;
}

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

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

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

#p-logo img {
    min-width: 100%;
    min-height: 100%
}

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

.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;
}

#mw-panel a {
    color: #BFBFBF;
}

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

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

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

#left-navigation {
    float: left;
}

#right-navigation {
    float: right;
}

/* ===== 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: "";
}