MediaWiki:Vaulttec.css

Version datée du 28 mai 2026 à 22:39 par Kims (discussion | contributions) (Intégration du mode clair)

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.
/* ============================================================
   MODE CLAIR — « Parchemin Vault-Tec »
   À coller À LA FIN de MediaWiki:Vaulttec.css (ne touche à rien d'autre).
   S'active quand l'extension DarkMode pose html.client-light-mode.
   Sombre = défaut. Pour tout ajuster : ne modifie que le bloc de
   variables ci-dessous.
   ============================================================ */

html.client-light-mode {
  --vt-bg-0:         #e7dec9;   /* fond parchemin            */
  --vt-bg-2:         #d8ccae;   /* bandeaux / en-têtes       */
  --vt-bg-3:         #cfc09e;   /* en-têtes infobox          */
  --vt-surf:         241, 233, 214;  /* surfaces (boîtes)    */
  --vt-pop:          244, 237, 220;  /* popups / menus       */
  --vt-text:         #2c3a22;   /* texte                     */
  --vt-text-rgb:     44, 58, 34;
  --vt-dim:          #6d6a4f;   /* texte secondaire          */
  --vt-acc:          #3f6b2f;   /* accent / titres           */
  --vt-acc-rgb:      63, 107, 47;
  --vt-acc-bright:   #2f5222;
  --vt-link:         #436f33;
  --vt-link-visited: #5a6a3a;
  --vt-danger:       #a3402b;
  --vt-warn:         #8a6100;
}

/* ── Fond général ───────────────────────────────────────── */
html.client-light-mode body { background: var(--vt-bg-0) !important; }

/* ── Surfaces : boîtes, tableaux, panneaux ──────────────── */
html.client-light-mode .avt-infobox,
html.client-light-mode .mw-parser-output .avt-infobox,
html.client-light-mode .wikitable,
html.client-light-mode .va-table,
html.client-light-mode .mw-datatable,
html.client-light-mode .palette,
html.client-light-mode .avt-warn-banner,
html.client-light-mode .avt-note-banner,
html.client-light-mode .avt-section-banner,
html.client-light-mode .avt-dropdown-box,
html.client-light-mode .avt-genericbox,
html.client-light-mode .avt-content-game-box,
html.client-light-mode .homepage-box,
html.client-light-mode .spinoff-box,
html.client-light-mode .avt-sitenotice,
html.client-light-mode .sidebar-toc,
html.client-light-mode .vector-toc,
html.client-light-mode .mw-changeslist-legend,
html.client-light-mode #editform,
html.client-light-mode .editOptions,
html.client-light-mode .wikiEditor-ui,
html.client-light-mode #userloginForm,
html.client-light-mode #createaccount,
html.client-light-mode .mw-tmh-player,
html.client-light-mode .mediaContainer,
html.client-light-mode table.filehistory,
html.client-light-mode .TablePager,
html.client-light-mode table.mw-statistics-table {
  background-color: rgba(var(--vt-surf), 0.92) !important;
  border-color: rgba(var(--vt-acc-rgb), 0.22) !important;
  color: var(--vt-text) !important;
  box-shadow: 0 1px 3px rgba(60, 50, 20, 0.12) !important;
}

/* ── En-têtes / bandeaux (fond plus soutenu, texte accent) ─ */
html.client-light-mode .avt-infobox-header,
html.client-light-mode .avt-infobox p.bloc,
html.client-light-mode .avt-infobox caption,
html.client-light-mode .palette-titre,
html.client-light-mode .palette-banniere,
html.client-light-mode .palette-section,
html.client-light-mode .palette-groupe,
html.client-light-mode .va-infobox-title,
html.client-light-mode .va-navbox-title,
html.client-light-mode .avt-dropdown-box-title,
html.client-light-mode .homepage-box-title,
html.client-light-mode .homepage-welcome-title,
html.client-light-mode .wikitable > tr > th,
html.client-light-mode .wikitable > * > tr > th,
html.client-light-mode .va-table > tr > th,
html.client-light-mode .va-table > * > tr > th,
html.client-light-mode .TablePager th,
html.client-light-mode table.filehistory th,
html.client-light-mode table.mw-statistics-table th,
html.client-light-mode .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top,
html.client-light-mode .mw-rcfilters-ui-filterWrapperWidget-bottom,
html.client-light-mode .wikiEditor-ui-toolbar {
  background-color: var(--vt-bg-2) !important;
  color: var(--vt-acc) !important;
  border-color: rgba(var(--vt-acc-rgb), 0.22) !important;
}
html.client-light-mode .avt-infobox-header { background-color: var(--vt-bg-3) !important; }

/* ── Cellules / texte courant ───────────────────────────── */
html.client-light-mode .avt-infobox td,
html.client-light-mode .wikitable > tr > td,
html.client-light-mode .wikitable > * > tr > td,
html.client-light-mode .va-table > tr > td,
html.client-light-mode .va-table > * > tr > td,
html.client-light-mode .homepage-box-content,
html.client-light-mode .TablePager td { color: var(--vt-text) !important; }
html.client-light-mode .avt-infobox th[scope="row"] { color: var(--vt-link) !important; }
html.client-light-mode .wikitable tr:hover td { background-color: rgba(var(--vt-acc-rgb), 0.08) !important; }

/* ── Liens ──────────────────────────────────────────────── */
html.client-light-mode .mw-parser-output a,
html.client-light-mode .homepage-box-content a,
html.client-light-mode .vector-toc .vector-toc-link,
html.client-light-mode .sidebar-toc .sidebar-toc-link { color: var(--vt-link) !important; }
html.client-light-mode .mw-parser-output a:visited { color: var(--vt-link-visited) !important; }
html.client-light-mode .mw-parser-output a:hover,
html.client-light-mode .homepage-box-content a:hover,
html.client-light-mode .vector-toc .vector-toc-link:hover { color: var(--vt-acc) !important; }
html.client-light-mode .new,
html.client-light-mode a.new,
html.client-light-mode .mw-parser-output a.external { color: var(--vt-danger) !important; }

/* ── Titres ─────────────────────────────────────────────── */
html.client-light-mode .mw-parser-output .mw-heading,
html.client-light-mode .mw-parser-output > h2 { border-bottom-color: rgba(var(--vt-acc-rgb), 0.18) !important; }
html.client-light-mode .mw-parser-output .mw-heading h2,
html.client-light-mode .mw-parser-output > h2 { color: var(--vt-text) !important; }
html.client-light-mode .homepage-box-title,
html.client-light-mode .portal-box-title,
html.client-light-mode .spinoff-box-title,
html.client-light-mode .homepage-presentation-title,
html.client-light-mode .homepage-participation-title,
html.client-light-mode .homepage-articleday-title {
  color: var(--vt-acc) !important;
  text-shadow: none !important;
  border-color: rgba(var(--vt-acc-rgb), 0.18) !important;
}

/* ── TOC repliable (custom) ─────────────────────────────── */
html.client-light-mode #mw-content-text .toc,
html.client-light-mode #mw-content-text #toc {
  background: rgba(var(--vt-surf), 0.92) !important;
  border-color: rgba(var(--vt-acc-rgb), 0.2) !important;
}
html.client-light-mode #mw-content-text .toctitle h2 { color: var(--vt-acc) !important; }
html.client-light-mode #mw-content-text .toc li a { color: var(--vt-dim) !important; }
html.client-light-mode #mw-content-text .toc li a:hover { color: var(--vt-acc) !important; background: rgba(var(--vt-acc-rgb), 0.1) !important; }
html.client-light-mode .tocnumber { color: rgba(var(--vt-acc-rgb), 0.45) !important; }

/* ── Catégories ─────────────────────────────────────────── */
html.client-light-mode #catlinks {
  background-color: rgba(var(--vt-surf), 0.92) !important;
  border-top-color: rgba(var(--vt-acc-rgb), 0.2) !important;
  color: var(--vt-dim) !important;
}
html.client-light-mode #catlinks a { color: var(--vt-link) !important; }
html.client-light-mode #catlinks a:hover { color: var(--vt-acc) !important; }

/* ── Popups : recherche, aperçus de liens, notifications ── */
html.client-light-mode .vt-search-dropdown,
html.client-light-mode .mwe-popups,
html.client-light-mode .vt-lang-list,
html.client-light-mode .oo-ui-popupWidget-popup,
html.client-light-mode .mw-echo-ui-notificationsListWidget,
html.client-light-mode .mw-notification {
  background: rgba(var(--vt-pop), 0.98) !important;
  border-color: rgba(var(--vt-acc-rgb), 0.3) !important;
  color: var(--vt-text) !important;
}
html.client-light-mode .vt-search-item,
html.client-light-mode .mwe-popups .mwe-popups-extract,
html.client-light-mode .vt-lang-list .interlanguage-link a { color: var(--vt-text) !important; }
html.client-light-mode .mwe-popups .mwe-popups-title { color: var(--vt-acc) !important; }

/* ── Diff : ajout / suppression ─────────────────────────── */
html.client-light-mode .diff-addedline { background: rgba(var(--vt-acc-rgb), 0.12) !important; }
html.client-light-mode .diff-addedline .diffchange { background: rgba(var(--vt-acc-rgb), 0.28) !important; color: var(--vt-acc-bright) !important; }
html.client-light-mode .diff-deletedline { background: rgba(163, 64, 43, 0.1) !important; }
html.client-light-mode .diff-deletedline .diffchange { background: rgba(163, 64, 43, 0.25) !important; color: var(--vt-danger) !important; }
html.client-light-mode .diff-otitle,
html.client-light-mode .diff-ntitle { background: var(--vt-bg-2) !important; color: var(--vt-text) !important; }

/* ── Références [1][2] ──────────────────────────────────── */
html.client-light-mode .reference a,
html.client-light-mode sup.reference a {
  color: var(--vt-acc) !important;
  background: rgba(var(--vt-acc-rgb), 0.08) !important;
  border-color: rgba(var(--vt-acc-rgb), 0.2) !important;
}

/* ── Boutons (édition, connexion) : teinte verte sur papier ─ */
html.client-light-mode #wpSave,
html.client-light-mode #wpPreview,
html.client-light-mode #wpDiff,
html.client-light-mode #wpLoginAttempt,
html.client-light-mode #wpCreateaccount,
html.client-light-mode .editButtons input[type="submit"] {
  background-color: rgba(var(--vt-acc-rgb), 0.14) !important;
  border-color: rgba(var(--vt-acc-rgb), 0.45) !important;
  color: var(--vt-acc) !important;
}

/* ── Champs de saisie ───────────────────────────────────── */
html.client-light-mode #wpTextbox1,
html.client-light-mode #wpSummary,
html.client-light-mode .oo-ui-textInputWidget input,
html.client-light-mode .oo-ui-inputWidget-input,
html.client-light-mode .mw-search-box input {
  background-color: rgba(var(--vt-surf), 0.6) !important;
  border-color: rgba(var(--vt-acc-rgb), 0.25) !important;
  color: var(--vt-text) !important;
}

/* ── Garde-fous ─────────────────────────────────────────── */
/* Halo du logo d'accueil coupé */
html.client-light-mode .logo-accueil img { filter: none !important; }

/* Icônes recolorées en phosphore → vert foncé (ajuste invert/brightness si besoin) */
html.client-light-mode .oo-ui-iconElement-icon,
html.client-light-mode .oo-ui-indicatorElement-indicator {
  filter: brightness(0) saturate(100%) invert(34%) sepia(18%) saturate(1400%) hue-rotate(75deg) brightness(92%) !important;
}

/* Blocs de code : restent en inset sombre (le surlignage ne tient pas sur papier).
   Supprime ce bloc si tu veux du code clair. */
html.client-light-mode .mw-highlight,
html.client-light-mode .mw-highlight pre,
html.client-light-mode .mw-parser-output pre,
html.client-light-mode .mw-parser-output code,
html.client-light-mode #wpTextbox1.CodeMirror,
html.client-light-mode .ve-ui-mwWikitextSurface .CodeMirror,
html.client-light-mode .ve-ui-mwWikitextSurface .CodeMirror-scroll {
  background: #14241a !important;
  color: #e8f3ec !important;
}
Récupérée de "https://fallout-wiki.com/index.php?title=MediaWiki:Vaulttec.css&oldid=202435"