MediaWiki:Common.css

De WikiRuches
Version datée du 20 juin 2026 à 00:43 par Admin (discussion | contributions) (Thème Ruches v9 — carrés blancs header corrigés)

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

  • Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
  • Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
  • Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
  • Opera : appuyez sur Ctrl + F5.
/* ============================================================
   Thème Ruches v9
   Marine #1a2040 | Rouge #cc2020 | Beige #c9b99a
   ============================================================ */

/* ── 1. Corps global — marine ── */
body,
.mw-page-container,
.mw-page-container-inner {
    background-color: #1a2040 !important;
}

/* ── 2. En-tête — marine + ligne rouge ── */
.vector-header-container,
.vector-header,
.mw-header {
    background-color: #1a2040 !important;
    border-bottom: 2px solid #cc2020 !important;
    box-shadow: none !important;
}

/* Enfants du header — marine */
.vector-header-start,
.vector-header-end,
.vector-header-logo,
.mw-logo,
.mw-logo a,
.mw-logo-container,
.mw-logo-icon,
.mw-logo-wordmark,
.mw-logo-tagline,
#p-logo,
#p-logo a {
    background-color: #1a2040 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Search box — conteneur marine, input blanc, bouton restauré */
.vector-search-box,
.vector-search-box-vue,
.vector-search-box-form,
.cdx-search-input,
.cdx-text-input {
    background-color: #1a2040 !important;
    box-shadow: none !important;
}

.cdx-text-input__input,
#searchInput,
input[name="search"] {
    background-color: #ffffff !important;
    color: #202122 !important;
    border-color: #c9b99a !important;
}

/* Bouton recherche — fond blanc explicite */
.cdx-search-input__end-button,
.vector-search-box .cdx-button {
    background-color: #ffffff !important;
    color: #202122 !important;
    border-color: #c9b99a !important;
    box-shadow: none !important;
}

/* Icônes de notifications — marine */
.vector-user-links .mw-echo-notifications-badge,
.mw-echo-ui-notificationsBadgeButtonWidget,
#pt-notifications-alert,
#pt-notifications-notice {
    background-color: #1a2040 !important;
}

/* ── 3. Zone Admin/utilisateur — rouge ── */
.vector-user-links,
.vector-user-links-main,
.vector-user-menu,
.vector-user-menu-overflow,
.vector-user-menu-dropdown,
#pt-userpage,
.mw-portlet-personal,
#p-personal {
    background-color: #cc2020 !important;
    border-radius: 4px;
    border-bottom: none !important;
}

.vector-user-links a,
.vector-user-links button,
.vector-user-menu a,
.mw-portlet-personal a,
#p-personal a,
.vector-user-links .mw-ui-icon::before {
    color: #ffffff !important;
}

.vector-user-links a:hover,
.mw-portlet-personal a:hover {
    color: #ffe0e0 !important;
    text-decoration: none !important;
}

/* ── 4. Sidebars — marine (portlets spécifiques, PAS les onglets de page) ── */
#p-navigation,
#p-tb,
#p-lang,
#p-coll-print_export,
.vector-main-menu,
#vector-main-menu,
.vector-main-menu-container,
#vector-main-menu-pinned-container,
.vector-toc,
#vector-toc,
.vector-toc-inner,
.vector-toc-container,
.mw-table-of-contents-container,
#vector-toc-pinned-container,
.vector-page-tools,
#vector-page-tools,
.vector-page-tools-container,
#vector-page-tools-pinned-container,
.vector-column-start,
.vector-column-end,
.vector-sidebar-inner,
#mw-panel {
    background-color: #1a2040 !important;
    border-bottom: none !important;
}

/* ── 5. Onglets de page — fond transparent (héritent du blanc du contenu) ── */
.mw-portlet-namespaces,
.mw-portlet-views,
.mw-portlet-cactions,
.vector-menu-tabs,
.vector-menu-tabs-legacy,
#p-namespaces,
#p-views,
#p-cactions {
    background-color: transparent !important;
    border-bottom: none !important;
}

/* ── 6. Zone de contenu — marine ── */
.mw-content-container,
.mw-body,
#content,
#mw-content-text,
.mw-parser-output,
.mw-body-content {
    background-color: #1a2040 !important;
    color: #c9b99a !important;
}

/* Texte courant du contenu */
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output dt,
.mw-parser-output dd,
.mw-parser-output td,
.mw-parser-output th,
.mw-parser-output caption,
.mw-parser-output label {
    color: #c9b99a !important;
}

/* ── 7. Texte dans les sidebars — beige ── */
.mw-portlet-heading,
.vector-menu-heading,
.vector-menu-heading-label,
.vector-pinnable-header-label,
.vector-toc-heading {
    color: #c9b99a !important;
    background: transparent !important;
}

/* ── 7b. Traits rouges (lignes 1-7 annotées) ── */

/* Supprime TOUTES les bordures compilées des headings de portlets */
.mw-portlet-heading,
.vector-menu-heading,
.vector-pinnable-header,
.vector-pinnable-header-label,
.vector-menu-heading-label,
.vector-toc-heading,
#p-navigation h3,
#vector-toc h3 {
    border: none !important;
    border-bottom: none !important;
}

/* Supprime le ::after compilé de header qui crée une ligne blanche */
header::after,
.mw-header::after,
.vector-header-container::after {
    display: none !important;
    border: none !important;
}

/* 1 : trait rouge sous "Menu principal" — sur le contenu */
#p-navigation .vector-menu-content-list {
    border-top: 1px solid #cc2020 !important;
    padding-top: 4px !important;
}

/* 2 : trait rouge sous "Sommaire" — uniquement le conteneur direct */
.vector-toc-contents {
    border-top: 1px solid #cc2020 !important;
}

/* 3 & 4 : traits encadrant la barre d'onglets */
/* Peindre par-dessus la ligne blanche compilée avec un pseudo-élément rouge */
.vector-page-toolbar {
    position: relative !important;
    border-bottom: 1px solid #cc2020 !important;
}
.vector-page-toolbar::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background-color: #cc2020 !important;
    z-index: 10 !important;
}
.vector-page-toolbar::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background-color: #cc2020 !important;
    z-index: 10 !important;
}

/* 5 : traits dans la colonne droite */
.vector-column-end .vector-menu-content-list,
.vector-column-end ul {
    border-top: 1px solid #cc2020 !important;
    padding-top: 4px !important;
}

/* Trait sous "Outils [masquer]" — border-top sur le portlet Actions */
#p-cactions {
    border-top: 1px solid #cc2020 !important;
    padding-top: 4px !important;
}

/* 6 & 7 : séparateurs internes du panneau Outils */
#vector-page-tools-pinned-container hr,
#p-tb hr,
.vector-page-tools hr {
    border: none !important;
    border-top: 1px solid #cc2020 !important;
    margin: 4px 0 !important;
}

/* Puces des listes — beige */
.mw-parser-output ul li::marker,
.mw-parser-output ol li::marker,
.mw-body-content ul li::marker,
.mw-body-content ol li::marker {
    color: #c9b99a !important;
}
/* Fallback pour navigateurs sans support ::marker */
.mw-parser-output ul,
.mw-body-content ul {
    list-style-image: none;
    color: #c9b99a;
}

/* Liens sidebar */
#p-navigation a, #p-tb a,
.vector-toc a,
.vector-main-menu a,
.vector-column-start a,
.vector-column-end a,
#mw-panel a {
    color: #c9b99a !important;
}

#p-navigation a:hover, #p-tb a:hover,
.vector-toc a:hover,
.vector-column-start a:hover,
.vector-column-end a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.vector-toc .vector-toc-link--active {
    color: #cc2020 !important;
    font-weight: bold;
}

.mw-portlet-hide,
.vector-pinnable-header-toggle-button {
    color: #c9b99a !important;
}

/* ── 8. Liens dans le contenu — beige / rouge au survol ── */
#mw-content-text a,
.mw-body-content a,
.mw-parser-output a {
    color: #c9b99a !important;
    text-decoration: underline;
}

#mw-content-text a:visited,
.mw-body-content a:visited {
    color: #a89880 !important;
}

#mw-content-text a:hover,
.mw-body-content a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Pages non créées : rouge */
#mw-content-text a.new,
.mw-body-content a.new {
    color: #cc2020 !important;
}

/* ── 9. Onglets (Lire / Modifier / Historique) ── */
.vector-menu-tabs a,
.vector-menu-tabs-legacy a {
    color: #c9b99a !important;
}

/* Onglet actif — blanc */
.vector-menu-tabs .selected a,
.vector-menu-tabs-legacy .selected a {
    color: #ffffff !important;
    border-bottom: none !important;
}

/* Supprime l'indicateur blanc de l'onglet sélectionné (pseudo-élément compilé) */
.vector-menu-tabs .selected a::after,
.vector-menu-tabs-legacy .selected a::after,
#p-namespaces .selected a::after,
#p-views .selected a::after {
    display: none !important;
}


/* ── 10. Liens [modifier] de section ── */
.mw-editsection a {
    color: #c9b99a !important;
    font-size: 0.85em;
}

/* ── 11. Titres ── */

/* Supprimer le border compilé sur les wrappers H1 */
.mw-body-header,
.mw-body h1,
.mw-first-heading {
    border-bottom: none !important;
    border: none !important;
}
/* Couleur marine sur tout border résiduel autour du H1 */
.mw-body-header,
.vector-body-before-content {
    border-bottom-color: #1a2040 !important;
}

.firstHeading, h1.firstHeading {
    color: #c9b99a !important;
    border: none !important;
    padding-bottom: 0.2em;
}

#mw-content-text h2, .mw-body-content h2 {
    border-bottom: 1px solid #cc2020 !important;
    color: #c9b99a !important;
}

#mw-content-text h3, #mw-content-text h4,
#mw-content-text h5, #mw-content-text h6,
.mw-body-content h3, .mw-body-content h4,
.mw-body-content h5, .mw-body-content h6 {
    color: #c9b99a !important;
}

/* ── 12. Boutons ── */
.mw-ui-button.mw-ui-progressive,
.oo-ui-buttonElement-button.oo-ui-flaggedElement-progressive {
    background-color: #cc2020 !important;
    border-color: #cc2020 !important;
    color: #ffffff !important;
}

/* ── 13. Tables ── */
.wikitable > tr > th, .wikitable > * > tr > th {
    background-color: #0d1428 !important;
    color: #ffffff !important;
    border-color: #cc2020 !important;
}

.wikitable > tr > td, .wikitable > * > tr > td {
    border-color: rgba(201,185,154,0.4) !important;
    background-color: #1e2a4a !important;
    color: #c9b99a !important;
}

/* ── 14a. Boîte d'accueil — fond beige, texte marine ── */
.ruches-welcome-box {
    background-color: #c9b99a !important;
}
.ruches-welcome-box p,
.ruches-welcome-box b,
.ruches-welcome-box a,
.ruches-welcome-box big,
.ruches-welcome-box * {
    color: #1a2040 !important;
    background-color: transparent !important;
}

/* ── 14b. Scrollbars — marine/beige ── */
* {
    scrollbar-color: rgba(201,185,154,0.5) #1a2040;
    scrollbar-width: thin;
}
*::-webkit-scrollbar {
    background-color: #1a2040;
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-thumb {
    background-color: rgba(201,185,154,0.5);
    border-radius: 3px;
}
*::-webkit-scrollbar-track {
    background-color: #1a2040;
}

/* Gradient de débordement des colonnes sticky */
.vector-column-start::after,
.vector-column-end::after,
.vector-toc::after,
.vector-page-tools::after,
.mw-table-of-contents-container::after {
    background: linear-gradient(to bottom, transparent, #1a2040) !important;
}

/* ── 14c. Boîte Proposition et templates flottants ── */
.mw-parser-output table:not(.wikitable),
.mw-parser-output .infobox,
.mw-parser-output .floatright table,
.mw-parser-output .floatleft table {
    background-color: #0d1428 !important;
    color: #c9b99a !important;
    border-color: rgba(201,185,154,0.4) !important;
}
.mw-parser-output table:not(.wikitable) td,
.mw-parser-output table:not(.wikitable) th {
    background-color: #0d1428 !important;
    color: #c9b99a !important;
    border-color: rgba(201,185,154,0.4) !important;
}

/* ── 14. Catégories ── */
#catlinks {
    background-color: #0d1428 !important;
    border-color: rgba(201,185,154,0.4) !important;
    color: #c9b99a !important;
}
#catlinks a { color: #c9b99a !important; }
#catlinks a:hover { color: #ffffff !important; }

/* ── 15. Footer ── */
#footer, .mw-footer {
    background-color: #1a2040 !important;
    border-top: 2px solid #cc2020 !important;
    color: #c9b99a !important;
}
#footer a, .mw-footer a { color: #c9b99a !important; }
#footer a:hover, .mw-footer a:hover { color: #ffffff !important; }