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

Version du 3 octobre 2026 à 13:41

```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;
    }
}

/* === Survol des sources / références === */

#mw-content .reference a:hover,
#content .reference a:hover,
.mw-references a:hover {
    color: #3B5B3E !important;
    text-decoration: underline;
}
```