MediaWiki:Timeless.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.

/* Tout CSS placé ici sera chargé avec les pages accédées par les utilisateurs de l’habillage Timeless */

/* ============================================================
   THÈME « PERCHE NOGENTAIS » — CORRIGÉ POUR TIMELESS
   ============================================================ */

/* ---------- Réinitialisation des styles par défaut ---------- */
.ts-sidebar,
.ts-content,
.mw-body,
#mw-content {
  background: transparent !important; /* Évite les conflits de fond */
  color: inherit !important; /* Hérite des couleurs de texte */
}

/* ---------- Fond de page ---------- */
body {
  background: linear-gradient(180deg, #dfe7d4 0%, var(--couleur-fond, #f7f5ef) 340px) !important;
  color: var(--couleur-texte, #26251f) !important;
}

/* ---------- Barre latérale (fond sombre) ---------- */
.ts-sidebar {
  background: #1a2018 !important; /* Fond sombre pour toute la barre latérale */
  border-right: 1px solid #333b2e !important;
  padding: 1em !important;
  border-radius: 0 !important;
  width: 250px !important; /* Largeur fixe pour éviter les débordements */
}

.sidebar-inner {
  background: transparent !important;
  padding: 0 !important;
}

/* ---------- Sections de la barre latérale ---------- */
#site-navigation,
#site-tools,
#user-tools {
  background: transparent !important;
  border: none !important;
  padding: 0.5em !important;
  margin-bottom: 1em !important;
}

/* Titres des sections */
#site-navigation .sidebar-chunk h2,
#site-tools .sidebar-chunk h2,
#user-tools .sidebar-chunk h2 {
  color: #a9c79b !important;
  border-bottom: 2px solid #8c5a2b !important;
  font-size: 1em !important;
  padding-bottom: 0.3em !important;
  margin-bottom: 0.5em !important;
}

/* Liens dans la barre latérale */
#site-navigation a,
#site-tools a,
#user-tools a {
  color: #e9e7dc !important;
  text-decoration: none !important;
}
#site-navigation a:hover,
#site-tools a:hover,
#user-tools a:hover {
  background: #2a3028 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
}

/* ---------- Contenu principal (fond clair) ---------- */
#mw-content,
.mw-body {
  background: #ffffff !important;
  border: 1px solid #d9d5c7 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(47, 82, 51, 0.1) !important;
  padding: 1.4em !important;
  color: #26251f !important; /* Texte sombre pour lisibilité */
}

/* Titres dans le contenu */
.mw-body h1,
.mw-body h2,
.mw-body h3 {
  color: #2f5233 !important;
}

/* ---------- Table des matières ---------- */
#toc,
.toc {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
}
#toc::after {
  content: none !important;
}

/* ---------- Tableaux ---------- */
table.wikitable > caption,
table.infobox .infobox-title {
  background: #2f5233 !important;
  color: #ffffff !important;
  border-radius: 6px 6px 0 0 !important;
}

/* ---------- Pied de page ---------- */
#footer,
.footer {
  background: transparent !important;
  border-top: 2px solid #8c5a2b !important;
  color: #55524a !important;
}
#footer a {
  color: #2b6cb0 !important;
}

/* ---------- Liens [modifier] ---------- */
.mw-editsection a {
  color: #8c5a2b !important;
}

/* ---------- Mode sombre ---------- */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(180deg, #171d14 0%, #12160f 340px) !important;
    color: #e9e7dc !important;
  }
  .ts-sidebar {
    background: #12160f !important;
    border-right-color: #2a3028 !important;
  }
  #mw-content,
  .mw-body {
    background: #1a2018 !important;
    border-color: #333b2e !important;
    color: #e9e7dc !important;
  }
  .mw-body h1,
  .mw-body h2,
  .mw-body h3 {
    color: #a9c79b !important;
  }
  #footer {
    color: #9aa292 !important;
  }
}

/* ---------- Mobile ---------- */
@media screen and (max-width: 720px) {
  body {
    background: #f7f5ef !important;
  }
  .ts-sidebar {
    background: #1a2018 !important;
    border-right: none !important;
    width: 100% !important; /* Pleine largeur en mobile */
  }
  #mw-content,
  .mw-body {
    padding: 0.8em !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  table.infobox {
    float: none !important;
    width: 100% !important;
    margin: 0 0 1em 0 !important;
  }
}