Themes.css

Revision as of 20:39, 14 July 2017

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

.pi-collapse .pi-header:first-child::after { border-color: initial; }

.portable-infobox .pi-item-spacing {
    /* The padding around titles, captions, data, headers, and navigation. */
}
.portable-infobox .pi-item {
    /* A row. */
 
}
.portable-infobox .pi-border-color {
    /* The separator between data and groups. */
    border-color: transparent;
}
.portable-infobox .pi-font {
    /* The font of data values. */
 
}
.portable-infobox .pi-secondary-font {
    /* The font of labels, headers, and navigation. */
 
}
.portable-infobox .pi-background {
    /* The background underneath the entire infobox. */
 
}
.portable-infobox .pi-secondary-background {
    /* The background behind headers and navigation. */
    /* These are often centered and a light color text on a dark background. Best to put those values here. */
}
 
.portable-infobox .pi-data-label {
    /* All data labels */
    /* pi-secondary-font */
    word-wrap: normal;
 
}
.portable-infobox .pi-data-value {
    /* All data values */
    /* pi-font */
}
.portable-infobox .pi-data {
    /* All data rows */
    /* pi-item pi-item-spacing pi-border-color */
}
.portable-infobox .pi-item-spacing {
    padding: 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; }
.portable-infobox .pi-horizontal-group-item.pi-data-label {
    /* Horizontal item labels */
    /* pi-data-label pi-secondary-font pi-border-color pi-item-spacing */
 
}
.portable-infobox .pi-horizontal-group-item.pi-data-value {
    /* Horizontal item values */
    /* pi-data-value pi-font pi-border-color pi-item-spacing */
 
}
 
.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-image {
    /* pi-item */
 
}
.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-group {
    /* pi-item pi-border-color */
 
}
.portable-infobox .pi-group {
    /* Vertical groups */
    /* pi-item pi-border-color */
 
}
.portable-infobox .pi-horizontal-group {
    /* Horizontal groups */
 
}
.portable-infobox .pi-header {
    /* 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 {
    color: #FF0;
}
.portable-infobox .pi-horizontal-group .pi-header {
    /* Horizontal group headers */
    /* pi-header pi-secondary-font pi-secondary-background pi-item-spacing */
 
}
.portable-infobox .pi-navigation {
    /* pi-item-spacing pi-secondary-background pi-secondary-font */
 
}
/* Standard themes */

/* Main themes */
.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-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%;   
}
.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;
}

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

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