« MediaWiki:Common.css » : différence entre les versions
Page de l’interface de MediaWiki
Autres actions
Aucun résumé des modifications Balise : Révoqué |
Aucun résumé des modifications Balise : Révoqué |
||
| Ligne 16 : | Ligne 16 : | ||
} | } | ||
/* Conteneur pour | |||
/* ============================= | |||
Images responsives pour Citizen | |||
============================= */ | |||
/* 1️⃣ Toutes les images normales s’adaptent à la largeur de leur conteneur */ | |||
img { | |||
max-width: 100%; | |||
height: auto; | |||
display: block; | |||
object-fit: contain; | |||
} | |||
/* 2️⃣ Conteneur responsive pour les galeries / 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; /* espace entre les images */ | ||
align-items: start; | |||
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 */ | |||
box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* optionnel */ | |||
} | } | ||
img { | /* 4️⃣ Assurer que les images avec "thumb" ou "frameless" restent responsives */ | ||
.thumb img, | |||
.frameless img { | |||
max-width: 100%; | max-width: 100%; | ||
height: auto; | 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) { | |||
.responsive-images, | |||
.gallery { | |||
grid-template-columns: 1fr; /* 1 colonne sur petits écrans */ | |||
gap: 8px; | |||
} | |||
} | } | ||
Version du 8 mars 2026 à 03:40
#footer {
display: none;
}
.last-modified {
display: none;
}
.citizen-dropdown-summary {
display: none;
}
/* Date modified */
.page-info {
display: none !important;
}
/* =============================
Images responsives pour Citizen
============================= */
/* 1️⃣ Toutes les images normales s’adaptent à la largeur de leur conteneur */
img {
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* 2️⃣ Conteneur responsive pour les galeries / plusieurs images */
.responsive-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px; /* espace entre les images */
align-items: start;
margin: 0 auto;
}
/* 3️⃣ Styles spécifiques aux images dans ce conteneur */
.responsive-images img {
width: 100%;
height: auto;
border-radius: 4px; /* optionnel pour un style plus moderne */
box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* optionnel */
}
/* 4️⃣ Assurer que les images avec "thumb" ou "frameless" restent responsives */
.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) {
.responsive-images,
.gallery {
grid-template-columns: 1fr; /* 1 colonne sur petits écrans */
gap: 8px;
}
}