Toggle search
Toggle menu
54
66
17K
5.2K
WikiOasis Meta
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css

MediaWiki interface page
More actions
Revision as of 00:23, 10 May 2026 by Zippy (talk | contribs) (make better)

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.
/*
 * WikiOasis Meta
 * This stylesheet contains site-wide styles for the WikiOasis Meta wiki.
 * For template styles, check the specific template documentation.
*/

/* Adjust primary color to WikiOasis blue */
:root {
	--color-primary-oklch__h: 210;
	--woa-primary: #0A5EA8;
	--woa-secondary: #0093D4;
	--woa-accent: #00B8E6;
	--woa-dark: #053E73;
	
	/* Override Codex default blues with WikiOasis brand */
	--color-primary: var(--woa-primary);
	--color-progressive: var(--woa-secondary);
	--color-destructive: #d32424;
}

h1,
h2,
h3,
h4,
h5,
h6,
.mw-logo-wordmark,
.citizen-sticky-header-page-title {
	font-weight: var(--font-weight-medium);
	color: var(--color-base);
}

h1 {
	padding-bottom: 0.5em;
}

h2 {
	color: var(--woa-primary);
}

h4,
h5,
h6 {
	letter-spacing: 0.0125em;
}

/* Add transition to details content */
details::details-content {
	opacity: 0;
	block-size: 0;
	transition: content-visibility var(--transition-duration-medium)
			allow-discrete,
		opacity var(--transition-duration-medium),
		block-size var(--transition-duration-medium);
}

details[open]::details-content {
	block-size: auto;
	opacity: 1;
}

/* Align icon opacity with skin default */
.mw-logo-icon {
	opacity: var(--opacity-icon-base);
	filter: var(--filter-invert);
}

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

/* External portlet hidden */
.mw-portlet-External {
	display: none;
}

/* 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: 2px solid var(--woa-primary);
	border-radius: 0;
	letter-spacing: 0.05em;
	font-weight: var(--font-weight-semibold);
	color: var(--woa-primary) !important;
}

/* Icons */
.citizen-drawer__menu [id^='n-sidebar-icon-'] a {
	font-size: 0;
	content-visibility: auto;
	transition: transform 200ms ease;
}

.citizen-drawer__menu [id^='n-sidebar-icon-'] a:hover {
	transform: scale(1.15);
}

.citizen-drawer__menu [id^='n-sidebar-icon-'] a:before {
	display: block;
	content: '';
	width: var(--size-icon);
	height: var(--size-icon);
	background: linear-gradient(135deg, var(--woa-primary), var(--woa-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}

/* Social icon definitions */
#n-sidebar-icon-discord a:before {
	mask-image: url(https://media.starcitizen.tools/7/77/Discord_-_Simple_Icons.svg);
}

#n-sidebar-icon-twitter a:before {
	mask-image: url(https://media.starcitizen.tools/6/6a/Twitter_-_Simple_Icons.svg);
}

#n-sidebar-icon-mastodon a:before {
	mask-image: url(https://media.starcitizen.tools/d/de/Mastodon_-_Simple_Icons.svg);
}

#n-sidebar-icon-threads a:before {
	mask-image: url(https://media.starcitizen.tools/9/9b/Threads_-_Simple_Icons.svg);
}

#n-sidebar-icon-bluesky a:before {
	mask-image: url(https://media.starcitizen.tools/8/8b/Bluesky_-_Simple_Icons.svg);
}

#n-sidebar-icon-github a:before {
	mask-image: url(https://media.starcitizen.tools/8/85/Github_-_Simple_Icons.svg);
}

#n-sidebar-icon-reddit a:before {
	mask-image: url(https://media.starcitizen.tools/e/e8/Reddit_-_Simple_Icons.svg);
}

/*
 * Footer
*/
.citizen-footer {
	padding-block: 6rem;
	background: linear-gradient(180deg, transparent, rgba(10, 94, 168, 0.05));
	border-top: 2px solid var(--woa-secondary);
}

.citizen-footer__siteinfo {
	justify-content: space-between;
}

.citizen-footer__sitetitle .mw-logo-wordmark {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--woa-primary);
	font-weight: var(--font-weight-bold);
}

/*
 * Footer icons
*/
#footer-icons a {
	border: 0;
	padding: 0;
	background: transparent;
	opacity: var(--opacity-icon-base);
	transition: opacity 250ms ease, transform 250ms ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#footer-icons a:hover {
	opacity: var(--opacity-icon-base--hover);
	transform: translateY(-2px);
}

#footer-icons a:active {
	opacity: var(--opacity-icon-base--active);
	transform: translateY(0);
}

/* More space between icons */
#footer-icons ul,
#footer-icons li {
	column-gap: var(--space-md);
}

#footer-icons img {
	width: auto;
	height: 32px;
	filter: drop-shadow(0 0 2px rgba(10, 94, 168, 0.2));
	transition: filter 250ms ease;
}

#footer-icons a:hover img {
	filter: drop-shadow(0 0 6px rgba(0, 147, 212, 0.4));
}

/* Darken the footer icon in light mode */
.skin-citizen-light #footer-icons a {
	filter: invert(1) hue-rotate(180deg);
}

/*
 * Logo and branding
*/
.mw-logo-wordmark {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-weight: var(--font-weight-bold);
	color: var(--woa-primary);
}

/* CookieWarning tweaks */
.mw-cookiewarning-container {
	max-width: 480px;
	border: 2px solid var(--woa-secondary);
	background: linear-gradient(135deg, rgba(10, 94, 168, 0.05), rgba(0, 147, 212, 0.05));
	border-radius: var(--border-radius-base);
}

.mw-cookiewarning-text {
	gap: var(--space-xs);
}

.mw-cookiewarning-text::before {
	content: '🔒';
	font-size: 2rem;
}

/* hide on pageload to prevent FoUC */
.client-js .mw-cookiewarning-container {
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 250ms ease;
}

/* citizen-animations-ready is added when scripts are loaded */
.client-js.citizen-animations-ready .mw-cookiewarning-container {
	opacity: 1;
	visibility: visible;
}

/*
 * Links styling
*/
a {
	transition: color 200ms ease;
}

a:hover {
	color: var(--woa-secondary) !important;
}

/*
 * Button styling
*/
.mw-ui-button,
.mw-ui-progressive,
button {
	transition: all 200ms ease;
	border-color: var(--woa-primary);
	color: white;
	background-color: var(--woa-primary);
}

.mw-ui-button:hover,
.mw-ui-progressive:hover,
button:hover {
	background-color: var(--woa-secondary);
	border-color: var(--woa-secondary);
	box-shadow: 0 2px 8px rgba(0, 147, 212, 0.3);
}

/*
 * Info boxes and content boxes
*/
.infobox,
.mw-message-box {
	border-left: 4px solid var(--woa-secondary);
	box-shadow: inset -2px 0 0 rgba(0, 147, 212, 0.1);
}

/*
 * Animated gradient accent
*/
@property --gradient-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.woa-gradient-glow {
	position: relative;

	--clr-primary: var(--woa-primary);
	--clr-secondary: var(--woa-secondary);
	--clr-accent: var(--woa-accent);

	--gradient: var(--clr-primary), var(--clr-secondary), var(--clr-accent), var(--clr-secondary),
		var(--clr-primary);
	--gradient-blur: 4px;
	--gradient-time: 5s;
}

.woa-gradient-glow::before {
	position: absolute;
	inset: 0px;
	z-index: -1;
	content: '';
	background: conic-gradient(from var(--gradient-angle), var(--gradient));
	border-radius: inherit;
	animation: woa-gradient-rotate var(--gradient-time) linear infinite;
	filter: blur(var(--gradient-blur));
	transition: filter 100ms ease;
	opacity: 0.3;
}

@keyframes woa-gradient-rotate {
	0% {
		--gradient-angle: 0deg;
	}

	100% {
		--gradient-angle: 360deg;
	}
}

@keyframes woa-gradient-pulse {
	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.02);
	}
}

.woa-gradient-glow {
	animation: woa-gradient-pulse var(--gradient-time) ease-in-out infinite;
}

/*
 * Highlights and callouts
*/
.woa-highlight {
	background: linear-gradient(120deg, rgba(0, 147, 212, 0.1), rgba(10, 94, 168, 0.1));
	border-left: 3px solid var(--woa-secondary);
	padding: var(--space-sm) var(--space-md);
	border-radius: 4px;
	margin: var(--space-md) 0;
}

.woa-badge {
	display: inline-block;
	background: linear-gradient(135deg, var(--woa-primary), var(--woa-secondary));
	color: white;
	padding: 0.25em 0.75em;
	border-radius: 20px;
	font-size: 0.875em;
	font-weight: var(--font-weight-semibold);
	transition: transform 200ms ease;
}

.woa-badge:hover {
	transform: scale(1.05);
}

/*
 * Tables enhancement
*/
table.wikitable {
	border-collapse: collapse;
	box-shadow: 0 2px 4px rgba(10, 94, 168, 0.1);
}

table.wikitable th {
	background: linear-gradient(135deg, var(--woa-primary), var(--woa-secondary));
	color: white;
	font-weight: var(--font-weight-semibold);
	border-color: var(--woa-primary);
	padding: var(--space-sm) var(--space-md);
}

table.wikitable td {
	border-color: rgba(10, 94, 168, 0.2);
}

table.wikitable tr:hover {
	background-color: rgba(0, 147, 212, 0.05);
}

/*
 * Syntax highlighting for code blocks
*/
.mw-highlight {
	background-color: rgba(10, 94, 168, 0.02);
	border-left: 3px solid var(--woa-secondary);
}

code,
pre {
	color: var(--woa-dark);
	background-color: rgba(10, 94, 168, 0.05);
	border-radius: 4px;
}

/*
 * HACK: Hide UploadWizard personal purpose option
*/
.mwe-upwiz-deed-purpose > label:last-child {
	display: none !important;
}
Retrieved from "https://meta.wikioasis.org/wiki/MediaWiki:Citizen.css?oldid=4712"
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
More information