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

Dernière version du 3 octobre 2026 à 14:11

```css id="stable-perche-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 stable
   ========================================================================== */


/* ==========================================================================
   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: #F7F3EA;
}

body {
    background-color: #F7F3EA;
    color: #2C2A26;
    min-height: 100%;
}


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

#content {
    background-color: #FFFFFF;
    color: #2C2A26;
}


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

#p-logo,
.mw-header,
#mw-header-container,
header#mw-header {
    background-color: #3B5B3E !important;
}

#p-logo.mw-portlet {
    background-color: #E9E0CC !important;
}

.mw-header,
.mw-header a,
#mw-header-container a {
    color: #F7F3EA !important;
}

.mw-header a:hover,
.mw-header a:focus,
#mw-header-container a:hover,
#mw-header-container a:focus {
    color: #FFFFFF !important;
}


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

#personal-inner.dropdown {
    background-color: #FFFFFF;
    color: #2C2A26 !important;
}

#personal-inner.dropdown a {
    color: #2C2A26 !important;
}

#personal-inner.dropdown a:visited {
    color: #6B3A22 !important;
}

#personal-inner.dropdown a:hover,
#personal-inner.dropdown a:focus {
    background-color: #E9E0CC !important;
    color: #3B5B3E !important;
}


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

#mw-footer-container,
#footer {
    background-color: #3B5B3E !important;
    color: #F7F3EA !important;
}

#footer a,
#mw-footer-container a {
    color: #F7F3EA !important;
}

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


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

#mw-site-navigation,
#mw-page-tools,
.sidebar-inner,
#mw-related-navigation {
    background-color: #E9E0CC !important;
    color: #2C2A26;
}

.sidebar-chunk {
    background-color: #E9E0CC !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: #8A4B2E !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: #6B3A22 !important;
}

#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: #3B5B3E !important;
}


/* ==========================================================================
   9. LIENS DU CONTENU
   ========================================================================== */

#content a {
    color: #8A4B2E;
}

#content a:visited {
    color: #6B3A22;
}

#content a:hover,
#content a:focus {
    color: #3B5B3E;
}


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

#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: #3B5B3E !important;
}


/* ==========================================================================
   11. BORDURES
   ========================================================================== */

#content,
.sidebar-inner,
#mw-site-navigation {
    border-color: #7A9471 !important;
}

hr {
    border-color: #7A9471 !important;
}


/* ==========================================================================
   12. ÉLÉMENTS DU HEADER TIMELESS
   ========================================================================== */

#mw-head-base,
#mw-page-base {
    background-color: #3B5B3E !important;
}

.mw-header-container,
.mw-header-wrapper {
    background-color: #3B5B3E !important;
}


/* ==========================================================================
   13. BARRE DE COULEUR
   ========================================================================== */

.color-bar {
    background-color: #7A9471 !important;
}

.color-middle,
.color-middle-container {
    background-color: #5C7A4E !important;
}

.color-left,
.color-right {
    background-color: #E9E0CC !important;
}


/* ==========================================================================
   14. TITRES
   ========================================================================== */

/* Structure actuelle de MediaWiki */
#content .mw-heading1,
#content .mw-heading2,
#content .mw-heading3,
#content .mw-heading4,
#content .mw-heading5,
#content .mw-heading6 {
    border-bottom-color: #7A9471 !important;
}

/* Compatibilité avec l'ancienne structure */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    border-bottom-color: #7A9471 !important;
}


/* ==========================================================================
   15. ONGLETS
   ========================================================================== */

#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:focus {
    border-bottom-color: #7A9471 !important;
}

#p-associated-pages li.selected,
#p-views li.selected {
    border-bottom-color: #7A9471 !important;
}


/* ==========================================================================
   16. SOMMAIRE
   ========================================================================== */

.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel::after {
    color: #8A4B2E;
}

.toctogglecheckbox:checked + .toctitle .toctogglelabel::after {
    color: #8A4B2E;
}

.toctitle .toctogglelabel:hover::after {
    color: #3B5B3E;
    text-decoration: underline;
    cursor: pointer;
}


/* ==========================================================================
   17. SUGGESTIONS DE RECHERCHE
   ========================================================================== */

.mw-searchSuggest-link:hover,
.mw-searchSuggest-link:hover *,
.mw-searchSuggest-link.mw-searchSuggest-active,
.mw-searchSuggest-link.mw-searchSuggest-active * {
    background-color: #E9E0CC !important;
    color: #2C2A26 !important;
}

.suggestions-result-current,
.suggestions-result-current .mw-searchSuggest-link,
.suggestions-result-current * {
    background-color: #E9E0CC !important;
    color: #2C2A26 !important;
}


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

#simpleSearch {
    border-color: #7A9471 !important;
}

#searchInput {
    color: #2C2A26;
}


/* ==========================================================================
   19. TABLEAUX
   ========================================================================== */

.wikitable {
    border-color: #7A9471 !important;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
    background-color: #E9E0CC !important;
    color: #3B5B3E;
    border-color: #7A9471 !important;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
    border-color: #7A9471 !important;
}


/* ==========================================================================
   20. MINIATURES
   ========================================================================== */

.thumbinner {
    background-color: #F7F3EA !important;
    border-color: #7A9471 !important;
}


/* ==========================================================================
   21. CODE
   ========================================================================== */

pre,
code {
    background-color: #F7F3EA;
    color: #2C2A26;
    border-color: #7A9471;
}


/* ==========================================================================
   22. BOUTONS MEDIAWIKI CLASSIQUES
   ========================================================================== */

/*
 * On conserve uniquement les boutons MediaWiki classiques.
 *
 * IMPORTANT :
 * Pas de .oo-ui-buttonElement-button global ici.
 */

.mw-ui-button {
    background-color: #5C7A4E !important;
    color: #FFFFFF !important;
    border-color: #3B5B3E !important;
}

.mw-ui-button:hover,
.mw-ui-button:focus {
    background-color: #3B5B3E !important;
    color: #FFFFFF !important;
    border-color: #3B5B3E !important;
}


/* ==========================================================================
   23. VISUALEDITOR — ENREGISTRER LES MODIFICATIONS
   ========================================================================== */

/*
 * Ciblage limité au bouton de sauvegarde de VisualEditor.
 * On ne touche PAS aux autres boutons OOUI.
 */

.ve-ui-toolbar-group-save .oo-ui-tool-link {
    background-color: #5C7A4E !important;
    background-image: none !important;
    border-color: #3B5B3E !important;
    color: #FFFFFF !important;
}

/* Texte du bouton */
.ve-ui-toolbar-group-save .oo-ui-tool-link .oo-ui-tool-title,
.ve-ui-toolbar-group-save .oo-ui-tool-link .oo-ui-labelElement-label,
.ve-ui-toolbar-group-save .oo-ui-tool-link * {
    color: #FFFFFF !important;
}

/* Survol */
.ve-ui-toolbar-group-save .oo-ui-tool-link:hover {
    background-color: #3B5B3E !important;
    background-image: none !important;
    border-color: #3B5B3E !important;
    color: #FFFFFF !important;
}

.ve-ui-toolbar-group-save .oo-ui-tool-link:hover * {
    color: #FFFFFF !important;
}


/* ==========================================================================
   24. FOCUS
   ========================================================================== */

#content a:focus,
#mw-site-navigation a:focus,
#mw-page-tools a:focus,
#mw-related-navigation a:focus,
.sidebar-inner a:focus {
    outline-color: #5C7A4E;
}


/* ==========================================================================
   FIN
   ========================================================================== */

/*
 * Aucune modification de :
 * - position
 * - display
 * - width
 * - height
 * - margin
 * - padding
 * - flex
 * - grid
 * - overflow
 *
 * Le layout natif de Timeless est conservé.
 */
```