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

Version du 23 septembre 2026 à 10:55

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

/* Fond général de la page (hors boîte de contenu) */
body {
    background-color: #F7F3EA;
    color: #2C2A26;
}

/* Boîte de contenu principale */
#content {
    background-color: #FFFFFF;
    color: #2C2A26;
}

/* En-tête */
#p-logo,
.mw-header,
#mw-header-container,
header#mw-header {
    background-color: #3B5B3E !important;
}

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

/* Corrige les liens blancs sur fond blanc dans le menu déroulant personnel */
#personal-inner.dropdown,
#personal-inner.dropdown a {
    color: #2C2A26 !important;
}

/* Optionnel : donner un fond cohérent avec le thème au menu déroulant lui-même */
#personal-inner.dropdown {
    background-color: #FFFFFF;
}

/* 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,
.mw-header,
#mw-header-container a {
    color: #F7F3EA !important;
}

/* Pied de page */
#mw-footer-container,
#footer {
    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) */
#mw-site-navigation,
#mw-page-tools,
.sidebar-inner,
#mw-related-navigation {
    background-color: #E9E0CC !important;
    color: #2C2A26;
}

/* Liens dans le contenu */
#content a {
    color: #8A4B2E;
}
#content a:visited {
    color: #6B3A22;
}

/* Bordures et séparateurs */
#content,
.sidebar-inner,
#mw-site-navigation {
    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 === */

/* Fond racine, au cas où la fenêtre dépasse le layout */
html {
    background-color: #F7F3EA;
}

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

/* Certaines versions de Timeless ont un conteneur englobant header + logo */
.mw-header-container,
.mw-header-wrapper {
    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 */
#mw-site-navigation,
#mw-related-navigation,
#mw-page-tools {
    min-height: 100%;
}

/* 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 */
html, body {
    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 {
    background-color: #E9E0CC !important;
    border: none !important;
    box-shadow: none !important;
}

/* Liens dans les bandeaux latéraux (menu de navigation + colonne d'outils) */
#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;
}

/* Barre de couleur sous l'en-tête */
.color-bar {
    background-color: #7A9471 !important; /* vert feuillage clair, cohérent avec les bordures déjà utilisées */
}

.color-middle,
.color-middle-container {
    background-color: #5C7A4E !important; /* vert olive, accent du thème */
}

.color-left,
.color-right {
    background-color: #E9E0CC !important; /* jaune sable, comme la sidebar */
}

/* Couleur du texte "masquer" dans le sommaire (TOC) */
.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel::after {
    color: #8A4B2E;
}

/* Couleur du texte "afficher" dans le sommaire (TOC) */
.toctogglecheckbox:checked + .toctitle .toctogglelabel::after {
    color: #8A4B2E;
}

.toctitle .toctogglelabel:hover::after {
    text-decoration: underline;
    cursor: pointer;
}

/* Ligne sous les titres */
#content h1,
#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,
#mw-page-header-links .mw-portlet li a:hover,
#mw-page-header-links .mw-portlet li a:focus {
    border-bottom-color: #7A9471 !important;
}

/* Au cas où la bordure est portée par le <li> lui-même plutôt que le <a> */
#p-associated-pages li.selected,
#p-views li.selected {
    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;
}