User:Vixhr/fandomdesktop.css

@import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:FontAwesome5.css|u:dev:MediaWiki:FontAwesome.css"); /* CardFrame button fix .card-linker { margin-bottom: 8px; } */

/* CardFrame test */ .card-img-test img { width:650px; height:auto; }

.img-2 img, .img-1 img { object-fit: cover; width: 99.9%; position: absolute; }

.card-images .untrained:hover { width: 162%; left: -110px; }

.cat-JP_server_events .portable-infobox .wds-tabs__tab-label { font-size: 100%; }

.main-tooltip { box-shadow:none; border:0.5px solid #bd9acb; border-radius:3px; color: #bd9acb; background:rgb(16 9 14 / 89%); }

h1, h2, h3, h4 { font-family:Noto Sans JP, Arial,sans-serif; } body.skin-fandomdesktop { font-family:Noto Sans JP,sans-serif; } .page__main, .page__right-rail { background: none; }

.theme-fandomdesktop-light .fandom-community-header__image img { filter: drop-shadow(0 0 6px black); }

.page__main { background:rgba(0,0,0,0.68); } .theme-fandomdesktop-light .page-content ul.wds-tabs { background-color:transparent; }

.theme-fandomdesktop-light .page__main, .theme-fandomdesktop-light .page__right-rail { background: linear-gradient(rgb(219 215 220 / 70%),rgb(219 215 220 / 70%)),url(https://static.wikia.nocookie.net/d4dj/images/4/4f/D4BrickLBG.svg/revision/latest/scale-to-width-down/96?cb=20210803134652) fixed; }

.theme-fandomdesktop-dark .page__right-rail { --right-rail-background-color:rgba(0,0,0,0.68); background-color:rgba(0,0,0,0.68); }

.theme-fandomdesktop-dark .toc, .theme-fandomdesktop-dark section.community-page-card-module { background: rgba(26, 0, 23, 0.4); }

.theme-fandomdesktop-dark .wds-dropdown__content, .theme-fandomdesktop-dark .wds-dropdown-level-2__content, div#sticky-toc.toc.sticky-toc { background: rgba(26, 0, 23, 0.9); } .theme-fandomdesktop-dark .wds-dropdown__content .wds-list.wds-is-linked .wds-dropdown-level-2 .wds-dropdown-level-2__content { background-color: rgba(26, 0, 23, 0.9); }

.wds-dropdown { --wds-dropdown-background-color: rgba(26, 0, 23, 0.9); } .article-table, .WikiaTable { background: rgba(0,0,0,0.5); }

.mw-notification, .wds-dialog__wrapper { background: var(--theme-page-background-color); }

.theme-fandomdesktop-light .wds-dropdown.wds-open-to-right .wds-dropdown__content, .theme-fandomdesktop-light .wds-dropdown__content, .theme-fandomdesktop-light .wds-dropdown-level-2__content { background:#d4c3db!important; }

.theme-fandomdesktop-dark .wds-dropdown.wds-open-to-right .wds-dropdown__content, .theme-fandomdesktop-dark .wds-dropdown__content, .theme-fandomdesktop-dark .wds-dropdown-level-2__content, .theme-fandomdesktop-dark div#sticky-toc.toc.sticky-toc { background:rgba(26,0,23,0.9)!important; }

/************************** infobox bg **************************/

.portable-infobox.pi-theme-d4djha, .portable-infobox.pi-theme-rinku, .portable-infobox.pi-theme-maho, .portable-infobox.pi-theme-muni, .portable-infobox.pi-theme-rei { background: rgba(255, 110, 0, 0.1); }

.portable-infobox.pi-theme-d4djrd, .portable-infobox.pi-theme-tsubaki, .portable-infobox.pi-theme-nagisa, .portable-infobox.pi-theme-hiiro, .portable-infobox.pi-theme-aoi { background: rgba(42, 38, 121, 0.1); }

.portable-infobox.pi-theme-d4djpm, .portable-infobox.pi-theme-saki, .portable-infobox.pi-theme-ibuki, .portable-infobox.pi-theme-towa, .portable-infobox.pi-theme-noa { background: rgba(1, 173, 175, 0.1); }

.portable-infobox.pi-theme-d4djpp, .portable-infobox.pi-theme-kyoko, .portable-infobox.pi-theme-shinobu, .portable-infobox.pi-theme-yuka, .portable-infobox.pi-theme-esora { background: rgba(33, 33, 33,0.2); }

.portable-infobox.pi-theme-d4djm4, .portable-infobox.pi-theme-rika, .portable-infobox.pi-theme-marika, .portable-infobox.pi-theme-saori, .portable-infobox.pi-theme-dalia { background: rgba(253, 211, 19,0.1); }

.portable-infobox.pi-theme-d4djll, .portable-infobox.pi-theme-miyu, .portable-infobox.pi-theme-haruna, .portable-infobox.pi-theme-kurumi, .portable-infobox.pi-theme-miiko { background: rgba(238, 134, 179,0.1); } /*** boxes ***/ .portable-infobox.pi-theme-boxrd, .portable-infobox.pi-theme-boxtsubaki, .portable-infobox.pi-theme-boxnagisa, .portable-infobox.pi-theme-boxhiiro, .portable-infobox.pi-theme-boxaoi { background: rgba(42, 38, 121, 0.1); }

.portable-infobox.pi-theme-boxm4, .portable-infobox.pi-theme-boxrika, .portable-infobox.pi-theme-boxmarika, .portable-infobox.pi-theme-boxsaori, .portable-infobox.pi-theme-boxdalia { background: rgba(253, 211, 19,0.1); }

.portable-infobox.pi-theme-boxpm, .portable-infobox.pi-theme-boxsaki, .portable-infobox.pi-theme-boxibuki, .portable-infobox.pi-theme-boxtowa, .portable-infobox.pi-theme-boxnoa { box-sizing: border-box; float: none; margin: 0; width: auto; background: rgba(1, 173, 175, 0.1); }

.portable-infobox.pi-theme-boxll, .portable-infobox.pi-theme-boxmiyu, .portable-infobox.pi-theme-boxharuna, .portable-infobox.pi-theme-boxkurumi, .portable-infobox.pi-theme-boxmiiko { background: rgba(238, 134, 179,0.1); }

.portable-infobox.pi-theme-boxha, .portable-infobox.pi-theme-boxrinku, .portable-infobox.pi-theme-boxmaho, .portable-infobox.pi-theme-boxmuni, .portable-infobox.pi-theme-boxrei { background: rgba(255, 110, 0, 0.1); }

.portable-infobox.pi-theme-boxpp, .portable-infobox.pi-theme-boxkyoko, .portable-infobox.pi-theme-boxshinobu, .portable-infobox.pi-theme-boxyuka, .portable-infobox.pi-theme-boxesora { background: rgba(33, 33, 33,0.1); }

.portable-infobox.pi-theme-boxd4dj2 { background: rgba(139,0,139,0.2); }

/** box themes **/ .portable-infobox.pi-theme-boxd4dj2, /* card attributes */ .portable-infobox.pi-theme-boxcool, .portable-infobox.pi-theme-boxstreet, .portable-infobox.pi-theme-boxparty, .portable-infobox.pi-theme-boxelegant, .portable-infobox.pi-theme-boxcute, /* rondo */ .portable-infobox.pi-theme-boxrd, .portable-infobox.pi-theme-boxtsubaki, .portable-infobox.pi-theme-boxnagisa, .portable-infobox.pi-theme-boxhiiro, .portable-infobox.pi-theme-boxaoi, /* ha */ .portable-infobox.pi-theme-boxha, .portable-infobox.pi-theme-boxrinku, .portable-infobox.pi-theme-boxmaho, .portable-infobox.pi-theme-boxmuni, .portable-infobox.pi-theme-boxrei, /* m4 */ .portable-infobox.pi-theme-boxm4, .portable-infobox.pi-theme-boxrika, .portable-infobox.pi-theme-boxmarika, .portable-infobox.pi-theme-boxsaori, .portable-infobox.pi-theme-boxdalia, /* pmaiden */ .portable-infobox.pi-theme-boxpm, .portable-infobox.pi-theme-boxsaki, .portable-infobox.pi-theme-boxibuki, .portable-infobox.pi-theme-boxtowa, .portable-infobox.pi-theme-boxnoa, /* ll */ .portable-infobox.pi-theme-boxll, .portable-infobox.pi-theme-boxmiyu, .portable-infobox.pi-theme-boxharuna, .portable-infobox.pi-theme-boxkurumi, .portable-infobox.pi-theme-boxmiiko, /* pk */ .portable-infobox.pi-theme-boxpp, .portable-infobox.pi-theme-boxkyoko, .portable-infobox.pi-theme-boxshinobu, .portable-infobox.pi-theme-boxyuka, .portable-infobox.pi-theme-boxesora { margin:3px; border-radius:0; }

.portable-infobox.pi-theme-boxd4dj2 h2, /* card attributes */ .portable-infobox.pi-theme-boxcool h2, .portable-infobox.pi-theme-boxstreet h2, .portable-infobox.pi-theme-boxparty h2, .portable-infobox.pi-theme-boxelegant h2, .portable-infobox.pi-theme-boxcute h2, /* rondo */ .portable-infobox.pi-theme-boxrd h2, .portable-infobox.pi-theme-boxtsubaki h2, .portable-infobox.pi-theme-boxnagisa h2, .portable-infobox.pi-theme-boxhiiro h2, .portable-infobox.pi-theme-boxaoi h2, /* ha */ .portable-infobox.pi-theme-boxha h2, .portable-infobox.pi-theme-boxrinku h2, .portable-infobox.pi-theme-boxmaho h2, .portable-infobox.pi-theme-boxmuni h2, .portable-infobox.pi-theme-boxrei h2, /* m4 */ .portable-infobox.pi-theme-boxm4 h2, .portable-infobox.pi-theme-boxrika h2, .portable-infobox.pi-theme-boxmarika h2, .portable-infobox.pi-theme-boxsaori h2, .portable-infobox.pi-theme-boxdalia h2, /* pmaiden */ .portable-infobox.pi-theme-boxpm h2, .portable-infobox.pi-theme-boxsaki h2, .portable-infobox.pi-theme-boxibuki h2, .portable-infobox.pi-theme-boxtowa h2, .portable-infobox.pi-theme-boxnoa h2, /* ll */ .portable-infobox.pi-theme-boxll h2, .portable-infobox.pi-theme-boxmiyu h2, .portable-infobox.pi-theme-boxharuna h2, .portable-infobox.pi-theme-boxkurumi h2, .portable-infobox.pi-theme-boxmiiko h2, /* pk */ .portable-infobox.pi-theme-boxpp h2, .portable-infobox.pi-theme-boxkyoko h2, .portable-infobox.pi-theme-boxshinobu h2, .portable-infobox.pi-theme-boxyuka h2, .portable-infobox.pi-theme-boxesora h2 { border-radius:0; }

.pi-theme-boxd4dj2 h2 { border-radius: 10px 5px; width:100%; }

.pi-theme-boxd4dj2, .pi-theme-d4dj2 { background:rgba(89,45,180,0.1)!important; }

/** changing a few links **/ a[href$=":Peaky_P-key"], a[href$="/Peaky_P-key"] { color:gray!important; text-shadow:none; }

/************************** tabs redesign **************************/

.page__main .wds-tabs { display: flex; /* inline-flex causes the tabs to be aligned to the left sometimes */ }

.wds-tabs__tab:not(.wds-is-current):hover { filter: grayscale(30%); transition-duration: 0.3s; }

.wds-tabs__tab-label { height:20px; }

li.wds-tabs__tab:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }

li.wds-tabs__tab:last-of-type { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

.wds-tabs__tab { background: linear-gradient(#B696FF, #8751FB); border: 2px double #320480; }

li.wds-tabs__tab { box-shadow: 1px 1px 2px rgb(0 0 0 / 75%); border-top: 1px double #320480; transition:0.1s ease all; }

li.wds-tabs__tab.wds-is-current { box-shadow: 1px 1px #320480; color: white!important; border: 1px double #320480; background: #CA2CC9; }

.page__main .wds-tabs__tab.wds-is-current .wds-tabs__tab-label { height:19px; }

.wds-tabs__wrapper.with-bottom-border { margin-bottom: 2px; }

.page__main .wds-tabs__tab.wds-is-current, .page__main .wds-tabs__tab:not(.wds-is-current):hover, .page__main .wds-tabs__tab.wds-is-current a, .page__main .wds-tabs__tab:not(.wds-is-current) a:hover { color:white; }

.wds-tabs, .wds-tabs__wrapper { --wds-tab-color: white; --wds-tab-color--active: white }

/************************** infobox redesign **************************/ .portable-infobox { border: 1px solid #5EBDDA; box-shadow: 0 0 0 3px #3e1283; border-radius: 10px 5px; margin-right: 3px; margin-left: 10px; background: rgba(89,45,180,0.1); position: relative; overflow:hidden; }

.quote p { font-weight: 500; }

.portable-infobox { --pi-secondary-background:#3E1283; }

.pi-header, .pi-title { color: #e7d4ff; }

.pi-header { width: 99.99%; left: 1px; }

.pi-secondary-background { background:#3E1283; }

/* chara infobox drop shadows */ .pi-theme-rinku .pi-image img { filter: drop-shadow(0 0 4px #fe6f01); } .pi-theme-maho .pi-image img { filter: drop-shadow(0 0 4px #ffde15); } .pi-theme-muni .pi-image img { filter: drop-shadow(0 0 4px #f673d1); } .pi-theme-rei .pi-image img { filter: drop-shadow(0 0 4px #3c65ff); }

.pi-theme-kyoko .pi-image img { filter: drop-shadow(0 0 4px #c80100); } .pi-theme-shinobu .pi-image img { filter: drop-shadow(0 0 4px #c765b4); } .pi-theme-yuka .pi-image img { filter: drop-shadow(0 0 4px #dcaa0b); } .pi-theme-esora .pi-image img { filter: drop-shadow(0 0 4px #28825c); }

.pi-theme-saki .pi-image img { filter: drop-shadow(0 0 4px #e6ffec); } .pi-theme-ibuki .pi-image img { filter: drop-shadow(0 0 4px #bec4c2);} .pi-theme-towa .pi-image img { filter: drop-shadow(0 0 4px #95deff); } .pi-theme-noa .pi-image img { filter: drop-shadow(0 0 4px #eaf4d2); }

.pi-theme-rika .pi-image img { filter: drop-shadow(0 0 4px #ff475b); } .pi-theme-marika .pi-image img { filter: drop-shadow(0 0 4px #44fe07); } .pi-theme-saori .pi-image img { filter: drop-shadow(0 0 4px #ff01aa); } .pi-theme-dalia .pi-image img { filter: drop-shadow(0 0 4px #e5ff18); }

.pi-theme-tsubaki .pi-image img { filter: drop-shadow(0 0 4px #0f0a70); } .pi-theme-nagisa .pi-image img { filter: drop-shadow(0 0 4px #f3f298); } .pi-theme-hiiro .pi-image img { filter: drop-shadow(0 0 4px #e7bad9); } .pi-theme-aoi .pi-image img { filter: drop-shadow(0 0 4px #445ca8); }

.pi-theme-miyu .pi-image img { filter: drop-shadow(0 0 4px #d87c95); } .pi-theme-haruna .pi-image img { filter: drop-shadow(0 0 4px #833761); } .pi-theme-kurumi .pi-image img { filter: drop-shadow(0 0 4px #caaf9a); } .pi-theme-miiko .pi-image img { filter: drop-shadow(0 0 4px #f9d797); }

/****/

.page__main .wds-tabs__tab.wds-is-current .wds-tabs__tab-label { color: #e7d4ff!important; }

.page__main .wds-tabs__tab.wds-is-current, .page__main .wds-tabs__tab:not(.wds-is-current):hover, .page__main .wds-tabs__tab.wds-is-current a, .page__main .wds-tabs__tab:not(.wds-is-current) a:hover { color: #e7d4ff; }

.pi-data-label.pi-secondary-font { color: #e7d4ff !important; }

.wds-tabs__tab:not(.wds-is-current):hover { color: #e7d4ff!important; }

/** scrollbar **/
 * -webkit-scrollbar {

width: 10px; }


 * -webkit-scrollbar-thumb {

background: #EDE8F9; border: 1px solid #644894; }
 * -webkit-scrollbar-track {

background:black; }

.mainpage .portable-infobox { border: none; border-radius: 0; box-shadow: none; margin: 0; background:none; }

.cat-Card_Episodes .pi-data-value { font-size: 14px; }

/**** card frame + attribute icon ****/ .cat-Cards .wds-is-current p { position: relative; }

/* .cat-4_E2_9C_B0 .wds-is-current p::before { background: url(https://www.d4db.xyz/assets/chara/frame/frame4.png)no-repeat center; } .cat-3_E2_9C_B0 .wds-is-current p::before { background: url(https://www.d4db.xyz/assets/chara/frame/frame3.png)no-repeat center; } */ /*** ^ removing the frame css because when the cardframe template is added the frame is added to the transparents ***/

.cat-4_E2_9C_B0 .wds-is-current p:first-child::before, .cat-3_E2_9C_B0 .wds-is-current p:first-child::before { content: ""; display: inline-block; left: 61px; position: absolute; bottom: 0; top: 0; width: 705px; pointer-events:none; background-size: 100% 100%; }

/* .cat-Elegant_Cards .wds-is-current p::after { background: url(https://raw.githubusercontent.com/RayFirefist/D4DB/master/public/assets/chara/type/icon_elegant.png)no-repeat; } .cat-Street_Cards .wds-is-current p::after { background: url(https://raw.githubusercontent.com/RayFirefist/D4DB/master/public/assets/chara/type/icon_street.png)no-repeat; } .cat-Party_Cards .wds-is-current p::after { background: url(https://raw.githubusercontent.com/RayFirefist/D4DB/master/public/assets/chara/type/icon_party.png)no-repeat; } .cat-Cute_Cards .wds-is-current p::after { background: url(https://raw.githubusercontent.com/RayFirefist/D4DB/master/public/assets/chara/type/icon_cute.png)no-repeat; } .cat-Cool_Cards .wds-is-current p::after { background: url(https://raw.githubusercontent.com/RayFirefist/D4DB/master/public/assets/chara/type/icon_cool.png)no-repeat; } */

.cat-3_E2_9C_B0 .wds-is-current p:first-child::after, .cat-4_E2_9C_B0 .wds-is-current p:first-child::after { content: ""; display: inline-block; right: 68px; position: absolute; bottom: 0; top: 4px; width: 80px; height: 80px; background-size: 100% 100%; }

.cat-3_E2_9C_B0 .wds-is-current p:first-child img, .cat-4_E2_9C_B0 .wds-is-current p:first-child img { border-radius: 8px; } /* tsubaki card quote */ .cat-Cards div[style="background:white;"].poem { background: transparent!important; }

.poem .quote span[style="color:#100a70"] { color: #1910bc !important; }

/* .cat-Cards div[style="background:white;"].poem i { text-shadow: 0 1px 1px #989898; } */

.wds-dropdown__content:not(.wds-is-not-scrollable) .wds-list { background-image: none; }

.pi-data[data-source="unit"] { padding: 0; }

video { border-radius: 10px; }

.ui-state-default.ui-widget-header.ui-helper-clearfix.control-bar { border-radius: 0 0 10px 10px; }