MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 14:03, 13 November 2026

/* The look of Brother Laz's Median XL pages (modsbylaz.vn.cz, m_2.css): flat greys, Arial, grey upper-case
   headings under a short rule, indented body text. Light is his own palette; dark is the same greys turned
   down. The theme is picked in the preferences menu (bottom left), dark by default. */

:root {
	--laz-heading: #626262;
	--laz-rule: #444444;
	--laz-box: #aaaaaa;

	--font-family-citizen-base: Arial, Helvetica, sans-serif;

	--color-surface-0: #cccccc;
	--color-surface-1: #c2c2c2;
	--color-surface-1--hover: #b8b8b8;
	--color-surface-1--active: #aeaeae;
	--color-surface-2: #b6b6b6;
	--color-surface-2--hover: #acacac;
	--color-surface-2--active: #a2a2a2;
	--color-surface-3: #aaaaaa;
	--color-surface-4: #9a9a9a;

	--color-emphasized: #111111;
	--color-base: #222222;
	--color-subtle: #4a4a4a;
	--color-placeholder: #5a5a5a;

	--border-color-base: #999999;
	--border-color-subtle: #aaaaaa;
	--border-color-muted: #b2b2b2;

	--color-progressive: #444466;
	--color-progressive--hover: #55557a;
	--color-progressive--active: #333350;
	--color-link: #333350;
	--color-link--hover: #000000;
	--color-link--active: #000000;
}

:root.skin-theme-clientpref-night,
:root.skin-theme-clientpref-black {
	--laz-heading: #959595;
	--laz-rule: #6a6a6a;
	--laz-box: #333333;

	--color-surface-0: #222222;
	--color-surface-1: #1b1b1b;
	--color-surface-1--hover: #2a2a2a;
	--color-surface-1--active: #313131;
	--color-surface-2: #2c2c2c;
	--color-surface-2--hover: #353535;
	--color-surface-2--active: #3c3c3c;
	--color-surface-3: #353535;
	--color-surface-4: #404040;

	--color-emphasized: #e8e8e8;
	--color-base: #c8c8c8;
	--color-subtle: #9c9c9c;
	--color-placeholder: #8a8a8a;

	--border-color-base: #4a4a4a;
	--border-color-subtle: #3c3c3c;
	--border-color-muted: #333333;

	--color-progressive: #a4a4cc;
	--color-progressive--hover: #c4c4e8;
	--color-progressive--active: #eeeeff;
	--color-link: #b4b4d8;
	--color-link--hover: #eeeeff;
	--color-link--active: #eeeeff;
}

@media (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os {
		--laz-heading: #959595;
		--laz-rule: #6a6a6a;
		--laz-box: #333333;
		--color-surface-0: #222222;
		--color-surface-1: #1b1b1b;
		--color-surface-1--hover: #2a2a2a;
		--color-surface-1--active: #313131;
		--color-surface-2: #2c2c2c;
		--color-surface-2--hover: #353535;
		--color-surface-2--active: #3c3c3c;
		--color-surface-3: #353535;
		--color-surface-4: #404040;
		--color-emphasized: #e8e8e8;
		--color-base: #c8c8c8;
		--color-subtle: #9c9c9c;
		--color-placeholder: #8a8a8a;
		--border-color-base: #4a4a4a;
		--border-color-subtle: #3c3c3c;
		--border-color-muted: #333333;
		--color-progressive: #a4a4cc;
		--color-progressive--hover: #c4c4e8;
		--color-progressive--active: #eeeeff;
		--color-link: #b4b4d8;
		--color-link--hover: #eeeeff;
		--color-link--active: #eeeeff;
	}
}

/* page title and section headings: his "genbig" and "gensmall" */
.firstHeading,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var( --laz-heading );
}

.mw-parser-output h2 {
	font-size: 1.25rem;
	border: 0;
	/* the short 250px rule over every section */
	padding-top: 0.9em;
	background: linear-gradient( var( --laz-rule ), var( --laz-rule ) ) no-repeat 0 0 / 250px 1px;
}

.mw-parser-output h3 {
	font-size: 1.05rem;
}

.mw-parser-output h4 {
	font-size: 0.95rem;
}

.mw-parser-output hr {
	width: 250px;
	margin-left: 0;
	border: 0;
	border-top: 1px solid var( --laz-rule );
	background: none;
	height: 0;
}

.mw-parser-output a {
	text-decoration: none;
}

.mw-parser-output a:hover {
	text-decoration: underline;
}

/* body text sits indented under its heading */
@media ( min-width: 720px ) {
	.mw-parser-output > p,
	.mw-parser-output > ul,
	.mw-parser-output > ol,
	.mw-parser-output > dl,
	.mw-parser-output .citizen-section-body > p,
	.mw-parser-output .citizen-section-body > ul,
	.mw-parser-output .citizen-section-body > ol,
	.mw-parser-output .citizen-section-body > dl {
		margin-left: 3rem;
	}
}

/* his flat grey boxes */
.mw-parser-output .wikitable {
	background-color: var( --color-surface-0 );
	border-color: var( --border-color-base );
}

.mw-parser-output .wikitable > * > tr > th {
	background-color: var( --laz-box );
	color: var( --color-emphasized );
}

.mw-parser-output .laz-box {
	background-color: var( --laz-box );
	padding: 0.5em 0.75em;
	margin: 1em 0;
}

/* links to pages not written yet, in his muted red */
.mw-parser-output a.new,
.mw-parser-output a.new:visited {
	color: #804022;
}

:root.skin-theme-clientpref-night .mw-parser-output a.new,
:root.skin-theme-clientpref-black .mw-parser-output a.new {
	color: #c08070;
}

@media (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os .mw-parser-output a.new {
		color: #c08070;
	}
}
/* ===== Wyrd look (2026-11-13): gold serif headings like the in-game item boxes, panel tables, framed art,
   navigation boxes. Overrides the grey headings and tables above; delete this block to go back. ===== */
:root {
	--wyrd-gold: #7a5a1c;
	--wyrd-gold-soft: #9a7a3c;
	--wyrd-panel: #d4d0c6;
	--wyrd-panel-2: #c9c4b8;
	--wyrd-th: #b9ad92;
	--wyrd-border: #9c8d6c;
	--wyrd-serif: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
}

:root.skin-theme-clientpref-night,
:root.skin-theme-clientpref-black {
	--wyrd-gold: #c7b377;
	--wyrd-gold-soft: #8a7a50;
	--wyrd-panel: #18181a;
	--wyrd-panel-2: #1e1e21;
	--wyrd-th: #2a2418;
	--wyrd-border: #3e3628;
}

@media (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os {
		--wyrd-gold: #c7b377;
		--wyrd-gold-soft: #8a7a50;
		--wyrd-panel: #18181a;
		--wyrd-panel-2: #1e1e21;
		--wyrd-th: #2a2418;
		--wyrd-border: #3e3628;
	}
}

.firstHeading,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
	font-family: var( --wyrd-serif );
	text-transform: none;
	letter-spacing: 0.02em;
	color: var( --wyrd-gold );
}

.firstHeading {
	font-size: 2.1rem;
}

.mw-parser-output h2 {
	font-size: 1.55rem;
	padding: 0.5em 0 0.2em;
	background: linear-gradient( 90deg, var( --wyrd-gold-soft ), transparent 70% ) no-repeat 0 100% / 100% 1px;
}

.mw-parser-output h3 {
	font-size: 1.22rem;
}

.mw-parser-output h4 {
	font-size: 1.05rem;
}

/* tables: dark panels with a gold header row, faint stripes and a row highlight */
.mw-parser-output .wikitable {
	background-color: var( --wyrd-panel );
	border: 1px solid var( --wyrd-border );
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 6px;
	overflow: hidden;
}

.mw-parser-output .wikitable > * > tr > th,
.mw-parser-output .wikitable > * > tr > td {
	border: 0;
	border-bottom: 1px solid var( --wyrd-border );
	padding: 0.45em 0.8em;
}

.mw-parser-output .wikitable > * > tr > th {
	background-color: var( --wyrd-th );
	color: var( --wyrd-gold );
	font-family: var( --wyrd-serif );
	font-size: 1.02em;
}

.mw-parser-output .wikitable > tbody > tr:nth-child( even ) > td {
	background-color: var( --wyrd-panel-2 );
}

.mw-parser-output .wikitable > tbody > tr:hover > td {
	background-color: var( --wyrd-th );
}

.mw-parser-output .wikitable > * > tr:last-child > td {
	border-bottom: 0;
}

/* Brother Laz's art on the pages: framed like the item boxes */
.mw-parser-output .laz-art img,
.mw-parser-output img.laz-art {
	border: 1px solid #4a4032;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.5 );
}

.mw-parser-output figure.mw-halign-right:has( .laz-art ),
.mw-parser-output .laz-art.mw-halign-right {
	margin: 0.3em 0 1em 1.4em;
}

.mw-parser-output .laz-icon img,
.mw-parser-output img.laz-icon {
	border: 1px solid #4a4032;
	border-radius: 4px;
}

.mw-parser-output img.laz-inline,
.mw-parser-output .laz-inline img {
	vertical-align: middle;
	margin: 2px 6px 2px 0;
}

/* navigation boxes at the bottom of related pages (Template:Navbox) */
.mw-parser-output .wyrd-navbox {
	clear: both;
	margin: 2em 0 0.5em;
	border: 1px solid var( --wyrd-border );
	border-radius: 6px;
	background: var( --wyrd-panel );
	overflow: hidden;
}

.mw-parser-output .wyrd-navbox-title {
	padding: 0.45em 1em;
	background: var( --wyrd-th );
	color: var( --wyrd-gold );
	font-family: var( --wyrd-serif );
	font-size: 1.08em;
	font-weight: bold;
	text-align: center;
}

.mw-parser-output .wyrd-navbox-title a {
	color: var( --wyrd-gold );
}

.mw-parser-output .wyrd-navbox-list {
	padding: 0.6em 1em;
	text-align: center;
	line-height: 1.9;
}

.mw-parser-output .wyrd-navbox-list a {
	white-space: nowrap;
}

.mw-parser-output .wyrd-navbox-list .mw-selflink {
	color: var( --wyrd-gold );
	font-weight: bold;
}

/* download button (Template:Latest downloader) */
.mw-parser-output .wyrd-download a {
	display: inline-block;
	margin: 0.2em 0.4em 0.2em 0;
	padding: 0.5em 1.1em;
	border: 1px solid #7a6a45;
	border-radius: 4px;
	background: #2a2214;
	color: #f0dfa8;
	font-weight: bold;
	text-decoration: none;
}

.mw-parser-output .wyrd-download a:hover {
	border-color: #c7b377;
	background: #3a2e18;
	color: #fff2c8;
	text-decoration: none;
}

.mw-parser-output .wyrd-download a.external {
	background-image: none;
	padding-right: 1.1em;
}