« 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
Balise : Révocation manuelle
Aucun résumé des modifications
Ligne 1 : Ligne 1 :
```css
/* Tout CSS placé ici sera chargé avec les pages accédées par les utilisateurs de l'habillage Timeless */
/* Tout CSS placé ici sera chargé avec les pages accédées par les utilisateurs de l'habillage Timeless */


/* === Thème "Perche" pour le skin 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);
}


/* Fond général de la page (hors boîte de contenu) */
body {
body {
     background-color: #F7F3EA;
     background-color: var(--perche-bg);
     color: #2C2A26;
     color: var(--perche-text);
    min-height: 100%;
}
}


/* Boîte de contenu principale */
 
/* ==========================================================================
  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 {
#content {
     background-color: #FFFFFF;
     background-color: var(--perche-white);
     color: #2C2A26;
     color: var(--perche-text);
}
}


/* En-tête */
 
/* ==========================================================================
  4. EN-TÊTE
  ========================================================================== */
 
#p-logo,
#p-logo,
.mw-header,
.mw-header,
#mw-header-container,
#mw-header-container,
header#mw-header {
header#mw-header {
     background-color: #3B5B3E !important;
     background-color: var(--perche-green-dark) !important;
}
}


/* Test : logo en jaune sable comme la sidebar */
/* Logo */
#p-logo.mw-portlet {
#p-logo.mw-portlet {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
}
}


/* Corrige les liens blancs sur fond blanc dans le menu déroulant personnel */
/* Texte et liens de l'en-tête */
#personal-inner.dropdown,
.mw-header,
#personal-inner.dropdown a {
.mw-header a,
     color: #2C2A26 !important;
#mw-header-container a {
     color: var(--perche-bg) !important;
}
}


/* Optionnel : donner un fond cohérent avec le thème au menu déroulant lui-même */
/* Survol des liens du header */
#personal-inner.dropdown {
.mw-header a:hover,
     background-color: #FFFFFF;
.mw-header a:focus,
#mw-header-container a:hover,
#mw-header-container a:focus {
     color: var(--perche-white) !important;
}
}


/* Liens visités dans ce menu, pour rester cohérent avec le reste du site */
#personal-inner.dropdown a:visited {
    color: #6B3A22 !important;
}


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


/* Pied de page */
#personal-inner.dropdown {
#mw-footer-container,
     background-color: var(--perche-white);
#footer {
     color: var(--perche-text) !important;
     background-color: #3B5B3E !important;
     color: #F7F3EA !important;
}
#footer a,
#mw-footer-container a {
    color: #F7F3EA !important;
}
}


/* Bandeaux latéraux (menu de navigation gauche + colonne d'outils droite) */
#personal-inner.dropdown a {
#mw-site-navigation,
     color: var(--perche-text) !important;
#mw-page-tools,
.sidebar-inner,
#mw-related-navigation {
     background-color: #E9E0CC !important;
    color: #2C2A26;
}
}


/* Liens dans le contenu */
#personal-inner.dropdown a:visited {
#content a {
     color: var(--perche-brown-dark) !important;
    color: #8A4B2E;
}
#content a:visited {
     color: #6B3A22;
}
}


/* Bordures et séparateurs */
#personal-inner.dropdown a:hover,
#content,
#personal-inner.dropdown a:focus {
.sidebar-inner,
     background-color: var(--perche-sand) !important;
#mw-site-navigation {
    color: var(--perche-green-dark) !important;
     border-color: #7A9471 !important;
}
}


/* Boutons et éléments actifs */
.mw-ui-button,
.oo-ui-buttonElement-button {
    background-color: #5C7A4E;
    color: #F7F3EA;
    border-color: #3B5B3E;
}


/* === Compléments pour combler les blancs résiduels === */
/* ==========================================================================
  6. PIED DE PAGE
  ========================================================================== */


/* Fond racine, au cas où la fenêtre dépasse le layout */
#mw-footer-container,
html {
#footer {
     background-color: #F7F3EA;
     background-color: var(--perche-green-dark) !important;
    color: var(--perche-bg) !important;
}
}


/* Éléments techniques de Timeless qui gèrent l'alignement du header/sidebar
#footer a,
  (souvent invisibles mais avec un fond blanc par défaut) */
#mw-footer-container a {
#mw-head-base,
     color: var(--perche-bg) !important;
#mw-page-base {
     background-color: #3B5B3E !important;
}
}


/* Certaines versions de Timeless ont un conteneur englobant header + logo */
#footer a:hover,
.mw-header-container,
#mw-footer-container a:hover {
.mw-header-wrapper {
     color: var(--perche-white) !important;
     background-color: #3B5B3E !important;
}
}


/* Conteneur global qui enveloppe tout le corps (sidebar + contenu) :
  évite un liseré blanc entre sidebar et contenu ou en bas de colonne */
#mw-content-container,
.mw-body {
    background-color: #F7F3EA;
}


/* S'assure que la sidebar occupe toute sa hauteur sans zone blanche en bas */
/* ==========================================================================
  7. BARREAUX / SIDEBARS
  ========================================================================== */
 
#mw-site-navigation,
#mw-site-navigation,
#mw-related-navigation,
#mw-page-tools,
#mw-page-tools {
.sidebar-inner,
     min-height: 100%;
#mw-related-navigation {
     background-color: var(--perche-sand) !important;
    color: var(--perche-text);
}
}


/* Pied de page : si un espace blanc apparaît sous le footer quand
/*
  le contenu est court, on étend le fond jusqu'en bas de la fenêtre */
* On conserve uniquement le traitement visuel.
html, body {
* Pas de modification de largeur, position, display ou hauteur.
    min-height: 100%;
*/
}
#mw-footer-container {
    background-color: #3B5B3E !important;
    min-height: 0; /* évite un footer qui s'étire de façon disproportionnée */
}


/* Comble la marge blanche autour du cadre sidebar-inner, et supprime le cadre blanc autour sans modifier la mise en page */
.sidebar-chunk {
.sidebar-chunk {
     background-color: #E9E0CC !important;
     background-color: var(--perche-sand) !important;
     border: none !important;
     border: none !important;
     box-shadow: none !important;
     box-shadow: none !important;
}
}


/* Liens dans les bandeaux latéraux (menu de navigation + colonne d'outils) */
 
/* ==========================================================================
  8. LIENS DES SIDEBARS
  ========================================================================== */
 
#mw-site-navigation a,
#mw-site-navigation a,
#mw-site-navigation .mw-portlet-body a,
#mw-site-navigation .mw-portlet-body a,
Ligne 155 : Ligne 170 :
.sidebar-inner .mw-portlet-body a,
.sidebar-inner .mw-portlet-body a,
.sidebar-chunk a {
.sidebar-chunk a {
     color: #8A4B2E !important;
     color: var(--perche-brown) !important;
}
}


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


/* Barre de couleur sous l'en-tête */
/* Survol des liens */
.color-bar {
#mw-site-navigation a:hover,
     background-color: #7A9471 !important; /* vert feuillage clair, cohérent avec les bordures déjà utilisées */
#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;
}
}


.color-middle,
 
.color-middle-container {
/* ==========================================================================
     background-color: #5C7A4E !important; /* vert olive, accent du thème */
  9. LIENS DANS LE CONTENU
  ========================================================================== */
 
#content a {
     color: var(--perche-brown);
}
}


.color-left,
#content a:visited {
.color-right {
     color: var(--perche-brown-dark);
     background-color: #E9E0CC !important; /* jaune sable, comme la sidebar */
}
}


/* Couleur du texte "masquer" dans le sommaire (TOC) */
#content a:hover,
.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel::after {
#content a:focus {
     color: #8A4B2E;
     color: var(--perche-green-dark);
}
}


/* Couleur du texte "afficher" dans le sommaire (TOC) */
 
.toctogglecheckbox:checked + .toctitle .toctogglelabel::after {
/* ==========================================================================
     color: #8A4B2E;
  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;
}
}


.toctitle .toctogglelabel:hover::after {
 
     text-decoration: underline;
/* ==========================================================================
    cursor: pointer;
  11. BORDURES ET SÉPARATEURS
  ========================================================================== */
 
#content,
.sidebar-inner,
#mw-site-navigation {
     border-color: var(--perche-green-light) !important;
}
}


/* Ligne sous les titres */
hr {
#content h1,
     border-color: var(--perche-green-light) !important;
#content h2 {
     border-bottom-color: #7A9471 !important;
}
}


/* Ligne sous l'onglet actif ET au survol, pour tous les onglets de l'en-tête */
 
#mw-page-header-links .mw-portlet li.selected,
/* ==========================================================================
#mw-page-header-links .mw-portlet li.selected a,
  12. ÉLÉMENTS DE FOND DE TIMELESS
#mw-page-header-links .mw-portlet li a:hover,
  ========================================================================== */
#mw-page-header-links .mw-portlet li a:focus {
 
     border-bottom-color: #7A9471 !important;
/*
* 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;
}
}


/* Au cas où la bordure est portée par le <li> lui-même plutôt que le <a> */
.mw-header-container,
#p-associated-pages li.selected,
.mw-header-wrapper {
#p-views li.selected {
     background-color: var(--perche-green-dark) !important;
     border-bottom-color: #7A9471 !important;
}
}


/* Couleur de survol des suggestions dans la barre 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;
}


/* Élément sélectionné au clavier dans les suggestions de recherche */
/* ==================*
.suggestions-result-current,
```
.suggestions-result-current .mw-searchSuggest-link,
.suggestions-result-current * {
    background-color: #E9E0CC !important;
    color: #2C2A26 !important;
}

Version du 3 octobre 2026 à 13:46

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


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