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

De WikiPerche
 
Aucun résumé des modifications
Ligne 2 : Ligne 2 :


/* ============================================================
/* ============================================================
   Thème « Perche Nogentais » — COMPATIBLE TIMELESS
   BANDEAU LATÉRAL SOMBRE — CORRIGÉ POUR TIMELESS
   ============================================================ */
   ============================================================ */


/* ---------- Fond de page ---------- */
/* ---------- Cibler le conteneur principal de la barre latérale ---------- */
body {
.ts-sidebar {
   background: linear-gradient(180deg, #dfe7d4 0%, var(--couleur-fond, #f7f5ef) 340px);
   background: #1a2018; /* Fond sombre pour toute la barre latérale */
   color: var(--couleur-texte, #26251f);
  border-right: 1px solid #333b2e; /* Bordure droite pour délimiter */
   box-sizing: border-box; /* Important pour les bordures */
   padding: 1em;
   border-radius: 0; /* Optionnel : retirez si vous voulez des coins arrondis */
}
}


/* ---------- Logo et titre ---------- */
/* ---------- Conteneur interne de la barre latérale ---------- */
#mw-header, .mw-wiki-title, .ts-logo {
.sidebar-inner {
   background: transparent;
   background: transparent; /* Assurez-vous que le fond est transparent */
  padding: 0; /* Réinitialisez le padding si nécessaire */
}
}
.mw-wiki-title a, .ts-logo a {
 
   color: #2f5233;
/* ---------- Sections de la barre latérale (navigation, outils, etc.) ---------- */
   font-weight: 600;
#site-navigation,
   letter-spacing: .3px;
#site-tools,
#user-tools {
   background: transparent; /* Fond transparent pour éviter les superpositions */
  border: none; /* Supprimez les bordures individuelles */
   padding: 0.5em;
   margin-bottom: 1em; /* Espacement entre les sections */
}
}


/* ---------- Barre de navigation ---------- */
/* ---------- Titres des sections ---------- */
#site-navigation, #site-tools, #user-tools {
  border: 1px solid #d9d5c7;
  border-radius: 6px;
  background: rgba(238, 240, 228, .9);
  padding: .3em .5em;
  box-shadow: 0 1px 3px rgba(47, 82, 51, .08);
  /* Pas de display: block ou width: 100% */
}
#site-navigation .sidebar-chunk h2,
#site-navigation .sidebar-chunk h2,
#site-tools .sidebar-chunk h2,
#site-tools .sidebar-chunk h2,
#user-tools .sidebar-chunk h2 {
#user-tools .sidebar-chunk h2 {
   color: #2f5233;
   color: #a9c79b;
   border-bottom: 2px solid #8c5a2b;
   border-bottom: 2px solid #8c5a2b;
   font-size: 1em;
   font-size: 1em;
  padding-bottom: 0.3em;
  margin-bottom: 0.5em;
}
}
#site-navigation a, #site-tools a, #user-tools a {
 
   color: #26251f;
/* ---------- Liens dans la barre latérale ---------- */
#site-navigation a,
#site-tools a,
#user-tools a {
   color: #e9e7dc;
  text-decoration: none;
}
}
#site-navigation a:visited, #site-tools a:visited {
#site-navigation a:hover,
  color: #26251f;
#site-tools a:hover,
}
#user-tools a:hover {
#site-navigation li:hover, .ts-inner .sidebar-inner li:hover {
   background: #2a3028;
   background: #eef0e4;
   border-radius: 4px;
   border-radius: 4px;
}
/* ---------- Onglets page/discussion ---------- */
#p-page-tools, .toolset {
  border: none;
}
#p-page-tools li.selected a, .ns-talk .toolset a:hover {
  color: #2f5233;
  font-weight: 600;
}
/* ---------- Contenu principal ---------- */
#mw-content, .mw-body {
  background: #ffffff;
  border: 1px solid #d9d5c7;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(47, 82, 51, .10);
  padding: 1.4em;
  box-sizing: border-box; /* Évite les débordements */
}
/* ---------- Table des matières ---------- */
#toc, .toc {
  background: transparent;
  border: none;
  padding-left: 0;
}
#toc::after {
  content: none;
}
/* ---------- Tableaux ---------- */
table.wikitable > caption, table.infobox .infobox-title {
  background: #2f5233;
   color: #ffffff;
   color: #ffffff;
  border-radius: 6px 6px 0 0;
}
}


/* ---------- Pied de page ---------- */
/* ---------- Adaptation pour le mode sombre ---------- */
#footer, .footer {
@media (prefers-color-scheme: dark) {
  background: transparent;
   .ts-sidebar {
  border-top: 2px solid #8c5a2b;
     background: #12160f;
  color: #55524a;
     border-right-color: #2a3028;
}
#footer a {
  color: #2b6cb0;
}
 
/* ---------- Liens [modifier] ---------- */
.mw-editsection a {
  color: #8c5a2b;
}
 
/* ---------- Layout large : ajustements visuels uniquement ---------- */
@media screen and (min-width: 1100px) {
   .ts-inner {
     /* Pas de max-width ou padding horizontal */
    border-left: 2px solid #eef0e4; /* Style visuel uniquement */
  }
  #site-navigation:not(:empty)::before,
  #site-tools:not(:empty)::before {
     border-left: 2px solid #eef0e4;
   }
   }
}
}


/* ---------- Mobile : conservez la structure ---------- */
/* ---------- Adaptation mobile ---------- */
@media screen and (max-width: 720px) {
@media screen and (max-width: 720px) {
   body {
   .ts-sidebar {
    background: #f7f5ef;
  }
  #mw-content, .mw-body {
    padding: .8em;
    /* Gardez les bordures si Timeless les utilise */
    border-left: 1px solid #d9d5c7;
    border-right: 1px solid #d9d5c7;
  }
  #site-navigation, #site-tools, #user-tools {
    /* Ne pas supprimer les propriétés structurelles */
    background: transparent;
    box-shadow: none;
  }
  table.infobox {
    float: none;
    width: 100% !important;
    margin: 0 0 1em 0;
  }
}
 
/* ---------- Mode sombre ---------- */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(180deg, #171d14 0%, #12160f 340px);
    color: #e9e7dc;
  }
  #site-navigation, #site-tools, #user-tools {
    background: rgba(32, 38, 29, .95);
    border-color: #333b2e;
  }
  #site-navigation .sidebar-chunk h2,
  #site-tools .sidebar-chunk h2,
  #user-tools .sidebar-chunk h2 {
    color: #a9c79b;
    border-bottom-color: #8c5a2b;
  }
  #site-navigation a, #site-tools a, #user-tools a {
    color: #e9e7dc;
  }
  #mw-content, .mw-body {
     background: #1a2018;
     background: #1a2018;
     border-color: #333b2e;
     border-right: none; /* Supprimez la bordure en mobile si nécessaire */
    color: #e9e7dc;
  }
  .mw-body h1, .mw-body h2, .mw-body h3 {
    color: #a9c79b;
  }
  #footer {
    color: #9aa292;
   }
   }
}
}

Version du 22 septembre 2026 à 21:44

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

/* ============================================================
   BANDEAU LATÉRAL SOMBRE — CORRIGÉ POUR TIMELESS
   ============================================================ */

/* ---------- Cibler le conteneur principal de la barre latérale ---------- */
.ts-sidebar {
  background: #1a2018; /* Fond sombre pour toute la barre latérale */
  border-right: 1px solid #333b2e; /* Bordure droite pour délimiter */
  padding: 1em;
  border-radius: 0; /* Optionnel : retirez si vous voulez des coins arrondis */
}

/* ---------- Conteneur interne de la barre latérale ---------- */
.sidebar-inner {
  background: transparent; /* Assurez-vous que le fond est transparent */
  padding: 0; /* Réinitialisez le padding si nécessaire */
}

/* ---------- Sections de la barre latérale (navigation, outils, etc.) ---------- */
#site-navigation,
#site-tools,
#user-tools {
  background: transparent; /* Fond transparent pour éviter les superpositions */
  border: none; /* Supprimez les bordures individuelles */
  padding: 0.5em;
  margin-bottom: 1em; /* Espacement entre les sections */
}

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

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

/* ---------- Adaptation pour le mode sombre ---------- */
@media (prefers-color-scheme: dark) {
  .ts-sidebar {
    background: #12160f;
    border-right-color: #2a3028;
  }
}

/* ---------- Adaptation mobile ---------- */
@media screen and (max-width: 720px) {
  .ts-sidebar {
    background: #1a2018;
    border-right: none; /* Supprimez la bordure en mobile si nécessaire */
  }
}