« MediaWiki:Common.css » : différence entre les versions
De Wiki IRC
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 9 : | Ligne 9 : | ||
#ca-history { | #ca-history { | ||
display: none; | display: none; | ||
} | |||
/* === responsive-table (site-wide) === | |||
Utiliser les classes .rt-table, .rt-row, .rt-cell | |||
Modifiez les couleurs / fonts selon vos besoins. | |||
*/ | |||
/* conteneur table */ | |||
.rt-table { | |||
display: grid; | |||
grid-template-columns: 1fr; | |||
gap: 0.5rem; | |||
align-items: stretch; | |||
width: 100%; | |||
box-sizing: border-box; | |||
font-family: sans-serif; | |||
} | |||
/* header (une seule ligne d'en-têtes) */ | |||
.rt-header { | |||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); /* adapte à 4 colonnes — voir commentaire */ | |||
gap: 0.5rem; | |||
font-weight: 600; | |||
background: #f5f5f5; | |||
padding: 0.6rem; | |||
border-radius: 6px; | |||
} | |||
/* lignes */ | |||
.rt-row { | |||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); /* idem : 4 colonnes */ | |||
gap: 0.5rem; | |||
padding: 0.6rem; | |||
background: #fff; | |||
border: 1px solid #e6e6e6; | |||
border-radius: 6px; | |||
} | |||
/* cellule */ | |||
.rt-cell { | |||
padding: 0.2rem 0.4rem; | |||
min-height: 1.6rem; | |||
display: flex; | |||
align-items: center; | |||
box-sizing: border-box; | |||
} | |||
/* étiquette affichée sur petits écrans (générée via data-label) */ | |||
.rt-cell::before { | |||
content: attr(data-label); | |||
display: none; /* visible en mobile */ | |||
font-weight: 600; | |||
margin-right: 0.5rem; | |||
} | |||
/* responsive: à partir d'une largeur, afficher grille; en dessous, empiler */ | |||
@media (max-width: 720px) { | |||
.rt-header { display: none; } /* on masque l'en-tête classique */ | |||
.rt-row { | |||
grid-template-columns: 1fr; | |||
gap: 0.25rem; | |||
} | |||
.rt-cell { | |||
display: block; | |||
padding: 0.4rem 0.5rem; | |||
border-bottom: 1px dashed #eee; | |||
} | |||
.rt-cell::before { display: inline-block; color: #333; width: 40%; } | |||
} | |||
/* petites améliorations visuelles */ | |||
.rt-table .rt-row:nth-child(odd) { background: #fbfbfb; } | |||
.rt-caption { | |||
font-size: 0.95rem; | |||
margin-bottom: 0.5rem; | |||
color: #222; | |||
font-weight:600; | |||
} | } | ||
Version du 2 septembre 2025 à 16:09
/* Le CSS placé ici sera appliqué à tous les habillages. */
/*
#bodyContent {
font-size: 1em;
}
*/
/* Dans MediaWiki:Common.css, on peut définir un style de base pour masquer l'onglet. */
#ca-history {
display: none;
}
/* === responsive-table (site-wide) ===
Utiliser les classes .rt-table, .rt-row, .rt-cell
Modifiez les couleurs / fonts selon vos besoins.
*/
/* conteneur table */
.rt-table {
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
align-items: stretch;
width: 100%;
box-sizing: border-box;
font-family: sans-serif;
}
/* header (une seule ligne d'en-têtes) */
.rt-header {
display: grid;
grid-template-columns: repeat(4, 1fr); /* adapte à 4 colonnes — voir commentaire */
gap: 0.5rem;
font-weight: 600;
background: #f5f5f5;
padding: 0.6rem;
border-radius: 6px;
}
/* lignes */
.rt-row {
display: grid;
grid-template-columns: repeat(4, 1fr); /* idem : 4 colonnes */
gap: 0.5rem;
padding: 0.6rem;
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 6px;
}
/* cellule */
.rt-cell {
padding: 0.2rem 0.4rem;
min-height: 1.6rem;
display: flex;
align-items: center;
box-sizing: border-box;
}
/* étiquette affichée sur petits écrans (générée via data-label) */
.rt-cell::before {
content: attr(data-label);
display: none; /* visible en mobile */
font-weight: 600;
margin-right: 0.5rem;
}
/* responsive: à partir d'une largeur, afficher grille; en dessous, empiler */
@media (max-width: 720px) {
.rt-header { display: none; } /* on masque l'en-tête classique */
.rt-row {
grid-template-columns: 1fr;
gap: 0.25rem;
}
.rt-cell {
display: block;
padding: 0.4rem 0.5rem;
border-bottom: 1px dashed #eee;
}
.rt-cell::before { display: inline-block; color: #333; width: 40%; }
}
/* petites améliorations visuelles */
.rt-table .rt-row:nth-child(odd) { background: #fbfbfb; }
.rt-caption {
font-size: 0.95rem;
margin-bottom: 0.5rem;
color: #222;
font-weight:600;
}
