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 10:21, 7 March 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 */
}

/* External link icon */
a.extiw::after {
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.125em;
	content: '';
	background-color: currentcolor;
	-webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYXJpYS1oaWRkZW49InRydWUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+IDxnIGZpbGw9ImN1cnJlbnRDb2xvciI+IDxwYXRoIGQ9Ik0xNyAxN0gzVjNoNVYxSDNhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTVoLTJ6Ii8+IDxwYXRoIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+IDwvZz4gPC9zdmc+)
		no-repeat 50% 50%;
	mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYXJpYS1oaWRkZW49InRydWUiIHZpZXdCb3g9IjAgMCAyMCAyMCI+IDxnIGZpbGw9ImN1cnJlbnRDb2xvciI+IDxwYXRoIGQ9Ik0xNyAxN0gzVjNoNVYxSDNhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTVoLTJ6Ii8+IDxwYXRoIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+IDwvZz4gPC9zdmc+)
		no-repeat 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* 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 */
@media screen {
	/* Hero image */
	.citizen-page-container:before {
		/* FIXME: Optimization needed (WebP, proper sized) */
		background-image: url(/images/Banner2.png);
		background-position: 70% center;
	}

	/* Site header image - positioned above home button with proper visibility */
	.citizen-header::before {
		background-image: url(/images/Artboard_1.png);
		background-position: center left;
		background-size: contain;
		background-repeat: no-repeat;
		opacity: 0.7; /* Increased opacity for visibility */
		z-index: 2; /* Positive z-index to be above other elements */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* Create base pseudo-elements */
.citizen-header:before,
.mw-body::before,
.citizen-body-container::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Setup background container */
.citizen-page-container {
	background-image: none; /* Remove the previous background setup */
	position: relative;
	overflow: hidden;
	min-height: 100vh;
}

/* Properly integrated background with fade - absolute position but fixed attachment */
.citizen-page-container::after {
	content: '';
	position: absolute; /* Not fixed - attached to the container */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* Combine background image and gradient in one declaration */
	background: linear-gradient(to bottom, transparent 40%, rgba(2, 2, 43, 0.3) 70%, rgba(2, 2, 43, 0.8) 100%), url('/images/97kkmoki2rx21.png') 70% center/cover no-repeat;
	background-attachment: fixed; /* Keep fixed behavior */
	z-index: 0; /* Put at normal level in stack, not behind everything */
	pointer-events: none;
}

/* Remove separate gradient overlay */
.citizen-page-container::before {
	display: none;
}

/* Progressive blur effect */
@supports (backdrop-filter: blur(0)) {
	/* Only apply mask effect with backdrop-filter support */
	.citizen-page-container::after {
		mask-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 1) 40%,
			rgba(0, 0, 0, 0.8) 60%,
			rgba(0, 0, 0, 0.6) 70%,
			rgba(0, 0, 0, 0.4) 80%,
			rgba(0, 0, 0, 0.2) 90%,
			rgba(0, 0, 0, 0) 100%
		);
		-webkit-mask-image: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 1) 40%,
			rgba(0, 0, 0, 0.8) 60%,
			rgba(0, 0, 0, 0.6) 70%,
			rgba(0, 0, 0, 0.4) 80%,
			rgba(0, 0, 0, 0.2) 90%,
			rgba(0, 0, 0, 0) 100%
		);
	}
}

/* ==============================
 * 6. CONTENT AREA STYLING
 * ============================== */

/* Glass effect for content area */
.citizen-body {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 10px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.15);
	margin: 0.5rem;
	padding: 1rem;
	position: relative;
	z-index: 1;
}

/* Dark mode glass effect */
.skin-theme-clientpref-night .citizen-body {
	background: rgba(10, 10, 53, 0.35);
	border: 1px solid rgba(100, 100, 255, 0.1);
}

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

/* 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
 * ============================== */

/* Wordmark sizing */
img.mw-logo-wordmark {
	height: 2rem;
}

/* Shift sticky header trigger point */
#citizen-page-header-sticky-sentinel {
	transform: translateY(100px);
}

/* 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);
}

/* Specific social icons */
#n-sidebar-icon-discord a:before {
	background-image: url(https://tolkiengateway.net/w/images/7/77/Discord_-_Simple_Icons.svg);
}

#n-sidebar-icon-bluesky a:before {
	background-image: url(https://tolkiengateway.net/w/images/8/8b/Bluesky_-_Simple_Icons.svg);
}

#n-sidebar-icon-x a:before {
	background-image: url(https://tolkiengateway.net/w/images/2/27/X_-_Simple_Icons.svg);
}

#n-sidebar-icon-facebook a:before {
	background-image: url(https://tolkiengateway.net/w/images/c/c8/Facebook_-_Simple_Icons.svg);
}

#n-sidebar-icon-reddit a:before {
	background-image: url(https://tolkiengateway.net/w/images/e/e8/Reddit_-_Simple_Icons.svg);
}

#n-sidebar-icon-instagram a:before {
	background-image: url(https://tolkiengateway.net/w/images/b/b9/Instagram_-_Simple_Icons.svg);
}

#n-sidebar-icon-youtube a:before {
	background-image: url(https://tolkiengateway.net/w/images/1/1f/YouTube_-_Simple_Icons.svg);
}

/* ==============================
 * 9. PAGE LAYOUTS
 * ============================== */

/* Main page specific layout */
.page-Main_Page .citizen-body-container {
	grid-template-areas:
		'content'
		'header'
		'afterHeader'
		'footer';
}

/* ==============================
 * 10. RESPONSIVE DESIGN
 * ============================== */

/* Small screens (mobile) */
@media screen and (max-width: 1024px) {
	.citizen-page-container::after {
		background-position: 60% center;
	}
}

/* Medium screens */
@media screen and (min-width: 640px) {
	img.mw-logo-wordmark {
		height: 2.5rem;
	}
}

/* External portlet on small screens */
@media screen and (min-width: 32.875rem) {
	.mw-portlet-External {
		grid-column-end: span 2;
	}
}

/* Large screens (desktop) */
@media screen and (min-width: 1120px) {
	:root {
		--tg-inscription-size: 32px;
	}

	/* Header adjustments */
	.citizen-header {
		padding-top: 36px;
	}

	.citizen-header::before {
		background-position: top center;
		mask-image: linear-gradient(rgba(0, 0, 0, 0.2), transparent 64px);
		-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.2), transparent 64px);
	}

	/* Page layout adjustments */
	.citizen-page-header,
	.citizen-body-container {
		padding-left: calc(var(--tg-inscription-size) + var(--padding-page));
	}

	/* Header image visibility on large screens */
	.citizen-header::before {
		background-position: center left; /* Position specifically for larger screens */
		opacity: 0.7;
		z-index: 2; /* Maintain above home button */
		mask-image: none; /* Ensure no mask is hiding it */
		-webkit-mask-image: none;
	}
}

/* Extra large screens */
@media screen and (min-width: 1680px) {
	:root {
		--tg-inscription-size: 3vw;
	}
}
Retrieved from "https://wiki.arcitex.net/index.php?title=MediaWiki:Citizen.css&oldid=753"
Last modified
This page was last edited on 7 March 2025, at 10:21.