Aller au contenu

MediaWiki:Gadget-tableauxFlexibles.css

Ajouter des liens
De Poképédia

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.
/********** CODES POUR ADAPTER LE WIKI AUX PETITS ECRANS **********/

/* Utilisé sur [[Modèle:Statistiques]] et [[Modèle:Tableau Pokémon UNITE]] pour passer en mode overflow quand le contenu dépasse.
   Il faut entourer le tableau d'un div avec text-align: center; pour qu'il reste au milieu de la page. */
.tableau-overflow {
	display: inline-block !important;
	overflow-x: auto;
	text-align: left;
}
@media all and (max-width: 1200px) {
	.tableau-overflow {
		width: unset !important;
		max-width: 100% !important;
	}
}

/* Tableaux d'apprentissage flexibles
 tableau-apprentissage -> commun à toutes les fonctions du Module:Apprentissage
 apprentissage-usuel -> concerne les tableaux d'apprentissage par niveau, reproduction, donneur, preevolution, evenement,
 qui ont tous les mêmes six premières colonnes (voire neuf dans les générations 3 et 6, et huit dans la génération 4)
 apprentissage-capsule -> les tableaux de capsule et disque ont une colonne supplémentaire en première position et sont gérés séparément
*/
@media all and (max-width: 1200px) {
	.tableau-apprentissage .cellule-entête {
		display: none;
	}
	
	.tableau-apprentissage tr {
		display: flex;
		flex-flow: row wrap;
		gap: 2px;
	}
	
	.tableau-apprentissage tbody tr {
		margin-top: 2px;
	}
	
	.tableau-apprentissage th, .tableau-apprentissage td {
		box-sizing: border-box;
	}
	
	.colonne-toutes {
		width: 100%;
		min-width: 300px;
	}
	
	.apprentissage-usuel .colonne-1, .apprentissage-usuel .colonne-2, .apprentissage-usuel .colonne-3,
	.apprentissage-usuel .colonne-4, .apprentissage-usuel .colonne-5, .apprentissage-usuel .colonne-6 {
		width: calc(100%/3 - 2px);
	}
	
	.apprentissage-usuel-génération3 .colonne-7, .apprentissage-usuel-génération3 .colonne-8, .apprentissage-usuel-génération3 .colonne-9,
	.apprentissage-usuel-génération6 .colonne-7, .apprentissage-usuel-génération6 .colonne-8, .apprentissage-usuel-génération6 .colonne-9 {
		width: calc(100%/3 - 2px);
	}
	
	.apprentissage-usuel-génération4 .colonne-7, .apprentissage-usuel-génération4 .colonne-8 {
		width: calc(50% - 2px);
	}
	
	.apprentissage-niveau-1niveaux .colonne-niveau {
		width: 100%;
	}
	
	.apprentissage-niveau-2niveaux .colonne-niveau {
		width: calc(50% - 2px);
	}
	
	.apprentissage-niveau-3niveaux .colonne-niveau {
		width: calc(100%/3 - 2px);
	}
	
	.apprentissage-capsule .colonne-1, .apprentissage-capsule .colonne-2,
	.apprentissage-capsule .colonne-3, .apprentissage-capsule .colonne-4 {
		width: calc(50% - 2px);
	}
	
	.apprentissage-capsule .colonne-5, .apprentissage-capsule .colonne-6, .apprentissage-capsule .colonne-7 {
		width: calc(100%/3 - 2px);
	}
	
	.apprentissage-capsule-génération3 .colonne-8, .apprentissage-capsule-génération3 .colonne-9, .apprentissage-capsule-génération3 .colonne-10,
	.apprentissage-capsule-génération6 .colonne-8, .apprentissage-capsule-génération6 .colonne-9, .apprentissage-capsule-génération6 .colonne-10{
		width: calc(100%/3 - 2px);
	}
	
	.apprentissage-capsule-génération4-colonne8, .apprentissage-capsule-génération4 .colonne-9 {
		width: calc(50% - 2px);
	}
	
	.apprentissage-donneur .colonne-lieu {
		width: calc(2*100%/3 - 2px);
	}
	
	.apprentissage-donneur .colonne-coût {
		width: calc(100%/3 - 2px);
	}
}

/* Tableaux de sensibilités flexibles pour les écrans de taille moyenne */
@media all and (max-width: 1400px) {
	.sensibilite .ligne-efficacités, .sensibilite .ligne-légende {
		display: flex;
		flex-flow: row wrap;
		gap: 2px;
	}
	
	.sensibilite .ligne-efficacités td, .sensibilite .ligne-légende th, .sensibilite .ligne-légende td {
		box-sizing: border-box;
	}
	
	.sensibilite .ligne-légende th, .sensibilite .ligne-légende td {
		width: calc(100%/3 - 2px);
	}
	
	.sensibilite-15types .colonne-1, .sensibilite-15types .colonne-2, .sensibilite-15types .colonne-3,
	.sensibilite-15types .colonne-4, .sensibilite-15types .colonne-5, .sensibilite-15types .colonne-6,
	.sensibilite-15types .colonne-7, .sensibilite-15types .colonne-8 {
		width: 12.5%;
	}
	
	.sensibilite-15types .colonne-9, .sensibilite-15types .colonne-10, .sensibilite-15types .colonne-11,
	.sensibilite-15types .colonne-12, .sensibilite-15types .colonne-13, .sensibilite-15types .colonne-14,
	.sensibilite-15types .colonne-15 {
		width: calc(100%/7 - 2px);
	}
	
	.sensibilite-17types .colonne-1, .sensibilite-17types .colonne-2, .sensibilite-17types .colonne-3,
	.sensibilite-17types .colonne-4, .sensibilite-17types .colonne-5, .sensibilite-17types .colonne-6,
	.sensibilite-17types .colonne-7, .sensibilite-17types .colonne-8, .sensibilite-17types .colonne-9 {
		width: calc(100%/9 - 2px);
	}
	
	.sensibilite-17types .colonne-10, .sensibilite-17types .colonne-11, .sensibilite-17types .colonne-12,
	.sensibilite-17types .colonne-13, .sensibilite-17types .colonne-14, .sensibilite-17types .colonne-15,
	.sensibilite-17types .colonne-16, .sensibilite-17types .colonne-17 {
		width: 12.5%;
	}
	
	.sensibilite-18types .ligne-efficacités > td {
		width: calc(100%/9 - 2px);
	}
}

/* Tableaux de sensibilités flexibles pour les petits écrans */
@media all and (max-width: 800px) {
	.sensibilite .ligne-légende th, .sensibilite .ligne-légende td {
		width: calc(50% - 2px);
	}
	
	.sensibilite-15types .ligne-efficacités > td {
		width: calc(100%/5 - 2px);
	}
	
	.sensibilite-17types .colonne-1, .sensibilite-17types .colonne-2, .sensibilite-17types .colonne-3,
	.sensibilite-17types .colonne-4, .sensibilite-17types .colonne-5 {
		width: calc(100%/5 - 2px);
	}
	
	.sensibilite-17types .colonne-6, .sensibilite-17types .colonne-7, .sensibilite-17types .colonne-8,
	.sensibilite-17types .colonne-9, .sensibilite-17types .colonne-10, .sensibilite-17types .colonne-11,
	.sensibilite-17types .colonne-12, .sensibilite-17types .colonne-13, .sensibilite-17types .colonne-14,
	.sensibilite-17types .colonne-15, .sensibilite-17types .colonne-16, .sensibilite-17types .colonne-17 {
		width: calc(25% - 2px);
	}
	
	.sensibilite-18types .colonne-1, .sensibilite-18types .colonne-2, .sensibilite-18types .colonne-3,
	.sensibilite-18types .colonne-4, .sensibilite-18types .colonne-5, .sensibilite-18types .colonne-6,
	.sensibilite-18types .colonne-7, .sensibilite-18types .colonne-8, .sensibilite-18types .colonne-9,
	.sensibilite-18types .colonne-10 {
		width: calc(100%/5 - 2px) !important;
	}
	
	.sensibilite-18types .colonne-11, .sensibilite-18types .colonne-12, .sensibilite-18types .colonne-13,
	.sensibilite-18types .colonne-14, .sensibilite-18types .colonne-15, .sensibilite-18types .colonne-16,
	.sensibilite-18types .colonne-17, .sensibilite-18types .colonne-18 {
		width: calc(25% - 2px) !important;
	}
}

/* Organisation des listes d'objets, de tableaux dresseurs et de Pokémon dans les pages de lieux */
.liste-objets, .liste-dresseurs {
	display: flex;
	gap: 2em;
	justify-content:center;
	flex-flow: row wrap;
	align-items: flex-start
}

.liste-objets > table, .liste-dresseurs > table {
	margin: 1em 0 !important;
}

.liste-pokémon {
	display: flex;
	gap: 2em;
	flex-flow: row wrap;
	justify-content: center;
}

.liste-pokémon > table {
	margin: 1em 0 !important;
	align-self: start;
}

@media all and (max-width: 500px) {
	.liste-objets > table, .liste-dresseurs > table, .liste-pokémon > table {
		margin: 1em 0 !important;
	}
}

/* Pour le Module:Capsule */
@media all and (max-width: 1400px) {
	.tableau-capsule-pokémon, .tableau-capsule tr {
		display: flex;
		flex-flow: row wrap;
		gap: 2px;
		margin-top: 2px;
		margin-bottom: 2px;
	}
	
	.tableau-capsule th, .tableau-capsule td {
		box-sizing: border-box;
		width: 100%; /* valeur par défaut pour les cellules seules, écrasée si besoin par la suite */
	}
	
	.tableau-capsule-pokémon > td {
		width: calc(100%/3 - 2px);
	}
	
	.tableau-capsule-pokémon > td.cellule-unique {
		width: 100%;
	}
	
	.tableau-capsule .ligne-1 > th, .tableau-capsule .ligne-2 > td {
		width: calc(100%/6 - 2px);
	}
	
	.tableau-capsule .ligne-2 img {
		max-width: 100%;
		height: auto;
	}
	
	.tableau-capsule-generation3 .ligne-1 > th, .tableau-capsule-generation6 .ligne-1 > th, .tableau-capsule-generation3 .ligne-2 > td, .tableau-capsule-generation6 .ligne-2 > td {
		width: calc(100%/9 - 2px);
	}
	
	.tableau-capsule-generation4 .ligne-1 > th, .tableau-capsule-generation4 .ligne-2 > td {
		width: calc(12.5% - 2px);
	}
	
	.tableau-capsule-generation9 .ligne-1 > th, .tableau-capsule-generation9 .ligne-2 > td {
		width: calc(100%/7 - 2px);
	}
	
	.tableau-capsule .ligne-3 > th, .tableau-capsule .ligne-jeu > td, .tableau-capsule .ligne-jeu-recette > td {
		width: calc(100%/6 - 2px);
	}
	
	.tableau-capsule .ligne-3 > th:nth-child(2), .tableau-capsule .ligne-jeu > td:nth-child(2) {
		width: calc(50% - 2px);
	}
	
	.tableau-capsule .ligne-jeu-recette > td:nth-child(2) {
		width: calc(2*100%/3 - 2px);
	}
	
	.tableau-capsule .ligne-jeu-recette-2 > td {
		width: 100%;
	}
}

@media all and (max-width: 1100px) {
	.tableau-capsule {
		width: 100% !important;
		max-width: unset !important;
	}
}

@media all and (max-width: 800px) {
	.tableau-capsule-pokémon > td:not(.cellule-unique) {
		width: calc(50% - 2px);
	}
	
	.tableau-capsule .ligne-1 > th, .tableau-capsule .ligne-2 > td {
		width : calc(100%/3 - 2px);
	}
	
	.tableau-capsule-generation4 .ligne-1 > th:nth-child(7), .tableau-capsule-generation4 .ligne-1 > th:nth-child(8), .tableau-capsule-generation4 .ligne-2 > td:nth-child(7), .tableau-capsule-generation4 .ligne-2 > td:nth-child(8) {
		width: calc(50% - 2px);
	}
	
	.tableau-capsule-generation9 .ligne-1 > th:first-child, .tableau-capsule-generation9 .ligne-2 > td:first-child {
		width: 100%;
	}
	
	.tableau-capsule .ligne-3 > th, .tableau-capsule .ligne-jeu > td, .tableau-capsule .ligne-jeu-recette > td {
		width: calc(50% - 2px);
	}
	
	.tableau-capsule .ligne-3 > th:first-child, .tableau-capsule .ligne-jeu > td:first-child, .tableau-capsule .ligne-jeu-recette > td:first-child {
		width: calc(20% - 2px);
	}
	
	.tableau-capsule .ligne-3 > th:nth-child(2), .tableau-capsule .ligne-jeu > td:nth-child(2), .tableau-capsule .ligne-jeu-recette > td:nth-child(2) {
		width: calc(80% - 2px);
	}
}

/* Pour le Module:Capacité */
@media all and (max-width: 1000px) {
	.capacité-liste {
		max-width: unset !important;
	}
	
	.capacité-liste tr, .capacité-niveau tr {
		display: flex;
		flex-flow: row wrap;
		gap: 2px;
		margin-top: 2px;
		margin-bottom: 2px;
	}
	
	.capacité-liste th, .capacité-liste td, .capacité-niveau th, .capacité-niveau td {
		box-sizing: border-box;
	}
	
	.capacité-liste th, .capacité-niveau th {
		width: 100%;
	}
	
	.capacité-liste td {
		width: calc(50% - 2px);
	}
	
	.capacité-niveau td:nth-child(even) {
		width: calc(100%/3 - 2px);
	}
	
	.capacité-niveau td:nth-child(odd) {
		width: calc(2*100%/3 - 2px);
	}
}
Récupérée de "https://www.pokepedia.fr/index.php?title=MediaWiki:Gadget-tableauxFlexibles.css&oldid=2993333"