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

De WikiPerche
← Modification précédenteModification suivante →

Admin (discussion | contributions)

3 groupes d'utilisateurs
3 018 modifications
Aucun résumé des modifications
Aucun résumé des modifications
Balise : Révoqué
Ligne 1 : Ligne 1 :
/* Tout CSS placé ici sera chargé avec les pages accédées par les utilisateurs de l'habillage Timeless */
```css
/* ==========================================================================
  THÈME "PERCHE" — MEDIAWIKI / TIMELESS
  Compatible MediaWiki 1.46+
  ========================================================================== */


/* === Thème "Perche" pour le skin Timeless === */
/* --------------------------------------------------------------------------
  1. PALETTE
  -------------------------------------------------------------------------- */


/* Fond général de la page (hors boîte de contenu) */
:root {
    --perche-bg: #F7F3EA;          /* fond général */
    --perche-paper: #FFFFFF;      /* contenu */
    --perche-sand: #E9E0CC;        /* navigation / panneaux */
    --perche-green-dark: #3B5B3E;  /* vert principal */
    --perche-green: #5C7A4E;      /* vert accent */
    --perche-green-light: #7A9471; /* bordures / séparateurs */
    --perche-brown: #8A4B2E;      /* liens */
    --perche-brown-dark: #6B3A22;  /* liens visités */
    --perche-text: #2C2A26;        /* texte principal */
    --perche-white: #F7F3EA;      /* texte sur vert */
}
 
 
/* ==========================================================================
  2. FOND GLOBAL
  ========================================================================== */
 
html,
body {
body {
     background-color: #F7F3EA;
     background-color: var(--perche-bg) !important;
     color: #2C2A26;
     color: var(--perche-text);
}
}


/* Boîte de contenu principale */
body {
#content {
     min-height: 100%;
     background-color: #FFFFFF;
    color: #2C2A26;
}
}


/* En-tête */
 
#p-logo,
/* ==========================================================================
  3. EN-TÊTE TIMELESS
  ========================================================================== */
 
/* Bandeau principal */
#mw-header,
.mw-header,
.mw-header,
#mw-header-container,
#mw-header-container,
header#mw-header {
.mw-header-container,
     background-color: #3B5B3E !important;
.mw-header-wrapper,
#mw-head-base,
#mw-page-base {
     background-color: var(--perche-green-dark) !important;
}
}


/* Test : logo en jaune sable comme la sidebar */
/* Texte et liens de l'en-tête */
#p-logo.mw-portlet {
#mw-header,
     background-color: #E9E0CC !important;
#mw-header a,
.mw-header,
.mw-header a,
#mw-header-container a {
     color: var(--perche-white) !important;
}
}


/* Corrige les liens blancs sur fond blanc dans le menu déroulant personnel */
/* Hover / focus dans l'en-tête */
#personal-inner.dropdown,
#mw-header a:hover,
#personal-inner.dropdown a {
#mw-header a:focus,
     color: #2C2A26 !important;
.mw-header a:hover,
.mw-header a:focus {
     color: #FFFFFF !important;
}
}


/* Optionnel : donner un fond cohérent avec le thème au menu déroulant lui-même */
/* Logo : fond sable */
#personal-inner.dropdown {
#p-logo,
     background-color: #FFFFFF;
#p-logo.mw-portlet {
     background-color: var(--perche-sand) !important;
}
}


/* Liens visités dans ce menu, pour rester cohérent avec le reste du site */
/* Le lien du logo doit rester visible */
#personal-inner.dropdown a:visited {
#p-logo a,
     color: #6B3A22 !important;
#p-logo-text a {
     color: var(--perche-text) !important;
}
}


/* Texte et liens dans l'en-tête */
.mw-header a,
.mw-header,
#mw-header-container a {
    color: #F7F3EA !important;
}


/* Pied de page */
/* ==========================================================================
#mw-footer-container,
  4. BARRE DE COULEUR TIMELESS
#footer {
  ========================================================================== */
     background-color: #3B5B3E !important;
 
    color: #F7F3EA !important;
.color-bar {
}
     background-color: var(--perche-green-light) !important;
#footer a,
#mw-footer-container a {
    color: #F7F3EA !important;
}
}


/* Bandeaux latéraux (menu de navigation gauche + colonne d'outils droite) */
.color-left,
#mw-site-navigation,
.color-right {
#mw-page-tools,
     background-color: var(--perche-sand) !important;
.sidebar-inner,
#mw-related-navigation {
     background-color: #E9E0CC !important;
    color: #2C2A26;
}
}


/* Liens dans le contenu */
.color-middle,
#content a {
.color-middle-container {
    color: #8A4B2E;
     background-color: var(--perche-green) !important;
}
#content a:visited {
     color: #6B3A22;
}
}


/* Bordures et séparateurs */
.color-middle {
#content,
     background-color: var(--perche-green-dark) !important;
.sidebar-inner,
#mw-site-navigation {
     border-color: #7A9471 !important;
}
}


/* Boutons et éléments actifs */
.mw-ui-button,
.oo-ui-buttonElement-button {
    background-color: #5C7A4E;
    color: #F7F3EA;
    border-color: #3B5B3E;
}


/* === Compléments pour combler les blancs résiduels === */
/* ==========================================================================
  5. ZONE PRINCIPALE
  ========================================================================== */


/* Fond racine, au cas où la fenêtre dépasse le layout */
/* Fond derrière les colonnes */
html {
#mw-content-container {
     background-color: #F7F3EA;
     background-color: var(--perche-bg) !important;
    border-bottom-color: var(--perche-green-light) !important;
}
}


/* Éléments techniques de Timeless qui gèrent l'alignement du header/sidebar
/* Contenu */
  (souvent invisibles mais avec un fond blanc par défaut) */
#mw-content,
#mw-head-base,
#content,
#mw-page-base {
.mw-body {
     background-color: #3B5B3E !important;
     background-color: var(--perche-paper);
    color: var(--perche-text);
}
}


/* Certaines versions de Timeless ont un conteneur englobant header + logo */
/*
.mw-header-container,
* #mw-content est le véritable conteneur principal utilisé par Timeless.
.mw-header-wrapper {
* On conserve #content pour les extensions et anciens sélecteurs.
     background-color: #3B5B3E !important;
*/
#mw-content {
     border-color: var(--perche-green-light);
}
}


/* Conteneur global qui enveloppe tout le corps (sidebar + contenu) :
  évite un liseré blanc entre sidebar et contenu ou en bas de colonne */
#mw-content-container,
.mw-body {
    background-color: #F7F3EA;
}


/* S'assure que la sidebar occupe toute sa hauteur sans zone blanche en bas */
/* ==========================================================================
  6. NAVIGATION LATÉRALE
  ========================================================================== */
 
#mw-site-navigation,
#mw-site-navigation,
#mw-page-tools,
#mw-related-navigation,
#mw-related-navigation,
#mw-page-tools {
.sidebar-inner,
    min-height: 100%;
.sidebar-chunk {
}
     background-color: var(--perche-sand) !important;
 
     color: var(--perche-text);
/* Pied de page : si un espace blanc apparaît sous le footer quand
  le contenu est court, on étend le fond jusqu'en bas de la fenêtre */
html, body {
     min-height: 100%;
}
#mw-footer-container {
    background-color: #3B5B3E !important;
     min-height: 0; /* évite un footer qui s'étire de façon disproportionnée */
}
}


/* Comble la marge blanche autour du cadre sidebar-inner, et supprime le cadre blanc autour sans modifier la mise en page */
/* Suppression des cadres blancs internes */
.sidebar-chunk {
.sidebar-chunk {
    background-color: #E9E0CC !important;
     border: none !important;
     border: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
}
}


/* Liens dans les bandeaux latéraux (menu de navigation + colonne d'outils) */
/* Titres des portlets */
#mw-site-navigation h2,
#mw-page-tools h2,
#mw-related-navigation h2,
.sidebar-inner h2 {
    color: var(--perche-green-dark) !important;
}
 
/* Liens */
#mw-site-navigation a,
#mw-site-navigation a,
#mw-page-tools a,
#mw-related-navigation a,
.sidebar-inner a,
.sidebar-chunk a,
#mw-site-navigation .mw-portlet-body a,
#mw-site-navigation .mw-portlet-body a,
#mw-related-navigation a,
#mw-related-navigation .mw-portlet-body a,
#mw-page-tools a,
#mw-page-tools .mw-portlet-body a,
#mw-page-tools .mw-portlet-body a,
.sidebar-inner a,
#mw-related-navigation .mw-portlet-body a {
.sidebar-inner .mw-portlet-body a,
     color: var(--perche-brown) !important;
.sidebar-chunk a {
     color: #8A4B2E !important;
}
}


/* Liens visités */
#mw-site-navigation a:visited,
#mw-site-navigation a:visited,
#mw-site-navigation .mw-portlet-body a:visited,
#mw-page-tools a:visited,
#mw-related-navigation a:visited,
#mw-related-navigation a:visited,
#mw-related-navigation .mw-portlet-body a:visited,
#mw-page-tools a:visited,
#mw-page-tools .mw-portlet-body a:visited,
.sidebar-inner a:visited,
.sidebar-inner a:visited,
.sidebar-inner .mw-portlet-body a:visited,
.sidebar-chunk a:visited {
.sidebar-chunk a:visited {
     color: #6B3A22 !important;
     color: var(--perche-brown-dark) !important;
}
}


/* Barre de couleur sous l'en-tête */
/* Hover */
.color-bar {
#mw-site-navigation a:hover,
     background-color: #7A9471 !important; /* vert feuillage clair, cohérent avec les bordures déjà utilisées */
#mw-page-tools a:hover,
#mw-related-navigation a:hover,
.sidebar-inner a:hover,
.sidebar-chunk a:hover {
    color: var(--perche-green-dark) !important;
    text-decoration: underline;
}
 
 
/* ==========================================================================
  7. MENU PERSONNEL / COMPTE
  ========================================================================== */
 
/* Menu déroulant */
#personal-inner.dropdown {
     background-color: var(--perche-paper) !important;
    color: var(--perche-text) !important;
    border-color: var(--perche-green-light) !important;
}
 
/* Liens */
#personal-inner.dropdown a {
    color: var(--perche-text) !important;
}
}


.color-middle,
#personal-inner.dropdown a:visited {
.color-middle-container {
     color: var(--perche-brown-dark) !important;
     background-color: #5C7A4E !important; /* vert olive, accent du thème */
}
}


.color-left,
#personal-inner.dropdown a:hover,
.color-right {
#personal-inner.dropdown a:focus {
     background-color: #E9E0CC !important; /* jaune sable, comme la sidebar */
     background-color: var(--perche-sand) !important;
    color: var(--perche-green-dark) !important;
}
}


/* Couleur du texte "masquer" dans le sommaire (TOC) */
 
.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel::after {
/* ==========================================================================
     color: #8A4B2E;
  8. LIENS DU CONTENU
  ========================================================================== */
 
#mw-content a,
#content a {
     color: var(--perche-brown);
}
}


/* Couleur du texte "afficher" dans le sommaire (TOC) */
#mw-content a:visited,
.toctogglecheckbox:checked + .toctitle .toctogglelabel::after {
#content a:visited {
     color: #8A4B2E;
     color: var(--perche-brown-dark);
}
}


.toctitle .toctogglelabel:hover::after {
#mw-content a:hover,
#content a:hover {
    color: var(--perche-green-dark);
     text-decoration: underline;
     text-decoration: underline;
    cursor: pointer;
}
}


/* Ligne sous les titres */
#mw-content a:focus,
#content a:focus {
    outline-color: var(--perche-green);
}
 
 
/* Liens vers pages inexistantes */
#mw-content a.new,
#content a.new {
    color: #A33A2B;
}
 
#mw-content a.new:visited,
#content a.new:visited {
    color: #7E2B22;
}
 
 
/* Liens externes */
#mw-content .mw-parser-output a.external {
    color: var(--perche-brown);
}
 
#mw-content .mw-parser-output a.external:visited {
    color: var(--perche-brown-dark);
}
 
 
/* ==========================================================================
  9. TITRES
  ========================================================================== */
 
#mw-content h1,
#mw-content h2,
#mw-content h3,
#mw-content h4,
#mw-content h5,
#mw-content h6,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    color: var(--perche-green-dark);
}
 
/* Première ligne du titre */
#mw-content h1.firstHeading,
#content h1.firstHeading {
    border-bottom-color: var(--perche-green) !important;
}
 
/* Lignes des titres */
#mw-content h1,
#mw-content h2,
#content h1,
#content h1,
#content h2 {
#content h2 {
     border-bottom-color: #7A9471 !important;
     border-bottom-color: var(--perche-green-light) !important;
}
 
 
/* ==========================================================================
  10. ONGLETS : LIRE / MODIFIER / HISTORIQUE / ETC.
  ========================================================================== */
 
.tools-inline li {
    border-bottom-color: transparent;
}
}


/* Ligne sous l'onglet actif ET au survol, pour tous les onglets de l'en-tête */
.tools-inline li:hover,
#mw-page-header-links .mw-portlet li.selected,
#mw-page-header-links .mw-portlet li.selected a,
#mw-page-header-links .mw-portlet li a:hover,
#mw-page-header-links .mw-portlet li a:hover,
#mw-page-header-links .mw-portlet li a:focus {
#mw-page-header-links .mw-portlet li a:focus {
     border-bottom-color: #7A9471 !important;
     border-bottom-color: var(--perche-green-light) !important;
}
 
.tools-inline li.selected,
#mw-page-header-links .mw-portlet li.selected {
    border-bottom-color: var(--perche-green-dark) !important;
}
}


/* Au cas où la bordure est portée par le <li> lui-même plutôt que le <a> */
.tools-inline li.selected a,
#mw-page-header-links .mw-portlet li.selected a {
    color: var(--perche-green-dark) !important;
}
 
 
/* Compatibilité avec les anciens sélecteurs Timeless */
#p-associated-pages li.selected,
#p-associated-pages li.selected,
#p-views li.selected {
#p-views li.selected {
     border-bottom-color: #7A9471 !important;
     border-bottom-color: var(--perche-green-dark) !important;
}
 
 
/* ==========================================================================
  11. SOMMAIRE / TABLE OF CONTENTS
  ========================================================================== */
 
.toc,
.toccolours,
ul#filetoc {
    background-color: var(--perche-bg) !important;
    color: var(--perche-text);
    border-color: var(--perche-green-light) !important;
}
 
.mw-body .toctitle {
    border-bottom-color: var(--perche-green-light) !important;
}
 
.toctitle h2 {
    color: var(--perche-green-dark);
}
 
.tocnumber {
    color: var(--perche-green);
}
 
/* Afficher / masquer */
.toctogglelabel,
.toctitle .toctogglelabel {
    color: var(--perche-brown) !important;
}
}


/* Couleur de survol des suggestions dans la barre de recherche */
.toctogglelabel:hover,
.toctitle .toctogglelabel:hover {
    color: var(--perche-green-dark) !important;
    text-decoration: underline;
    cursor: pointer;
}
 
 
/* ==========================================================================
  12. TABLEAUX MEDIAWIKI
  ========================================================================== */
 
.wikitable,
.mw-datatable,
.mw_metadata {
    background-color: var(--perche-paper);
    color: var(--perche-text);
    border-color: var(--perche-green-light) !important;
}
 
.wikitable > tr > th,
.wikitable > * > tr > th,
.mw-datatable > tr > th,
.mw-datatable > * > tr > th,
.mw_metadata th {
    background-color: var(--perche-sand) !important;
    color: var(--perche-green-dark);
    border-color: var(--perche-green-light) !important;
}
 
.wikitable > tr > td,
.wikitable > * > tr > td,
.mw-datatable > tr > td,
.mw-datatable > * > tr > td,
.mw_metadata td {
    border-color: var(--perche-green-light) !important;
}
 
/* Survol discret des lignes */
.wikitable > tr:hover > td,
.wikitable > tbody > tr:hover > td {
    background-color: #FBF8F1;
}
 
 
/* ==========================================================================
  13. BLOCS DE CODE / PRÉFORMATÉ
  ========================================================================== */
 
code,
pre,
.mw-code {
    background-color: #F0ECE2 !important;
    color: #302D28 !important;
    border-color: var(--perche-green-light) !important;
}
 
code {
    padding: 1px 4px;
}
 
pre,
.mw-code {
    border-left: 3px solid var(--perche-green) !important;
}
 
 
/* ==========================================================================
  14. IMAGES / MINIATURES
  ========================================================================== */
 
.thumbinner {
    background-color: var(--perche-bg) !important;
    border-color: var(--perche-green-light) !important;
}
 
.thumbinner .thumbimage,
.thumbborder {
    border-color: var(--perche-green-light) !important;
}
 
.thumbcaption {
    color: var(--perche-text);
}
 
 
/* ==========================================================================
  15. BOÎTES MEDIAWIKI
  ========================================================================== */
 
.mw-warning,
.mw-message-box,
.mw-message-box-warning,
.mw-message-box-error,
.mw-message-box-success,
.mw-message-box-notice {
    color: var(--perche-text);
    border-color: var(--perche-green-light);
}
 
/* Boîtes standard */
.mw-message-box {
    background-color: var(--perche-bg);
}
 
/* Avertissement */
.mw-message-box-warning {
    background-color: #FBF2D8;
}
 
/* Erreur */
.mw-message-box-error {
    background-color: #F7E5E0;
}
 
/* Succès */
.mw-message-box-success {
    background-color: #E7F0E3;
}
 
/* Information */
.mw-message-box-notice {
    background-color: #E8EEE5;
}
 
 
/* ==========================================================================
  16. FORMULAIRES / CHAMPS
  ========================================================================== */
 
input,
textarea,
select {
    background-color: var(--perche-paper);
    color: var(--perche-text);
    border-color: var(--perche-green-light);
}
 
input:focus,
textarea:focus,
select:focus {
    border-color: var(--perche-green-dark);
    outline-color: var(--perche-green);
}
 
input::placeholder,
textarea::placeholder {
    color: #6D685F;
}
 
 
/* ==========================================================================
  17. BOUTONS OOUI / MEDIAWIKI
  ========================================================================== */
 
/*
* On ne force pas tous les boutons OOUI à être verts :
* les boutons destructifs/progressifs ont leur propre logique.
* On personnalise principalement les boutons standards.
*/
 
.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive),
.oo-ui-buttonElement-button {
    color: var(--perche-text);
    border-color: var(--perche-green-light);
}
 
.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive):hover,
.oo-ui-buttonElement-button:hover {
    background-color: var(--perche-sand);
    border-color: var(--perche-green);
}
 
/* Boutons d'action principaux */
.mw-ui-progressive,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive {
    background-color: var(--perche-green-dark) !important;
    border-color: var(--perche-green-dark) !important;
    color: #FFFFFF !important;
}
 
.mw-ui-progressive:hover,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive:hover {
    background-color: var(--perche-green) !important;
    border-color: var(--perche-green) !important;
}
 
 
/* ==========================================================================
  18. RECHERCHE
  ========================================================================== */
 
#simpleSearch {
    background-color: var(--perche-paper) !important;
    border-color: var(--perche-green-light) !important;
}
 
#searchInput {
    background-color: transparent !important;
    color: var(--perche-text) !important;
}
 
#searchInput::placeholder {
    color: #6D685F;
}
 
/* Suggestions */
.suggestions {
    background-color: var(--perche-paper) !important;
    border-color: var(--perche-green-light);
}
 
.suggestions-results,
.suggestions-special {
    background-color: var(--perche-paper) !important;
    border-color: var(--perche-green-light) !important;
}
 
.suggestions-result {
    color: var(--perche-text) !important;
}
 
.suggestions-result:hover,
.suggestions-result-current,
.mw-searchSuggest-link:hover,
.mw-searchSuggest-link:hover,
.mw-searchSuggest-link.mw-searchSuggest-active {
    background-color: var(--perche-sand) !important;
    color: var(--perche-text) !important;
}
.suggestions-result-current *,
.mw-searchSuggest-link:hover *,
.mw-searchSuggest-link:hover *,
.mw-searchSuggest-link.mw-searchSuggest-active,
.mw-searchSuggest-link.mw-searchSuggest-active * {
.mw-searchSuggest-link.mw-searchSuggest-active * {
     background-color: #E9E0CC !important;
    color: var(--perche-text) !important;
     color: #2C2A26 !important;
}
 
 
/* ==========================================================================
  19. NOTIFICATIONS / MESSAGES
  ========================================================================== */
 
.usermessage {
     background-color: #FBF2D8;
    border-color: #C9A84C;
    color: var(--perche-text);
}
 
#siteNotice,
#localNotice {
    color: var(--perche-text);
}
 
 
/* ==========================================================================
  20. SÉPARATEURS
  ========================================================================== */
 
hr {
    border-color: var(--perche-green-light) !important;
}
 
 
/* ==========================================================================
  21. PIED DE PAGE
  ========================================================================== */
 
#mw-footer-container,
.mw-footer-container,
#footer {
    background-color: var(--perche-green-dark) !important;
    color: var(--perche-white) !important;
    border-top-color: var(--perche-green-light) !important;
}
 
#mw-footer-container a,
.mw-footer-container a,
#footer a {
     color: var(--perche-white) !important;
}
 
#mw-footer-container a:hover,
.mw-footer-container a:hover,
#footer a:hover {
    color: #FFFFFF !important;
    text-decoration: underline;
}
}


/* Élément sélectionné au clavier dans les suggestions de recherche */
 
.suggestions-result-current,
/* ==========================================================================
.suggestions-result-current .mw-searchSuggest-link,
  22. ICÔNES / ÉLÉMENTS TECHNIQUES
.suggestions-result-current * {
  ========================================================================== */
     background-color: #E9E0CC !important;
 
     color: #2C2A26 !important;
/* Évite que certains éléments techniques héritent d'un fond blanc */
#mw-content-container,
#mw-content,
#bodyContentOuter {
    background-clip: padding-box;
}
 
 
/* ==========================================================================
  23. HAUTEUR DES COLONNES
  ========================================================================== */
 
#mw-site-navigation,
#mw-related-navigation,
#mw-page-tools {
    min-height: 100%;
}
 
 
/* ==========================================================================
  24. RESPONSIVE — TABLETTES ET MOBILES
  ========================================================================== */
 
/*
* Timeless passe progressivement de trois colonnes à une colonne.
* On évite ici de modifier ses largeurs natives.
*/
 
@media screen and (max-width: 850px) {
 
    /* Le fond reste uniforme autour du contenu */
    html,
    body,
    #mw-content-container {
        background-color: var(--perche-bg) !important;
    }
 
    /* Contenu légèrement plus compact */
    #mw-content {
        background-color: var(--perche-paper);
    }
 
    /* Éviter des bordures trop lourdes sur petit écran */
    .wikitable,
    .mw-datatable {
        max-width: 100%;
        overflow-x: auto;
    }
 
    /* Les images larges ne doivent pas déborder */
    .thumbinner img,
    .mw-body img {
        max-width: 100%;
        height: auto;
    }
}
 
 
/* ==========================================================================
  25. ACCESSIBILITÉ — FOCUS CLAVIER
  ========================================================================== */
 
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.oo-ui-buttonElement-button:focus {
    outline: 2px solid var(--perche-green);
    outline-offset: 2px;
}
 
 
/* ==========================================================================
  26. MODE IMPRESSION
  ========================================================================== */
 
@media print {
 
    html,
    body,
    #mw-content-container,
     #mw-content,
    #content,
    .mw-body {
        background: #FFFFFF !important;
        color: #000000 !important;
    }
 
    a,
    a:visited {
        color: #000000 !important;
     }
 
    #mw-header,
    #mw-header-container,
    #mw-site-navigation,
    #mw-related-navigation,
    #mw-page-tools,
    #mw-footer-container,
    #footer {
        background: #FFFFFF !important;
        color: #000000 !important;
    }
 
    .color-bar {
        display: none;
    }
}
}
```

Version du 3 octobre 2026 à 13:35

```css
/* ==========================================================================
   THÈME "PERCHE" — MEDIAWIKI / TIMELESS
   Compatible MediaWiki 1.46+
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETTE
   -------------------------------------------------------------------------- */

:root {
    --perche-bg: #F7F3EA;          /* fond général */
    --perche-paper: #FFFFFF;       /* contenu */
    --perche-sand: #E9E0CC;        /* navigation / panneaux */
    --perche-green-dark: #3B5B3E;  /* vert principal */
    --perche-green: #5C7A4E;       /* vert accent */
    --perche-green-light: #7A9471; /* bordures / séparateurs */
    --perche-brown: #8A4B2E;       /* liens */
    --perche-brown-dark: #6B3A22;  /* liens visités */
    --perche-text: #2C2A26;        /* texte principal */
    --perche-white: #F7F3EA;       /* texte sur vert */
}


/* ==========================================================================
   2. FOND GLOBAL
   ========================================================================== */

html,
body {
    background-color: var(--perche-bg) !important;
    color: var(--perche-text);
}

body {
    min-height: 100%;
}


/* ==========================================================================
   3. EN-TÊTE TIMELESS
   ========================================================================== */

/* Bandeau principal */
#mw-header,
.mw-header,
#mw-header-container,
.mw-header-container,
.mw-header-wrapper,
#mw-head-base,
#mw-page-base {
    background-color: var(--perche-green-dark) !important;
}

/* Texte et liens de l'en-tête */
#mw-header,
#mw-header a,
.mw-header,
.mw-header a,
#mw-header-container a {
    color: var(--perche-white) !important;
}

/* Hover / focus dans l'en-tête */
#mw-header a:hover,
#mw-header a:focus,
.mw-header a:hover,
.mw-header a:focus {
    color: #FFFFFF !important;
}

/* Logo : fond sable */
#p-logo,
#p-logo.mw-portlet {
    background-color: var(--perche-sand) !important;
}

/* Le lien du logo doit rester visible */
#p-logo a,
#p-logo-text a {
    color: var(--perche-text) !important;
}


/* ==========================================================================
   4. BARRE DE COULEUR TIMELESS
   ========================================================================== */

.color-bar {
    background-color: var(--perche-green-light) !important;
}

.color-left,
.color-right {
    background-color: var(--perche-sand) !important;
}

.color-middle,
.color-middle-container {
    background-color: var(--perche-green) !important;
}

.color-middle {
    background-color: var(--perche-green-dark) !important;
}


/* ==========================================================================
   5. ZONE PRINCIPALE
   ========================================================================== */

/* Fond derrière les colonnes */
#mw-content-container {
    background-color: var(--perche-bg) !important;
    border-bottom-color: var(--perche-green-light) !important;
}

/* Contenu */
#mw-content,
#content,
.mw-body {
    background-color: var(--perche-paper);
    color: var(--perche-text);
}

/*
 * #mw-content est le véritable conteneur principal utilisé par Timeless.
 * On conserve #content pour les extensions et anciens sélecteurs.
 */
#mw-content {
    border-color: var(--perche-green-light);
}


/* ==========================================================================
   6. NAVIGATION LATÉRALE
   ========================================================================== */

#mw-site-navigation,
#mw-page-tools,
#mw-related-navigation,
.sidebar-inner,
.sidebar-chunk {
    background-color: var(--perche-sand) !important;
    color: var(--perche-text);
}

/* Suppression des cadres blancs internes */
.sidebar-chunk {
    border: none !important;
    box-shadow: none !important;
}

/* Titres des portlets */
#mw-site-navigation h2,
#mw-page-tools h2,
#mw-related-navigation h2,
.sidebar-inner h2 {
    color: var(--perche-green-dark) !important;
}

/* Liens */
#mw-site-navigation a,
#mw-page-tools a,
#mw-related-navigation a,
.sidebar-inner a,
.sidebar-chunk a,
#mw-site-navigation .mw-portlet-body a,
#mw-page-tools .mw-portlet-body a,
#mw-related-navigation .mw-portlet-body a {
    color: var(--perche-brown) !important;
}

/* Liens visités */
#mw-site-navigation a:visited,
#mw-page-tools a:visited,
#mw-related-navigation a:visited,
.sidebar-inner a:visited,
.sidebar-chunk a:visited {
    color: var(--perche-brown-dark) !important;
}

/* Hover */
#mw-site-navigation a:hover,
#mw-page-tools a:hover,
#mw-related-navigation a:hover,
.sidebar-inner a:hover,
.sidebar-chunk a:hover {
    color: var(--perche-green-dark) !important;
    text-decoration: underline;
}


/* ==========================================================================
   7. MENU PERSONNEL / COMPTE
   ========================================================================== */

/* Menu déroulant */
#personal-inner.dropdown {
    background-color: var(--perche-paper) !important;
    color: var(--perche-text) !important;
    border-color: var(--perche-green-light) !important;
}

/* Liens */
#personal-inner.dropdown a {
    color: var(--perche-text) !important;
}

#personal-inner.dropdown a:visited {
    color: var(--perche-brown-dark) !important;
}

#personal-inner.dropdown a:hover,
#personal-inner.dropdown a:focus {
    background-color: var(--perche-sand) !important;
    color: var(--perche-green-dark) !important;
}


/* ==========================================================================
   8. LIENS DU CONTENU
   ========================================================================== */

#mw-content a,
#content a {
    color: var(--perche-brown);
}

#mw-content a:visited,
#content a:visited {
    color: var(--perche-brown-dark);
}

#mw-content a:hover,
#content a:hover {
    color: var(--perche-green-dark);
    text-decoration: underline;
}

#mw-content a:focus,
#content a:focus {
    outline-color: var(--perche-green);
}


/* Liens vers pages inexistantes */
#mw-content a.new,
#content a.new {
    color: #A33A2B;
}

#mw-content a.new:visited,
#content a.new:visited {
    color: #7E2B22;
}


/* Liens externes */
#mw-content .mw-parser-output a.external {
    color: var(--perche-brown);
}

#mw-content .mw-parser-output a.external:visited {
    color: var(--perche-brown-dark);
}


/* ==========================================================================
   9. TITRES
   ========================================================================== */

#mw-content h1,
#mw-content h2,
#mw-content h3,
#mw-content h4,
#mw-content h5,
#mw-content h6,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    color: var(--perche-green-dark);
}

/* Première ligne du titre */
#mw-content h1.firstHeading,
#content h1.firstHeading {
    border-bottom-color: var(--perche-green) !important;
}

/* Lignes des titres */
#mw-content h1,
#mw-content h2,
#content h1,
#content h2 {
    border-bottom-color: var(--perche-green-light) !important;
}


/* ==========================================================================
   10. ONGLETS : LIRE / MODIFIER / HISTORIQUE / ETC.
   ========================================================================== */

.tools-inline li {
    border-bottom-color: transparent;
}

.tools-inline li:hover,
#mw-page-header-links .mw-portlet li a:hover,
#mw-page-header-links .mw-portlet li a:focus {
    border-bottom-color: var(--perche-green-light) !important;
}

.tools-inline li.selected,
#mw-page-header-links .mw-portlet li.selected {
    border-bottom-color: var(--perche-green-dark) !important;
}

.tools-inline li.selected a,
#mw-page-header-links .mw-portlet li.selected a {
    color: var(--perche-green-dark) !important;
}


/* Compatibilité avec les anciens sélecteurs Timeless */
#p-associated-pages li.selected,
#p-views li.selected {
    border-bottom-color: var(--perche-green-dark) !important;
}


/* ==========================================================================
   11. SOMMAIRE / TABLE OF CONTENTS
   ========================================================================== */

.toc,
.toccolours,
ul#filetoc {
    background-color: var(--perche-bg) !important;
    color: var(--perche-text);
    border-color: var(--perche-green-light) !important;
}

.mw-body .toctitle {
    border-bottom-color: var(--perche-green-light) !important;
}

.toctitle h2 {
    color: var(--perche-green-dark);
}

.tocnumber {
    color: var(--perche-green);
}

/* Afficher / masquer */
.toctogglelabel,
.toctitle .toctogglelabel {
    color: var(--perche-brown) !important;
}

.toctogglelabel:hover,
.toctitle .toctogglelabel:hover {
    color: var(--perche-green-dark) !important;
    text-decoration: underline;
    cursor: pointer;
}


/* ==========================================================================
   12. TABLEAUX MEDIAWIKI
   ========================================================================== */

.wikitable,
.mw-datatable,
.mw_metadata {
    background-color: var(--perche-paper);
    color: var(--perche-text);
    border-color: var(--perche-green-light) !important;
}

.wikitable > tr > th,
.wikitable > * > tr > th,
.mw-datatable > tr > th,
.mw-datatable > * > tr > th,
.mw_metadata th {
    background-color: var(--perche-sand) !important;
    color: var(--perche-green-dark);
    border-color: var(--perche-green-light) !important;
}

.wikitable > tr > td,
.wikitable > * > tr > td,
.mw-datatable > tr > td,
.mw-datatable > * > tr > td,
.mw_metadata td {
    border-color: var(--perche-green-light) !important;
}

/* Survol discret des lignes */
.wikitable > tr:hover > td,
.wikitable > tbody > tr:hover > td {
    background-color: #FBF8F1;
}


/* ==========================================================================
   13. BLOCS DE CODE / PRÉFORMATÉ
   ========================================================================== */

code,
pre,
.mw-code {
    background-color: #F0ECE2 !important;
    color: #302D28 !important;
    border-color: var(--perche-green-light) !important;
}

code {
    padding: 1px 4px;
}

pre,
.mw-code {
    border-left: 3px solid var(--perche-green) !important;
}


/* ==========================================================================
   14. IMAGES / MINIATURES
   ========================================================================== */

.thumbinner {
    background-color: var(--perche-bg) !important;
    border-color: var(--perche-green-light) !important;
}

.thumbinner .thumbimage,
.thumbborder {
    border-color: var(--perche-green-light) !important;
}

.thumbcaption {
    color: var(--perche-text);
}


/* ==========================================================================
   15. BOÎTES MEDIAWIKI
   ========================================================================== */

.mw-warning,
.mw-message-box,
.mw-message-box-warning,
.mw-message-box-error,
.mw-message-box-success,
.mw-message-box-notice {
    color: var(--perche-text);
    border-color: var(--perche-green-light);
}

/* Boîtes standard */
.mw-message-box {
    background-color: var(--perche-bg);
}

/* Avertissement */
.mw-message-box-warning {
    background-color: #FBF2D8;
}

/* Erreur */
.mw-message-box-error {
    background-color: #F7E5E0;
}

/* Succès */
.mw-message-box-success {
    background-color: #E7F0E3;
}

/* Information */
.mw-message-box-notice {
    background-color: #E8EEE5;
}


/* ==========================================================================
   16. FORMULAIRES / CHAMPS
   ========================================================================== */

input,
textarea,
select {
    background-color: var(--perche-paper);
    color: var(--perche-text);
    border-color: var(--perche-green-light);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--perche-green-dark);
    outline-color: var(--perche-green);
}

input::placeholder,
textarea::placeholder {
    color: #6D685F;
}


/* ==========================================================================
   17. BOUTONS OOUI / MEDIAWIKI
   ========================================================================== */

/*
 * On ne force pas tous les boutons OOUI à être verts :
 * les boutons destructifs/progressifs ont leur propre logique.
 * On personnalise principalement les boutons standards.
 */

.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive),
.oo-ui-buttonElement-button {
    color: var(--perche-text);
    border-color: var(--perche-green-light);
}

.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive):hover,
.oo-ui-buttonElement-button:hover {
    background-color: var(--perche-sand);
    border-color: var(--perche-green);
}

/* Boutons d'action principaux */
.mw-ui-progressive,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive {
    background-color: var(--perche-green-dark) !important;
    border-color: var(--perche-green-dark) !important;
    color: #FFFFFF !important;
}

.mw-ui-progressive:hover,
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive:hover {
    background-color: var(--perche-green) !important;
    border-color: var(--perche-green) !important;
}


/* ==========================================================================
   18. RECHERCHE
   ========================================================================== */

#simpleSearch {
    background-color: var(--perche-paper) !important;
    border-color: var(--perche-green-light) !important;
}

#searchInput {
    background-color: transparent !important;
    color: var(--perche-text) !important;
}

#searchInput::placeholder {
    color: #6D685F;
}

/* Suggestions */
.suggestions {
    background-color: var(--perche-paper) !important;
    border-color: var(--perche-green-light);
}

.suggestions-results,
.suggestions-special {
    background-color: var(--perche-paper) !important;
    border-color: var(--perche-green-light) !important;
}

.suggestions-result {
    color: var(--perche-text) !important;
}

.suggestions-result:hover,
.suggestions-result-current,
.mw-searchSuggest-link:hover,
.mw-searchSuggest-link.mw-searchSuggest-active {
    background-color: var(--perche-sand) !important;
    color: var(--perche-text) !important;
}

.suggestions-result-current *,
.mw-searchSuggest-link:hover *,
.mw-searchSuggest-link.mw-searchSuggest-active * {
    color: var(--perche-text) !important;
}


/* ==========================================================================
   19. NOTIFICATIONS / MESSAGES
   ========================================================================== */

.usermessage {
    background-color: #FBF2D8;
    border-color: #C9A84C;
    color: var(--perche-text);
}

#siteNotice,
#localNotice {
    color: var(--perche-text);
}


/* ==========================================================================
   20. SÉPARATEURS
   ========================================================================== */

hr {
    border-color: var(--perche-green-light) !important;
}


/* ==========================================================================
   21. PIED DE PAGE
   ========================================================================== */

#mw-footer-container,
.mw-footer-container,
#footer {
    background-color: var(--perche-green-dark) !important;
    color: var(--perche-white) !important;
    border-top-color: var(--perche-green-light) !important;
}

#mw-footer-container a,
.mw-footer-container a,
#footer a {
    color: var(--perche-white) !important;
}

#mw-footer-container a:hover,
.mw-footer-container a:hover,
#footer a:hover {
    color: #FFFFFF !important;
    text-decoration: underline;
}


/* ==========================================================================
   22. ICÔNES / ÉLÉMENTS TECHNIQUES
   ========================================================================== */

/* Évite que certains éléments techniques héritent d'un fond blanc */
#mw-content-container,
#mw-content,
#bodyContentOuter {
    background-clip: padding-box;
}


/* ==========================================================================
   23. HAUTEUR DES COLONNES
   ========================================================================== */

#mw-site-navigation,
#mw-related-navigation,
#mw-page-tools {
    min-height: 100%;
}


/* ==========================================================================
   24. RESPONSIVE — TABLETTES ET MOBILES
   ========================================================================== */

/*
 * Timeless passe progressivement de trois colonnes à une colonne.
 * On évite ici de modifier ses largeurs natives.
 */

@media screen and (max-width: 850px) {

    /* Le fond reste uniforme autour du contenu */
    html,
    body,
    #mw-content-container {
        background-color: var(--perche-bg) !important;
    }

    /* Contenu légèrement plus compact */
    #mw-content {
        background-color: var(--perche-paper);
    }

    /* Éviter des bordures trop lourdes sur petit écran */
    .wikitable,
    .mw-datatable {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Les images larges ne doivent pas déborder */
    .thumbinner img,
    .mw-body img {
        max-width: 100%;
        height: auto;
    }
}


/* ==========================================================================
   25. ACCESSIBILITÉ — FOCUS CLAVIER
   ========================================================================== */

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.oo-ui-buttonElement-button:focus {
    outline: 2px solid var(--perche-green);
    outline-offset: 2px;
}


/* ==========================================================================
   26. MODE IMPRESSION
   ========================================================================== */

@media print {

    html,
    body,
    #mw-content-container,
    #mw-content,
    #content,
    .mw-body {
        background: #FFFFFF !important;
        color: #000000 !important;
    }

    a,
    a:visited {
        color: #000000 !important;
    }

    #mw-header,
    #mw-header-container,
    #mw-site-navigation,
    #mw-related-navigation,
    #mw-page-tools,
    #mw-footer-container,
    #footer {
        background: #FFFFFF !important;
        color: #000000 !important;
    }

    .color-bar {
        display: none;
    }
}
```
Récupérée de "https://wikiperche.fr/index.php?title=MediaWiki:Timeless.css&oldid=2721"