MediaWiki:Themes.css

.portable-infobox { width: 300px; border: .15625vw solid #72bcd4; box-sizing: border-box; } .portable-infobox .pi-title, .portable-infobox .pi-header { text-align: center; } .portable-infobox .pi-title { font-weight: bold; font-family: 'Berkshire Swash', cursive; } .portable-infobox .pi-image-collection-tab-content { background: none; } .portable-infobox .pi-image-collection-tabs { display: flex; flex-flow: row wrap; justify-content: center; margin: 0; }

.portable-infobox .pi-image-collection-tabs li { background: #f8f8f8; border: none; box-sizing: border-box; color: #999; font-size: 12px; line-height: 18px; flex: 1 0 auto; margin: 0; }

.portable-infobox .pi-image-collection-tabs li.current, .portable-infobox .pi-image-collection-tabs li:hover { background-color: #72bcd4; color: white; font-weight: normal; transition: all 0.15s; }

/*	PI Themes .pi-theme-Ice .pi-header:before, .pi-theme-Ice .pi-header:after { content: "❄️"; } .pi-theme-Ice .pi-secondary-background { background-color: #69EBFF; } .pi-theme-Ice { background: rgba(105, 235, 255, 0.1); border-color: #69EBFF; } .pi-theme-Ice .pi-border-color { border-color: #69EBFF; } /*================================*/ .pi-theme-Fire .pi-header:before, .pi-theme-Fire .pi-header:after { content: "🔥"; } .pi-theme-Fire .pi-secondary-background { background-color: #D76566; } .pi-theme-Fire { background: rgba(215, 101, 102, 0.1); border-color: #D76566; } .pi-theme-Fire .pi-border-color { border-color: #D76566; } /*================================*/ .pi-theme-Water .pi-header:before, .pi-theme-Water .pi-header:after { content: "💧"; } .pi-theme-Water .pi-secondary-background { background-color: #00BDF2; } .pi-theme-Water { background: rgba(0, 189, 242, 0.1); border-color: #00BDF2; } .pi-theme-Water .pi-border-color { border-color: #00BDF2; } /*================================*/ .pi-theme-Wind .pi-header:before, .pi-theme-Wind .pi-header:after { content: "🌪️️️"; } .pi-theme-Wind .pi-secondary-background { background-color: #44C4C2; } .pi-theme-Wind { background: rgba(68, 196, 194, 0.1); border-color: #44C4C2; } .pi-theme-Wind .pi-border-color { border-color: #44C4C2; } /*================================*/ .pi-theme-Earth .pi-header:before, .pi-theme-Earth .pi-header:after { content: "🌿️️️"; } .pi-theme-Earth .pi-secondary-background { background-color: #DC9B34; } .pi-theme-Earth { background: rgba(220, 155, 52, 0.1); border-color: #DC9B34; } .pi-theme-Earth .pi-border-color { border-color: #DC9B34; } /*================================*/ .pi-theme-Lightning .pi-header:before, .pi-theme-Lightning .pi-header:after { content: "⚡️️️"; } .pi-theme-Lightning .pi-secondary-background { background-color: #FFC93B; } .pi-theme-Lightning { background: rgba(255, 201, 59, 0.1); border-color: #FFC93B; } .pi-theme-Lightning .pi-border-color { border-color: #FFC93B; } /*================================*/

/*   Copied from SAO Wiki 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; }

/*   End of Portable Infobox styling