MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

.button-outer {
	text-align: center;
	margin: 8px;
}

.button {
	display: inline-block;
	margin: auto;
	padding: 8px;
	text-align: center;
	border-collapse: separate !important;
	border-radius: 3px;
	color: white;
}

.button a {
	color: white !important;
}

.red.button {
	background-color: #d61515;
}

.blue.button {
	background-color: #2baadf;
}

.bubble {
	border-radius: 6px;
	color: white;
	text-align: center;
	padding: 12px;
	margin: 12px;
}

.green.bubble {
	background-color: #7bbd79;
}

div.cbox-outer {
	clear: both;
	width: 100%;
	margin: 10px 0px 12px 0px;
}

div.cbox-outer-padded {
	display: inline-block;
	margin: 10px 0px 0px 0px;
	max-width: 50%;
}

div.cbox-outer-standout {
	display: inline-block;
	margin: 10px 0px 12px 0px;
}

div.cbox {
	width: 70%;
	margin: 0 auto;
	border: 1px solid #e69710;
	background-color: #4c4c4c;
	padding: 4px;
}

div.cbox-fit {
    width: fit-content;
    border: 1px solid #e69710;
    background-color: #4c4c4c;
    padding: 4px;
}

div.cbox-fit-center {
    width: 70%;
    margin: 0 auto;
    border: 1px solid #e69710;
    background-color: #4c4c4c;
    padding: 4px;
}

div.cbox-outer-center {
    width: fit-content;
    margin: auto;
}

div.cbox-outer-padded>div.cbox,
div.cbox-outer-standout>div.cbox {
	width: auto !important;
	float: right;
}

div.cbox-outer-padded>div.cbox>span,
div.cbox-outer-standout>div.cbox>span {
	display: inline-block;
	float: left;
}

.cbox-image {
	padding-left: 10px;
}

div.cbox-outer-padded span.cbox-image,
div.cbox-outer-standout span.cbox-image {
	display: inline-block;
	float: right;
	max-width: 500px;
}

#wikispoopy {
	position: absolute;
	top: 0;
	background-image: url(/newwikispoopy150.png);
	display: none;
	width: 10em;
	height: 160px;
	background-repeat: no-repeat;
	background-position: center center;
	text-decoration: none;
	cursor: pointer;
}

#mw-missingsummary {
	color: red;
	font-weight: 800;
}

/* MultimediaViewer css */

.mw-mmv-post-image,
.mw-mmv-image-metadata
{
    background-color: #4c4c4c !important;
}

.mw-mmv-image-links-div
{
    background-color: #fff !important;
}

/*
@font-face {
  font-family: 'April1';
  src: url('/fonts/IMFellDWPica-Regular.ttf');
}
body {
    font-family: 'April1';
}
*/

kbd {
    margin: 0 0.1em;
    padding: 0.1em 0.6em;
    border-radius: 3px;
    border: 1px solid #c1c1c1;
    line-height: 1.3em;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10px;
    display: inline-block;
    vertical-align: text-top;
}

.xlargegallery img {
    width: 380px;
    height: auto;
}

.floatright {
    float: right;
}

.goldicon,.silvericon,.coppericon,
.radianticon,.illustriousicon,.brighticon,.glowingicon,.dimicon,.dullicon {
aspect-ratio: 1/1;
display: inline-block;
padding: 1px;
margin: auto 7px auto 2px;
}

.goldicon,.silvericon,.coppericon {
border-radius:50%;
width: .75em;
}

.goldicon {
background: goldenrod;
}
.silvericon {
background: silver;
}
.coppericon {
background: peru;
}

.radianticon,.illustriousicon,.brighticon,.glowingicon,.dimicon,.dullicon {
width: 1em;
}

/* as per icon color 
.radianticon {
color: orange;
}
.illustriousicon {
color: purple;
}
.brighticon {
color: yellow;
}
.glowingicon {
color: blue;
}
.dimicon {
color: green;
}
.dullicon {
color: gray;
}
*/

/* as per rarity color */
.radianticon {
color: orange;
}
.illustriousicon {
color: darkred;
}
.brighticon {
color: indigo;
font-size: 1.4em;
}
.glowingicon {
color: blue;
font-size: 1.2em;
}
.dimicon {
color: green;
font-size: 1.2em;
}
.dullicon {
color: white;
}

/*td:has(.glint), td:has(.currency) {
text-align: right;
width: 100px;
margin-left: auto !important;
margin-right: 0 !important;
}*/

.compactcurrency .goldicon,.compactcurrency .silvericon,.compactcurrency .coppericon {
margin: auto 0px auto 3px;
}

.rarity {
padding-left: 2px;
padding-right: 2px;
}

.rarity, .rarity a:link, .rarity a:visited, .rarity a:active {
color:white;
}
.rarity.poor {
background:grey;
}
.rarity.common {
color:black !important;
background:white;
}
.rarity.common, .rarity.common a:link, .rarity.common a:visited, .rarity.common a:active {
color:black;
}
.rarity.uncommon {
background:green;
}
.rarity.rare {
background:blue;
}
.rarity.heroic {
background:indigo;
}
.rarity.epic {
background:darkred;
}
.rarity.legendary {
background:orange;
}
.rarity.legendary, .rarity.legendary a:link, .rarity.legendary a:visited, .rarity.legendary a:active {
color:black;
}
.rarity.artifact {
background:yellow;
}
.rarity.artifact, .rarity.artifact a:link, .rarity.artifact a:visited, .rarity.artifact a:active {
color:black;
}

.flagging, .flagging a:link, .flagging a:visited, .flagging a:active {
color:white;
}
.flagging.non-combatant, .flagging.non-combatant a:link, .flagging.non-combatant a:visited, .flagging.non-combatant a:active {
background:green;
}
.flagging.combatant, .flagging.combatant a:link, .flagging.combatant a:visited, .flagging.combatant a:active  {
background:indigo;
}
.flagging.corrupted, .flagging.corrupted a:link, .flagging.corrupted a:visited, .flagging.corrupted a:active  {
background:red;
}

.gallery div:has(>video:not([controls])) {
    position: relative;
    cursor: pointer;
}

.gallery div:has(>video:not([controls])):before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "▶";
    font-family: FontAwesome;
    font-size: 80px;    
    opacity: .2;
    text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}

.gallery div:has(>video:not([controls])):hover:before {
    color: #fff;
    opacity:.7;
}

.gallery.hoverhighlight img:not(:hover) {
    color: #fff;
    opacity:.7;
}

.gallery.hoverhighlight img:hover {
    color: #fff;
    opacity:1;
    outline: 1px solid aliceblue;
}

.skilltable td:first-child {
 width: 12.5em;
 white-space: nowrap;
}

.jquery-tablesorter th.headerSort {
    background-image: url(/sort-both-light.svg);
    background-blend-mode: exclusion;
}