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

Dernière version du 13 mai 2026 à 22:13

/* 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;
  top: 50%;
  transform: translateY(-50%);
  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;
  }
}