MediaWiki:Common.css: Difference between revisions

Revision as of 23:04, 27 October 2025

/**********************
*** Start variables ***
**********************/
:root {
	--wiki-content-background-color: #13161a;
	--wiki-content-background-color--secondary: #1a1e23;
	--wiki-content-background-color--tertiary: #21252a;
	--wiki-accent-color: #131313;
	
	--wiki-body-dynamic-color: #cbced1;
	--wiki-content-border-color: #2e3237;
}

/**********************
***  End variables  ***
**********************/

/***************************
*** Start general styles ***
***************************/

/* general graphics are pixel art */
.mw-body {
	image-rendering: pixelated;
}

.right {
	text-align: right;
}

.ranger-navbox {
	clear: both;
}

table.table-align-top tr {
	vertical-align: top;
}

/* enlarge small pixel icons in image viewer */
.mw-mmv-image img {
	min-width: 10em;
	min-height: 10em;
 	image-rendering: pixelated;
}

.mw-parser-output .plain-link a.external {
	background: none;
	padding-right: 0;
}

/***************************
**** End general styles ****
***************************/

/**************************
* Start Portable infobox *
**************************/

.portable-infobox.pi-theme-default {
	background-color: #1a1e22;
	--pi-secondary-background: #1a1e22;
}

.portable-infobox .pi-image img {
    width: 200px;
    height: auto;
}

.portable-infobox .pi-data[data-source=caption] {
  text-align: center;
}

/***************************
*** End Portable infobox ***
***************************/

/**************************
* Start [[Module:Abilities]] *
**************************/

.ability-supercontainer {
	--ability-background-color: var(--wiki-content-background-color--tertiary);
	--ability-border-inner-color: var(--wiki-content-background-color--secondary);
	--ability-upgrade-background-color: var(--wiki-accent-color);
	--ability-upgrade-separation-color: var(--wiki-content-background-color--tertiary);
	--ability-upgrade-border-inner-color: var(--wiki-content-background-color--tertiary);
	--ability-border-inner-color: var(--wiki-content-background-color--secondary);
	--ability-border-outer-color: var(--wiki-body-dynamic-color);
	--ability-icon-background-color: #FEAE34;
	--ability-icon-boder-inner-color: #FBDF6B;
	--ability-icon-boder-outer-color: var(--ability-border-outer-color);
	--ability-upgrade-border-outer-color: var(--ability-border-outer-color);
	--ability-grid-border-color: var(--ability-border-outer-color);
	--ability-grid-background-color: #9999;
	--ability-grid-cells-background-color: rgb(0 0 0 / .5);
	--ability-grid-center-background-color: white;
	--ability-grid-influence-background-color: aqua;
	--ability-grid-influence-all-background-color: red;
	--ability-grid-influence-source-background-color: #0a3;
	
	width: fit-content;
	display: inline-block;
	margin-bottom: 1em;
	margin-right: 2em;
}
.ability-container {
	border-radius: 0.2em;
	box-shadow: 0 0 0 0.15em var(--ability-border-inner-color), 0 0 0 0.3em var(--ability-border-outer-color);
	padding: 0.7em;
	background-color: var(--ability-background-color);
	margin: 1em 0.3em 0.3em;
	position: relative;
	z-index: 1;
}
.ability-container.ability-subability {
	margin-top: -.1em;
	margin-left: 2em;
	margin-right: 1em;
	position: relative;
	z-index: 0;
}
.ability-header {
	display: flex;
	align-items: center;
}
.ability-header div {
	margin: 0 0.5em 0 0;
}
.ability-name{
	font-weight:bold;
	font-size: 1.5em;
}
.ability-subability .ability-name{
	font-size:1.3em
}
.ability-icons img {
	margin: 0 0 0 1em;
	padding: 0.2em;
	background-color: var(--ability-icon-background-color);
	box-shadow: 0 0 0 0.15em var(--ability-icon-boder-inner-color), 0 0 0 0.3em var(--ability-icon-boder-outer-color);
	border-radius: 0.2em;
}

div.ability-stats {
	margin-left: auto;
}

.ability-description {
	margin: 0.6em 0;
}

.ability-upgrades {
	background-color: var(--ability-upgrade-background-color);
	padding: 0 0.6em;
	box-shadow: 0 0 0 0.15em var(--ability-upgrade-border-inner-color),0 0 0 0.3em var(--ability-upgrade-border-outer-color);
	border-radius: 0.2em;
}

.ability-upgrades div{
	padding: 0.3em 0;
}

.ability-upgrades > div:not(:first-child) {
	border-top: 0.1em solid var(--ability-upgrade-separation-color);
}

/* ability grid */
table.influence-table{
	border: 1px solid var(--ability-grid-border-color);
	border-radius:0.3em;
	background-color: var(--ability-grid-background-color);
}
table.influence-table td{
	background-color: var(--ability-grid-cells-background-color);
	width: 4px;
	height: 4px;
}
table.influence-table td.influence-center{
	background-color: var(--ability-grid-center-background-color);
	box-shadow: 0 0 0 1px var(--ability-grid-center-background-color);
}
table.influence-table td.influence-blue{
	background-color: var(--ability-grid-influence-background-color);
}
table.influence-table td.influence-red{
	background-color: var(--ability-grid-influence-all-background-color);
}
table.influence-table span.influence-source{
	background-color: var(--ability-grid-influence-source-background-color);
	display: block;
	width: 2px;
	height: 2px;
	border-radius: 5px;
	border: 1px solid #52ff14;
}
/* ability grid end */

/***************************
* End [[Module:Abilities]] *
***************************/

/********************************
* Start [[Template:LevelStats]] *
********************************/

/*  dim table cells from the except the first ones when stat values don't change */
.grey-from2 td:nth-child(n+2){
	color:gray;
}
.grey-from3 td:nth-child(n+3){
	color:gray;
}
.grey-from4 td:nth-child(n+4){
	color:gray;
}

/******************************
* End [[Template:LevelStats]] *
******************************/

/*******************************
* Start [[Template:TreeChart]] *
*******************************/

.tree {
	margin: 0 0 1em;
	text-align: center;
}

.tree,
.tree ul,
.tree li {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.tree,
.tree ul {
	display: table;
}

.tree ul {
	width: 100%;
}

.tree li {
	display: table-cell;
	padding: .5em 0;
	vertical-align: top;
}

.tree li>span {
	display: inline-block;
	position: relative;
	margin: 0.3em .8em .8em;
	padding: .2em .5em;
	background-color: var(--wiki-content-background-color--tertiary);
	border-radius: .2em;
}

.tree.left li>span {
	text-align: left;
}

/* lines */
.tree li:before,
.tree ul:before,
.tree li>span:before {
	outline: solid 1px var(--wiki-content-border-color);
	content: "";
	position: absolute;
	z-index: -1;
}

/* horizontal lines */
.tree li:before {
	left: 0;
	right: 0;
	top: 0;
}

.tree li:first-child:before {
	left: 50%;
}

.tree li:last-child:before {
	right: 50%;
}

/* vertical lines */
.tree ul:before,
.tree li>span:before {
	height: 0.6em;
	left: 50%;
}

.tree ul:before {
	top: -.9em;
	height: 0.8em;
}

.tree li>span:before {
	top: -1em;
}

/* no connection upwards for root nodes */
.tree>li {
	margin-top: 0;
}

.tree>li:before,
.tree>li:after,
.tree>li>span:before {
	outline: none;
}

/* for tree diagram going up */
.treeup {
	rotate: 180deg;
}

.treeup li>span {
	rotate: 180deg;
}

.treeup li>span:before {
	top: auto;
	bottom: -1em;
}

/*****************************
* End [[Template:TreeChart]] *
*****************************/

/********************************
* Start [[Template:Production]] *
********************************/

.production-container {
	padding: .2em;
	display: inline-flex;
	align-items: center;
	background-color: var(--wiki-content-background-color--tertiary);
}

.production-container .production-arrow {
	font-size: 4em;
	padding: 0 0.1em 0.15em;
}

.production-container .production-in-out {
	border: 1px solid var(--wiki-content-border-color);
	border-radius: 0.5em;
	padding: 0 0.4em;
	margin: 0 0.4em;
}

.production-container .production-building {
	text-align: center;
	border: 1px solid var(--wiki-content-border-color);
	border-radius: 0.5em;
	padding: 0.4em;
	background: var(--wiki-content-background-color--secondary);
}

/******************************
* End [[Template:Production]] *
******************************/

/**********************************
* Start [[Template:CaptionImage]] *
**********************************/

div.caption-image {
	margin: 0.8em 0 0.8em 0.8em;
	text-align: center;
}
div.caption-image img{
	padding: 0.4em;  
}
div.caption-image > div{
	padding: 0.2em;
	background: var(--wiki-content-background-color--secondary);
	margin: 0.2em 0 0;
}

/********************************
* End [[Template:CaptionImage]] *
********************************/

/**************************
* Start Sidebar icons     *
**************************/

#p-SFK.mw-portlet .mw-list-item a span:before {
	content: '';
	display: inline-block;
	vertical-align: bottom;
	height: 1.3em;
	width: 1.3em;
	background-size: contain;
	background-repeat: no-repeat;
	margin: 0 0.3em;
}

.mw-portlet #n-Units span:before {
	background-image: url(/images/mbhh_sfki/9/9f/Frontpage-units.png);
}

.mw-portlet #n-Heroes span:before {
	background-image: url(/images/mbhh_sfki/1/13/Frontpage-hero.png);
}

.mw-portlet #n-Characters span:before {
	background-image: url(/images/mbhh_sfki/1/15/Frontpage-star.png);
}

.mw-portlet #n-Kingdoms span:before {
	background-image: url(/images/mbhh_sfki/8/88/Frontpage-beer.png);
}

.mw-portlet #n-Resources span:before {
	background-image: url(/images/mbhh_sfki/3/39/Frontpage-resources.png);
}

.mw-portlet #n-Buildings span:before {
	background-image: url(/images/mbhh_sfki/9/95/Frontpage-house.png);
}

.mw-portlet #n-Monsters span:before {
	background-image: url(/images/mbhh_sfki/2/20/Frontpage-bone.png);
}

.mw-portlet #n-Bosses span:before {
	background-image: url(/images/mbhh_sfki/b/b7/Frontpage-blood.png);
}

.mw-portlet #n-Stats span:before {
	background-image: url(/images/mbhh_sfki/9/97/Frontpage-stats.png);
}

.mw-portlet #n-Combat span:before {
	background-image: url(/images/mbhh_sfki/7/7a/Frontpage-combat.png);
}

.mw-portlet #n-Unlocks span:before {
	background-image: url(/images/mbhh_sfki/f/fd/Frontpage-trophy.png);
}

.mw-portlet #n-Relics span:before {
	background-image: url(/images/mbhh_sfki/4/45/Frontpage-chalice.png);
}

/**************************
* End Sidebar icons       *
**************************/