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.

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

/* ==========================================================================
   THÈME "PERCHE" — TIMELESS
   Version conservatrice : ne modifie pas la structure du skin
   ========================================================================== */


/* ==========================================================================
   1. PALETTE
   ========================================================================== */

:root {
    --perche-bg: #F7F3EA;
    --perche-white: #FFFFFF;
    --perche-sand: #E9E0CC;
    --perche-green-dark: #3B5B3E;
    --perche-green: #5C7A4E;
    --perche-green-light: #7A9471;
    --perche-brown: #8A4B2E;
    --perche-brown-dark: #6B3A22;
    --perche-text: #2C2A26;
}


/* ==========================================================================
   2. FOND GÉNÉRAL
   ========================================================================== */

html {
    background-color: var(--perche-bg);
}

body {
    background-color: var(--perche-bg);
    color: var(--perche-text);
    min-height: 100%;
}


/* ==========================================================================
   3. CONTENU
   ========================================================================== */

/*
 * On conserve #content comme dans ton CSS d'origine.
 * NE PAS appliquer de fond à .mw-body :
 * Timeless utilise cette zone pour gérer son propre layout.
 */

#content {
    background-color: var(--perche-white);
    color: var(--perche-text);
}


/* ==========================================================================
   4. EN-TÊTE
   ========================================================================== */

#p-logo,
.mw-header,
#mw-header-container,
header#mw-header {
    background-color: var(--perche-green-dark) !important;
}

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

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

/* Survol des liens du header */
.mw-header a:hover,
.mw-header a:focus,
#mw-header-container a:hover,
#mw-header-container a:focus {
    color: var(--perche-white) !important;
}


/* ==========================================================================
   5. MENU PERSONNEL
   ========================================================================== */

#personal-inner.dropdown {
    background-color: var(--perche-white);
    color: var(--perche-text) !important;
}

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


/* ==========================================================================
   6. PIED DE PAGE
   ========================================================================== */

#mw-footer-container,
#footer {
    background-color: var(--perche-green-dark) !important;
    color: var(--perche-bg) !important;
}

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

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


/* ==========================================================================
   7. BARREAUX / SIDEBARS
   ========================================================================== */

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

/*
 * On conserve uniquement le traitement visuel.
 * Pas de modification de largeur, position, display ou hauteur.
 */

.sidebar-chunk {
    background-color: var(--perche-sand) !important;
    border: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   8. LIENS DES SIDEBARS
   ========================================================================== */

#mw-site-navigation 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,
.sidebar-inner a,
.sidebar-inner .mw-portlet-body a,
.sidebar-chunk a {
    color: var(--perche-brown) !important;
}

#mw-site-navigation a:visited,
#mw-site-navigation .mw-portlet-body 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 .mw-portlet-body a:visited,
.sidebar-chunk a:visited {
    color: var(--perche-brown-dark) !important;
}

/* Survol des liens */
#mw-site-navigation a:hover,
#mw-site-navigation a:focus,
#mw-related-navigation a:hover,
#mw-related-navigation a:focus,
#mw-page-tools a:hover,
#mw-page-tools a:focus,
.sidebar-inner a:hover,
.sidebar-inner a:focus,
.sidebar-chunk a:hover,
.sidebar-chunk a:focus {
    color: var(--perche-green-dark) !important;
}


/* ==========================================================================
   9. LIENS DANS LE CONTENU
   ========================================================================== */

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

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

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


/* ==========================================================================
   10. RÉFÉRENCES / SOURCES
   ========================================================================== */

/*
 * Les références restent brunes au repos.
 * Au survol, elles passent en vert Perche.
 */

#content .reference a:hover,
#content .reference a:focus,
#content sup.reference a:hover,
#content sup.reference a:focus,
#content .mw-references a:hover,
#content .mw-references a:focus {
    color: var(--perche-green-dark) !important;
}


/* ==========================================================================
   11. BORDURES ET SÉPARATEURS
   ========================================================================== */

#content,
.sidebar-inner,
#mw-site-navigation {
    border-color: var(--perche-green-light) !important;
}

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


/* ==========================================================================
   12. ÉLÉMENTS DE FOND DE TIMELESS
   ========================================================================== */

/*
 * Ces éléments sont purement visuels dans Timeless.
 * On ne touche pas aux conteneurs de contenu afin de préserver le layout.
 */

#mw-head-base,
#mw-page-base {
    background-color: var(--perche-green-dark) !important;
}

.mw-header-container,
.mw-header-wrapper {
    background-color: var(--perche-green-dark) !important;
}


/* ==================*
```