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

Hiob le 5 mars 2026 à 14:19

2026-03-05T14:19:56Z

Hiob le 4 mars 2026 à 15:57

2026-03-04T15:57:07Z

Hiob le 4 mars 2026 à 15:54

2026-03-04T15:54:05Z

← Version précédente		Version du 4 mars 2026 à 15:54
Ligne 39 :		Ligne 39 :
	}		}

			/* Version sans image */
	/* Version sans image */		/* Version sans image */
	.minicard.minicard--no-image {		.minicard.minicard--no-image {
	background: var(--color-surface-3);		background: var(--color-surface-2);
	~~border: 1px solid rgba(255, 255, 255, 0.15);~~
	~~min-height: 60px~~;
	}		}

	.minicard.minicard--no-image:hover {		.minicard.minicard--no-image:hover {
	background: var(--color-surface-4);		background: var(--color-surface-3);
	border-color: rgba(74, 158, 255, 0.5);		border-color: rgba(74, 158, 255, 0.5);
			}

			.minicard.minicard--no-image > a {
			color: var(--color-base) !important;
			text-shadow: none !important;
			}

			.minicard.minicard--no-image > a:hover {
			color: var(--color-emphasized) !important;
	}		}

Hiob : no-image

2026-03-04T15:52:05Z

no-image

@@ Ligne 37 : / Ligne 37 : @@
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+}

Hiob le 4 mars 2026 à 15:47

2026-03-04T15:47:03Z

← Version précédente		Version du 4 mars 2026 à 15:47
Ligne 7 :		Ligne 7 :
	display: grid;		display: grid;
	gap: 12px;		gap: 12px;
	grid-template-columns: repeat(5, 1fr);		/* Fallback raisonnable avant JS : auto-fill sans étirement */
			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	grid-auto-rows: 60px;		grid-auto-rows: 60px;
	margin: 0 auto 24px auto;		margin: 0 auto 24px auto;
	width: 100%;		width: 100%;
	~~visibility: hidden;~~
	}		}

	.minicard-grid.is-ready {		.minicard-grid.is-ready {
	~~visibility: visible;~~		/* JS a pris le relais, les colonnes sont dans le style inline */
	}		}

Hiob le 4 mars 2026 à 15:44

2026-03-04T15:44:04Z

← Version précédente		Version du 4 mars 2026 à 15:44
Ligne 3 :		Ligne 3 :
	============================================================================= */		============================================================================= */

	/* Conteneur de grille - colonnes gérées par JS~~, fallback auto-fill~~ */		/* Conteneur de grille - colonnes gérées par JS */
	.minicard-grid {		.minicard-grid {
	display: grid;		display: grid;
	gap: 12px;		gap: 12px;
	grid-template-columns: repeat(~~auto-fill, minmax(130px~~, 1fr));		grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 60px;		grid-auto-rows: 60px;
	margin: 0 auto 24px auto;		margin: 0 auto 24px auto;
	width: 100%;		width: 100%;
			visibility: hidden;
			}

			.minicard-grid.is-ready {
			visibility: visible;
	}		}

Ligne 166 :		Ligne 171 :
	}		}

	/* Responsive tablette ~~- le JS recalcule, mais on ajuste la hauteur~~ */		/* Responsive tablette */
	@media (max-width: 900px) {		@media (max-width: 900px) {
	.minicard-grid {		.minicard-grid {

Hiob : JS

2026-03-04T15:34:42Z

← Version précédente		Version du 4 mars 2026 à 15:34
Ligne 3 :		Ligne 3 :
	============================================================================= */		============================================================================= */

	/* Conteneur de grille - 6 colonnes ~~fixes~~ */		/* Conteneur de grille - colonnes gérées par JS, fallback auto-fill */
	.minicard-grid {		.minicard-grid {
	display: grid;		display: grid;
	gap: 12px;		gap: 12px;
	grid-template-columns: repeat(6, 1fr);		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	grid-auto-rows: 60px;		grid-auto-rows: 60px;
	margin: 0 auto 24px auto;		margin: 0 auto 24px auto;
Ligne 89 :		Ligne 89 :
	color: #ffffff !important;		color: #ffffff !important;
	text-decoration: none !important;		text-decoration: none !important;
	text-shadow:		text-shadow:
	-1px -1px 4px rgba(0, 0, 0, 0.8),		-1px -1px 4px rgba(0, 0, 0, 0.8),
	1px 1px 4px rgba(0, 0, 0, 0.8),		1px 1px 4px rgba(0, 0, 0, 0.8),
Ligne 98 :		Ligne 98 :
	.minicard:hover > a:not(.minicard-link-external) {		.minicard:hover > a:not(.minicard-link-external) {
	padding-left: 20px;		padding-left: 20px;
	text-shadow:		text-shadow:
	-1px -1px 6px rgba(0, 0, 0, 0.9),		-1px -1px 6px rgba(0, 0, 0, 0.9),
	1px 1px 6px rgba(0, 0, 0, 0.9),		1px 1px 6px rgba(0, 0, 0, 0.9),
Ligne 115 :		Ligne 115 :
	color: #ffffff !important;		color: #ffffff !important;
	text-decoration: none !important;		text-decoration: none !important;
	text-shadow:		text-shadow:
	-1px -1px 4px rgba(0, 0, 0, 0.8),		-1px -1px 4px rgba(0, 0, 0, 0.8),
	1px 1px 4px rgba(0, 0, 0, 0.8),		1px 1px 4px rgba(0, 0, 0, 0.8),
Ligne 127 :		Ligne 127 :
	.minicard:hover .minicard-link-external {		.minicard:hover .minicard-link-external {
	padding-left: 20px;		padding-left: 20px;
	text-shadow:		text-shadow:
	-1px -1px 6px rgba(0, 0, 0, 0.9),		-1px -1px 6px rgba(0, 0, 0, 0.9),
	1px 1px 6px rgba(0, 0, 0, 0.9),		1px 1px 6px rgba(0, 0, 0, 0.9),
Ligne 151 :		Ligne 151 :
	padding: 0 16px;		padding: 0 16px;
	color: #ffffff;		color: #ffffff;
	text-shadow:		text-shadow:
	-1px -1px 4px rgba(0, 0, 0, 0.8),		-1px -1px 4px rgba(0, 0, 0, 0.8),
	1px 1px 4px rgba(0, 0, 0, 0.8),		1px 1px 4px rgba(0, 0, 0, 0.8),
Ligne 166 :		Ligne 166 :
	}		}

	/* Responsive - ~~4 colonnes~~ */		/* Responsive tablette - le JS recalcule, mais on ajuste la hauteur */
	@media (max-width: 900px) {		@media (max-width: 900px) {
	.minicard-grid {		.minicard-grid {
	~~grid-template-columns: repeat(4, 1fr);~~
	gap: 8px;		gap: 8px;
	}		}
Ligne 178 :		Ligne 177 :
	}		}

	/* Responsive ~~- 3 colonnes~~ */		/* Responsive mobile */
	@media (max-width: 650px) {		@media (max-width: 650px) {
	.minicard-grid {		.minicard-grid {
	~~grid-template-columns: repeat(3, 1fr);~~
	grid-auto-rows: 52px;		grid-auto-rows: 52px;
	gap: 8px;		gap: 8px;
Ligne 199 :		Ligne 197 :
	}		}

	~~/* Responsive - 2 colonnes */~~
	@media (max-width: 420px) {		@media (max-width: 420px) {
	.minicard-grid {		.minicard-grid {
	~~grid-template-columns: repeat(2, 1fr);~~
	gap: 6px;		gap: 6px;
	}		}
	}		}

Hiob : fix minicard width

2026-03-04T15:30:36Z

fix minicard width

← Version précédente		Version du 4 mars 2026 à 15:30
Ligne 3 :		Ligne 3 :
	============================================================================= */		============================================================================= */

	/* Conteneur de grille */		/* Conteneur de grille - 6 colonnes fixes */
	.minicard-grid {		.minicard-grid {
	display: ~~flex;~~		display: grid;
	~~flex-wrap: wrap~~;
	gap: 12px;		gap: 12px;
			grid-template-columns: repeat(6, 1fr);
			grid-auto-rows: 60px;
	margin: 0 auto 24px auto;		margin: 0 auto 24px auto;
	width: 100%;		width: 100%;
	~~/* Les enfants se partagent l'espace équitablement sur chaque ligne */~~
	~~justify-content: flex-start;~~
	}		}

	~~/* MiniCard individuelle */~~
	.minicard {		.minicard {
	position: relative;		position: relative;
Ligne 26 :		Ligne 24 :
	align-items: center;		align-items: center;
	height: 60px;		height: 60px;
			width: 100%;
	box-sizing: border-box;		box-sizing: border-box;
	~~/* Taille de base : ~6 cartes par ligne, avec le gap déduit */~~
	~~flex: 1 1 calc((100% - 5 * 12px) / 6);~~
	~~min-width: 130px;~~
	}		}

Ligne 170 :		Ligne 166 :
	}		}

	/* Responsive ~~tablette~~ */		/* Responsive - 4 colonnes */
	@media (max-width: ~~768px~~) {		@media (max-width: 900px) {
	.minicard-grid {		.minicard-grid {
			grid-template-columns: repeat(4, 1fr);
			gap: 8px;
			}

			.minicard {
			font-size: 0.9rem;
			}
			}

			/* Responsive - 3 colonnes */
			@media (max-width: 650px) {
			.minicard-grid {
			grid-template-columns: repeat(3, 1fr);
			grid-auto-rows: 52px;
	gap: 8px;		gap: 8px;
	}		}
Ligne 179 :		Ligne 189 :
	font-size: 0.85rem;		font-size: 0.85rem;
	height: 52px;		height: 52px;
	~~/* ~3 cartes par ligne sur tablette */~~
	~~flex: 1 1 calc((100% - 2 * 8px) / 3);~~
	~~min-width: 120px;~~
	}		}

Ligne 187 :		Ligne 194 :
	.minicard-link-external,		.minicard-link-external,
	.minicard-text {		.minicard-text {
	padding: 0 ~~12px~~;		padding: 0 10px;
	font-size: 0.85rem;		font-size: 0.85rem;
	}		}
	}		}

	/* Responsive ~~mobile~~ */		/* Responsive - 2 colonnes */
	@media (max-width: ~~480px~~) {		@media (max-width: 420px) {
	.minicard-grid {		.minicard-grid {
			grid-template-columns: repeat(2, 1fr);
	gap: 6px;		gap: 6px;
	}

	~~.minicard {~~
	~~/* 2 cartes par ligne sur mobile */~~
	~~flex: 1 1 calc((100% - 6px) / 2);~~
	~~min-width: 0;~~
	}		}
	}		}

Hiob : flexwrap

2026-03-04T15:27:37Z

flexwrap

← Version précédente		Version du 4 mars 2026 à 15:27
Ligne 5 :		Ligne 5 :
	/* Conteneur de grille */		/* Conteneur de grille */
	.minicard-grid {		.minicard-grid {
	display: ~~grid~~;		display: flex;
			flex-wrap: wrap;
	gap: 12px;		gap: 12px;
	~~grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));~~
	~~grid-auto-rows: 60px;~~
	margin: 0 auto 24px auto;		margin: 0 auto 24px auto;
	width: 100%;		width: 100%;
			/* Les enfants se partagent l'espace équitablement sur chaque ligne */
			justify-content: flex-start;
	}		}

Ligne 25 :		Ligne 26 :
	align-items: center;		align-items: center;
	height: 60px;		height: 60px;
	~~width: 100%;~~
	box-sizing: border-box;		box-sizing: border-box;
			/* Taille de base : ~6 cartes par ligne, avec le gap déduit */
			flex: 1 1 calc((100% - 5 * 12px) / 6);
			min-width: 130px;
	}		}

Ligne 170 :		Ligne 173 :
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.minicard-grid {		.minicard-grid {
	~~grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));~~
	~~grid-auto-rows: 52px;~~
	gap: 8px;		gap: 8px;
	}		}
Ligne 178 :		Ligne 179 :
	font-size: 0.85rem;		font-size: 0.85rem;
	height: 52px;		height: 52px;
			/* ~3 cartes par ligne sur tablette */
			flex: 1 1 calc((100% - 2 * 8px) / 3);
			min-width: 120px;
	}		}

Ligne 191 :		Ligne 195 :
	@media (max-width: 480px) {		@media (max-width: 480px) {
	.minicard-grid {		.minicard-grid {
	~~grid-template-columns: repeat(2, 1fr);~~
	gap: 6px;		gap: 6px;
			}

			.minicard {
			/* 2 cartes par ligne sur mobile */
			flex: 1 1 calc((100% - 6px) / 2);
			min-width: 0;
	}		}
	}		}

Hiob le 4 mars 2026 à 15:24

2026-03-04T15:24:22Z

← Version précédente		Version du 4 mars 2026 à 15:24
Ligne 7 :		Ligne 7 :
	display: grid;		display: grid;
	gap: 12px;		gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(~~180px~~, 1fr));		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	grid-auto-rows: 60px;		grid-auto-rows: 60px;
	margin: 0 0 24px 0;		margin: 0 auto 24px auto;
			width: 100%;
	}		}

Ligne 21 :		Ligne 22 :
	overflow: hidden;		overflow: hidden;
	transition: all 0.3s ease;		transition: all 0.3s ease;
	display: ~~inline-~~flex;		display: flex;
	align-items: center;		align-items: center;
	~~min-width: 180px;~~
	~~max-width: 300px;~~
	height: 60px;		height: 60px;
	~~margin: 0 12px 12px 0;~~		width: 100%;
	~~vertical-align: top;~~		box-sizing: border-box;
	}

	~~/* Dans une grille, on retire les marges et on ajuste le display */~~
	~~.minicard-grid .minicard {~~
	~~display: flex;~~
	~~margin~~: 0;
	~~min~~-~~width~~: 0;
	~~max~~-~~width: none;~~
	~~width: auto~~;
	}		}

Ligne 177 :		Ligne 167 :
	}		}

	/* Responsive */		/* Responsive tablette */
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.minicard-grid {		.minicard-grid {
	grid-template-columns: repeat(auto-fill, minmax(~~140px~~, 1fr));		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	grid-auto-rows: 52px;		grid-auto-rows: 52px;
	gap: 8px;		gap: 8px;
	}		}

	.minicard {		.minicard {
	font-size: 0.85rem;		font-size: 0.85rem;
	~~min-width: 140px;~~
	height: 52px;		height: 52px;
	}		}

	.minicard > a:not(.minicard-link-external),		.minicard > a:not(.minicard-link-external),
	.minicard-link-external,		.minicard-link-external,
	.minicard-text {		.minicard-text {
	padding: 0 12px;		padding: 0 12px;
	}

	~~.minicard-link-external {~~
	font-size: 0.85rem;		font-size: 0.85rem;
	}		}
	}		}

			/* Responsive mobile */
	@media (max-width: 480px) {		@media (max-width: 480px) {
	.minicard-grid {		.minicard-grid {
	grid-template-columns: repeat(2, 1fr);		grid-template-columns: repeat(2, 1fr);
	}		gap: 6px;

	~~.minicard {~~
	~~min-width~~: 0;
	~~margin-right: 8px~~;
	}		}
	}		}