MediaWiki:Citizen.css
Page de l’interface de MediaWiki
Autres actions
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.
/* La totalité du CSS placé ici s'appliquera aux utilisateurs de l'habillage Citizen. */
/* Cache le bouton des reading preferences de Citizen */
.citizen-dropdown-summary[aria-details="citizen-preferences-dropdown__card"] {
display: none !important;
}
/* couleur du site.. */
:root.skin-theme-clientpref-day {
--color-progressive-oklch__h: 250;
--color-progressive-oklch__c: 0.20;
--color-progressive-oklch__l: 50%;
--color-surface-0: #f3f4f6; /* fond général */
--color-surface-1: #dcdfe4; /* bas de page */
--color-surface-2: #dcdfe4; /* bloc édition */
--color-surface-3: #dcdfe4; /* jaune d1d5db; inconnu */
--color-surface-4: #dcdfe4; /* orange c4c9d1; inconnu */
--color-base: #2f3440;
--color-emphasized: #111827;
--color-subtle: #6b7280;
--color-link: #0969da;
}
/* Fond de la barre sticky Citizen */
.skin-citizen .citizen-sticky-header-background {
background-color: #dcdfe4!important;
}
/* Liens vers pages inexistantes */
.skin-citizen a.new,
.skin-citizen .mw-parser-output a.new {
color: #b4232a;
}
/* Liens vers pages inexistantes au survol */
.skin-citizen a.new:hover,
.skin-citizen .mw-parser-output a.new:hover {
color: #8f1d24;
}
/* couleur code et pre façon terminal */
pre,
code,
.mw-code {
background: #161b22;
color: #e6edf3;
border: 1px solid #30363d;
border-radius: 10px;
font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
}
pre {
padding: 14px 16px;
overflow-x: auto;
line-height: 1.5;
}
code {
padding: 0.15em 0.4em;
border-radius: 6px;
}
/* Citizen menus/panneaux gris clair */
.skin-citizen .citizen-menu__card,
.skin-citizen .citizen-menu__card-content,
.skin-citizen .citizen-userInfo,
.skin-citizen .citizen-command-palette,
.skin-citizen .citizen-command-palette-header,
.skin-citizen .citizen-command-palette-empty-state,
.skin-citizen .citizen-command-palette__footer {
background-color: #dcdfe4 !important;
color: #2f3440 !important;
border-color: #c4c9d1 !important;
}
.skin-citizen .citizen-menu__content a,
.skin-citizen .citizen-userInfo a {
color: #2f3440 !important;
}
.skin-citizen .citizen-menu__content a:hover,
.skin-citizen .citizen-userInfo a:hover {
background-color: #d1d5db !important;
color: #111827 !important;
}
/* Barre du haut Citizen en sombre */
.skin-citizen > .citizen-header,
.skin-citizen > .citizen-header .citizen-header__inner,
.skin-citizen > .citizen-header .citizen-header__logo {
background-color: #111827 !important;
color: #f9fafb !important;
}
/* Icônes et boutons visibles directement dans la barre du haut */
.skin-citizen > .citizen-header > .citizen-header__logo .cdx-button,
.skin-citizen > .citizen-header > .citizen-header__logo svg,
.skin-citizen > .citizen-header > .citizen-header__logo .citizen-ui-icon,
.skin-citizen > .citizen-header > .citizen-header__item > .citizen-dropdown-details > .citizen-dropdown-summary,
.skin-citizen > .citizen-header .citizen-header__end > .citizen-header__item > .citizen-dropdown-details > .citizen-dropdown-summary {
color: #f9fafb !important;
}
/* Survol uniquement des boutons de la barre du haut */
.skin-citizen > .citizen-header > .citizen-header__logo .cdx-button:hover,
.skin-citizen > .citizen-header > .citizen-header__item > .citizen-dropdown-details > .citizen-dropdown-summary:hover,
.skin-citizen > .citizen-header .citizen-header__end > .citizen-header__item > .citizen-dropdown-details > .citizen-dropdown-summary:hover {
background-color: #1f2937 !important;
color: #ffffff !important;
}
/* Inverse uniquement le petit logo de la barre du haut */
.skin-citizen > .citizen-header .citizen-header__logo > a > .mw-logo-icon {
filter: invert(1) brightness(1.2);
}
/* Sécurité : logos dans le drawer/menu utilisateur restent normaux */
.skin-citizen .citizen-drawer__logo .mw-logo-icon,
.skin-citizen .citizen-menu__card .mw-logo-icon {
filter: none !important;
}
/* Boutons principaux : noir + blanc */
.skin-citizen .cdx-button--action-progressive.cdx-button--weight-primary,
.skin-citizen .oo-ui-flaggedElement-progressive.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button {
background-color: #111827 !important;
border-color: #111827 !important;
color: #f9fafb !important;
}
/* Icônes des boutons principaux */
.skin-citizen .cdx-button--action-progressive.cdx-button--weight-primary .citizen-ui-icon {
color: #f9fafb !important;
}
/* Survol inversé : blanc + noir */
.skin-citizen .cdx-button--action-progressive.cdx-button--weight-primary:hover,
.skin-citizen .oo-ui-flaggedElement-progressive.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:hover {
background-color: #f9fafb !important;
border-color: #111827 !important;
color: #111827 !important;
}
/* Icônes au survol */
.skin-citizen .cdx-button--action-progressive.cdx-button--weight-primary:hover .citizen-ui-icon {
color: #111827 !important;
}
/* Survol général des boutons discrets */
.skin-citizen .cdx-button--weight-quiet:hover {
background-color: #d1d5db !important;
color: #111827 !important;
}
/* Exception : barre du haut sombre */
.skin-citizen > .citizen-header .cdx-button--weight-quiet:hover {
background-color: #d1d5db !important;
color: #ffffff !important;
}
/* Zone d'édition du wikicode */
.skin-citizen #wpTextbox1 {
background-color: #f9fafb !important;
color: #111827 !important;
border: 1px solid #c4c9d1 !important;
border-radius: 10px;
padding: 12px;
}
/* Images et médias responsive dans le contenu des pages */
.skin-citizen .mw-parser-output img,
.skin-citizen .mw-parser-output video,
.skin-citizen .mw-parser-output svg {
max-width: 100%;
height: auto;
}
/* Miniatures MediaWiki responsive */
.skin-citizen .mw-parser-output .thumb,
.skin-citizen .mw-parser-output .thumbinner {
max-width: 100%;
box-sizing: border-box;
}
.skin-citizen .mw-parser-output .thumb img {
max-width: 100%;
height: auto;
}
/* Bandeau de la page d'accueil */
.accueil-bandeau,
.accueil-tiles {
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.accueil-bandeau {
text-align: center;
margin-top: 1rem;
margin-bottom: 2rem;
}
.accueil-bandeau img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
/* Grille de tuiles de la page d'accueil */
.accueil-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1.5rem;
margin-bottom: 2rem;
}
/* Tuile générale */
.accueil-tile {
position: relative;
height: 100px;
overflow: hidden;
border-radius: 16px;
background: #111827;
border: 1px solid #c4c9d1;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
/* Grande tuile sur toute la largeur */
.accueil-tile-large {
grid-column: 1 / -1;
height: 100px;
}
/* Correction image MediaWiki : div > p > span > a > img */
.accueil-tile > p {
position: absolute;
inset: 0;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}
.accueil-tile > p > span,
.accueil-tile > p > span > a {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}
.accueil-tile > p > span > a > img.mw-file-element {
display: block;
width: auto !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Voile sombre pour lisibilité */
.accueil-tile::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
to bottom,
rgba(17, 24, 39, 0.10),
rgba(17, 24, 39, 0.72)
);
z-index: 1;
pointer-events: none;
}
/* Texte par-dessus */
.accueil-tile-content {
position: absolute;
left: 1rem;
right: 1rem;
bottom: 0.9rem;
z-index: 2;
pointer-events: none;
}
.accueil-tile-title {
font-size: 1.35rem;
font-weight: 700;
line-height: 1.1;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}
.accueil-tile-desc {
margin-top: 0.35rem;
font-size: 0.9rem;
line-height: 1.25;
color: #e5e7eb;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}
/* Grande tuile : texte plus gros */
.accueil-tile-large .accueil-tile-title {
font-size: 1.9rem;
}
.accueil-tile-large .accueil-tile-desc {
font-size: 1rem;
}
/* Effet au survol */
.accueil-tile {
transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.accueil-tile:hover {
background: #6b7280;
border-color: #111827;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
/* Couleurs personnalisées par tuile */
.accueil-tile-proxmox .accueil-tile-title {
color: #f97316;
}
.accueil-tile-linux .accueil-tile-title {
color: #ffffff;
}
.accueil-tile-ia .accueil-tile-title {
color: #c084fc;
}
/* Responsive tablette */
@media screen and (max-width: 1000px) {
.accueil-tiles {
grid-template-columns: repeat(2, 1fr);
}
.accueil-tile-large {
grid-column: 1 / -1;
}
}
/* Responsive mobile */
@media screen and (max-width: 640px) {
.accueil-tiles {
grid-template-columns: 1fr;
gap: 0.85rem;
margin: 1rem auto 1.5rem auto;
}
.accueil-tile,
.accueil-tile-large {
grid-column: 1 / -1;
height: 135px;
border-radius: 12px;
}
.accueil-tile-content {
left: 0.85rem;
right: 0.85rem;
bottom: 0.75rem;
}
.accueil-tile-title,
.accueil-tile-large .accueil-tile-title {
font-size: 1.25rem;
}
.accueil-tile-desc,
.accueil-tile-large .accueil-tile-desc {
font-size: 0.82rem;
}
}