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:Common.css » : différence entre les versions

Page de l’interface de MediaWiki
Aucun résumé des modifications
Balise : Révoqué
Aucun résumé des modifications
Balise : Révoqué
Ligne 15 : Ligne 15 :
     display: none !important;
     display: none !important;
}
}






/* =============================
/* =============================
   Images responsives pour Citizen
   Images et galeries responsives pour Citizen
   ============================= */
   ============================= */


/* 1️⃣ Toutes les images normales s’adaptent à la largeur de leur conteneur */
/* 1️⃣ Toutes les images normales */
img {
body img {
   max-width: 100%;
   max-width: 100% !important;
   height: auto;
   height: auto !important;
   display: block;
   display: block !important;
   object-fit: contain;
  margin-left: auto !important;
  margin-right: auto !important;
   object-fit: contain !important;
}
 
/* 2️⃣ Vignettes et images “frameless” */
.thumb,
.frameless {
  max-width: 100% !important;
  width: auto !important;
  overflow-x: hidden !important;
}
 
/* 3️⃣ Galeries MediaWiki */
.gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
}


/* 2️⃣ Conteneur responsive pour les galeries / plusieurs images */
/* 4️⃣ Conteneur responsive optionnel pour plusieurs images */
.responsive-images {
.responsive-images {
   display: grid;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 10px; /* espace entre les images */
   gap: 10px;
   align-items: start;
   align-items: start;
   margin: 0 auto;
   margin: 0 auto;
}
}


/* 3️⃣ Styles spécifiques aux images dans ce conteneur */
.responsive-images img {
.responsive-images img {
   width: 100%;
   width: 100%;
   height: auto;
   height: auto;
   border-radius: 4px; /* optionnel pour un style plus moderne */
   border-radius: 4px; /* optionnel, style moderne */
   box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* optionnel */
   box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* optionnel */
}
}


/* 4️⃣ Assurer que les images avec "thumb" ou "frameless" restent responsives */
/* 5️⃣ Mobile-first tweaks */
.thumb img,
.frameless img {
  max-width: 100%;
  height: auto;
}
 
/* 5️⃣ Option pour centrer automatiquement toutes les images */
img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
 
/* 6️⃣ Option pour la galerie MediaWiki <gallery> */
.gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
}
 
/* 7️⃣ Mobile-first tweaks */
@media (max-width: 600px) {
@media (max-width: 600px) {
  .gallery,
   .responsive-images,
   .responsive-images,
   .gallery {
   .thumb,
     grid-template-columns: 1fr; /* 1 colonne sur petits écrans */
  .frameless {
     gap: 8px;
     grid-template-columns: 1fr !important;
     gap: 6px !important;
   }
   }
}
}

Version du 8 mars 2026 à 03:42

#footer {
    display: none;
}

.last-modified {
    display: none;
}

.citizen-dropdown-summary {
display: none;
}

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



/* =============================
   Images et galeries responsives pour Citizen
   ============================= */

/* 1️⃣ Toutes les images normales */
body img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  object-fit: contain !important;
}

/* 2️⃣ Vignettes et images “frameless” */
.thumb,
.frameless {
  max-width: 100% !important;
  width: auto !important;
  overflow-x: hidden !important;
}

/* 3️⃣ Galeries MediaWiki */
.gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 4️⃣ Conteneur responsive optionnel pour plusieurs images */
.responsive-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: start;
  margin: 0 auto;
}

.responsive-images img {
  width: 100%;
  height: auto;
  border-radius: 4px; /* optionnel, style moderne */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* optionnel */
}

/* 5️⃣ Mobile-first tweaks */
@media (max-width: 600px) {
  .gallery,
  .responsive-images,
  .thumb,
  .frameless {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}