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 #e5c076; 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: #cfaa5e; } .theme-fandomdesktop-light .portable-infobox { border-color: #012c57; } .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: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; }

/* ==========================  Navigation styling ========================== */

.theme-fandomdesktop-light .portable-infobox + .portable-infobox .pi-header { color: var(--theme-link-dynamic-color-1); } .theme-fandomdesktop-light .portable-infobox + .portable-infobox:nth-of-type(2) .pi-header:first-of-type { background: var(--theme-accent-color); } .portable-infobox .pi-header + .pi-header { background: var(--theme-accent-color); } .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; }

.portable-infobox .pi-header + .pi-header ~ .pi-header:nth-of-type(3) { background: var(--theme-accent-color); } .portable-infobox .pi-header + .pi-header ~ .pi-header:nth-of-type(4) { background: var(--theme-accent-color); } .portable-infobox + .portable-infobox:nth-of-type(3) .pi-header:first-of-type { background: var(--theme-accent-color); }

/* 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; }