« MediaWiki:Gadget-tableauxFlexibles.css » : différence entre les versions

Version du 23 janvier 2024 à 17:49

/********** 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;
	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;
	}
	
	.tableau-apprentissage tbody tr {
		margin-top: 2px;
	}
	
	.tableau-apprentissage th, .tableau-apprentissage td {
		box-sizing: border-box;
	}
	
	.tableau-apprentissage .colonne-toutes {
		width: 100%;
	}
	
	.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);
	}
	
	.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);
	}
	
	.apprentissage-usuel-génération4 .colonne-7, .apprentissage-usuel-génération4 .colonne-8 {
		width: 50%;
	}
	
	.apprentissage-niveau-1niveaux .colonne-niveau {
		width: 100%;
	}
	
	.apprentissage-niveau-2niveaux .colonne-niveau {
		width: 50%;
	}
	
	.apprentissage-niveau-3niveaux .colonne-niveau {
		width: calc(100%/3);
	}
	
	.apprentissage-capsule .colonne-1, .apprentissage-capsule .colonne-2,
	.apprentissage-capsule .colonne-3, .apprentissage-capsule .colonne-4 {
		width: 50%;
	}
	
	.apprentissage-capsule .colonne-5, .apprentissage-capsule .colonne-6, .apprentissage-capsule .colonne-7 {
		width: calc(100%/3);
	}
	
	.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);
	}
	
	.apprentissage-capsule-génération4-colonne8, .apprentissage-capsule-génération4 .colonne-9 {
		width: 50%;
	}
	
	.apprentissage-donneur .colonne-lieu {
		width: calc(2*100%/3);
	}
	
	.apprentissage-donneur .colonne-coût {
		width: calc(100%/3);
	}
}

/* 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;
	}
	
	.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);
	}
	
	.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);
	}
	
	.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);
	}
	
	.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);
	}
}

/* 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: 50%;
	}
	
	.sensibilite-15types .ligne-efficacités > td {
		width: calc(100%/5);
	}
	
	.sensibilite-17types .colonne-1, .sensibilite-17types .colonne-2, .sensibilite-17types .colonne-3,
	.sensibilite-17types .colonne-4, .sensibilite-17types .colonne-5 {
		width: calc(100%/5);
	}
	
	.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: 25%;
	}
	
	.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) !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: 25% !important;
	}
}

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

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

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

.liste-pokémon > table {
	margin: 1em 0 1em 2em !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 .ligne-1, .tableau-capsule .ligne-2, .tableau-capsule .ligne-3, .tableau-capsule .ligne-jeu, .tableau-capsule .ligne-jeu-recette {
		display: flex;
		flex-flow: row wrap;
	}
	
	.tableau-capsule th, .tableau-capsule td {
		box-sizing: border-box;
	}
	
	.tableau-capsule-pokémon > td {
		width: calc(100%/3);
	}
	
	.tableau-capsule-pokémon > td.cellule-unique {
		width: 100%;
	}
	
	.tableau-capsule .ligne-1 > th, .tableau-capsule .ligne-2 > td {
		width: calc(100%/6);
	}
	
	.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);
	}
	
	.tableau-capsule-generation4 .ligne-1 > th, .tableau-capsule-generation4 .ligne-2 > td {
		width: 12.5%;
	}
	
	.tableau-capsule-generation9 .ligne-1 > th, .tableau-capsule-generation9 .ligne-2 > td {
		width: calc(100%/7);
	}
	
	.tableau-capsule .ligne-3 > th, .tableau-capsule .ligne-jeu > td, .tableau-capsule .ligne-jeu-recette > td {
		width: calc(100%/6);
	}
	
	.tableau-capsule .ligne-3 > th:nth-child(2), .tableau-capsule .ligne-jeu > td:nth-child(2) {
		width: 50%;
	}
	
	.tableau-capsule .ligne-jeu-recette > td:nth-child(2) {
		width: calc(2*100%/3);
	}
	
	.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: 50%;
	}
	
	.tableau-capsule .ligne-1 > th, .tableau-capsule .ligne-2 > td {
		width : calc(100%/3);
	}
	
	.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: 50%;
	}
	
	.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: 50%;
	}
	
	.tableau-capsule .ligne-3 > th:first-child, .tableau-capsule .ligne-jeu > td:first-child, .tableau-capsule .ligne-jeu-recette > td:first-child {
		width: 20%;
	}
	
	.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: 80%;
	}
}

/* Pour le Module:Capacité */
@media all and (max-width: 1000px) {
	.capacité-liste tr, .capacité-niveau tr {
		display: flex;
		flex-flow: row wrap;
	}
	
	.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: 50%;
	}
	
	.capacité-niveau td:nth-child(even) {
		width: calc(100%/3);
	}
	
	.capacité-niveau td:nth-child(odd) {
		width: calc(2*100%/3);
	}
}