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

Version du 3 octobre 2026 à 14:01

```css
/* ==========================================================================
   THÈME "PERCHE" — MEDIAWIKI / TIMELESS
   Palette originale conservée
   ========================================================================== */

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


/* ==========================================================================
   PALETTE
   ========================================================================== */

:root {
    --perche-beige: #F7F3EA;
    --perche-blanc: #FFFFFF;
    --perche-sable: #E9E0CC;
    --perche-vert-fonce: #3B5B3E;
    --perche-vert: #5C7A4E;
    --perche-vert-clair: #7A9471;
    --perche-brun: #8A4B2E;
    --perche-brun-fonce: #6B3A22;
    --perche-texte: #2C2A26;
}


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

html {
    background-color: #F7F3EA;
}

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


/* ==========================================================================
   CONTENU PRINCIPAL
   ========================================================================== */

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


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

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

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

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

/* Survol des liens de l'en-tête */
.mw-header a:hover,
.mw-header a:focus,
#mw-header-container a:hover,
#mw-header-container a:focus {
    color: #FFFFFF !important;
}


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


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


/* ==========================================================================
   SIDEBARS / NAVIGATION
   ========================================================================== */

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

/* Cadre interne des portlets */
.sidebar-chunk {
    background-color: #E9E0CC !important;
    border: none !important;
    box-shadow: none !important;
}


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

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


/* ==========================================================================
   LIENS DANS LE CONTENU
   ========================================================================== */

#content a {
    color: #8A4B2E;
}

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

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

```css
/* ==========================================================================
   BOUTONS MEDIAWIKI
   ========================================================================== */

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

/* Liens utilisés comme boutons */
a.mw-ui-button {
    background-color: #5C7A4E !important;
    color: #FFFFFF !important;
}

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

/* Bouton désactivé */
.mw-ui-button:disabled,
.mw-ui-button.disabled {
    background-color: #7A9471 !important;
    color: #F7F3EA !important;
    border-color: #7A9471 !important;
}
```
```css
/* ==========================================================================
   VISUALEDITOR — BARRE D'OUTILS ET BOUTONS
   ========================================================================== */

/* Texte des groupes de boutons, notamment Enregistrer */
.ve-ui-toolbar-group-save,
.ve-ui-toolbar-group-save .oo-ui-labelElement-label,
.ve-ui-toolbar-group-save .oo-ui-tool-name,
.ve-ui-toolbar-group-save .oo-ui-tool-link {
    color: #FFFFFF !important;
}

/* Fond vert du groupe Enregistrer */
.ve-ui-toolbar-group-save {
    background-color: #5C7A4E !important;
}

/* Survol */
.ve-ui-toolbar-group-save:hover,
.ve-ui-toolbar-group-save:hover .oo-ui-labelElement-label,
.ve-ui-toolbar-group-save:hover .oo-ui-tool-link {
    background-color: #3B5B3E !important;
    color: #FFFFFF !important;
}
```

```css id="8nq2rm"
/* ==========================================================================
   VISUALEDITOR — BOUTON « ENREGISTRER LES MODIFICATIONS »
   ========================================================================== */

/* Fond vert + texte blanc */
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button {
    background-color: #5C7A4E !important;
    color: #FFFFFF !important;
    border-color: #3B5B3E !important;
}

/* Le texte interne du bouton */
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button .oo-ui-labelElement-label,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button .oo-ui-widget,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button span {
    color: #FFFFFF !important;
}

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

.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:hover .oo-ui-labelElement-label,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:hover span {
    color: #FFFFFF !important;
}

/* Focus / bouton actif */
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:focus,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:active {
    background-color: #3B5B3E !important;
    color: #FFFFFF !important;
    border-color: #3B5B3E !important;
}

.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:focus .oo-ui-labelElement-label,
.ve-ui-toolbar-group-save .oo-ui-buttonElement-button:active .oo-ui-labelElement-label {
    color: #FFFFFF !important;
}
```



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

/* Les sources restent bru*
```