MediaWiki:Timeless.css

/* All CSS here will be loaded for users of the Timeless skin */
body {
	background-attachment: fixed;
	background-image: var(--bgImg);
	background-position: 200px 170px;
	font-family: sans-serif;
}
hr { 
	border: none !important;
	border-bottom: 2px solid black !important;
	border-image: url(https://static.miraheze.org/pizzatowerwiki/9/93/PTWiki-underlineborder.png) 0 0 2 0 / 0 0 2px 0 round round !important;
}
#menus-cover {
	background-color: var(--tableBg);
}

/* DEFAULT LAYOUT CHANGE */
/* Moving toolbar to the left + making it sticky; taken from Inkipedia */
@media screen and (min-width: 1340px) {
	#mw-content-block {
		display: block;
	}
	#mw-content-wrapper {
		float: right;
		margin-left: -14em;
		width: 100%;
	}
	#mw-related-navigation {
		width: 14em;
		padding: 0 1em 0 0;
	}
	div.color-middle {
		margin-right: 0;
	}
	.mw-wiki-logo {
		display: inline-block;
	}
	.mw-footer-container {
		margin-left: 14em;
	}
}
@media screen and (min-width: 1100px) {
	#mw-content,
	#content-bottom-stuff {
		margin-left: 14em;
	}
}
@media screen and (min-height: 850px) and (min-width: 1100px) and (max-width: 1339px) {
	#mw-related-navigation {
		position: sticky;
		top: 4.5em;
		padding-bottom: .1em;
	}
}
@media screen and (min-height: 600px) and (min-width: 1400px) {
	#mw-related-navigation {
		position: sticky;
		top: 67px;
		padding-bottom: .1em;
		height: fit-content;
	}
	#site-tools {
		position: sticky;
		top: 67px;
		padding-bottom: .1em;
	}
}

/* HEADER */
#mw-header-hack, #mw-header-nav-hack {
	display: none;
}
#simpleSearch {
	background-color: var(--searchInputBg);
	box-shadow: none ;
	border: 1px solid black;
}
#searchButton, #mw-searchButton {
	right: -1px;
	background-color: var(--searchBtnBg);
	border: 1px solid black;
	border-radius: 0;
	height: calc(100% + 1.5px);
	margin-top: -1px;
}
#searchButton:hover, #mw-searchButton:hover {
	background-color: var(--searchBtnHoverBg);
}
#p-banner {
	margin-top: 0.4rem;
}
/* ALERT / WATCH ICONS */
#personal-extra>ul {
    margin: 0.3em 0.5em 0.5em 0.5em !important;
}
.mw-echo-notifications-badge:after {
	border: 1px solid #f8e080 !important;
    border-radius: 0 !important;
    color: #f8e080 !important;
}
#pt-notifications-notice .mw-echo-notifications-badge.oo-ui-flaggedElement-unseen:after,
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-unseen-notifications:after {
	background-color: #b03000;
}
#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read,
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
	opacity: 1; /* Bringing back full color */
}
#personal-extra li>a, #personal>h2:before {
	background-image: url(https://static.miraheze.org/pizzatowerwiki/c/c3/PT-WikiImage-UserIcons.png);
	background-size: auto 20px;
}
#pt-notifications-alert>a {
	background-position: -20px 0;
}
#pt-notifications-notice>a {
	background-position: -40px 0;
}
#personal>h2 {
	background-image: none;
	padding-top: 0.3em;
}
#personal>h2:before {
	content: "";
	display: inline-block;
	margin: 0 0.3em 0 0;
	width: 20px;
	height: 20px;
}
/* Wiki name and username fixes */
.mw-wiki-title, #personal h2 {
	font-family: sans-serif !important;
	font-weight: bold;
}
.mw-wiki-title:hover {
	text-decoration: none;
}
/* Title and icons on mobile */
@media only screen and (max-width:440px) {
	#personal-extra {
		top: 0.2em;
	}
	#personal-extra ul {
		margin: 0.5em 0 !important;
	}
	#personal-extra #pt-notifications-notice {
		margin-right: 0;
	}
	#user-tools h2, .sidebar-chunk h2 {
		width: 27px !important;
		height: 27px !important;
		top: 0.5em !important;
	}
	#p-logo-text {
		left: 200px !important;
		margin: -0.6em 0 0 3em !important;
		font-size: 85%;
		text-align: center;
	}
	#p-logo-text a.long {
		line-height: 1.5;
	}
	#p-search {
		margin-top: -2em;
	}
}
@media only screen and (max-width:400px) {
	#personal-extra ul {
		margin: 0.7em 0 !important;
	}
	#user-tools h2, .sidebar-chunk h2 {
		top: 0.7em !important;
	}
	#p-logo-text {
		width: 150px;
		font-size: 80%;
	}
	#p-logo-text a.long {
		line-height: 1;
	}
	#p-search {
		margin-top: -2.3em;
	}
}

/* CONTENT CONTAINER */
#mw-content-container {
	background: transparent;
	border: none;
	box-shadow: none;
	padding-bottom: 0;
}
/* MAIN CONTENT */
.mw-dismissable-notice {
	background: transparent;
	border: none;
}
#mw-content {
	background-color: transparent;
	border: none;
	padding: 0;
}
#bodyContentOuter {
	background-color: var(--contentBg);
	background-clip: padding-box;
	border: 5px solid transparent;
	border-image: var(--bodyImg) 5 / 5px round round;
	margin-top: 3rem;
	position: relative;
}
#bodyContent {
	padding: 2rem;
}
/* HEADINGS */
.mw-body h1.firstHeading, .mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body dt {
	font-family: sans-serif;
	font-weight: bold;
}
.mw-body h1.firstHeading, .mw-body h2 {
	padding-bottom: 3px;
}
.mw-body h1.firstHeading {
	font-size: 1.8em;
}
.mw-body h2 {
    font-size: 1.7em;
}
.mw-body h3 {
    font-size: 1.3em;
}
.mw-body h4, .mw-body h5  {
    font-size: 1.2em;
}
.mw-body h1, .mw-body h2, .sidebar-inner h3, #personal-inner h3, .mw-body .toctitle, .ext-discussiontools-visualenhancements-enabled .ext-discussiontools-init-section { /* underline / heading border */
	border-color: transparent !important; /* keep important on this */
}
.mw-body h1, .mw-body h2, .sidebar-inner h3, #personal-inner h3, .mw-body .toctitle { /* underline bottom border */
	border-image: url(https://static.miraheze.org/pizzatowerwiki/9/93/PTWiki-underlineborder.png) 0 0 2 0 / 0 0 2px 0 round round;
}
.ext-discussiontools-visualenhancements-enabled .ext-discussiontools-init-section, .ext-discussiontools-emptystate:not(:first-child) { /* underline top border */
	border-image: url(https://static.miraheze.org/pizzatowerwiki/9/93/PTWiki-underlineborder.png) 2 0 0 0 / 2px 0 0 0 round round;
}
.mw-body .toctitle h2 {
	border: none !important;
}
.tocnumber {
	color: var(--textColor);
}
#catlinks {
	margin: 0;
}
/* GALLERY BOXES */
.mw-body-content a > img, .mw-body-content .floatnone > img {
	max-width: 80vw !important;
	margin: 0 !important;
}
figure[typeof~="mw:File/Thumb"] > figcaption, figure[typeof~="mw:File/Frame"] > figcaption {
	margin-top: 0.2em;
}
.mw-content-ltr figure[typeof~="mw:File/Thumb"]:not([typeof~="mw:Error"]) > a.mw-file-description:after {
	bottom: -25px;
}
.mw-body-content a > img, .mw-body-content .floatnone > img { /* article thumbnail image fix for mobile */
	max-width: calc(80vw - 2em) !important;
}
.mw-body li.gallerybox div.thumb {
	background-clip: content-box;
	box-shadow: none;
	padding: 3px 6px 2px 2px;
}
/* TABS (i may be cracked - skl) */
#mw-page-header-links {
	position: absolute;
	top: -2.85rem;
}
#mw-page-header-links .mw-list-item {
	background-color: var(--inactiveTabBg);
	background-clip: padding-box;
	border: 5px solid transparent;
	border-image: var(--inactiveTabImg1) 5 / 5px round round;
	margin: 0 0.5em 0 0;
	padding: 0.5em;
}
#mw-page-header-links .mw-list-item:not(.selected) a, #p-logo-text>a, #p-logo-text>a:hover, .sidebar-inner a, .sidebar-inner a:hover, #personal-inner a, #personal-inner a:hover, .mw-footer-container a, .mw-footer-container a:visited, .mw-footer-container a:hover {
	color: var(--sidebarColor) !important;
}
#mw-page-header-links .mw-list-item:not(.selected):hover {
	background-color: var(--inactiveTabHoverBg);
	border-image: var(--inactiveTabImg2) 5 / 5px round round;
}
#mw-page-header-links .mw-list-item.selected {
	background-color: var(--contentBg);
	border-image: var(--activeTabImg) 5 / 5px round round;
	color: var(--textColor);
}
.mw-watchlink>a {
	background-image: url(https://static.miraheze.org/pizzatowerwiki/2/2b/PT-WikiImage-WatchStars.png?20230922185403) !important;
	background-size: auto 16px;
	width: 16px !important;
	height: 16px;
	margin-bottom: -0.2em !important;
}
#ca-unwatch>a {
	background-position: -16px 0;
}
.mw-watchlink>a:hover {
	background-position: -32px 0 !important;
}
/* DISCUSSION PAGE */

/*.ext-discussiontools-emptystate-logo:before {
	background-image: url(https://static.miraheze.org/pizzatowerwiki/d/d6/PTWiki-discussion.png);
	background-size: 100%;
	content: "";
	display: block;
}*/
.ext-discussiontools-emptystate-logo {
	/*display: none;*/
}

/* SIDEBARS & TOP BAR */
#mw-header-container, .mw-footer-container, #personal-inner {
	border: 5px solid transparent !important;
	background-color: var(--sidebarBg) !important;
	background-clip: padding-box !important;
	color: var(--sidebarText);
	padding: 1em 1em 0 !important;
}
#mw-header-container {
	border: none !important;
	border-bottom: 5px solid transparent !important;
	border-image: var(--sidebarImg2) 5 / 0 0 5px 0 round round !important;
}
#site-navigation, #personal-inner {
	border-image: var(--sidebarImg1) 5 / 5px round round !important;
}
#site-tools, #catlinks-sidebar {
	border-image: var(--sidebarImg2) 5 / 5px round round !important;
}
#page-tools {
	border-image: var(--sidebarImg3) 5 / 5px round round !important;
}
#personal-inner {
	margin-bottom: 1em !important;
}
#personal-inner:before, #personal-inner:after {
	display: none;
}
.sidebar-inner h3, #personal-inner h3 {
	font-weight: bold !important;
	padding-bottom: 0.3em !important;
	margin-bottom: 0.3em !important;
}
#site-navigation .mw-portlet-body, #site-tools .mw-portlet-body, #mw-related-navigation .mw-portlet-body {
	font-size: 95%;
}

/* COLLASPIBLE SIBEBARS */
.collaspibleSidebarHeader.close>h3 {
	margin-bottom: 0.7rem !important
}

/* FOOTER */
.mw-footer-container {
	box-shadow: none;
	border-top: none !important;
	border-image: var(--sidebarImg2) 5 / 0 5px 5px 5px round round !important;
	margin-bottom: 1rem;
}
.mw-footer ul, .mw-footer li {
	font-size: 95%;
}

/* WORDMARK */
#p-logo-text .wordmark>img {
	width: 180px;
	height: 40px;
	margin-top: -10px;
}
/* SCREEN SIZING SHIT */
@media screen and (min-width: 2000px) {
	.ts-inner {
		max-width: 90vw !important;
	}
}
@media screen and (min-width: 851px) {
	#personal-inner {
		top: 2.7em !important;
	}
}
@media screen and (min-width: 1200px) {
	.sidebar-chunk {
		padding: 1em 1.5em 0 !important;
	}
}
@media screen and (min-width: 851px) and (max-width: 1099px) {
	.sidebar-chunk {
		padding: 0 1em !important;
	}
	.sidebar-chunk>h2 {
		margin: 0 !important; /*keep this important*/
		padding: 0.5em 0 0.2em !important; /*this too*/
	}
	.sidebar-chunk.dropdown-active>h2>span:before, .sidebar-chunk.dropdown-active>h2>span:after, #page-tools.dropdown-active>.sidebar-inner:before, #page-tools.dropdown-active>.sidebar-inner:after {
		display: none !important; /*keep this important*/
	}
	.sidebar-inner {
		background-color: inherit !important;
		background-clip: inherit !important;
		border: inherit !important;
		border-image: inherit !important;
		box-shadow: none !important;
		padding: 1em 1em 0 !important;
	}
	.mw-portlet-body {
		margin-bottom: 1em !important;
	}
}
@media screen and (max-width: 1099px) {
	#bodyContentOuter, #mw-footer-container {
		border-left: 0 !important;
		border-right: 0 !important;
	}
	#bodyContentOuter { 
		border-image: var(--bodyImg) 5 / 5px 0 5px 0 round round;
	}
	#mw-footer-container {
		border-image: var(--sidebarImg2) 5 / 0 0 5px 0 round round !important;
	}
}
@media screen and (max-width: 394px) {
	#mw-page-header-links {
		top: -2.5rem;
	}
	#mw-page-header-links .mw-list-item {
		padding: 0.3em;
	}
}
@media screen and (max-width: 500px) {
	#p-logo-text {
		position: static;
		margin: 3em auto -2em;
		text-align: center;
	}
	/* Bringing back default (small) paddings for mobiles */
	#bodyContent {
    	padding: 0.5rem;
    }
	.mw-footer-container, #personal-inner {
		padding: 0.2em 0.2em 0 !important;
	}
}
@media screen and (min-width: 851px) {
	.ts-inner {
		max-width: none;
	}
	#mw-content-block {
		margin-top: 4rem;
	}
	.mw-portlet-body {
		margin-bottom: 1em !important;
	}
	.tools-inline li:not(.mw-watchlink) a {
		background-image: none !important; /* keep this important */
		padding: 0 !important; /* same here */
	}
	.sidebar-chunk, #personal-inner {
		border: 5px solid transparent !important;
		background-color: var(--sidebarBg) !important;
		background-clip: padding-box !important;
		box-shadow: none !important;
		color: var(--sidebarText);
	}
	#personal-inner { 
		padding: 1em 1em 0 !important;
	}
	#site-navigation, #personal-inner {
		border-image: var(--sidebarImg1) 5 / 5px round round !important;
	}
	#mw-header-container {
		padding: 0.5em 1em 2.5em !important;
	}
}
@media screen and (max-width: 850px) {
	#mw-header-container {
		padding: 0.6em 1em 3.5em 1em !important;
	}
	#p-search {
		position: relative;
		top: 2.8em;
	}
	#personal-extra li {
		margin-right: 0.5em;
	}
	#mw-content-block {
		background-color: transparent;
	}
	#bodyContent {
		padding: 1rem;
	}
	.sidebar-inner {
		background-color: var(--sidebarBg) !important;
		background-clip: padding-box !important;
		border: 5px solid transparent !important;
		border-image: inherit !important;
		box-shadow: none !important;
		color: var(--sidebarText);
		padding: 1em 1em 0 !important;
	}
	.sidebar-inner li, .dropdown li {
		margin: 0 0 0.35em;
	}
	.collaspibleSidebarHeader.close>h3 {
		margin-bottom: 1.4rem !important
	}
	figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"] {
		float: none !important;
		margin: 0 auto !important;
		width: min-content !important;
		max-width: calc(100% - 1rem) !important;
	}
}
@media screen and (min-width: 1100px) and (max-width: 1339px) {
	.mw-footer-container {
		margin-left: 14em;
	}
}

/* [[Category:Styling pages]] */