MediaWiki:Cosmos.css/Infobox.css

/* All CSS here will be loaded for users of the Cosmos skin */
#content .portable-infobox ol,
#content .portable-infobox ul {
	list-style-position: outside;
	margin: 0 0 0 15px;
}

#content .portable-infobox ol ol,
#content .portable-infobox ol ul,
#content .portable-infobox ul ol,
#content .portable-infobox ul ul {
	margin-left: 3px;
	margin-top: 6px;
	padding-left: 9px;
}

#content .portable-infobox p,
#content .portable-infobox section {
	margin-bottom: 0;
}

#content .portable-infobox h2,
#content .portable-infobox h3 {
	border-bottom: 0;
	font-family: inherit;
	font-weight: 700;
	margin: 0 !important;
}

#content .portable-infobox .pi-title {
	font-size: 18px;
	padding: 9px;
}

#content .portable-infobox .pi-header {
	font-size: 14px;
	line-height: 1.25;
	padding: 4px;
}

#content .portable-infobox .pi-data-label {
	font-size: 12px;
	line-height: 1.5;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  */
/*         Portions of infobox code is from          */
/*    JoJo's Bizarre Encyclopedia jojowiki.com       */
/*    https://jojowiki.com/MediaWiki:Common.css      */
/*   We are grateful! Please go visit their site!    */
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  */

body {
	
	/* CSS Variables. Changed later for dark mode. */
	--pi-background: var(--theme-page-background-color);
	--pi-hex-background-image: url(https://images.fallout.wiki/6/68/Hex.jpg);
	--pi-header-background-color: #202a30;
	--pi-header-text-color: #fff;
	--pi-secondary-background: #c7e2da;
	--pi-secondary-background--label: var(--theme-accent-label-color);
	--pi-border-color: #4c6877;
	--pi-cell-border-color: #dce2e8;
	--pi-cell-even-color: #e5ebee;
}

.portable-infobox {
	overflow: hidden;
	border: 2px solid var(--pi-border-color);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
	width: 270px;
}

/*falloutwiki namespace colors*/
.theme-light.ns-4 {
	--pi-header-background-color: #2d2131;
	--pi-secondary-background: #d4c6e2;
	--pi-border-color: #6c4c76;
}

/*projects namespace colors, should be the same as IFW*/
.theme-light.ns-3000 {
	--pi-header-background-color: #2d2131;
	--pi-secondary-background: #d4c6e2;
	--pi-border-color: #6c4c76;
}

/*mod namespace colors*/
.theme-light.ns-4000 {
	--pi-header-background-color: #293121;
	--pi-secondary-background: #dbe2c6;
	--pi-border-color: #766c4c;
}

/*community namespace colors*/
.theme-light.ns-4500 {
	--pi-header-background-color: #304a42;
	--pi-secondary-background: #bad5d7;
	--pi-border-color: #4a7169;
}

/*resources namespace colors*/
.theme-light.ns-3002 {
	--pi-header-background-color: #895025;
	--pi-secondary-background: #e8ceb9;
	--pi-border-color: #7d5d20;
}

/*overview namespace colors*/
.theme-light.ns-3100 {
	--pi-header-background-color: #312121;
	--pi-secondary-background: #d7caca;
	--pi-border-color: #764c4c;
}
/*technical namespace colors*/
.theme-light.ns-3300 {
	--pi-header-background-color: #1C2630;
	--pi-secondary-background: #C7CED6;
	--pi-border-color: #3D5A75;
}
/*source namespace colors*/
.theme-light.ns-3300 {
	--pi-header-background-color: #1C2630;
	--pi-secondary-background: #C7CED6;
	--pi-border-color: #3D5A75;
}
/*marketing namespace colors*/
.theme-light.ns-3400 {
	--pi-header-background-color: #1C2630;
	--pi-secondary-background: #C7CED6;
	--pi-border-color: #3D5A75;
}
/*user namespace colors*/
.theme-light.ns-2 {
    --pi-header-background-color: #2e3a4d;
    --pi-secondary-background: #c6d9ea;
    --pi-border-color: #64728c;
}
/* .portable-infobox .pi-image {
	background-image:url('https://images.fallout.wiki/6/68/Hex.jpg');
}
 
.portable-infobox .image img {
	background-image: url('https://images.fallout.wiki/6/68/Hex.jpg');
} */

.pi-item-spacing {
	padding-bottom: 9px;
	padding-top: 9px;
}

.portable-infobox .pi-border-color {
	border-color: var(--pi-cell-border-color);
}

.pi-background {
	background-color: var(--pi-background);
}

.pi-secondary-background {
	background: var(--pi-secondary-background);
	color: var(--pi-secondary-background--label);
}

.pi-secondary-background + .pi-secondary-background {
	border-top: 1px solid var(--pi-cell-border-color);
}

.pi-secondary-background + * > .pi-data:first-child,
.pi-secondary-background + .pi-data {
	border-top: 0;
}

.portable-infobox .pi-secondary-background a {
	color: inherit;
}

.pi-font {
	font-size: 12px;
}

.pi-secondary-font {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 0;
}

.pi-caption,
.pi-data,
.pi-header,
.pi-navigation,
.pi-title {
	padding: 0 9px;
}

.pi-data {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	grid-column-gap: 9px;
	border-top: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.pi-image + .pi-data,
.pi-image-collection + .pi-data,
.pi-secondary-background + .pi-data,
.portable-infobox > .pi-data:first-child,
.pi-horizontal-group .pi-secondary-background + * .pi-horizontal-group-item,
.pi-smart-group-head + .pi-smart-group-body,
.pi-secondary-background + .pi-smart-group {
	border-top: 0;
}

.pi-layout-stacked .pi-data {
	display: block;
}

.pi-data-label {
	flex-basis: 90px;
	margin: 0;
	overflow: hidden;
}

.pi-data-label,
.pi-data-value {
	hyphens: auto;
}

.pi-data-value {
	line-height: 1.5;
	overflow-wrap: break-word;
}

.pi-data-value > * {
	margin: 0;
}

.pi-data-value:not(:first-child) {
	flex-basis: 180px;
}

.pi-image {
	text-align: center;
}

.pi-image img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

.pi-caption {
	word-wrap: break-word;
	font-size: 14px;
	font-style: italic;
	hyphens: auto;
	text-align: center;
}

.pi-horizontal-group {
	border-collapse: collapse;
	table-layout: fixed;
	text-align: center;
	width: 100%;
}

.pi-horizontal-group .pi-header {
	display: table-caption;
	text-align: left;
}

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

.pi-horizontal-group-item.pi-data-value {
	padding: 0 9px 9px;
}

.pi-horizontal-group-item:not(:first-child),
.pi-smart-group .pi-smart-data-value:not(:first-child),
.pi-smart-group h3.pi-smart-data-label:not(:first-child) {
	border-left: 1px solid var(--pi-cell-border-color);
}

.pi-smart-group {
	border-top: 0;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.pi-smart-group .pi-smart-data-label {
	margin-bottom: 0;
	padding-bottom: 0;
}

.pi-smart-group .pi-smart-data-value,
.pi-smart-group h3.pi-smart-data-label {
	box-sizing: border-box;
	flex-basis: auto;
	margin: 3px 0;
	padding: 6px 9px;
}

.pi-smart-group .pi-smart-data-value:first-child,
.pi-smart-group h3.pi-smart-data-label:first-child {
	padding-left: 9px;
}

.pi-smart-group .pi-smart-data-value:last-child,
.pi-smart-group h3.pi-smart-data-label:last-child {
	padding-right: 9px;
}

.pi-smart-group-body,
.pi-smart-group-head {
	display: flex;
}

.pi-collapse.pi-collapse-closed {
	border-bottom: 0;
}

.pi-collapse.pi-collapse-closed .pi-header p::after {
	transform: rotate(135deg);
}

.pi-collapse.pi-collapse-closed .pi-horizontal-group tbody,
.pi-collapse.pi-collapse-closed .pi-horizontal-group thead,
.pi-collapse.pi-collapse-closed > :nth-child(n+2) {
	display: none;
}

.pi-collapse .pi-header:first-child {
	cursor: pointer;
	padding-right: 40px;
	position: relative;
	text-align: center;
}

.pi-collapse .pi-header p::after {
	border-color: currentcolor;
	border-style: solid;
	border-width: 2px 2px 0 0;
	content: "";
	display: block;
	height: 8px;
	margin-top: -6px;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: rotate(-45deg);
	transition: transform 0.3s;
	vertical-align: middle;
	width: 8px;
}

.pi-debug-line {
	display: flex;
}

.pi-debug-line-code,
.pi-debug-line-number {
	box-sizing: border-box;
}

.pi-debug-line-number {
	flex-basis: 50px;
	flex-shrink: 0;
	padding: 9px;
}

.pi-debug-error-message {
	background-color: #1e0c1b;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	margin: 20px 0 10px 25px;
	padding: 9px 13.5px;
	position: relative;
	width: 400px;
}

.pi-debug-error-message::before {
	border-bottom: 18px solid #1e0c1b;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	content: "";
	display: block;
	height: 0;
	left: 25px;
	position: absolute;
	top: -18px;
	width: 0;
}

.pi-debug-error-message .pi-debug-error-message-item {
	margin: 4px 0;
}

.pi-panel-scroll-wrapper {
	overflow: hidden;
	min-height: 38px;
}

.pi-section-navigation {
	padding-bottom: 0 !important;
	flex-wrap: nowrap;
	justify-content: left;
}

.pi-item {
	align-items: center;
}

.portable-infobox .pi-header,
.portable-infobox .pi-title {
	background-color: var(--pi-header-background-color);
	background-image: var(--pi-hex-background-image);
	background-blend-mode: soft-light;
	text-align: center;
	letter-spacing: inherit;
	color: var(--pi-header-text-color);
	height: 30px;
	padding-top: 0;
}

.portable-infobox .pi-title {
	height: auto;
	min-height: 30px;
}

.portable-infobox .pi-header p {
	text-align: center;
}

.portable-infobox .pi-title p {
	font-weight: 700;
	margin: 0;
}

.pi-horizontal-group-item {
	border-right: 0;
	text-align: center;
}

.portable-infobox .pi-horizontal-group-item:nth-child(even) {
	background-color: var(--pi-cell-even-color);
}

.portable-infobox .pi-horizontal-group .pi-data-label {
	padding: 0;
}

.portable-infobox .pi-horizontal-group .pi-data-label span {
	display: block;
}

.portable-infobox .pi-horizontal-group .pi-data-value {
	padding: 5px 5px 9px;
}

.pi-smart-group-head,
.pi-smart-group-body {
	width: 100% !important;
}

.portable-infobox .pi-section-navigation,
.portable-infobox .pi-media-collection-tabs {
	margin: 0 !important;
	padding-top: 0 !important;
}

.pi-section-navigation .pi-section-tab {
	flex-grow: 1;
	margin-top: 0;
	margin-right: 0;
}

#content .pi-section-navigation .pi-section-tab p {
	margin: 5px 0;
}

.pi-section-navigation .pi-section-tab:last-child,
.pi-media-collection-tabs .pi-tab-link:last-child {
	border-right: 0;
}

.pi-section-content .pi-title:first-child {
	margin-bottom: 0 !important;
}

.pi-panel[data-item-name="images"] .pi-section-contents {
	margin-top: 2px;
}

.pi-media-collection-tab-content {
	background-color: var(--pi-background);
}

.pi-media-collection-tabs {
	display: flex;	
}

.pi-media-collection-tabs .pi-tab-link {
	flex-grow: 1;
}

.pi-data-label {
	margin-bottom: 0 !important;
}

.pi-data-label p {
	margin-top: 0 !important;
}

.pi-smart-group-head + .pi-smart-group-body .pi-data-value, {
	margin-top: 0 !important;
}
/**************************************************
***    Infobox nested tabs size reduction       ***
***               Eckserah                      ***
**************************************************/
.pi-panel .pi-section-contents .pi-panel .pi-panel-scroll-wrapper {
    min-height: 25px;
}

.pi-panel .pi-section-contents .pi-panel .pi-panel-scroll-wrapper .pi-section-navigation .pi-section-label p {
    margin: 0 !important;
}

.pi-panel .pi-panel .pi-section-contents {
    margin-top: 1px;
}