MediaWiki:Timeless.css: Difference between revisions

Revision as of 06:11, 13 December 2023

/*
	ASCIIStick theme
	Made for videogameinterface.wiki
	Modifies the Timeless skin
	Based on the ASCII Stick, AS-2088-FC
	
	NB: Currently a big mess as I play with things.
*/

/*	Variables	*/

:root {
  /* Vars from GMT theme */
	--colour_bg:#ffffff;
	--colour_bg_secondary:#f8f9fa;
	--colour_secondary:black;
	--colour_tertiary:lightyellow;
	--colour_quaternary:#fff200;
	/* Vars from VIW theme */
		/* Colours */
	--silver:#c0c0c0;
	--black:#000000;
	--red:red;
	--yellow:yellow;
	--link:#3366cc;
	/*
	--link-visited:purple;
	--link-hover:;
	--link-new:red;
	*/
	/* Other */
	--rule-height:7px;
	--gridgap:22px;
}

body {
	font-family:none;
	font-size:1em;

}

/* Basic layout, colours */
div#mw-content,
div#mw-related-navigation div.sidebar-chunk,
div#mw-site-navigation div.sidebar-chunk {
	background-color:var(--silver);
	border:var(--black) 1px solid;
	border-top:var(--black) var(--rule-height) solid;
	margin-top:var(--gridgap);
	padding:0;
}

/* Restore padding where needed */
div#mw-content {
	padding-bottom:1em;
}
p,
pre,
#mw-page-header-links,
.content-table, /* tables */
.mw-content-ltr ul,
.sidebar-inner {
	margin:var(--gridgap);
}
li {
	list-style-position:inside;
}
.mw-content-ltr ul { /* fix gap in nested lists */
	margin-top:0.3em;
}
  
div#mw-content-container {
	background:unset;
	background-color:var(--silver);
	background-image: url(images/d/d6/timeless_asciistick_bg_grid.png);
	border-bottom:var(--black) var(--rule-height) solid;
}

div#mw-content ul > li {
	list-style-type:square;
}

/* Nested list margin */
li > ul {
	margin:0 0 0 var(--gridgap)!important;
}

div#mw-content div#toc ul > li::marker,
div#mw-content div.search-types ul > li::marker {
	content:none;
}

hr {
	border:none;
	border-bottom:var(--colour_secondary) 6px solid;
}

/*	Sidebars	*/

#p-logo {
	display:none;
}

#mw-site-navigation .sidebar-chunk h3,
#mw-related-navigation .sidebar-chunk h3 {
	border:none;
}

#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
	font-size:1em;
}

/*	Infoboxes	*/

div#infobox {
	display:grid;
	grid-gap:0;
	grid-template-columns:repeat(4,1fr)
}
div#infobox.infobox-3column {
	grid-template-columns:repeat(3,1fr)
}

div#infobox .infobox-section .infobox-image {
	border:1px solid black;
	padding-top:1px
}

div#infobox .infobox-section p {
	margin:0
}

div#infobox img {
	width:100%;
	height:auto;
	border: 1px solid var(--silver);
}

div#infobox div.content-table {
	height:100%;
	/* remove margin previously set for mulatiple elements */
	margin:0;
}

div#infobox table {
	background-color:#DBDBDB;
	border-collapse:collapse;
	height:100%;
	width:100%;
}

div#infobox table th,
div#infobox table td {
	border:1px solid var(--silver);
	padding:0.5em;
	vertical-align:top
}

div#infobox table th {
	text-align:right
}

/* Fix align of 'Connects' header in adaptor infobox */
div#infobox table th[colspan] {
	text-align:left;
}
/*	Other Templates	*/

blockquote {
	font-style:italic;
}

blockquote span.credit {
	font-style:normal;
}

em.jargon > a {
	color:green;
	cursor:help;
}

p.nb {
	background:var(--colour_bg_secondary);
	border:solid 1px var(--colour_quaternary);
	display:inline-block;
	margin:1em 0;
	padding:1em;
}

/*	Header	*/

#mw-header-container {
	background-color:var(--colour_secondary);
	box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#mw-header-hack {
	display:none;
}

#mw-content-container {
	margin-top:3em;
}

/*	Headings	*/

.mw-body h1.firstHeading {
	margin-top:0;
	border:none;
}

h1,h2,h3,h4,h5,h6 {
	font-weight:bold;
}

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
	background-color:var(--black);
	color:var(--silver);
	font-family:sans-serif;
	padding:0.4em var(--gridgap);
}

h2,h3,h4,h5,h6 {
	margin:2em 0 var(--gridgap) 0;
}

h4,h5,h6 {
	background-color:var(--silver);
	color:black;
}

h4 {
	font-size: 1.2em!important;
	border-top:1px solid black;
	border-bottom:1px solid black;
}

h5 {
	border-top:1px dashed black;
	border-bottom:1px dashed black;
}

h6 {
	border-top:1px dotted black;
	border-bottom:1px dotted black;
}

/*  Tables  */

.wikitable {
	background-color:unset;
	color:unset;
	margin:1em 0;
	border-collapse:collapse;
	border:none; /* this might break things... */
}

.wikitable > tr > th,
.wikitable > * > tr > th {
	background-color:#DBDBDB;
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
	border:1px solid black;
}

td.positive {
	/*background-color:#D4FFD4;*/
	background-color:#08CE08;
	text-align:center
}

td.negative {
	/*background-color:#FFD9D4;*/
	background-color:#DF796C;
	text-align:center
}

td.mixed {
	/*background-color:#DBDBDB;*/
	background-color:#B8CA90;
	text-align:center
}

td.unknown {
	text-align:center
}

/* Front page TOC table */
table.contents {
	margin:auto;
	width:100%;
	font-weight:bold;
}
table.contents td {
	text-align:center;
	width:25%;
}

thead {
  border-top:4px solid black;
}

/* Special comments */

.mw-message-box {
	border:none;
}
.mw-message-box-warning {
	background-color:var(--yellow);
}

p.comment {
	border:1px dashed var(--silver);
	background-color:darkgrey;
	margin:var(--gridgap) var(--gridgap) var(--gridgap) 11em;
	padding:var(--gridgap)!important;
	font-style:italic;
}
p.comment > span.user {
	display:block;
	font-style:normal;
	font-weight:bold;
}
p.nb {
	border:1px solid var(--black);
	background-color:darkgrey;
	margin:var(--gridgap);
	padding:var(--gridgap)!important;
}
p.nb::before {
	content:"●";
	color:var(--yellow);
	display:inline; /* Needed for vertical-align */
	text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	/* -webkit-text-stroke: 1px black; looks worse */
	padding-right:1em;
	vertical-align:text-bottom;
}

/* Links */

/* Keep blue colour of links in sidebars infobox headers */
div#mw-related-navigation div.sidebar-chunk a,
div#mw-site-navigation div.sidebar-chunk a,
div#infobox th a {
	color:var(--link);
}

/* Make links regular colour when hovered */
a:hover,
li a:hover span, /* Links in lists need extra work~ */
a.external:visited:hover /* So do _visited_ external ones */ {
	color:var(--link)!important;
}

/* Categories page */
div.mw-category-group {
	/* Don't break sections onver columns */
	break-inside:avoid-column;
	margin-bottom:1em;
}

div.mw-category-group h3 {
	background-color:unset;
	color:var(--black);
	margin-top:0;
}

/* Logo image */
#p-logo-text a {
	content:url("images/f/f4/timeless_asciistick_logo.png")/* / "Videogame Interface Wiki" alt text not workign for some reason */;
	height:38px;
	margin:auto;
}

#mw-indicator-mw-helplink a {
	padding-right:var(--gridgap);
}

/* Fix colour of user link in header */
#user-tools {
	filter:invert(100%);
}

.toc {
	background-color:#DBDBDB;
	border:solid 1px black;
	border-top-width:var(--rule-height);
	margin:var(--gridgap);
	padding:var(--gridgap);
}

.toc .toctitle {
	border-bottom:none;
	margin-bottom:var(--gridgap);
}

.toc .toctitle h2 {
	background-color:unset;
	color:black;
	padding-left:0;
}

.toc ul {
	margin:0;
}

.subpages {
	margin-left: 22px;
}

/* Fix image size in tables */
.mw-body-content table a > img {
	max-width:100%!important;
}