MediaWiki:Citizen.css

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
• Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
•  Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.

@font-face {
	font-family: 'Departure Mono';
	src:
		url( '/fonts/DepartureMono-Regular.woff2' ) format( 'woff2' ),
		url( '/fonts/DepartureMono-Regular.woff' ) format( 'woff' );
	font-display: swap;
	font-feature-settings: 'locl';
}

:root {
	--dm-amber: #ffa133;
	--dm-pumpkin: #e47b1a;
	--dm-flux: #c8be50;
	--dm-foam: #bccabb;
	--dm-enamel: #eeeeee;
	--dm-cement: #c0c0c0;
	--dm-aluminum: #cccccc;
	--dm-ash: #8e8e8e;
	--dm-mud: #8a8a6f;
	--dm-clay: #6c6c58;
	--dm-smoke: #666666;
	--dm-dark: #444444;
	--dm-soot: #333333;
	--dm-carbon: #222222;
	--dm-black: #141414;
	--dm-flick: cubic-bezier( 0.36, 2.09, 0.07, -1.52 );

	--font-family-citizen-base: 'Departure Mono';
	--font-family-citizen-serif: 'Departure Mono';
	--font-family-citizen-monospace: 'Departure Mono';

	--border-radius-base: 0;
	--border-radius-medium: 0;
	--border-radius-large: 0;
	--border-radius-pill: 0;
	--border-radius-sharp: 0;

	--color-surface-0: var( --dm-enamel );
	--color-surface-1: #e4e4e4;
	--color-surface-1--hover: #dadada;
	--color-surface-1--active: var( --dm-aluminum );
	--color-surface-2: #dadada;
	--color-surface-2--hover: var( --dm-aluminum );
	--color-surface-2--active: var( --dm-cement );
	--color-surface-3: var( --dm-aluminum );
	--color-surface-4: var( --dm-cement );
	--background-color-base: var( --color-surface-0 );

	--color-emphasized: var( --dm-carbon );
	--color-base: var( --dm-dark );
	--color-base--hover: var( --dm-soot );
	--color-subtle: var( --dm-smoke );
	--color-placeholder: var( --dm-clay );
	--color-disabled: var( --dm-ash );

	--color-progressive: #9a4f00;
	--color-progressive--hover: #7d4000;
	--color-progressive--active: #6a3600;
	--background-color-progressive: var( --dm-amber );
	--background-color-progressive--hover: #ffb35c;
	--background-color-progressive--active: var( --dm-pumpkin );
	--color-inverted-primary: var( --dm-carbon );

	--color-link: var( --dm-soot );
	--color-link--hover: #9a4f00;
	--color-link--active: #7d4000;
	--color-visited: var( --dm-soot );

	--border-color-base: var( --dm-cement );
	--border-color-subtle: #d6d6d6;
	--border-color-muted: #e0e0e0;
	--border-color-interactive: var( --dm-ash );
	--border-color-interactive--hover: var( --dm-smoke );
	--border-color-progressive: var( --dm-pumpkin );
	--border-color-progressive--focus: var( --dm-pumpkin );

	--dm-heading-fg: var( --dm-soot );
	--dm-heading-bg: var( --dm-aluminum );
	--dm-label: var( --dm-clay );
	--dm-highlight: var( --dm-foam );
}

:root.skin-theme-clientpref-night,
:root.skin-theme-clientpref-black {
	--color-surface-0: var( --dm-carbon );
	--color-surface-1: #2a2a2a;
	--color-surface-1--hover: var( --dm-soot );
	--color-surface-1--active: #3a3a3a;
	--color-surface-2: var( --dm-soot );
	--color-surface-2--hover: #3a3a3a;
	--color-surface-2--active: var( --dm-dark );
	--color-surface-3: #3a3a3a;
	--color-surface-4: var( --dm-dark );

	--color-emphasized: var( --dm-enamel );
	--color-base: var( --dm-cement );
	--color-base--hover: var( --dm-enamel );
	--color-subtle: var( --dm-ash );
	--color-placeholder: var( --dm-mud );
	--color-disabled: var( --dm-smoke );

	--color-progressive: var( --dm-amber );
	--color-progressive--hover: #ffb35c;
	--color-progressive--active: var( --dm-pumpkin );

	--color-link: var( --dm-enamel );
	--color-link--hover: var( --dm-amber );
	--color-link--active: var( --dm-pumpkin );
	--color-visited: var( --dm-enamel );

	--border-color-base: var( --dm-dark );
	--border-color-subtle: var( --dm-soot );
	--border-color-muted: #2a2a2a;
	--border-color-interactive: var( --dm-smoke );
	--border-color-interactive--hover: var( --dm-ash );
	--border-color-progressive: var( --dm-amber );
	--border-color-progressive--focus: var( --dm-amber );

	--dm-heading-fg: var( --dm-soot );
	--dm-heading-bg: var( --dm-ash );
	--dm-label: var( --dm-mud );
	--dm-highlight: var( --dm-clay );
}

@media ( prefers-color-scheme: dark ) {
	:root.skin-theme-clientpref-os {
		--color-surface-0: var( --dm-carbon );
		--color-surface-1: #2a2a2a;
		--color-surface-1--hover: var( --dm-soot );
		--color-surface-1--active: #3a3a3a;
		--color-surface-2: var( --dm-soot );
		--color-surface-2--hover: #3a3a3a;
		--color-surface-2--active: var( --dm-dark );
		--color-surface-3: #3a3a3a;
		--color-surface-4: var( --dm-dark );
		--color-emphasized: var( --dm-enamel );
		--color-base: var( --dm-cement );
		--color-base--hover: var( --dm-enamel );
		--color-subtle: var( --dm-ash );
		--color-placeholder: var( --dm-mud );
		--color-disabled: var( --dm-smoke );
		--color-progressive: var( --dm-amber );
		--color-progressive--hover: #ffb35c;
		--color-progressive--active: var( --dm-pumpkin );
		--color-link: var( --dm-enamel );
		--color-link--hover: var( --dm-amber );
		--color-link--active: var( --dm-pumpkin );
		--color-visited: var( --dm-enamel );
		--border-color-base: var( --dm-dark );
		--border-color-subtle: var( --dm-soot );
		--border-color-muted: #2a2a2a;
		--border-color-interactive: var( --dm-smoke );
		--border-color-interactive--hover: var( --dm-ash );
		--border-color-progressive: var( --dm-amber );
		--border-color-progressive--focus: var( --dm-amber );
		--dm-heading-fg: var( --dm-soot );
		--dm-heading-bg: var( --dm-ash );
		--dm-label: var( --dm-mud );
		--dm-highlight: var( --dm-clay );
	}
}

html {
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	color: var( --color-surface-0 );
	background-color: var( --color-emphasized );
}

.mw-body-content a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 150ms var( --dm-flick );
}

.mw-body-content a:hover {
	text-decoration-color: currentColor;
}

.mw-body-content a.new {
	text-decoration-style: dashed;
}

.firstHeading {
	font-size: 44px;
	line-height: 1;
	letter-spacing: 0;
}

.firstHeading .mw-page-title-main {
	color: var( --dm-heading-fg );
	background-color: var( --dm-heading-bg );
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.firstHeading .mw-page-title-main::after {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.9em;
	margin-left: 0.1em;
	vertical-align: -0.05em;
	animation: dm-blink 1s infinite steps( 1 );
}

@keyframes dm-blink {
	0%, 100% { background-color: transparent; }
	50% { background-color: var( --dm-amber ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.firstHeading .mw-page-title-main::after {
		animation: none;
	}
}

.mw-body-content .mw-heading2 {
	border-bottom: 0;
}

.mw-body-content h2 {
	display: inline;
	font-size: 22px;
	line-height: 1.2;
	color: var( --dm-heading-fg );
	background-color: var( --dm-heading-bg );
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.mw-body-content h3 {
	font-size: 22px;
}

.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
	font-size: 16.5px;
	text-transform: uppercase;
	color: var( --dm-label );
}

.citizen-menu__heading,
.citizen-toc-heading,
.citizen-footer,
#siteSub,
#contentSub,
.mw-normal-catlinks > a:first-child {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var( --dm-label );
}

.citizen-menu__card,
.citizen-search__form,
.citizen-dropdown-details .citizen-menu__card {
	border: 1px solid var( --border-color-interactive );
	box-shadow: none;
}

.mw-body-content blockquote {
	border-left: 7px solid var( --dm-mud );
	padding: 8px 0 8px 12px;
	margin-inline: 0;
	background: none;
}

.mw-body-content .wikitable,
.mw-body-content table.smwtable,
.mw-body-content table.smwtable-clean,
.mw-body-content .smw-table,
.mw-body-content .smwfact,
.mw-body-content .infobox {
	border: 1px solid var( --border-color-base );
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
}

.mw-body-content .wikitable > * > tr > th,
.mw-body-content table.smwtable th,
.mw-body-content table.smwtable-clean th,
.mw-body-content .smwfact .smwfactboxhead {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: normal;
	color: var( --dm-label );
	background-color: var( --color-surface-1 );
	border-color: var( --border-color-base );
}

.mw-body-content .wikitable > * > tr > td,
.mw-body-content table.smwtable td,
.mw-body-content table.smwtable-clean td {
	border-color: var( --border-color-base );
}

.mw-body-content .wikitable > * > tr:hover > td,
.mw-body-content table.smwtable tr:hover > td {
	background-color: var( --color-surface-1 );
}

.mw-body-content pre,
.mw-body-content code {
	border-radius: 0;
	border: 1px solid var( --border-color-subtle );
	background-color: var( --color-surface-1 );
}

.mw-body-content b,
.mw-body-content strong {
	font-weight: normal;
	color: var( --color-emphasized );
	background-color: var( --dm-highlight );
}