Jump to content

MediaWiki:Common.css

From The Petit Planet Wiki
Revision as of 12:16, 30 August 2026 by ReisuDesign (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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:[email protected]&display=swap');

/*=====================*
 | CODEX DESIGN TOKENS |
 *=====================*/
@media screen {
    /* Day, Light */
    :root,
    .skin-invert,
    .notheme {
        /* Colors */
        --color-base: #5a4a3c;
        --color-base-fixed: #5a4a3c;
        --color-base--hover: #6e6052;
        --color-emphasized: #45392e;
        --color-subtle: #705d4c;
        --color-base--subtle: #705d4c; /* deprecated */
        --color-placeholder: #82756a;
        --color-disabled: #82756a;
        --color-inverted: #fefff2;
        --color-inverted-fixed: #f6f9dd;
        --color-progressive: #21669a;
        --color-progressive--hover: #4b77d6;
        --color-progressive--active: #233566;
        --color-progressive--focus: #21669a;
        --color-destructive: #d73333;
        --color-destructive--hover: #fc493b;
        --color-destructive--active: #9f3526;
        --color-destructive--focus: #21669a;
        --color-visited: #6a60b0;
        --color-destructive--visited: #9f5555;
        --color-error: #d73333;
        --color-warning: #eeb533;
        --color-success: #177860;
        --color-notice: #5a4a3c;
        --color-content-added: #006400;
        --color-content-removed: #d73333;
        /* Filters */
        --filter-invert-icon: 0;
        --filter-invert-primary-button-icon: 1;
        /* Box shadow colors */
        --box-shadow-color-base: #0b0d19;
        --box-shadow-color-progressive--active: #233566;
        --box-shadow-color-progressive--focus: #21669a;
        --box-shadow-color-progressive-selected: #21669a;
        --box-shadow-color-progressive-selected--hover: #4b77d6;
        --box-shadow-color-progressive-selected--active: #233566;
        --box-shadow-color-destructive--focus: #21669a;
        --box-shadow-color-inverted: #fffeef;
        --box-shadow-color-transparent: transparent;
        /* Background colors */
        --background-color-base: #f6f9dd;
        --background-color-base-fixed: #f6f9dd;
        --background-color-neutral: #e8ebd0;
        --background-color-neutral-subtle: #edf0d4;
        --background-color-interactive: #e8ebd0;
        --background-color-interactive-subtle: #edf0d4;
        --background-color-disabled: #c4c4c4;
        --background-color-disabled-subtle: #d5d5d5;
        --background-color-inverted: #45392e;
        --background-color-progressive: #21669a;
        --background-color-progressive--hover: #4b77d6;
        --background-color-progressive--active: #233566;
        --background-color-progressive--focus: #21669a;
        --background-color-progressive-subtle: #f1f4fd;
        --background-color-destructive: #d73333;
        --background-color-destructive--hover: #fc493b;
        --background-color-destructive--active: #9f3526;
        --background-color-destructive--focus: #21669a;
        --background-color-destructive-subtle: #ffe9e5;
        --background-color-error: #d73333;
        --background-color-error--hover: #fc493b;
        --background-color-error--active: #9f3526;
        --background-color-error-subtle: #ffe9e5;
        --background-color-warning-subtle: #fdf2d5;
        --background-color-success-subtle: #dff2eb;
        --background-color-notice-subtle: #e8ebd0;
        --background-color-content-added: #a3d3ff;
        --background-color-content-removed: #ffe49c;
        --background-color-transparent: transparent;
        --background-color-backdrop-light: rgba(255, 255, 255, 0.65);
        --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
        --background-color-backdrop-subtle: rgba(0, 0, 0, 0.1);
        --background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
        --background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
        --background-color-input-binary--checked: #21669a;
        --background-color-tab-list-item-framed--hover: rgba(255, 255, 255, 0.3);
        --background-color-tab-list-item-framed--active: rgba(255, 255, 255, 0.65);
        --background-color-header: linear-gradient(90deg,rgba(222, 185, 78, 1) 0%, rgba(222, 185, 78, 1) 100%);
        /* Opacity */
        --opacity-icon-base: 0.87;
        --opacity-icon-base--hover: 0.74;
        --opacity-icon-base--selected: 1;
        --opacity-icon-base--disabled: 0.51;
        --opacity-icon-placeholder: 0.51;
        --opacity-icon-subtle: 0.67;
        /* Border colors */
        --border-color-base: #aaa29c;
        --border-color-subtle: #b6b0ab;
        --border-color-muted: #d2cac4;
        --border-color-interactive: #82756a;
        --border-color-disabled: #b6b0ab;
        --border-color-inverted: #f6f9dd;
        --border-color-progressive: #21669a;
        --border-color-progressive--hover: #4b77d6;
        --border-color-progressive--active: #233566;
        --border-color-progressive--focus: #21669a;
        --border-color-destructive: #d73333;
        --border-color-destructive--hover: #fc493b;
        --border-color-destructive--active: #9f3526;
        --border-color-destructive--focus: #21669a;
        --border-color-error: #9f3526;
        --border-color-error--hover: #fc493b;
        --border-color-warning: #987027;
        --border-color-success: #196551;
        --border-color-notice: #705d4c;
        --border-color-content-added: #a3d3ff;
        --border-color-content-removed: #ffe49c;
        --border-color-transparent: transparent;
        --border-color-divider: #aaa29c;
        --outline-color-progressive--focus: #21669a;
        --border-color-input--hover: var(--border-color-interactive);
        --border-color-input-binary: var(--border-color-interactive);
        --border-color-input-binary--hover: var(--border-color-progressive--hover);
        --border-color-input-binary--active: var(--border-color-progressive--active);
        --border-color-input-binary--focus: var(--border-color-progressive--focus);
        --border-color-input-binary--checked: var(--border-color-progressive);
        /* Link colors */
        --color-link-red: var(--color-destructive);
        --color-link-red--hover: var(--color-destructive--hover);
        --color-link-red--active: var(--color-destructive--active);
        --color-link-red--focus: var(--color-destructive--focus);
        --color-link-red--visited: var(--color-destructive--visited);
        --external-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2321669a' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/></svg>");
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");
        /* Additional background colors */
        --background-color-0:  #f6f9dd;
        --background-color-0b: oklch(0.955 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-6:  oklch(0.65 0.04 107.5);
        --background-color-8:  oklch(0.60 0.04 107.5);
        --background-color-9:  oklch(0.55 0.04 107.5);
        --background-color-10: oklch(0.50 0.04 107.5);
        /* TableProgressTracking */
        --tpt-checked-background: #a2c0b5;
        /* Miscellaneous */
        --unknown-img: url("https://petitplanet.wiki/images/d/dd/Unknown.png");
    }

    /* Night, Dark */
    :root.skin-theme-clientpref-night {
        color-scheme: dark;
        /* Colors */
        --color-base: #fefdde;
        --color-base-fixed: #fefdde;
        --color-base--hover: #f8f7e3;
        --color-emphasized: #f8f7e3;
        --color-subtle: #fafaea;
        --color-base--subtle: #fafaea; /* deprecated */
        --color-placeholder: #656985;
        --color-disabled: #656985;
        --color-inverted: #0d0f1e;
        --color-progressive: #71bed7;
        --color-progressive--hover: #5689dc;
        --color-progressive--active: #3e72c6;
        --color-destructive: #fd7865;
        --color-destructive--hover: #fea898;
        --color-destructive--active: #ffc8bd;
        --color-visited: #a799cd;
        --color-destructive--visited: #c99391;
        --color-error: #fd7865;
        --color-warning: #fecc44;
        --color-success: #2cb491;
        --color-notice: #f8f7e3;
        --color-content-added: #80cdb3;
        --color-content-removed: #fd7865;
        /* Box shadow colors */
        --box-shadow-color-base: #fffeef;
        --box-shadow-color-progressive--focus: #6b8edf;
        --box-shadow-color-destructive--focus: #6b8edf;
        --box-shadow-color-inverted: #0b0d19;
        /* Background colors */
        --background-color-base: #0d0f1e;
        --background-color-neutral: #16192a;
        --background-color-neutral-subtle: #1d1f2e;
        --background-color-interactive: #16192a;
        --background-color-interactive-subtle: #1d1f2e;
        --background-color-disabled: #292c41;
        --background-color-disabled-subtle: #2c2f3e;
        --background-color-inverted: #f8f7e3;
        --background-color-progressive--focus: #6b8edf;
        --background-color-progressive-subtle: #233566;
        --background-color-destructive--focus: #6b8edf;
        --background-color-destructive-subtle: #612419;
        --background-color-error: #fc493b;
        --background-color-error--hover: #fd7865;
        --background-color-error--active: #fea898;
        --background-color-error-subtle: #612419;
        --background-color-warning-subtle: #453217;
        --background-color-success-subtle: #153d31;
        --background-color-notice-subtle: #16192a;
        --background-color-content-added: #233566;
        --background-color-content-removed: #453217;
        --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
        --background-color-backdrop-dark: rgba(255, 255, 255, 0.65);
        --background-color-backdrop-subtle: rgba(255, 255, 255, 0.1);
        --background-color-header: linear-gradient(90deg,rgba(18, 47, 65, 1) 0%, rgba(18, 47, 65, 1) 50%, rgba(18, 23, 53, 1) 51%, rgba(18, 23, 53, 1) 100%);
        /* Border colors */
        --border-color-base: #424663;
        --border-color-subtle: #292c41;
        --border-color-muted: #2c2f3e;
        --border-color-interactive: #6f6f77;
        --border-color-disabled: #292c41;
        --border-color-inverted: #0d0f1e;
        --border-color-progressive--focus: #6b8edf;
        --border-color-destructive--focus: #6b8edf;
        --border-color-error: #fc493b;
        --border-color-error--hover: #fd7865;
        --border-color-warning: #fecc44;
        --border-color-success: #2cb491;
        --border-color-notice: #c8ccd1;
        --border-color-content-added: #233566;
        --border-color-content-removed: #987027;
        /* Link colors */
        --external-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2371bed7' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/></svg>");
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
        /* Additional background colors */
        --background-color-0:  #0d0f1e;
        --background-color-0b: oklch(0.21 0.0278 277.52);
        --background-color-1:  oklch(0.23 0.0278 277.52);
        --background-color-1b: oklch(0.25 0.0278 277.52);
        --background-color-2:  oklch(0.27 0.0278 277.52);
        --background-color-2b: oklch(0.29 0.0278 277.52);
        --background-color-3:  oklch(0.31 0.0278 277.52);
        --background-color-4:  oklch(0.35 0.0278 277.52);
        --background-color-5:  oklch(0.39 0.0278 277.52);
        --background-color-6:  oklch(0.43 0.0278 277.52);
        --background-color-7:  oklch(0.47 0.0278 277.52);
        --background-color-8:  oklch(0.51 0.0278 277.52);
        --background-color-9:  oklch(0.55 0.0278 277.52);
        --background-color-10: oklch(0.59 0.0278 277.52);
        /* TableProgressTracking */
        --tpt-checked-background: #6f8581;
    }
}

/* Auto, OS */
@media screen and (prefers-color-scheme: dark) {
    :root.skin-theme-clientpref-os {
        /* Colors */
        --color-base: #fefdde;
        --color-base-fixed: #fefdde;
        --color-base--hover: #f8f7e3;
        --color-emphasized: #f8f7e3;
        --color-subtle: #fafaea;
        --color-base--subtle: #fafaea; /* deprecated */
        --color-placeholder: #656985;
        --color-disabled: #656985;
        --color-inverted: #0d0f1e;
        --color-progressive: #71bed7;
        --color-progressive--hover: #5689dc;
        --color-progressive--active: #3e72c6;
        --color-destructive: #fd7865;
        --color-destructive--hover: #fea898;
        --color-destructive--active: #ffc8bd;
        --color-visited: #a799cd;
        --color-destructive--visited: #c99391;
        --color-error: #fd7865;
        --color-warning: #fecc44;
        --color-success: #2cb491;
        --color-notice: #f8f7e3;
        --color-content-added: #80cdb3;
        --color-content-removed: #fd7865;
        /* Box shadow colors */
        --box-shadow-color-base: #fffeef;
        --box-shadow-color-progressive--focus: #6b8edf;
        --box-shadow-color-destructive--focus: #6b8edf;
        --box-shadow-color-inverted: #0b0d19;
        /* Background colors */
        --background-color-base: #0d0f1e;
        --background-color-neutral: #16192a;
        --background-color-neutral-subtle: #1d1f2e;
        --background-color-interactive: #16192a;
        --background-color-interactive-subtle: #1d1f2e;
        --background-color-disabled: #292c41;
        --background-color-disabled-subtle: #2c2f3e;
        --background-color-inverted: #f8f7e3;
        --background-color-progressive--focus: #6b8edf;
        --background-color-progressive-subtle: #233566;
        --background-color-destructive--focus: #6b8edf;
        --background-color-destructive-subtle: #612419;
        --background-color-error: #fc493b;
        --background-color-error--hover: #fd7865;
        --background-color-error--active: #fea898;
        --background-color-error-subtle: #612419;
        --background-color-warning-subtle: #453217;
        --background-color-success-subtle: #153d31;
        --background-color-notice-subtle: #16192a;
        --background-color-content-added: #233566;
        --background-color-content-removed: #453217;
        --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
        --background-color-backdrop-dark: rgba(255, 255, 255, 0.65);
        --background-color-backdrop-subtle: rgba(255, 255, 255, 0.1);
        --background-color-header: linear-gradient(90deg,rgba(18, 47, 65, 1) 0%, rgba(18, 47, 65, 1) 50%, rgba(18, 23, 53, 1) 51%, rgba(18, 23, 53, 1) 100%);
        /* Border colors */
        --border-color-base: #424663;
        --border-color-subtle: #292c41;
        --border-color-muted: #2c2f3e;
        --border-color-interactive: #6f6f77;
        --border-color-disabled: #292c41;
        --border-color-inverted: #0d0f1e;
        --border-color-progressive--focus: #6b8edf;
        --border-color-destructive--focus: #6b8edf;
        --border-color-error: #fc493b;
        --border-color-error--hover: #fd7865;
        --border-color-warning: #fecc44;
        --border-color-success: #2cb491;
        --border-color-notice: #c8ccd1;
        --border-color-content-added: #233566;
        --border-color-content-removed: #987027;
        /* Link colors */
        --external-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2371bed7' d='M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1Z M2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/></svg>");
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
        /* Additional background colors */
        --background-color-0:  #0d0f1e;
        --background-color-0b: oklch(0.21 0.0278 277.52);
        --background-color-1:  oklch(0.23 0.0278 277.52);
        --background-color-1b: oklch(0.25 0.0278 277.52);
        --background-color-2:  oklch(0.27 0.0278 277.52);
        --background-color-2b: oklch(0.29 0.0278 277.52);
        --background-color-3:  oklch(0.31 0.0278 277.52);
        --background-color-4:  oklch(0.35 0.0278 277.52);
        --background-color-5:  oklch(0.39 0.0278 277.52);
        --background-color-6:  oklch(0.43 0.0278 277.52);
        --background-color-7:  oklch(0.47 0.0278 277.52);
        --background-color-8:  oklch(0.51 0.0278 277.52);
        --background-color-9:  oklch(0.55 0.0278 277.52);
        --background-color-10: oklch(0.59 0.0278 277.52);
        /* TableProgressTracking */
        --tpt-checked-background: #6f8581;
    }
}

/*=======*
 | 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: 3px;
}

.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 */
.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;
}

/* Links */
a:where(:not([role='button'])),
a:where(:not([role='button'])):hover,
a:where(:not([role='button'])):visited,
a:where(:not([role='button'])):visited:hover,
a:where(:not([role='button'])):visited:active,
a:where(:not([role='button'])):active {
    color: var(--color-progressive);
}

a:where(.new:not([role='button'])),
a:where(.new:not([role='button'])):hover,
a:where(.new:not([role='button'])):visited,
a:where(.new:not([role='button'])):visited:hover,
a:where(.new:not([role='button'])):visited:active,
a:where(.new:not([role='button'])):active {
    color: var(--color-destructive);
}

/* 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;
}

.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);
}

/* Revert custom wikitable styling in Special and Bucket namespaces */
.ns-special .wikitable,
.ns-9592 .wikitable {
    display: table;
    max-width: none;
    overflow-x: visible;
    overflow-y: visible;
    margin: 1em 0;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 0;
    border-width: 1px;
    padding: 0;
}

.ns-special .wikitable > tr > th,
.ns-special .wikitable > tr > td,
.ns-special .wikitable > * > tr > th,
.ns-special .wikitable > * > tr > td,
.ns-9592 .wikitable > tr > th,
.ns-9592 .wikitable > tr > td,
.ns-9592 .wikitable > * > tr > th,
.ns-9592 .wikitable > * > tr > td {
    background-color: var(--background-color-0b);
    border: 1px solid var(--background-color-4);
    border-radius: 0;
    padding: 0.2em 0.4em;
}

.ns-special .wikitable > tr > th,
.ns-special .wikitable > * > tr > th,
.ns-9592 .wikitable > tr > th,
.ns-9592 .wikitable > * > tr > th {
    text-align: center;
    background: var(--background-color-2);
    padding: 0.25em 0.5em;
}

.ns-special .wikitable caption,
.ns-9592 .wikitable caption {
    background: none;
    margin: 0;
}

.bucket__list-item:not(:last-child) {
    border-color: var(--background-color-4);
}

/* 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);
    text-align: center;
    min-width: max-content;
}

.mw-templatedata-doc-params .mw-templatedata-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.template-documentation-content > section > table > caption > p {
    margin: 0.25em 0 0.5em 0.25em;
}

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

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

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

/* Hatnote */
.hatnote {
    padding: 5px 10px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--color-accent--rgb), 0.25) 0%, rgba(var(--color-accent--rgb), 0) 100%);
    margin: 5px 0;
    overflow: auto;
    position: relative;
}

.hatnote::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--color-accent--rgb), 0.2) 0%, rgba(var(--color-accent--rgb), 0) 100%) border-box;
    --exclude-mask: linear-gradient(white 0 0);
    mask: var(--exclude-mask) padding-box exclude, var(--exclude-mask);
    content: '';
}

.skin-theme-clientpref-night .hatnote {
    background: linear-gradient(145deg, rgba(var(--color-accent--rgb), 0.16) 0%, rgba(var(--color-accent--rgb), 0) 100%);

    &::before {
        background: linear-gradient(145deg, rgba(var(--color-accent--rgb), 0.12) 0%, rgba(var(--color-accent--rgb), 0) 100%) border-box;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os .hatnote {
        background: linear-gradient(145deg, rgba(var(--color-accent--rgb), 0.16) 0%, rgba(var(--color-accent--rgb), 0) 100%);

        &::before {
            background: linear-gradient(145deg, rgba(var(--color-accent--rgb), 0.12) 0%, rgba(var(--color-accent--rgb), 0) 100%) border-box;
        }
    }
}

/* Popups */
.mwe-popups {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 90px -20px var(--background-color-1b), 0 0 0 1px var(--background-color-1b);
}

.mwe-popups-container {
    background: var(--background-color-0b) !important;
    border-radius: 10px;
    overflow: hidden;
}

.mwe-popups .mwe-popups-extract[dir='ltr']::after {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--background-color-0b) 50%) !important;
}

/*===============*
 | 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: " | ";
}

/* SyntaxHighlight copy button */
.mw-highlight-copy--bound button {
    top: -0.5rem;
    right: 0;
    padding: 0.25rem 0.35rem;
    border-radius: 10px;
    background: var(--color-accent);
    border-color: var(--background-color-1);
    color: var(--color-accent-text);
}

.mw-highlight-copy--bound button:hover,
.mw-highlight-copy--bound button:active {
    background: var(--background-color-2);
    border-color: var(--color-progressive);
    color: var(--color-progressive);
}

/* Additional inverts and filters */
/* Default MediaWiki invert classes: .skin-invert and .skin-invert-image */
.skin-theme-clientpref-day .day-invert-image,
.skin-theme-clientpref-day .light-invert-image {
    filter: invert(65%) hue-rotate(180deg);
}

.skin-theme-clientpref-night .night-invert-image,
.skin-theme-clientpref-night .dark-invert-image {
    filter: invert(85%) hue-rotate(180deg);
}

@media screen and (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os .night-invert-image,
    .skin-theme-clientpref-os .dark-invert-image {
        filter: invert(85%) hue-rotate(180deg);
    }
}

.filter-opacity-60 {
    filter: opacity(60%);
}

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

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

/* For [[Template:Recipe/styles.css]] */
.recipe-header-sub a:has(img) {
    padding-right: 0 !important;
    margin-right: -0.35em;
}

.recipe-body-cooking-type-cards,
.recipe-body-cooking-option-cards,
.recipe-body-kitchenware-cards {
    display: flex;
    flex-direction: wrap;
    gap: 2px;
}

/* =========================================================
   Progress Tracking — Checkbox Styling
   ========================================================= */

/* ---------- Theme colors ---------- */

.skin-theme-clientpref-day {
	--checked: #aab667;
	--checkbox-mark: #f6f9dd;
}

.skin-theme-clientpref-night {
	--checked: #6c8049;
	--checkbox-mark: #f6f9dd;
}


/* ---------- Checkbox base ---------- */

table.progress-tracking-table .cdx-checkbox__icon {
	border: 2px solid transparent !important;
	border-radius: 5px;
	outline: none;
	text-align: center !important;
    background-color: var(--background-color-5) !important;
}


/* ---------- Checked checkbox ---------- */

table.progress-tracking-table .cdx-checkbox__input:checked + .cdx-checkbox__icon {
	background-color: #495e25 !important;
	outline: none !important;
    border: none !important;
}


/* Checkmark */

table.progress-tracking-table .cdx-checkbox__input:checked:not(:indeterminate)
+ .cdx-checkbox__icon::before {
	content: "✓" !important;

	position: relative;
	left: 2px;
	top: -2px;

	margin: 0 !important;
	border: none !important;
	transform: rotate(0deg);

	font-weight: 900;
	color: var(--checkbox-mark);
}


/* ---------- Remove focus styling ---------- */

table.progress-tracking-table .cdx-checkbox__input:focus,
table.progress-tracking-table .cdx-checkbox__input:focus-visible,
table.progress-tracking-table .cdx-checkbox__input:focus + .cdx-checkbox__icon,
table.progress-tracking-table .cdx-checkbox__input:focus-visible + .cdx-checkbox__icon,
table.progress-tracking-table .cdx-checkbox__wrapper:has(.cdx-checkbox__input:focus),
table.progress-tracking-table .cdx-checkbox__wrapper:has(.cdx-checkbox__input:focus-visible) {
	box-shadow: none !important;
}


/* ---------- Checked cell ---------- */

table.progress-tracking-table td.progress-tracker-checkbox-cell:has(input[type="checkbox"]:checked) {
	background-color: var(--checked);
}
Retrieved from "https://petitplanet.wiki/index.php?title=MediaWiki:Common.css&oldid=22052"