MediaWiki:Infobox.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@1,700&display=swap');

/* Oasis compatibility */
 * root {

--theme-infobox-main-color: #0C195C; --theme-infobox-main-light-color: #0C195C11; --theme-infobox-accent-color: #FCF000; --theme-infobox-background-color: #FFFFFF; }

/* Fandomdesktop */

.theme-fandomdesktop-light { --theme-infobox-main-color: #0C195C; --theme-infobox-main-light-color: #0C195C11; --theme-infobox-accent-color: #FCF000; --theme-infobox-background-color: #FFFFFF; }

.theme-fandomdesktop-dark { --theme-infobox-main-color: #FFFFFF; --theme-infobox-main-light-color: #FFFFFF11; --theme-infobox-accent-color: #1d3dc0; --theme-infobox-background-color: #101010; }


 * root  { --theme-color-character-color: inherit; }
 * root  { --theme-color-character-color: #FCF000; }
 * root .pi-theme-eichi-color { --theme-color-character-color: #FFF3B7; }
 * root .pi-theme-wataru-color { --theme-color-character-color: #A0D7E2; }
 * root .pi-theme-tori-color  { --theme-color-character-color: #F4B2B2; }
 * root .pi-theme-yuzuru-color { --theme-color-character-color: #3E62AC; }
 * root .pi-theme-hokuto-color { --theme-color-character-color: #0067B6; }
 * root .pi-theme-subaru-color { --theme-color-character-color: #F4981C; }
 * root .pi-theme-makoto-color { --theme-color-character-color: #65AB31; }
 * root .pi-theme-mao-color   { --theme-color-character-color: #951E56; }
 * root .pi-theme-chiaki-color { --theme-color-character-color: #E70032; }
 * root .pi-theme-kanata-color { --theme-color-character-color: #008DB6; }
 * root .pi-theme-tetora-color { --theme-color-character-color: #312834; }
 * root .pi-theme-midori-color { --theme-color-character-color: #005340; }
 * root .pi-theme-shinobu-color{ --theme-color-character-color: #FEDC00; }
 * root .pi-theme-hiiro-color { --theme-color-character-color: #BA2634; }
 * root .pi-theme-aira-color  { --theme-color-character-color: #F1D796; }
 * root .pi-theme-mayoi-color { --theme-color-character-color: #522F5F; }
 * root .pi-theme-tatsumi-color{ --theme-color-character-color: #7EBDA6; }
 * root .pi-theme-nagisa-color { --theme-color-character-color: #A83638; }
 * root .pi-theme-hiyori-color { --theme-color-character-color: #B7D201; }
 * root .pi-theme-ibara-color { --theme-color-character-color: #74325D; }
 * root .pi-theme-jun-color   { --theme-color-character-color: #1A2F61; }
 * root .pi-theme-shu-color   { --theme-color-character-color: #E5ABAF; }
 * root .pi-theme-mika-color  { --theme-color-character-color: #006A6D; }
 * root .pi-theme-hinata-color { --theme-color-character-color: #EB6FA2; }
 * root .pi-theme-yuta-color  { --theme-color-character-color: #00A1E8; }
 * root .pi-theme-rinne-color { --theme-color-character-color: #BA2636; }
 * root .pi-theme-himeru-color { --theme-color-character-color: #8AC3EB; }
 * root .pi-theme-kohaku-color { --theme-color-character-color: #F3B3C2; }
 * root .pi-theme-niki-color  { --theme-color-character-color: #507EA5; }
 * root .pi-theme-rei-color   { --theme-color-character-color: #46266E; }
 * root .pi-theme-kaoru-color { --theme-color-character-color: #FDD25D; }
 * root .pi-theme-koga-color  { --theme-color-character-color: #C9C9C9; }
 * root .pi-theme-adonis-color { --theme-color-character-color: #915DA3; }
 * root .pi-theme-tomoya-color { --theme-color-character-color: #EDDDB3; }
 * root .pi-theme-nazuna-color { --theme-color-character-color: #FFED48; }
 * root .pi-theme-mitsuru-color{ --theme-color-character-color: #ED6D34; }
 * root .pi-theme-hajime-color { --theme-color-character-color: #CBB8D9; }
 * root .pi-theme-keito-color { --theme-color-character-color: #316645; }
 * root .pi-theme-kuro-color  { --theme-color-character-color: #E83929; }
 * root .pi-theme-souma-color { --theme-color-character-color: #5554A2; }
 * root .pi-theme-tsukasa-color{ --theme-color-character-color: #952242; }
 * root .pi-theme-leo-color   { --theme-color-character-color: #ED6D52; }
 * root .pi-theme-izumi-color { --theme-color-character-color: #BADBF2; }
 * root .pi-theme-ritsu-color { --theme-color-character-color: #001E44; }
 * root .pi-theme-arashi-color { --theme-color-character-color: #ECDF7B; }
 * root .pi-theme-natsume-color{ --theme-color-character-color: #D60132; }
 * root .pi-theme-tsumugi-color{ --theme-color-character-color: #00608D; }
 * root .pi-theme-sora-color  { --theme-color-character-color: #FFF353; }
 * root .pi-theme-madara-color { --theme-color-character-color: #622D18; }
 * root .pi-theme-jin-color   { --theme-color-character-color: #8DA0B6; }
 * root .pi-theme-akiomi-color { --theme-color-character-color: #915C8B; }
 * root .pi-theme-anzu-color  { --theme-color-character-color: #FFB6DA; }
 * root .pi-theme-seiya-color { --theme-color-character-color: #292b3c; }
 * root .pi-theme-gatekeeper-color { --theme-color-character-color: #5f2222; }

/* Infobox */ .portable-infobox.pi-background:not(.pi-theme-lyrics):not(.type-left):not(.type-right) { border-radius: 15px 5px; margin-right: 8px; margin-bottom: 15px; position: relative; padding-left: 10px; padding-top: 5px; background: var(--theme-infobox-background-color); border: solid 2px var(--theme-infobox-main-color); }

.portable-infobox.pi-background:not(.pi-theme-lyrics):not(.type-left):not(.type-right)::before { clip-path: inset(0px 0px 0px 0px round 13px 3px); border-left: solid 10px var(--theme-color-character-color); content: ""; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; pointer-events: none; }

.portable-infobox.pi-background:not(.pi-theme-lyrics):not(.type-left):not(.type-right)::after { border-radius: 15px 5px; content: ""; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; pointer-events: none; opacity: 0.2; box-shadow: 8px 8px 0px 0px var(--theme-infobox-main-color); }

/* Spacing */ .portable-infobox .pi-item-spacing { padding: 6px 15px; }

.portable-infobox .wds-tabs__wrapper { padding: 0px 15px; }

/* Title */ .portable-infobox .pi-title { background: none !important; font: 900 italic 20px/130% Montserrat, 'Noto Sans JP', sans-serif; color: var(--theme-infobox-main-color); padding: 12px 15px 6px; position: relative; text-align: left !important; }

.portable-infobox .pi-title .infobox-char-name { position: relative; text-decoration: none; background: linear-gradient(var(--theme-infobox-accent-color), var(--theme-infobox-accent-color)) left bottom no-repeat; background-size: 100% 0.45em; }

/* Data */ .portable-infobox .pi-border-color { border-color: var(--theme-infobox-main-light-color); }

/* Image */ .portable-infobox .pi-image { border-radius: 5px; overflow: hidden; margin: 10px; }

/* Group */ .portable-infobox .pi-horizontal-group-item { padding: 4px; border: solid 1px #0C195C11; }

.portable-infobox .pi-horizontal-group { border-bottom: solid 1px #0C195C11 !important; }

/* Header */ .portable-infobox .pi-header { padding: 10px 15px; font: 700 14px/130% Montserrat, 'Noto Sans JP', sans-serif; text-align: left !important; background-color: var(--theme-infobox-main-light-color); color: var(--theme-infobox-main-color); border: none; }

/* Navigation */ .portable-infobox .pi-navigation { background-color: unset; color: unset; }

/* Panel */ .wds-tabs__tab.wds-is-current { box-shadow: inset 0 -5px 0 0 var(--theme-infobox-accent-color); }

/*** start of Template:Infobox Character ***/ .portable-infobox[data-item-name|="Infobox Character"] { width: 300px; }

.portable-infobox [data-item-name="character-era-select"] .wds-tab__content h2:nth-child(2), .portable-infobox [data-item-name="character-era-select"] .wds-tab__content h2:nth-child(4) { background: transparent; }

.portable-infobox [data-item-name="character-era-select"] .wds-tab__content .pi-horizontal-group img { max-width: 100%; height: auto; }

.portable-infobox[data-item-name="Infobox Character !!"] h2:nth-child(2), .portable-infobox[data-item-name="Infobox Character !!"] h2:nth-child(4) { background: transparent; }

.portable-infobox[data-item-name="Infobox Character !!"] .pi-horizontal-group img { max-width: 100%; height: auto; }

.portable-infobox [data-item-name="character-era-select"] > .wds-tabs__wrapper .wds-tabs__tab.wds-is-current { background-color: var(--theme-infobox-main-color); color: var(--theme-infobox-background-color); }

.portable-infobox [data-item-name="character-era-select"] > .wds-tabs__wrapper .wds-tabs__tab .wds-tabs__tab-label { font: 900 italic 17px Montserrat, 'Noto Sans JP', sans-serif; margin: 0px; display: block; }

.portable-infobox [data-item-name="character-era-select"] > .wds-tabs__wrapper { margin: 5px 0px 0px; text-align: right; }

.portable-infobox [data-item-name="character-era-select"] > .wds-tabs__wrapper .wds-tabs { display: inline-flex; align-items: center; }

.portable-infobox [data-item-name="character-era-select"] > .wds-tabs__wrapper .wds-tabs__tab { width: 30px; height: 25px; border-radius: 5px; text-align: center; background-color: transparent; border: solid 2px var(--theme-infobox-main-color); overflow: hidden; box-shadow: none; }

.portable-infobox [data-item-name="character-era-select"] > .wds-tabs__wrapper .wds-tabs .wds-tabs__tab:first-child { margin-right: 0.4em; }

.portable-infobox [data-item-name="character-era-select"] > .wds-tabs__wrapper .wds-tabs::before { content: 'View profile from '; font: 700 italic 12px/12px Montserrat, 'Noto Sans JP', sans-serif; margin-right: 6px; color: var(--theme-infobox-main-color); vertical-align: middle; }

/*** end of Template:Infobox Character ***/

/*** start of Template:Dorm Room ***/ aside[data-item-name="dorm-room"] { float:none; width: calc(100% - 8px); margin:0px 0px 0px; display:flex; flex-wrap:wrap; justify-content:center } section[data-item-name="dorm-room-image-wrapper"] { flex:0 1 300px; position:relative; height:138px; margin:10px !important; border-radius:5px; overflow:hidden } div[data-item-name="dorm-room-image"] { padding:0px !important; border-top:none } section[data-item-name="dorm-room-info"] { flex:1 1 300px } nav[data-item-name="dorm-room-chibis"] { position:absolute; top:0px; left:0px; background-color:unset !important; text-align:right } div[data-item-name="dorm-room-gallery"] > div > ul > li:before { content:''; padding:0px } div[data-item-name="dorm-room-gallery"] img { border-radius:5px }

/*** end of Template:Dorm Room ***/

/* Card template for smaller screen sizes */

@media only screen and (max-width: 812px) { .card-infobox-wrapper [data-item-name="card-infobox"] { min-width: unset; display: block; margin-left: 0px; }

.card-infobox-wrapper .card-pair-stick { position: unset; top: 0px; margin: auto; width: calc(80vw - 140px); }

.card-infobox-wrapper .card-pair-wrapper { white-space: nowrap; display: inline-block; margin: 10px; overflow: visible; position: relative; left: -10px; top: 0px; width: 100%; }

.card-infobox-wrapper h2[data-item-name="card-images"] { height: unset; margin: unset; padding: unset; background: none; }

.card-infobox-wrapper .card-single img { object-fit: contain; width: calc(80vw - 140px); height: auto; max-height: calc(100vh - 220px); pointer-events: none; } }

/** Infobox Card styling **/

/* Both parts of the infobox */ .portable-infobox.type-left, .portable-infobox.type-right { display: block; padding: 1px; border-radius:2ex; width: 46%; } .portable-infobox.type-left .pi-image-thumbnail, .portable-infobox.type-right .pi-image-thumbnail { width: 250px; margin: 10px; }

/* Left part of the infobox */ .portable-infobox.type-left { vertical-align: top; clear: none; float: left; border: none; } .portable-infobox.type-left .pi-header { background-color:#333332; border-radius: 2ex; color:#FFF; padding:5px; text-align:center !important; } .portable-infobox.type-left img { padding: 4px; } .portable-infobox.type-left .pi-horizontal-group-item { border: none; } .portable-infobox.type-left .pi-data-label { padding: 0px; color: #FFF; font-size: 14px; } .portable-infobox.type-left .pi-item-spacing { margin: 2px; } .portable-infobox.type-left .pi-font { font-size: 14px; } .characaption { width: 160px; margin: 0 auto; color: #fff; text-align: center; }

/* Right part of the infobox */ .portable-infobox.type-right { background: #e9e9e9; border-color: #c9c9c9; } .portable-infobox.type-right .pi-title { color:#ffffff; text-align:center !important; font-size:120%; font-family: inherit !important; font-style: normal !important; padding:0.5em; border-radius:2ex; border:0px; } .portable-infobox.type-right .pi-header { background-color:#333332; color:#FFF; padding:5px; text-align:center !important; } .portable-infobox.type-right .captiontext { padding: 3px; color: #333332; text-align: center; margin-bottom: 10px; } .portable-infobox.type-right .pi-navigation { font-weight: normal; text-align: center; } .portable-infobox.type-right .pi-data { border: none; } .portable-infobox.type-right .pi-data-label { flex-basis: 50%; }

/** Themes for infoboxes **/

/* Dance */ .portable-infobox.pi-theme-dance .pi-title { background-color:#FF5640 !important; } .portable-infobox.type-left.pi-theme-dance .pi-data-label { background-color: #fe8c80; } .portable-infobox.pi-theme-dance .captiontext { box-shadow: 0px 10px 7px -8px #fe5847, 0px -10px 7px -8px #fe5847; } .portable-infobox.pi-theme-dance .characaption { background-color: #fe8c80; }

/* Vocal */ .portable-infobox.pi-theme-vocal .pi-title { background-color:#12AAD4 !important; } .portable-infobox.type-left.pi-theme-vocal .pi-data-label { background-color: #71ccee; } .portable-infobox.pi-theme-vocal .captiontext { box-shadow: 0px 10px 7px -8px #13aae3, 0px -10px 7px -8px #13aae3; } .portable-infobox.pi-theme-vocal .characaption { background-color: #71ccee; }

/* Performance */ .portable-infobox.pi-theme-performance .pi-title { background-color:#FCB62D !important; } .portable-infobox.type-left.pi-theme-performance .pi-data-label { background-color: #fcd675; } .portable-infobox.pi-theme-performance .captiontext { box-shadow: 0px 10px 7px -8px #fbc53a, 0px -10px 7px -8px #fbc53a; } .portable-infobox.pi-theme-performance .characaption { background-color: #fcd675; }

/* Flash */ .portable-infobox.pi-theme-flash .pi-title { background-color:#EFB916 !important; } .portable-infobox.type-left.pi-theme-flash .pi-data-label { background-color: #F5C842; } .portable-infobox.pi-theme-flash .captiontext { box-shadow: 0px 10px 7px -8px #F5C020, 0px -10px 7px -8px #F5C020; } .portable-infobox.pi-theme-flash .characaption { background-color: #F5C842; }

/* Brilliant */ .portable-infobox.pi-theme-brilliant .pi-title { background-color:#13AEDA !important; } .portable-infobox.type-left.pi-theme-brilliant .pi-data-label { background-color: #40C8EE; } .portable-infobox.pi-theme-brilliant .captiontext { box-shadow: 0px 10px 7px -8px #fbc53a, 0px -10px 7px -8px #fbc53a; } .portable-infobox.pi-theme-brillant .characaption { background-color: #40C8EE; }

/* Glitter */ .portable-infobox.pi-theme-glitter .pi-title { background-color:#93CD03 !important; } .portable-infobox.type-left.pi-theme-glitter .pi-data-label { background-color: #A6DE1D; } .portable-infobox.pi-theme-glitter .captiontext { box-shadow: 0px 10px 7px -8px #A2D71E, 0px -10px 7px -8px #A2D71E; } .portable-infobox.pi-theme-glitter .characaption { background-color: #A6DE1D; }

/* Sparkle */ .portable-infobox.pi-theme-sparkle .pi-title { background-color:#ED3262 !important; } .portable-infobox.type-left.pi-theme-sparkle .pi-data-label { background-color: #F97092; } .portable-infobox.pi-theme-sparkle .captiontext { box-shadow: 0px 10px 7px -8px #F6678C, 0px -10px 7px -8px #F6678C; } .portable-infobox.pi-theme-sparkle .characaption { background-color: #F97092; }

/** Dark mode fix for Infobox Card and Infobox Card2 **/ .theme-fandomdesktop-dark .portable-infobox.type-right, .theme-fandomdesktop-dark .portable-infobox.type-right .captiontext { background: #101010; color: #FFF; }