Toggle search
Toggle menu
7
9
2
533
Aurora Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Citizen.css

MediaWiki interface page
More actions
Revision as of 19:06, 19 July 2025 by Galactica (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 
 * Aurora Space Theme - MediaWiki Citizen Skin
 * Organized CSS structure
 */

/* ==============================
 * 1. FONTS AND BASE SETUP
 * ============================== */

/* Font import */
@font-face {
	font-family: 'Afacad-Regular';
	src: url('/images/fonts/Afacad-Regular.ttf') format('truetype');
}

/* Base theme variables */
:root {
	--font-family-base: 'Afacad-Regular', sans-serif;
	--font-size-base: 1rem;
	--tg-inscription-size: 8px;
	--opacity-icon-base: 0.7;
	--link-color: #f72a57;
}

/* ==============================
 * 2. THEME COLOR VARIABLES
 * ============================== */

/* Light mode styles */
:root.skin-theme-clientpref-light {
	--tg-color-base: #333333;
	--tg-color-emphasized: #0077cc;
	--tg-color-subtle: #777777;
	--tg-color-surface-0: #ffffff;
	--tg-color-surface-1: #f8f9fa;
	--tg-color-surface-2: #eaecf0;
	--tg-color-surface-3: #c8ccd1;
	--tg-color-surface-4: #a2a9b1;
	--tg-border-color-base: rgba(0, 0, 0, 0.05);
	--tg-border-color-subtle: rgba(0, 0, 0, 0.02);
	--tg-border-color-interactive: rgba(0, 0, 0, 0.08);
	--tg-opacity-pattern: 0.1;
	--tg-color-inverted-progressive: #000; /* Ensure contrast */
	--color-primary: #0077cc !important; /* Consistent primary color */
	--color-primary--hover: #0055aa !important;
	--color-primary--active: #003388 !important;
}

/* Dark theme */
:root.skin-theme-clientpref-night {
	--tg-color-base: #e0e0e0;
	--tg-color-emphasized: #66ccff;
	--tg-color-subtle: #999999;
	--tg-color-inverted-progressive: #000;
	--tg-color-surface-0: #02022b; /* Space theme dark blue */
	--tg-color-surface-1: #0a0a35;
	--tg-color-surface-2: #13133e;
	--tg-color-surface-3: #1c1c47;
	--tg-color-surface-4: #252550;
	--tg-color-surface-5: #2e2e59;
	--tg-border-color-base: rgba(255, 255, 255, 0.05);
	--tg-border-color-subtle: rgba(255, 255, 255, 0.02);
	--tg-border-color-interactive: rgba(255, 255, 255, 0.08);
	--tg-opacity-pattern: 0.05;
	--color-primary: #66ccff !important; /* Consistent primary color */
	--color-primary--hover: #44aaff !important;
	--color-primary--active: #2288dd !important;
}

/* Auto theme */
@media screen and (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os {
		--tg-color-base: #e0e0e0;
		--tg-color-emphasized: #66ccff;
		--tg-color-subtle: #999999;
		--tg-border-color-base: rgba(255, 255, 255, 0.05);
		--tg-border-color-subtle: rgba(255, 255, 255, 0.02);
		--tg-border-color-interactive: rgba(255, 255, 255, 0.08);
		--tg-color-base: #e0e0e0;
		--tg-color-emphasized: #66ccff;
		--tg-color-subtle: #999999;
		--tg-color-inverted-progressive: #000;
		--tg-color-surface-0: #02022b; /* Space theme dark blue */
		--tg-color-surface-1: #0a0a35;
		--tg-color-surface-2: #13133e;
		--tg-color-surface-3: #1c1c47;
		--tg-color-surface-4: #252550;
		--tg-color-surface-5: #2e2e59;
		--tg-opacity-pattern: 0.05;
		--color-primary: #66ccff !important; /* Consistent primary color */
		--color-primary--hover: #44aaff !important;
		--color-primary--active: #2288dd !important;
	}
}

/* Black theme */
:root.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 {
	--tg-color-surface-0: #000;
	--tg-color-surface-1: #111;
	--tg-color-surface-2: #222;
	--tg-color-surface-3: #333;
	--tg-color-surface-4: #444;
	--tg-color-surface-5: #555;
	--delta-hover-state: 6%;
	--shadow-strength: 0.04;
}

@media screen and (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 {
		--tg-color-surface-0: #000;
		--tg-color-surface-1: #111;
		--tg-color-surface-2: #222;
		--tg-color-surface-3: #333;
		--tg-color-surface-4: #444;
		--tg-color-surface-5: #555;
		--delta-hover-state: 6%;
		--shadow-strength: 0.04;
	}
}

/* ==============================
 * 3. TYPOGRAPHY & TEXT STYLES
 * ============================== */

/* Base typography settings */
* {
	transition: color 0.3s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tg-font-family-heading);
}

/* Theme-specific content styling */
.skin-theme-clientpref-night blockquote p {
	color: #bbbbbb;
}

.skin-theme-clientpref-light blockquote p {
	color: #555555;
}

.skin-theme-clientpref-night figure.mw-default-size figcaption {
	color: #cccccc;
}

.skin-theme-clientpref-light figure.mw-default-size figcaption {
	color: #aaaaaa;
}

@media screen and (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os figure.mw-default-size figcaption {
		color: #cccccc;
	}
}

/* Keep content area text readable with shadow */
.citizen-body p,
.citizen-body li,
.citizen-body h1,
.citizen-body h2,
.citizen-body h3,
.citizen-body h4,
.citizen-body h5,
.citizen-body h6 {
	color: var(--tg-color-base);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ==============================
 * 4. LINK STYLING
 * ============================== */

/* Base link styling */
a {
	color: var(--link-color);
	transition: color 0.3s;
}

a:visited {
	color: var(--link-color);
}

a:hover {
	color: var(--link-color);
}

a:active {
	color: var(--link-color);
}

a.new {
	color: #6a38b3 !important; /* Purple for new pages */
}

/* Don't show external link icon in plainlinks */
.plainlinks a.external::after {
	display: none;
}

/* ==============================
 * 5. BACKGROUND & CONTAINER STYLING
 * ============================== */

/* Base container structure */
.citizen-page-container,
.citizen-body-container {
	position: relative;
}

/* Background image handling - SIMPLIFIED APPROACH */
@media screen {
	/* Site header image - FIXED POSITION AT TOP LEFT */
	.citizen-header::before {
		content: '';
		background-image: url(/images/Artboard_1.png);
		background-position: top left; /* Position at top left corner */
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		width: 200px; /* Set specific width to avoid stretching */
		height: 100%;
		opacity: 0.8;
		z-index: 2;
		pointer-events: none;
	}
}

/* Setup main background container */
.citizen-page-container {
	background: none; /* Remove any default background */
	position: relative;
	min-height: 100vh;
	overflow-x: hidden; /* Prevent horizontal scroll */
}

/* COMPLETE BACKGROUND IMAGE REWRITE */
.citizen-page-container::before {
	content: '';
	position: fixed; /* Fix to viewport */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* Background with gradient explicitly at bottom */
	background: url('/images/97kkmoki2rx21.png') center/cover no-repeat fixed;
	z-index: -1;
	pointer-events: none;
}

/* Separate gradient overlay on top of background */
.citizen-page-container::after {
	content: '';
	position: fixed; /* Fixed to viewport */
	left: 0;
	right: 0;
	bottom: 0; /* Position at bottom */
	height: 50vh; /* Take up bottom half of viewport */
	background: linear-gradient(to bottom, transparent, rgba(2, 2, 43, 0.8) 100%);
	z-index: -1;
	pointer-events: none;
}

/* THEME-SPECIFIC ADJUSTMENTS */
/* Light mode fixes */
.skin-theme-clientpref-light .citizen-body {
	background: rgba(255, 255, 255, 0.35); /* Increased opacity for light mode */
	border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Dark mode glass effect */
.skin-theme-clientpref-night .citizen-body {
	background: rgba(10, 10, 53, 0.5); /* Increased opacity for dark mode */
	border: 1px solid rgba(100, 100, 255, 0.15);
}

/* Auto theme glass effect consistency */
@media screen and (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os .citizen-body {
		background: rgba(10, 10, 53, 0.5);
		border: 1px solid rgba(100, 100, 255, 0.15);
	}
}

@media screen and (prefers-color-scheme: light) {
	:root.skin-theme-clientpref-os .citizen-body {
		background: rgba(255, 255, 255, 0.35);
		border: 1px solid rgba(255, 255, 255, 0.25);
	}
}

/* Reset inner elements */
.mw-body,
.citizen-body__sidebar {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	border: none;
	margin: 0;
	padding: 0;
}

/* ==============================
 * 7. HEADER & NAVIGATION
 * ============================== */

/* Edit button icons in dark mode */
.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before,
.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before {
	filter: brightness(2); /* Make icons light in dark mode */
	opacity: 1;
}

@media screen and (prefers-color-scheme: dark) {
	.skin-theme-clientpref-os #ca-edit .citizen-ui-icon::before,
	.skin-theme-clientpref-os #ca-ve-edit .citizen-ui-icon::before {
		filter: brightness(2); /* Make icons light in dark mode */
		opacity: 1;
	}
}

/* Ensure edit buttons are the same height */
#ca-edit,
#ca-ve-edit {
	height: 2.5rem !important; /* Force consistent height */
	min-width: 2.5rem !important; /* Force consistent width */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* Make sure the icons inside buttons align properly */
#ca-edit .citizen-ui-icon,
#ca-ve-edit .citizen-ui-icon {
	height: 1.5rem !important;
	width: 1.5rem !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

#ca-edit .citizen-ui-icon::before,
#ca-ve-edit .citizen-ui-icon::before {
	height: 100% !important;
	width: 100% !important;
}

/* Fix icons in both light and dark mode */
/* Light mode icons (dark appearance) */
.skin-theme-clientpref-light #ca-edit .citizen-ui-icon::before,
.skin-theme-clientpref-light #ca-ve-edit .citizen-ui-icon::before {
	filter: none; /* No filter in light mode - icons are naturally dark */
	opacity: 0.8;
}

/* Dark mode icons (light appearance) */
.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before,
.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before {
	filter: invert(1); /* Proper inversion for dark mode - guaranteed white */
	opacity: 1;
}

/* Auto theme respecting OS preference */
@media screen and (prefers-color-scheme: light) {
	.skin-theme-clientpref-os #ca-edit .citizen-ui-icon::before,
	.skin-theme-clientpref-os #ca-ve-edit .citizen-ui-icon::before {
		filter: none;
		opacity: 0.8;
	}
}

@media screen and (prefers-color-scheme: dark) {
	.skin-theme-clientpref-os #ca-edit .citizen-ui-icon::before,
	.skin-theme-clientpref-os #ca-ve-edit .citizen-ui-icon::before {
		filter: invert(1);
		opacity: 1;
	}
}

/* Search tooltip */
@media (hover: hover) {
	.citizen-search .citizen-dropdown-details:not([open]) > .citizen-dropdown-summary:hover::after {
		content: '/';
		position: absolute;
		border: 1px solid var(--border-color-interactive);
		border-radius: var(--border-radius--small);
		min-width: var(--size-icon);
		min-height: var(--size-icon);
		padding: 0 var(--space-xxs);
		background: var(--color-surface-1);
		font-size: 0.65rem;
		font-weight: var(--font-weight-medium);
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ==============================
 * 8. MENU & SIDEBAR STYLING
 * ============================== */

/* Drawer menu */
.citizen-drawer__menu {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* External links portlet */
.mw-portlet-External {
	position: sticky;
	bottom: 0;
	margin-top: var(--space-md);
	padding: var(--space-xs) 0;
	border-top: 1px solid var(--border-color-base);
	background: var(--color-surface-1);
	font-size: var(--font-size-x-small);
	grid-column-start: 1;
	white-space: nowrap;
}

.mw-portlet-External .citizen-menu__heading {
	display: none;
}

.mw-portlet-External ul {
	display: flex;
	overflow: auto;
}

.mw-portlet-External .mw-list-item a {
	gap: 0;
}

/* Sidebar labels */
.citizen-drawer__menu [id^='n-sidebar-label-'] a {
	pointer-events: none;
	margin-left: var(--space-xs);
	padding-left: var(--space-md);
	padding-right: var(--space-xs);
	border-left: 1px solid var(--border-color-base);
	border-radius: 0;
	letter-spacing: 0.05em;
	font-weight: var(--font-weight-normal);
	color: var(--color-base--subtle) !important;
}

/* Sidebar icons */
.citizen-drawer__menu [id^='n-sidebar-icon-'] a {
	font-size: 0;
	content-visibility: auto;
}

.citizen-drawer__menu [id^='n-sidebar-icon-'] a:before {
	display: block;
	content: '';
	width: var(--size-icon);
	height: var(--size-icon);
	background: transparent center/contain no-repeat;
	opacity: var(--opacity-icon-base);
	filter: var(--filter-invert);
}

/* Main page specific layout */
.page-Main_Page .citizen-body-container {
	grid-template-areas:
		'content'
		'header'
		'afterHeader'
		'footer';
}
Retrieved from "https://wiki.arcitex.net/index.php?title=MediaWiki:Citizen.css&oldid=761"
Last modified
This page was last edited on 19 July 2025, at 19:06.