« MediaWiki:Common.css » : différence entre les versions

Version du 10 juin 2026 à 21:07

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Plus+Jakarta+Sans:wght@300..800&display=swap');

:root{
  /* — Charte (pour nos propres règles) — */
  --itr-marine:#103a4a;  --itr-marine-900:#0a2734;
  --itr-calanque:#1f9c92; --itr-calanque-600:#178a81; --itr-calanque-100:#e3f4f2;
  --itr-brass:#c2a15a;   --itr-brass-100:#f4ecda;  --itr-coral:#e3845f;
  --itr-sand:#f6f2ea;    --itr-surface:#ffffff;
  --itr-ink:#1d3036;     --itr-muted:#6f8086;
  --itr-line:#e8e1d4;    --itr-line-soft:#f0ebe1;
  --itr-font-ui:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  --itr-font-display:"Fraunces",Georgia,serif;

  /* — Tokens Citizen : couleur primaire turquoise (OKLCH, depuis #1f9c92) — */
  --color-progressive-oklch__l: 62.67%;
  --color-progressive-oklch__c: 0.1032;
  --color-progressive-oklch__h: 186.52;
  /* — Token Citizen : police de base (juste le nom, fallbacks gérés en aval) — */
  --font-family-citizen-base: 'Plus Jakarta Sans';
}

/* === Variables du thème CLAIR ============================================
   Couvre le mode Clair explicite (.day) ET le mode Automatique sur appareil
   clair (.os + media query) — sinon, en mode Auto, rien ne s'applique.
   Inclut les tokens Citizen (surfaces) ET Codex (rail, pages de config,
   pages spéciales — la couche design-system de MediaWiki).
   Le mode sombre reste intact (non ciblé).
   ------------------------------------------------------------------------ */
:root.skin-theme-clientpref-day{
  /* Surfaces Citizen */
  --color-surface-0:#f6f2ea;  --color-surface-1:#ffffff;  --color-surface-2:#fbf9f4;
  --color-surface-3:#f0ebe1;  --color-surface-4:#e8e1d4;
  /* Texte (commun Citizen + Codex) */
  --color-base:#1d3036;  --color-emphasized:#103a4a;  --color-subtle:#6f8086;  --color-link:#178a81;
  /* Tokens Codex — rail gauche & pages de config/spéciales */
  --background-color-base:#ffffff;
  --background-color-neutral-subtle:#f6f2ea;
  --background-color-neutral:#f0ebe1;
  --background-color-interactive-subtle:#f0ebe1;
  --border-color-base:#e8e1d4;  --border-color-subtle:#f0ebe1;
  --color-progressive:#1f9c92;  --color-progressive--hover:#178a81;  --color-progressive--active:#13716a;
}
@media screen and (prefers-color-scheme:light){
  :root.skin-theme-clientpref-os{
    --color-surface-0:#f6f2ea;  --color-surface-1:#ffffff;  --color-surface-2:#fbf9f4;
    --color-surface-3:#f0ebe1;  --color-surface-4:#e8e1d4;
    --color-base:#1d3036;  --color-emphasized:#103a4a;  --color-subtle:#6f8086;  --color-link:#178a81;
    --background-color-base:#ffffff;
    --background-color-neutral-subtle:#f6f2ea;
    --background-color-neutral:#f0ebe1;
    --background-color-interactive-subtle:#f0ebe1;
    --border-color-base:#e8e1d4;  --border-color-subtle:#f0ebe1;
    --color-progressive:#1f9c92;  --color-progressive--hover:#178a81;  --color-progressive--active:#13716a;
  }
}

/* ---------- Typographie (fallback tous skins) ---------- */
body{ background:var(--itr-sand); }
.mw-body, .mw-body-content, #content, .mw-parser-output{
  font-family:var(--itr-font-ui); color:var(--itr-ink); line-height:1.65;
}

/* ---------- Titres (Fraunces + filet laiton, tous skins) ---------- */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4,
#firstHeading, .mw-first-heading, .firstHeading, .citizen-page-heading{
  font-family:var(--itr-font-display); color:var(--itr-marine); letter-spacing:.2px;
}
.mw-body h1, .mw-body h2, #firstHeading, .mw-first-heading, .firstHeading{
  border-bottom:2px solid var(--itr-brass); padding-bottom:.2em;
}

/* ---------- Liens ---------- */
a, a:link{ color:var(--itr-calanque-600); }
a:hover{ color:var(--itr-calanque); }
a.new, a.new:visited{ color:var(--itr-coral); }
::selection{ background:var(--itr-calanque-100); }

/* ---------- Tableaux (wikitable) ---------- */
.wikitable{
  border:1px solid var(--itr-line) !important; border-radius:12px;
  border-collapse:separate; border-spacing:0; overflow:hidden;
  box-shadow:0 1px 2px rgba(16,58,74,.05);
}
.wikitable > * > tr > th, .wikitable > tr > th{
  background:var(--itr-marine) !important; color:#eef4f5 !important;
  border-color:rgba(255,255,255,.15) !important;
}
.wikitable > * > tr:nth-child(even) > td{ background:var(--itr-sand); }

/* ---------- Infobox ---------- */
.infobox{
  background:var(--itr-surface); border:1px solid var(--itr-line-soft) !important;
  border-radius:14px; box-shadow:0 4px 14px rgba(16,58,74,.07); overflow:hidden;
}
.infobox caption, .infobox-title, .infobox > tbody > tr:first-child th{
  background:var(--itr-marine); color:#fff; font-family:var(--itr-font-display);
}

/* ---------- Citations ---------- */
blockquote{
  border-left:4px solid var(--itr-calanque); background:var(--itr-sand);
  border-radius:0 10px 10px 0; padding:.6em 1em; font-style:italic;
}

/* ---------- Code ---------- */
code, kbd, samp{ background:var(--itr-line-soft); border-radius:5px; padding:.1em .35em; font-size:.92em; }
pre, .mw-code{ background:#f1ece2; border:1px solid var(--itr-line); border-radius:10px; padding:.8em 1em; }

/* ---------- Sommaire (TOC) ---------- */
.toc, #toc, .vector-toc, .toccolours{
  background:var(--itr-surface); border:1px solid var(--itr-line-soft) !important;
  border-radius:12px; box-shadow:0 1px 2px rgba(16,58,74,.05);
}
.toctitle h2, .toc-title{ font-family:var(--itr-font-display); color:var(--itr-marine); border:none; }

/* ---------- Recherche ---------- */
#searchInput, .mw-searchInput, .cdx-text-input__input{
  border:1px solid var(--itr-line) !important; border-radius:9px !important;
}
#searchInput:focus, .cdx-text-input__input:focus{
  border-color:var(--itr-calanque) !important; box-shadow:0 0 0 3px var(--itr-calanque-100) !important; outline:none;
}

/* ---------- Boutons progressifs / vignettes / navboxes / catégories ---------- */
.mw-ui-button.mw-ui-progressive,
.cdx-button--action-progressive.cdx-button--weight-primary{
  background:var(--itr-calanque) !important; border-color:var(--itr-calanque) !important;
  color:#fff !important; border-radius:8px !important;
}
.thumbinner, figure.mw-default-size{
  background:var(--itr-surface); border:1px solid var(--itr-line-soft) !important;
  border-radius:12px; box-shadow:0 4px 14px rgba(16,58,74,.07);
}
.hatnote, .dablink{ background:var(--itr-sand); border-radius:8px; padding:.4em .8em; }
.navbox{ border:1px solid var(--itr-line) !important; border-radius:12px; overflow:hidden; }
.navbox-title, .navbox-group{ background:var(--itr-marine) !important; color:#fff !important; }
.catlinks{ background:var(--itr-sand) !important; border:1px solid var(--itr-line-soft) !important; border-radius:10px; }

/* ---------- (OPTIONNEL) En-tête marine — décommente pour tenter la barre ----------
.skin-theme-clientpref-day .citizen-header,
.skin-theme-clientpref-day .mw-header{ background-color:#103a4a; }
.skin-theme-clientpref-day .citizen-header a{ color:#eaf1f2; }
*/