« MediaWiki:Citizen.css » : différence entre les versions
Page de l’interface de MediaWiki
Autres actions
Barre v4 : plus haute sur cellulaire ; sur ordinateur, sections en petite bulle de verre et texte centré |
Barre v5 : bulle des sections en haut à droite, texte sur toute la largeur, titre aligné |
||
| Ligne 135 : | Ligne 135 : | ||
/* ordinateur (≥ 1120 px) : la colonne des sections devient une petite bulle de verre à droite, le texte est centré */ | /* ordinateur (≥ 1120 px) : la colonne des sections devient une petite bulle de verre à droite, le texte est centré */ | ||
@media (min-width: 1120px) { | @media (min-width: 1120px) { | ||
.citizen-body-container { grid-template-columns: minmax(0, | /* le texte prend toute la largeur, avec la même marge à gauche et à droite */ | ||
.citizen-body-container { grid-template-columns: minmax(0, 1fr) !important; padding-inline: clamp(32px, 5vw, 96px) !important; max-width: none !important; } | |||
.citizen-page-sidebar { position: fixed !important; width: 0 !important; height: 0 !important; overflow: visible !important; contain: none !important; } | .citizen-page-sidebar { position: fixed !important; width: 0 !important; height: 0 !important; overflow: visible !important; contain: none !important; } | ||
.citizen-page-header { width: | .citizen-page-header { width: auto !important; max-width: none !important; margin-inline: 0 !important; padding-inline: clamp(32px, 5vw, 96px) !important; box-sizing: border-box; } | ||
.citizen-page-header-inner { margin-left: 0 !important; } /* titre aligné sur le texte */ | |||
#citizen-toc { | #citizen-toc { | ||
position: fixed !important; right: 18px; top: | position: fixed !important; right: 18px; top: 16px; transform: none; | ||
width: auto !important; max-width: 250px; z-index: 150; | width: auto !important; max-width: 250px; z-index: 150; | ||
padding: 8px 14px !important; border-radius: 14px; | padding: 8px 14px !important; border-radius: 14px; | ||
| Ligne 153 : | Ligne 155 : | ||
#citizen-toc:hover .citizen-toc-card, #citizen-toc:focus-within .citizen-toc-card { | #citizen-toc:hover .citizen-toc-card, #citizen-toc:focus-within .citizen-toc-card { | ||
display: block !important; position: static !important; width: 230px !important; | display: block !important; position: static !important; width: 230px !important; | ||
max-height: | max-height: calc(100vh - 140px); overflow-y: auto; margin-top: 6px; background: none !important; box-shadow: none !important; border: 0 !important; | ||
} | } | ||
#citizen-toc .citizen-toc-link { font-size: 13.5px; } | #citizen-toc .citizen-toc-link { font-size: 13.5px; } | ||
} | } | ||
Version du 28 octobre 2026 à 22:29
.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; }
/* cellulaire : barre plus haute et plus visible, au-dessus de la zone du geste d'accueil de l'iPhone */
@media (max-width: 720px) {
.citizen-header {
height: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
border-top-width: 1.5px !important;
box-shadow: 0 -4px 16px rgba(30, 60, 90, .10) !important;
}
.citizen-header__logo .mw-logo, .citizen-header__logo .mw-logo::before { width: 48px !important; height: 48px !important; }
#citizen-search-summary { height: 46px !important; font-size: 16px; }
#citizen-search-summary::after { font-size: 16px; }
#citizen-search-summary svg { width: 20px; height: 20px; }
.citizen-header .citizen-dropdown-summary svg, .citizen-header .citizen-ui-icon { transform: scale(1.15); }
.citizen-header .citizen-menu__card { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
.citizen-footer { padding-bottom: 110px !important; }
}
/* ordinateur (≥ 1120 px) : la colonne des sections devient une petite bulle de verre à droite, le texte est centré */
@media (min-width: 1120px) {
/* le texte prend toute la largeur, avec la même marge à gauche et à droite */
.citizen-body-container { grid-template-columns: minmax(0, 1fr) !important; padding-inline: clamp(32px, 5vw, 96px) !important; max-width: none !important; }
.citizen-page-sidebar { position: fixed !important; width: 0 !important; height: 0 !important; overflow: visible !important; contain: none !important; }
.citizen-page-header { width: auto !important; max-width: none !important; margin-inline: 0 !important; padding-inline: clamp(32px, 5vw, 96px) !important; box-sizing: border-box; }
.citizen-page-header-inner { margin-left: 0 !important; } /* titre aligné sur le texte */
#citizen-toc {
position: fixed !important; right: 18px; top: 16px; transform: none;
width: auto !important; max-width: 250px; z-index: 150;
padding: 8px 14px !important; border-radius: 14px;
background: rgba(227, 234, 242, .78);
-webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
border: 1px solid #c3d1df; box-shadow: 0 6px 20px -8px rgba(30, 60, 90, .25);
}
/* repliée : seulement « Sections » ; dépliée au survol (ou au clavier) */
#citizen-toc::before {
content: "☰ Sections"; display: block; font-size: 13px; font-weight: 600; color: #3f7490; white-space: nowrap; cursor: default;
}
#citizen-toc .citizen-toc-card { display: none !important; }
#citizen-toc:hover .citizen-toc-card, #citizen-toc:focus-within .citizen-toc-card {
display: block !important; position: static !important; width: 230px !important;
max-height: calc(100vh - 140px); overflow-y: auto; margin-top: 6px; background: none !important; box-shadow: none !important; border: 0 !important;
}
#citizen-toc .citizen-toc-link { font-size: 13.5px; }
}