MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 17:41, 10 June 2025

/* All CSS here will be loaded for users of the Citizen skin */
/* Customize all background (surface) colors – affects layout backgrounds, modals, dropdowns, etc. */

/* For all themes */
:root {
    --color-surface-0: #f9fdfb; /* Very light greenish white */
    --color-surface-1: #f5fbf8; 
    --color-surface-2: #eef7f3; 
    --color-surface-3: #e5f3ec; 
    --color-surface-4: #ddeee6;
}

/* Light theme overrides */
:root.skin-theme-clientpref-light {
    --color-surface-0: #ffffff; /* Pure white */
    --color-surface-1: #f9fdfb; 
    --color-surface-2: #f1f8f4;
    --color-surface-3: #e9f3ec;
    --color-surface-4: #e1eee6;
}

/* Dark theme overrides – still green-accented but subtle */
:root.skin-theme-clientpref-night {
    --color-surface-0: #1b1f1c;
    --color-surface-1: #232823;
    --color-surface-2: #2c312c;
    --color-surface-3: #354037;
    --color-surface-4: #3d4b41;
}

@@ Line 4: / Line 4: @@
 /* For all themes */
 :root {
-     --color-surface-0: #f5f5f5; /* Site main background */
+     --color-surface-0: #f9fdfb; /* Very light greenish white */
-     --color-surface-1: #fdfdfd; /* Modals, dropdowns, top-level containers */
+     --color-surface-1: #f5fbf8;
-     --color-surface-2: #f0f0f0; /* Nested containers */
+     --color-surface-2: #eef7f3;
-     --color-surface-3: #e8e8e8; /* Cards, tiles, etc. */
+     --color-surface-3: #e5f3ec;
-     --color-surface-4: #e0e0e0; /* Subtle background highlights */
+     --color-surface-4: #ddeee6;
 }
-/* Optional: tweak backgrounds for light theme specifically */
+/* Light theme overrides */
 :root.skin-theme-clientpref-light {
-     --color-surface-0: #ffffff;
+     --color-surface-0: #ffffff; /* Pure white */
-     --color-surface-1: #f9f9f9;
+     --color-surface-1: #f9fdfb;
-     --color-surface-2: #f1f1f1;
+     --color-surface-2: #f1f8f4;
-     --color-surface-3: #eaeaea;
+     --color-surface-3: #e9f3ec;
-     --color-surface-4: #e0e0e0;
+     --color-surface-4: #e1eee6;
 }
-/* Optional: tweak backgrounds for dark theme specifically */
+/* Dark theme overrides – still green-accented but subtle */
 :root.skin-theme-clientpref-night {
-     --color-surface-0: #1e1e1e;
+     --color-surface-0: #1b1f1c;
-     --color-surface-1: #2a2a2a;
+     --color-surface-1: #232823;
-     --color-surface-2: #333;
+     --color-surface-2: #2c312c;
-     --color-surface-3: #3d3d3d;
+     --color-surface-3: #354037;
-     --color-surface-4: #484848;
+     --color-surface-4: #3d4b41;
 }