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: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older edit
Added min font-size for mp-card-text
Added hue-rotate for inverted filter
 
(10 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* 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=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=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');


/* Imports caching */
/*=====================*
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
| CODEX DESIGN TOKENS |
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
*=====================*/
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
@media screen {
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Quote.css&action=raw&ctype=text/css");
/* Day, Light */
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css");
    :root,
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Font.css&action=raw&ctype=text/css");
    .skin-invert,
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
    .notheme {
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Change History.css&action=raw&ctype=text/css");
        /* Background image */
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Hatnote.css&action=raw&ctype=text/css");
        --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
        /* Additional colors */
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Card.css&action=raw&ctype=text/css");
        --color-accent: #eac863;
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Recipe.css&action=raw&ctype=text/css");
        --color-accent--rgb: 234, 200, 99;
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:CustomTabs.css&action=raw&ctype=text/css");
        --color-accent-text: #5a4a3c;
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Item.css&action=raw&ctype=text/css");
        --color-buzz: #0075EB;
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Tooltip.css&action=raw&ctype=text/css");
        --color-event: #cc8000;
@import url("https://petitplanet.wiki/index.php?title=MediaWiki:Edittools.css&action=raw&ctype=text/css");
        --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);
    }
}


:root {
/* OS, Auto */
--unknown-img: url("https://petitplanet.wiki/images/d/dd/Unknown.png");
@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 {
body {
     background: var(--background-image) no-repeat fixed center center / cover !important;
    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;
}
}


body, h1, h2, h3, h4 {
.edittools .mw-collapsible-toggle-default span {
     color: var(--page-text-color);
     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);
    }
}
}


.mobileHide, .mobile-only, .no-desktop { display: none; }
.edittools .custom-formatting-code {
    line-height: 125% !important;
    margin: 3px !important;
    background-color: var(--background-color-2) !important;
    border-color: transparent !important;


/* Main page header */
    &:hover {
.mp-header-container {
        border-color: var(--color-progressive) !important;
    background-color: var(--theme-color-1);
     }
     border-radius: 20px;
 
    padding: 1rem;
     & a:hover {
     margin-bottom: 1rem;
         color: var(--color-progressive);
    .skin-theme-clientpref-night & {
        text-decoration: none;
         background-color: var(--theme-color-2);
     }
     }
}
/*==============*
| 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 {
.skin-theme-clientpref-day .mp-header-wordmark img {
    filter: invert(1);
  filter: invert(1) hue-rotate(180deg);
}
 
/* Hide mobile-only things on desktop (overridden in [[MediaWiki:Citizen.css]]) */
.mobileHide,
.mobile-only,
.no-desktop {
    display: none;
}
}


/* Main page cards */
/* Tables */
.mp-card-container {
body:not(.ns-special) .wikitable, .article-table {
     display: flex;
     th {
     flex-wrap: wrap;
        border: none;
     align-items: center;
        background-color: var(--background-color-1b);
    justify-content: center;
        text-align: left;
     gap: 0.5rem;
     }
 
    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;
    }
}
}


.mp-card {
.article-table {
     display: flex;
     th {
    flex-direction: column;
        padding: 0.5em 0.75em;
     align-items: center;
     }
    background-color: var(--theme-color-1);
 
     border-radius: 8px;
     td {
    width: 7rem;
        padding: padding: 0.25em 0.75em;
    height: 8.5rem;
    .skin-theme-clientpref-night & {
        background-color: var(--theme-color-2);
     }
     }
}
}


.mp-card-text {
/* Template data */
    text-align: center;
.mw-templatedata-doc-params caption {
     background: var(--theme-accent-color);
     background: var(--background-color-3);
    border-radius: 6px;
}
    padding: 0 0.25rem;
 
    width: 5.5rem;
.template-documentation-content > section > table > caption > p {
     font-size: min(1em, 16px);
     margin: 12px;
}
}


.mp-card:hover {
.mw-templatedata-doc-params .mw-editsection-bracket {
    background: var(--theme-color-3);
    display: none;
    .mp-card-text {
        background: var(--theme-accent-color);
    }
}
}


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


.mp-card-icon img {
.mw-templatedata-doc-param-alias {
     justify-self: center;
    color: var(--color-base);
     width: 6rem;
    opacity: 0.65;
     height: 6rem;
}
 
/* 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/MediaWiki:Common.css"