MediaWiki:Common.css: Difference between revisions

Revision as of 20:35, 29 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 Modular Templates *
**************************/

/********* [[Template:Ambox]] *********/
.ambox {
	--ambox-color: var(--wiki-accent-color);

	border: 1px solid var(--wiki-content-border-color);
	border-left: 10px solid var(--ambox-color);
	border-radius: 2px;
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 1em 0;
	padding: 3px .6em;
	background-color: var(--wiki-content-background-color--secondary);
	box-shadow: 2px 2px 5px 0px #0002;
}

@media (min-width: 720px) {
	.ambox {
		margin-inline: 10%;
	}
}

.ambox.tiny {
	padding: .04rem .5em;
	margin-inline: 0;
	width: fit-content;
}

.ambox + .ambox {
	margin-top: -.6em;
}

.ambox-content {
	flex: 1;
}

.ambox-content p {
	margin: .15em 0;
}

.ambox-title {
	font-weight: bold;
}

/********* [[Template:Hatnote]] *********/
.hatnote {
	padding: 1px 0 1px 1.6em;
	margin-bottom: 0.5em;
	font-style: italic;
	border-top: 1px solid var(--wiki-content-border-color--secondary);
	border-bottom: 1px solid var(--wiki-content-border-color--secondary);
}

.hatnote.icon {
	padding-left: 0;
}

/********* [[Template:Spoiler]] *********/
.spoiler-content {
	background-color: color-mix(in srgb, var(--wiki-content-dynamic-color) 50%, transparent);
	transition: all 0.3s;
	cursor: pointer;
	overflow: auto;
}

@supports not (color:color-mix(in srgb, #000, transparent)) {
	.spoiler-content {
		background-color: var(--wiki-content-dynamic-color--secondary);
	}	
}

.spoiler-content > * {
	pointer-events: none;
	opacity: 0;
	transition: all 0.3s;
}

.spoiler-content.show {
	background-color: transparent;
}

.spoiler-content.show > * {
	pointer-events: unset;
	opacity: 1;
}

/********* [[Template:Link icon]] *********/
.link-icon {
	--link-icon-line-height: 1.5em;
	--link-icon-size: 1.5em;
	display: inline-flex;
	align-items: center;
	height: var(--link-icon-line-height);
	vertical-align: bottom;
}

.link-icon .regular {
	align-self: center;
}

.link-icon .regular a {
	display: flex;
}

.link-icon .regular img {
	height: var(--link-icon-size);
	max-width: var(--link-icon-size);
}

.link-icon .fallback {
	outline: 1px solid var(--wiki-content-text-color);
	border-radius: 50%;
	text-align: center;
	width: var(--link-icon-size);
	line-height: var(--link-icon-size);
}

.link-icon.notext,
.link-icon.notext .fallback {
	display: inline-block;
}

/********* [[Template:Quote]] *********/
.quote {
	background: var(--wiki-content-background-color--secondary);
	border-radius: 5px;
	border: 2px solid var(--wiki-content-border-color);
	margin: .5em 0;
	padding: .5em;
	overflow-y: hidden;
}

.quote .block {
	display: block;
}

.quote .title {
	font-size: large;
	font-weight: bold;
}

.quote .content {
	font-style: italic;
}

.quote .author {
	font-weight: bold;
	text-align: end;
}

.quote .marks-wrapper {
	display: flex;
	gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
	font-size: 100px;
	line-height: 0px;
}

.quote .marks-wrapper::before {
	content: "\201C";
	margin-top: 40px;
}

.quote .marks-wrapper::after {
	content: "\201D";
	align-self: end;
	margin-bottom: -10px;
}

.client-js .mw-charinsert-item {
	display: none;
}

/************************
* End Modular Templates *
*************************/

/*****************************
* Used by [[Template:Color]] *
******************************/
.color__splotch {
	display: inline-block;
	height: 1em;
	width: 1em;
	box-sizing: border-box;
	vertical-align: text-top;
	border-radius: 50%;
	border: 1px solid var(--wiki-content-text-color);
}

/*********************
* End Template:Color *
**********************/

/*********************************
* Used by [[Template:TOC limit]] *
**********************************/
.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;
}
/*************************
* End Template:TOC limit *
**************************/

/*********************************
* Used by [[Template:TOC right]] *
**********************************/
@media all and (min-width: 720px) {
	.tocright {
		float: right;
		clear: right;
		margin: 0 0 0.5em 1em; 
	}
}
/*************************
* End Template:TOC right *
**************************/

/***************************
*** 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       *
**************************/

/***************
* Start navbox *
***************/

.ranger-navbox {
  border: 2px solid var(--wiki-content-border-color);
  padding: 0.3em;
}

.ranger-title {
  background: var(--wiki-content-background-color--secondary);
  border-bottom: 1px solid var(--wiki-content-border-color);
}

.ranger-meta {
  float: left;
}

.ranger-title-text {
  text-align: center;
}

.ranger-row .ranger-row:nth-child(odd) {
  background: var(--wiki-content-background-color--secondary);
}

.ranger-row {
  display: flex;
}

.ranger-group {
  display: grid;
  justify-items: stretch;
  align-items: center;
  padding: 0 0.4em;
  background: var(--wiki-content-background-color--tertiary);
}

.ranger-listbox {
  display: inline-block;
}

.ranger-navbox .ranger-list ul li {
  display: inline;
}

.ranger-navbox .ranger-list ul li:not(:last-child)::after {
  content: "\20\A0\2022\A0\20";
	font-weight: inherit;
}

/*************
* End navbox *
*************/