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-2) !important;
    border-color: transparent !important;

    &:hover {
        border-color: var(--color-progressive) !important;
    }

    & a:hover {
        color: var(--color-progressive);
        text-decoration: none;
    }
}

/*==============*
 | CONTENT BODY |
 *==============*/
/* Background */
body {
    background: var(--background-image) no-repeat fixed center center / cover !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 */
body:not(.ns-special) .wikitable, .article-table {
    th {
        border: none;
        background-color: var(--background-color-1b);
        text-align: left;
    }

    td {
        border: none;
        background-color: var(--background-color-0b);
    }
    
    tr:nth-child(odd) {
        th {
            background-color: var(--background-color-2);
        }

        td {
            background-color: var(--background-color-1);
        }
    }

    & > caption + * th {
        background-color: var(--background-color-2b) !important;
    }
}

.article-table {
    th {
        padding: 0.5em 0.75em;
    }

    td {
        padding: padding: 0.25em 0.75em;
    }
}

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