MediaWiki:Infobox.css
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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
.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: 10px;
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 .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;
};
}
/*
.portable-infobox .wds-tabs__tab-label {
font-size: 12px;
line-height: 1.5;
font-family: 'ZZZ Web Font';
}*/
/*
.page-content .portable-infobox .pi-data-label {
font-size: 10px;
line-height: 1.5;
font-family: 'ZZZ Web Font';
}*/
/* 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;
}
/* 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;
}
/* Allow for adding dark background to light theme: some icons are white and don't show up well */
/* DISABLED - caused "negative" effect on images that weren't simple icons
.theme-fandomdesktop-light .pi-theme-image-darkbg .pi-item.pi-image {
filter: invert(1);
}
.theme-fandomdesktop-light .pi-theme-image-darkbg .pi-caption {
background-color: var(--pi-background-color)
}
*/
/* 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);
}
/* Add padding above/below images */
/*.pi-image {*/
/* padding: 10px 0;*/
/*}*/
/* 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;
/*animation: LogoPulse;
animation-duration: 10s;
animation-iteration-count: infinite;*/
}
/* 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');
}