|
|
| Ligne 1 : |
Ligne 1 : |
| @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 );
| |
| }
| |
