Toggle search
Toggle menu
642
657
30
4.4K
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:Colors.css: Difference between revisions

MediaWiki interface page
More actions
Browse history interactively
← Older editNewer edit →
mNo edit summary
Moved Vector-2022 specific styles to MediaWiki:Vector-2022.css
Line 1: Line 1:
/* Colors */
/* Colors applied for all skins
* See [[MediaWiki:Vector-2022.css]] for desktop theme related colors.
* See [[MediaWiki:Citizen.css]] for mobile theme related colors.
*/
 
/* Codex Design tokens */
@media screen {
@media screen {
/* Day, Light */
/* Day, Light */
     :root,.skin-invert,.notheme {
     :root,.skin-invert,.notheme {
        /* Background image */
         --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");
         --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");
        --background-color-base: #f6f9dd !important;
        --color-base: #5a4a3c !important;


        /* Additional colors */
         --theme-accent-color: #eac863;
         --theme-accent-color: #eac863;
         --theme-accent-color--rgb: 234, 200, 99;
         --theme-accent-color--rgb: 234, 200, 99;
         --color-progressive: #3893a5 !important;
         --color-accent: #eac863;
         --color-progressive--hover: #246d7b !important;
         --color-accent--rgb: 234, 200, 99;
 
         --color-acccent-text: var(--background-color-base);
         --background-color-0: var(--background-color-base);
        --background-color-1: oklch(0.94 0.04 107.5);
        --background-color-2: oklch(0.92 0.045 105);
        --background-color-3: oklch(0.87 0.045 105);
        --background-color-4: oklch(0.82 0.045 105);
        --background-color-5: oklch(0.77 0.045 105);
        --background-color-6: oklch(0.72 0.045 105);
        --background-color-7: oklch(0.67 0.045 105);
        --background-color-8: oklch(0.62 0.045 105);
        --background-color-9: oklch(0.57 0.045 105);
        --background-color-10: oklch(0.52 0.045 105);
 
        --border-color-base: #cdbaaa !important;
        --border-color-subtle: #ddcaba !important;
 
         --color-buzz: #0075EB;
         --color-buzz: #0075EB;
         --color-bp: #cc8000;
         --color-bp: #cc8000;
Line 33: Line 23:
         --color-old: #932015;
         --color-old: #932015;
         --color-help: #BB8010;
         --color-help: #BB8010;
         --color-catch: #68b996;
         --color-catch: #17744b;
       
        /* Additional background colors */
        --background-color-0: var(--background-color-base);
        --background-color-1: oklch(0.94 0.04 107.5);
        --background-color-2: oklch(0.90 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);
     }
     }
      
      
     /* Night, Dark */
     /* Night, Dark */
     html.skin-theme-clientpref-night {
     html.skin-theme-clientpref-night {
        color-scheme: dark;
        /* Background image */
         --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
         --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
        --background-color-base: #0d0f1e !important;
        --color-base: #fefdde !important;
        --theme-accent-color: #ffed76;
        --theme-accent-color--rgb: 255, 237, 118;
        --color-progressive: #51d5e3 !important;
        --color-progressive--hover: #8ce4ed !important;


        /* Additional colors */
        --theme-accent-color: #ddbc5b;
        --theme-accent-color--rgb: 221, 188, 91;
        --color-accent: #ddbc5b;
        --color-accent--rgb: 221, 188, 91;
        --color-acccent-text: var(--background-color-base);
        --color-buzz: #2095EF;
        --color-bp: #cc8000;
        --color-menu: #D3BC8E;
        --color-new: #41be3a;
        --color-old: #ed6d59;
        --color-help: #e0bb00;
        --color-catch: #85cdae;
       
        /* Additional background colors */
         --background-color-0: var(--background-color-base);
         --background-color-0: var(--background-color-base);
         --background-color-1: oklch(0.24 0.0278 277.52);
         --background-color-1: oklch(0.24 0.0278 277.52);
Line 58: Line 71:
         --background-color-9: oklch(0.65 0.0278 277.52);
         --background-color-9: oklch(0.65 0.0278 277.52);
         --background-color-10: oklch(0.70 0.0278 277.52);
         --background-color-10: oklch(0.70 0.0278 277.52);
    }
}


        --border-color-base: #292c41 !important;
/* OS, Auto */
        --border-color-subtle: #212337 !important;
@media screen and (prefers-color-scheme: dark) {
        --theme-page-background-color--secondary: #20242C;
    .skin-theme-clientpref-os {
        --theme-page-text-color-inverse: #43403D;
         /* Background image */
 
         --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
        --group-color: #998a6b;
        --border-color: #716243;
        --title-color: #ceb582;
        --subtitle-color: #ceb582;
 
        --pi-border: #292c41 !important;
         --pi-tabber-bg-color: #353847;
        --pi-tabber-color: #B2B2B4;
        --pi-title-bg-color: var(--theme-accent-color);
         --pi-title-color: var(--theme-page-background-color);
        --pi-header-bg-color: #21232C;
        --pi-header-color: var(--theme-accent-color);
        --pi-rows-color: #272935;
 
        --header-link-border-color-1: #3d285a;
        --header-link-border-color-2: #2f295c;
        --mobile-lightbox-border-color: var(--theme-border-color);
 
        --table-ascension-bg-color: #2C2E3A;


        /* Additional colors */
        --theme-accent-color: #ddbc5b;
        --theme-accent-color--rgb: 221, 188, 91;
        --color-accent: #ddbc5b;
        --color-accent--rgb: 221, 188, 91;
        --color-acccent-text: var(--background-color-base);
         --color-buzz: #2095EF;
         --color-buzz: #2095EF;
         --color-bp: #cc8000;
         --color-bp: #cc8000;
         --color-menu: #D3BC8E;
         --color-menu: #D3BC8E;
         --color-new: #41be3a;
         --color-new: #41be3a;
         --color-old: #e35045;
         --color-old: #ed6d59;
         --color-help: #e0bb00;
         --color-help: #e0bb00;
         --color-catch: #85cdae;
         --color-catch: #85cdae;
 
       
         --custom-tabs-active-color: var(--page-background-color);
         /* Additional background colors */
    }
}
 
/* OS, Auto */
@media screen and (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os {
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
        --background-color-base: #0d0f1e !important;
        --color-base: #fefdde !important;
 
        --theme-accent-color: #ffed76;
        --theme-accent-color--rgb: 255, 237, 118;
        --color-progressive: #51d5e3 !important;
        --color-progressive--hover: #8ce4ed !important;
 
         --background-color-0: var(--background-color-base);
         --background-color-0: var(--background-color-base);
         --background-color-1: oklch(0.24 0.0278 277.52);
         --background-color-1: oklch(0.24 0.0278 277.52);
Line 119: Line 106:
         --background-color-9: oklch(0.65 0.0278 277.52);
         --background-color-9: oklch(0.65 0.0278 277.52);
         --background-color-10: oklch(0.70 0.0278 277.52);
         --background-color-10: oklch(0.70 0.0278 277.52);
        --border-color-base: #292c41 !important;
        --border-color-subtle: #212337 !important;
        --theme-page-background-color--secondary: #20242C;
        --theme-page-text-color-inverse: #43403D;
        --group-color: #998a6b;
        --border-color: #716243;
        --title-color: #ceb582;
        --subtitle-color: #ceb582;
        --pi-border: #292c41 !important;
        --pi-tabber-bg-color: #353847;
        --pi-tabber-color: #B2B2B4;
        --pi-title-bg-color: var(--theme-accent-color);
        --pi-title-color: var(--theme-page-background-color);
        --pi-header-bg-color: #21232C;
        --pi-header-color: var(--theme-accent-color);
        --pi-rows-color: #272935;
        --header-link-border-color-1: #3d285a;
        --header-link-border-color-2: #2f295c;
        --mobile-lightbox-border-color: var(--theme-border-color);
        --table-ascension-bg-color: #2C2E3A;
        --color-buzz: #2095EF;
        --color-bp: #cc8000;
        --color-menu: #D3BC8E;
        --color-new: #41be3a;
        --color-old: #e35045;
        --color-help: #e0bb00;
        --color-catch: #85cdae;
        --custom-tabs-active-color: var(--page-background-color);
     }
     }
}
}
Retrieved from "https://petitplanet.wiki/MediaWiki:Colors.css"