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 08:41, 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.
/* All CSS here will be loaded for users of the Citizen skin */

/**
 * Background images
 */

@media screen {
	/* Hero image */
	.citizen-page-container:before {
		/* FIXME: Optimization needed (WebP, proper sized) */
		background-image: url(/images/97kkmoki2rx21.png);
		background-position: 70% center;
	}

	/* Site header image */
	.citizen-header:before {
		background-image: url(''); /* Add your space-themed header image here */
	}
}

/* A-Space */
@media screen and (min-width: 1120px) {
	.mw-body::before {
		background-image: url(/w/images/f/f1/Middle_Earth_Map_-_Mapome_-_No_label.svg);
	}
}

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

/** 
 * Theme Variables
 */
:root {
	--font-family-base: 'Afacad-Regular', sans-serif;
	--font-size-base: 1rem;
	--tg-inscription-size: 8px;
	--opacity-icon-base: 0.7; /* Adjust as needed for icon visibility */

	/* General link color */
	--link-color: #f72a57; /* Space theme pink */
}

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

/* Typography and Transitions */
* {
	transition: color 0.3s;
}

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

/* Link Styling - Space Theme */
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 */
}

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

/* Do not invert edit button icon in dark mode because of contrast */
.skin-theme-clientpref-night #ca-edit .citizen-ui-icon::before,
.skin-theme-clientpref-night #ca-ve-edit .citizen-ui-icon::before {
	filter: none;
}

@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: none;
	}
}

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

.plainlinks a {
	&.external {
		&::after {
			display: none;
		}
	}
}

/* Adjust wordmark size */
img.mw-logo-wordmark {
	height: 2rem;
}

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

/**
 * Background image handling
 */
.citizen-page-container,
.citizen-body-container {
	position: relative;
}

.citizen-header:before,
.citizen-page-container::before,
.mw-body::before,
.citizen-body-container::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.citizen-header:before,
.citizen-page-container::before {
	background-repeat: no-repeat;
}

/* Ensure background image is always visible */
.citizen-page-container {
	background-image: linear-gradient(to bottom, rgba(2, 2, 43, 0) 60%, rgba(2, 2, 43, 0.8) 100%), url('/images/97kkmoki2rx21.png');
	background-position: 70% center;
	background-repeat: no-repeat;
	background-size: cover; /* Ensure it covers the container */
}

.mw-body::before,
.citizen-body-container::after {
	background-repeat: repeat-y;
	filter: var(--filter-invert);
}

.citizen-header::before {
	background-position: center left;
	background-size: contain;
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 32px);
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 32px);
}

.citizen-page-container::before {
	height: 200px;
	background-size: cover;
	mask-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 3rem, rgba(0, 0, 0, 0.05) 9rem, transparent 100%);
	-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 3rem, rgba(0, 0, 0, 0.05) 9rem, transparent 100%);
}

.mw-body::before {
	position: fixed; /* Avoid layout shift */
	margin-left: calc(var(--tg-inscription-size) + var(--padding-page));
	opacity: calc(var(--tg-opacity-pattern) * 0.5); /* Since this is behind content, it should be more subtle */
	background-repeat: repeat;
	mask-image: linear-gradient(transparent, #000 480px, #000 calc(100% - 480px), transparent);
	-webkit-mask-image: linear-gradient(transparent, #000 480px, #000 calc(100% - 480px), transparent);
}

.citizen-body-container::after {
	background-size: var(--tg-inscription-size);
	opacity: var(--tg-opacity-pattern);
	mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent);
	-webkit-mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent);
}

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

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

	/* Make space for header background image */
	.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);
	}

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

@media screen and (min-width: 1680px) {
	:root {
		--tg-inscription-size: 3vw;
	}
}

/* Move page header to the bottom for main page */
.page-Main_Page .citizen-body-container {
	grid-template-areas:
		'content'
		'header'
		'afterHeader'
		'footer';
}

@media (hover: hover) {
	/*
     * Search button tooltip
     * This is temporary until tooltip is fully implemented upstream at Citizen
     */
	.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;
	}
}

/*
 * Menu
 * Rich format menu to have more hierarchy
*/
/* Remove bottom spacing as it is handled in footer portlet */
.citizen-drawer__menu {
	margin-bottom: 0;
	padding-bottom: 0;
}

.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;
}

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

.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;
}

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

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

#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);
}

/* Add blurred glass effect for the content area */
.mw-body {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 1rem;
	border-radius: 10px;
	position: relative;
	z-index: 1;
}
Retrieved from "https://wiki.arcitex.net/index.php?title=MediaWiki:Citizen.css&oldid=515"
Last modified
This page was last edited on 7 March 2025, at 08:41.