MediaWiki:Common.css: Difference between revisions

Latest revision as of 07:50, 20 October 2026

/* Site-wide styles (all skins). Uses Citizen's theme variables so everything
   follows the light/dark theme. Fallback values are for other skins. */

/* ===================== Infoboxes ===================== */
.evo-infobox {
	float: right;
	clear: right;
	width: 20rem;
	max-width: 100%;
	margin: 0 0 1rem 1.5rem;
	border: 1px solid var( --border-color-base, #3a3a44 );
	border-radius: var( --border-radius-large, 12px );
	background: var( --color-surface-1, #16161c );
	font-size: 0.875rem;
	line-height: 1.5;
	overflow: hidden;
}

/* Image first, edge to edge */
.evo-infobox-image {
	background: var( --color-surface-2, #1e1e26 );
	text-align: center;
	line-height: 0;
}

.evo-infobox-image img {
	width: 100%;
	height: auto;
}

.evo-infobox-caption {
	padding: 0.5rem 1rem 0;
	font-size: 0.8125rem;
	color: var( --color-subtle, #9a9aa6 );
}

.evo-infobox-head {
	padding: 0.875rem 1rem 0.75rem;
}

.evo-infobox-kicker {
	font-size: 0.75rem;
	color: var( --color-subtle, #9a9aa6 );
}

.evo-infobox-title {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
	color: var( --color-emphasized, #fff );
}

.evo-infobox-subtitle {
	margin-top: 0.125rem;
	color: var( --color-subtle, #9a9aa6 );
}

/* Sections (collapsible) */
.evo-infobox-section {
	border-top: 1px solid var( --border-color-base, #3a3a44 );
	padding: 0.5rem 0 0.375rem;
}

.evo-infobox-header {
	padding: 0.25rem 1rem;
	font-weight: 600;
	color: var( --color-emphasized, #fff );
}

/* Collapse toggle: a chevron instead of "[Collapse]" */
.evo-infobox-section .mw-collapsible-toggle {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.25rem 0.75rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0;
	cursor: pointer;
}

.evo-infobox-section .mw-collapsible-toggle::before,
.evo-infobox-section .mw-collapsible-toggle::after {
	content: none;
}

.evo-infobox-section .mw-collapsible-toggle .mw-collapsible-text {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var( --color-subtle, #9a9aa6 );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.4 12.6 10 8l4.6 4.6 1.4-1.4-6-6-6 6z'/%3E%3C/svg%3E" ) center / 1rem no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.4 12.6 10 8l4.6 4.6 1.4-1.4-6-6-6 6z'/%3E%3C/svg%3E" ) center / 1rem no-repeat;
	transition: transform 150ms ease;
}

.evo-infobox-section .mw-collapsible-toggle-collapsed .mw-collapsible-text {
	transform: rotate( 180deg );
}

.evo-infobox-section .mw-collapsible-toggle:hover .mw-collapsible-text {
	background-color: var( --color-emphasized, #fff );
}

.evo-infobox-row {
	display: flex;
	gap: 1rem;
	padding: 0.3125rem 1rem;
}

.evo-infobox-label {
	flex: 0 0 42%;
	color: var( --color-subtle, #9a9aa6 );
}

.evo-infobox-data {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

@media screen and ( max-width: 720px ) {
	.evo-infobox {
		float: none;
		width: auto;
		margin: 0 0 1rem 0;
	}
}

/* ===================== Notices ({{Notice}}, {{Stub}}, {{WIP}}) ===================== */
.evo-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0 0 1rem 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var( --border-color-base, #3a3a44 );
	border-radius: var( --border-radius-medium, 8px );
	background: var( --color-surface-1, #16161c );
	font-size: 0.875rem;
	color: var( --color-base, #ddd );
}

.evo-notice::before {
	content: '';
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.0625rem;
	background-color: var( --color-subtle, #9a9aa6 );
	-webkit-mask: var( --evo-notice-icon ) center / contain no-repeat;
	mask: var( --evo-notice-icon ) center / contain no-repeat;
}

/* Info: circle with an "i" */
.evo-notice-info {
	--evo-notice-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zM9 9h2v6H9zm0-4h2v2H9z'/%3E%3C/svg%3E" );
}

/* Stub: circle with a plus */
.evo-notice-stub {
	--evo-notice-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14zM9 6h2v3h3v2h-3v3H9v-3H6V9h3z'/%3E%3C/svg%3E" );
}

/* Work in progress: pencil */
.evo-notice-wip {
	--evo-notice-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13.6 2.6a2 2 0 0 1 2.8 0l1 1a2 2 0 0 1 0 2.8L7 16.8 2.5 17.5l.7-4.5zM12.2 6 4.9 13.3l-.3 2.1 2.1-.3L14 7.8z'/%3E%3C/svg%3E" );
}

/* ===================== Main Page ===================== */
.evo-hero {
	position: relative;
	margin: 0 0 1.5rem;
	padding: 2.5rem 2rem 2rem;
	border: 1px solid var( --border-color-base, #3a3a44 );
	border-radius: var( --border-radius-large, 12px );
	background:
		radial-gradient( ellipse at 85% 0%, oklch( 60% 0.12 var( --color-progressive-oklch__h, 262 ) / 0.22 ), transparent 60% ),
		var( --color-surface-1, #16161c );
	overflow: hidden;
}

.evo-hero-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 1rem;
	font-family: var( --font-family-monospace, ui-monospace, monospace );
	font-size: 0.8125rem;
	color: var( --color-subtle, #9a9aa6 );
}

.evo-stat-value {
	color: var( --color-emphasized, #fff );
}

.evo-hero-title {
	max-width: 40rem;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var( --color-emphasized, #fff );
}

.evo-hero-title-muted {
	color: var( --color-subtle, #9a9aa6 );
	font-weight: 600;
}

/* Search box (InputBox type=search) */
.evo-hero-search {
	margin-top: 1.5rem;
	max-width: 36rem;
}

.evo-hero-search .mw-inputbox-centered,
.evo-hero-search form {
	display: block;
	margin: 0;
	text-align: left;
}

.evo-hero-search .cdx-text-input {
	display: block;
	width: 100%;
}

.evo-hero-search input[name='search'] {
	width: 100%;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var( --border-color-base, #3a3a44 );
	border-radius: var( --border-radius-medium, 8px );
	background: var( --color-surface-0, #0e0e12 );
	color: var( --color-base, #ddd );
	font-size: 1rem;
}

.evo-hero-search input[type='submit'] {
	display: none;
}

/* Category chips (automatic, from Category:Universe) */
.evo-hero-chips {
	margin-top: 0.75rem;
}

.evo-hero-chips .CategoryTreeTag {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.evo-hero-chips .CategoryTreeBullet,
.evo-hero-chips .CategoryTreeChildren,
.evo-hero-chips .CategoryTreeEmptyBullet {
	display: none;
}

.evo-hero-chips .CategoryTreeItem a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border: 1px solid var( --border-color-base, #3a3a44 );
	border-radius: 999px;
	background: var( --color-surface-0, #0e0e12 );
	color: var( --color-base, #ddd );
	font-size: 0.8125rem;
	text-decoration: none;
}

.evo-hero-chips .CategoryTreeItem a:hover {
	border-color: var( --color-progressive, #6aa9ff );
	color: var( --color-progressive, #6aa9ff );
}

/* Card grid */
.evo-home-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1rem;
}

.evo-card {
	min-width: 0;
	padding: 1.25rem;
	border: 1px solid var( --border-color-base, #3a3a44 );
	border-radius: var( --border-radius-large, 12px );
	background: var( --color-surface-1, #16161c );
}

.evo-card-full {
	grid-column: 1 / -1;
}

.evo-card-flush {
	padding: 0;
	overflow: hidden;
}

.evo-card-kicker {
	margin-bottom: 0.75rem;
	font-family: var( --font-family-monospace, ui-monospace, monospace );
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --color-subtle, #9a9aa6 );
}

.evo-card ul {
	margin: 0 0 0 1.1em;
}

.evo-card-more {
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

.evo-card-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

/* Featured card */
.evo-feat {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 18rem;
	height: 100%;
	background: var( --color-surface-2, #1e1e26 );
}

.evo-feat-image,
.evo-feat-image a,
.evo-feat-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.evo-feat-image img {
	object-fit: cover;
}

.evo-feat-body {
	position: relative;
	width: 100%;
	padding: 3rem 1.25rem 1.25rem;
	background: linear-gradient( to bottom, transparent, rgba( 0, 0, 0, 0.8 ) );
	color: #fff;
}

.evo-feat-empty .evo-feat-body {
	background: none;
	color: var( --color-base, #ddd );
}

.evo-feat-badge {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.125rem 0.5rem;
	border-radius: var( --border-radius-medium, 8px );
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	font-size: 0.75rem;
}

.evo-feat-title {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
}

.evo-feat-title a,
.evo-feat-title a:visited {
	color: inherit;
}

.evo-feat-empty .evo-feat-title {
	color: var( --color-emphasized, #fff );
}

.evo-feat-summary {
	margin-top: 0.375rem;
	font-size: 0.9375rem;
	opacity: 0.9;
}

/* New articles list ({{Special:NewPages}}): show only the page name and date */
.evo-newpages h4,
.evo-newpages li:has( a[ title='Main Page' ] ) {
	display: none;
}

.evo-newpages ul {
	margin: 0;
	list-style: none;
}

.evo-newpages li {
	display: flex;
	align-items: baseline;
	padding: 0.375rem 0;
	border-top: 1px solid var( --border-color-base, #3a3a44 );
	font-size: 0;
}

/* MediaWiki starts a new list for each day; the divider goes between items, not after each day */
.evo-newpages ul:first-of-type > li:first-child {
	border-top: 0;
}

.evo-newpages li > :not( bdi ) {
	display: none;
}

.evo-newpages li a {
	font-size: 0.875rem;
}

.evo-newpages li bdi:has( .mw-newpages-pagename ) {
	order: 1;
	min-width: 0;
}

.evo-newpages li bdi:has( .mw-newpages-time ) {
	order: 2;
	margin-left: auto;
	padding-left: 0.75rem;
	white-space: nowrap;
}

.evo-newpages .mw-newpages-time,
.evo-newpages .mw-newpages-time:visited {
	color: var( --color-subtle, #9a9aa6 );
}

.evo-newpages:not( :has( li:nth-of-type( 2 ) ) )::before {
	content: 'New articles will appear here automatically.';
	font-size: 0.875rem;
	color: var( --color-subtle, #9a9aa6 );
}

@media screen and ( max-width: 900px ) {
	.evo-home-grid {
		grid-template-columns: 1fr;
	}

	.evo-hero {
		padding: 1.75rem 1.25rem 1.5rem;
	}

	.evo-hero-title {
		font-size: 1.875rem;
	}
}

/* ===================== Writers only ===================== */
/* Shown to administrators by MediaWiki:Group-sysop.css */
.evo-editor-only,
#p-Contribute {
	display: none;
}

/* Planet boxes inside star system pages ({{Planet}}) */
.evo-infobox-planet {
	width: 17rem;
}

/* A heading after a planet box starts below it, so the box stays within its own planet's section */
.evo-infobox-planet ~ h2,
.evo-infobox-planet ~ h3,
.evo-infobox-planet ~ .mw-heading {
	clear: both;
}