MediaWiki:Timeless.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Timeless skin */
body {
	color: #E6E6E6;
	background: #1A7D93; /* Affects scrollbar and footer */ }

/** Background **/
#mw-content-container {
    background: url(https://static.miraheze.org/gogiganticwiki/0/0f/Wiki_background.jpg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    border: none; }

/** 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/gogiganticwiki/b/b1/Wiki_Icon_Timeless_Menu_Large_Dark.svg"); }
	#site-tools h2 {
		background-image: url("https://static.miraheze.org/gogiganticwiki/b/b6/Wiki_Icon_Timeless_Gear_Large_Dark.svg"); }
	#user-tools h2 {
		background-image: url("https://static.miraheze.org/gogiganticwiki/e/e3/Wiki_Icon_Timeless_User_Large_Dark.svg"); }
}
@media screen and (min-width: 851px) {
	#personal h2 {
		background-image: url("https://static.miraheze.org/gogiganticwiki/4/48/Wiki_Icon_Timeless_User_Dark.svg"); }
}
.tools-inline li[id^='ca-nstab-'] a {
	background-image: url("https://static.miraheze.org/gogiganticwiki/4/44/Wiki_Icon_Timeless_Page_Dark.svg"); }
#ca-talk a {
	background-image: url("https://static.miraheze.org/gogiganticwiki/4/48/Wiki_Icon_Timeless_Talk_Dark.svg"); }
#ca-watch a {
	background-image: url("https://gogigantic.miraheze.org/wiki/File:Wiki_Icon_Timeless_Star_Dark.svg"); }
#ca-unwatch a {
	background-image: url("https://static.miraheze.org/gogiganticwiki/5/5e/Wiki_Icon_Timeless_Star_Filled_Dark.svg"); }
.tools-inline li a {
	background-image: url("https://static.miraheze.org/gogiganticwiki/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/gogiganticwiki/e/eb/Wiki_Icon_Timeless_Pencil_Dark.svg"); }
.client-js #ca-edit a {
	background-image: url("https://static.miraheze.org/gogiganticwiki/7/7c/Wiki_Icon_Timeless_Pencil_Source_Dark.svg"); }
#ca-viewsource a {
	background-image: url("https://static.miraheze.org/gogiganticwiki/7/72/Wiki_Icon_Timeless_Brackets_Dark.svg"); }
#ca-history a {
	background-image: url("https://static.miraheze.org/gogiganticwiki/b/bb/Wiki_Icon_Timeless_Clock_Dark.svg"); }
#ca-more span {
	background-image: url("https://static.miraheze.org/gogiganticwiki/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/gogiganticwiki/2/29/Wiki_Icon_Timeless_Arrow_Down_Dark.svg"); }
#t-contributions a {
	background-image: url("https://static.miraheze.org/gogiganticwiki/d/d3/Wiki_Icon_Timeless_Puzzle_Dark.svg"); }

/** Banner (search and user toolbar) **/
#mw-header-container {
    color: #E6E6E6;
    background: #1A7D93; }
.color-left, .color-middle, .color-right {
    background: #1A7D93; }
/* Title in banner */
.mw-wiki-title {
    text-transform: uppercase !important;
    font-family: 'MuseoSans500' !important;
    font-weight: bold; }
#p-logo-text {
    max-width: unset; }
#p-logo-text a {
    color: #FFFDDF !important; }
/* Username */
#personal h2 span {
    font-family: 'MuseoSans500' !important;
    font-weight: bold;
    margin-top: -5px !important; }
/* User dropdown */
.dropdown {
	background: #177082 !important;
	border: 3px solid #3FB9BE !important; }
.dropdown::before, #personal .dropdown::after { /* Arrows */
	border-bottom: 8px solid #3FB9BE !important; }
	
/** Search bar **/
#simpleSearch {
	background: #0A4557; 
	border: solid 2px #3FB9BE; }
#searchInput {
	color: #fff; }
.suggestions .suggestions-results {
	background-color: #177082;
	border: 2px solid #3FB9BE; }
.suggestions .suggestions-result {
	color: #E6E6E6; }
.suggestions .suggestions-special {
	background-color: #1A7D93;
	border: 2px solid #3FB9BE; }
.suggestions .suggestions-special .special-query, .suggestions-special .special-label {
	color: #FFFDDF !important; }
.suggestions .suggestions-result-current { /* Hover */
	background-color: #3FB9BE;
	color: #FFFDDF; }
#searchButton, #mw-searchButton { /* Icon */
	background-color: transparent !important;
	filter: invert(1); }

/** Logo **/
/* "Hiding" it - enough to have title on sticky banner, logo will be on Vector */
#p-logo {
	height: 1px !important; } /* Instead of display: none; to keep sidebar margin */

/** Sidebars **/
/* Placing all sidebars to the left aka forcing layout under 1340px as default 
   Taken from Inkipedia [ https://splatoonwiki.org/wiki/MediaWiki:Timeless.css ] */
@media (min-width: 1340px) {
	#mw-content-block {
		display: block; }
	#mw-content,
	#content-bottom-stuff {
		margin-left: 14em; }
	#mw-content-wrapper {
		float: right;
		margin-left: -14em;
		width: 100%; }
	/* Width and paddings */
	#mw-site-navigation, #mw-related-navigation {
		width: 14em; }
	#mw-related-navigation {
		padding: 0 1em 0 0; }
}
/* Other sidebar styling */
#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
	background: #177082;
	border: none;
    padding-bottom: 2px; }
#mw-site-navigation .sidebar-chunk {
	padding-bottom: 10px !important; }
@media (min-width: 1100px) {
	#mw-site-navigation .sidebar-chunk, #mw-related-navigation .sidebar-chunk {
		font-family: 'Montserrat', sans-serif; 
		font-size: 0.85em;
		padding: 1em 1.5em 0.01em; }
}
/* Headings */
.mw-portlet h3 {
	border-color: #3FB9BE !important;
	font-weight: bold !important; }
#mw-site-navigation .sidebar-chunk h3 {
	padding-bottom: 0.2em; }

/* Sticky toolbar, also taken from Inkipedia */
@media (min-height: 850px) and (min-width: 1100px) and (max-width: 1339px) {
	#mw-related-navigation {
		position: sticky;
		top: 4.5em;
		padding-bottom: .1em; }
}
@media (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; }
}

/** Content area **/	
#mw-content {
	background: #093340;
	border: 3px solid #3FB9BE;
	border-top: none;
	border-bottom: none;
	box-shadow: none;
	padding-bottom: 2em; }

/** Headers **/
.mw-body h2, .mw-body h3, .mw-body h4, .mw-body dt { /* dt is ; */
	font-family: 'Segoe UI'; }
.mw-body h2 { /* h2 on normal pages */
    font-weight: bold; }
#mw-subcategories h2, #mw-pages h2, #mw-category-media h2 { /* Content headers in categories */
	border-color: #3FB9BE !important;
	padding-bottom: 5px; }

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

/** Page tabs **/
.tools-inline a:hover {
    text-shadow: none; }
.tools-inline li.selected { /* Selected tab */
    border-bottom-color: #3FB9BE; }
.tools-inline li.selected:hover  {
    border-bottom-color: #FFFDDF !important; }

/** Categories block **/
#catlinks { /* General restyling */
	background: #093340;
    border: solid #3FB9BE;
	border-top: none;
    padding: 0 2em 1.5em;
    display: block; }
#mw-normal-catlinks {
	border-top: 2px solid #3FB9BE;
	padding-top: 1em; }
.catlinks li {
	border: none; }
#catlinks-sidebar { /* Hide categories from sidebar */
    display: none; }

/** Footer **/
.mw-footer-container {
    border: none;
    box-shadow: none;
    font-size: 90%; }
    
/** ToC **/
#toc {
	border: 2px solid #3FB9BE;
	background: #177082; }
.toctitle {
	border-color: #3FB9BE !important; }
.tocnumber, .toctogglelabel {
	color: #FFFDDF; }

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

/** Changes for smaller screens **/
@media only screen and (max-width: 1100px) { 
	#mw-content { /* Content area */
		border: none !important; }
	#mw-content-block {
    	background: #177082; }
	#mw-header-nav-hack{ /* Navigation (transformed sidebar) */
		background: #177082;
		border-color: #177082;
		padding-bottom: 5px;
		border-bottom: 3px solid #3FB9BE; }
	.sidebar-inner { /* Dropdowns (transformed sidebar) */
		background:#177082 !important;
		border:3px solid #3FB9BE !important;
		padding:1.5em; }
	#mw-site-navigation, #mw-related-navigation {
		width: initial; }
	#mw-site-navigation h2, #mw-related-navigation h2 { /* Dropdowns headers */
		font-weight: bold !important;
		font-family: 'Segoe UI';
		margin-top: -5px; }
	#mw-site-navigation .sidebar-chunk h2 span::before, #mw-site-navigation .sidebar-chunk h2 span::after { /* Dropdowns arrows */
		border-bottom: 7px solid #3FB9BE; }
	.color-left, .color-middle, .color-right { /* Banner "borders" */
		display: none; }
	#content-bottom-stuff { /* Categories block */
		background: #093340;
		border: none;
		border-top: 3px solid #3FB9BE; }
	#catlinks {
		border: none;
		padding: 0 0 1em; }
	#catlinks div {
		margin: 0 0 0.35em; }
	.mw-footer-container { /* Footer */
		border-top: 2px solid #3FB9BE; }
}

@media only screen and (max-width: 850px) { 
	#p-search { /* Search bar */
		border-bottom: 5px solid #1A7D93; }
	.sidebar-inner .mw-portlet-body {
		line-height: 0.5; }
	#mw-content { /* Content area (visually for banner) */
		border-top: 3px solid #3FB9BE !important; 
		padding-top: 0; }
	#mw-content-block { /* For space between categories and footer */
		background: #093340; }
	.sidebar-chunk { /* For categories block */
		background-color: #093340 !important; }
	.catlinks {
		padding-bottom: 0 !important; }
}

@media only screen and (max-width: 500px) { 
	#user-tools h2 { /* User icon */
		margin-top: -4px; }
	#personal-extra { /* Alert and Notice icons */
		top: 0.5em;	}
}
@media only screen and (max-width:480px) {
	#p-logo-text { /* Wiki title */
    	font-size: 85%;
		margin-top: 0.25em; }
}
@media only screen and (max-width:440px) {
	#p-logo-text {
    	position: absolute;
		margin: 0;
    	width: 150px !important;
    	font-size: 70%;
    	text-align: center; }
	#p-logo-text a.long {
    	line-height: 1; }
	#p-search {
		margin-top: unset; }
}

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

Search

MediaWiki:Timeless.css

Namespaces

More

Page actions

Navigation

Navigation

Game

Wiki

Wiki tools

Wiki tools

Anonymous

Search

MediaWiki:Timeless.css

Navigation

Wiki tools

Page tools

Categories
