MediaWiki:Common.css

/* CSS placed here will be loaded for all skins.
 * See [[MediaWiki:Vector-2022.css]] for CSS loaded for the desktop skin. 
 * See [[MediaWiki:Citizen.css]] for CSS loaded for the mobile skin. 
 */
/*=========*
 | IMPORTS |
 *=========*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Avestan:wght@400;700&family=El+Messiri:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Text:wght@200..700&display=swap');

/*=====================*
 | CODEX DESIGN TOKENS |
 *=====================*/
@media screen {
	/* Day, Light */
    :root,
    .skin-invert,
    .notheme {
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");
        /* Additional colors */
        --color-accent: #eac863;
        --color-accent--rgb: 234, 200, 99;
        --color-accent-text: #5a4a3c;
        --color-buzz: #0075EB;
        --color-event: #cc8000;
        --color-menu: #937C6E;
        --color-new: #317e2a;
        --color-old: #932015;
        --color-help: #BB8010;
        --color-catch: #17744b;
        /* Additional background colors */
        --background-color-0:  #f6f9dd;
        --background-color-0b: oklch(0.965 0.04 107.5);
        --background-color-1:  oklch(0.94 0.04 107.5);
        --background-color-1b: oklch(0.92 0.04 107.5);
        --background-color-2:  oklch(0.90 0.04 107.5);
        --background-color-2b: oklch(0.88 0.04 107.5);
        --background-color-3:  oklch(0.85 0.04 107.5);
        --background-color-4:  oklch(0.80 0.04 107.5);
        --background-color-5:  oklch(0.75 0.04 107.5);
        --background-color-6:  oklch(0.70 0.04 107.5);
        --background-color-8:  oklch(0.65 0.04 107.5);
        --background-color-9:  oklch(0.60 0.04 107.5);
        --background-color-10: oklch(0.55 0.04 107.5);
        /* Miscellaneous */
        --unknown-img: url("https://petitplanet.wiki/images/d/dd/Unknown.png");
    }
    
    /* Night, Dark */
    :root.skin-theme-clientpref-night {
        color-scheme: dark;
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
        /* Additional colors */
        --color-accent: #ddbc5b;
        --color-accent--rgb: 221, 188, 91;
        --color-accent-text: #0d0f1e;
        --color-buzz: #2095EF;
        --color-event: #cc8000;
        --color-menu: #D3BC8E;
        --color-new: #41be3a;
        --color-old: #ed6d59;
        --color-help: #e0bb00;
        --color-catch: #85cdae;        
        /* Additional background colors */
        --background-color-0:  #0d0f1e;
        --background-color-0b: oklch(0.21 0.0278 277.52);
        --background-color-1:  oklch(0.24 0.0278 277.52);
        --background-color-1b: oklch(0.27 0.0278 277.52);
        --background-color-2:  oklch(0.30 0.0278 277.52);
        --background-color-2b: oklch(0.325 0.0278 277.52);
        --background-color-3:  oklch(0.35 0.0278 277.52);
        --background-color-4:  oklch(0.40 0.0278 277.52);
        --background-color-5:  oklch(0.45 0.0278 277.52);
        --background-color-6:  oklch(0.50 0.0278 277.52);
        --background-color-7:  oklch(0.55 0.0278 277.52);
        --background-color-8:  oklch(0.60 0.0278 277.52);
        --background-color-9:  oklch(0.65 0.0278 277.52);
        --background-color-10: oklch(0.70 0.0278 277.52);
    }
}

/* OS, Auto */
@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
        /* Additional colors */
        --color-accent: #ddbc5b;
        --color-accent--rgb: 221, 188, 91;
        --color-accent-text: #0d0f1e;
        --color-buzz: #2095EF;
        --color-event: #cc8000;
        --color-menu: #D3BC8E;
        --color-new: #41be3a;
        --color-old: #ed6d59;
        --color-help: #e0bb00;
        --color-catch: #85cdae;        
        /* Additional background colors */
        --background-color-0:  #0d0f1e;
        --background-color-0b: oklch(0.21 0.0278 277.52);
        --background-color-1:  oklch(0.24 0.0278 277.52);
        --background-color-1b: oklch(0.27 0.0278 277.52);
        --background-color-2:  oklch(0.30 0.0278 277.52);
        --background-color-2b: oklch(0.325 0.0278 277.52);
        --background-color-3:  oklch(0.35 0.0278 277.52);
        --background-color-4:  oklch(0.40 0.0278 277.52);
        --background-color-5:  oklch(0.45 0.0278 277.52);
        --background-color-6:  oklch(0.50 0.0278 277.52);
        --background-color-7:  oklch(0.55 0.0278 277.52);
        --background-color-8:  oklch(0.60 0.0278 277.52);
        --background-color-9:  oklch(0.65 0.0278 277.52);
        --background-color-10: oklch(0.70 0.0278 277.52);
    }
}

/* For [[Module:Mbox]] */
.mbox {
    --type-important: 185, 102, 102;
    --type-moderate: 228, 159, 109;
    --type-minor: 231, 202, 95;

    --stub: 235, 220, 150;          /* softer warm yellow */
    --cbt: 122, 160, 145;           /* muted green-teal */
    --mild: 225, 155, 130;          /* gentle coral */
    --removed: 160, 85, 105;        /* dusty rose-wine */
    --cleanup: 185, 105, 115;       /* muted raspberry */
    --construct: 235, 190, 145;     /* peachy tan */
    --upcoming: 150, 135, 175;      /* soft lavender purple */
    --unofficialtl: 115, 210, 205;  /* calm aqua */
    --lua: 135, 150, 220;           /* muted periwinkle */
    --css: 125, 160, 230;           /* softened sky blue */
    --js: 245, 230, 140;            /* pastel golden yellow */
    --sandbox: 185, 215, 205;       /* pale misty mint */
    --names: 190, 225, 225;         /* very light cyan tint */
    --changehistory: 135, 155, 200; /* softened steel blue */
    --opacity: 0.15;
}

/*=======*
 | FONTS |
 *=======*/
/* Petit Planet font */
@font-face {
    font-family: 'PetitPlanet';
    font-style: normal;
    font-weight: normal;
    src: url('https://petitplanet.wiki/images/a/af/Petit_Planet_Font_Light.woff2') format('woff2');
    font-display: swap;
}

/* Body font */
body {
    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
}

/* Headings & page titles */
h1,
h2,
h3,
.mw-page-title-main,
.vector-sticky-header-context-bar-primary {
    font-family: 'PetitPlanet', 'Montserrat', sans-serif !important;
    font-weight: 500, 700;
}

*[lang='ja'],
*[lang='ko'],
*[lang='ru'],
*[lang='th'],
*[lang="vi"],
*[lang='yue'],
*[lang='zh'],
*[lang='zh-Hans'],
*[lang='zh-Hant'] {
    h1,
    h2,
    h3,
    .mw-page-title-main,
    .vector-sticky-header-context-bar-primary {
        font-family: 'Montserrat', sans-serif !important;
        font-weight: 900 !important;
    }
}

/* Language-specific fallbacks */
*[lang='ae'] {
    font-family: 'Noto Sans Avestan', sans-serif !important;
}

*[lang='ain'],
*[lang='ja'],
*[lang='ojp'] {
    font-family: 'Noto Sans JP', sans-serif !important;
}

*[lang='ar'],
*[lang='fa'] {
    font-family: 'El Messiri', sans-serif !important;
}

*[lang='he'] {
    font-family: 'Noto Sans Hebrew', sans-serif !important;
}

*[lang='ko'] {
    font-family: 'Noto Sans KR', sans-serif !important;
}

*[lang='th'] {
    font-family: 'Noto Sans', 'Noto Sans Thai', sans-serif !important;
}

*[lang='yue'],
*[lang='zh'],
*[lang='zh-Hans'] {
    font-family: 'Noto Sans SC', sans-serif !important;
}

*[lang='zh-Hant'] {
    font-family: 'Noto Sans TC', sans-serif !important;
}

/*============*
 | FORMATTING |
 *============*/
/* For [[Module:Formatting]] */
code, 
.custom-formatting-code:not(.custom-formatting-plain) {
    font-family: monospace;
    line-height: 100%;
    background-color: var(--background-color-neutral-subtle);
    border: 1px solid var(--border-color-muted);
    border-radius: 5px;
    padding: 1px 4px;
}

.custom-formatting-code:not(.custom-formatting-plain) {
    margin: 0 3px;
}

.custom-formatting-code { display: inline-block; }
.custom-formatting-code.code-block-table { display: table; }

span.variable { opacity: 0.65; }

span.variable::after {
    opacity: 0.65;
    content: ">";
}

span.variable::before {
    opacity: 0.65;
    content: "<";
}

.custom-formatting-nested { display: none; }
.custom-formatting-resulting { display: inline; }
.custom-formatting-code .custom-formatting-nested { display: inline-block; }
.custom-formatting-code .custom-formatting-resulting { display: none; }

/* For [[MediaWiki:Edittools]] */
.edittools div.mw-collapsible {
    padding: 0;
    display: inline;
}

.edittools .mw-collapsible-toggle-default::before,
.edittools .mw-collapsible-toggle-default::after {
    content:'' !important;
}

.edittools .mw-collapsible-toggle-default span {
    background-color: var(--background-color-4);
    padding: 0 7px;
    border-radius: 10px;
    margin-left: 5px;
    color: var(--color-base);
    
    &:hover {
        color: var(--color-base);
        text-decoration: none;
        background-color: var(--background-color-5);
    }
}

.edittools .custom-formatting-code {
    line-height: 125% !important;
    margin: 3px !important;
    background-color: var(--background-color-2b) !important;
    border-color: transparent !important;
    min-width: 1.5em;
    text-align: center;
    
    &:hover {
        border-color: var(--color-progressive) !important;
    }
}

.wikitable.edittools > tr:nth-child(even) > td,
.wikitable.edittools > * > tr:nth-child(even) > td {
    background: var(--background-color-1);
}

.wikitable.edittools > tr > td a,
.wikitable.edittools > * > tr > td a {
    min-width: 1.5em;
}

.wikitable.edittools > tr > td a:hover,
.wikitable.edittools > * > tr > td a:hover {
    color: var(--color-progressive);
    text-decoration: none;
}

.wikitable.edittools > tr:nth-child(even) > th,
.wikitable.edittools > * > tr:nth-child(even) > th {
    background: var(--background-color-2);
}

/*==============*
 | CONTENT BODY |
 *==============*/
/* Background */
body {
    background-color: var(--background-color-0) !important;
} 

/* Wordmark */
.mw-logo-wordmark {
    width: initial !important;
}

.skin-theme-clientpref-day .mp-header-wordmark img {
   filter: invert(1) hue-rotate(180deg);
}

/* Hide mobile-only things on desktop (overridden in [[MediaWiki:Citizen.css]]) */
.mobileHide,
.mobile-only,
.no-desktop {
    display: none;
}

/* Tables */
.wikitable {
    display: block;
    max-width: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--background-color-0b);
    border-collapse: separate;
    border-spacing: 4px;
    border-radius: 10px;
    border-width: 0;
    padding: 2px;
}

.ns-special .wikitable {
    display: table;
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td,
.wikitable caption {
    border-radius: 8px;
    border-color: transparent;
    padding: 0.25em 0.5em;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
    text-align: left;
    background: var(--background-color-3);
}

.wikitable--stripe > tr:nth-child(even) > th,
.wikitable--stripe > * > tr:nth-child(even) > th {
    background: var(--background-color-2b);
}

.wikitable > tr > td,
.wikitable > * > tr > td,
.wikitable.sortable >  tr:nth-child(odd) > td,
.wikitable.sortable > * >  tr:nth-child(odd) > td {
    background-color: var(--background-color-1b);
}

.wikitable--stripe >  tr:nth-child(odd) > td,
.wikitable--stripe > * >  tr:nth-child(odd) > td,
.wikitable.sortable > tr > td,
.wikitable.sortable > * > tr > td {
    background-color: var(--background-color-2b);
}

.wikitable caption {
    background: var(--background-color-3);
    margin: 4px 4px 0 4px;
}

.mw-collapsible-toggle-default::before, 
.mw-collapsible-toggle-default::after {
    display: none;
}

.mw-collapsible-toggle-default .mw-collapsible-text {
    background-color: var(--color-accent);
    color: var(--color-accent-text);
    border-radius: 6px;
    padding: 0.125em 0.375em;
    margin-left: 0.5em;
}

.mw-collapsible-toggle-default .mw-collapsible-text:hover {
    color: var(--color-accent-text);
}

/* Table text alignment */
#content .mw-parser-output {
    /* Header: left */
    .thl th,
    .thl1 th:nth-child(1),
    .thl2 th:nth-child(2),
    .thl3 th:nth-child(3),
    .thl4 th:nth-child(4),
    .thl5 th:nth-child(5),
    .thl6 th:nth-child(6),
    .thl7 th:nth-child(7),
    .thl8 th:nth-child(8),
    .thl9 th:nth-child(9),
    .thl10 th:nth-child(10),
    .thl11 th:nth-child(11),
    .thl12 th:nth-child(12),
    .thl13 th:nth-child(13),
    .thl14 th:nth-child(14),
    .thl15 th:nth-child(15),
    .thl16 th:nth-child(16),
    .thl17 th:nth-child(17),
    .thl18 th:nth-child(18),
    .thl19 th:nth-child(19),
    .thl20 th:nth-child(20) {
        text-align: left;
    }
    /* Header: center */
    .thc th,
    .thc1 th:nth-child(1),
    .thc2 th:nth-child(2),
    .thc3 th:nth-child(3),
    .thc4 th:nth-child(4),
    .thc5 th:nth-child(5),
    .thc6 th:nth-child(6),
    .thc7 th:nth-child(7),
    .thc8 th:nth-child(8),
    .thc9 th:nth-child(9),
    .thc10 th:nth-child(10),
    .thc11 th:nth-child(11),
    .thc12 th:nth-child(12),
    .thc13 th:nth-child(13),
    .thc14 th:nth-child(14),
    .thc15 th:nth-child(15),
    .thc16 th:nth-child(16),
    .thc17 th:nth-child(17),
    .thc18 th:nth-child(18),
    .thc19 th:nth-child(19),
    .thc20 th:nth-child(20) {
        text-align: center;
    }
    /* Header: right */
    .thr th,
    .thr1 th:nth-child(1),
    .thr2 th:nth-child(2),
    .thr3 th:nth-child(3),
    .thr4 th:nth-child(4),
    .thr5 th:nth-child(5),
    .thr6 th:nth-child(6),
    .thr7 th:nth-child(7),
    .thr8 th:nth-child(8),
    .thr9 th:nth-child(9),
    .thr10 th:nth-child(10),
    .thr11 th:nth-child(11),
    .thr12 th:nth-child(12),
    .thr13 th:nth-child(13),
    .thr14 th:nth-child(14),
    .thr15 th:nth-child(15),
    .thr16 th:nth-child(16),
    .thr17 th:nth-child(17),
    .thr18 th:nth-child(18),
    .thr19 th:nth-child(19),
    .thr20 th:nth-child(20) {
        text-align: right;
    }
    /* Header: top */
    .tht th,
    .tht1 th:nth-child(1),
    .tht2 th:nth-child(2),
    .tht3 th:nth-child(3),
    .tht4 th:nth-child(4),
    .tht5 th:nth-child(5),
    .tht6 th:nth-child(6),
    .tht7 th:nth-child(7),
    .tht8 th:nth-child(8),
    .tht9 th:nth-child(9),
    .tht10 th:nth-child(10),
    .tht11 th:nth-child(11),
    .tht12 th:nth-child(12),
    .tht13 th:nth-child(13),
    .tht14 th:nth-child(14),
    .tht15 th:nth-child(15),
    .tht16 th:nth-child(16),
    .tht17 th:nth-child(17),
    .tht18 th:nth-child(18),
    .tht19 th:nth-child(19),
    .tht20 th:nth-child(20) {
        vertical-align: top;
    }
    /* Header: middle */
    .thm th,
    .thm1 th:nth-child(1),
    .thm2 th:nth-child(2),
    .thm3 th:nth-child(3),
    .thm4 th:nth-child(4),
    .thm5 th:nth-child(5),
    .thm6 th:nth-child(6),
    .thm7 th:nth-child(7),
    .thm8 th:nth-child(8),
    .thm9 th:nth-child(9),
    .thm10 th:nth-child(10),
    .thm11 th:nth-child(11),
    .thm12 th:nth-child(12),
    .thm13 th:nth-child(13),
    .thm14 th:nth-child(14),
    .thm15 th:nth-child(15),
    .thm16 th:nth-child(16),
    .thm17 th:nth-child(17),
    .thm18 th:nth-child(18),
    .thm19 th:nth-child(19),
    .thm20 th:nth-child(20) {
        vertical-align: middle;
    }
    /* Header: bottom */
    .thb th,
    .thb1 th:nth-child(1),
    .thb2 th:nth-child(2),
    .thb3 th:nth-child(3),
    .thb4 th:nth-child(4),
    .thb5 th:nth-child(5),
    .thb6 th:nth-child(6),
    .thb7 th:nth-child(7),
    .thb8 th:nth-child(8),
    .thb9 th:nth-child(9),
    .thb10 th:nth-child(10),
    .thb11 th:nth-child(11),
    .thb12 th:nth-child(12),
    .thb13 th:nth-child(13),
    .thb14 th:nth-child(14),
    .thb15 th:nth-child(15),
    .thb16 th:nth-child(16),
    .thb17 th:nth-child(17),
    .thb18 th:nth-child(18),
    .thb19 th:nth-child(19),
    .thb20 th:nth-child(20) {
        vertical-align: bottom;
    }

    /* Cell: left */
    .tdl td,
    .tdl1 td:nth-child(1),
    .tdl2 td:nth-child(2),
    .tdl3 td:nth-child(3),
    .tdl4 td:nth-child(4),
    .tdl5 td:nth-child(5),
    .tdl6 td:nth-child(6),
    .tdl7 td:nth-child(7),
    .tdl8 td:nth-child(8),
    .tdl9 td:nth-child(9),
    .tdl10 td:nth-child(10),
    .tdl11 td:nth-child(11),
    .tdl12 td:nth-child(12),
    .tdl13 td:nth-child(13),
    .tdl14 td:nth-child(14),
    .tdl15 td:nth-child(15),
    .tdl16 td:nth-child(16),
    .tdl17 td:nth-child(17),
    .tdl18 td:nth-child(18),
    .tdl19 td:nth-child(19),
    .tdl20 td:nth-child(20) {
        text-align: left;
    }
    /* Cell: center */
    .tdc td,
    .tdc1 td:nth-child(1),
    .tdc2 td:nth-child(2),
    .tdc3 td:nth-child(3),
    .tdc4 td:nth-child(4),
    .tdc5 td:nth-child(5),
    .tdc6 td:nth-child(6),
    .tdc7 td:nth-child(7),
    .tdc8 td:nth-child(8),
    .tdc9 td:nth-child(9),
    .tdc10 td:nth-child(10),
    .tdc11 td:nth-child(11),
    .tdc12 td:nth-child(12),
    .tdc13 td:nth-child(13),
    .tdc14 td:nth-child(14),
    .tdc15 td:nth-child(15),
    .tdc16 td:nth-child(16),
    .tdc17 td:nth-child(17),
    .tdc18 td:nth-child(18),
    .tdc19 td:nth-child(19),
    .tdc20 td:nth-child(20) {
        text-align: center;
    }
    /* Cell: right */
    .tdr td,
    .tdr1 td:nth-child(1),
    .tdr2 td:nth-child(2),
    .tdr3 td:nth-child(3),
    .tdr4 td:nth-child(4),
    .tdr5 td:nth-child(5),
    .tdr6 td:nth-child(6),
    .tdr7 td:nth-child(7),
    .tdr8 td:nth-child(8),
    .tdr9 td:nth-child(9),
    .tdr10 td:nth-child(10),
    .tdr11 td:nth-child(11),
    .tdr12 td:nth-child(12),
    .tdr13 td:nth-child(13),
    .tdr14 td:nth-child(14),
    .tdr15 td:nth-child(15),
    .tdr16 td:nth-child(16),
    .tdr17 td:nth-child(17),
    .tdr18 td:nth-child(18),
    .tdr19 td:nth-child(19),
    .tdr20 td:nth-child(20) {
        text-align: right;
    }
    /* Cell: top */
    .tdt td,
    .tdt1 td:nth-child(1),
    .tdt2 td:nth-child(2),
    .tdt3 td:nth-child(3),
    .tdt4 td:nth-child(4),
    .tdt5 td:nth-child(5),
    .tdt6 td:nth-child(6),
    .tdt7 td:nth-child(7),
    .tdt8 td:nth-child(8),
    .tdt9 td:nth-child(9),
    .tdt10 td:nth-child(10),
    .tdt11 td:nth-child(11),
    .tdt12 td:nth-child(12),
    .tdt13 td:nth-child(13),
    .tdt14 td:nth-child(14),
    .tdt15 td:nth-child(15),
    .tdt16 td:nth-child(16),
    .tdt17 td:nth-child(17),
    .tdt18 td:nth-child(18),
    .tdt19 td:nth-child(19),
    .tdt20 td:nth-child(20) {
        vertical-align: top;
    }
    /* Cell: middle */
    .tdm td,
    .tdm1 td:nth-child(1),
    .tdm2 td:nth-child(2),
    .tdm3 td:nth-child(3),
    .tdm4 td:nth-child(4),
    .tdm5 td:nth-child(5),
    .tdm6 td:nth-child(6),
    .tdm7 td:nth-child(7),
    .tdm8 td:nth-child(8),
    .tdm9 td:nth-child(9),
    .tdm10 td:nth-child(10),
    .tdm11 td:nth-child(11),
    .tdm12 td:nth-child(12),
    .tdm13 td:nth-child(13),
    .tdm14 td:nth-child(14),
    .tdm15 td:nth-child(15),
    .tdm16 td:nth-child(16),
    .tdm17 td:nth-child(17),
    .tdm18 td:nth-child(18),
    .tdm19 td:nth-child(19),
    .tdm20 td:nth-child(20) {
        vertical-align: middle;
    }
    /* Cell: bottom */
    .tdb td,
    .tdb1 td:nth-child(1),
    .tdb2 td:nth-child(2),
    .tdb3 td:nth-child(3),
    .tdb4 td:nth-child(4),
    .tdb5 td:nth-child(5),
    .tdb6 td:nth-child(6),
    .tdb7 td:nth-child(7),
    .tdb8 td:nth-child(8),
    .tdb9 td:nth-child(9),
    .tdb10 td:nth-child(10),
    .tdb11 td:nth-child(11),
    .tdb12 td:nth-child(12),
    .tdb13 td:nth-child(13),
    .tdb14 td:nth-child(14),
    .tdb15 td:nth-child(15),
    .tdb16 td:nth-child(16),
    .tdb17 td:nth-child(17),
    .tdb18 td:nth-child(18),
    .tdb19 td:nth-child(19),
    .tdb20 td:nth-child(20) {
        vertical-align: bottom;
    }
}

/* Table width */
.w5 { width: 5%; }
.w10 { width: 10%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w33 { width: 33%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w66 { width: 66%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }

/* Template data */
.mw-templatedata-doc-params caption {
    background: var(--background-color-3);
}

.template-documentation-content > section > table > caption > p {
    margin: 12px;
}

.mw-templatedata-doc-params .mw-editsection-bracket {
    display: none;
}

.mw-templatedata-doc-params .mw-templatedata-caption .mw-editsection-like > a {
    background: var(--background-color-4);
    color: var(--color-base);
    padding: 5px 10px;
    border-radius: 20px;
    
    &:hover {
        text-decoration: none;
        background: var(--background-color-5);
    }
}

.mw-templatedata-doc-param-alias {
    color: var(--color-base);
    opacity: 0.65;
}

/* Hatnote */
.hatnote {
    border-left: 3px solid var(--color-accent);
    padding: 3px 10px;
    border-radius: 3px;
    background: linear-gradient(145deg, rgba(var(--color-accent--rgb),0.15) 0%, rgba(var(--color-accent--rgb),0) 100%);
    margin: 5px 0;
}

/*===========*
 | MAIN PAGE |
 *===========*/
.mp-header-container {
    background-color: var(--background-color-1);
    border-radius: 20px;
    padding: 1rem;
    margin-bottom: 1rem;
}

/*===============*
 | MISCELLANEOUS |
 *===============*/
/* Pipe delimiter */
.mw-content-ltr ul.pipe_delimit {
    margin: 0px;
}

.mw-content-ltr ul.pipe_delimit li {
    display:inline;
}

.mw-content-ltr ul.pipe_delimit li + li::before {
    content: " | ";
}

/*========*
 | STYLES |
 *========*/
/* For [[Template:Quote/styles.css]] */
blockquote.pull-quote:has(.pull-quote__source) {
    margin-top: 25px !important;
}

.pull-quote__source {
    width: fit-content;
}