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:25, 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 {
		/* Add a subtle cosmic effect to the background */
		background-image: url('');
		background-position: 70% center;
		box-shadow: inset 0 0 100px rgba(25, 40, 120, 0.2);
	}

	/* 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('/images/97kkmoki2rx21.png');
	}
}

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

	/* Base theme variables - these will be overridden by light/dark mode */
	--tg-color-base: #e4ddcf;
	--tg-color-emphasized: #fbf8f1;
	--tg-color-subtle: #e3d2b0;
	--tg-color-surface-0: var(--tg-color-surface-0);
	--tg-color-surface-1: var(--tg-color-surface-1);
	--tg-color-surface-2: var(--tg-color-surface-2);
	--tg-color-surface-3: var(--tg-color-surface-3);
	--tg-color-surface-4: var(--tg-color-surface-4);

	--color-surface-0: var(--tg-color-surface-0) !important;
	--color-surface-1: var(--tg-color-surface-1) !important;
	--color-surface-2: var(--tg-color-surface-2) !important;
	--color-surface-3: var(--tg-color-surface-3) !important;
	--color-surface-4: var(--tg-color-surface-4) !important;
	--color-base: var(--tg-color-base) !important;
	--color-base--emphasized: var(--tg-color-emphasized) !important;
	--color-base--subtle: var(--tg-color-subtle) !important;

	--color-primary__h: 84.55;
	--color-primary__s: 69%;
	--color-primary__l: 28%;
	--color-primary: var(--tg-color-progressive) !important;
	--color-primary--hover: var(--tg-color-progressive--hover) !important;
	--color-primary--active: var(--tg-color-progressive--active) !important;
	--color-inverted-primary: var(--tg-color-inverted-progressive);
}

/* Light mode styles - Space Theme Improvements */
:root.skin-theme-clientpref-light {
	--tg-color-surface-0: #f2f5ff;
	--tg-color-surface-1: #e6eafd;
	--tg-color-surface-2: #d9defa;
	--tg-color-surface-3: #c8d0f5;
	--tg-color-surface-4: #bbc6f0;
	--tg-color-surface-5: #a7b4eb;
	--tg-color-base: #292959;
	--tg-color-emphasized: #0b3b78;
	--tg-color-subtle: #4f5987;
	--tg-color-inverted-progressive: #f8f9ff;
	--tg-border-color-base: rgba(25, 40, 100, 0.1);
	--tg-border-color-subtle: rgba(25, 40, 100, 0.05);
	--tg-border-color-interactive: rgba(25, 40, 100, 0.15);
	--tg-color-progressive: #3742b3;
	--tg-color-progressive--hover: #4e59d5;
	--tg-color-progressive--active: #2e3a96;
	--tg-opacity-pattern: 0.06;
}

/* Dark theme */
:root.skin-theme-clientpref-night {
	--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-color-progressive: #f1c45e;
	--tg-color-progressive--hover: #ffd16b;
	--tg-color-progressive--active: #e4b750;
	--tg-opacity-pattern: 0.05;

	--color-primary__h: 41.6;
	--color-primary__s: 84%;
	--color-primary__l: 65.7%;

	/* These are new/modified variables for better space theme consistency */
	--tg-color-destructive: #ff3366;
	--tg-color-destructive--hover: #ff5c85;
	--tg-color-destructive--active: #e51a4c;
	--tg-color-warning: #ff9500;
	--tg-color-warning--hover: #ffaa33;
	--tg-color-warning--active: #e68600;
}

/* 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-color-progressive: #f1c45e;
		--tg-color-progressive--hover: #ffd16b;
		--tg-color-progressive--active: #e4b750;
		--tg-opacity-pattern: 0.05;

		--color-primary__h: 41.6;
		--color-primary__s: 84%;
		--color-primary__l: 65.7%;

		/* These are new/modified variables for better space theme consistency */
		--tg-color-destructive: #ff3366;
		--tg-color-destructive--hover: #ff5c85;
		--tg-color-destructive--active: #e51a4c;
		--tg-color-warning: #ff9500;
		--tg-color-warning--hover: #ffaa33;
		--tg-color-warning--active: #e68600;
	}
}

/* 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 - Enhanced */
a {
	color: #f72a57; /* Space theme pink */
	transition: color 0.3s, background-color 0.3s;
}

a:visited {
	color: #d61546; /* Slightly darker pink for visited */
}

a:hover {
	color: #ff5c85; /* Lighter pink for hover */
}

a:active {
	color: #e51a4c; /* Slightly darker for active */
}

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

/* Interface buttons and controls - Space theme */
.citizen-button,
.oo-ui-buttonElement-button,
.mw-ui-button {
	border-color: var(--tg-border-color-base);
	background-color: var(--tg-color-surface-1);
	color: var(--tg-color-base);
}

.citizen-button:hover,
.oo-ui-buttonElement-button:hover,
.mw-ui-button:hover {
	border-color: var(--tg-border-color-interactive);
	background-color: var(--tg-color-surface-2);
}

/* Primary actions */
.citizen-button--primary,
.oo-ui-buttonElement-button.oo-ui-flaggedElement-primary,
.mw-ui-button.mw-ui-primary {
	border-color: var(--tg-color-progressive);
	background-color: var(--tg-color-progressive);
	color: var(--tg-color-inverted-progressive);
}

.citizen-button--primary:hover,
.oo-ui-buttonElement-button.oo-ui-flaggedElement-primary:hover,
.mw-ui-button.mw-ui-primary:hover {
	background-color: var(--tg-color-progressive--hover);
	border-color: var(--tg-color-progressive--hover);
}

/* Destructive actions */
.citizen-button--destructive,
.oo-ui-buttonElement-button.oo-ui-flaggedElement-destructive,
.mw-ui-button.mw-ui-destructive {
	border-color: var(--tg-color-destructive);
	background-color: var(--tg-color-destructive);
	color: #fff;
}

.citizen-button--destructive:hover,
.oo-ui-buttonElement-button.oo-ui-flaggedElement-destructive:hover,
.mw-ui-button.mw-ui-destructive:hover {
	background-color: var(--tg-color-destructive--hover);
	border-color: var(--tg-color-destructive--hover);
}

/* Edit button styling */
.citizen-ui-icon:before {
	filter: var(--filter-invert);
}

#ca-edit .citizen-ui-icon::before,
#ca-ve-edit .citizen-ui-icon::before {
	background-color: var(--tg-color-progressive);
}

#ca-edit:hover .citizen-ui-icon::before,
#ca-ve-edit:hover .citizen-ui-icon::before {
	background-color: var(--tg-color-progressive--hover);
}

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

/* Remove beige backgrounds in boxes */
.oo-ui-panelLayout,
.oo-ui-menuSelectWidget,
.oo-ui-popupWidget-popup,
.oo-ui-window-body {
	background-color: var(--color-surface-1) !important;
	border-color: var(--tg-border-color-base) !important;
}

/* Form fields */
.oo-ui-textInputWidget,
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget textarea,
.oo-ui-dropdownInputWidget select {
	background-color: var(--color-surface-0);
	color: var(--color-base);
	border-color: var(--tg-border-color-interactive);
}

/* Fix potential input fields with beige backgrounds */
input,
select,
textarea {
	background-color: var(--color-surface-0);
	color: var(--color-base);
	border: 1px solid var(--tg-border-color-interactive);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--tg-color-progressive);
	outline-color: var(--tg-color-progressive);
}

/* Tabs and menu selectors space theme */
.mw-ui-tabs .mw-ui-tabs-nav li.mw-ui-tabs-nav-active a {
	border-bottom-color: var(--tg-color-progressive);
	color: var(--tg-color-progressive);
}

.mw-ui-tabs .mw-ui-tabs-nav li a:hover {
	border-bottom-color: var(--tg-color-progressive--hover);
	color: var(--tg-color-progressive--hover);
}

/* Space theme for dropdown menus */
.vector-dropdown-content,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
	background-color: var(--color-surface-1);
	border-color: var(--tg-border-color-base);
}

/* Notification badges */
.mw-echo-ui-notificationBadgeButtonPopupWidget-button-badge {
	background-color: var(--tg-color-progressive);
}

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

.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);
}
Retrieved from "https://wiki.arcitex.net/index.php?title=MediaWiki:Citizen.css&oldid=511"
Last modified
This page was last edited on 7 March 2025, at 08:25.