Modèle:ButtonGrid/styles.css - Historique des versions

Agrado le 4 février 2026 à 21:10

2026-02-04T21:10:14Z

← Version précédente		Version du 4 février 2026 à 21:10
Ligne 1 :		Ligne 1 :
	.~~minicardv2~~-container{		.ButtonGrid-container{
	display:grid;		display:grid;
	gap:.9rem;		gap:.9rem;
Ligne 13 :		Ligne 13 :

	/* Chaque bouton remplit sa cellule */		/* Chaque bouton remplit sa cellule */
	.~~minicardv2~~-container > .button-link{		.ButtonGrid-container > .button-link{
	width:100%;		width:100%;
	}		}

	/* Le lien interne remplit la hauteur du bouton */		/* Le lien interne remplit la hauteur du bouton */
	.~~minicardv2~~-container > .button-link .button-link__link{		.ButtonGrid-container > .button-link .button-link__link{
	height:100%;		height:100%;
	}		}

Agrado : Agrado a déplacé la page Modèle:MiniCardv2/styles.css vers Modèle:ButtonGrid/styles.css sans laisser de redirection : Tests terminés

2026-02-04T21:08:38Z

Agrado a déplacé la page Modèle:MiniCardv2/styles.css vers Modèle:ButtonGrid/styles.css sans laisser de redirection : Tests terminés

← Version précédente	Version du 4 février 2026 à 21:08
(Aucune différence)

Agrado : Annulation des modifications 4256 de Agrado (discussion)

2026-02-04T20:53:24Z

Annulation des modifications 4256 de Agrado (discussion)

@@ Ligne 20 : / Ligne 20 : @@
 .minicardv2-container > .button-link .button-link__link{
    height:100%;
+}

Agrado : test de rétrécissement

2026-02-04T20:53:02Z

test de rétrécissement

@@ Ligne 20 : / Ligne 20 : @@
 .minicardv2-container > .button-link .button-link__link{
    height:100%;
+}

Agrado : Annulation des modifications 4253 de Agrado (discussion)

2026-02-04T20:49:46Z

Annulation des modifications 4253 de Agrado (discussion)

← Version précédente		Version du 4 février 2026 à 20:49
Ligne 7 :		Ligne 7 :
	box-sizing:border-box;		box-sizing:border-box;

	/* ~~✅ 1 seule ligne~~ */		/* Colonnes harmonisées, responsive */
	grid-~~auto~~-~~flow~~:~~column;~~		grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
	~~grid-~~auto-~~columns:~~190px~~; /* largeur fixe de chaque tuile (ajuste~~) */		align-items:stretch;
	~~grid-template-rows:1fr;~~

	~~overflow-x:auto~~;
	~~overflow~~-y:~~hidden~~;
	}		}

	/* Chaque bouton remplit sa "cellule" */		/* Chaque bouton remplit sa cellule */
	.minicardv2-container > .button-link{		.minicardv2-container > .button-link{
	width:100%;		width:100%;

Agrado le 4 février 2026 à 20:49

2026-02-04T20:49:11Z

← Version précédente		Version du 4 février 2026 à 20:49
Ligne 7 :		Ligne 7 :
	box-sizing:border-box;		box-sizing:border-box;

	/* ~~Colonnes harmonisées, responsive~~ */		/* ✅ 1 seule ligne */
	grid-~~template~~-columns:~~repeat~~(~~auto~~-~~fit, minmax(190px,~~ 1fr));		grid-auto-flow:column;
	~~align~~-~~items~~:~~stretch~~;		grid-auto-columns:190px; /* largeur fixe de chaque tuile (ajuste) */
			grid-template-rows:1fr;

			overflow-x:auto;
			overflow-y:hidden;
	}		}

	/* Chaque bouton remplit sa cellule */		/* Chaque bouton remplit sa "cellule" */
	.minicardv2-container > .button-link{		.minicardv2-container > .button-link{
	width:100%;		width:100%;

Agrado le 4 février 2026 à 20:45

2026-02-04T20:45:26Z

← Version précédente		Version du 4 février 2026 à 20:45
Ligne 8 :		Ligne 8 :

	/* Colonnes harmonisées, responsive */		/* Colonnes harmonisées, responsive */
	grid-template-columns:repeat(auto-fit, minmax(~~170px~~, 1fr));		grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
	align-items:stretch;		align-items:stretch;
	}		}

	/* ~~S'assure que le~~ bouton remplit ~~bien~~ sa "cellule" */		/* Chaque bouton remplit sa cellule */
	.minicardv2-container > .button-link{		.minicardv2-container > .button-link{
	width:100%;		width:100%;
	}		}

	/* ~~(optionnel) si tu veux une~~ hauteur ~~identique~~ */		/* Le lien interne remplit la hauteur du bouton */
	.minicardv2-container > .button-link .button-link__link{		.minicardv2-container > .button-link .button-link__link{
	height:100%;		height:100%;
	}		}

Agrado le 4 février 2026 à 20:35

2026-02-04T20:35:02Z

← Version précédente		Version du 4 février 2026 à 20:35
Ligne 1 :		Ligne 1 :
	~~/* =========================================================~~
	~~MiniCardv2 — layout uniforme~~
	~~- 1 seule ligne~~
	~~- largeur identique~~
	~~- hauteur identique~~
	~~- scroll horizontal si dépassement~~
	~~- 100% compatible TemplateStyles~~
	~~========================================================= */~~

	.minicardv2-container{		.minicardv2-container{
	display:~~flex~~;		display:grid;
	~~flex-wrap:nowrap; /* jamais de retour ligne */~~
	gap:.9rem;		gap:.9rem;

Ligne 17 :		Ligne 7 :
	box-sizing:border-box;		box-sizing:border-box;

	~~overflow~~-x:auto;		/* Colonnes harmonisées, responsive */
	~~overflow~~-y:~~hidden~~;		grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
			align-items:stretch;
	}		}

	/* ~~===== Taille UNIFORME des tuiles =====~~ */		/* S'assure que le bouton remplit bien sa "cellule" */
	.minicardv2-container > .button-link{		.minicardv2-container > .button-link{
	~~flex~~:~~0 0 190px; /* largeur FIXE */~~		width:100%;
	~~height:72px; /* hauteur FIXE */~~

	~~box-sizing:border-box~~;
	}		}

	/* ~~Le lien remplit entièrement la tuile~~ */		/* (optionnel) si tu veux une hauteur identique */
	.minicardv2-container > .button-link > .button-link__link{		.minicardv2-container > .button-link .button-link__link{
	~~width:100%;~~
	height:100%;		height:100%;

	~~display:flex;~~
	~~align-items:center;~~
	~~justify-content:center;~~

	~~padding:0;~~
	~~box-sizing:border-box;~~
	}

	~~/* Icônes / images toujours contenues */~~
	~~.minicardv2-container img{~~
	~~max-height:65%;~~
	~~width:auto;~~
	}		}

Agrado le 4 février 2026 à 20:20

2026-02-04T20:20:43Z

← Version précédente		Version du 4 février 2026 à 20:20
Ligne 1 :		Ligne 1 :
	/* =========================================================		/* =========================================================
	MiniCardv2~~/styles.css~~ — 1 seule ligne ~~(no wrap) + scroll~~		MiniCardv2 — layout uniforme
	- ~~Toujours sur UNE ligne, quel que soit le nombre de tuiles~~		- 1 seule ligne
	- ~~Pleine largeur~~		- largeur identique
	- ~~Scroll~~ horizontal si ~~ça dépasse~~		- hauteur identique
	- ~~Compatible~~ TemplateStyles		- scroll horizontal si dépassement
			- 100% compatible TemplateStyles
	========================================================= */		========================================================= */

	.minicardv2-container{		.minicardv2-container{
	display:flex;		display:flex;
	flex-wrap:nowrap; /* ~~✅ interdit le~~ retour ~~à la~~ ligne */		flex-wrap:nowrap; /* jamais de retour ligne */
	~~align-items:stretch;~~
	gap:.9rem;		gap:.9rem;

Ligne 17 :		Ligne 17 :
	box-sizing:border-box;		box-sizing:border-box;

	overflow-x:auto; ~~/* ✅ scroll si trop de tuiles */~~		overflow-x:auto;
	overflow-y:hidden;		overflow-y:hidden;

	~~background:transparent;~~
	~~border:0;~~
	}		}

	/* ~~Chaque bouton ButtonLink~~ */		/* ===== Taille UNIFORME des tuiles ===== */
	.minicardv2-container > .button-link{		.minicardv2-container > .button-link{
	flex:1 0 ~~170px~~; /* ~~base 170px, ne wrap pas~~ */		flex:0 0 190px; /* largeur FIXE */
	~~width~~:~~auto~~;		height:72px; /* hauteur FIXE */

	box-sizing:border-box;		box-sizing:border-box;
	}		}

	/* Le lien ~~interne~~ remplit ~~le bouton~~ */		/* Le lien remplit entièrement la tuile */
	.minicardv2-container > .button-link > .button-link__link{		.minicardv2-container > .button-link > .button-link__link{
			width:100%;
	height:100%;		height:100%;

	display:flex;		display:flex;
	align-items:center;		align-items:center;
	justify-content:center;		justify-content:center;

			padding:0;
	box-sizing:border-box;		box-sizing:border-box;
	}		}

	/* Icônes ~~: évite qu'une icône trop grande force la mise en page~~ */		/* Icônes / images toujours contenues */
	.minicardv2-container img{		.minicardv2-container img{
	max-height:70%;		max-height:65%;
	width:auto;		width:auto;
	}		}

Agrado le 4 février 2026 à 20:19

2026-02-04T20:19:02Z

← Version précédente		Version du 4 février 2026 à 20:19
Ligne 1 :		Ligne 1 :
	/* =========================================================		/* =========================================================
	MiniCardv2/styles.css — ~~version compatible TemplateStyles~~		MiniCardv2/styles.css — 1 seule ligne (no wrap) + scroll
	- ~~Grille harmonisée responsive~~		- Toujours sur UNE ligne, quel que soit le nombre de tuiles
	- ~~Hauteur uniforme réglable~~		- Pleine largeur
			- Scroll horizontal si ça dépasse
			- Compatible TemplateStyles
	========================================================= */		========================================================= */

	~~/* Conteneur : grille responsive */~~
	.minicardv2-container{		.minicardv2-container{
	display:~~grid~~;		display:flex;
			flex-wrap:nowrap; /* ✅ interdit le retour à la ligne */
			align-items:stretch;
	gap:.9rem;		gap:.9rem;

Ligne 14 :		Ligne 17 :
	box-sizing:border-box;		box-sizing:border-box;

	/* ~~Colonnes harmonisées, responsive~~ */		overflow-x:auto; /* ✅ scroll si trop de tuiles */
	~~grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));~~		overflow-y:hidden;
	~~align~~-~~items~~:~~stretch~~;

	background:transparent;		background:transparent;
Ligne 22 :		Ligne 24 :
	}		}

	/* ~~✅ Réglage hauteur : modifie ici~~ */		/* Chaque bouton ButtonLink */
	.minicardv2-container > .button-link{		.minicardv2-container > .button-link{
	~~width:100% !important;~~		flex:1 0 170px; /* base 170px, ne wrap pas */
			width:auto;
	~~height~~:~~56px !important~~; /* ~~<- change 56 -> 72 / 80~~ */		box-sizing:border-box;
	~~min-height~~:~~56px !important~~;

	box-sizing:border-box ~~!important~~;
	}		}

	/* Le lien interne remplit ~~la tuile et se centre~~ */		/* Le lien interne remplit le bouton */
	.minicardv2-container > .button-link > .button-link__link{		.minicardv2-container > .button-link > .button-link__link{
	height:100% ~~!important~~;		height:100%;
	~~min-height:100% !important;~~		display:flex;
			align-items:center;
	display:flex ~~!important~~;		justify-content:center;
	align-items:center ~~!important~~;		box-sizing:border-box;
	justify-content:center ~~!important;~~

	~~/* Si ButtonLink ajoute du padding, ça empêche de réduire la hauteur */~~
	~~padding-top:0 !important;~~
	~~padding-bottom:0 !important~~;

	box-sizing:border-box ~~!important;~~
	}

	~~/* Texte : évite que line-height/marges forcent la hauteur */~~
	~~.minicardv2-container > .button-link > .button-link__link .button-link__text{~~
	~~margin:0 !important;~~
	~~line-height:1.1 !important~~;
	}		}

	/* ~~Icône~~ : évite ~~qu’une image~~ trop grande force la ~~hauteur~~ */		/* Icônes : évite qu'une icône trop grande force la mise en page */
	.minicardv2-container ~~> .button-link > .button-link__link~~ img{		.minicardv2-container img{
	max-height:70% ~~!important~~;		max-height:70%;
	width:auto ~~!important~~;		width:auto;
	}		}