Toggle search
Toggle menu
656
692
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 edit
Changed to root definitions
mNo edit summary
 
(4 intermediate revisions by the same user not shown)
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-accent-text: #5a4a3c;
        --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: #f6f9dd;
        --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;
        /* Additional colors */
         --theme-accent-color--rgb: 255, 237, 118;
         --theme-accent-color: #ddbc5b;
         --color-progressive: #51d5e3 !important;
         --theme-accent-color--rgb: 221, 188, 91;
         --color-progressive--hover: #8ce4ed !important;
        --color-accent: #ddbc5b;
 
        --color-accent--rgb: 221, 188, 91;
         --background-color-0: var(--background-color-base);
        --color-accent-text: #0d0f1e;
         --background-color-1: oklch(0.25 0.0278 277.52);
        --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: #0d0f1e;
         --background-color-1: oklch(0.24 0.0278 277.52);
         --background-color-2: oklch(0.30 0.0278 277.52);
         --background-color-2: oklch(0.30 0.0278 277.52);
         --background-color-3: oklch(0.35 0.0278 277.52);
         --background-color-3: oklch(0.35 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-accent-text: #0d0f1e;
         --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 */
    }
         --background-color-0: #0d0f1e;
}
         --background-color-1: oklch(0.24 0.0278 277.52);
 
/* 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-1: oklch(0.25 0.0278 277.52);
         --background-color-2: oklch(0.30 0.0278 277.52);
         --background-color-2: oklch(0.30 0.0278 277.52);
         --background-color-3: oklch(0.35 0.0278 277.52);
         --background-color-3: oklch(0.35 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"