MediaWiki:Infoboxes.css

/* ========================  This CSS page controls the GENERAL look of infoboxes. If you're looking for styles that only affect INDIVIDUAL infoboxes, please go to MediaWiki: Themes.css ========================= */ .portable-infobox { border: 1px solid var(--bright-accent-color); background: #fff; color: black; width: 250px!important; line-height: 130%; padding: 5px; } .portable-infobox .pi-item-spacing { padding: 1px 0 0 0; } .portable-infobox .pi-title, .portable-infobox .pi-header { background: var(--theme-accent-color); color: var(--theme-link-dynamic-color-1); font-weight: bold; text-align: center; text-transform: none; letter-spacing: 0; line-height: 140%; } .theme-fandomdesktop-dark .portable-infobox .pi-title, .theme-fandomdesktop-dark .portable-infobox .pi-header { background-color: var(--theme-link-color); } .portable-infobox .pi-title { font-size: 1.2em; padding: 10px; } .pi-header { line-height: 1.2em; font-size: 1.0em; } .pi-horizontal-group .pi-horizontal-group-item, .pi-horizontal-group .pi-header { text-align: center!important; } .portable-infobox .pi-title a, .portable-infobox .pi-title a: link, .portable-infobox .pi-title a: visited, .portable-infobox .pi-title a: hover, .portable-infobox .pi-header a, .portable-infobox .pi-header a: visited, .portable-infobox .pi-header a: link, .portable-infobox .pi-header a: hover { color: var(--theme-link-dynamic-color-1); text-decoration: underline; } .portable-infobox .pi-header .story-nav { background-color: var(--theme-accent-color); color: var(--theme-link-dynamic-color-1); border: 0; } .portable-infobox .pi-header .story-nav a, .portable-infobox .pi-header .story-nav a: visited, .portable-infobox .pi-header .story-nav a: link, .portable-infobox .pi-header .story-nav a: hover { color: var(--theme-link-dynamic-color-1); text-decoration: underline; } .portable-infobox .pi-title a: new, .portable-infobox .pi-title a: new: visited, .portable-infobox .pi-header a: new, .portable-infobox .pi-header a: new: visited, .portable-infobox .pi-navigation a: new, .portable-infobox .pi-navigation a: new: visited { color: #eee; text-decoration: underline; } .portable-infobox .pi-data-label { background: #ececec; color: #000; padding-right: 10px; -ms-flex-preferred-size: 70%; -webkit-flex-basis: 70%; -moz-flex-basis: 70%; flex-basis: 70%; line-height: 120%; font-size: 12px; text-transform: none; letter-spacing: 0px; background-color: #ececec; text-align: right; } .pi-item: hover > .pi-data-label, .pi-item: hover > .pi-data-value { background-color: rgba(229, 192, 118, 0.4); } .portable-infobox .pi-data-label a, .portable-infobox .pi-data-label a: link, .portable-infobox .pi-data-label a: visited, .portable-infobox .pi-data-label a, .portable-infobox .pi-data-label a: link, .portable-infobox .pi-data-label a: visited { color: #000; }

.portable-infobox .pi-data-value a, .portable-infobox .pi-data-value a: link, .portable-infobox .pi-data-value a: visited { color: #000; }

.portable-infobox .pi-data-label a: hover, .portable-infobox .pi-data-label a: link: hover, .portable-infobox .pi-data-label a: visited: hover, .portable-infobox .pi-data-value a: hover, .portable-infobox .pi-data-value a: link: hover, .portable-infobox .pi-data-value a: visited: hover { color: #000!important; text-decooration: underline; } .portable-infobox .pi-data-label a.new, .portable-infobox .pi-data-label a.new: visited, .portable-infobox .pi-data-value a.new, .portable-infobox .pi-data-value a.new: visited { color: #624747!important; text-decoration: none!important; /* Infobox needs a diff color for "red" links because infoboxes have light background */ } .portable-infobox .pi-data-label a.new: hover, .portable-infobox .pi-data-label a.new: visited: hover, .portable-infobox .pi-data-value a.new: hover, .portable-infobox .pi-data-value a.new: visited: hover { color: #555; text-decoration: none; } .portable-infobox .pi-data-value, .portable-infobox .pi-data-label { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; line-height: 130%; } .portable-infobox .pi-navigation { background-color: #ececec; line-height: 130%; } .pi-navigation: first-of-type { line-height: 150%; padding: 0 5px 0 5px; }

.portable-infobox .pi-navigation a, .portable-infobox .pi-navigation a: link, .portable-infobox .pi-navigation a: visited, .portable-infobox .pi-navigation a: hover, .portable-infobox .pi-navigation a, .portable-infobox .pi-navigation a: link, .portable-infobox .pi-navigation a: visited, .portable-infobox .pi-navigation a: hover { color: #000!important; } .portable-infobox img.pi-image-thumbnail { width: 250px; height: auto; padding-top: 4px; } img.pi-image-thumbnail { max-width: 100%; height: auto; }

.pi-horizontal-group-item .embedvideo { margin-top: 3px; }

/* ==========================  Collapsiblity styling ========================== */

.pi-collapse-closed .pi-header: first-child, .pi-collapse .pi-header: first-child { text-align: left !important; font-weight: normal; padding: 2px 0 2px 10px; border-color: #fff!important; } .pi-collapse-closed .pi-header: : after { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); content: '[more]'!important; font-size: 10px; color: #fff; border-color: transparent; border-width: 0; width: 35px; right: 3px; top: 40%; display: none; } .pi-collapse .pi-header: after { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); color: #fff; content: '[hide]'; font-size: 10px; border-color: transparent; border-width: 0; width: 35px; right: 3px; top: 40%; display: none; }

.theme-fandomdesktop-dark .portable-infobox:nth-of-type(n+2), .theme-fandomdesktop-dark .collapsible-navfobox .portable-infobox { border-color: #cda659; } .theme-fandomdesktop-light .portable-infobox:nth-of-type(n+2), .theme-fandomdesktop-light .collapsible-navfobox .portable-infobox { border-color: #415c84; } .theme-fandomdesktop-dark .portable-infobox .pi-header + .pi-header { background: #edcc8b; } .theme-fandomdesktop-light .portable-infobox .pi-header + .pi-header { background: #73849e; } .portable-infobox .pi-header:nth-child(n+2) { padding: 4px 9px 5px 9px; margin-top: 0px; } .portable-infobox .pi-header:nth-child(n+3) { padding: 2px 9px 2px 9px; margin-top: 5px; }

.theme-fandomdesktop-dark .portable-infobox .pi-header + .pi-header ~ .pi-header:nth-of-type(3) { background: #e7c47e; } .theme-fandomdesktop-light .portable-infobox .pi-header + .pi-header ~ .pi-header:nth-of-type(3) { background: #879ec0; } .theme-fandomdesktop-dark .portable-infobox .pi-header + .pi-header ~ .pi-header:nth-of-type(4) { background: #e7cc97; } .theme-fandomdesktop-light .portable-infobox .pi-header + .pi-header ~ .pi-header:nth-of-type(4) { background: #8ea0b6; } .theme-fandomdesktop-dark .portable-infobox + .portable-infobox:nth-of-type(3) .pi-header:first-of-type { background: #edc980; } .theme-fandomdesktop-light .portable-infobox + .portable-infobox:nth-of-type(3) .pi-header:first-of-type { background: #a2b6d3; }

/* This temporary changes to the CSS were primarily created by User: Bongolium500 with some additions from User: Spongebob456 and User: SOTO, and readded by User: OncomingStorm12th. It aims to emulate the Oasis skin as much as possible and will likely be replaced by an entirely new style sometime in the near future. It is a mixture of imports of old stylesheets, direct copy-pastes of sections of old style sheets and slight edits of old stylesheets. */

/* A few tweaks to infoboxes - in use */ .page-content .portable-infobox .pi-data-label { background: #ececec; color: #000; padding-right: 10px; -ms-flex-preferred-size: 70%; -webkit-flex-basis: 70%; -moz-flex-basis: 69%; flex-basis: 70%; line-height: 120%; font-size: 11px; text-transform: none; letter-spacing: 0; background-color: #ececec; text-align: right; } .page-content .portable-infobox .pi-title{ padding: 5px; } .page-content .portable-infobox .pi-header { padding: 3px; } .wds-tabs__tab { color: black; }

/* Fixing captions on dark theme */ .theme-fandomdesktop-dark .pi-caption { color: black; } .theme-fandomdesktop-dark .pi-caption a { color: #3a4f80 !important; }