MediaWiki:Themes.css

/** * Portable Infobox customization */

/* Vars */ .skin-fandomdesktop, .skin-oasis { --sao-pi-background: #DEDCFF; --sao-pi-border-color: #E1E1E1; }

.theme-fandomdesktop-dark { --sao-pi-background: #42424D; --sao-pi-border-color: #454545; }

/* General */ .portable-infobox { width: 300px; background-color: var(--sao-pi-background, #DEDCFF); border: 1px solid var(--sao-pi-border-color, #42424D); } .portable-infobox .pi-header { color: #FFFFFF; text-align: center; padding: 1px; border-top-left-radius: 50px; border-top-right-radius: 50px; margin: 5px; }

.pi-secondary-background { background-color: #6699FF; }

.portable-infobox .pi-border-color { border-color: var(--sao-pi-border-color, #E1E1E1); }    .portable-infobox .pi-title { background-color: #4CAF50; font-size: 120%; color: #FFFFFF; text-align: center; padding: 1px; margin: 5px; } .portable-infobox .pi-tab-link.current { background-color: #FFFFFF; } .portable-infobox .pi-image-collection-tab-content { background-color: var(--sao-pi-border-color, #E1E1E1); }

ul.pi-image-collection-tabs { display: flex; flex-wrap: wrap; width: 270px; margin: auto; } ul.pi-image-collection-tabs li { flex-grow: 1; /* Force tabs to take up a 4th of available space per row, before rendering */ /* This effectively limits each row of tabs to just 4 tabs. */   flex-basis: 24%; /* Wikia's default CSS sets max-width for tabs to 50%. Why? */   max-width: 100%; border: none; } /* Every 4th element + 1 (first element of every row) */ ul.pi-image-collection-tabs li:first-child ul.pi-image-collection-tabs li:nth-child(4n+1) { border-top-left-radius: 50px; } /* Every 4th element (last element of every row) */ ul.pi-image-collection-tabs li:last-child, ul.pi-image-collection-tabs li:nth-child(4n) { border-top-right-radius: 50px; } ul.pi-image-collection-tabs li:hover { background-color: #EEEEEE; } ul.pi-image-collection-tabs li.current { flex-grow: 4; } .portable-infobox .pi-title { border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; } /*   Necessary for infoboxes because line breaks can't be put into labels of a data source, it is not rendered. with this, blank spaces can be added and line breaks can be achieved. See Character Infobox, data source "VR" In hopes it does not break anything h3.pi-data-label.pi-secondary-font b { white-space: pre-wrap !important; }

/* Horizontally centers item labels and values */ .portable-infobox .pi-data { align-items: center; }