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 edit
Reorganised, changed border-color, and added border-color-subtle
mNo edit summary
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* Colors */
/* Colors applied for all skins
.skin-theme-clientpref-night {
* See [[MediaWiki:Vector-2022.css]] for desktop theme related colors.
    --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
* See [[MediaWiki:Citizen.css]] for mobile theme related colors.  
    --page-background-color: #0d0f1e;
*/
    --page-text-color: #fefdde;


    --theme-accent-color: #ffed76;
/* Codex Design tokens */
     --theme-accent-color--rgb: 255, 237, 118;
@media screen {
    --theme-link-color: #51d5e3;
/* Day, Light */
     :root,.skin-invert,.notheme {
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");


    --theme-color-1 : #161826;
        /* Additional colors */
    --theme-color-2 : #1c1e2f;
        --theme-accent-color: #eac863;
    --theme-color-3 : #292b41;
        --theme-accent-color--rgb: 234, 200, 99;
    --theme-color-4 : #2f3148;
        --color-accent: #eac863;
    --theme-color-5 : #33354d;
        --color-accent--rgb: 234, 200, 99;
    --theme-color-6 : #3b3d56;
        --color-accent-text: #5a4a3c;
    --theme-color-7 : #42445d;
        --color-buzz: #0075EB;
    --theme-color-8 : #4b4d66;
        --color-bp: #cc8000;
    --theme-color-9 : #5a5c76;
        --color-menu: #937C6E;
     --theme-color-10: #70728c;
        --color-new: #317e2a;
        --color-old: #932015;
        --color-help: #BB8010;
        --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 */
    html.skin-theme-clientpref-night {
        color-scheme: dark;


    --theme-border-color: #292c41 !important;
        /* Background image */
    --theme-border-color-subtle: #212337 !important;
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
    --theme-page-background-color--secondary: #20242C;
    --theme-page-text-color-inverse: #43403D;


    --group-color: #998a6b;
        /* Additional colors */
    --border-color:#716243;
        --theme-accent-color: #ddbc5b;
    --title-color: #ceb582;
        --theme-accent-color--rgb: 221, 188, 91;
    --subtitle-color: #ceb582;
        --color-accent: #ddbc5b;
   
        --color-accent--rgb: 221, 188, 91;
    --pi-border: #292c41 !important;
        --color-accent-text: #0d0f1e;
    --pi-tabber-bg-color: #353847;
        --color-buzz: #2095EF;
    --pi-tabber-color: #B2B2B4;
        --color-bp: #cc8000;
    --pi-title-bg-color: var(--theme-accent-color);
        --color-menu: #D3BC8E;
    --pi-title-color: var(--theme-page-background-color);
        --color-new: #41be3a;
    --pi-header-bg-color: #21232C;
        --color-old: #ed6d59;
    --pi-header-color: var(--theme-accent-color);
        --color-help: #e0bb00;
    --pi-rows-color: #272935;
        --color-catch: #85cdae;
   
       
    --header-link-border-color-1: #3d285a;
        /* Additional background colors */
    --header-link-border-color-2: #2f295c;
        --background-color-0: #0d0f1e;
    --mobile-lightbox-border-color: var(--theme-border-color);
        --background-color-1: oklch(0.24 0.0278 277.52);
   
        --background-color-2: oklch(0.30 0.0278 277.52);
    --table-ascension-bg-color: #2C2E3A;
        --background-color-3: oklch(0.35 0.0278 277.52);
   
        --background-color-4: oklch(0.40 0.0278 277.52);
    --color-buzz: #2095EF;
        --background-color-5: oklch(0.45 0.0278 277.52);
    --color-bp: #cc8000;
        --background-color-6: oklch(0.50 0.0278 277.52);
    --color-menu: #D3BC8E;
        --background-color-7: oklch(0.55 0.0278 277.52);
    --color-new: #41be3a;
        --background-color-8: oklch(0.60 0.0278 277.52);
    --color-old: #e35045;
        --background-color-9: oklch(0.65 0.0278 277.52);
    --color-help: #e0bb00;
        --background-color-10: oklch(0.70 0.0278 277.52);
   
    }
    --custom-tabs-active-color: var(--page-background-color);
}
}


.skin-theme-clientpref-day {
/* OS, Auto */
    --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");
@media screen and (prefers-color-scheme: dark) {
    --page-background-color: #f6f9dd;
    .skin-theme-clientpref-os {
    --page-text-color: #5a4a3c;
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");


    --theme-accent-color: #eac863;
        /* Additional colors */
    --theme-accent-color--rgb: 234, 200, 99;
        --theme-accent-color: #ddbc5b;
    --theme-link-color: #3893a5;
        --theme-accent-color--rgb: 221, 188, 91;
 
        --color-accent: #ddbc5b;
    --theme-color-1 : #e4e8c3;
        --color-accent--rgb: 221, 188, 91;
    --theme-color-2 : #ebeaca;
        --color-accent-text: #0d0f1e;
    --theme-color-3 : #dad9b5;
        --color-buzz: #2095EF;
    --theme-color-4 : #d0cfa6;
        --color-bp: #cc8000;
    --theme-color-5 : #c2c195;
        --color-menu: #D3BC8E;
    --theme-color-6 : #b8b78a;
        --color-new: #41be3a;
    --theme-color-7 : #a6a575;
        --color-old: #ed6d59;
    --theme-color-8 : #8f8e5c;
        --color-help: #e0bb00;
    --theme-color-9 : #7f7e4d;
        --color-catch: #85cdae;
    --theme-color-10: #55552f;
       
 
        /* Additional background colors */
    --theme-border-color: #cdbaaa !important;
        --background-color-0: #0d0f1e;
    --theme-border-color-subtle: #ddcaba !important;
        --background-color-1: oklch(0.24 0.0278 277.52);
 
        --background-color-2: oklch(0.30 0.0278 277.52);
    --color-buzz: #0075EB;
        --background-color-3: oklch(0.35 0.0278 277.52);
    --color-bp: #cc8000;
        --background-color-4: oklch(0.40 0.0278 277.52);
    --color-menu: #937C6E;
        --background-color-5: oklch(0.45 0.0278 277.52);
    --color-new: #317e2a;
        --background-color-6: oklch(0.50 0.0278 277.52);
    --color-old: #932015;
        --background-color-7: oklch(0.55 0.0278 277.52);
    --color-help: #BB8010;
        --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);
    }
}
}


Line 103: Line 126:
.text-help, .text-help * { color: var(--color-help); }
.text-help, .text-help * { color: var(--color-help); }
.bg-help { background-color: var(--color-help); }
.bg-help { background-color: var(--color-help); }
.text-catch, .text-catch * { color: var(--color-catch); }
.bg-catch { background-color: var(--color-catch); }
Retrieved from "https://petitplanet.wiki/MediaWiki:Colors.css"