MediaWiki:Timeless.css

/* Credits to NINJISY (User:Sillyvizion). I lifted a bit of their CSS coz i dont know anyhting */

/* Root stuff */
:root {
	/* color */
	--main-black: rgba(0, 5, 43, 0.95);
	--main-white: white;
	--link-color: #ff8080;
	--link-color-inverted: #007B7B;
	--external-link-color:#40a7f5;
	--content-black: #0e0e0e;
	--scrollbar-track: #0e0e0e;
	--scrollbar-thumb: black;
	--accent-gray: #171717;
	--reference-text: #ECECEC;
	--diff-old: #fa3235;
	--diff-new: #3257fa;
	--codeblock-gray: #363636;
	--fp-transparent-black: rgba(0,0,0,0.9);
	
	/* Background image */
	--bg-image: url(https://timebombmadness.com/mediawiki/images/c/c9/IceBgTemp.png);
	
	--default-font: 'Montserrat','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}

/* Main/common styling */

body {
	color:var(--main-white);
	background:var(--main-black);
	overflow-x:hidden;
}

a, a:visited {
	color:var(--link-color);
}

a:hover {
	color:var(--main-white);
	font-style:italic;
}

@media screen and (min-width: 851px) {
    .mw-wiki-logo.fallback {
    	height:7em;
    }
}

.mw-parser-output a.extiw, .mw-parser-output a.extiw:active, .mw-parser-output a.external {
	color:var(--external-link-color) !important;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
	font-family:"Gotham", sans-serif;
	font-weight:bold;
}

.mw-body h2 {
	background: var(--main-black);
    padding: 0.2em 0.2em 0.2em 0.5em;
}

#mw-content {
	background:var(--content-black);
	color:var(--main-white);
}

#mw-content-container {
	background:var(--main-black);
	color:var(--main-white);
}

#mw-content-container {
	background-image:var(--bg-image);
	background-repeat: no-repeat;
	background-size: 100% auto;
	border-image-slice:1;
}

.fp-container {
	background-color:var(--fp-transparent-black);
	padding:1.5em;
	transform:skew(-5deg);
	margin: 2em 0 2em 0;
	text-align:center;
}

/* Messagebox styling */

.mbox__content__header {
    font-family:"Gotham";
    font-size:1.4em;
}

.mbox__content {
    border:1px solid white;
}

.mbox {
    margin-bottom:10px;
}

.tabber__tab, .tabber__tab:visited {
    color:var(--main-white);
}

/*Sitenotice styling*/

#localNotice:has(> .anonnotice) {
    background-color:var(--main-black);
    background-repeat:no-repeat;
    box-shadow:none;
    border:1px solid white;
    background-image: var(--anon-notice-img);
    background-position:10px;
    background-size:80px;
    padding-left:60px;
}
.mw-dismissable-notice {
    background-color:var(--main-black);
    background-image: var(--site-notice-img);
    background-repeat:no-repeat;
    background-position:50px;
    background-size:90px 90px;
    box-shadow:none;
    border:1px solid white;
}

.mw-dismissable-notice .sitenotice {
	margin-left:150px;
	/* Special styling for Broker Plushie */
	min-height:80px;
    display:flex;
    align-items:center;
}

.anonnotice p, .mw-dismissable-notice-body {
    margin:1.5em 0;
    text-align:center;
}

#mw-header-container {
    background:var(--main-black);
    color:white;
    font-family:"Gotham", sans-serif;
    padding:0.5em 0 0.5em 0;
    min-height:3.125em;
    box-shadow: 0 1px 5px 1px rgba(0,0,0,0.5);
}

#p-logo-text a {
    color:white;
    font-family:"Gotham", sans-serif;
    font-weight:bold;
    text-transform:uppercase;
}

#p-logo-text {
  max-width:100%; 
    margin:auto;
}

#personal h2 {
    font-family:"Gotham", sans-serif;
    color:var(--main-black);
    filter:invert(1);
}

#personal .dropdown {
    background:var(--main-black);
    color:white;
}

#personal .dropdown a {
    color:var(--link-color-inverted);
}

#user-tools ul {
    filter:invert(1);
}

/* Search styling */

#simpleSearch {
    background-color:var(--main-black);
}

#searchInput {
    color:white;
}

.suggestions .suggestions-result {
    background:var(--main-black);
    color:white;
}

.suggestions .suggestions-result-current {
    background:var(--content-black);
}

.suggestions .suggestions-special {
    background:var(--content-black);
    color:white;
}

.suggestions .suggestions-special .special-query {
    color:white;
}

#searchButton, #mw-searchButton {
    filter:invert(1);
}

/* Styling for the sidebars when they move to the top on a smaller screen */
@media screen and (min-width: 851px) and (max-width: 1099px) {
 #mw-header-nav-hack .color-middle, #mw-header-nav-hack .color-left, #mw-header-nav-hack .color-right {
     background:black;
 }

 #mw-header-nav-hack {
     background: var(--main-black);
     border-bottom:solid 2px #eaecf0;
 }

 #mw-site-navigation h2, #mw-related-navigation h2 {
     font-family:"Gotham", sans-serif;
 }

 #mw-site-navigation h2::after, #mw-related-navigation h2::after {
     filter:invert(1);
 }

 #mw-wrapper .dropdown-active .sidebar-inner {
     background:var(--main-black);
     padding-bottom:20px;
 }

 #mw-wrapper .dropdown-active .sidebar-inner .mw-portlet {
     border:1px solid var(--main-white);
 }
}

/* Top navigation links styling */

#p-namespaces li a, #p-views li a {
    padding:0;
    transform:skew(5deg);
    color:var(--link-color);
}

#ca-nstab-main, #ca-talk, #ca-view, #ca-edit, #ca-history {
    background-image:none;
}

#ca-watch a, #ca-unwatch a {
    background-position:center;
}

#p-namespaces li a:hover, #p-views li a:hover {
   color:var(--main-white);
}

#p-namespaces li, #p-views li {
    background-color:transparent;
    padding:3px 20px;
    font-family:"Gotham",sans-serif;
    font-weight:bold;
    text-transform: uppercase;
    transform:skew(-5deg);
    border:0;
}

#p-namespaces, #p-views {
    background-color:rgba(0,0,0,0);
}

.tools-inline li {
    border-bottom:0;
}

/* Sidebar styling */

#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
	background-color:transparent;
	color:var(--main-white);
	padding:0.3em;
	border: none;
	font-family:"Gotham", sans-serif;
}

#mw-site-navigation .sidebar-chunk a, #mw-related-navigation .sidebar-chunk a {
	color:var(--main-white);
}

#mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3 {
	font-family:"Gotham", sans-serif;
	font-weight:bold;
    text-transform:uppercase;
	border: 0;
	border-bottom: white solid 1px;
}

#p-navigation, #p-Explore, #p-managewiki-sidebar-header, #p-STAFF, #p-boggio, #p-tb, #p-cactions, #p-pagemisc, #p-userpagetools, .mw-normal-catlinks, #p-birthday, #p-event {
    background-color:rgba(0,0,0,0.8);
    padding:10px;
    margin-bottom:10px;
}

#mw-site-navigation .sidebar-chunk {
    margin-top:0;
}

#mw-site-navigation .sidebar-chunk .mw-portlet > div, #mw-site-navigation .sidebar-chunk .mw-portlet-body, #mw-related-navigation .sidebar-chunk .mw-portlet > div, #mw-related-navigation .sidebar-chunk .mw-portlet-body {
	margin-bottom:0;
}

/* Adds the little arrow to category pages in the category box*/
#sidebar-normal-catlinks li {
    list-style: "↳ " inside !important;
}

.skin-timeless #mw-content-text .pi-title {
	text-align:center;
	font-size:2em;
	text-transform:uppercase;
	transform:skew(5deg);
	margin: 0 0 -8% 0;
}

.ph-navbar {
    color:white;
    font-family:"Gotham",sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    border-spacing: 20px 2px;
    margin:auto auto 1em auto;
}

.ph-navbar a, .ph-navbar a:hover {
    color:inherit;
}

.ph-navbar td {
    background-color:black;
    transform:skew(-10deg);
    box-shadow: 5px 5px 0px 0px #ffffff;
}

.ph-navbar-link a {
    transform:skew(10deg);
    text-decoration: none;
}

.ph-navbar-link a:hover {
	font-style:normal;
}

/* SOURCE EDITOR STYLING */
.mw-body-content .CodeMirror {
	color:var(--main-white);
	background:var(--main-black);
}