Infinity Nikki Wiki Fandom by reisuart

/* ==UserStyle==
@name         Infinity Nikki Wiki Fandom
@version      20250101.19.39
@namespace    https://userstyles.world/user/reisuart
@description  Temporary public style until we have css editing permissions
@author       reisuart
@license      No License
==/UserStyle== */

@-moz-document domain("infinity-nikki.fandom.com") {
/* General*/
/* Hide desktop-only classes on mobile */
.mobileHide,
.mobile-only,
.no-desktop {
    display: none;
}

/* Template:Description Sibling margin */
.description-wrapper + .description-wrapper {
    margin-top: 1em;
}

/* [[Template:Description]] styles */
div.description-wrapper {
    border: 1px solid var(--border-color);
    overflow: hidden;
    border-radius: 8px;
    background: #bf8c4015;
}
div.description-content {
    font-size: 15px;
    text-align: left;
    overflow: auto;
    line-height: 1.35em;
    padding: 12px 12px 12px 12px;
}
div.description-source {
    font-size: 15px;
    overflow: auto;
    padding: 5px 12px;
}
hr.description-separator {
    width: 97.5%;
    margin: auto;
}
div.description-title {
    font-size: 15px;
    text-align: left;
    overflow: auto;
    padding: 10px 12px 6px;
}

/* Add an accent color at the top of page container */
.page {
     border-top: 5px solid var(--theme-accent-color);
     border-radius: 4px;
}

.page__main {
	border-radius: 0; /* use border-radius from .page instead */
}

/* fix border-radius if right-rail exists */
.page.has-right-rail .page__main {
  border-radius: 0 0 0 3px;
}

.page__right-rail {
  border-radius: 0 0 3px 0;
}
}

@-moz-document domain("infinity-nikki.fandom.com") {
/* Colors */
/** Root **/
:root .theme-fandomdesktop-light,
:root .theme-fandommobile-light {
    --theme-accent-color--rgba: 215, 190, 163;
    --theme-page-text-color: #43403D;
    --theme-page-text-color-inverse: #FFFFFF;
    --theme-border-color: var(--theme-color-5) !important;
    --theme-page-background-color--secondary: #F3EBE2;
    --theme-page-background-color: #fbf8f2;
    --theme-link-color:  #00767F !important;
    --theme-link-color--hover:  #003e57 !important;
    --theme-accent-color: #d7bea3 !important;
    
    
    --theme-community-header-color: #6b5e44;
    /**#dd9398  #c67a7f*/

    --group-color: var(--theme-color-5);
    --border-color: var(--theme-color-1);
    --title-color: var(--theme-color-6);
    --subtitle-color: var(--theme-color-4);

    --pi-border: var(--theme-color-5) !important;
    --pi-tabber-bg-color: var(--theme-color-9);
    --pi-tabber-color: var(--theme-color-1);
    --pi-title-bg-color: var(--theme-accent-color);
    --pi-title-color: var(--theme-page-text-color);
    --pi-header-bg-color: var(--theme-color-8);
    --pi-header-color: var(--theme-page-text-color);
    --pi-rows-color: #f7f7f7;

    --header-link-border-color-1: #f3eeeb;
    --header-link-border-color-2: #edd8ce;
    --mobile-lightbox-border-color: #a2a9b1;

    --theme-color-1: #C39C6F;
    --theme-color-2: #C9A67E;
    --theme-color-3: #CFB08C;
    --theme-color-4: #D5B99A;
    --theme-color-5: #DBC3A9;
    --theme-color-6: #E1CDB7;
    --theme-color-7: #E7D7C5;
    --theme-color-8: #EDE1D4;
    --theme-color-9: #F3EBE2;
    --theme-color-10: #fbf8f2;

    --table-ascension-bg-color: #F7F7F7;

    --custom-tabs-active-color: var(--theme-page-text-color);

    /* [[Template:Color]] */
    --color-anemo: #26a684;
    --color-geo: #B68D07;
    --color-electro: #9336b0;
    --color-dendro: #51810e;
    --color-hydro: #0b4dda;
    --color-pyro: #bf2818;
    --color-cryo: #4878a8;
    --color-physical: #000;
    --color-pneuma: #8D733C;
    --color-ousia: #353D8A;
    --color-buzz: #0075EB;
    --color-bp: #cc8000;
    --color-menu: #937C6E;
    --color-new: #317e2a;
    --color-old: #932015;
    --color-help: #BB8010;

    /* Drop shadow */
    --drop-shadow-color: #20242C;
    --element-shadow-anemo: #336786;
    --element-shadow-cryo: #1B08A2;
    --element-shadow-dendro: #064d1e;
    --element-shadow-electro: #60b;
    --element-shadow-geo: #804816;
    --element-shadow-hydro: #0C44AE;
    --element-shadow-pyro: #931717;

    /* background */
    --background-color-active: #C6F4DE80;
    --background-color-inactive: #F4CCCC80;
}

:root .theme-fandomdesktop-dark,
:root .theme-fandommobile-dark {
    --theme-accent-color--rgba: 79, 81, 94;
    --theme-page-text-color: #FFFFFF;
    --theme-page-text-color--rgb: 255, 255, 255 !important;
    --theme-page-background-color: #222326;
    --theme-page-text-color-inverse: #43403D;
    --theme-border-color: var(--theme-color-7) !important;
    --theme-page-background-color--secondary: #2d2f33;
    --theme-accent-color: #4f515e !important;
    --theme-accent-color--hover: #81f5ff !important;
    --theme-link-color: 
        /*#46cad5*/
        #ACACF0
        !important;
    --theme-link-color--hover: #81f5ff !important;
    --theme-accent-label-color: var(--theme-page-text-color) !important;
    --group-color: #998a6b;
    --border-color: #716243;
    --title-color: #ceb582;
    --subtitle-color: #ceb582;

    --pi-border: var(--theme-color-7) !important;
    --pi-tabber-bg-color: var(--theme-color-8);
    --pi-tabber-color: var(--theme-color-1);
    --pi-title-bg-color: var(--theme-accent-color);
    --pi-title-color: var(--theme-page-text-color);
    --pi-header-bg-color: var(--theme-color-8);
    --pi-header-color: var(--theme-page-text-color);
    --pi-rows-color: #272935;

    --header-link-border-color-1: #3d285a;
    --header-link-border-color-2: #2f295c;
    --mobile-lightbox-border-color: var(--theme-border-color);

    --table-ascension-bg-color: #2C2E3A;

    --theme-color-1: hsl(234, 15%, 50%);
    --theme-color-2: hsl(233, 14%, 46%);
    --theme-color-3: hsl(232, 13%, 42%);
    --theme-color-4: hsl(231, 12%, 38%);
    --theme-color-5: hsl(230, 11%, 34%);
    --theme-color-6: hsl(229, 10%, 30%);
    --theme-color-7: hsl(228, 9%, 26%);
    --theme-color-8: hsl(227, 8%, 22%);
    --theme-color-9: hsl(226, 7%, 18%);
    --theme-color-10: hsl(225, 6%, 14%);

    --custom-tabs-active-color: var(--theme-page-text-color);

    /* [[Template:Color]] */
    --color-anemo: #33ccb3;
    --color-geo: #cfa726;
    --color-electro: #d376f0;
    --color-dendro: #7bb42d;
    --color-hydro: #1c72fd;
    --color-pyro: #e2311d;
    --color-cryo: #98c8e8;
    --color-physical: #fff;
    --color-pneuma: #E9DBA5;
    --color-ousia: #7F7EDB;
    --color-buzz: #2095EF;
    --color-bp: #cc8000;
    --color-menu: #D3BC8E;
    --color-new: #41be3a;
    --color-old: #e35045;
    --color-help: #e0bb00;

    /* background */
    --background-color-active: #C6F4DE80;
    --background-color-inactive: #F4CCCC80;

    /* Recolor red links */
    --theme-alert-color: #FF4B4B;
    --theme-alert-color--rgb: rgb(255, 75, 75);
    --theme-alert-color--hover: #ff6868;
}

/* Style scrollbars to match wiki theme */
#content {
    scrollbar-color: var(--theme-link-color) var(--theme-body-background-color);
}

/* Darker version of alert */
.theme-fandomdesktop-dark {
    --theme-alert-highlight: #a90000;
    --theme-alert-highlight--rgb: rgb(169, 0, 0);
    --theme-alert-highlight--hover: #c30000;
}

/** Invert filter **/
.theme-fandomdesktop-dark .invert-dark {
    filter: invert(1);
}
.theme-fandomdesktop-light .invert-light {
    filter: invert(1);
}

/** Theme colors **/
.text-primary {
    color: var(--theme-page-text-color);
}
.text-secondary {
    color: var(--theme-page-text-color--hover);
}
.text-background {
    color: var(--theme-body-background-color);
}
.text-sidebar {
    color: var(--theme-page-background-color--secondary);
}
.text-accent {
    color: var(--theme-accent-label-color);
}

.bg-primary {
    background-color: var(--theme-page-text-color);
}
.bg-secondary {
    background-color: var(--theme-page-text-color--hover);
}
.bg-background {
    background-color: var(--theme-body-background-color);
}
.bg-sidebar {
    background-color: var(--theme-page-background-color--secondary);
}
.bg-accent {
    background-color: var(--theme-accent-label-color);
}

/* Colors from MediaWiki:Variables.css */
.text-title {
    color: var(--title-color);
}
.text-subtitle {
    color: var(--subtitle-color);
}
.text-group {
    color: var(--group-color);
}
.text-border {
    color: var(--border-color);
}

.bg-title {
    background-color: var(--title-color);
}
.bg-subtitle {
    background-color: var(--subtitle-color);
}
.bg-group {
    background-color: var(--group-color);
}
.bg-border {
    background-color: var(--border-color);
}

.border-title {
    border-color: var(--title-color);
}
.border-subtitle {
    border-color: var(--subtitle-color);
}
.border-group {
    border-color: var(--group-color);
}
.border-border {
    border-color: var(--border-color);
}

/* Change color of classes that used alert-color as bg color */
.theme-fandomdesktop.dark #mw-notification-area.mw-notification.mw-notification-type-error,
.theme-fandomdesktop.dark .postedit.mw-notification.mw-notification-type-error,
.theme-fandomdesktop.dark .wds-table-td-alert,
.theme-fandomdesktop-dark .diff td.diff-deletedline .diffchange {
    background-color: var(--theme-alert-highlight);
}

.theme-fandomdesktop-dark .diff td.diff-deletedline {
    border-color: var(--theme-alert-highlight);
}

.text-error,
.text-error * {
    color: var(--theme-alert-color);
}
.bg-error {
    background-color: var(--theme-alert-highlight);
}

/* [[Template:Color]] */
.text-anemo,
.text-anemo * {
    color: var(--color-anemo);
}
.bg-anemo {
    background-color: var(--color-anemo);
}

.text-geo,
.text-geo * {
    color: var(--color-geo);
}
.bg-geo {
    background-color: var(--color-geo);
}

.text-electro,
.text-electro * {
    color: var(--color-electro);
}
.bg-electro {
    background-color: var(--color-electro);
}

.text-dendro,
.text-dendro * {
    color: var(--color-dendro);
}
.bg-dendro {
    background-color: var(--color-dendro);
}

.text-hydro,
.text-hydro * {
    color: var(--color-hydro);
}
.bg-hydro {
    background-color: var(--color-hydro);
}

.te...