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: #f0f0f0; } .portable-infobox .pi-data:nth-child(odd) { background-color: #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: #f0f0f0; } .portable-infobox .pi-horizontal-group-item:nth-child(odd) { background-color: #f9f9f9; }

/* Dark theme background colors */ .theme-fandomdesktop-dark .portable-infobox .pi-data:nth-child(even), .theme-fandomdesktop-dark .portable-infobox .pi-horizontal-group-item:nth-child(even) { background-image: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)); } .theme-fandomdesktop-dark .portable-infobox .pi-data:nth-child(odd), .theme-fandomdesktop-dark .portable-infobox .pi-horizontal-group-item:nth-child(odd) { background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)); }

/* Preventing translucent data items on dark theme */ .theme-fandomdesktop-dark .portable-infobox .pi-data, .theme-fandomdesktop-dark .portable-infobox .pi-horizontal-group-item { background-color: var(--theme-page-background-color); }

/* 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 img[data-image-name="Twitter Icon.png"], .theme-fandomdesktop-dark .portable-infobox img[data-image-name="Instagram Icon.png"] { filter: invert(1); } /* Dark theme TikTok icon */ .theme-fandomdesktop-dark .portable-infobox 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"); }

/* WIP .portable-infobox .pi-data-label { border-right: 1px solid; border-image: linear-gradient(180deg, rgba(0,0,0,0), #aaa, #aaa, rgba(0,0,0,0)) 1; } .portable-infobox .pi-navigation { border-top: 1px solid; border-image: linear-gradient(90deg, rgba(0,0,0,0), #aaa, #aaa, rgba(0,0,0,0)) 9; } .portable-infobox .pi-data .pi-data-label, .portable-infobox .pi-data .pi-data-value { padding: 0; }