|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Colors applied for all skins | | /* See [[MediaWiki:Common.css]] for CSS variable definitions. */ |
| * See [[MediaWiki:Vector-2022.css]] for desktop theme related colors.
| |
| * See [[MediaWiki:Citizen.css]] for mobile theme related colors.
| |
| */
| |
| | |
| /* Codex Design tokens */
| |
| @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);
| |
| }
| |
|
| |
| /* 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 */
| |
| --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-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-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);
| |
| }
| |
| }
| |
| | |
| /* 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 */
| |
| --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-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-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);
| |
| }
| |
| }
| |
| | |
| .text-buzz, .text-buzz * { color: var(--color-buzz); } | | .text-buzz, .text-buzz * { color: var(--color-buzz); } |
| .bg-buzz { background-color: var(--color-buzz); } | | .bg-buzz { background-color: var(--color-buzz); } |
|
| |
|
| .text-bp, .text-bp * { color: var(--color-bp); } | | .text-event, .text-event * { color: var(--color-event); } |
| .bg-bp { background-color: var(--color-bp); } | | .bg-event { background-color: var(--color-event); } |
|
| |
|
| .text-menu, .text-menu * { color: var(--color-menu); } | | .text-menu, .text-menu * { color: var(--color-menu); } |
/* See [[MediaWiki:Common.css]] for CSS variable definitions. */
.text-buzz, .text-buzz * { color: var(--color-buzz); }
.bg-buzz { background-color: var(--color-buzz); }
.text-event, .text-event * { color: var(--color-event); }
.bg-event { background-color: var(--color-event); }
.text-menu, .text-menu * { color: var(--color-menu); }
.bg-menu { background-color: var(--color-menu); }
.text-new, .text-new * { color: var(--color-new); }
.bg-new { background-color: var(--color-new); }
.text-old, .text-old * { color: var(--color-old); }
.bg-old { background-color: var(--color-old); }
.text-help, .text-help * { 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); }
