MediaWiki:Timeless.css

/* All CSS here will be loaded for users of the Timeless skin */
/** General styling **/
body {
	color: #000000; 
	background: #800649; } /* affects vertical scrolbar and footer background */

/* Backdrop */
#mw-content-container {
    background-color:#fcc8a9 !important;
    background-size: cover !important;
    background-attachment: fixed !important; }

/* Icons */
/* Taken from Zelda Wiki [ https://zeldawiki.wiki/wiki/MediaWiki:Timeless.css ] */
@media screen and (max-width: 850px) {
	#site-navigation h2 {
		background-image: url("https://static.miraheze.org/softcellwiki/b/b1/Wiki_Icon_Timeless_Menu_Large_Dark.svg"); }
	#site-tools h2 {
		background-image: url("https://static.miraheze.org/softcellwiki/b/b6/Wiki_Icon_Timeless_Gear_Large_Dark.svg"); }
	#user-tools h2 {
		background-image: url("https://static.miraheze.org/softcellwiki/e/e3/Wiki_Icon_Timeless_User_Large_Dark.svg"); }
}
@media screen and (min-width: 851px) {
	#personal h2 {
		background-image: url("https://static.miraheze.org/softcellwiki/4/48/Wiki_Icon_Timeless_User_Dark.svg"); }
}
.tools-inline li[id^='ca-nstab-'] a {
	background-image: url("https://static.miraheze.org/softcellwiki/4/44/Wiki_Icon_Timeless_Page_Dark.svg"); }
#ca-talk a {
	background-image: url("https://static.miraheze.org/softcellwiki/4/48/Wiki_Icon_Timeless_Talk_Dark.svg"); }
#ca-watch a {
	background-image: url("https://static.miraheze.org/softcellwiki/a/a9/Wiki_Icon_Timeless_Star_Dark.svg"); }
#ca-unwatch a {
	background-image: url("https://static.miraheze.org/softcellwiki/5/5e/Wiki_Icon_Timeless_Star_Filled_Dark.svg"); }
.tools-inline li a {
	background-image: url("https://static.miraheze.org/softcellwiki/0/0a/Wiki_Icon_Timeless_Page_Misc_Dark.svg"); }
#ca-edit a, .client-js #ca-ve-edit a, .mw-editsection {
	background-image: url("https://static.miraheze.org/softcellwiki/e/eb/Wiki_Icon_Timeless_Pencil_Dark.svg"); }
.client-js #ca-edit a {
	background-image: url("https://static.miraheze.org/softcellwiki/7/7c/Wiki_Icon_Timeless_Pencil_Source_Dark.svg"); }
#ca-viewsource a {
	background-image: url("https://static.miraheze.org/softcellwiki/7/72/Wiki_Icon_Timeless_Brackets_Dark.svg"); }
#ca-history a {
	background-image: url("https://static.miraheze.org/softcellwiki/b/bb/Wiki_Icon_Timeless_Clock_Dark.svg"); }
#ca-more span {
	background-image: url("https://static.miraheze.org/softcellwiki/8/88/Wiki_Icon_Timeless_Gear_Dark.svg"); }
.dropdown-toggle:after, 
#user-tools h2:after, 
.sidebar-chunk h2:after,
#mw-site-navigation h2:after, 
#mw-related-navigation h2:after {
	background-image: url("https://static.miraheze.org/softcellwiki/2/29/Wiki_Icon_Timeless_Arrow_Down_Dark.svg"); }
#t-contributions a {
	background-image: url("https://static.miraheze.org/softcellwiki/d/d3/Wiki_Icon_Timeless_Puzzle_Dark.svg"); }

/** Banner (search and user toolbar) **/
#mw-header-container {
	color: #fff;
	background: #36404d; }
#mw-header-hack {
	box-shadow: none; }
.color-left, .color-middle, .color-right {
  background: #36404d; }
/* Title in banner */
#p-logo-text {
	margin-top: 10px;
    font-weight: bold; }
#p-logo-text a {
	color: #fff !important; 
	text-decoration: none;
	font-family: 'Volkhov', serif; }
/** Changes 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 {
    	margin-top: 2px; }
	#p-search {
    	margin-top: -1em; }
}
@media only screen and (max-width:440px) and (min-width:385px) {
	#p-logo-text {
    	margin-top: 3px;
    	left: 4em;
		font-size: 85%; }
}
@media only screen and (max-width:385px) {
	#personal-extra ul {
    	margin: 0.7em 0 !important; }
	#user-tools h2, .sidebar-chunk h2 {
		top: 0.7em !important; }
	#p-logo-text {
    	position: absolute;
		margin: 0;
    	width: 150px !important;
    	font-size: 85%;
    	text-align: center; }
	#p-logo-text a.long {
    	line-height: 1; }
	#p-search {
		margin-top: unset; }
}

/* Username */
#personal h2 {
	font-family: 'Volkhov', serif; }
/* User dropdown */
.dropdown {
	background: #6F4E96 !important;
	border: none !important; }
.dropdown::before, #personal .dropdown::after { /* Arrows */
	border-bottom: 11px solid #6F4E96 !important; }

/** Search bar **/
#simpleSearch {
	background: #800649; 
	border: solid 2px #826249; }
#searchInput {
	color: #fff; }
.suggestions .suggestions-results {
	background-color: #5F0A3B;
	border: 2px solid #826249; }
.suggestions .suggestions-result {
	color: #E6E6E6; }
.suggestions .suggestions-special {
	background-color: #1D0832;
	border: 2px solid #826249; }
.suggestions .suggestions-special .special-query, .suggestions-special .special-label {
	color: #fff !important; }
.suggestions .suggestions-result-current { /* Hover */
	background-color: #36404d; }
#searchButton, #mw-searchButton { /* Icon */
	background-color: transparent !important;
	filter: invert(1); }

/* Logo */
.mw-wiki-logo.fallback {
	background-color: #1d0832;
	border: 2px solid #826249;
	padding: 13px; }

/* Sidebars */
/** Desktop styling **/
@media only screen and (min-width: 1100px) {
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
	background: #1D0832;
	border: 2px solid #826249; }
#mw-related-navigation {
	width: 14em;
	flex: 0 0 14em; }
}
/** Headings **/
.sidebar-inner h3, #personal-inner h3 {
	font-family: 'Volkhov', serif;
	font-size: 115% !important;
	border-color: #826249 !important;
	padding-bottom: 5px !important;
	margin-bottom: 0.6em !important; }
/** Dropdown headings **/
@media only screen and (max-width: 1109px) and (min-width: 850px) {
#mw-site-navigation h2, #mw-related-navigation h2 {
	font-family: 'Volkhov', serif; }
#mw-header-nav-hack {
	border-top: solid 2px transparent;
	background: #1D0832; }
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
	border: none !important; }
}
/** Dropdowns content **/
@media only screen and (max-width: 1109px) {
#mw-site-navigation .sidebar-inner, #mw-related-navigation .sidebar-inner  {
	border: none;
	background: #4D3667;
	box-shadow: none;
	padding: 1.5em;
	line-height: 0.7; }
#mw-site-navigation .sidebar-chunk h2 span::before, #mw-site-navigation .sidebar-chunk h2 span::after {
	top:33px;
	border-bottom:10px solid #79DEFF; }
#mw-related-navigation .sidebar-inner::before,#mw-related-navigation .sidebar-inner::after {
	top:-10px;
	border-bottom-color:#79DEFF !important; }
}
/* User dropdown */
#personal .dropdown { 
	border: none;
	background: #6f4e96;
	box-shadow: none;
	padding: 1.5em; }
#personal .dropdown::after {
	border-bottom-color: #79DEFF;
	top: -10px; }
#personal .dropdown .mw-portlet-body {
	margin-bottom: 0 !important; }

/* Content */	
#mw-content-container {
	background: #170926; /* This also hides black block on backdrop? */
	border-bottom: solid 3px #826249; }	
#mw-content {
	background: #ffe1cf;
	border: 3px solid #826249;
	border-top: none;
	box-shadow: none; }
/** Changes for smaller screens **/
@media only screen and (max-width: 1100px) { 
  #mw-content { /* Content area */
    border-right: none;
    border-left: none; }
  #mw-content-block {
    background: #1D0832 }
  /* #content-bottom-stuff - category block */
}

/** Headings **/
/* Page title */
.mw-body h1.firstHeading {
	border-color: #826249;
	margin: 0 0 0.3em;
	padding-bottom: 5px; }
.mw-body h1 {
	font-family: 'Volkhov', serif; }
/* Heading general */
.mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .mw-body dt {
	font-family: 'Helvetica Neue','Helvetica','Arial',sans-serif; }
.mw-body h2, /* Normal heading */
#mw-subcategories h2, #mw-pages h2, #mw-category-media h2 { /* Content headings in categories */
	border-color: #36404d;
	padding-bottom: 3px; }
.mw-body h3 {
	margin: 0.5em 0 0.5em;
	font-weight: bold; }

/** Divider **/
hr {
  border-color: #826249; }

/** Page tabs **/
.tools-inline li.selected { /* Selected tab */
	border-bottom-color: #826249; }
.tools-inline li.selected a {
    color: #79DEFF; } /* Normal color */

/** Footer **/
.mw-footer-container {
	border: none;
	box-shadow: none;
	font-size: 90%; }
@media only screen and (min-width: 850px) {
	.mw-footer-container {
		line-height: 1.2; }
}
.mw-footer-container a { /* Links color */
	color: #79DEFF; } 
.mw-footer-container a:visited {
	color: #03BBF8; }

/* ToC */	
#toc {
	background: #48092C;
	border: 2px solid #36404d !important;
	border-width: 1px;
	padding: 1em 1.3em; }
.toctitle {
	border-color: #36404d !important; }
.toctogglelabel {
	color: #79DEFF !important; }
.tocnumber {
	color: #E9E6E8 !important; }

/** Image thumbnail (|thumb|) **/
.thumbinner {
	background: transparent;
	border: none;
	box-shadow: none; }
.thumbinner .thumbimage {
	border: none; }
div.magnify a { /* Icon */
	filter: invert(1); }

/********* Portable infobox theme *********/
.portable-infobox {
	--pi-border-color: #754836;
	border: 2px solid #754836;
	border-radius: 8px;
	padding: 6px;
	font-size: 12px;
	background-color: #cfa07c;
	line-height: 1.5;
	width: 22em;
}

.portable-infobox .pi-data,
.portable-infobox .pi-group {
	border: "333333;
}

.portable-infobox .pi-header {
    background: #754836;
    opacity:0.8;
    text-align: center;
    color: white;
}
.portable-infobox .pi-navigation {
	background-color: #171717;
    font-size: 12px;
	text-align: center;
    text-color: darkred;
}

.portable-infobox .pi-title {
    background:#754836;
    opacity:0.9;
    color:white;
	border: 1px solid;
	border-color: var(--theme-box-border-color-inner);
	border-radius: var(--theme-box-border-radius-inner);
	text-align: center;
}

.portable-infobox .pi-title {
	font-weight: bold;
    box-shadow: 0 0 6px rgba(0,0,0,0.20);
	font-size: 15px;
	padding: 6px 3px;
	line-height: 1.2;
	text-align: center;
}

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