MediaWiki:Citizen.css: Difference between revisions

Revision as of 13:53, 21 May 2025

/* All CSS here will be loaded for users of the Citizen skin */
/* Full site CSS */

:root.skin-citizen-dark {
    --color-surface-0: #130c01;
    --color-surface-1: #1a0507;
    --color-surface-2: #260a0c;
    --color-surface-3: #330f12;
    --color-surface-4: #401619;
    
	--color-primary__h: 355;
	--color-primary__s: 69%;
	--color-primary__l: 51%;
	
	--font-family-base: 'Bahnschrift',system-ui,-apple-system,sans-serif;
	
}

:root.skin-citizen-light {
    --color-surface-0: #f2e6e7;
    --color-surface-1: #e5d5d6;
    --color-surface-2: #d9c5c7;
    --color-surface-3: #ccb6b8;
    --color-surface-4: #bfa8aa;
    
	--color-primary__h: 355;
	--color-primary__s: 69%;
	--color-primary__l: 51%;
	
	--font-family-base: 'Bahnschrift',system-ui,-apple-system,sans-serif;
}

/* --- INFOBOXES --- */

/* infobox background (standard & portable) */
.infobox, .portable-infobox {
    background-color: var(--color-surface-2);
    border: 1px solid var(--border-color-base);
    border-radius: 8px;
    padding: 4px;
    color: var(--color-base);
}

/* infobox title (standard & portable) */
.infobox .infobox-above, .infobox .infobox-title, .infobox caption, .pi-title {
    background: none !important;
    font-size: 20px !important;
    font-weight: bold;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 8px;
}

/* infobox images (standard & portable) */
.infobox-image a, .pi-image a {
    border-radius: 6px;
}

.infobox th {
   color: var(--color-emphasized)
}

/* remove border on portable infobox images and other stuff */
.pi-group {
    border: none;
}

/* add spacing below images on portable infoboxes */
.pi-group .pi-image {
    padding-bottom: 5px;
}

@@ Line 1: / Line 1: @@
 /* All CSS here will be loaded for users of the Citizen skin */
 /* Full site CSS */
-:root {
-	--color-surface-0-hsl__h: 41% !important;
+:root.skin-citizen-dark {
-	--color-surface-0-hsl__s: 82% !important;
+    --color-surface-0: #130c01;
-	--color-surface-0-hsl__l: 48% !important;
+    --color-surface-1: #1a0507;
-    --width-layout: 1280px;
+    --color-surface-2: #260a0c;
+    --color-surface-3: #330f12;
+    --color-surface-4: #401619;
+	--color-primary__h: 355;
+	--color-primary__s: 69%;
+	--color-primary__l: 51%;
+	--font-family-base: 'Bahnschrift',system-ui,-apple-system,sans-serif;
+}
+:root.skin-citizen-light {
+    --color-surface-0: #f2e6e7;
+    --color-surface-1: #e5d5d6;
+    --color-surface-2: #d9c5c7;
+    --color-surface-3: #ccb6b8;
+    --color-surface-4: #bfa8aa;
+	--color-primary__h: 355;
+	--color-primary__s: 69%;
+	--color-primary__l: 51%;
+	--font-family-base: 'Bahnschrift',system-ui,-apple-system,sans-serif;
 }