Themes.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
/***** Taken from Danganronpa Wiki *****/
/** Portable Infoboxes **/
.portable-infobox {
    /* These are the defaults for new infoboxes. */
    /* They can be overridden by themes and accent-colors. */
    --title-color: #422E87;
    --heading-color: #422E87;
    --highlight-color: #A767A6;
    --contrast-color: #E1E4E7;
    color: white;
    background-color: white;
    border: 1px solid white;
    font-size: 11px;
    border-radius: 8px;
}
.portable-infobox > :first-child {
    /* The first element. Incredibly useful if you're rounding corners. */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.portable-infobox > :last-child {
    /* The last element. Incredibly useful if you're rounding corners. */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
 
/* Portable Infobox attributes */
.portable-infobox.pi-font,
.portable-infobox.pi-secondary-font {
    /* The font of data values. */
    /* The font of labels, headers, and navigation. */
    font-family: Verdana;
} 
.portable-infobox.pi-background,
.pi-europa.pi-background {
    /* The background underneath the entire infobox. */
    background-color: var(--background-color);
}
.portable-infobox .pi-secondary-background {
    /* The background behind headers and navigation. */
    background-color: var(--heading-color);
}
.portable-infobox .pi-border-color {
    /* The separator between data and groups. */
    border-color: white;
}
 
/* Portable Infobox elements */
.portable-infobox .pi-title {
    background-color: var(--title-color);
    text-align: center;
    font-weight: bold;
}
.portable-infobox:not(.pi-europa) .pi-header {
    /* Non-Europa headers */
    border-bottom: 1px solid white;
    text-align: center;
}
.portable-infobox.pi-europa .pi-header {
    /* Europa headers */
    margin: auto 1px;
    margin-top: 1px;
    text-align: center;
}
.portable-infobox .pi-image {
    background-color: var(--background-color);
    border-bottom: 1px solid white;
}
.portable-infobox .pi-image-collection-tabs {
    /* Image tabbers */
    text-align: center;
}
.portable-infobox .pi-image-collection-tabs li {
    /* Image tab labels */
    max-width: inherit;
    overflow: auto;
    border-radius: 8px;
    margin: 2px;
}
.portable-infobox .pi-image-collection-tabs .current {
    /* The active image tab label */
    background-color: var(--highlight-color);
}
.portable-infobox:not(.pi-europa) .pi-data {
    /* Data rows, not in Europa */
    padding: 0;
}
.portable-infobox.pi-europa .pi-data {
    /* Data rows in Europa */
    padding: 1px;
    padding-bottom: 0;
}
.portable-infobox .pi-data-label {
    background-color: var(--highlight-color);
}
.portable-infobox.pi-europa .pi-data-label,
.portable-infobox.pi-europa .pi-data-value {
    /* Data labels and values in Europa */
    padding: 5px;
}
.portable-infobox:not(.pi-europa) .pi-data-label,
.portable-infobox:not(.pi-europa) .pi-data-value {
    /* Data labels and values not in Europa */
    padding: 3px;
}
.portable-infobox .pi-group:last-child .pi-data:last-child .pi-data-label {
    /* Fixes a rounding oversight */
    border-bottom-left-radius: 8px;
}
.pi-europa .pi-navigation {
    /* Navigation rows */
    text-align: center;
    font-weight: bold;
}
 
/* Portable Infobox themes */
.portable-infobox.pi-theme-EG1 {
    /* Theme for "My Little Pony Equestria Girls" */
    --heading-color: #422E87;
    --highlight-color: #A767A6;
    --background-color: white;
    --title-color: #422E87;
}
.portable-infobox.pi-theme-EG2 {
    /* Theme for "My Little Pony Equestria Girls: Rainbow Rocks" */
    --heading-color: #EF2E90;
    --highlight-color: #EF92C5;
    --background-color: white;
    --title-color: #EF2E90;
}
.portable-infobox.pi-theme-EG3 {
    /* Theme for "My Little Pony Equestria Girls: Friendship Games" */
    --highlight-color: #A767A6;
    --heading-color: #7A4779;
    --background-color: white;
    --title-color: #7A4779;}
.portable-infobox.pi-theme-EG4 {
    /* Theme for "My Little Pony Equestria Girls: Legend of Everfree */
    --highlight-color: #8BEF71;
    --heading-color: #32B90E;
    --background-color: white;
    --title-color: #32B90E;}
.portable-infobox.pi-theme-EGS {
        /* Theme for "My Little Pony Equestria Girls Specials" */
    --highlight-color: #B798F0;
    --heading-color: #5038A4;
    --background-color: white;
    --title-color: #5038A4;}

/** Legacy **/
/* Can be removed once Microsoft Edge supports CSS Variables. */
/* Estimated */
@supports not (--title-color: white) {
    .portable-infobox.pi-background,
    .pi-europa.pi-background,
    .portable-infobox .pi-image {
        background-color: white;
    }
    .portable-infobox .pi-title { background-color: #422E87; }
    .portable-infobox .pi-secondary-background { background: #A767A6; }
    .portable-infobox .pi-data-label { background-color: #A767A6; }
 
    .portable-infobox.pi-theme-EG1 .pi-title { background-color: white; }
    .portable-infobox.pi-theme-EG1 .pi-secondary-background { background-color: #422E87; }
    .portable-infobox.pi-theme-EG1 .pi-image-collection-tabs .current,
    .portable-infobox.pi-theme-EG1 .pi-data-label { background-color: #A767A6; }
 
     .portable-infobox.pi-theme-EG2 .pi-title { background-color: white; }
    .portable-infobox.pi-theme-EG2 .pi-secondary-background { background-color: #EF2E90; }
    .portable-infobox.pi-theme-EG2 .pi-image-collection-tabs .current,
    .portable-infobox.pi-theme-EG2 .pi-data-label { background-color: #EF92C5; }