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.
/* Infobox customization stylesheet bokunoheroacademia.wikia.com/wiki/MediaWiki:Themes.css */
.theme-fandomdesktop-light {
--infobox-tab-label-current: #000;
}
.theme-fandomdesktop-dark {
--infobox-tab-label-current: #FFF;
}
/* Main styling */
.portable-infobox {
border: 1px solid #212121;
padding: 2px;
font-size: smaller;
}
.portable-infobox,
.portable-infobox .pi-image-collection-tab-content {
background: #959494;
}
.portable-infobox .pi-image-collection-tabs,
.portable-infobox .pi-font,
.portable-infobox .pi-secondary-font {
font-size: 11px;
}
/** Data customization **/
.portable-infobox .pi-title,
.portable-infobox .pi-header {
text-align: center;
color: #fff;
background: #ae3974;
font-weight: bold;
border-color: #212121;
padding: 2px;
}
.portable-infobox .pi-title {
font-size: 16px;
}
.portable-infobox .pi-group,
.portable-infobox .pi-group .pi-data:last-child {
border: none;
}
.portable-infobox .pi-data {
padding: 1px;
}
.portable-infobox .pi-data-label {
padding-left: 1px;
}
.portable-infobox .pi-border-color {
border-color: #212121;
}
/** Tab customization **/
.portable-infobox .wds-tabber {
text-align: center;
}
.portable-infobox .wds-tabs__wrapper {
display: inline-block;
margin: 2px 0 7px;
}
.pi-image-collection.wds-tabber .wds-tabs__tab-label {
font-size: 11px;
letter-spacing: normal;
height: auto;
margin: 0 2px 0 4px;
}
.pi-image-collection.wds-tabber .wds-tabs__tab.wds-is-current {
-webkit-box-shadow: none;
box-shadow: none;
}
.pi-image-collection.wds-tabber .wds-tabs__tab.wds-is-current .wds-tabs__tab-label {
color: var(--infobox-tab-label-current);
}
.pi-image-collection.wds-tabber .wds-tabs__tab .wds-tabs__tab-label {
color: #cc960e;
}
.pi-image-collection.wds-tabber .wds-tabs__tab {
cursor: pointer;
}
.pi-image-collection.wds-tabber li.wds-tabs__tab:not(:last-of-type):after {
content: '|';
color: var(--infobox-tab-label-current);
width: 1em;
}
.pi-image-collection.wds-tabber .wds-tabs__wrapper.right-arrow-visible .wds-tabs {
-webkit-mask-image: none;
}
/** Navigation footer styling **/
.portable-infobox .pi-navigation {
text-align: center;
font-weight: bold;
background: #ae3974;
padding: 4px;
}
.portable-infobox .pi-navigation a {
color: #000000;
text-align: center;
}
/*-------------------*/
/*--INFOBOX STYLING--*/
/*-------------------*/
/*-------------*/
/*--GENERAL C--*/
/*-------------*/
.pi-theme-default,
.pi-theme-black0,
.pi-theme-company,
.pi-theme-technology,
.pi-theme-website,
/*------------*/
/*--BASIC C1--*/
/*------------*/
.pi-theme-red1,
.pi-theme-orange1,
.pi-theme-yellow1,
.pi-theme-green1,
.pi-theme-blue1,
.pi-theme-purple1,
.pi-theme-pink1,
.pi-theme-brown1,
.pi-theme-black1,
.pi-theme-white1,
/*------------*/
/*--BASIC C2--*/
/*------------*/
.pi-theme-red2,
.pi-theme-orange2,
.pi-theme-yellow2,
.pi-theme-green2,
.pi-theme-blue2,
.pi-theme-purple2,
.pi-theme-pink2,
.pi-theme-brown2,
.pi-theme-black2,
.pi-theme-white2,
/*------------*/
/*--BASIC C3--*/
/*------------*/
.pi-theme-red3,
.pi-theme-orange3,
.pi-theme-yellow3,
.pi-theme-green3,
.pi-theme-blue3,
.pi-theme-purple3,
.pi-theme-pink3,
.pi-theme-brown3,
.pi-theme-black3,
.pi-theme-white3,
/*------------------*/
/*--COLOR ON COLOR--*/
/*------------------*/
.pi-theme-red4,
.pi-theme-orange4,
.pi-theme-yellow4,
.pi-theme-green4,
.pi-theme-blue4,
.pi-theme-purple4,
.pi-theme-pink4,
.pi-theme-brown4,
/*--------------------*/
/*--COLOR ON COLOR 2--*/
/*--------------------*/
.pi-theme-red5,
.pi-theme-orange5,
.pi-theme-yellow5,
.pi-theme-green5,
.pi-theme-blue5,
.pi-theme-purple5,
.pi-theme-pink5,
.pi-theme-brown5,
/*-----------------*/
/*--Piapro Studio--*/
/*-----------------*/
.pi-theme-kaito,
.pi-theme-meiko,
.pi-theme-hatsune-miku,
.pi-theme-kagamine,
.pi-theme-kagamine-len,
.pi-theme-kagamine-rin,
.pi-theme-megurine-luka,
/*---------------*/
/*--DERIVATIVES--*/
/*---------------*/
.pi-theme-akita-neru,
.pi-theme-calne-ca,
.pi-theme-sakine-meiko,
.pi-theme-yowane-haku,
/*------------------*/
/*--SD DERIVATIVES--*/
/*------------------*/
.pi-theme-hachune-miku,
.pi-theme-mikudayo,
.pi-theme-tako-luka,
/*----------------*/
/*--SYNTHESIZERS--*/
/*----------------*/
.pi-theme-kasane-teto {
border-color: #999;
}
/*-------------*/
/*--GENERAL C--*/
/*-------------*/
.pi-theme-default .pi-header,
.pi-theme-default .pi-title,
.pi-theme-default .pi-navigation,
.pi-theme-default .pi-navigation a,
[data-theme="default"] {
background: #22364a;
color: #FFFFFF;
}
.pi-theme-black0 .pi-header,
.pi-theme-black0 .pi-title,
.pi-theme-black0 .pi-navigation,
.pi-theme-black0 .pi-navigation a,
[data-theme="black0"] {
background: #000000;
color: #FFFFFF;
}
.pi-theme-company .pi-header,
.pi-theme-company .pi-title,
.pi-theme-company .pi-navigation,
.pi-theme-company .pi-navigation a,
[data-theme="company"] {
background: #000000;
color: #FFFFFF;
}
.pi-theme-technology .pi-header,
.pi-theme-technology .pi-title,
.pi-theme-technology .pi-navigation,
.pi-theme-technology .pi-navigation a,
[data-theme="technology"] {
background: #808080;
color: #FFFFFF;
}
.pi-theme-website .pi-header,
.pi-theme-website .pi-title,
.pi-theme-website .pi-navigation,
.pi-theme-website .pi-navigation a,
[data-theme="website"] {
background: #C0C0C0;
color: #FFFFFF;
}
/*-----------*/
/*--BASIC 1--*/
/*-----------*/
.pi-theme-red1 .pi-header,
.pi-theme-red1 .pi-title,
.pi-theme-red1 .pi-navigation,
.pi-theme-red1 .pi-navigation a,
[data-theme="red1"] {
background: #EE204D;
color: #000000;
}
.pi-theme-orange1 .pi-header,
.pi-theme-orange1 .pi-title,
.pi-theme-orange1 .pi-navigation,
.pi-theme-orange1 .pi-navigation a,
[data-theme="orange1"] {
background: #FFA500;
color: #000000;
}
.pi-theme-yellow1 .pi-header,
.pi-theme-yellow1 .pi-title,
.pi-theme-yellow1 .pi-navigation,
.pi-theme-yellow1 .pi-navigation a,
[data-theme="yellow1"] {
background: #FFD700;
color: #000000;
}
.pi-theme-green1 .pi-header,
.pi-theme-green1 .pi-title,
.pi-theme-green1 .pi-navigation,
.pi-theme-green1 .pi-navigation a,
[data-theme="green1"] {
background: #00A86B;
color: #000000;
}
.pi-theme-blue1 .pi-header,
.pi-theme-blue1 .pi-title,
.pi-theme-blue1 .pi-navigation,
.pi-theme-blue1 .pi-navigation a,
[data-theme="blue1"] {
background: #87ceeb;
color: #000000;
}
.pi-theme-purple1 .pi-header,
.pi-theme-purple1 .pi-title,
.pi-theme-purple1 .pi-navigation,
.pi-theme-purple1 .pi-navigation a,
[data-theme="purple1"] {
background: #E0B0FF;
color: #000000;
}
.pi-theme-pink1 .pi-header,
.pi-theme-pink1 .pi-title,
.pi-theme-pink1 .pi-navigation,
.pi-theme-pink1 .pi-navigation a,
[data-theme="pink1"] {
background: #FFC0CB;
color: #000000;
}
.pi-theme-brown1 .pi-header,
.pi-theme-brown1 .pi-title,
.pi-theme-brown1 .pi-navigation,
.pi-theme-brown1 .pi-navigation a,
[data-theme="brown1"] {
background: #C3B091;
color: #000000;
}
.pi-theme-black1 .pi-header,
.pi-theme-black1 .pi-title,
.pi-theme-black1 .pi-navigation,
.pi-theme-black1 .pi-navigation a,
[data-theme="black1"] {
background: #C0C0C0;
color: #000000;
}
.pi-theme-white1 .pi-header,
.pi-theme-white1 .pi-title,
.pi-theme-white1 .pi-navigation,
.pi-theme-white1 .pi-navigation a,
[data-theme="white1"] {
background: #FFFFFF;
color: #000000;
}
/*-----------*/
/*--BASIC 2--*/
/*-----------*/
.pi-theme-red2 .pi-header,
.pi-theme-red2 .pi-title,
.pi-theme-red2 .pi-navigation,
.pi-theme-red2 .pi-navigation a,
[data-theme="red2"] {
background: #EE204D;
color: #FFFFFF;
}
.pi-theme-orange2 .pi-header,
.pi-theme-orange2 .pi-title,
.pi-theme-orange2 .pi-navigation,
.pi-theme-orange2 .pi-navigation a,
[data-theme="orange2"] {
background: #FFA500;
color: #FFFFFF;
}
.pi-theme-yellow2 .pi-header,
.pi-theme-yellow2 .pi-title,
.pi-theme-yellow2 .pi-navigation,
.pi-theme-yellow2 .pi-navigation a,
[data-theme="yellow2"] {
background: #FFD700;
color: #FFFFFF;
}
.pi-theme-green2 .pi-header,
.pi-theme-green2 .pi-title,
.pi-theme-green2 .pi-navigation,
.pi-theme-green2 .pi-navigation a,
[data-theme="green2"] {
background: #00A86B;
color: #FFFFFF;
}
.pi-theme-blue2 .pi-header,
.pi-theme-blue2 .pi-title,
.pi-theme-blue2 .pi-navigation,
.pi-theme-blue2 .pi-navigation a,
[data-theme="blue2"] {
background: #87ceeb;
color: #FFFFFF;
}
.pi-theme-purple2 .pi-header,
.pi-theme-purple2 .pi-title,
.pi-theme-purple2 .pi-navigation,
.pi-theme-purple2 .pi-navigation a,
[data-theme="purple2"] {
background: #E0B0FF;
color: #FFFFFF;
}
.pi-theme-pink2 .pi-header,
.pi-theme-pink2 .pi-title,
.pi-theme-pink2 .pi-navigation,
.pi-theme-pink2 .pi-navigation a,
[data-theme="pink2"] {
background: #FFC0CB;
color: #FFFFFF;
}
.pi-theme-brown2 .pi-header,
.pi-theme-brown2 .pi-title,
.pi-theme-brown2 .pi-navigation,
.pi-theme-brown2 .pi-navigation a,
[data-theme="brown2"] {
background: #C3B091;
color: #FFFFFF;
}
.pi-theme-black2 .pi-header,
.pi-theme-black2 .pi-title,
.pi-theme-black2 .pi-navigation,
.pi-theme-black2 .pi-navigation a,
[data-theme="black2"] {
background: #C0C0C0;
color: #FFFFFF;
}
.pi-theme-white2 .pi-header,
.pi-theme-white2 .pi-title,
.pi-theme-white2 .pi-navigation,
.pi-theme-white2 .pi-navigation a,
[data-theme="white2"] {
background: #F5F5F5;
color: #000000;
}
/*-----------*/
/*--BASIC 3--*/
/*-----------*/
.pi-theme-red3 .pi-header,
.pi-theme-red3 .pi-title,
.pi-theme-red3 .pi-navigation,
.pi-theme-red3 .pi-navigation a,
[data-theme="red3"] {
background: #000000;
color: #EE204D;
}
.pi-theme-orange3 .pi-header,
.pi-theme-orange3 .pi-title,
.pi-theme-orange3 .pi-navigation,
.pi-theme-orange3 .pi-navigation a,
[data-theme="orange3"] {
background: #000000;
color: #FFA500;
}
.pi-theme-yellow3 .pi-header,
.pi-theme-yellow3 .pi-title,
.pi-theme-yellow3 .pi-navigation,
.pi-theme-yellow3 .pi-navigation a,
[data-theme="yellow3"] {
background: #000000;
color: #FFD700;
}
.pi-theme-green3 .pi-header,
.pi-theme-green3 .pi-title,
.pi-theme-green3 .pi-navigation,
.pi-theme-green3 .pi-navigation a,
[data-theme="green3"] {
background: #000000;
color: #00A86B;
}
.pi-theme-blue3 .pi-header,
.pi-theme-blue3 .pi-title,
.pi-theme-blue3 .pi-navigation,
.pi-theme-blue3 .pi-navigation a,
[data-theme="blue3"] {
background: #000000;
color: #87ceeb;
}
.pi-theme-purple3 .pi-header,
.pi-theme-purple3 .pi-title,
.pi-theme-purple3 .pi-navigation,
.pi-theme-purple3 .pi-navigation a,
[data-theme="purple3"] {
background: #000000;
color: #E0B0FF;
}
.pi-theme-pink3 .pi-header,
.pi-theme-pink3 .pi-title,
.pi-theme-pink3 .pi-navigation,
.pi-theme-pink3 .pi-navigation a,
[data-theme="pink3"] {
background: #000000;
color: #FFC0CB;
}
.pi-theme-brown3 .pi-header,
.pi-theme-brown3 .pi-title,
.pi-theme-brown3 .pi-navigation,
.pi-theme-brown3 .pi-navigation a,
[data-theme="brown3"] {
background: #000000;
color: #C3B091;
}
.pi-theme-black3 .pi-header,
.pi-theme-black3 .pi-title,
.pi-theme-black3 .pi-navigation,
.pi-theme-black3 .pi-navigation a,
[data-theme="black3"] {
background: #000000;
color: #FFFFF0;
}
.pi-theme-white3 .pi-header,
.pi-theme-white3 .pi-title,
.pi-theme-white3 .pi-navigation,
.pi-theme-white3 .pi-navigation a,
[data-theme="white3"] {
background: #000000;
color: #F5F5F5;
}
/*------------------*/
/*--COLOR ON COLOR--*/
/*------------------*/
.pi-theme-red4 .pi-header,
.pi-theme-red4 .pi-title,
.pi-theme-red4 .pi-navigation,
.pi-theme-red4 .pi-navigation a,
[data-theme="red4"] {
background: #ff3000;
color: #ffe0de;
}
.pi-theme-orange4 .pi-header,
.pi-theme-orange4 .pi-title,
.pi-theme-orange4 .pi-navigation,
.pi-theme-orange4 .pi-navigation a,
[data-theme="orange4"] {
background: #ffa700;
color: #fff0c9;
}
.pi-theme-yellow4 .pi-header,
.pi-theme-yellow4 .pi-title,
.pi-theme-yellow4 .pi-navigation,
.pi-theme-yellow4 .pi-navigation a,
[data-theme="yellow4"] {
background: #dea800;
color: #fffba9;
}
.pi-theme-green4 .pi-header,
.pi-theme-green4 .pi-title,
.pi-theme-green4 .pi-navigation,
.pi-theme-green4 .pi-navigation a,
[data-theme="green4"] {
background: #00cb3f;
color: #cdfad5;
}
.pi-theme-blue4 .pi-header,
.pi-theme-blue4 .pi-title,
.pi-theme-blue4 .pi-navigation,
.pi-theme-blue4 .pi-navigation a,
[data-theme="blue4"] {
background: #00d0d4;
color: #ccfdff;
}
.pi-theme-purple4 .pi-header,
.pi-theme-purple4 .pi-title,
.pi-theme-purple4 .pi-navigation,
.pi-theme-purple4 .pi-navigation a,
[data-theme="purple4"] {
background: #df49fd;
color: #f6e8ff;
}
.pi-theme-pink4 .pi-header,
.pi-theme-pink4 .pi-title,
.pi-theme-pink4 .pi-navigation,
.pi-theme-pink4 .pi-navigation a,
[data-theme="pink4"] {
background: #F653A6;
color: #FFDDF4;
}
.pi-theme-brown4 .pi-header,
.pi-theme-brown4 .pi-title,
.pi-theme-brown4 .pi-navigation,
.pi-theme-brown4 .pi-navigation a,
[data-theme="brown4"] {
background: #C19A6B;
color: #fbf8f4;
}
/*-------------------*/
/*--COLOR ON COLOR2--*/
/*-------------------*/
.pi-theme-red5 .pi-header,
.pi-theme-red5 .pi-title,
.pi-theme-red5 .pi-navigation,
.pi-theme-red5 .pi-navigation a,
[data-theme="red5"] {
background: #EE204D;
color: #ffcc33;
}
.pi-theme-orange5 .pi-header,
.pi-theme-orange5 .pi-title,
.pi-theme-orange5 .pi-navigation,
.pi-theme-orange5 .pi-navigation a,
[data-theme="orange5"] {
background: #ffcc33;
color: #EE204D;
}
.pi-theme-yellow5 .pi-header,
.pi-theme-yellow5 .pi-title,
.pi-theme-yellow5 .pi-navigation,
.pi-theme-yellow5 .pi-navigation a,
[data-theme="yellow5"] {
background: #FFD700;
color: #3eb489;
}
.pi-theme-green5 .pi-header,
.pi-theme-green5 .pi-title,
.pi-theme-green5 .pi-navigation,
.pi-theme-green5 .pi-navigation a,
[data-theme="green5"] {
background: #3eb489;
color: #FFD700;
}
.pi-theme-blue5 .pi-header,
.pi-theme-blue5 .pi-title,
.pi-theme-blue5 .pi-navigation,
.pi-theme-blue5 .pi-navigation a,
[data-theme="blue5"] {
background: #87ceeb;
color: #605ca8;
}
.pi-theme-purple5 .pi-header,
.pi-theme-purple5 .pi-title,
.pi-theme-purple5 .pi-navigation,
.pi-theme-purple5 .pi-navigation a,
[data-theme="purple5"] {
background: #605ca8;
color: #87ceeb;
}
.pi-theme-pink5 .pi-header,
.pi-theme-pink5 .pi-title,
.pi-theme-pink5 .pi-navigation,
.pi-theme-pink5 .pi-navigation a,
[data-theme="pink5"] {
background: #FFC0CB;
color: #a0785a;
}
.pi-theme-brown5 .pi-header,
.pi-theme-brown5 .pi-title,
.pi-theme-brown5 .pi-navigation,
.pi-theme-brown5 .pi-navigation a,
[data-theme="brown5"] {
background: #a0785a;
color: #FFC0CB;
}
/*-----------------*/
/*--Piapro Studio--*/
/*-----------------*/
.pi-theme-kaito .pi-header,
.pi-theme-kaito .pi-title,
.pi-theme-kaito .pi-navigation,
.pi-theme-kaito .pi-navigation a,
[data-theme="kaito"] {
background: #37427f;
color: #ffb867;
}
.pi-theme-meiko .pi-header,
.pi-theme-meiko .pi-title,
.pi-theme-meiko .pi-navigation,
.pi-theme-meiko .pi-navigation a,
[data-theme="meiko"] {
background: #822526;
color: #cec5b9;
}
.pi-theme-hatsune-miku .pi-header,
.pi-theme-hatsune-miku .pi-title,
.pi-theme-hatsune-miku .pi-navigation,
.pi-theme-hatsune-miku .pi-navigation a,
[data-theme="hatsune-miku"] {
background: #A4CDDB;
color: #2E303C;
}
.pi-theme-kagamine .pi-header,
.pi-theme-kagamine .pi-title,
.pi-theme-kagamine .pi-navigation,
.pi-theme-kagamine .pi-navigation a,
[data-theme="kagamine"] {
background: #EFC107;
color: #303034;
}
.pi-theme-kagamine-len .pi-header,
.pi-theme-kagamine-len .pi-title,
.pi-theme-kagamine-len .pi-navigation,
.pi-theme-kagamine-len .pi-navigation a,
[data-theme="kagamine-len"] {
background: #2F3033;
color: #EFC200;
}
.pi-theme-kagamine-rin .pi-header,
.pi-theme-kagamine-rin .pi-title,
.pi-theme-kagamine-rin .pi-navigation,
.pi-theme-kagamine-rin .pi-navigation a,
[data-theme="kagamine-rin"] {
background: #F1F1F1;
color: #9E6E00;
}
.pi-theme-megurine-luka .pi-header,
.pi-theme-megurine-luka .pi-title,
.pi-theme-megurine-luka .pi-navigation,
.pi-theme-megurine-luka .pi-navigation a,
[data-theme="megurine-luka"] {
background: #E3BCCD;
color: #262F4C;
}
/*---------------*/
/*--DERIVATIVES--*/
/*---------------*/
.pi-theme-akita-neru .pi-header,
.pi-theme-akita-neru .pi-title,
.pi-theme-akita-neru .pi-navigation,
.pi-theme-akita-neru .pi-navigation a,
[data-theme="akita-neru"] {
background: #FFE083;
color: #514533;
}
.pi-theme-calne-ca .pi-header,
.pi-theme-calne-ca .pi-title,
.pi-theme-calne-ca .pi-navigation,
.pi-theme-calne-ca .pi-navigation a,
[data-theme="calne-ca"] {
background: #0EFBFB;
color: #B32827;
}
.pi-theme-sakine-meiko .pi-header,
.pi-theme-sakine-meiko .pi-title,
.pi-theme-sakine-meiko .pi-navigation,
.pi-theme-sakine-meiko .pi-navigation a,
[data-theme="sakine-meiko"] {
background: #6E3729;
color: #EDBBAE;
}
.pi-theme-yowane-haku .pi-header,
.pi-theme-yowane-haku .pi-title,
.pi-theme-yowane-haku .pi-navigation,
.pi-theme-yowane-haku .pi-navigation a,
[data-theme="yowane-haku"] {
background: #1B1B1B;
color: #CFBEF8;
}
/*------------------*/
/*--SD DERIVATIVES--*/
/*------------------*/
.pi-theme-hachune-miku .pi-header,
.pi-theme-hachune-miku .pi-title,
.pi-theme-hachune-miku .pi-navigation,
.pi-theme-hachune-miku .pi-navigation a,
[data-theme="hachune-miku"] {
background: #A4CDDB;
color: #2E303C;
}
.pi-theme-mikudayo .pi-header,
.pi-theme-mikudayo .pi-title,
.pi-theme-mikudayo .pi-navigation,
.pi-theme-mikudayo .pi-navigation a,
[data-theme="mikudayo"] {
background: #A4CDDB;
color: #2E303C;
}
.pi-theme-tako-luka .pi-header,
.pi-theme-tako-luka .pi-title,
.pi-theme-tako-luka .pi-navigation,
.pi-theme-tako-luka .pi-navigation a,
[data-theme="tako-luka"] {
background: #E3BCCD;
color: #262F4C;
}
/*----------------*/
/*--SYNTHESIZERS--*/
/*----------------*/
.pi-theme-kasane-teto .pi-header,
.pi-theme-kasane-teto .pi-title,
.pi-theme-kasane-teto .pi-navigation,
.pi-theme-kasane-teto .pi-navigation a,
[data-theme="kasane-teto"] {
background: #181C1F;
color: #FCB4BB;
}