MediaWiki:Cosmos.css/Infobox.css

/* All CSS here will be loaded for users of the Cosmos skin */

list-style-position: outside; margin: 0 0 0 15px; }
 * 1) content .portable-infobox ol,
 * 2) content .portable-infobox ul {

margin-left: 3px; margin-top: 6px; padding-left: 9px; }
 * 1) content .portable-infobox ol ol,
 * 2) content .portable-infobox ol ul,
 * 3) content .portable-infobox ul ol,
 * 4) content .portable-infobox ul ul {

margin-bottom: 0; }
 * 1) content .portable-infobox p,
 * 2) content .portable-infobox section {

border-bottom: 0; font-family: inherit; font-weight: 700; margin: 0; }
 * 1) content .portable-infobox h2,
 * 2) content .portable-infobox h3 {

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

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

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

/* ############################################ */ /* ### INFOBOX HOTNES  JOJO MW COMMON CSS  ### */ /* ############################################ */

.portable-infobox { /* CSS Variables. Changed later for dark mode. */	--pi-background: var(--theme-page-background-color); --pi-hex-background-image: url("https://fallout.wiki/images/6/68/Hex.jpg"); --pi-header-background-color: #202a30; --pi-header-text-color: #fff; --pi-secondary-background: #A1CEC0; --pi-secondary-background--label: var(--theme-accent-label-color); --pi-border-color: #4c6877; --pi-cell-border-color: #dce2e8; --pi-cell-even-color: #fff; overflow: hidden; border: 2px solid var(--pi-border-color); border-radius: 10px; font-size: 13px; line-height: 1.5; width: 270px; }

.portable-infobox .pi-image { background-image:url('https://fallout.wiki/images/5/59/Hex2.jpg'); } .portable-infobox .image img { background-image: url('https://fallout.wiki/images/2/2c/Hex.png'); }

.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; height: 38px; }

.pi-section-navigation { 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; }

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

.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: 5px; }

.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; }