MediaWiki:Themes.css

/* Portable Infobox defaults */ .portable-infobox { border-spacing: 3px; border-color: #AAA; background-color: #f9f9f9; border: 1px solid #aaa; color: black; margin: 0.5em 0 0.5em 1em; padding: 0.2em; } .portable-infobox .pi-collapse .pi-header:first-child::after { border-color: initial; }

.portable-infobox .pi-border-color { /* The separator between data and groups. */   border-color: transparent; } .portable-infobox .pi-item-spacing { padding: 0; } .portable-infobox .pi-data-label { /* All data labels */ /* pi-secondary-font */ word-wrap: normal; } .portable-infobox .pi-title { /* pi-item pi-item-spacing */ font-weight: bolder; font-size: larger; text-align:center; } .portable-infobox .pi-title:first-of-type { background-color: #fec356; } .portable-infobox .pi-img-thumbnail { /* The actual render */ height: auto; width: 100%; max-width: 400px; /* Use when you want to put a limit to how far it can scale up. */ } .portable-infobox .pi-caption { text-align: center; font-variant: normal; font-size: smaller; } .portable-infobox .pi-header, .portable-infobox .pi-navigation {   /* All headers */ /* pi-secondary-font pi-secondary-background pi-item-spacing */ text-align: center; background: #800000; color: #FF0; padding: 2px; border: 1px ridge #111; } .portable-infobox .pi-header a:link, .portable-infobox .pi-header a:visited, .portable-infobox .pi-navigation a:link, .portable-infobox .pi-navigation a:visited { color: #FF0; } .portable-infobox .pi-navigation ul { margin-left: 0; } .portable-infobox .pi-data .pi-data-label, .portable-infobox .pi-data > .pi-data-value, .skin-monobook .portable-infobox .pi-data-label:not(.pi-horizontal-group-item):not(.pi-smart-data-label) { padding: .3333em; }

.portable-infobox .pi-data .pi-data-label { /* Vertical item labels */ /* pi-data-label pi-secondary-font */ text-align: left; background: #EEE; border: #AAA solid; border-width: 0 1px 1px 0; } .portable-infobox .pi-data > .pi-data-value { /* Vertical item values */ /* pi-data-value pi-font */ text-align: right; } .portable-infobox .pi-data .pi-data-value ul { list-style-type: none; list-style-position: inside; list-style-image: none; margin-left: 0; } .portable-infobox .pi-data .pi-data-value:only-child { /* Data values where there is no label */ /* pi-data-value pi-font */ width: 100%; text-align: center; } .portable-infobox .pi-data-value.pi-smart-data-value > ul { text-align: left; }

/* Standard themes */

/* Main themes */ .portable-infobox.pi-theme-card-set { clear: none; width: calc(100% - 325px); margin: 0.5em 0 0.5em 0; } .portable-infobox.pi-theme-card-set pre:empty { display: none; } .portable-infobox.pi-theme-card-set .pi-data .pi-data-label { /* i.e. default group layout */ -ms-flex-preferred-size: 120px; -webkit-flex-basis: 120px; -moz-flex-basis: 120px; flex-basis: 120px; } .portable-infobox.pi-theme-card-set .pi-data .pi-data-value { /* i.e. default group layout */ width: 100%; flex-basis: auto; } .portable-infobox.pi-theme-CARD { border: 5px solid #666; border-radius: 9px; padding: .36em; margin-top: 5px; }

/* Custom classes */ .portable-infobox-notes .pi-data { width:98%; margin-left:0; padding-left:40%; } .portable-infobox-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%; } .imagewrap { height:250px; display:flex; position:absolute } .imagewrap .element { display:inline-block; width:330px; margin:auto; }

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

.portable-infobox.pi-theme-Effect .pi-image { text-align:center; position:absolute; } .portable-infobox.pi-theme-Effect img.pi-image-thumbnail { width:auto; height:250px; max-height:250px; 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.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 } .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; }

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

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

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

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

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

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

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

/* Strategy Card */ .portable-infobox.pi-theme-Pendulum-Strategy-Card .pi-data .pi-data-label, .portable-infobox.pi-theme-Pendulum-Strategy-Card .pi-horizontal-group-item.pi-data-label, .portable-infobox.pi-theme-Pendulum-Strategy-Card .pi-title, .portable-infobox.pi-theme-Pendulum-Strategy-Card .pi-header { color: black; background: #66F; }

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

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

/* Counter */ .portable-infobox.pi-theme-Pendulum-Counter .pi-data .pi-data-label, .portable-infobox.pi-theme-Pendulum-Counter .pi-horizontal-group-item.pi-data-label, .portable-infobox.pi-theme-Pendulum-Counter .pi-title, .portable-infobox.pi-theme-Pendulum-Counter .pi-header { color: black; background: #C0C0C0; } /* example of themes split .portable-infobox.pi-theme-Fusion .pi-data .pi-data-label, .portable-infobox.pi-theme-Fusion .pi-horizontal-group-item.pi-data-label { color: black; background: #96c; } .portable-infobox.pi-theme-Fusion .pi-title, .portable-infobox.pi-theme-Fusin .pi-header { color: white; background: ; }