MediaWiki:Common.css

Style changes not showing up

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.
Documentation [ view ] [ talk ]

Overview

This documentation outlines the structure and purpose of the CSS style sheets used. Each CSS files is supposed to have it's own purpose to keep things organized. The two primary CSS files are Common.css, and Vector.css. There are no CSS files for the Themes, which would be Theme-dark.css, Theme-light.css, Theme-dark-dyslexic.css and Theme-light-dyslexic.css. The different Themes are not too different, so it's not quite necessary to have them all defined in seperate places, but are combined into ThemeDefinitions.css.
Currently all Style Sheets are loaded for all users, the 4 Themes would load only for those users that have picked them, but are currently combined in ThemeDefinitions.css which differentiates between choosen themes.
File Loading Order

Common.css: Loaded first and contains styles specific to the Oxygen Not Included Wiki, such as the Main Page and Templates.
ThemeDefinitions.css: Loaded by Common.css and includes theme definitions for light and dark skins, as well as the dyslexic-friendly theme (also available in light and dark).
Vector.css: Loaded last, this file defines the primary design and layout for the Vector skin, which is the major design of wiki.gg wikis.
Style Sheet

@import "https://oxygennotincluded.wiki.gg/load.php?mode=articles&articles=MediaWiki:ThemeDefinitions.css&only=styles";
@import url('https://fonts.googleapis.com/css2?family=Recursive:[email protected]&display=swap');

@font-face {
    font-family: "GRAYSTROKE";
    src: url("https://commons.wiki.gg/images/5/52/Graystroke.otf") format("opentype");
   }
@font-face {
	font-family: 'Economica';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Economica Bold'), local('Economica-Bold'), url(https://fonts.gstatic.com/s/economica/v6/Qw3aZQZaHCLgIWa29ZBTjecUDXx4.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://commons.wiki.gg/images/f/fe/OpenDyslexic3-Regular.ttf?202406081603) format('truetype'); /**[[File:OpenDyslexic3-Regular.ttf]]*/
}
@font-face {
  font-family: 'OpenDyslexic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://commons.wiki.gg/images/1/1c/OpenDyslexic3-Bold.ttf?202406081603) format('truetype'); /**[[File:OpenDyslexic3-Bold.ttf]]*/
}


/*********************************
* Change to MediaWiki appearance *
**********************************/

.vector-menu-portal .vector-menu-heading {
  font-size: 100%;
}

/* align Tools which got broken by icons in mobile view. Important stuff to overwrite Vector.css which loads later */
@media screen and (max-width:720px) {
    #p-tb .vector-menu-content-list {
        flex-direction: initial !important;
        align-items: center;
    }
  body.has-vector-mobile-menu #mw-navigation #mw-panel .vector-menu-portal:not(:last-child) {
    border-bottom: 1px solid var(--wiki-sidebar-border-color) !important;
  }
}

/* more space between icon and linktext */
#t-specialpages > a::before, 
#t-whatlinkshere > a::before, 
#t-print > a::before, 
#t-newpage > a::before, 
#t-upload > a::before, 
#t-cargopagevalueslink > a::before {
  margin-right: 0.25em;
}


/* enlarge side panel on dyxlexic font */
@media screen {
    .theme-dark-dyslexic, .theme-light-dyslexic {
        .mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer {
            margin-left: 13em;
        }
        #mw-panel, #p-logo a {
            width: 12em;
        }
    }
    .vector-body {	
        font-size: calc(1em * 0.9);
    }
}

@media screen and (min-width:720px) {
  #p-logo {
    height: 80px;
    transform: translate(0,-50px);
  }
}

/* Unnecessary in those namespaces */
.ns-8 .mw-editTools,
.ns-828 .mw-editTools {
  display: none;
}

/* remove the margin of 4em, that's way too much */
ul.gallery.gallery.gallery.mw-gallery-slideshow {
  margin: 0.5em 0;
}


/********************************
* Miscellaneous utility classes *
*********************************/

@media screen and (max-width:720px) {
  img.large-image { height: auto; max-width: 90vw; }
}
@media screen and (min-width:720px) {
  img.large-image { height: auto; max-width: calc(90vw - 9em); }
}

.responsive-image {
	max-width:100%;
	height:auto;
}

.pixelated {
  image-rendering:pixelated;
}

@media screen and (min-width:720px){
	.mobileonly {
		display:none !important;
	}
}
@media screen and (max-width:720px) {
	.nomobile {
		display:none !important;
	}
}

.hoverpoint:hover { 
	cursor:pointer; 
}

.nowrap {
	white-space: nowrap;
}

.floatleft .image img,
.floatright .image img {
  max-width: 90vw;
  height: auto;
}

.longtable thead th {
  position: sticky;
  top: var(--wikigg-header-height);
  z-index: 1;
}

@media screen and (max-width:720px) {
  .longtable thead th {
    top: 0;
  }
}

.toclimit-2 .toclevel-1 > ul,
.toclimit-3 .toclevel-2 > ul,
.toclimit-4 .toclevel-3 > ul,
.toclimit-5 .toclevel-4 > ul,
.toclimit-6 .toclevel-5 > ul,
.toclimit-7 .toclevel-6 > ul {
    display: none;
}

div.filtertable__checkbox {
  display: inline;
  margin-left: calc(0.9em + 5px);
}

.qty-unit mtext { font-family: sans-serif; }

.temp-celsius { display:inline; }
.temp-fahrenheit { display:none; }

/***************************
* End misc utility classes *
****************************/

/*******************************
* Main page layout             *
* [[Oxygen Not Included Wiki]] *
********************************/
#mp-box-welcome {grid-area: welcome;}
#mp-box-about {grid-area: about;}
#mp-box-vanilla {grid-area: vanilla;}
#mp-box-spaced-out {grid-area: spaced;}
#mp-box-frosty-planet {grid-area: frosty;}
#mp-box-video {grid-area: video;}
#mp-box-community {grid-area: community;}
#mp-box-wiki {grid-area: wiki;}

#mp-container {
	display:grid;
	grid-template-areas:
		"welcome"
		"about"
		"vanilla"
		"spaced"
		"frosty"
		"video"
		"community"
		"wiki";
	grid-template-columns:100%;
	gap:10px;
	row-gap: 10px;
    column-gap: 8px;
}

@media screen and (min-width:980px) {
	#mp-container {
		grid-template-areas:
			"welcome welcome "
			"about about"
			"vanilla spaced"
			"vanilla frosty"
			"vanilla video"
			"wiki community";
		grid-template-columns:1fr 1fr;
	}
}

@media screen and (min-width:1350px) {
	#mp-container {
		grid-template-areas:
			"welcome welcome video"
			"about about video"
			"vanilla spaced spaced"
			"vanilla frosty frosty"
			"wiki wiki community";
		grid-template-columns: 4fr 1fr 2fr;
  }
}

.mp-box {
	display:flex;
	flex-flow:column nowrap;
	width: calc(100% - 2px);
	box-sizing: border-box;
	background:rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
	border:1px solid var(--wiki-content-border-color);
	padding:0px;
}

.mp-body {
	height: 100%;
	display: flex;
	padding:0.5em;
	flex-flow: column nowrap;
}

.mp-box.spaced-content .mp-body {
	justify-content:space-around;
}

.mp-box.centered-content .mp-body {
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
}

.mp-box.has-floating-image {
	display:block;
}
.mp-box.has-floating-image .nomobile img {
  width: 25vw;
  height: 17.9vw;
  min-height: 5em;
  min-width: 6.977em;
  max-height: 7.5em;
  max-width: 10.46em;
}

.mp-box.has-floating-image .mp-body {
	height:unset;
	display:block;
}

.mp-box h2 {
	text-align:center;
	font-weight:bold;
	font-family:var(--wiki-heading-font-family);
    overflow: initial;
	border-bottom: 1px solid var(--wiki-content-border-color);
	font-size: 150%;
	margin: 0;
	padding: 5px 0;
	color:var(--wiki-heading-color);
}

.mp-box .welcome-message {
  font-size: 200%;
  margin: 0;
  padding: 5px 0;
}

#mp-box-welcome {
	text-align:center;
	position:relative;
	overflow:hidden;
	font-size:1.25em;
}

.theme-dark-dyslexic #mp-welcome,
.theme-light-dyslexic #mp-welcome {
  font-family: var(--wiki-font-dyslexic);
  font-size: 0.85em;
}
#mp-welcome {
	position: relative;
	font-family: var(--wiki-heading-font-family);
	z-index: 2;
	box-sizing: border-box;
}

#mp-welcome .welcome-subtitle {
	background:rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.85);
	padding:0.5em;
}

#mp-box-gameplay .mp-body {
	display: grid;
	text-align: center;
	grid-template-areas: "A B";
	grid-template-columns: 60% auto;
}

#mp-box-gameplay .mp-body > :first-child {
	border-right:1px solid var(--wiki-content-border-color);
}

.mp-links {
  --gap:10px;
}

.mp-links > ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	margin: 2px;
	gap:var(--gap);
}

.mp-links > ul > li {
	display:flex;
	flex-flow:column nowrap;
	align-items:stretch;
	text-align: center;
	box-sizing:border-box;
	flex: max(calc(50% - var(--gap)), 5em) 1 1;
	outline:1px solid var(--wiki-content-link-color);
	transition:0.1s ease-in;
}

.mp-links > ul > li:hover {
	background-color:rgba(var(--wiki-content-link-color--rgb), 0.2);
}

.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}

.mp-links > ul > li:hover a {
	text-decoration: underline;
}

.mp-links > ul > li > * {
	display: flex;
	align-items: center;
	justify-content: center;
	height:100%;
	flex:1 1 auto;
	box-sizing:border-box;
	padding:5px;
	font-size: 135%;
	font-family:var(--wiki-heading-font-family);
}

.mp-links > ul > li > :first-child {
  height:100%;
}

.mp-links > ul > li > :last-child:not(:first-child) {
  height:unset;
}

.mp-links.stretch,
.mp-links.stretch > ul {
	height:100%;
}

.mp-links.side-image li {
	flex-flow:row nowrap;
}

.mp-links.nolines > ul > li {
	outline:none;
}

.mp-links.nolines > ul > li:hover {
	background-color:transparent;
}

/***********************
* End main page layout *
************************/

/*****************************
*     PortableInfoboxes      *
******************************/
:root {
	--pi-background: var(--wiki-content-background-color);
	--pi-secondary-background: var(--wiki-accent-color);
	--pi-secondary-background--rgb: var(--wiki-accent-color--rgb);
	--pi-secondary-background-label: var(--wiki-accent-label-color);
	--pi-border-color: rgba(var(--pi-secondary-background--rgb),0.5);
}

.portable-infobox {
	color: var(--wiki-content-dynamic-color);
	border: 1px solid rgba(var(--wiki-content-dynamic-color--secondary--rgb),0.4);
	border-radius: 7px;
	background-color: transparent;
	padding: 0.2em;
	position:relative;	
	width: 400px;
	max-width: 100%;
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
	text-align:center;
	font-size:1.5em;
	background:rgba(var(--pi-secondary-background--rgb), 0.75);
	color:var(--pi-secondary-background-label);
	font-family: var(--wiki-heading-font-family);
	font-size: 2em;	
	line-height: 1;
	border-radius: 5px;
	padding: 0.5em;
	text-align: center;
}

.pi-data {
	border: none;
}

.portable-infobox .pi-data:has(.pi-data-label) {
	background:rgba(var(--pi-secondary-background--rgb), 0.18);
	border-bottom: 1px var(--pi-border-color) solid;
	border-radius: 5px;
	padding: 0;
}

.portable-infobox .pi-image {
	padding: 8px;
}

.pi-image-thumbnail {
	max-width:100%;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	background: var(--pi-secondary-background);
	color: var(--pi-secondary-background-label);
}

/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
	border-bottom: 0;
	font-family: var(--wiki-heading-font-family);
	font-weight: 700;
	margin: 0;
}
.theme-dark-dyslexic .portable-infobox h3,
.theme-light-dyslexic .portable-infobox h3 {
	font-family: var(--wiki-font-dyslexic);
}

.pi-data-label {
	flex-basis: 140px;
}
.pi-data-value {
	flex-basis: 260px;
	align-content: center;
}
h3.pi-data-label > p { display: inline; }

.portable-infobox section,
.portable-infobox section.pi-group {
    margin-left: 0;
}

.portable-infobox .pi-data-label:not(.pi-horizontal-group-item),
.portable-infobox .pi-header {
	font-weight: 500;
    border-radius: 5px;
	padding: 0.5px 7px;
	text-align: right;
}

.portable-infobox .pi-navigation {
	text-align: center;
	background: none;
}

.portable-infobox .pi-group .pi-header {
    font-weight: bold;
    text-align: center;
}

.portable-infobox .pi-group,
.portable-infobox .pi-group .pi-horizontal-group-item {
	border: none
}

.portable-infobox .pi-data-label:not(.pi-horizontal-group-item),
.portable-infobox .pi-data-label:not(.pi-horizontal-group-item) a,
.portable-infobox .pi-header:not(.pi-horizontal-group-item),
.portable-infobox .pi-header:not(.pi-horizontal-group-item) a {
    font-weight: 500;
}

/* Make tabber take up the available space */
.wds-tabs__tab {
	flex-grow: 1;
	text-align: center;
}

/* horizontal groups */
.pi-horizontal-group .pi-data-label {
    padding-bottom: 0.2em;
    font-size:95%;
}

.portable-infobox .pi-data-label {
 	background: rgba(var(--pi-secondary-background--rgb),0.18);
}
/*****************************
*     explicit Infoboxes     *
******************************/
.pi-data[data-source="caption"] {
  white-space: wrap;
}
/* DLC annotations for Buildings */
.pi-item[data-source="DLC"] .pi-data-value {
    position: absolute;
    opacity: 0.7;
    text-align: right;
    width: 100%;
    padding-right:10px;
    box-sizing:border-box;
    right: 0;
}

.pi-item[data-source="unlocks"] .pi-data-value,
.pi-item[data-source="desc"] .pi-data-value,
.pi-item[data-source="uses"] .pi-data-value,
.pi-item[data-source="description"] .pi-data-value {
    margin: auto;
    text-align: center;
    flex-basis: 400px;
}

.pi-item[data-source="flavorText"] .pi-data-value,
.pi-item[data-source="image caption"] .pi-data-value,
.pi-item[data-source="caption"] .pi-data-value,
.pi-item[data-source="recipe-desc "] .pi-data-value,
.pi-item[data-source="tooltip"] .pi-data-value {
    margin: auto;
    text-align: center;
    font-style: italic;
    flex-basis: 400px;
}

/* Infobox RocketModuleSO horizontal group*/
.pi-group[data-item-name="Engine Values"] {
    padding: 1px;
    border-radius: 12px;
}

.pi-group[data-item-name="Engine Values"] thead tr th:first-child { border-radius: 10px 0 0 0; }
.pi-group[data-item-name="Engine Values"] thead tr th:last-child  { border-radius: 0 10px 0 0; }

/* Targeting .pi-data-label elements */
.pi-item[data-source^="element-"][data-source$="-amount"] .pi-data-label,
.pi-item[data-source^="resource-"][data-source$="-amount"] .pi-data-label {
    font-weight: normal !important;
    background: transparent !important;
}

/* Targeting .pi-data-value elements */
.pi-item[data-source^="element-"][data-source$="-amount"] .pi-data-value,
.pi-item[data-source^="resource-"][data-source$="-amount"] .pi-data-value {
	font-weight: bold !important;
	border-radius: 5px !important;
	background-color: var(--wiki-content-background-color--secondary) !important;
}

/* horizontal groups */
.pi-group[data-item-name="Engine Values"] thead tr th,
.pi-group[data-item-name="smallgeyser"] thead tr th {
    background-color: rgba(var(--wiki-content-text-color--rgb),0.1);
	font-family: var(--wiki-heading-font-family);
}

/* Infobox RocketModuleSO horizontal group*/
.pi-group[data-item-name="Engine Values"] {
    border: 1px solid var(--wiki-content-background-color--secondary);
}

/* Infobox Geyser small horizontal group*/
.pi-group[data-item-name="smallgeyser"] {
    margin-bottom: -60px;
    margin-top: 2px;
}

/* background colors for table header */
.pi-group[data-item-name="smallgeyser"] thead tr th { 
    background-color: rgba(var(--wiki-content-text-color--rgb),0.1); 
}
/* background colors for table header */
.pi-group[data-item-name="smallgeyser"] thead tr th:first-child { background-color: transparent; }

/* border radii for headlines */
.pi-group[data-item-name="smallgeyser"] thead tr th:nth-child(2) { border-radius: 6px 0 0 0; }
.pi-group[data-item-name="smallgeyser"] thead tr th:last-child   { border-radius: 0 6px 0 0; }

/* align image */
.pi-group[data-item-name="smallgeyser"] .pi-data-value[data-source="imageName"] {
    position: relative;
    top:-45px;
    vertical-align:middle;
    height: 150px;
}


/*****************************
*   End PortableInfoboxes    *
******************************/

/********************************************
* Utility classes for standard MW galleries *
*********************************************/
/* it's important that spaced comes before centered in the sheet */
.gallery.spaced {
  display:flex;
  flex-flow:row wrap;
  justify-content:space-evenly;
  margin-left:unset;
}

.gallery.centered {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/**********************
* End gallery classes *
***********************/


/* for [[Buildings#DLC Exclusive Buildings]] in the cargo query  */
.DLC-building-header {
	font-size: 1.5em;
	font-family: var(--wiki-heading-font-family);
	margin-top: 0.75em;
	margin-bottom: 0.125em;
	border-bottom: 1px solid var(--wiki-content-border-color);
}

/* ---------------------------------------------------------------------------------------------------------------

For Template documentations Template:Doc

--------------------------------------------------------------------------------------------------------------- */

.documentation {
    margin-top: 2em;
}

.documentation .documentation--header img {
    vertical-align: sub;
}

.documentation .documentation--header {
    border-bottom: 1px solid #BDCAC3;
    margin-bottom: 1ex;
}

.documentation .documentation--header .documentation--header--title {
	font-family: var(--wiki-heading-font-family);
    font-size: 1.75em;
    margin-right: 0.75em;
}

.documentation .documentation--header .documentation--header--edit-notice {
    font-size: 0.9em;
}

.documentation .documentation--header .documentation--header--purge {
    float: right;
    margin-left: 5px;
    translate: 0px 0.8em;
}

.documentation .documentation--body {
    border-radius: 5px; 
    border: 2px solid var(--wiki-content-border-color); 
    margin: 0.5em auto 1em; 
    padding: 0.8em 1.2em; 
    background: var(--wiki-content-background-color--secondary);
}

/* ---------------------------------------------------------------------------------------------------------------

For Template:Ambox

--------------------------------------------------------------------------------------------------------------- */

.ambox {
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
    display: flex;
    align-items: center;
}

.ambox-tiny {
    font-size: 90%;
    margin: 2px 0;
    width: auto;
}

.ambox-text {
    padding: 0.25em 0.5em;
}

.ambox-image {
    padding: 2px 0 2px 0.5em;
}

.ambox-tiny .ambox-image {
    padding: 2px 0.5em;
}

.ambox-tiny img {
	max-height: 1.5em;
	width: auto;
}

/* Ambox colors */
.ambox-info    { border-left: 10px solid #1e90ff; }
.ambox-success { border-left: 10px solid var(--wiki-success-color); }
.ambox-warning { border-left: 10px solid var(--wiki-warning-color); }
.ambox-alert   { border-left: 10px solid var(--wiki-alert-color); }
.ambox-frosty {   
	border-left: 10px solid;
	border-image-source: linear-gradient(to bottom, #cdfffe, #2650a2);
	border-image-slice: 1;

}
/* ---------------------------------------------------------------------------------------------------------------

Navboxes

--------------------------------------------------------------------------------------------------------------- */

/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist {
	float: left;
	padding-left: 5px;
}

.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	/*
	 * don't trust the note that says margin doesn't work with inline
	 * removing margin: 0 makes dds have margins again
	 * We also want to reset margin-right in Minerva
	 */
	margin: 0; 
	display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
	display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
	display: none;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
 * seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
	content: ": ";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
	content: " \00B7 ";;
	font-weight: bold;
}

/* Add parentheses around nested lists */
.hlist dd dd:first-child::before,
.hlist dd dt:first-child::before,
.hlist dd li:first-child::before,
.hlist dt dd:first-child::before,
.hlist dt dt:first-child::before,
.hlist dt li:first-child::before,
.hlist li dd:first-child::before,
.hlist li dt:first-child::before,
.hlist li li:first-child::before {
	content: " (";
	font-weight: normal;
}

.hlist dd dd:last-child::after,
.hlist dd dt:last-child::after,
.hlist dd li:last-child::after,
.hlist dt dd:last-child::after,
.hlist dt dt:last-child::after,
.hlist dt li:last-child::after,
.hlist li dd:last-child::after,
.hlist li dt:last-child::after,
.hlist li li:last-child::after {
	content: ")";
	font-weight: normal;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}

.hlist ol > li {
	counter-increment: listitem;
}

.hlist ol > li::before {
	content: " " counter(listitem) "\a0";
}

.hlist dd ol > li:first-child::before,
.hlist dt ol > li:first-child::before,
.hlist li ol > li:first-child::before {
	content: " (" counter(listitem) "\a0";
}
/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/**********************************************************
* Template:Navbox (needs semantic horizontal lists above) *
***********************************************************/
.navbox {
	clear: both;
	margin: 1em 0;
	padding: 3px;
	font-size: 90%;
	width: 100%;
	border: 1px solid var(--wiki-content-border-color);
	box-sizing: border-box;
}
.navbox-inner,
.navbox-subgroup {
	border-spacing: 0;
	width: 100%;
}
/* Reduce spacing between adjacent navboxes */
.navbox + .navbox {
	margin-top: -1px;
}
/* Spacing between rows */
.navbox-spacer {
	height: 2px;
}
/* Title bars and labels */
.navbox-title {
	font-weight: bold;
	font-size: 115%;
	padding: 0.25em 0.6em;
	line-height: 1.5em;
	background: var(--wiki-accent-color);
    color: var(--wiki-accent-label-color);
}
.navbox-header {
    background: rgba(var(--wiki-accent-color--rgb),0.85);
    color: var(--wiki-accent-label-color);
}

.navbox-title,
.navbox-abovebelow {
	padding-left: 1em;
	padding-right: 1em;
	text-align: center;
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
	background: rgba(var(--wiki-accent-color--rgb), 0.18);
	color: var(--wiki-content-text-color);
	border: 1px solid var(--wiki-content-border-color);
}
.navbox .navbox-header a,
.navbox .navbox-header a:visited,
.navbox .navbox-header a.external,
.navbox .navbox-header a.external:visited,
.navbox .navbox-title a,
.navbox .navbox-title a:visited,
.navbox .navbox-title a.external,
.navbox .navbox-title a.external:visited {
	color: var(--wiki-accent-link-color);
}
.navbox-title .mw-collapsible-toggle {
	font-weight: normal;
	text-align: right;
}
.navbox-title-text {
	font-size: 105%;
}
/* Navbox-related links */
.navbox-title .navbar {
	float: left;
	margin-right: 0.5em;
}
.navbox-title .navbar a.external::after {
    content: unset;
}
.navbox .hlist a.external::after {
	display:none;
}
/* Groups */
.navbox-group {
	font-weight: bold;
	padding: 0 0.5em;
	white-space: nowrap;
	text-align: center;
}
/* Zebra colouring for rows */
.navbox-even {
	background: rgba(var(--wiki-content-text-color--rgb),0.05);
}
/* Subgroups: equal group labels between different child navboxes */
.navbox-subgroup > tbody > tr {
	display: flex;
}
.navbox-subgroup .navbox-title {
    width: 100%;
}
.navbox-subgroup .navbox-group {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: 11em;
	flex-grow: 1;
	flex-shrink: 0;
	white-space: normal;
}
/* Lists */
.navbox-list {
	width: 100%;
}
/* Mobile adjustments */
@media screen and (max-width: 1280px) {
	.mw-body .navbox-inner table {
        display: table;
	}
}
@media screen and (max-width: 720px) {
	.mw-body .navbox {
		display: none;
	}
}
/**********************
* End Template:Navbox *
***********************/


/* ---------------------------------------------------------------------------------------------------------------

For Template:Tab and Template:Schematic

--------------------------------------------------------------------------------------------------------------- */

.ONI-tabbber--tabcontainer {
    background-color: var(--wiki-content-background-color--secondary);
    border-radius: 5px 5px 0px 0px;
}

.ONI-tabbber--tabcontainer .ONI-tabbber--tab {
    cursor: pointer;
    float: left;
    padding: 3px;
    text-align: center;
    white-space: nowrap;
}

.ONI-tabbber--tabcontainer .ONI-tabbber--tab.ONI-tabbber--tab--disabled {
    cursor: auto;
    opacity: 0.25;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);}
    
.ONI-tabbber--tab:not(.ONI-tabbber--tab--disabled):hover, 
.ONI-tabbber--tabcontainer .ONI-tabbber--tab.ONI-tabbber--tab--active {
    font-weight: bold;
    background-color: var(--wiki-body-dynamic-color--secondary);
}

.ONI-tabbber--tabcontainer .ONI-tabbber--tab.ONI-tabbber--tab--default {
    background-color: transparent !important;
}

.ONI-tabbber--tabcontents {
    border: 2px solid var(--wiki-content-background-color--secondary);
    border-radius: 0px 0px 5px 5px;
}


/* ---------------------------------------------------------------------------------------------------------------

For Template:Techtree and Template:Research

--------------------------------------------------------------------------------------------------------------- */

.research-box {
	background:white;
	color:black;
	border:white 1px solid;
	padding:0;
	width:100%;
    font-size:66%;
}

.research-box-header {
	background:#6a6966;
	color:white;
	border:black 1px solid;
	width: 96px;
	font-size: 75%;
}

.research-bar {
	text-align:center;
	color:black;
	border:1px solid black;
    width: 100%;
}

.research-novice       { background:#98aae9; } /* pale blue   */
.research-intermediate { background:#994e76; } /* ONI magenta */
.research-matscience   { background:#e7d211; } /* gold        */
.research-interstellar { background:#ef8d27; } /* orange      */

.research-item {
    width: 30px;
    height: 30px;
    text-align: center;
    border: 1px solid black;
    margin: 1px 0;
    line-height: 28px;
}

.research-item img {
    height: auto;
    width: auto;
    max-width: 28px;
    max-height: 28px;
}
.research-unlocks {
    display: grid;
    grid-template-areas: "A B C" "D E F" "G H I" "J K L";
    grid-template-columns: 33px auto 33px;
}
/* Define Research Box IDs to grid IDs */
#research-1 { grid-area: A; }
#research-2 { grid-area: B; }
#research-3 { grid-area: C; }
#research-4 { grid-area: D; }
#research-5 { grid-area: E; }
#research-6 { grid-area: F; }
#research-7 { grid-area: G; }
#research-8 { grid-area: H; }
#research-9 { grid-area: I; }
#research-10{ grid-area: J; }
#research-11{ grid-area: K; }
#research-12{ grid-area: L; }

/* ---------------------------------------------------------------------------------------------------------------

For [[Template:Tab]] and [[Template:Schematic]]

--------------------------------------------------------------------------------------------------------------- */

.tabcontainer {
    background-color: rgba(var(--wiki-content-text-color--rgb), .6);
}

.tabcontainer .tab,
.tabcontainer .tab.disabled {
    background-color: var(--wiki-content-background-color--secondary);
}

.tabcontainer .tab:hover {
    background-color: rgba(var(--wiki-content-text-color--rgb), .3);
}

/* ---------------------------------------------------------------------------------------------------------------

For [[Template:Hover]]

--------------------------------------------------------------------------------------------------------------- */
/* Touch device fallback */
@media (hover: none) {
	span[title]::after {
		content: attr(title);
		position: fixed;
		bottom: 105px;
		left: 10%;
		right: 10%;
		text-align: center;
		
		color: #e6e6e6;
		background-color: #0008;
		padding: 0.5em;
		border-radius: 1.5em;
		
		transition: opacity 0.5s ease-out, visibility 0.5s;
		opacity: 0;
		animation: none;
		visibility: hidden;
	}
	span[title]:focus::after {
		opacity: 1;
		animation: 0.5s ease-out toast, 0.5s 3.5s ease-out fade-out forwards;
		visibility: visible;
	}
}

@keyframes toast {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0%);
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}


/* ---------------------------------------------------------------------------------------------------------------

For [[Template:ElementTooltip]]

--------------------------------------------------------------------------------------------------------------- */

.theme-dark-dyslexic .element-tooltip--content,
.theme-light-dyslexic .element-tooltip--content {
	width: 475px !important;
}


/* ---------------------------------------------------------------------------------------------------------------

For [[Module:Data/doc]]

--------------------------------------------------------------------------------------------------------------- */
#oni-yaml2lua-strings,
#oni-yaml2lua-elements {
    display:grid;
    grid-template-columns: auto 10em auto;
}
.oni-yaml2lua--formgroup {
    padding:5px;
    display: grid;
    text-align: center;
}
.oni-yaml2lua--formgroup textarea { 
   resize: none;
   height: 20em;
} 

.oni-yaml2lua--buttoncontainer {
    padding: 5px;
    position: relative;
    height: 100%;
}

.oni-yaml2lua--buttoncontainer button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    background-color: var(--wiki-accent-color);
    border-color: var(--wiki-accent-color);
    color: var(--wiki-accent-label-color);
    border-radius: 3px;
    font-weight: 700;
}

.oni-yaml2lua--filtercontainer {
  position: absolute;
  top: 3em;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.oni-yaml2lua--filtercontainer select {
  width: 6em; 
  height: 1.5em;
}


/* start  default DRUID */
.druid-container {
    /* These variables are designed to inherit from your wiki's color variables.
       If your wiki uses a different naming scheme, change the inner names to match yours.
       If your wiki doesn't use color variables you should consider doing so,
       otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
    */
    --druid-background-color: var(--wiki-content-background-color, #ffffff);
    --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
    
    --druid-secondary-background-color: var(--wiki-accent-color, #36c);
    --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
    --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
    --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
    
    --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
    --druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
    
    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
    --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
    
    --druid-link-color: var(--wiki-content-link-color, #0645ad);
    --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
    --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
    --druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
}

.druid-container {
    border: 4px solid var(--druid-border-color);
    border-radius: 3px;
    background: var(--druid-background-color);
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
	width:100%;
	max-width:22em;
    box-sizing: border-box;
    border-collapse: collapse;
}

@media screen and (max-width: 720px) {
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}

.druid-main-images-file,
.druid-main-image {
    text-align:center;
}

.druid-infobox .druid-title,
.druid-infobox .druid-section {
    background:rgba(var(--druid-secondary-background-color--rgb), 0.75);
    color:var(--druid-secondary-background-label-color);
    text-align:center;
    font-size:1.5em;
    padding:1px;
}

.druid-infobox .druid-title a,
.druid-infobox .druid-section a {
    color:var(--wiki-accent-link-color);
}

.druid-infobox .druid-section {
    font-size: 1.25em;
    font-weight: 500;
}

.druid-label {
    font-weight:bold;
    text-align: right;
	box-sizing: border-box;
}

.druid-row > .druid-label {
    width: 48%;
    flex-shrink: 0;
}

.druid-row > .druid-label,
.druid-row > .druid-data {
	padding-inline: 0.3em;
}

.druid-main-image,
.druid-main-images {
    padding:5px;
}

.druid-main-image img, 
.druid-main-images img {
    max-width:100%;
    height:auto;
}

.druid-main-images-labels {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    margin:0.25em;
    gap:0.25em;
}

.druid-main-images-label {
    cursor:pointer;
    flex:1 1 auto;
    text-align:center;
    transition:.1s ease-in;
    outline:1px solid var(--druid-link-color);
}

.druid-main-images-label.focused {
    background:var(--druid-link-color);
    color:var(--druid-link-label-color);
}

.druid-main-images-label:not(.focused):hover {
    background:rgba(var(--druid-link-color--rgb), 0.25);
}

.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
    display:none;
}

.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
    display:none;
}

.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display:none;
}

.druid-grid {
    display:grid;
    gap: 0.3em;
	padding: 0.35em;
}

.druid-grid-item {
    background:var(--druid-tertiary-background-color);
    padding:0.25em;
    border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
    border-radius: 2px;
}

.druid-grid-item > .druid-label,
.druid-grid-item > .druid-data {
	text-align: center;
}

.druid-data-wide {
	width:100%;
}

.druid-section-container > .druid-collapsible {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.druid-collapsed {
    display:none!important;
}

.druid-collapsible {
    cursor:pointer;
    position:relative;
}

.druid-collapsible::after {
    content:'\2013';
    display:block;
    position:absolute;
    right:10px;
    font-size:20px;
    font-weight:bold;
    color:var(--druid-secondary-background-label-color);
}

.druid-collapsible-collapsed::after {
    content:'+';
}

.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
  display: none;
}

/*****************************************
Div support
*****************************************/

div.druid-row {
    display:flex;
    margin-block: 1px;
}

div.druid-row + div.druid-row {
	margin-top: 0;
}

div.druid-row > .druid-label {
	background: var(--druid-tertiary-background-color);
}

.druid-infobox .druid-title {
  font-weight: 700;
}

.druid-infobox #toc {
    display:none;
}


/********
Custom display classes
*********/

div.druid-stacked.druid-row,
.druid-stacked div.druid-row {
    flex-direction: column;
}

.druid-stacked.druid-row > .druid-label,
.druid-stacked .druid-row > .druid-label {
    text-align: left;
    width: 100%;
    flex-basis:unset;
}

.druid-stacked.druid-row > .druid-data,
.druid-stacked .druid-row > .druid-data {
    padding-left: .75em;
}
/* end default DRUID */

/********
ONI DRUID customization
*********/
.druid-container {
	border: 2px solid var(--druid-border-color);
	border-radius: 7px;
	padding: 0.2em;
	max-width: 30em;
}

.druid-infobox .druid-title,
.druid-infobox .druid-section {
	border-radius: 5px;
	font-family: var(--wiki-heading-font-family);
}

.druid-infobox .druid-section {
	font-size: 1.5em;
}

div.druid-row {
	border-bottom: 1px solid var(--druid-tertiary-background-color);
	border-radius: 5px;
}

div.druid-section-container + div.druid-section-container {
	margin-top: 3px;
}

div.druid-row > .druid-label {
	border-radius: 5px;
}

.druid-infobox .druid-title {
	font-size: 2em;	
}

.druid-row > .druid-label {
  width: 40%;
  font-size: 0.9em;
  font-family: var(--wiki-heading-font-family);
}
.druid-row > .druid-data {
  font-size: 0.85em;
}

.druid-data-wide {
	text-align:center;
	width: 100%;
	font-size: 0.9em;
}

.druid-infobox .druid-section {
	background: rgba(var(--druid-secondary-background-color--rgb),0.5);
	width: 100%;
}
Personal tools

Navigation menu

Namespaces

Views

Navigation

Gameplay

External Resources

More KLEI Wikis

Tools

MediaWiki:Common.css

Style changes not showing up

Documentation [ view ] [ talk ]

Overview

File Loading Order

Style Sheet

Navigation menu

Search

MediaWiki:Common.css

Style changes not showing up

Documentation [ view ] [ talk ]

Overview

File Loading Order

Style Sheet
