Toggle search
Toggle menu
1K
1K
32
6.2K
The Petit Planet Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css

MediaWiki interface page
More actions
Revision as of 17:30, 26 November 2025 by Stevium (talk | contribs) (Added hue-rotate for inverted filter)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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: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;
}
Retrieved from "https://petitplanet.wiki/index.php?title=MediaWiki:Common.css&oldid=5138"