MediaWiki:Infobox.css

/* Old info box */
.infobox {
    background-color: var(--theme-page-text-mix-color-95);
    border: 1px solid var(--theme-border-color);
    clear: right;
    display: table;
    float: right;
    margin-bottom: .5em;
    margin-left: 1em;
    padding: .2em;
    position: relative;
}

/* Infobox Styling */
.portable-infobox {
    border-radius: 2px;
    border-style: outset;
    border: 2px solid;
    border-color: var(--pi-border-color);
}

.portable-infobox .pi-title {
    border-radius: 10px 10px 0 0;
    text-align: center;
}

.portable-infobox.pi-type-Game {
	min-width: 300px;
}

.portable-infobox .wds-tabs__tab {
    margin: 2px 1px;
    border: none;
    border-radius: 3px;
    background-color: var(--custom-tabs-default-inactive-bg);
    color: var(--custom-tabs-default-inactive-color);
    transition: .25s;
}

.portable-infobox .wds-tabs__tab:hover {
    background-color: var(--custom-tabs-default-inactive-hover-bg);
}

.portable-infobox .wds-tabs__tab.wds-is-current {
    margin: 2px 1px;
    border: none;
    background-color: var(--custom-tabs-default-active-bg);
    color: var(--custom-tabs-default-active-color);
    box-shadow: none;
    .wds-tabs__tab-label {
        font-weight: bold;
    };
}

/* Center infobox tabs */
aside.portable-infobox .wds-tabs__tab {
    flex-grow: 1;
    text-align: center;
}

.pi-theme-charnav .pi-navigation {
	font-size: 14px;
}

/* Assume that there is already a title */
.portable-infobox .pi-header[data-item-name=secondary_title] {
  padding-top: 0;
  text-align: center;
}

/* remove border between label and format */
.pi-horizontal-group .pi-horizontal-group-item, .pi-smart-group-body {
    border-top: none !important;
}

/* remove extra margin from empty border */
.pi-smart-group .pi-smart-data-label, .pi-smart-group .pi-smart-data-value {
    margin: 0;
}

/*  add border above tabber */
.pi-item.pi-panel.pi-border-color.wds-tabber {
    border-top: 1px solid var(--pi-border-color);
}

/*  add border tabke header */
.pi-item.pi-group.pi-border-color thead tr {
    border-top: 1px solid var(--pi-border-color);
}

/*  add border below image */
.pi-image {
    border-bottom: 1px solid var(--pi-border-color);
}

/* remove border above secondary title */
.pi-header[data-item-name=secondary_title], .portable-infobox .pi-secondary-font {
    border-top: none;
}

/* center collapsible headers */
.pi-collapse .pi-header:first-child {
	padding-left: 40px;
}

/* remove margin added for normal headers */
.page-content .portable-infobox h1, .page-content .portable-infobox h2, .page-content .portable-infobox h3, .page-content .portable-infobox h4, .page-content .portable-infobox h5, .page-content .portable-infobox h6 {
    margin: 0;
}

/* remove padding for group label and value */
h3.pi-smart-data-label.pi-data-label.pi-secondary-font.pi-item-spacing.pi-border-color {
    padding-bottom: 0;
}
.pi-smart-data-value.pi-data-value.pi-font.pi-item-spacing.pi-border-color {
    padding-top: 0;
}

/* Remove tab margin */
.page-content .portable-infobox ol.wds-tabs, .page-content .portable-infobox ul.wds-tabs {
    margin: 0;
}

.pi-horizontal-group-item.pi-data-label {
  padding: 9px 9px 0 !important;
}

.pi-horizontal-group-item.pi-data-value {
  padding: 5px 0 10px !important;
}

/* Allow tabs to wrap around, instead of going off the side of the infobox if many with long names are presesnt */
aside.portable-infobox .wds-tabs {
    display: flex;
    flex-wrap: wrap;
}

/* Add dark background to infobox image fields */
.pi-theme-image-darkbg .pi-image {
  background: #0c0c0c;
  background: repeating-linear-gradient(-45deg,#111111,#111111 9px,#080808 9px,#080808 11px);
}

/* For whatever reason, this was in the main FandomDesktop.css theme */
/* This was also causing massive padding problems in Infoboxes with YouTube or Spotify embeds */
.portable-infobox.pi-background {
   background-color: #4e57741a;
}
.portable-infobox.pi-border {
   width: 0px;
}
.portable-infobox .pi-item-spacing {
   padding: 5px 5px; /* was 10px 20px; for whatever reason */
}

/*Infobox Themes*/

/* General styles for all themes */
.type-Survivor .pi-item.pi-image {
    position: relative;
    z-index: 2;
    opacity: 100;
}

.type-Survivor .pi-item.pi-image img {
    position: relative;
    z-index: 2;
    opacity: 100;
}

.type-Survivor .pi-item.pi-image:before {
    content: ' ';
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.type-Survivor .pi-item.pi-image:after {
    content: ' ';
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Theme-specific background images */
.pi-theme-Zombie-Panic .pi-item.pi-image:before {
	background: linear-gradient(to bottom,#E7D77B 0,#423039 100%);
}
.pi-theme-Zombie-Panic .pi-item.pi-image:after {
    background-image: url('https://wiki.zombiepanicsource.com/images/7/71/ZP1icon.webp');
}

.pi-theme-Zombie-Panic-Source .pi-item.pi-image:before {
	background: linear-gradient(to bottom,#E7D77B 0,#423039 100%);
}
.pi-theme-Zombie-Panic-Source .pi-item.pi-image:after {
    background-image: url('https://wiki.zombiepanicsource.com/images/e/e6/Site-logo.png');
}