MediaWiki:Colors.css: Difference between revisions

Browse history interactively

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
+/* Colors */
+/* Night, Dark */
+.skin-theme-clientpref-night {
+    --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-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);
+    --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);
+}
+/* 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-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);
+        --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);
+    }
+}
+/* Day, Light */
+.skin-theme-clientpref-day {
+    --background-image: url("https://petitplanet.wiki/images/c/c3/Background_Light.jpg");
+    --background-color-base: #f6f9dd !important;
+    --color-base: #5a4a3c !important;
+    --theme-accent-color: #eac863;
+    --theme-accent-color--rgb: 234, 200, 99;
+    --color-progressive: #3893a5 !important;
+    --color-progressive--hover: #246d7b !important;
+    --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-bp: #cc8000;
+    --color-menu: #937C6E;
+    --color-new: #317e2a;
+    --color-old: #932015;
+    --color-help: #BB8010;
+    --color-catch: #68b996;
+}
+.text-buzz, .text-buzz * { color: var(--color-buzz); }
+.bg-buzz { background-color: var(--color-buzz); }
+.text-bp, .text-bp * { color: var(--color-bp); }
+.bg-bp { background-color: var(--color-bp); }
+.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); }