Basculer le menu
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

MediaWiki:Citizen.css

Page de l’interface de MediaWiki
Version datée du 28 octobre 2026 à 22:18 par Thomas234 (discussion | contributions) (Barre du bas v3 : verre gris-bleu pâle translucide, icônes et logo bleus (plus discrète))

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).
  •  Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.


.page-Spécial_Connexion #footer-icons {
    display: none !important;
}


.noprint {
display: none !important;
}

/* Hide the three dots (more menu) */
.citizen-page-actions-toggle {
    display: none !important;
}

/* Hide entire actions menu */
.citizen-page-actions {
    display: none !important;
}

/* Date modified */
.page-info {
    display: none !important;
}

#citizen-sidebar-lastmod {
  display: none !important;
}

.citizen-menu__heading {
  display: none !important;
}

@media (max-width: 768px) {
    .citizen-footer__content {
        padding-bottom: 80px !important;
    }
}

/* ====== Barre Microguide (Mélange 1 + logo B), 2026-10-28 ====== */
/* Barre du bas : bleu du site, filet bleu clair, recherche en pilule, logo redessiné. Aussi en bas sur ordinateur. */
:root { --mg-barre: rgba(227,234,242,.78); --mg-filet: #c3d1df; } /* gris-bleu pâle translucide */

.citizen-header {
	top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	width: auto !important; height: 60px !important;
	flex-direction: row !important; align-items: center !important; gap: 6px;
	padding: 0 10px !important;
	background: var(--mg-barre) !important;
	border: 0 !important; border-top: 2px solid var(--mg-filet) !important;
	box-shadow: none !important;
}
.citizen-header::before, .citizen-header::after { display: none !important; } /* voile pâle de Citizen sur cellulaire */
.citizen-page-container { padding-left: 0 !important; }
.citizen-footer { padding-bottom: 90px !important; }

/* sur ordinateur : logo, recherche, menu et compte regroupés au centre (pas étalés sur toute la largeur) */
.citizen-header { justify-content: center !important; }
@media (min-width: 720px) {
	.citizen-search { flex: 0 1 560px !important; }
	.citizen-header__logo { margin-right: 10px !important; }
}

/* ordre : logo, recherche, menu, compte */
.citizen-header__logo { order: 0; margin: 0 !important; padding: 0 !important; flex: 0 0 auto; border: 0 !important; }
.citizen-search { order: 1; flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.citizen-drawer { order: 2; }
.citizen-header__inner { order: 3; flex: 0 0 auto !important; flex-direction: row !important; height: auto !important; width: auto !important; }
.citizen-header__inner .citizen-header__start { display: none; }

/* icônes blanches */
.citizen-header .citizen-dropdown-summary,
.citizen-header .citizen-dropdown-summary svg,
.citizen-header .citizen-ui-icon { color: #3f7490 !important; }
.citizen-header .citizen-ui-icon::before { background-color: #3f7490 !important; }
.citizen-header .citizen-dropdown-summary:hover { background: rgba(63,116,144,.10) !important; }

/* logo redessiné (stéthoscope, bouclier, bacille à pili), sans texte */
.citizen-header__logo .mw-logo { width: 44px !important; height: 44px !important; padding: 0 !important; background: none !important; }
.citizen-header__logo .mw-logo-icon,
.citizen-header__logo .mw-ui-icon-home { display: none !important; }
.citizen-header__logo .mw-logo::before {
	content: ""; display: block; width: 42px; height: 42px; margin: auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' aria-label='Microguide'%3E%3Cg fill='none' stroke='%233f7490' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M15 5.5C8.6 9 5.6 16 6.6 23c.9 6 6 10.3 13.4 10.9'/%3E%3Cpath d='M25 5.5c6.4 3.5 9.4 10.5 8.4 17.5-.9 6-6 10.3-13.4 10.9'/%3E%3Cpath d='M20 33.9v.6'/%3E%3C/g%3E%3Ccircle cx='15' cy='4.4' r='1.71' fill='%233f7490'/%3E%3Ccircle cx='25' cy='4.4' r='1.71' fill='%233f7490'/%3E%3Ccircle cx='20' cy='36.8' r='2.3' fill='none' stroke='%233f7490' stroke-width='1.71'/%3E%3Cpath d='M11 11.6 20 8.8l9 2.8V20a9 10.4 0 0 1-18 0z' fill='rgba%2863,116,144,.07%29' stroke='%233f7490' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cg transform='rotate%28-22 20 20.5%29'%3E%3Cg stroke='%235cc98e' stroke-width='.6' stroke-linecap='round' fill='none' opacity='.9'%3E%3Cpath d='M23.80 19.08C24.43 19.63 25.07 18.53 25.70 19.08'/%3E%3Cpath d='M23.80 22.03C24.43 22.58 25.07 21.48 25.70 22.03'/%3E%3Cpath d='M23.47 24.94C23.83 25.70 24.85 24.96 25.21 25.72'/%3E%3Cpath d='M21.39 26.94C21.11 27.73 22.36 27.92 22.08 28.71'/%3E%3Cpath d='M18.51 26.89C17.75 27.26 18.51 28.28 17.76 28.64'/%3E%3Cpath d='M16.48 24.84C15.69 24.57 15.52 25.83 14.73 25.56'/%3E%3Cpath d='M16.20 21.92C15.57 21.37 14.93 22.47 14.30 21.92'/%3E%3Cpath d='M16.20 18.97C15.57 18.42 14.93 19.52 14.30 18.97'/%3E%3Cpath d='M16.53 16.06C16.17 15.30 15.15 16.04 14.79 15.28'/%3E%3Cpath d='M18.61 14.06C18.89 13.27 17.64 13.08 17.92 12.29'/%3E%3Cpath d='M21.49 14.11C22.25 13.74 21.49 12.72 22.24 12.36'/%3E%3Cpath d='M23.52 16.16C24.31 16.43 24.48 15.17 25.27 15.44'/%3E%3C/g%3E%3Crect x='16.2' y='13.8' width='7.6' height='13.4' rx='3.8' fill='%235cc98e'/%3E%3Ccircle cx='19' cy='18' r='1' fill='%231f6b45'/%3E%3Ccircle cx='21.2' cy='22.4' r='1.2' fill='%231f6b45'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* recherche : le bouton devient une pilule blanche avec un texte d'invitation */
#citizen-search-summary {
	display: flex !important; align-items: center; gap: 8px;
	width: min(520px, 100%) !important; height: 38px !important;
	padding: 0 14px !important; border-radius: 999px !important;
	background: #fff !important; color: #5a6b78 !important; border: 1px solid #c9d4df !important;
	justify-content: flex-start !important;
}
#citizen-search-summary svg { color: #5a6b78 !important; width: 18px; height: 18px; }
#citizen-search-summary::after {
	content: "Rechercher une bactérie, un antibiotique…";
	font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 600px) { #citizen-search-summary::after { content: "Rechercher…"; } }
#citizen-search-details { width: 100%; display: flex; justify-content: center; }

/* menus (☰ et compte) : s'ouvrent vers le haut, au-dessus de la barre, alignés à droite */
.citizen-header .citizen-menu__card {
	position: fixed !important;
	top: auto !important; left: auto !important;
	right: 10px !important; bottom: 70px !important;
	max-height: calc(100vh - 90px); overflow-y: auto;
	transform-origin: bottom right !important;
}

/* la bulle de l'IA se cache pendant qu'un menu de la barre est ouvert (sinon elle recouvre le bas du menu) */
body:has(.citizen-header details[open]) .mga-launch { display: none !important; }

.citizen-header { backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); border-top-width: 1px !important; }