« 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
Ligne 1 : Ligne 1 :
```css
```css
/* Tout CSS placé ici sera chargé avec les pages accédées par les utilisateurs de l'habillage Timeless */
/* ==========================================================================
/* ==========================================================================
   THÈME "PERCHE" — TIMELESS
   THÈME "PERCHE" — MEDIAWIKI / TIMELESS
   Version conservatrice : ne modifie pas la structure du skin
   Palette originale conservée
   ========================================================================== */
   ========================================================================== */
/* Tout CSS placé ici sera chargé avec les pages accédées par les utilisateurs
  de l'habillage Timeless */




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


:root {
:root {
     --perche-bg: #F7F3EA;
     --perche-beige: #F7F3EA;
     --perche-white: #FFFFFF;
     --perche-blanc: #FFFFFF;
     --perche-sand: #E9E0CC;
     --perche-sable: #E9E0CC;
     --perche-green-dark: #3B5B3E;
     --perche-vert-fonce: #3B5B3E;
     --perche-green: #5C7A4E;
     --perche-vert: #5C7A4E;
     --perche-green-light: #7A9471;
     --perche-vert-clair: #7A9471;
     --perche-brown: #8A4B2E;
     --perche-brun: #8A4B2E;
     --perche-brown-dark: #6B3A22;
     --perche-brun-fonce: #6B3A22;
     --perche-text: #2C2A26;
     --perche-texte: #2C2A26;
}
}




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


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


body {
body {
     background-color: var(--perche-bg);
     background-color: #F7F3EA;
     color: var(--perche-text);
     color: #2C2A26;
     min-height: 100%;
     min-height: 100%;
}
}
Ligne 41 : Ligne 42 :


/* ==========================================================================
/* ==========================================================================
   3. CONTENU
   CONTENU PRINCIPAL
   ========================================================================== */
   ========================================================================== */
/*
* 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 {
#content {
     background-color: var(--perche-white);
     background-color: #FFFFFF;
     color: var(--perche-text);
     color: #2C2A26;
}
}




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


Ligne 64 : Ligne 59 :
#mw-header-container,
#mw-header-container,
header#mw-header {
header#mw-header {
     background-color: var(--perche-green-dark) !important;
     background-color: #3B5B3E !important;
}
}


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


Ligne 76 : Ligne 71 :
.mw-header a,
.mw-header a,
#mw-header-container a {
#mw-header-container a {
     color: var(--perche-bg) !important;
     color: #F7F3EA !important;
}
}


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




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


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


#personal-inner.dropdown a {
#personal-inner.dropdown a {
     color: var(--perche-text) !important;
     color: #2C2A26 !important;
}
}


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


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




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


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


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


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




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


Ligne 141 : Ligne 136 :
.sidebar-inner,
.sidebar-inner,
#mw-related-navigation {
#mw-related-navigation {
     background-color: var(--perche-sand) !important;
     background-color: #E9E0CC !important;
     color: var(--perche-text);
     color: #2C2A26;
}
}


/*
/* Cadre interne des portlets */
* On conserve uniquement le traitement visuel.
* Pas de modification de largeur, position, display ou hauteur.
*/
 
.sidebar-chunk {
.sidebar-chunk {
     background-color: var(--perche-sand) !important;
     background-color: #E9E0CC !important;
     border: none !important;
     border: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
Ligne 158 : Ligne 149 :


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


Ligne 170 : Ligne 161 :
.sidebar-inner .mw-portlet-body a,
.sidebar-inner .mw-portlet-body a,
.sidebar-chunk a {
.sidebar-chunk a {
     color: var(--perche-brown) !important;
     color: #8A4B2E !important;
}
}


Ligne 182 : Ligne 173 :
.sidebar-inner .mw-portlet-body a:visited,
.sidebar-inner .mw-portlet-body a:visited,
.sidebar-chunk a:visited {
.sidebar-chunk a:visited {
     color: var(--perche-brown-dark) !important;
     color: #6B3A22 !important;
}
}


Ligne 196 : Ligne 187 :
.sidebar-chunk a:hover,
.sidebar-chunk a:hover,
.sidebar-chunk a:focus {
.sidebar-chunk a:focus {
     color: var(--perche-green-dark) !important;
     color: #3B5B3E !important;
}
}




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


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


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


#content a:hover,
#content a:hover,
#content a:focus {
#content a:focus {
     color: var(--perche-green-dark);
     color: #3B5B3E;
}
 
 
/* ==========================================================================
  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
   RÉFÉRENCES / SOURCES
   ========================================================================== */
   ========================================================================== */


/*
/* Les sources restent bru*
* 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;
}
 
 
/* ==================*
```
```

Version du 3 octobre 2026 à 13:47

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


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

/* Les sources restent bru*
```
Récupérée de "https://wikiperche.fr/index.php?title=MediaWiki:Timeless.css&oldid=2730"