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
No edit summary
Added hue-rotate for inverted filter
 
(37 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.
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Stack+Sans+Text:wght@200..700&display=swap');
* 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');


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


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


code {
/* For [[Module:Mbox]] */
     border: none;
.mbox {
     background-color: var(--theme-color-3);
     --type-important: 185, 102, 102;
     border-radius: 5px;
    --type-moderate: 228, 159, 109;
     padding: 2px 5px;
    --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;
}
}


/* Cursor */
/*=======*
* {
| FONTS |
     cursor: url("https://petitplanet.wiki/images/4/4c/Cursor.png") 0 0, default !important;
*=======*/
/* 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;
}
}


*::selection {
/* Body font */
     background-color: var(--theme-accent-color);
body {
     border-radius: 5px;
     font-family: 'Inter', sans-serif;
    color: var(--page-background-color)
     font-optical-sizing: auto;
}
}


body {
/* Headings & page titles */
     background: var(--background-image) no-repeat fixed center center / cover !important;
h1,
h2,
h3,
.mw-page-title-main,
.vector-sticky-header-context-bar-primary {
     font-family: 'PetitPlanet', 'Montserrat', sans-serif !important;
    font-weight: 500, 700;
}
}


body , h1, h2, h3, h4 {
*[lang='ja'],
     color: var(--page-text-color);
*[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;
    }
}
}


.mw-page-container {
/* Language-specific fallbacks */
     background-color: var(--page-background-color) !important;
*[lang='ae'] {
    border-radius: 40px;
     font-family: 'Noto Sans Avestan', sans-serif !important;
    margin-top:20px;
}
}


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


.vector-pinned-container , .vector-sticky-pinned-container {
*[lang='ar'],
     background-color: transparent;
*[lang='fa'] {
     font-family: 'El Messiri', sans-serif !important;
}
}


.vector-sticky-pinned-container::after {
*[lang='he'] {
     background: none !important;
     font-family: 'Noto Sans Hebrew', sans-serif !important;
}
}


a, a:visited , .vector-menu-tabs .mw-list-item a:visited , .vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited, .vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited {
*[lang='ko'] {
     color: var(--theme-link-color);
     font-family: 'Noto Sans KR', sans-serif !important;
}
}


.cdx-radio__input:enabled:checked+.cdx-radio__icon {
*[lang='th'] {
     border-color: var(--theme-link-color);
     font-family: 'Noto Sans', 'Noto Sans Thai', sans-serif !important;
}
}


.cdx-radio__icon {
*[lang='yue'],
     background-color: var(--theme-color-2);
*[lang='zh'],
*[lang='zh-Hans'] {
     font-family: 'Noto Sans SC', sans-serif !important;
}
}


pre {
*[lang='zh-Hant'] {
     border-radius: 10px;
     font-family: 'Noto Sans TC', sans-serif !important;
    border: none;
    background-color: var(--theme-color-1);
    color: var(--theme-color-10)
}
}


#p-search {
/*============*
  display: flex;
| FORMATTING |
  justify-content: center;
*============*/
  align-items: center;
/* 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;
}
}


.cdx-search-input--has-end-button {
.custom-formatting-code:not(.custom-formatting-plain) {
     background-color: transparent !important;
     margin: 0 3px;
    border: none !important;
}
}


.cdx-text-input__input {
.custom-formatting-code { display: inline-block; }
    background-color: var(--page-background-color) !important;
.custom-formatting-code.code-block-table { display: table; }
    border-radius: 20px !important;
 
     border: none;
span.variable { opacity: 0.65; }
     margin-right: 20px !important;
 
span.variable::after {
     opacity: 0.65;
     content: ">";
}
}


.cdx-search-input__input-wrapper {
span.variable::before {
     margin-right: 10px !important;  
     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; }


.cdx-typeahead-search .cdx-button:enabled, .cdx-typeahead-search .cdx-button.cdx-button--fake-button--enabled {
/* For [[MediaWiki:Edittools]] */
     background-color: #FFED76 !important;
.edittools div.mw-collapsible {
    color: var(--page-background-color);
     padding: 0;
     font-family: 'Quicksand' !important;
     display: inline;
    border: none;
    border-radius: 20px;
}
}


.skin-theme-clientpref-day .cdx-typeahead-search .cdx-button:enabled, .skin-theme-clientpref-day .cdx-typeahead-search .cdx-button.cdx-button--fake-button--enabled {
.edittools .mw-collapsible-toggle-default::before,
     color: var(--page-text-color);
.edittools .mw-collapsible-toggle-default::after {
     content:'' !important;
}
}


.vector-icon {
.edittools .mw-collapsible-toggle-default span {
     background-color: #fefdde !important;
     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); 
    }
}
}


#ca-uls span {
.edittools .custom-formatting-code {
     color: #fefdde !important;
     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;
    }
}
}


#pt-userpage-2 a:not(.mw-selflink) {
/*==============*
     color: var(--theme-accent-color) !important;
| CONTENT BODY |
    font-weight: 700;
*==============*/
    margin-right: 5px;
/* Background */
body {
     background: var(--background-image) no-repeat fixed center center / cover !important;
}
}


.catlinks {
/* Wordmark */
    border-radius: 10px;
.mw-logo-wordmark {
    border: none;
     width: initial !important;
    background-color: var(--theme-color-1);
     padding: 10px 20px;
}
}


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


.vector-header-container .vector-sticky-header {
/* Hide mobile-only things on desktop (overridden in [[MediaWiki:Citizen.css]]) */
    margin-top: 20px;
.mobileHide,
    background-color: var(--theme-accent-color) !important;
.mobile-only,
    border-radius: 50px;
.no-desktop {
     width: 80% !important;
     display: none;
    color: var(--page-text-color);
}
}


.skin-theme-clientpref-night .vector-header-container .vector-sticky-header , .skin-theme-clientpref-night .vector-header-container .vector-sticky-header span {
/* Tables */
    color: var(--page-background-color);
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;
    }
}
}


.skin-theme-clientpref-night .vector-header-container .vector-sticky-header .vector-icon , .skin-theme-clientpref-night .vector-header-container .vector-sticky-header button::after , .skin-theme-clientpref-night .vector-header-container .vector-sticky-header label::after {
.article-table {
     background-color: var(--page-background-color) !important;
    th {
        padding: 0.5em 0.75em;
    }
 
    td {
        padding: padding: 0.25em 0.75em;
     }
}
}


#vector-sticky-header {
/* Template data */
     width: 60% !important;
.mw-templatedata-doc-params caption {
     background: var(--background-color-3);
}
}


.vector-page-toolbar-container {
.template-documentation-content > section > table > caption > p {
     box-shadow: none;
     margin: 12px;
}
}


.vector-menu-tabs .mw-list-item.vector-tab-noicon, .vector-page-toolbar-container .vector-dropdown {
.mw-templatedata-doc-params .mw-editsection-bracket {
     margin: 0 5px !important;
     display: none;
}
}


#left-navigation .vector-menu-content-list li a , #p-views .vector-menu-content-list li a {
.mw-templatedata-doc-params .mw-templatedata-caption .mw-editsection-like > a {
     background-color: var(--theme-color-2);
     background: var(--background-color-4);
     padding: 5px 15px;
    color: var(--color-base);
     padding: 5px 10px;
     border-radius: 20px;
     border-radius: 20px;
     border: none;
   
     font-weight: 700;
    &: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: " | ";
}
}


#left-navigation .vector-menu-tabs .mw-list-item.selected a , #p-views .selected a {
/*========*
     background-color: var(--theme-accent-color) !important;
| STYLES |
    color: var(--page-text-color) !important;
*========*/
/* For [[Template:Quote/styles.css]] */
blockquote.pull-quote:has(.pull-quote__source) {
     margin-top: 25px !important;
}
}


.skin-theme-clientpref-night #left-navigation .vector-menu-tabs .mw-list-item.selected a , .skin-theme-clientpref-night #p-views .selected a {
.pull-quote__source {
     color: var(--page-background-color) !important;
     width: fit-content;
}
}
Retrieved from "https://petitplanet.wiki/MediaWiki:Common.css"