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

Hiob : .dpl-titre-recents { font-size: 1.2rem;}

2025-11-08T15:54:43Z

.dpl-titre-recents { font-size: 1.2rem;}

← Version précédente		Version du 8 novembre 2025 à 15:54
Ligne 36 :		Ligne 36 :
	/* === TITRE === */		/* === TITRE === */
	.dpl-titre-recents {		.dpl-titre-recents {
	font-size: 1.~~5rem~~;		font-size: 1.2rem;
	font-weight: 600;		font-weight: 600;
	color: var(--color-base);		color: var(--color-base);

Hiob : separator

2025-11-08T15:53:04Z

separator

← Version précédente		Version du 8 novembre 2025 à 15:53
Ligne 24 :		Ligne 24 :
	margin: 0;		margin: 0;
	padding: 0;		padding: 0;
			}

			/* === SÉPARATEUR === */
			.dpl-separateur {
			border: none;
			height: 2px;
			background-color: var(--border-color-base);
			margin: 0 0 1.5rem 0;
	}		}

	/* === TITRE === */		/* === TITRE === */
	.dpl-titre-recents {		.dpl-titre-recents {
	font-size: 0.5rem;		font-size: 1.5rem;
	font-weight: 600;		font-weight: 600;
	color: var(--color-base);		color: var(--color-base);
	margin: 0 0 1rem 0;		margin: 0 0 1rem 0;
	padding~~-bottom~~: 0~~.5rem;~~		padding: 0;
	~~border-top: 2px solid var(--border-color-base)~~;
	}		}

Hiob le 8 novembre 2025 à 15:45

2025-11-08T15:45:52Z

← Version précédente		Version du 8 novembre 2025 à 15:45
Ligne 28 :		Ligne 28 :
	/* === TITRE === */		/* === TITRE === */
	.dpl-titre-recents {		.dpl-titre-recents {
	font-size: 1.5rem;		font-size: 0.5rem;
	font-weight: 600;		font-weight: 600;
	color: var(--color-base);		color: var(--color-base);
	margin: 0 0 1rem 0;		margin: 0 0 1rem 0;
	padding-bottom: 0.5rem;		padding-bottom: 0.5rem;
	border-~~bottom~~: 2px solid var(--border-color-base);		border-top: 2px solid var(--border-color-base);
	}		}

Hiob : .dpl-titre-recents

2025-11-08T15:44:41Z

.dpl-titre-recents

@@ Ligne 24 : / Ligne 24 : @@
      margin: 0;
      padding: 0;
+}

Hiob le 8 novembre 2025 à 15:24

2025-11-08T15:24:19Z

← Version précédente		Version du 8 novembre 2025 à 15:24
Ligne 3 :		Ligne 3 :
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: ~~0.75rem~~; /* ~~Augmenté de 0.5rem à 0.75rem~~ */		gap: 1rem; /* ← Espace entre les boutons (16px) */
	margin: 1.5rem 0;		margin: 1.5rem 0;
	padding: 0;		padding: 0;
Ligne 9 :		Ligne 9 :
	border: none;		border: none;
	justify-content: flex-start;		justify-content: flex-start;
			}

			/* === RESET LISTE === */
			.dpl-boutons-articles ul {
			list-style-type: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-wrap: wrap;
			gap: 1rem; /* ← Espacement entre items (redondant avec parent mais sécurise) */
			}

			.dpl-boutons-articles li {
			margin: 0;
			padding: 0;
	}		}

Ligne 15 :		Ligne 30 :
	display: inline-flex;		display: inline-flex;
	align-items: center;		align-items: center;
	padding: 0.~~5rem 1rem~~;		padding: 0.6rem 1.2rem; /* ← Augmenté pour plus de présence */
			margin: 0.25rem; /* ← Marge supplémentaire pour bien séparer */
	font-size: 0.875rem;		font-size: 0.875rem;
	font-weight: 500;		font-weight: 500;
Ligne 24 :		Ligne 40 :
	border-radius: 4px;		border-radius: 4px;
	cursor: pointer;		cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); ~~/* ← Une seule transition */~~		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}		}

	/* ~~Hover - Suppression du soulignement + couleur blanche~~ */		/* === HOVER STATE === */
	.dpl-bouton-article:hover {		.dpl-bouton-article:hover {
	background-color: var(--color-progressive);		background-color: var(--color-progressive);
	color: #fff !important; ~~/* Force le blanc */~~		color: #fff !important;
	border-color: var(--color-progressive);		border-color: var(--color-progressive);
	text-decoration: none !important; ~~/* Supprime le soulignement */~~		text-decoration: none !important;
	box-shadow: ~~var~~(~~--box-shadow-card~~);		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transform: translateY(-~~1px~~); /* Légère élévation */		transform: translateY(-2px); /* ← Légère élévation au survol */
			}

			/* === LIENS DANS LES BOUTONS === */
			.dpl-bouton-article a {
			color: inherit;
			text-decoration: none !important;
			display: block;
			width: 100%;
	}		}

	~~/* Force la couleur sur le lien interne aussi */~~		.dpl-bouton-article:hover a,
	.dpl-bouton-article:hover a {		.dpl-bouton-article:hover small {
	color: #fff !important;		color: #fff !important;
	text-decoration: none !important;		text-decoration: none !important;
	}		}

	/* ~~Focus~~ (~~accessibilité~~) */		/* === FOCUS (Accessibilité) === */
	.dpl-bouton-article:focus {		.dpl-bouton-article:focus,
			.dpl-bouton-article a:focus {
	outline: 2px solid var(--color-progressive);		outline: 2px solid var(--color-progressive);
	outline-offset: 2px;		outline-offset: 2px;
	}

	~~/* === DATE === */~~
	~~.dpl-bouton-article small {~~
	~~margin-left: 0.5rem;~~
	~~color: var(--color-subtle);~~
	~~font-size: 0.75rem;~~
	}

	~~.dpl-bouton-article:hover small {~~
	~~color: #fff !important; /* Blanc pur au hover */~~
	~~opacity: 0.95; /* Légèrement transparent pour différencier */~~
	}		}

Ligne 64 :		Ligne 77 :
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.dpl-boutons-articles {		.dpl-boutons-articles {
	gap: 0.~~5rem~~; /* ~~Gap~~ réduit sur mobile */		gap: 0.75rem; /* ← Espacement réduit sur mobile */
	}		}

	.dpl-bouton-article {		.dpl-bouton-article {
	padding: 0.~~4rem~~ 0.~~8rem~~;		padding: 0.5rem 1rem;
	font-size: 0.~~813rem~~;		margin: 0.2rem;
			font-size: 0.8125rem;
			}
			}

			@media (max-width: 480px) {
			.dpl-boutons-articles {
			gap: 0.5rem;
	}		}

	.dpl-bouton-article ~~small~~ {		.dpl-bouton-article {
	~~display~~: ~~none~~;		padding: 0.4rem 0.8rem;
			margin: 0.15rem;
	}		}
	}		}

Hiob le 8 novembre 2025 à 15:21

2025-11-08T15:21:41Z

← Version précédente		Version du 8 novembre 2025 à 15:21
Ligne 23 :		Ligne 23 :
	border: 1px solid var(--border-color-base);		border: 1px solid var(--border-color-base);
	border-radius: 4px;		border-radius: 4px;
	~~transition: all 0.2s ease;~~
	cursor: pointer;		cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);		transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* ← Une seule transition */
	}		}

Hiob : transition

2025-11-08T10:56:38Z

transition

← Version précédente		Version du 8 novembre 2025 à 10:56
Ligne 25 :		Ligne 25 :
	transition: all 0.2s ease;		transition: all 0.2s ease;
	cursor: pointer;		cursor: pointer;
			transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}		}

Ligne 34 :		Ligne 35 :
	text-decoration: none !important; /* Supprime le soulignement */		text-decoration: none !important; /* Supprime le soulignement */
	box-shadow: var(--box-shadow-card);		box-shadow: var(--box-shadow-card);
			transform: translateY(-1px); /* Légère élévation */
	}		}

Hiob : hover

2025-11-08T10:52:15Z

hover

← Version précédente		Version du 8 novembre 2025 à 10:52
Ligne 3 :		Ligne 3 :
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: 0.5rem;		gap: 0.75rem; /* Augmenté de 0.5rem à 0.75rem */
	margin: 1.5rem 0;		margin: 1.5rem 0;
	padding: 0; ~~/* Suppression du padding */~~		padding: 0;
	background: none; ~~/* Suppression du fond */~~		background: none;
	border: none; ~~/* Suppression de la bordure */~~		border: none;
	justify-content: flex-start;		justify-content: flex-start;
	}		}
Ligne 19 :		Ligne 19 :
	font-weight: 500;		font-weight: 500;
	text-decoration: none;		text-decoration: none;
	color: var(--color-base); ~~/* Texte adaptatif */~~		color: var(--color-base);
	background-color: var(--color-surface-2); ~~/* Fond carte Citizen */~~		background-color: var(--color-surface-2);
	border: 1px solid var(--border-color-base); ~~/* Bordure adaptative */~~		border: 1px solid var(--border-color-base);
	border-radius: 4px;		border-radius: 4px;
	transition: all 0.2s ease;		transition: all 0.2s ease;
Ligne 27 :		Ligne 27 :
	}		}

	/* Hover - ~~utilise la~~ couleur ~~progressive de Citizen~~ */		/* Hover - Suppression du soulignement + couleur blanche */
	.dpl-bouton-article:hover {		.dpl-bouton-article:hover {
	background-color: var(--color-progressive);		background-color: var(--color-progressive);
	color: #fff;		color: #fff !important; /* Force le blanc */
	border-color: var(--color-progressive);		border-color: var(--color-progressive);
	text-decoration: none;		text-decoration: none !important; /* Supprime le soulignement */
	box-shadow: var(--box-shadow-card); /* ~~Ombre carte~~ */		box-shadow: var(--box-shadow-card);
			}

			/* Force la couleur sur le lien interne aussi */
			.dpl-bouton-article:hover a {
			color: #fff !important;
			text-decoration: none !important;
	}		}

Ligne 45 :		Ligne 51 :
	.dpl-bouton-article small {		.dpl-bouton-article small {
	margin-left: 0.5rem;		margin-left: 0.5rem;
	color: var(--color-subtle); ~~/* Texte secondaire adaptatif */~~		color: var(--color-subtle);
	font-size: 0.75rem;		font-size: 0.75rem;
	}		}

	~~/* La date reste visible en blanc au hover */~~
	.dpl-bouton-article:hover small {		.dpl-bouton-article:hover small {
	color: ~~rgba(255, 255, 255,~~ 0.9);		color: #fff !important; /* Blanc pur au hover */
			opacity: 0.95; /* Légèrement transparent pour différencier */
	}		}

Ligne 57 :		Ligne 63 :
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.dpl-boutons-articles {		.dpl-boutons-articles {
	gap: 0.~~4rem~~;		gap: 0.5rem; /* Gap réduit sur mobile */
	}		}

Ligne 66 :		Ligne 72 :

	.dpl-bouton-article small {		.dpl-bouton-article small {
	display: none; ~~/* Cache la date sur mobile */~~		display: none;
	}		}
	}		}

Hiob le 8 novembre 2025 à 10:45

2025-11-08T10:45:55Z

← Version précédente		Version du 8 novembre 2025 à 10:45
Ligne 1 :		Ligne 1 :
	/* ===== ~~RECENT ARTICLES BUTTONS (Citizen Theme Adaptation)~~ =~~==== */~~		/* === CONTENEUR PRINCIPAL === */
	~~/* Conteneur principal - Sans fond ni bordure~~ */
	.dpl-boutons-articles {		.dpl-boutons-articles {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: 0.~~75rem~~;		gap: 0.5rem;
	margin: 1.5rem 0;		margin: 1.5rem 0;
	padding: 0;		padding: 0; /* Suppression du padding */
	background~~-color~~: ~~transparent~~;		background: none; /* Suppression du fond */
	border: none;		border: none; /* Suppression de la bordure */
	~~border-radius: 0;~~
	justify-content: flex-start;		justify-content: flex-start;
	~~width: 100%;~~
	}		}

	/* ~~Style des boutons (compatible Citizen)~~ */		/* === BOUTONS === */
	.dpl-bouton-article {		.dpl-bouton-article {
	display: inline-~~block~~;		display: inline-flex;
			align-items: center;
	padding: 0.5rem 1rem;		padding: 0.5rem 1rem;
	~~border~~: ~~1px solid~~ var(-~~-border~~-color-base);		font-size: 0.875rem;
	~~border-radius: 2px;~~		font-weight: 500;
	background-color: var(--color-surface-1);		text-decoration: none;
	~~color~~: var(--color-base);		color: var(--color-base); /* Texte adaptatif */
	~~text~~-~~decoration: none !important;~~		background-color: var(--color-surface-2); /* Fond carte Citizen */
	~~font-size~~: ~~0.9rem~~;		border: 1px solid var(--border-color-base); /* Bordure adaptative */
	transition:		border-radius: 4px;
	~~background-color~~ 0.2s ease,		transition: all 0.2s ease;
	~~border-color 0.2s ease,~~		cursor: pointer;
	~~color 0.2s ease;~~
	~~white-space: nowrap;~~
	~~overflow: hidden~~;
	~~text-overflow: ellipsis;~~
	~~max-width~~: ~~200px~~;
	}		}

	/* ~~Effet~~ de ~~survol~~ */		/* Hover - utilise la couleur progressive de Citizen */
	.dpl-bouton-article:hover {		.dpl-bouton-article:hover {
	background-color: var(--color-~~surface-3~~);		background-color: var(--color-progressive);
			color: #fff;
	border-color: var(--color-progressive);		border-color: var(--color-progressive);
	~~color~~: var(--~~color~~-~~progressive~~);		text-decoration: none;
	~~cursor: pointer;~~		box-shadow: var(--box-shadow-card); /* Ombre carte */
	}		}

	/* ~~Bouton actif~~ (~~page courante~~) */		/* Focus (accessibilité) */
	.dpl-bouton-article~~.active~~ {		.dpl-bouton-article:focus {
	~~background-color~~: var(--color-progressive);		outline: 2px solid var(--color-progressive);
	~~border-color: var(-~~-~~color-progressive);~~		outline-offset: 2px;
	~~color~~: ~~white~~;
	}		}

	/* ~~Date de modification (style subtil)~~ */		/* === DATE === */
	.dpl-bouton-article .~~date {~~		.dpl-bouton-article small {
	~~display~~: ~~block~~;		margin-left: 0.5rem;
			color: var(--color-subtle); /* Texte secondaire adaptatif */
	font-size: 0.75rem;		font-size: 0.75rem;
	~~color: var(--color-subtle);~~
	~~margin-top: 0.25rem;~~
	}		}

	/* ~~Adaptation pour les cartes (si variante "carte" utilisée)~~ */		/* La date reste visible en blanc au hover */
	.dpl-bouton-article~~.carte~~ {		.dpl-bouton-article:hover small {
	~~min-width: 120px;~~		color: rgba(255, 255, 255, 0.9);
	~~text-align: center;~~
	~~padding~~: 0.~~75rem;~~
	~~border-radius: 4px;~~
	~~box-shadow: var(--box-shadow-card~~);
	}		}

	/* ~~Responsive: Empiler les boutons sur mobile~~ */		/* === RESPONSIVE === */
	@media (max-width: ~~720px~~) {		@media (max-width: 768px) {
	.dpl-boutons-articles {		.dpl-boutons-articles {
	~~justify-content~~: ~~center~~;		gap: 0.4rem;
	}		}

	.dpl-bouton-article {		.dpl-bouton-article {
	~~max-width~~: ~~150px~~;		padding: 0.4rem 0.8rem;
	font-size: 0.~~85rem~~;		font-size: 0.813rem;
			}

			.dpl-bouton-article small {
			display: none; /* Cache la date sur mobile */
	}		}
	}		}

Hiob le 8 novembre 2025 à 10:41

2025-11-08T10:41:38Z

← Version précédente		Version du 8 novembre 2025 à 10:41
Ligne 1 :		Ligne 1 :
	/* ~~Recent Articles Buttons - Style Sheet~~ */		/* ===== RECENT ARTICLES BUTTONS (Citizen Theme Adaptation) ===== */
	/* ~~Container~~ */		/* Conteneur principal - Sans fond ni bordure */
	.~~ext~~-~~recent~~-articles {		.dpl-boutons-articles {
	display: flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	gap: 0.~~6em~~;		gap: 0.75rem;
	margin: 1.~~5em~~ 0;		margin: 1.5rem 0;
	padding: 0~~.8em~~;		padding: 0;
	background-color: ~~#f8f9fa~~;		background-color: transparent;
	border-radius: ~~8px~~;		border: none;
			border-radius: 0;
	justify-content: flex-start;		justify-content: flex-start;
			width: 100%;
	}		}

	.~~ext~~-~~recent~~-~~articles ul~~ {		/* Style des boutons (compatible Citizen) */
	~~list~~-~~style: none~~;		.dpl-bouton-article {
	padding: 0;		display: inline-block;
	~~margin~~: 0;		padding: 0.5rem 1rem;
	~~display~~: ~~flex~~;		border: 1px solid var(--border-color-base);
	~~flex~~-~~wrap~~: ~~wrap~~;		border-radius: 2px;
	~~gap~~: 0.~~6em~~;		background-color: var(--color-surface-1);
	width: ~~100%~~;		color: var(--color-base);
			text-decoration: none !important;
			font-size: 0.9rem;
			transition:
			background-color 0.2s ease,
			border-color 0.2s ease,
			color 0.2s ease;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 200px;
	}		}

	/* ~~Button~~ */		/* Effet de survol */
	.~~ext~~-~~recent~~-~~articles__button~~ {		.dpl-bouton-article:hover {
	~~display: block;~~		background-color: var(--color-surface-3);
	background-color: ~~#ffffff;~~		border-color: var(--color-progressive);
	color~~: #202122;~~		color: var(--color-progressive);
	~~padding: 0.5em 1em~~;		cursor: pointer;
	border-~~radius~~: ~~6px;~~
	~~font~~-~~weight: 500;~~
	~~text~~-~~decoration: none~~;
	~~transition~~: ~~all 0.2s ease;~~
	~~border: 1px solid #a2a9b1;~~
	~~box~~-~~shadow: 0 1px 3px rgba(0, 0, 0, 0.07);~~
	~~min~~-~~width: 140px;~~
	~~text~~-~~align: center~~;
	~~line-height~~: ~~1.4~~;
	}		}

	.~~ext~~-~~recent~~-~~articles__button:hover~~ {		/* Bouton actif (page courante) */
	background-color: ~~#36c~~;		.dpl-bouton-article.active {
			background-color: var(--color-progressive);
			border-color: var(--color-progressive);
	color: white;		color: white;
	~~transform: translateY(-2px);~~
	~~box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);~~
	~~border-color: #36c;~~
	}		}

	.~~ext~~-~~recent~~-~~articles__button~~:~~active {~~		/* Date de modification (style subtil) */
	~~transform~~: ~~translateY~~(0);		.dpl-bouton-article .date {
			display: block;
			font-size: 0.75rem;
			color: var(--color-subtle);
			margin-top: 0.25rem;
	}		}

	/* ~~Mobile~~ */		/* Adaptation pour les cartes (si variante "carte" utilisée) */
	@media (max-width: ~~600px~~) {		.dpl-bouton-article.carte {
	.~~ext~~-~~recent~~-articles {		min-width: 120px;
			text-align: center;
			padding: 0.75rem;
			border-radius: 4px;
			box-shadow: var(--box-shadow-card);
			}

			/* Responsive: Empiler les boutons sur mobile */
			@media (max-width: 720px) {
			.dpl-boutons-articles {
	justify-content: center;		justify-content: center;
	}		}
	.~~ext~~-~~recent~~-~~articles__button~~ {		.dpl-bouton-article {
	width: ~~100%~~;		max-width: 150px;
	~~max~~-~~width~~: ~~220px~~;		font-size: 0.85rem;
	}		}
	}

	~~.ext-recent-articles--compact .ext-recent-articles__button {~~
	~~padding: 0.3em 0.8em;~~
	~~min-width: 100px;~~
	~~font-size: 0.9em;~~
	}		}

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

Hiob : .dpl-titre-recents { font-size: 1.2rem;}

Hiob : separator