MediaWiki:Gadget-tableauxFlexibles.css
Aller à la navigation
Aller à la recherche
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).
- Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
- Opera : appuyez sur 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;
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 {
max-width: unset !important;
}
.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);
}
}