User:Coolrandy/common.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&display=swap'); @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');

/*tabber*/

/* .wds-tabs__tab.wds-is-current { } */

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

/*main frame*/ .portable-infobox { border-radius: 15px 5px; margin-right: 10px; position:relative; }

/*side stripe*/ .portable-infobox { padding-left: 10px; overflow: visible !important; } .portable-infobox::before { clip-path: inset(0px 0px 0px 0px round 13px 3px); background: none; border-left: solid 10px #FCF000; content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; }

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

/*title*/ .portable-infobox .pi-title { background: none; font: 900 italic 20px/130% Montserrat, 'Noto Sans JP', sans-serif !important; padding:0.8em 15px; position: relative; text-align: left !important; }

/*name underline*/ .infobox-char-name{ position: relative; text-decoration: none; }

/*headers*/ .portable-infobox .pi-header { font: 700 italic 14px/130% Montserrat, 'Noto Sans JP', sans-serif !important; text-align: left !important; }

/*horizontal group*/ .pi-horizontal-group-item { padding: 2px !important; } .pi-horizontal-group { }

/*-!&!! selection options-*/ aside[data-item-name="Infobox Character"] > section:first-child { overflow:visible; } aside[data-item-name="Infobox Character"] > section:first-child > div:first-child{ margin-top: -1px; margin-bottom: 5px; padding-right: 9px; z-index: 90; }

/* aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li.wds-tabs__tab.wds-is-current div{ } */

aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li div{ width:30px !important; height:25px !important; margin: 10px 0px 0px 0px; border-radius: 5px; text-align: center; display:inline-block; font: 900 italic 12pt/1.32em Montserrat, sans-serif; border-radius: 5px; }

aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li{ box-shadow: none !important; }

aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li:first-child{ margin-right:0.4em; margin-left: auto; }

aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li:first-child::before{ position: relative; content:'View profile from '; font: 700 italic 10pt/1.32em Montserrat, sans-serif; margin-right: 0.3em; top: -3px; } /*light mode*/ .wds-tabs__tab.wds-is-current { box-shadow: inset 0 -5px 0 0 #FCF000; } .theme-fandomdesktop-light .portable-infobox { background: white; /* color: var(--theme-body-text-color); */ border: solid 2px #0C195C; filter: drop-shadow(6px 6px 0px #0C195C50); } .theme-fandomdesktop-light .portable-infobox::before { opacity: 1; } .theme-fandomdesktop-light .infobox-char-name{ background:linear-gradient(#FCF000,#FCF000) left bottom no-repeat; background-size:100% 0.45em; } .theme-fandomdesktop-light .portable-infobox .pi-header { background-color: #0C195C11 !important; } .theme-fandomdesktop-light .pi-horizontal-group-item { border: solid 2px rgba(126, 141, 219, 0.1) !important; } .theme-fandomdesktop-light .pi-horizontal-group { border-bottom: solid 2px rgba(126, 141, 219, 0.1) !important; } .theme-fandomdesktop-light aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li.wds-tabs__tab.wds-is-current div{ background-color:#0C195C; color: #FFF; } .theme-fandomdesktop-light aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li div{ background-color: #EFF0F4; border: solid 2px #0C195C; } .theme-fandomdesktop-light aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li:first-child::before{ color: #0C195C; } /*--*/

/*dark mode*/ .wds-tabs__tab.wds-is-current { box-shadow: inset 0 -5px 0 0 #FCF00077; } .theme-fandomdesktop-dark .portable-infobox { background: #222; color: var(--theme-body-text-color); border: solid 2px #888; filter: drop-shadow(6px 6px 0px #88888855); } .theme-fandomdesktop-dark .portable-infobox::before { opacity: 1; } .theme-fandomdesktop-dark .infobox-char-name{ background:linear-gradient(#FCF00077,#FCF00077) left bottom no-repeat; background-size:100% 0.45em; } .theme-fandomdesktop-dark .portable-infobox .pi-header { background-color: #333 !important; } .theme-fandomdesktop-dark .pi-horizontal-group-item { border: solid 2px #333 !important; } .theme-fandomdesktop-dark .pi-horizontal-group { border-bottom: solid 2px #333 !important; } .theme-fandomdesktop-dark aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li.wds-tabs__tab.wds-is-current div{ background-color:#555; color: #FFF; } .theme-fandomdesktop-dark aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li div{ background-color: #333; border: solid 2px #555; } .theme-fandomdesktop-dark aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li:first-child::before{ color: #555; } /*--*/

/* infobox audio button */ .portable-infobox .audio-button { border-radius: 15px; padding: 10px; background-color: #1e3ec8; margin: auto; display: block; margin-bottom: 5px; }

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

/*** start of Template:Lyrics ***/ .pi-theme-lyrics.portable-infobox { width: auto; float: none; background: transparent; border: none; } .pi-theme-lyrics .pi-data { width: 90%; margin: 0 auto; } .pi-theme-lyrics .pi-section-navigation { margin-bottom: 1em; } .pi-theme-lyrics .pi-section-label { font-size: 16px; } .pi-theme-lyrics.portable-infobox .pi-header { display: none; } .pi-theme-lyrics .pi-data-value { font-size: 16px; line-height: 1.5; width: 100%; text-align: center; } /*** end of Template:Lyrics ***/ /* THIS CSS IS HORRIBLE AND HAS NOT BEEN CLEANED IN ANY WAY DEAL WITH IT (use this along with infobox.css too)

/* */

/* CARD PAGE */

.wds-tabs__wrapper .wds-tabs { overflow-y: hidden; }

section[data-item-name="card-title-wrapper"]{ overflow: hidden; position: relative; }

h2[data-item-name="card-rarity"]{ position: absolute; bottom: -30px; font: 700 italic 6vw 'Noto Sans', sans-serif !important; padding: 0 !important; /* width: 100%; */ right: -5px; z-index: -1; color: #FCF00050 !important; background: none !important; border-top: none !important; }

section[data-item-name="card-skills-basic"]{ display: flex; flex-wrap:wrap; }

section[data-item-name="card-skills-basic"] > h2{ flex: 1 0 100%; }

section[data-item-name="card-skills-basic"] > div{ flex: 1 1 50%; min-width: 200px; }

.card-skills-label { display: inline-block; width: 70px; margin-right: 10px; position:relative; top: 5px; margin-bottom: -5px; text-align: center; color: white; background-color: #0C195C; font: 700 7pt Montserrat; letter-spacing: 1px; padding: 4px 0px; }

section[data-item-name|="card-skills"] > div > h3 { padding-left:80px; overflow: visible; }

section[data-item-name|="card-stats"] .pi-horizontal-group-item{ text-align: left !important; padding: 2px 15px; }

section[data-item-name|="card-stats"] tr{ }

section[data-item-name|="card-stats"] td:nth-child(1){ text-align: left !important; width: 60px; font: 700 12px Rubik; }

section[data-item-name|="card-stats"] td{ border-width: 0px !important; }

.card-stats-label { display: inline-block; width: 20px; padding: 0px 0px; font: 700 12px Montserrat, sans-serif; color: white; margin-right: 5px; text-align: center; }

.card-stats-Da { background-color: #EA4362; }

.card-stats-Vo { background-color: #59C7F8; }

.card-stats-Pf { background-color: #F9D548; }

section[data-item-name|="card-skills"] > div > h3::before { text-align: center; content: "SKILL"; display: block; position: relative; top: 25px; left: -80px; width: 70px; pointer-events: none; margin-top: -20px; color: white; background-color: #0C195C; font: 700 7pt Montserrat; letter-spacing: 1px; padding: 4px 0px; } /* section[data-item-name|="card-skills"] > div:nth-child(1){ background-color: red; }*/

section[data-item-name="card-skills-basic"] > div { border-top: solid 2px #0C195C11 !important; }

section[data-item-name="card-skills-basic"] > div:nth-child(2) > h3::before { content: "LESSON"; border-bottom: solid 4px #4dab3d; }

section[data-item-name="card-skills-basic"] > div:nth-child(3) > h3::before { content: "LIVE"; border-bottom: solid 4px #3476d8; }

section[data-item-name="card-skills-basic"] > h2:nth-child(4) { background: none !important; color: #0C195C55 !important; font: 700 italic 12px/130% Montserrat, 'Noto Sans JP', sans-serif; padding: 3px 15px; }

section[data-item-name="card-skills-basic"] > div:nth-child(5) > h3::before { content: "LESSON"; border-bottom: solid 4px #4dab3d; }

section[data-item-name="card-skills-basic"] > div:nth-child(6) > h3::before { content: "LIVE"; border-bottom: solid 4px #3476d8; }

section[data-item-name="card-skills-music"] > div:nth-child(2) > h3::before { content: "CENTER"; padding: 6px 0px; }

section[data-item-name="card-skills-music"] > div:nth-child(3) > h3::before { content: "LIVE"; border-bottom: solid 4px #3476d8; }

section[data-item-name="card-skills-music"] > div:nth-child(5) > h3::before { content: "SUPPORT"; border-bottom: solid 4px #4dab3d; }

section[data-item-name="card-skills-music"] > div:nth-child(6) > h3::before { content: "SPP"; border-bottom: solid 4px #FF2790; }

.card-skills-live{ }

.card-skills-support{ }

section[data-item-name|="card-skills-basic"] > div > div,section[data-item-name|="card-skills-music"] > div > div { padding-left: 80px !important; }

section[data-item-name|="card-skills"] > div { overflow: visible; }

section[data-item-name|="card-skills"] > div > h3 { /*padding-left: 80px; text-indent:-80px;*/ overflow: visible; }

section[data-item-name="card-skills-live"]{ padding-left: 80px !important; }

section[data-item-name="card-skills-live"] .wds-tabs__tab-label{ font: 8pt Montserrat; height: auto; padding: 0px 0px 6px 0px; margin: 0px 8px -5px 8px; }

section[data-item-name="card-skills-live"] .wds-tab__content div{ border-top: none; }

section[data-item-name|="card-gallery"] h2:not(:first-child) { background: none !important; color: #0C195C55 !important; font: 700 italic 14px/130% Montserrat, 'Noto Sans JP', sans-serif; padding: 3px 15px; border-bottom: solid 2px #0C195C11; }

.card-infobox-wrapper{ min-height: calc(35vw * 1.198); }

aside[data-item-name="card-infobox"] .pi-title{ border: none; }

aside[data-item-name="card-infobox"] > section > div.wds-tab__content.wds-is-current::before{ clip-path: inset(0px 0px 0px 0px round 13px 3px); background: none; content: ""; display: block; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; }

.pi-theme-vo-fl .wds-tab__content.wds-is-current[data-item-name="card-basic"]::before{ border-left: solid 10px blue; }

.pi-theme-vo-fl .wds-tab__content.wds-is-current[data-item-name="card-music"]::before{ border-left: solid 10px yellow; }

/*card switches*/

.card-quote-wrapper{ position:relative; text-align: center; height: 60px; overflow: hidden; margin-bottom: 10px; }

.card-quote-pair{ position:absolute; top: 0px; width: 100%; transition: all 0.2s ease; }

.card-pair-wrapper:hover .card-quote-pair{ top: -60px; }

.card-quote{ height: 60px; display: flex; justify-content: center; align-items: center; font-size: 18px; }

aside[data-item-name="card-infobox"]{ width: auto; display: block; margin: 0px 6px 6px 35vw; float: none; }

.card-pair-wrapper{ white-space: nowrap; display: inline-block; margin: 10px; overflow: visible; position: absolute; left:-35vw; top: -10px; }

.card-pair-wrapper div{ transition: all 0.2s ease; }

.card-single { position:relative; display: inline-block; box-shadow: 0px 0px 8px 0px #00000099; border-radius: 1vw; }

.card-single img{ width: 30vw; height: auto; pointer-events:none; } .card-unbloomed{ z-index: 2; transform: scale(1.0); } .card-bloomed{ z-index: 1; margin-left: -28vw; transform: scale(0.9) rotate(2deg); filter: brightness(70%); }

.card-pair-wrapper:hover .card-bloomed{ z-index: 2; transform: scale(1.0); filter: brightness(100%); } .card-pair-wrapper:hover .card-unbloomed{ z-index:1; transform: scale(0.9) rotate(-2deg); filter: brightness(70%); }

h2[data-item-name="card-images"]{ height: 0px; margin: 0px !important; padding: 0px !important; }

/* basic - music switch */

aside[data-item-name="card-infobox"] > section:first-child { overflow:visible; } aside[data-item-name="card-infobox"] > section:first-child > div:first-child{ margin-top: -1px; margin-bottom: 5px; padding-right: 9px; z-index: 90; }

/* aside[data-item-name="Infobox Character"] > section:first-child > div:first-child > ul li.wds-tabs__tab.wds-is-current div{ } */

aside[data-item-name="card-infobox"] > section:first-child > div:first-child > ul li div{ width:60px; height:25px; margin: 10px 0px 0px 0px; border-radius: 5px; text-align: center; display:inline-block; font: 700 italic 0.8em/1.32em Montserrat, sans-serif; letter-spacing: 1px; padding: 6px 0px; border-radius: 5px; }

aside[data-item-name="card-infobox"] > section:first-child > div:first-child > ul li{ box-shadow: none !important; }

aside[data-item-name="card-infobox"] > section:first-child > div:first-child > ul li:first-child{ margin-right:0.4em; margin-left: auto; }

.theme-fandomdesktop-light aside[data-item-name="card-infobox"] > section:first-child > div:first-child > ul li.wds-tabs__tab.wds-is-current div{ background-color:#0C195C; color: #FFF; } .theme-fandomdesktop-light aside[data-item-name="card-infobox"] > section:first-child > div:first-child > ul li div{ background-color: #EFF0F4; /*border: solid 2px #0C195C;*/ }

/* IDOL ROAD */

/* ==UserStyle== @name       NewStyle-tal97sn5 @description Idol Road @match      *://*.*

/UserStyle
*/

.card-ir-wrapper{ overflow: auto; }

.card-ir{ position:relative; height: 350px; padding: 10px; width: 2240px; background-image: url('https://static.wikia.nocookie.net/ensemble-stars/images/7/76/IdolRoad_Node_Map_5.svg/revision/latest?cb=20210609181613'); background-size: cover; background-repeat: no-repeat; }

.card-ir-node{ position: absolute; display: block; width: 50px; height: 50px; background-color: #0C195C; overflow: hidden; transition: all 0.4s ease; border-radius: 5px; border: solid 0.5px #FFF; box-shadow: 0px 0px 3px 0px #00000040, 0px 0px 0px 2px #0C195C; color: white; white-space:nowrap; }

.card-ir-node:hover{ width: 200px; height: auto; z-index: 20; transform: scale(1.05); }

.card-ir-node-check-{ visibility: hidden; }

.card-ir-node [style*="Vocal"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/a/ab/IdolRoad_Node_Vo.svg/revision/latest?cb=20210609104027'); } .card-ir-node [style*="Dance"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/0/07/IdolRoad_Node_Da.svg/revision/latest?cb=20210609104025'); } .card-ir-node [style*="Performance"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/9/92/IdolRoad_Node_Pf.svg/revision/latest?cb=20210609104024'); }

.card-ir-node [style*="Lesson_Skill"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/3/3a/IdolRoad_Node_B_Lesson.svg/revision/latest?cb=20210609112440'); } .card-ir-node [style*="Live_Skill"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/3/36/IdolRoad_Node_B_Live.svg/revision/latest?cb=20210609112437'); } .card-ir-node [style*="Support_Skill"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/7/7d/IdolRoad_Node_M_Support.svg/revision/latest?cb=20210609112432'); }

.card-ir-node [style*="SPP"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/9/9b/IdolRoad_Node_SPP.svg/revision/latest?cb=20210609104023'); } .card-ir-node [style*="Outfit"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/f/fe/IdolRoad_Node_Outfit.svg/revision/latest?cb=20210609112729'); } .card-ir-node [style*="Background"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/b/bf/IdolRoad_Node_Background.svg/revision/latest?cb=20210609104021'); }

.card-ir-node [style*="Bloom"]{ background: url('https://static.wikia.nocookie.net/ensemble-stars/images/a/a4/IdolRoad_Node_Bloomed.svg/revision/latest?cb=20210609101834'); }

.card-ir-node-left{ border-radius: 4px; display: inline-block; position: relative; width: 49px; height: 49px; white-space:normal; vertical-align: top; line-height: 7px; text-align: center; padding-bottom: 5px; background-size: cover; background-repeat: no-repeat; } .card-ir-node-left > span{ position: absolute; bottom: 3px; left: 0px; width: 100%; margin-bottom: 0px; display: inline-block; vertical-align: middle; line-height: 7px; text-transform: uppercase; } .card-ir-node-right{ display: inline-block; width: 150px; height: auto; line-height: 14px; margin: 0px !important; white-space: normal; padding: 8px; }

.card-ir-node-right > span { }

.card-ir-node-desc{ font: 700 10pt Montserrat; line-height: 11px; }

.card-ir-node-requirements{ font: 500 10px Rubik; }