MediaWiki:Themes.css

/* Basic Elements */ .portable-infobox { /* All PIs */ /* margin: 0 0 .5em 1em; */ font-size: smaller; line-height: 1.5; vertical-align: middle; } .portable-infobox.pi-europa { /* All PIs that take Europa into account */ border: 1px solid #aaa; } .portable-infobox:not(.pi-europa) { /* All PIs that DON'T take Europa into account */ background-color: white; border: 1.5px solid black; }

.portable-infobox.pi-theme-wikia:not(.pi-europa) { /* All PIs that DON'T take Europa into account and don't have any other themes */ border: 1.5px solid black; }

.portable-infobox > :first-child { /* The first element. Incredibly useful if you're rounding corners. */ } .portable-infobox > :last-child { /* The last element. Incredibly useful if you're rounding corners. */ } .portable-infobox .pi-item-spacing { /* The padding around titles, captions, data, headers, and navigation. */ } .portable-infobox .pi-item { /* A row. */ } .portable-infobox .pi-border-color { /* The separator between data and groups. */   border-color: #aaaaaa; } .portable-infobox .pi-font { /* The font of data values. */ } .portable-infobox .pi-secondary-font { /* The font of labels, headers, and navigation. */ } .portable-infobox.pi-background { /* The background underneath the entire infobox. */   background: white; }

.pi-europa.pi-background { background-color: white; }

.portable-infobox .pi-secondary-background { /* The background behind headers and navigation. */   /* These are often centered and a light color text on a dark background. Best to put those values here. */   background-color: black; margin: auto; } .portable-infobox .pi-data-label { /* All data labels */ /* pi-secondary-font */ } .portable-infobox .pi-data-value { /* All data values */ /* pi-font */ } .portable-infobox .pi-data-value:only-child { /* Data values without labels */ /* pi-font */ text-align: center; margin: auto; } .portable-infobox .pi-data { /* All data rows */ /* pi-item pi-item-spacing pi-border-color */ } .portable-infobox .pi-data .pi-data-label { /* Vertical item labels */ /* pi-data-label pi-secondary-font */ } .portable-infobox .pi-data .pi-data-value { /* Vertical item values */ /* pi-data-value pi-font */ } .portable-infobox .pi-horizontal-group-item.pi-data-label { /* Horizontal item labels */ /* pi-data-label pi-secondary-font pi-border-color pi-item-spacing */ text-align: center; margin: auto; } .portable-infobox .pi-horizontal-group-item.pi-data-value { /* Horizontal item values */ /* pi-data-value pi-font pi-border-color pi-item-spacing */ text-align: center; margin: auto; } .portable-infobox .pi-title { /* pi-item pi-item-spacing */ text-align: center; color: white; background-color: black; } .portable-infobox .pi-image { /* pi-item */ } .portable-infobox .pi-image-thumbnail { /* The actual render */ height: auto; width: 100%; } .portable-infobox .pi-group { /* pi-item pi-border-color */ } .portable-infobox .pi-group { /* Vertical groups */ /* pi-item pi-border-color */ } .portable-infobox .pi-horizontal-group { /* Horizontal groups */ } .portable-infobox .pi-header { /* All headers */ /* pi-secondary-font pi-secondary-background pi-item-spacing */ text-align: center; color: white; } .portable-infobox > .pi-header { /* Vertical group headers */ /* pi-secondary-font pi-secondary-background pi-item-spacing */ } .portable-infobox .pi-horizontal-group .pi-header { /* Horizontal group headers */ /* pi-header pi-secondary-font pi-secondary-background pi-item-spacing */ } .portable-infobox .pi-navigation { /* pi-item-spacing pi-secondary-background pi-secondary-font */ text-align: center; margin: auto; } .portable-infobox .pi-navigation a:link { color: white; } .pi-europa .pi-navigation { /* pi-item-spacing pi-secondary-background pi-secondary-font */ line-height: 20px; font-size: 16px; font-weight: bold; border: 0; }

/* Basic Elements - Images */ .portable-infobox .pi-image { border-bottom: 1px solid #AAAAAA; }

.portable-infobox .pi-image-collection .pi-image { padding-bottom: 10px; }

.portable-infobox .pi-image-collection-tab-content { background: transparent; }

.portable-infobox .pi-image-collection-tabs { font-size: 12px; padding: 0 0 6px; }

.portable-infobox .pi-image-collection-tabs .pi-tab-link { font-weight: bold; font-size: smaller; line-height: 12px; color: #006CB0; padding: 0; border: 0; }

.portable-infobox .pi-tab-link:not(.current):hover { text-decoration: underline; }

.portable-infobox .pi-tab-link.current { background: transparent; color: inherit; cursor: text; }

.portable-infobox .pi-tab-link + .pi-tab-link { padding-left: 2px; border-left: 1pt solid #3A3A3A; margin-left: 3px; }

/* General Themes */ .portable-infobox.pi-theme-chapter { /* All PIs (Europa or not) using theme="chapter" */ }

.portable-infobox.pi-theme-chapter .pi-title, .portable-infobox.pi-theme-chapter .pi-horizontal-group .pi-header { /* Horizontal group headers */ /* pi-header pi-secondary-font pi-secondary-background pi-item-spacing */ background-color: black; color: white; } .portable-infobox.pi-theme-chapter .pi-data { /* All data rows */ /* pi-item pi-item-spacing pi-border-color */ padding: 0; } .portable-infobox.pi-theme-chapter .pi-data .pi-data-label { /* Vertical item labels */ /* pi-data-label pi-secondary-font */ background-color:#696969; color: white; -ms-flex-preferred-size: 130px; -webkit-flex-basis: 130px; -moz-flex-basis: 130px; flex-basis: 130px; padding: 5px; }

.portable-infobox.pi-theme-chapter .pi-data-value { /* All item values */ /* pi-font */ background-color: white; padding: 5px; }

.portable-infobox.pi-theme-character { /* All PIs (Europa or not) using theme="character" */ }

.portable-infobox.pi-theme-character .pi-background { /* The background underneath the entire infobox. */   background: white; }

.portable-infobox.pi-theme-chapter .pi-data { /* All data rows */ /* pi-item pi-item-spacing pi-border-color */ background: white; }

.portable-infobox.pi-theme-character .pi-title { text-align: center; font-size: 150%; background-image: -moz-linear-gradient(top, black 25%, gray 75%); background-image: -o-linear-gradient(top, black 25%, gray 75%); background-image: -ms-linear-gradient(top, black 25%, gray 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, black), color-stop(75%, gray)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, black), color-stop(75%, gray)); color: white; } .portable-infobox.pi-theme-character .pi-header { text-align: center; font-weight: normal; color: black; background-image: -moz-linear-gradient(top, #C3C3C3 25%, white 75%); background-image: -o-linear-gradient(top, #C3C3C3 25%, white 75%); background-image:-ms-linear-gradient(top, #C3C3C3 25%, white 75%); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #C3C3C3), color-stop(75%, white)); background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #C3C3C3), color-stop(75%, white)); }

/* Character Themes */ /* |topbg0-color = #000080|topbg1-color = #DBD650 */ .pi-theme-Aladdin { border: 1.5px solid #000080; } .pi-theme-Aladdin .pi-title, .pi-theme-Aladdin .pi-navigation { background-color: #000080; } .pi-theme-Aladdin .pi-header { background-color: #DBD650; } /* |topbg0-color = #FFD800|topbg1-color = #FF0000 */ .pi-theme-Alibaba-Saluja { border: 1.5px solid #FFD800; } .pi-theme-Alibaba-Saluja .pi-title, .pi-theme-Alibaba-Saluja .pi-navigation { background-color: #FFD800; } .pi-theme-Alibaba-Saluja .pi-header { background-color: #FF0000; } /* |topbg0-color = #800000|topbg1-color = #E62020 */ .pi-theme-Morgiana { border: 1.5px solid #800000; } .pi-theme-Morgiana .pi-title, .pi-theme-Morgiana .pi-navigation { background-color: #800000; } .pi-theme-Morgiana .pi-header { background-color: #E62020; } /* |topbg0-color = #051768|topbg1-color = #194047 */ .pi-theme-Hakuryuu-Ren { border: 1.5px solid #051768; } .pi-theme-Hakuryuu-Ren .pi-title, .pi-theme-Hakuryuu-Ren .pi-navigation { background-color: #051768; } .pi-theme-Hakuryuu-Ren .pi-header { background-color: #194047; }

/* JS-tabbers replacement for Infoboxes */ .custom-tabber .tabber { font-size: 13px; }

.custom-tabber .tabber .tabbertab { padding: 0; border: 0; }

.custom-tabber .tabber .tabbernav { display: flex; flex-wrap: wrap; justify-content: center; font-size: 10px; font-family: inherit; padding: 0; border: 0; margin-left: 0; }

.custom-tabber .tabber .tabbernav li { line-height: normal; }

.custom-tabber .tabber .tabbernav li:first-of-type a { margin-left: 0; }

.custom-tabber .tabber .tabbernav li:first-of-type:after { content: "\00A0"; }

.custom-tabber .tabber .tabbernav wbr + li:before, .custom-tabber .tabber .tabbernav li + li:before { content: "|\00A0"; }

.custom-tabber .tabber .tabbernav li a { background: transparent; color: #006CB0; padding: 0; border: 0; margin-left: 0; }

.custom-tabber .tabber .tabbernav .tabberactive a { background: transparent; color: inherit; border: 0; cursor: text; }

.custom-tabber .tabber .tabbernav li:not(.tabberactive) a:hover { text-decoration: underline; }

.custom-tabber.custom-tabber-center .tabber { text-align: center; }

.custom-tabber.custom-tabber-center .tabber .tabbernav li a, .custom-tabber.custom-tabber-center .tabber .tabbernav li { font-size: 18px; }

.custom-tabber.custom-tabber-center .tabber .tabbernav li a { font-weight: bold; }