MediaWiki:Citizen.css

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.

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