Toggle menu
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
Probably to touch up at some point
 
mNo edit summary
 
(16 intermediate revisions by 2 users 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.
*/


.skin-theme-clientpref-night {
/* Codex Design tokens */
    --page-background-color: #0d0f1e;  
@media screen {
/* Day, Light */
    :root,.skin-invert,.notheme {
        /* Background image */
        --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");
 
        /* Additional colors */
        --theme-accent-color: #eac863;
        --theme-accent-color--rgb: 234, 200, 99;
        --color-accent: #eac863;
        --color-accent--rgb: 234, 200, 99;
        --color-accent-text: #5a4a3c;
        --color-buzz: #0075EB;
        --color-bp: #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-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);
    }
      
      
     --background-image: url("https://cdn.discordapp.com/attachments/1437117639037292644/1437124925944234056/Background.jpg?ex=69121a62&is=6910c8e2&hm=f2b1ad230001e7722058f377e1abe2ffce9dc2ee2bf735f826b4232f9530efa2");  
     /* Night, Dark */
   
    html.skin-theme-clientpref-night {
    --theme-accent-color: #ffed76;
        color-scheme: dark;
    --theme-link-color: var(--theme-accent-color);
 
   
        /* Background image */
    --theme-accent-color--rgba: 228, 193, 121;
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
    --page-text-color: #FFFFFF;
 
    --theme-page-text-color-inverse: #43403D;
        /* Additional colors */
    --theme-border-color: #4C5067 !important;
        --theme-accent-color: #ddbc5b;
    --theme-page-background-color--secondary: #20242C;
        --theme-accent-color--rgb: 221, 188, 91;
   
        --color-accent: #ddbc5b;
    --group-color: #998a6b;
        --color-accent--rgb: 221, 188, 91;
    --border-color:#716243;
        --color-accent-text: #0d0f1e;
    --title-color: #ceb582;
        --color-buzz: #2095EF;
    --subtitle-color:#ceb582;
        --color-bp: #cc8000;
   
        --color-menu: #D3BC8E;
    --pi-border: #4C5067 !important;
        --color-new: #41be3a;
    --pi-tabber-bg-color: #353847;
        --color-old: #ed6d59;
    --pi-tabber-color: #B2B2B4;
        --color-help: #e0bb00;
    --pi-title-bg-color: var(--theme-accent-color);
        --color-catch: #85cdae;
    --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;
   
    --theme-color-1 : #161826;
    --theme-color-2 : #1c1e2f;
    --theme-color-3 : #292b41;
    --theme-color-4 : #2f3148;
    --theme-color-5 : #33354d;
    --theme-color-6 : #3b3d56;
    --theme-color-7 : #42445d;
    --theme-color-8 : #4b4d66;
    --theme-color-9 : #5a5c76;
    --theme-color-10: #70728c;
   
   
    --color-buzz: #2095EF;
    --color-bp: #cc8000;
    --color-menu: #D3BC8E;
    --color-new: #41be3a;
    --color-old: #e35045;
    --color-help: #e0bb00;
   
    --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);
        --background-color-2: oklch(0.30 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);
    }
}
}


.skin-theme-clientpref-day {
/* OS, Auto */
    --page-background-color: #f6f9dd;
@media screen and (prefers-color-scheme: dark) {
    --background-image: url("https://cdn.discordapp.com/attachments/902208367748071537/1437127738132791479/BG_Light.jpg?ex=69121d01&is=6910cb81&hm=1df56a5e3289c73cf6905f3bce93b569c7551b277f847c40161b3f2ab90fdb75");
    .skin-theme-clientpref-os {
   
        /* Background image */
    --theme-accent-color: #eac863;
        --background-image: url("https://petitplanet.wiki/images/b/b4/Background_Dark.jpg");
    --theme-link-color: #3893a5;
 
   
        /* Additional colors */
    --theme-color-1 : #ebeed0;
        --theme-accent-color: #ddbc5b;
    --theme-color-2 : #ebeaca;
        --theme-accent-color--rgb: 221, 188, 91;
    --theme-color-3 : #dad9b5;
        --color-accent: #ddbc5b;
    --theme-color-4 : #d0cfa6;
        --color-accent--rgb: 221, 188, 91;
    --theme-color-5 : #c2c195;
        --color-accent-text: #0d0f1e;
    --theme-color-6 : #b8b78a;
        --color-buzz: #2095EF;
    --theme-color-7 : #a6a575;
        --color-bp: #cc8000;
    --theme-color-8 : #8f8e5c;
        --color-menu: #D3BC8E;
    --theme-color-9 : #7f7e4d;
        --color-new: #41be3a;
    --theme-color-10: #55552f;
        --color-old: #ed6d59;
 
        --color-help: #e0bb00;
   
        --color-catch: #85cdae;
    --page-text-color: #5a4a3c;
       
   
        /* Additional background colors */
   
        --background-color-0: #0d0f1e;
    --color-buzz: #0075EB;
        --background-color-1: oklch(0.24 0.0278 277.52);
    --color-bp: #cc8000;
        --background-color-2: oklch(0.30 0.0278 277.52);
    --color-menu: #937C6E;
        --background-color-3: oklch(0.35 0.0278 277.52);
    --color-new: #317e2a;
        --background-color-4: oklch(0.40 0.0278 277.52);
    --color-old: #932015;
        --background-color-5: oklch(0.45 0.0278 277.52);
    --color-help: #BB8010;
        --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);
    }
}
}


.text-buzz, .text-buzz * { color: var(--color-buzz); }
.text-buzz, .text-buzz * { color: var(--color-buzz); }
Line 107: 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); }