MediaWiki:Infobox.css

/* CSS for the wiki's infoboxes - Inspired by Wookieepedia and Harry Potter Wiki */ .portable-infobox { width: 250px; border: none; } .portable-infobox.pi-background { background: none; } .portable-infobox .pi-border-color { border: none; }

/* Adjusts reference size */ .portable-infobox .reference, .refadjust .reference { font-size: 7.85px; }

/* Data background colors */ .portable-infobox .pi-data:nth-child(even) { background-color: var(--theme-infobox-background-color--2, #f0f0f0); } .portable-infobox .pi-data:nth-child(odd) { background-color: var(--theme-infobox-background-color--1, #f9f9f9); }

/* Slightly reduce padding between items */ .portable-infobox .pi-item-spacing { padding: 4px; }

/* Title and header settings */ .portable-infobox .pi-title { color: white; text-align: center; font-size: 14px !important; padding: 4px !important; font-weight: 500 !important; line-height: 1.5; }

.portable-infobox .pi-header { color: black; text-align: left; font-size: 12px !important; padding: 4px !important; font-weight: 500 !important; line-height: 1.5; }

/* Unbolding labels */ .portable-infobox .pi-data-label { font-weight: normal !important; font-size: 11px !important; flex-basis: auto; width: 40%; align-items: center; padding-bottom: 0; } .portable-infobox .pi-data-value { font-size: 11px; flex-basis: auto; width: 60%; align-items: center; }

/* Navigation */ .portable-infobox .pi-navigation { text-align: center; font-weight: 500; font-size: 11px; line-height: 1.5; } .portable-infobox .pi-navigation:last-child { /* Bottom rounded corners */ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .portable-infobox .pi-navigation .selflink { font-weight: 500; }

/* Horizontal group listings */ .portable-infobox .pi-horizontal-group-item:nth-child(even) { background-color: var(--theme-infobox-background-color--2, #f0f0f0); } .portable-infobox .pi-horizontal-group-item:nth-child(odd) { background-color: var(--theme-infobox-background-color--1, #f9f9f9); }

/* Infobox tabber design */ .portable-infobox .pi-image-collection .wds-tabs__tab { color: inherit; cursor: pointer; } .portable-infobox .pi-image-collection .wds-tabs .wds-tabs__tab-label { padding: 8px 4px; height: auto; transition: none; letter-spacing: normal; font-weight: normal; } .portable-infobox .pi-image-collection .wds-tabs__tab.wds-is-current { background-color: rgba(var(--theme-accent-color--rgb),.33); color: inherit; box-shadow: none; } .portable-infobox .pi-image-collection .wds-tabs__tab.wds-is-current .wds-tabs__tab-label { font-weight: 500; }

/* Fix spacing */ /** People **/ .portable-infobox.pi-theme-person .pi-data-label { width: 30%; } .portable-infobox.pi-theme-person .pi-data-value { width: 70%; } /** Also make it compatible, even on deceased people */ .portable-infobox.pi-theme-deceased .pi-data-label { width: 30%; } .portable-infobox.pi-theme-deceased .pi-data-value { width: 70%; } /** Series **/ .portable-infobox.pi-theme-series .pi-data-label { width: 36%; } .portable-infobox.pi-theme-series .pi-data-value { width: 64%; } /** Characters **/ .portable-infobox.pi-theme-character .pi-data-label { width: 32%; } .portable-infobox.pi-theme-character .pi-data-value { width: 68%; } /** Companies **/ .portable-infobox.pi-theme-company .pi-data-label { width: 34%; } .portable-infobox.pi-theme-company .pi-data-value { width: 66%; } /** Franchises **/ .portable-infobox.pi-theme-franchise .pi-data-label { width: 32%; } .portable-infobox.pi-theme-franchise .pi-data-value { width: 68%; }

/* Expand the related section */ .portable-infobox .pi-data[data-source="related"] .pi-data-value, .portable-infobox .pi-data[data-source="sns"] .pi-data-value { width: 100%; }

/* Remove the bullet points for sns icons */ .portable-infobox .hlist.hlist-sns ul { margin-left: 0; } .hlist.hlist-sns li:after { content: none; } .hlist.hlist-sns li:not(:last-child) { padding-right: 5px; }

/* Invert the X (formerly Twitter) and Instagram icons */ .theme-fandomdesktop-dark .portable-infobox .hlist-sns img[data-image-name="Twitter Icon.png"], .theme-fandomdesktop-dark .portable-infobox .hlist-sns img[data-image-name="Instagram Icon.png"] { filter: invert(1); } /* Dark theme TikTok icon */ .theme-fandomdesktop-dark .portable-infobox .hlist-sns img[data-image-name="TikTok Icon.png"] { content: url("https://static.wikia.nocookie.net/cartoons/images/9/94/TikTok_Icon_Dark.png/revision/latest/scale-to-width-down/20"); }