« 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é.
 */
```

Anonyme

Rechercher

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

Espaces de noms

Plus

Actions de la page

Admin (discussion | contributions)

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

Navigation

Navigation

Les communes

Outils wiki

Outils wiki

@@ Ligne 1 : / Ligne 1 : @@
-```css
+```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" — MEDIAWIKI / TIMELESS
+    THÈME "PERCHE" — TIMELESS
-    Compatible MediaWiki 1.46+
+    Version stable
     ========================================================================== */
-/* --------------------------------------------------------------------------
+/* ==========================================================================
 . PALETTE
-    -------------------------------------------------------------------------- */
+    ========================================================================== */
 :root {
-     --perche-bg: #F7F3EA;          /* fond général */
+     --perche-bg: #F7F3EA;
-     --perche-paper: #FFFFFF;       /* contenu */
+     --perche-white: #FFFFFF;
-     --perche-sand: #E9E0CC;        /* navigation / panneaux */
+     --perche-sand: #E9E0CC;
-     --perche-green-dark: #3B5B3E;  /* vert principal */
+     --perche-green-dark: #3B5B3E;
-     --perche-green: #5C7A4E;       /* vert accent */
+     --perche-green: #5C7A4E;
-     --perche-green-light: #7A9471; /* bordures / séparateurs */
+     --perche-green-light: #7A9471;
-     --perche-brown: #8A4B2E;       /* liens */
+     --perche-brown: #8A4B2E;
-     --perche-brown-dark: #6B3A22;  /* liens visités */
+     --perche-brown-dark: #6B3A22;
-     --perche-text: #2C2A26;        /* texte principal */
+     --perche-text: #2C2A26;
-    --perche-white: #F7F3EA;       /* texte sur vert */
 }
 /* ==========================================================================
-. FOND GLOBAL
+. FOND GÉNÉRAL
     ========================================================================== */
-html,
+html {
-body {
+     background-color: #F7F3EA;
-     background-color: var(--perche-bg) !important;
-    color: var(--perche-text);
 }
 body {
+    background-color: #F7F3EA;
+    color: #2C2A26;
      min-height: 100%;
 }
@@ Ligne 39 : / Ligne 43 : @@
 /* ==========================================================================
-. EN-TÊTE TIMELESS
+. CONTENU
     ========================================================================== */
-/* Bandeau principal */
+#content {
-#mw-header,
+    background-color: #FFFFFF;
+    color: #2C2A26;
+}
+/* ==========================================================================
+. EN-TÊTE
+   ========================================================================== */
+#p-logo,
 .mw-header,
 #mw-header-container,
-.mw-header-container,
+header#mw-header {
-.mw-header-wrapper,
+    background-color: #3B5B3E !important;
-#mw-head-base,
+}
-#mw-page-base {
-     background-color: var(--perche-green-dark) !important;
+#p-logo.mw-portlet {
+     background-color: #E9E0CC !important;
 }
-/* Texte et liens de l'en-tête */
-#mw-header,
-#mw-header a,
 .mw-header,
 .mw-header a,
 #mw-header-container a {
-     color: var(--perche-white) !important;
+     color: #F7F3EA !important;
 }
-/* Hover / focus dans l'en-tête */
-#mw-header a:hover,
-#mw-header a:focus,
 .mw-header a:hover,
-.mw-header a:focus {
+.mw-header a:focus,
+#mw-header-container a:hover,
+#mw-header-container a:focus {
      color: #FFFFFF !important;
-}
-/* Logo : fond sable */
-#p-logo,
-#p-logo.mw-portlet {
-    background-color: var(--perche-sand) !important;
-}
-/* Le lien du logo doit rester visible */
-#p-logo a,
-#p-logo-text a {
-    color: var(--perche-text) !important;
 }
 /* ==========================================================================
-. BARRE DE COULEUR TIMELESS
+. MENU PERSONNEL
     ========================================================================== */
-.color-bar {
+#personal-inner.dropdown {
-     background-color: var(--perche-green-light) !important;
+     background-color: #FFFFFF;
+    color: #2C2A26 !important;
 }
-.color-left,
+#personal-inner.dropdown a {
-.color-right {
+     color: #2C2A26 !important;
-     background-color: var(--perche-sand) !important;
 }
-.color-middle,
+#personal-inner.dropdown a:visited {
-.color-middle-container {
+     color: #6B3A22 !important;
-     background-color: var(--perche-green) !important;
 }
-.color-middle {
+#personal-inner.dropdown a:hover,
-     background-color: var(--perche-green-dark) !important;
+#personal-inner.dropdown a:focus {
+     background-color: #E9E0CC !important;
+    color: #3B5B3E !important;
 }
 /* ==========================================================================
-. ZONE PRINCIPALE
+. PIED DE PAGE
     ========================================================================== */
-/* Fond derrière les colonnes */
+#mw-footer-container,
-#mw-content-container {
+#footer {
-     background-color: var(--perche-bg) !important;
+     background-color: #3B5B3E !important;
-     border-bottom-color: var(--perche-green-light) !important;
+     color: #F7F3EA !important;
 }
-/* Contenu */
+#footer a,
-#mw-content,
+#mw-footer-container a {
-#content,
+     color: #F7F3EA !important;
-.mw-body {
-     background-color: var(--perche-paper);
-    color: var(--perche-text);
 }
-/*
+#footer a:hover,
- * #mw-content est le véritable conteneur principal utilisé par Timeless.
+#mw-footer-container a:hover {
- * On conserve #content pour les extensions et anciens sélecteurs.
+     color: #FFFFFF !important;
- */
-#mw-content {
-     border-color: var(--perche-green-light);
 }
 /* ==========================================================================
-. NAVIGATION LATÉRALE
+. SIDEBARS
     ========================================================================== */
 #mw-site-navigation,
 #mw-page-tools,
-#mw-related-navigation,
 .sidebar-inner,
-.sidebar-chunk {
+#mw-related-navigation {
-     background-color: var(--perche-sand) !important;
+     background-color: #E9E0CC !important;
-     color: var(--perche-text);
+     color: #2C2A26;
 }
-/* Suppression des cadres blancs internes */
 .sidebar-chunk {
+    background-color: #E9E0CC !important;
      border: none !important;
      box-shadow: none !important;
 }
-/* Titres des portlets */
-#mw-site-navigation h2,
-#mw-page-tools h2,
-#mw-related-navigation h2,
-.sidebar-inner h2 {
-    color: var(--perche-green-dark) !important;
-}
-/* Liens */
+/* ==========================================================================
+. 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-related-navigation a,
+#mw-page-tools .mw-portlet-body a,
 .sidebar-inner a,
-.sidebar-chunk a,
+.sidebar-inner .mw-portlet-body a,
-#mw-site-navigation .mw-portlet-body a,
+.sidebar-chunk a {
-#mw-page-tools .mw-portlet-body a,
+     color: #8A4B2E !important;
-#mw-related-navigation .mw-portlet-body a {
-     color: var(--perche-brown) !important;
 }
-/* Liens visités */
 #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-related-navigation 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;
+     color: #6B3A22 !important;
 }
-/* Hover */
 #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-related-navigation a:hover,
+#mw-page-tools a:focus,
 .sidebar-inner a:hover,
-.sidebar-chunk a:hover {
+.sidebar-inner a:focus,
-     color: var(--perche-green-dark) !important;
+.sidebar-chunk a:hover,
-    text-decoration: underline;
+.sidebar-chunk a:focus {
+     color: #3B5B3E !important;
 }
 /* ==========================================================================
-. MENU PERSONNEL / COMPTE
+. LIENS DU CONTENU
     ========================================================================== */
-/* Menu déroulant */
+#content a {
-#personal-inner.dropdown {
+     color: #8A4B2E;
-     background-color: var(--perche-paper) !important;
-    color: var(--perche-text) !important;
-    border-color: var(--perche-green-light) !important;
 }
-/* Liens */
+#content a:visited {
-#personal-inner.dropdown a {
+     color: #6B3A22;
-     color: var(--perche-text) !important;
 }
-#personal-inner.dropdown a:visited {
+#content a:hover,
-     color: var(--perche-brown-dark) !important;
+#content a:focus {
+     color: #3B5B3E;
 }
-#personal-inner.dropdown a:hover,
-#personal-inner.dropdown a:focus {
+/* ==========================================================================
-    background-color: var(--perche-sand) !important;
+. RÉFÉRENCES
-     color: var(--perche-green-dark) !important;
+   ========================================================================== */
+#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;
 }
 /* ==========================================================================
-. LIENS DU CONTENU
+. BORDURES
     ========================================================================== */
-#mw-content a,
+#content,
-#content a {
+.sidebar-inner,
-     color: var(--perche-brown);
+#mw-site-navigation {
+     border-color: #7A9471 !important;
 }
-#mw-content a:visited,
+hr {
-#content a:visited {
+     border-color: #7A9471 !important;
-     color: var(--perche-brown-dark);
 }
-#mw-content a:hover,
-#content a:hover {
+/* ==========================================================================
-    color: var(--perche-green-dark);
+. ÉLÉMENTS DU HEADER TIMELESS
-     text-decoration: underline;
+   ========================================================================== */
+#mw-head-base,
+#mw-page-base {
+     background-color: #3B5B3E !important;
 }
-#mw-content a:focus,
+.mw-header-container,
-#content a:focus {
+.mw-header-wrapper {
-     outline-color: var(--perche-green);
+     background-color: #3B5B3E !important;
 }
-/* Liens vers pages inexistantes */
+/* ==========================================================================
-#mw-content a.new,
+. BARRE DE COULEUR
-#content a.new {
+   ========================================================================== */
-    color: #A33A2B;
-}
-#mw-content a.new:visited,
+.color-bar {
-#content a.new:visited {
+     background-color: #7A9471 !important;
-     color: #7E2B22;
 }
+.color-middle,
-/* Liens externes */
+.color-middle-container {
-#mw-content .mw-parser-output a.external {
+     background-color: #5C7A4E !important;
-     color: var(--perche-brown);
 }
-#mw-content .mw-parser-output a.external:visited {
+.color-left,
-     color: var(--perche-brown-dark);
+.color-right {
+     background-color: #E9E0CC !important;
 }
 /* ==========================================================================
 . TITRES
     ========================================================================== */
-#mw-content h1,
+/* Structure actuelle de MediaWiki */
-#mw-content h2,
+#content .mw-heading1,
-#mw-content h3,
+#content .mw-heading2,
-#mw-content h4,
+#content .mw-heading3,
-#mw-content h5,
+#content .mw-heading4,
-#mw-content h6,
+#content .mw-heading5,
+#content .mw-heading6 {
+    border-bottom-color: #7A9471 !important;
+}
+/* Compatibilité avec l'ancienne structure */
 #content h1,
 #content h2,
@@ Ligne 283 : / Ligne 289 : @@
 #content h5,
 #content h6 {
-    color: var(--perche-green-dark);
+     border-bottom-color: #7A9471 !important;
-}
-/* Première ligne du titre */
-#mw-content h1.firstHeading,
-#content h1.firstHeading {
-     border-bottom-color: var(--perche-green) !important;
-}
-/* Lignes des titres */
-#mw-content h1,
-#mw-content h2,
-#content h1,
-#content h2 {
-    border-bottom-color: var(--perche-green-light) !important;
 }
 /* ==========================================================================
-. ONGLETS : LIRE / MODIFIER / HISTORIQUE / ETC.
+. ONGLETS
     ========================================================================== */
-.tools-inline li {
+#mw-page-header-links .mw-portlet li.selected,
-    border-bottom-color: transparent;
+#mw-page-header-links .mw-portlet li.selected a,
-}
-.tools-inline li:hover,
 #mw-page-header-links .mw-portlet li a:hover,
 #mw-page-header-links .mw-portlet li a:focus {
-     border-bottom-color: var(--perche-green-light) !important;
+     border-bottom-color: #7A9471 !important;
 }
-.tools-inline li.selected,
-#mw-page-header-links .mw-portlet li.selected {
-    border-bottom-color: var(--perche-green-dark) !important;
-}
-.tools-inline li.selected a,
-#mw-page-header-links .mw-portlet li.selected a {
-    color: var(--perche-green-dark) !important;
-}
-/* Compatibilité avec les anciens sélecteurs Timeless */
 #p-associated-pages li.selected,
 #p-views li.selected {
-     border-bottom-color: var(--perche-green-dark) !important;
+     border-bottom-color: #7A9471 !important;
 }
 /* ==========================================================================
-. SOMMAIRE / TABLE OF CONTENTS
+. SOMMAIRE
     ========================================================================== */
-.toc,
+.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel::after {
-.toccolours,
+     color: #8A4B2E;
-ul#filetoc {
-    background-color: var(--perche-bg) !important;
-    color: var(--perche-text);
-    border-color: var(--perche-green-light) !important;
-}
-.mw-body .toctitle {
-    border-bottom-color: var(--perche-green-light) !important;
-}
-.toctitle h2 {
-    color: var(--perche-green-dark);
-}
-.tocnumber {
-     color: var(--perche-green);
 }
-/* Afficher / masquer */
+.toctogglecheckbox:checked + .toctitle .toctogglelabel::after {
-.toctogglelabel,
+     color: #8A4B2E;
-.toctitle .toctogglelabel {
-     color: var(--perche-brown) !important;
 }
-.toctogglelabel:hover,
+.toctitle .toctogglelabel:hover::after {
-.toctitle .toctogglelabel:hover {
+     color: #3B5B3E;
-     color: var(--perche-green-dark) !important;
      text-decoration: underline;
      cursor: pointer;
@@ Ligne 372 : / Ligne 330 : @@
 /* ==========================================================================
-. TABLEAUX MEDIAWIKI
+. SUGGESTIONS DE RECHERCHE
     ========================================================================== */
-.wikitable,
+.mw-searchSuggest-link:hover,
-.mw-datatable,
+.mw-searchSuggest-link:hover *,
-.mw_metadata {
+.mw-searchSuggest-link.mw-searchSuggest-active,
-    background-color: var(--perche-paper);
+.mw-searchSuggest-link.mw-searchSuggest-active * {
-     color: var(--perche-text);
+     background-color: #E9E0CC !important;
-     border-color: var(--perche-green-light) !important;
+     color: #2C2A26 !important;
 }
-.wikitable > tr > th,
+.suggestions-result-current,
-.wikitable > * > tr > th,
+.suggestions-result-current .mw-searchSuggest-link,
-.mw-datatable > tr > th,
+.suggestions-result-current * {
-.mw-datatable > * > tr > th,
+     background-color: #E9E0CC !important;
-.mw_metadata th {
+     color: #2C2A26 !important;
-    background-color: var(--perche-sand) !important;
-    color: var(--perche-green-dark);
-    border-color: var(--perche-green-light) !important;
-}
-.wikitable > tr > td,
-.wikitable > * > tr > td,
-.mw-datatable > tr > td,
-.mw-datatable > * > tr > td,
-.mw_metadata td {
-     border-color: var(--perche-green-light) !important;
-}
-/* Survol discret des lignes */
-.wikitable > tr:hover > td,
-.wikitable > tbody > tr:hover > td {
-     background-color: #FBF8F1;
 }
 /* ==========================================================================
-. BLOCS DE CODE / PRÉFORMATÉ
+. RECHERCHE
     ========================================================================== */
-code,
+#simpleSearch {
-pre,
+     border-color: #7A9471 !important;
-.mw-code {
-     background-color: #F0ECE2 !important;
-    color: #302D28 !important;
-    border-color: var(--perche-green-light) !important;
 }
-code {
+#searchInput {
-     padding: 1px 4px;
+     color: #2C2A26;
-}
-pre,
-.mw-code {
-    border-left: 3px solid var(--perche-green) !important;
 }
 /* ==========================================================================
-. IMAGES / MINIATURES
+. TABLEAUX
     ========================================================================== */
-.thumbinner {
+.wikitable {
-    background-color: var(--perche-bg) !important;
+     border-color: #7A9471 !important;
-     border-color: var(--perche-green-light) !important;
 }
-.thumbinner .thumbimage,
+.wikitable > tr > th,
-.thumbborder {
+.wikitable > * > tr > th {
-     border-color: var(--perche-green-light) !important;
+    background-color: #E9E0CC !important;
+    color: #3B5B3E;
+     border-color: #7A9471 !important;
 }
-.thumbcaption {
+.wikitable > tr > td,
-     color: var(--perche-text);
+.wikitable > * > tr > td {
+     border-color: #7A9471 !important;
 }
 /* ==========================================================================
-. BOÎTES MEDIAWIKI
+. MINIATURES
     ========================================================================== */
-.mw-warning,
+.thumbinner {
-.mw-message-box,
+     background-color: #F7F3EA !important;
-.mw-message-box-warning,
+     border-color: #7A9471 !important;
-.mw-message-box-error,
-.mw-message-box-success,
-.mw-message-box-notice {
-    color: var(--perche-text);
-    border-color: var(--perche-green-light);
-}
-/* Boîtes standard */
-.mw-message-box {
-    background-color: var(--perche-bg);
-}
-/* Avertissement */
-.mw-message-box-warning {
-     background-color: #FBF2D8;
-}
-/* Erreur */
-.mw-message-box-error {
-     background-color: #F7E5E0;
-}
-/* Succès */
-.mw-message-box-success {
-    background-color: #E7F0E3;
-}
-/* Information */
-.mw-message-box-notice {
-    background-color: #E8EEE5;
 }
 /* ==========================================================================
-. FORMULAIRES / CHAMPS
+. CODE
     ========================================================================== */
-input,
+pre,
-textarea,
+code {
-select {
+     background-color: #F7F3EA;
-     background-color: var(--perche-paper);
+     color: #2C2A26;
-     color: var(--perche-text);
+     border-color: #7A9471;
-    border-color: var(--perche-green-light);
-}
-input:focus,
-textarea:focus,
-select:focus {
-     border-color: var(--perche-green-dark);
-    outline-color: var(--perche-green);
-}
-input::placeholder,
-textarea::placeholder {
-    color: #6D685F;
 }
 /* ==========================================================================
-. BOUTONS OOUI / MEDIAWIKI
+. BOUTONS MEDIAWIKI CLASSIQUES
     ========================================================================== */
 /*
-  * On ne force pas tous les boutons OOUI à être verts :
+  * On conserve uniquement les boutons MediaWiki classiques.
-  * les boutons destructifs/progressifs ont leur propre logique.
+ *
-  * On personnalise principalement les boutons standards.
+  * IMPORTANT :
+  * Pas de .oo-ui-buttonElement-button global ici.
   */
-.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive),
+.mw-ui-button {
-.oo-ui-buttonElement-button {
+     background-color: #5C7A4E !important;
-     color: var(--perche-text);
+     color: #FFFFFF !important;
-    border-color: var(--perche-green-light);
+     border-color: #3B5B3E !important;
-}
-.mw-ui-button:not(.mw-ui-progressive):not(.mw-ui-destructive):hover,
-.oo-ui-buttonElement-button:hover {
-     background-color: var(--perche-sand);
-     border-color: var(--perche-green);
 }
-/* Boutons d'action principaux */
+.mw-ui-button:hover,
-.mw-ui-progressive,
+.mw-ui-button:focus {
-.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive {
+     background-color: #3B5B3E !important;
-     background-color: var(--perche-green-dark) !important;
-    border-color: var(--perche-green-dark) !important;
      color: #FFFFFF !important;
-}
+     border-color: #3B5B3E !important;
-.mw-ui-progressive:hover,
-.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive:hover {
-    background-color: var(--perche-green) !important;
-     border-color: var(--perche-green) !important;
 }
 /* ==========================================================================
-. RECHERCHE
+. VISUALEDITOR — ENREGISTRER LES MODIFICATIONS
     ========================================================================== */
-#simpleSearch {
+/*
-    background-color: var(--perche-paper) !important;
+ * Ciblage limité au bouton de sauvegarde de VisualEditor.
-    border-color: var(--perche-green-light) !important;
+ * On ne touche PAS aux autres boutons OOUI.
-}
+ */
-#searchInput {
+.ve-ui-toolbar-group-save .oo-ui-tool-link {
-     background-color: transparent !important;
+    background-color: #5C7A4E !important;
-     color: var(--perche-text) !important;
+     background-image: none !important;
+    border-color: #3B5B3E !important;
+     color: #FFFFFF !important;
 }
-#searchInput::placeholder {
+/* Texte du bouton */
-     color: #6D685F;
+.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;
 }
-/* Suggestions */
+/* Survol */
-.suggestions {
+.ve-ui-toolbar-group-save .oo-ui-tool-link:hover {
-    background-color: var(--perche-paper) !important;
+     background-color: #3B5B3E !important;
-    border-color: var(--perche-green-light);
+     background-image: none !important;
-}
+     border-color: #3B5B3E !important;
+     color: #FFFFFF !important;
-.suggestions-results,
-.suggestions-special {
-    background-color: var(--perche-paper) !important;
-    border-color: var(--perche-green-light) !important;
-}
-.suggestions-result {
-    color: var(--perche-text) !important;
-}
-.suggestions-result:hover,
-.suggestions-result-current,
-.mw-searchSuggest-link:hover,
-.mw-searchSuggest-link.mw-searchSuggest-active {
-     background-color: var(--perche-sand) !important;
-     color: var(--perche-text) !important;
-}
-.suggestions-result-current *,
-.mw-searchSuggest-link:hover *,
-.mw-searchSuggest-link.mw-searchSuggest-active * {
-    color: var(--perche-text) !important;
-}
-/* ==========================================================================
-. NOTIFICATIONS / MESSAGES
-   ========================================================================== */
-.usermessage {
-     background-color: #FBF2D8;
-     border-color: #C9A84C;
-    color: var(--perche-text);
 }
-#siteNotice,
+.ve-ui-toolbar-group-save .oo-ui-tool-link:hover * {
-#localNotice {
-    color: var(--perche-text);
-}
-/* ==========================================================================
-. SÉPARATEURS
-   ========================================================================== */
-hr {
-    border-color: var(--perche-green-light) !important;
-}
-/* ==========================================================================
-. PIED DE PAGE
-   ========================================================================== */
-#mw-footer-container,
-.mw-footer-container,
-#footer {
-    background-color: var(--perche-green-dark) !important;
-    color: var(--perche-white) !important;
-    border-top-color: var(--perche-green-light) !important;
-}
-#mw-footer-container a,
-.mw-footer-container a,
-#footer a {
-    color: var(--perche-white) !important;
-}
-#mw-footer-container a:hover,
-.mw-footer-container a:hover,
-#footer a:hover {
      color: #FFFFFF !important;
-    text-decoration: underline;
-}
-/* ==========================================================================
-. ICÔNES / ÉLÉMENTS TECHNIQUES
-   ========================================================================== */
-/* Évite que certains éléments techniques héritent d'un fond blanc */
-#mw-content-container,
-#mw-content,
-#bodyContentOuter {
-    background-clip: padding-box;
 }
 /* ==========================================================================
-. HAUTEUR DES COLONNES
+. FOCUS
     ========================================================================== */
-#mw-site-navigation,
+#content a:focus,
-#mw-related-navigation,
+#mw-site-navigation a:focus,
-#mw-page-tools {
+#mw-page-tools a:focus,
-     min-height: 100%;
+#mw-related-navigation a:focus,
+.sidebar-inner a:focus {
+     outline-color: #5C7A4E;
 }
 /* ==========================================================================
-. RESPONSIVE — TABLETTES ET MOBILES
+    FIN
     ========================================================================== */
 /*
-  * Timeless passe progressivement de trois colonnes à une colonne.
+  * Aucune modification de :
-  * On évite ici de modifier ses largeurs natives.
+ * - position
+ * - display
+ * - width
+ * - height
+ * - margin
+ * - padding
+ * - flex
+ * - grid
+ * - overflow
+ *
+  * Le layout natif de Timeless est conservé.
   */
-@media screen and (max-width: 850px) {
-    /* Le fond reste uniforme autour du contenu */
-    html,
-    body,
-    #mw-content-container {
-        background-color: var(--perche-bg) !important;
-    }
-    /* Contenu légèrement plus compact */
-    #mw-content {
-        background-color: var(--perche-paper);
-    }
-    /* Éviter des bordures trop lourdes sur petit écran */
-    .wikitable,
-    .mw-datatable {
-        max-width: 100%;
-        overflow-x: auto;
-    }
-    /* Les images larges ne doivent pas déborder */
-    .thumbinner img,
-    .mw-body img {
-        max-width: 100%;
-        height: auto;
-    }
-}
-/* ==========================================================================
-. ACCESSIBILITÉ — FOCUS CLAVIER
-   ========================================================================== */
-a:focus,
-button:focus,
-input:focus,
-textarea:focus,
-select:focus,
-.oo-ui-buttonElement-button:focus {
-    outline: 2px solid var(--perche-green);
-    outline-offset: 2px;
-}
-/* ==========================================================================
-. MODE IMPRESSION
-   ========================================================================== */
-@media print {
-    html,
-    body,
-    #mw-content-container,
-    #mw-content,
-    #content,
-    .mw-body {
-        background: #FFFFFF !important;
-        color: #000000 !important;
-    }
-    a,
-    a:visited {
-        color: #000000 !important;
-    }
-    #mw-header,
-    #mw-header-container,
-    #mw-site-navigation,
-    #mw-related-navigation,
-    #mw-page-tools,
-    #mw-footer-container,
-    #footer {
-        background: #FFFFFF !important;
-        color: #000000 !important;
-    }
-    .color-bar {
-        display: none;
-    }
-}
 ```

Anonyme

Rechercher

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

Admin (discussion | contributions)

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

Navigation

Outils wiki

Outils de la page

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