MediaWiki:Themes.css

/* INFOBOXES */ .portable-infobox { width: 400px; background: #f9f9f9; border-collapse: separate; padding: 2px; border: 3px ridge #aaa; border-radius: 2px; color: #000000; align-items: center; justify-content: center; }

.portable-infobox { border-color: #aaa; color: #000000; text-align: center; vertical-align: middle; }

.portable-infobox a { color: #2F48C2; }

.portable-infobox a:visited { color: #7736B7; }

.portable-infobox a.new { color: #CC2200; }

.portable-infobox .pi-font { font-size: 12px; color: #000000; text-align: center; vertical-align: middle; }

.portable-infobox .pi-secondary-font { color: #000000; text-align: center; }

.portable-infobox .pi-image { background: #DDF; height: auto; max-width: 400px; margin: 2px 0; }

.portable-infobox .pi-image-thumbnail { height: auto; max-width: 400px; }

.portable-infobox .pi-secondary-background { background-color: #DDF; }

.portable-infobox .pi-background { background-color: #DDF; } .portable-infobox .pi-data:last-of-type, .portable-infobox .pi-group { border-bottom: none; } .portable-infobox .pi-data:last-of-type + .pi-group { border-top-style: none; text-align: center; } .portable-infobox .pi-title, .portable-infobox .pi-header { color: #FFFFFF; background: #006CB0; border: 1px ridge #111; text-align: center; font-size: 12px; padding: 2px; box-shadow: inset 0 0 1px #111; }

.portable-infobox .pi-header a:link { color: #FFFFFF; }

.portable-infobox .pi-header a:visited { color: #FFFFFF; } .portable-infobox .pi-title { font-family: Amita; font-size: 125%; }

.portable-infobox .pi-data { align-items: center; justify-content: center; } .portable-infobox .pi-data-label { color: #000000; padding: 0px; background: transparent; flex-basis: 120px; }

/* Horizontal group value/label styling */ .portable-infobox .pi-horizontal-group-item.pi-data-value, .portable-infobox .pi-horizontal-group-item.pi-data-label { font-size: 60%; padding: 0px; }

/* Reviews Infobox */ .portable-infobox.pi-theme-reviews { width: 90%; margin: auto; background: #f9f9f9; vertical-align: middle; border-collapse: separate; padding: 2px; border: 3px ridge #aaa; border-radius: 2px; color: #000000; align-items: center; justify-content: center; text-align: center; }

.portable-infobox.pi-data-value { max-width: 200px; }

.portable-infobox.pi-theme-reviews { border-color: #aaa; color: #000000; text-align: center; vertical-align: middle; }

.portable-infobox.pi-theme-reviews a { color: #2F48C2; }

.portable-infobox.pi-theme-reviews a:visited { color: #7736B7; }

.portable-infobox.pi-theme-reviews a.new { color: #CC2200; }

.portable-infobox.pi-theme-reviews .pi-font { font-size: 12px; color: #000000; text-align: center; vertical-align: middle; }

.portable-infobox.pi-theme-reviews .pi-secondary-font { color: #000000; text-align: center; vertical-align: middle; }

.portable-infobox.pi-theme-reviews .pi-image { background: #ffffff; margin: 2px 0; }

.portable-infobox.pi-theme-reviews .pi-secondary-background { background-color: #DDF; }

.portable-infobox.pi-theme-reviews .pi-background { background-color: #DDF; } .portable-infobox.pi-theme-reviews .pi-data:last-of-type, .portable-infobox.pi-theme-reviews .pi-group { border-bottom: none; } .portable-infobox.pi-theme-reviews .pi-data:last-of-type + .pi-group { border-top-style: none; text-align: center; } .portable-infobox.pi-theme-reviews .pi-title, .portable-infobox.pi-theme-reviews .pi-header{ color: #FFFFFF; background: #006CB0; border: 1px ridge #111; text-align: center; font-size: 12px; padding: 2px; box-shadow: inset 0 0 1px #111; } .portable-infobox.pi-theme-reviews .pi-title { font-family: Amita; font-size: 125%; }

.portable-infobox.pi-theme-reviews .pi-data { align-items: center; vertical-align: middle; justify-content: center; border: 3px ridge #aaa; border-radius: 2px; box-shadow: inset 0 0 1px #111; } .portable-infobox.pi-theme-reviews .pi-data-label { color: #000000; padding: 0px; background: transparent; flex-basis: 120px; border: 3px ridge #aaa; border-radius: 2px; box-shadow: inset 0 0 1px #111; }

/* Horizontal group value/label styling */ .portable-infobox.pi-theme-reviews .pi-horizontal-group-item.pi-data-value, .portable-infobox.pi-theme-reviews .pi-horizontal-group-item.pi-data-label { font-size: 90%; padding: 0px; border: 3px ridge #aaa; }

/* EVE Theme */

.portable-infobox.pi-theme-eve { text-align: left; }

.portable-infobox.pi-theme-eve .pi-label { text-align: left; }

.portable-infobox.pi-theme-eve .pi-data { text-align: right; }

/* Footer participants */ /* Changes title background color, font */ .pi-theme-VGNew .pi-title { background: #006CB0; font-size: 115%; color: #FFFFFF; } /* styles entire infobox */ .pi-theme-VGNew { border: 1px solid #B8A987; color: #3A3A3A; }

.pi-theme-VGNew .pi-image { background: #DDF; height: auto; max-width: 400px; margin: 2px 0; }

.pi-theme-VGNew .pi-image-thumbnail { height: auto; max-width: 400px; } .pi-theme-VGNew .pi-background { background-color: #FFFFFF; } /* Left column width and align */ .pi-theme-VGNew .pi-data-label { flex-basis: 165px; text-align: left; font-size: 90%; } /* Right column align */ .pi-theme-VGNew .pi-data-value { text-align: right; font-size: 90%; }

/* Wide-load Infobox from MHW */

.portable-infobox.pi-theme-wide-load { background-color:#EBEBEB; border:3px solid #371c01; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 0 4px #371c01; -moz-box-shadow:0 0 4px #371c01; box-shadow:0 0 4px #371c01; color:#000; padding:3px;

.portable-infobox.pi-theme-wide-load.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) { text-align:center!important }

.portable-infobox.pi-theme-wide-load .pi-item-spacing { padding:0; } .portable-infobox.pi-theme-wide-load .pi-header, .portable-infobox.pi-theme-wide-load .pi-title { background-color:#000!important; color:#fff; text-align:center; padding:5px; } .portable-infobox.pi-theme-wide-load .pi-data-value { text-align:center; }

.portable-infobox.pi-theme-wide-load .pi-data-label { text-align:center; background-color:#3A5766; color:#fff; }

.portable-infobox.pi-theme-wide-load:not(.pi-theme-wide-load) .pi-data-label { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -ms-flex-preferred-size:70%; -webkit-flex-basis:70%; -moz-flex-basis:70%; flex-basis:70%; }

.portable-infobox.pi-theme-wide-load .pi-border-color { border-color:#000 } .portable-infobox.pi-theme-wide-load .pi-navigation { background-color:#EBEBEB } .portable-infobox.pi-theme-wide-load .pi-font { padding:5px }

.pi-theme-wide-load-notes.portable-infobox, .pi-theme-wide-load-loading-info.portable-infobox, .pi-theme-wide-load-portrait.portable-infobox, .pi-theme-wide-load-coatings.portable-infobox, .pi-theme-wide-load-kinsect.portable-infobox, .pi-theme-wide-load.portable-infobox { width:98%!important; }

.pi-wide-load-theme-file.portable-infobox { width:auto!important; }

/* .pi-theme-wide-load-kinsect .pi-image { text-align:center; position:absolute; padding:40px; }

.pi-theme-wide-load .pi-image { text-align:center; position:absolute; } .pi-theme-wide-load img.pi-image-thumbnail { width:auto; height:400px; max-height:400px; margin:25px 125px; } .pi-theme-wide-load-portrait .pi-data-value, .pi-theme-wide-load-coatings .pi-data-value, .pi-theme-wide-load-kinsect .pi-data-value, .pi-theme-wide-load .pi-data-value { text-align:center } .pi-theme-wide-load-portrait .pi-data-value:not(:first-child), .pi-theme-wide-load-coatings .pi-data-value:not(:first-child), .pi-theme-wide-load-kinsect .pi-data-value:not(:first-child), .pi-theme-wide-load .pi-data-value:not(:first-child) { -ms-flex-preferred-size:60%; -webkit-flex-basis:60%; -moz-flex-basis:60%; flex-basis:60%; padding-left:10px; } .pi-theme-wide-load-portrait .pi-data, .pi-theme-wide-load-coatings .pi-data, .pi-theme-wide-load-kinsect .pi-data, .pi-theme-wide-load .pi-data { width:50%; margin-left:50%; } .pi-theme-wide-load-notes .pi-data { width:98%; margin-left:0; padding-left:40%; } .pi-theme-wide-load-notes .pi-data-value:last-child { text-align:center, -ms-flex-preferred-size:40%; -webkit-flex-basis:40%; -moz-flex-basis:40%; flex-basis:40%; } .pi-theme-wide-load-portrait .pi-data-label, .pi-theme-wide-load-coatings .pi-data-label, .pi-theme-wide-load-kinsect .pi-data-label, .pi-theme-wide-load .pi-data-label { padding:7px; font-size:14px; font-weight:bold; -ms-flex-preferred-size:35%; -webkit-flex-basis:35%; -moz-flex-basis:35%; flex-basis:35%; } .pi-theme-wide-load-loading-info .pi-navigation { text-align:center; font-weight:bold; background-color:white; border-top:1px solid black } .pi-theme-wide-load-portrait .pi-navigation, .pi-theme-wide-load-coatings .pi-navigation, .pi-theme-wide-load-kinsect .pi-navigation, .pi-theme-wide-load .pi-navigation { text-align:center; font-weight:bold; background-color:#3A5766; } .pi-theme-wide-load-portrait .pi-navigation a, .pi-theme-wide-load-portrait .pi-navigation a:link, .pi-theme-wide-load-portrait .pi-navigation a:visited, .pi-theme-wide-load-coatings .pi-navigation a, .pi-theme-wide-load-coatings .pi-navigation a:link, .pi-theme-wide-load-coatings .pi-navigation a:visited, .pi-theme-wide-load-kinsect .pi-navigation a, .pi-theme-wide-load-kinsect .pi-navigation a:link, .pi-theme-wide-load-kinsect .pi-navigation a:visited, .pi-theme-wide-load .pi-navigation a, .pi-theme-wide-load .pi-navigation a:link, .pi-theme-wide-load .pi-navigation a:visited { color:#fff!important }

/* This is how you could get the Description field all the way to the left. Problem is  that the image would interfere with it */

/* This is how wide-load-kinsect differs from regular wide-load, so wide-load-kinsect not defined */

.pi-theme-wide-load-portrait .pi-data:last-child, .pi-theme-wide-load .pi-data:last-child { width:100%; margin-left:0; } .pi-theme-wide-load-portrait .pi-data-label:last-child, .pi-theme-wide-load-portrait .pi-data-label:last-child { -ms-flex-preferred-size:20%; -webkit-flex-basis:20%; -moz-flex-basis:20%; flex-basis:20%; text-align:left; } .pi-theme-wide-load-portrait .pi-data-value:last-child, .pi-theme-wide-load .pi-data-value:last-child { -ms-flex-preferred-size:80%; -webkit-flex-basis:80%; -moz-flex-basis:80%; flex-basis:80%; text-align:left; } .pi-theme-wide-load-coatings .pi-data-value { -ms-flex-preferred-size:80%; -webkit-flex-basis:80%; -moz-flex-basis:80%; flex-basis:80%; text-align:center; } .pi-theme-wide-load .pi-group .pi-group-item:not(:last-child) { text-align:center }

/* This is how wide-load-kinsect differs from regular wide-load, so wide-load not defined */ .pi-theme-wide-load-portrait .pi-horizontal-group .pi-horizontal-group-item, .pi-theme-wide-load-coatings .pi-horizontal-group .pi-horizontal-group-item, .pi-theme-wide-load-kinsect .pi-horizontal-group .pi-horizontal-group-item { text-align:center }

.imagewrap { height:400px; display:flex; position:absolute } .imagewrap .element { display:inline-block; width:400px; margin:auto; } .kinsect-imagewrap { height:auto; display:flex; position:absolute; width:100px; } .kinsect-imagewrap .element { display:inline-block; width:400px; margin:auto; }

.portable-infobox.pi-theme-wide-load-portrait .element { /* Needed for really tall images */ width:auto; height:100px; max-height:100px; margin:0 0 20px 20px }

/* Main themes */ .portable-infobox.pi-theme-Effect { width:98%; }

.portable-infobox.pi-theme-Effect .pi-image { text-align:center; position:absolute; } .pi-image-thumbnail { width:auto; height:350px; max-height:350px; margin:25px 125px; }

.portable-infobox.pi-theme-Effect .pi-data-value { text-align:center } .portable-infobox.pi-theme-Effect .pi-data-value:not(:first-child) { -ms-flex-preferred-size:60%; -webkit-flex-basis:60%; -moz-flex-basis:60%; flex-basis:60%; padding-left:10px; } .portable-infobox.pi-theme-Effect .pi-data { width:50%; margin-left:50%; } .portable-infobox-notes.pi-theme-Effect .pi-data { width:98%; margin-left:0; padding-left:40%; } .portable-infobox-notes.pi-theme-Effect .pi-data-value:last-child { text-align:center, -ms-flex-preferred-size:40%; -webkit-flex-basis:40%; -moz-flex-basis:40%; flex-basis:40%; } .portable-infobox.pi-theme-Effect .pi-data-label { padding:7px; font-size:14px; font-weight:bold; -ms-flex-preferred-size:35%; -webkit-flex-basis:35%; -moz-flex-basis:35%; flex-basis:35%; } .portable-infobox.pi-theme-Effect .pi-navigation { text-align:center; font-weight:bold; background-color:#3A5766; } .portable-infobox.pi-theme-Effect .pi-navigation a, .portable-infobox.pi-theme-Effect .pi-navigation a:link, .portable-infobox.pi-theme-Effect .pi-navigation a:visited { color:#fff!important }

.portable-infobox.pi-theme-Effect .pi-group .pi-group-item:not(:last-child) { text-align:center!important }

.imagewrap { height:250px; display:flex; position:absolute } .imagewrap .element { display:inline-block; width:330px; margin:auto; }

/* Effect */ .portable-infobox.pi-theme-Effect .pi-data .pi-data-label, .portable-infobox.pi-theme-Effect .pi-horizontal-group-item.pi-data-label, .portable-infobox.pi-theme-Effect .pi-title, .portable-infobox.pi-theme-Effect .pi-header { color: black; background: #F93; }