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

Louisgjbertrand le 6 novembre 2025 à 13:57

2025-11-06T13:57:34Z

← Version précédente		Version du 6 novembre 2025 à 13:57
Ligne 73 :		Ligne 73 :
	@media (min-width: 1000px) {		@media (min-width: 1000px) {
	.citizen-command-palette{		.citizen-command-palette{
	left: calc(56px + var(--space-xs));		left: calc(56px + var(--space-xs)) !important;
	top: 2rem;		top: 2rem !important;
	}		}
	}		}

Louisgjbertrand le 6 novembre 2025 à 13:56

2025-11-06T13:56:01Z

← Version précédente		Version du 6 novembre 2025 à 13:56
Ligne 67 :		Ligne 67 :
	.accueil-search-container.hidden {		.accueil-search-container.hidden {
	display: none;		display: none;
			}


			/* bouger la barre de 56px vers la droite et 20 vers le haut */
			@media (min-width: 1000px) {
			.citizen-command-palette{
			left: calc(56px + var(--space-xs));
			top: 2rem;
			}
	}		}

Louisgjbertrand le 6 novembre 2025 à 13:49

2025-11-06T13:49:24Z

← Version précédente		Version du 6 novembre 2025 à 13:49
Ligne 4 :		Ligne 4 :
	top: var(--space-xxl);		top: var(--space-xxl);
	right: var(--space-xs);		right: var(--space-xs);
	left: var(--space-xs);		left: calc(56px + var(--space-xs));
	z-index: 100;		z-index: 100;
	max-width: 56rem;		max-width: 56rem;

Hiob le 3 novembre 2025 à 12:04

2025-11-03T12:04:37Z

← Version précédente		Version du 3 novembre 2025 à 12:04
Ligne 2 :		Ligne 2 :
	.accueil-search-container {		.accueil-search-container {
	position: fixed;		position: fixed;
	top: var(--space-md);		top: var(--space-xxl);
	right: var(--space-xs);		right: var(--space-xs);
	left: var(--space-xs);		left: var(--space-xs);

Hiob le 3 novembre 2025 à 12:00

2025-11-03T12:00:34Z

← Version précédente		Version du 3 novembre 2025 à 12:00
Ligne 2 :		Ligne 2 :
	.accueil-search-container {		.accueil-search-container {
	position: fixed;		position: fixed;
	top: var(--space-s);		top: var(--space-md);
	right: var(--space-xs);		right: var(--space-xs);
	left: var(--space-xs);		left: var(--space-xs);

Hiob le 3 novembre 2025 à 11:59

2025-11-03T11:59:23Z

← Version précédente		Version du 3 novembre 2025 à 11:59
Ligne 2 :		Ligne 2 :
	.accueil-search-container {		.accueil-search-container {
	position: fixed;		position: fixed;
	top: var(--space-xs);		top: var(--space-s);
	right: var(--space-xs);		right: var(--space-xs);
	left: var(--space-xs);		left: var(--space-xs);
Ligne 15 :		Ligne 15 :
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	padding: var(--space-sm) var(--space-md);		padding: var(--space-xs) var(--space-md); /* Plus compacte */
	overflow: hidden;		overflow: hidden;
	border: var(--border-base);		border: var(--border-base);

Hiob le 3 novembre 2025 à 11:53

2025-11-03T11:53:06Z

← Version précédente		Version du 3 novembre 2025 à 11:53
Ligne 1 :		Ligne 1 :
	/* Container ~~sticky reprenant le style Citizen~~ */		/* Container positionné comme la command palette */
	.accueil-search-container {		.accueil-search-container {
	position: ~~sticky~~;		position: fixed;
	top: var(--space-xs);		top: var(--space-xs);
			right: var(--space-xs);
			left: var(--space-xs);
	z-index: 100;		z-index: 100;
	max-width: 56rem;		max-width: 56rem;
	margin-inline: auto;		margin-inline: auto;
	~~padding: var(--space-xs);~~		pointer-events: none;
	~~margin~~-~~bottom~~: ~~2rem~~;
	}		}

	/* Barre de recherche avec effet glass */		/* Barre de recherche avec effet glass identique */
	.accueil-search-bar {		.accueil-search-bar {
	display: flex;		display: flex;
Ligne 19 :		Ligne 20 :
	border-radius: var(--border-radius-medium);		border-radius: var(--border-radius-medium);
	box-shadow: var(--box-shadow-drop-xx-large);		box-shadow: var(--box-shadow-drop-xx-large);
	~~/background: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));/~~
	backdrop-filter: var(--backdrop-filter-frosted-glass);		backdrop-filter: var(--backdrop-filter-frosted-glass);
	font-size: var(--font-size-small);		font-size: var(--font-size-small);
	line-height: var(--line-height-small);		line-height: var(--line-height-small);
	cursor: pointer;		cursor: pointer;
			pointer-events: auto;
	transition-property: background-color, border-color, box-shadow;		transition-property: background-color, border-color, box-shadow;
	transition-duration: 0.2s;		transition-duration: 0.2s;
Ligne 45 :		Ligne 46 :
	margin-right: var(--space-xs);		margin-right: var(--space-xs);
	line-height: 0;		line-height: 0;
			opacity: var(--opacity-icon-base);
	}		}

Ligne 50 :		Ligne 52 :
	.accueil-search-icon img {		.accueil-search-icon img {
	vertical-align: middle;		vertical-align: middle;
	~~filter: grayscale(100%);~~
	}		}

	~~/* Animation au hover - colorer l'icône */~~		/* Texte placeholder - typographie identique à command palette */
	~~.accueil-search-bar:hover .accueil-search-icon img {~~
	~~filter: none;~~
	}

	/* Texte placeholder */
	.accueil-search-text {		.accueil-search-text {
	color: var(--color-~~subtle~~);		color: var(--color-base);
			font-weight: var(--font-weight-normal);
	flex: 1 1 auto;		flex: 1 1 auto;
	white-space: nowrap;		white-space: nowrap;
	overflow: hidden;		overflow: hidden;
	text-overflow: ellipsis;		text-overflow: ellipsis;
			}

			/* Masquer sur scroll pour éviter les conflits */
			.accueil-search-container.hidden {
			display: none;
	}		}

Ligne 70 :		Ligne 72 :
	@media (max-width: 1000px) {		@media (max-width: 1000px) {
	.accueil-search-container {		.accueil-search-container {
	~~padding~~: var(--space-xxs) var(--space-xs);		right: var(--space-xxs);
			left: var(--space-xxs);
	}		}
	}		}
Ligne 77 :		Ligne 80 :
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.accueil-search-container {		.accueil-search-container {
			position: sticky;
	top: 0;		top: 0;
	padding: var(--space-xxs);		padding: var(--space-xxs);
	margin-bottom: 1.5rem;		margin-bottom: 1.5rem;
			pointer-events: auto;
	}		}

	.accueil-search-bar {		.accueil-search-bar {
	padding: var(--space-xs) var(--space-sm);		padding: var(--space-xs) var(--space-sm);
	~~font-size: var(--font-size-x-small);~~
	}		}

Hiob le 3 novembre 2025 à 07:35

2025-11-03T07:35:09Z

← Version précédente		Version du 3 novembre 2025 à 07:35
Ligne 1 :		Ligne 1 :
	/* Container ~~avec~~ sticky */		/* Container sticky reprenant le style Citizen */
	.accueil-search-container {		.accueil-search-container {
	position: sticky;		position: sticky;
	top: 0;		top: var(--space-xs);
	z-index: 100;		z-index: 100;
	~~background~~: var(--~~color-surface~~-0);		max-width: 56rem;
	~~padding: 1rem 0~~;		margin-inline: auto;
			padding: var(--space-xs);
	margin-bottom: 2rem;		margin-bottom: 2rem;
	~~box-shadow: 0 1px 0 var(--border-color-base);~~
	}		}

	/* Barre de recherche ~~centrée~~ avec ~~largeur limitée~~ */		/* Barre de recherche avec effet glass */
	.accueil-search-bar {		.accueil-search-bar {
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	~~gap~~: ~~10px~~;		padding: var(--space-sm) var(--space-md);
	~~max~~-~~width~~: ~~600px~~;		overflow: hidden;
	~~margin~~: ~~0 auto~~;		border: var(--border-base);
	~~padding~~: ~~10px 16px~~;		border-radius: var(--border-radius-medium);
	font-size: ~~0.9375rem~~;		box-shadow: var(--box-shadow-drop-xx-large);
	line-height: ~~1.6~~;		/background: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-progressive-oklch__h) / var(--opacity-glass));/
			backdrop-filter: var(--backdrop-filter-frosted-glass);
			font-size: var(--font-size-small);
			line-height: var(--line-height-small);
	cursor: pointer;		cursor: pointer;
	~~border-radius: 8px;~~		transition-property: background-color, border-color, box-shadow;
	~~background-color: var(--color-surface-1);~~
	~~border-width: 1px;~~
	~~border-style: solid;~~
	~~border-color: var(--border-color-base);~~
	transition-property: background-color, border-color;
	transition-duration: 0.2s;		transition-duration: 0.2s;
	transition-timing-function: ease;		transition-timing-function: ease;
Ligne 33 :		Ligne 31 :
	/* États interactifs */		/* États interactifs */
	.accueil-search-bar:hover {		.accueil-search-bar:hover {
	~~background-color: var(--color-surface-2);~~
	border-color: var(--color-progressive);		border-color: var(--color-progressive);
			box-shadow: var(--box-shadow-drop-xx-large), 0 0 0 1px var(--color-progressive);
	}		}

Ligne 41 :		Ligne 39 :
	}		}

	/* Icône ~~SVG~~ - ~~reprend~~ l'~~icône native de Citizen~~ */		/* Icône - wrapper inline de l'image */
	.accueil-search-icon {		.accueil-search-icon {
	~~width~~: ~~18px~~;		display: inline-flex;
	height: ~~18px~~;		align-items: center;
	~~flex~~-~~shrink~~: 0;		margin-right: var(--space-xs);
	~~opacity~~: 0.87;		line-height: 0;
			}

			/* Cibler l'image MediaWiki générée */
			.accueil-search-icon img {
			vertical-align: middle;
			filter: grayscale(100%);
			}

			/* Animation au hover - colorer l'icône */
			.accueil-search-bar:hover .accueil-search-icon img {
			filter: none;
	}		}

Ligne 52 :		Ligne 61 :
	.accueil-search-text {		.accueil-search-text {
	color: var(--color-subtle);		color: var(--color-subtle);
	~~user-select: none;~~		flex: 1 1 auto;
	flex: 1;
	~~min-width: 0~~;
	white-space: nowrap;		white-space: nowrap;
	overflow: hidden;		overflow: hidden;
	text-overflow: ellipsis;		text-overflow: ellipsis;
	~~font-weight: 400;~~
	}

	~~/* Animation au focus/hover */~~
	~~.accueil-search-bar:hover .accueil-search-icon {~~
	~~opacity: 1;~~
	}		}

Ligne 69 :		Ligne 70 :
	@media (max-width: 1000px) {		@media (max-width: 1000px) {
	.accueil-search-container {		.accueil-search-container {
	padding: ~~0.75rem 1rem;~~		padding: var(--space-xxs) var(--space-xs);
	}

	~~.accueil~~-~~search~~-~~bar {~~
	~~max~~-~~width: 100%~~;
	}		}
	}		}
Ligne 80 :		Ligne 77 :
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.accueil-search-container {		.accueil-search-container {
	padding: ~~0.5rem 0.75rem~~;		top: 0;
			padding: var(--space-xxs);
	margin-bottom: 1.5rem;		margin-bottom: 1.5rem;
	}		}

	.accueil-search-bar {		.accueil-search-bar {
	padding: ~~9px 12px~~;		padding: var(--space-xs) var(--space-sm);
	font-size: ~~0.875rem~~;		font-size: var(--font-size-x-small);
	}		}

	.accueil-search-icon {		.accueil-search-icon {
	~~width: 16px;~~		margin-right: var(--space-xxs);
	~~height~~: ~~16px;~~
	}
	}

	~~/* Très petits écrans */~~
	~~@media~~ (~~max~~-~~width: 480px) {~~
	~~.accueil~~-~~search~~-~~text {~~
	~~font-size: 0.8125rem~~;
	}		}
	}		}

Hiob le 3 novembre 2025 à 07:27

2025-11-03T07:27:05Z

← Version précédente		Version du 3 novembre 2025 à 07:27
Ligne 1 :		Ligne 1 :
	/* ~~Wrapper~~ avec ~~overflow pour le sticky */~~		/* Container avec sticky */
	~~.accueil-search-wrapper {~~		.accueil-search-container {
	~~width: 100%;~~
	~~max-width: 100%;~~
	~~margin-bottom: 2rem;~~
	}

	~~/* Container~~ sticky */
	.accueil-search-~~sticky~~ {
	position: sticky;		position: sticky;
	top: 0;		top: 0;
	z-index: 10;		z-index: 100;
	background: var(--color-surface-0);		background: var(--color-surface-0);
	padding: 1rem;		padding: 1rem 0;
			margin-bottom: 2rem;
			box-shadow: 0 1px 0 var(--border-color-base);
	}		}

	/* Barre de recherche - largeur limitée ~~et centrée~~ */		/* Barre de recherche centrée avec largeur limitée */
	.accueil-search-~~sticky .citizen-command-palette__search~~ {		.accueil-search-bar {
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	gap: ~~12px~~;		gap: 10px;
	max-width: 600px;		max-width: 600px;
	margin: 0 auto;		margin: 0 auto;
	padding: ~~12px~~ 16px;		padding: 10px 16px;
	font-size: 0.~~95rem~~;		font-size: 0.9375rem;
	line-height: 1.5;		line-height: 1.6;
	cursor: pointer;		cursor: pointer;
	border-radius: 8px;		border-radius: 8px;
Ligne 31 :		Ligne 26 :
	border-style: solid;		border-style: solid;
	border-color: var(--border-color-base);		border-color: var(--border-color-base);
	transition-property: background-color, border-color~~, transform~~;		transition-property: background-color, border-color;
	transition-duration: 0.2s;		transition-duration: 0.2s;
	transition-timing-function: ease;		transition-timing-function: ease;
Ligne 37 :		Ligne 32 :

	/* États interactifs */		/* États interactifs */
	.accueil-search-~~sticky .citizen-command-palette__search~~:hover {		.accueil-search-bar:hover {
	background-color: var(--color-surface-2);		background-color: var(--color-surface-2);
	border-color: var(--color-progressive);		border-color: var(--color-progressive);
	}		}

	.accueil-search-~~sticky .citizen-command-palette__search~~:active {		.accueil-search-bar:active {
	transform: ~~scale~~(~~0.995~~);		transform: translateY(1px);
	}		}

	/* Icône de ~~recherche - taille fixe~~ */		/* Icône SVG - reprend l'icône native de Citizen */
	.accueil-search-icon {		.accueil-search-icon {
	~~display: block;~~
	width: 18px;		width: 18px;
	height: 18px;		height: 18px;
	flex-shrink: 0;		flex-shrink: 0;
	~~position: relative;~~
	opacity: 0.87;		opacity: 0.87;
	}

	~~/* Loupe en CSS */~~
	~~.accueil-search-icon::before {~~
	~~content: '';~~
	~~position: absolute;~~
	~~width: 9px;~~
	~~height: 9px;~~
	~~border-width: 2px;~~
	~~border-style: solid;~~
	~~border-color: var(--color-subtle);~~
	~~border-radius: 50%;~~
	~~top: 1px;~~
	~~left: 1px;~~
	}

	~~.accueil-search-icon::after {~~
	~~content: '';~~
	~~position: absolute;~~
	~~width: 2px;~~
	~~height: 5px;~~
	~~background-color: var(--color-subtle);~~
	~~transform: rotate(45deg);~~
	~~bottom: 1px;~~
	~~right: 1px;~~
	}		}

Ligne 86 :		Ligne 54 :
	user-select: none;		user-select: none;
	flex: 1;		flex: 1;
			min-width: 0;
	white-space: nowrap;		white-space: nowrap;
	overflow: hidden;		overflow: hidden;
	text-overflow: ellipsis;		text-overflow: ellipsis;
			font-weight: 400;
			}

			/* Animation au focus/hover */
			.accueil-search-bar:hover .accueil-search-icon {
			opacity: 1;
			}

			/* Responsive - adaptation tablette */
			@media (max-width: 1000px) {
			.accueil-search-container {
			padding: 0.75rem 1rem;
			}

			.accueil-search-bar {
			max-width: 100%;
			}
	}		}

	/* Responsive */		/* Responsive - adaptation mobile */
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.accueil-search-~~sticky~~ {		.accueil-search-container {
	padding: 0.75rem 0.5rem;		padding: 0.5rem 0.75rem;
			margin-bottom: 1.5rem;
	}		}

	.accueil-search-~~sticky .citizen-command-palette__search~~ {		.accueil-search-bar {
	~~max-width: 100%;~~		padding: 9px 12px;
	padding: ~~10px 14px~~;		font-size: 0.875rem;
	font-size: 0.~~9rem~~;		}

			.accueil-search-icon {
			width: 16px;
			height: 16px;
	}		}
	}		}
Ligne 107 :		Ligne 98 :
	@media (max-width: 480px) {		@media (max-width: 480px) {
	.accueil-search-text {		.accueil-search-text {
	font-size: 0.~~85rem~~;		font-size: 0.8125rem;
	}		}
	}		}

Hiob le 3 novembre 2025 à 07:17

2025-11-03T07:17:03Z

← Version précédente		Version du 3 novembre 2025 à 07:17
Ligne 1 :		Ligne 1 :
	/* ~~Container principal aligné~~ avec ~~Citizen~~ */		/* Wrapper avec overflow pour le sticky */
	.accueil-search-~~container~~ {		.accueil-search-wrapper {
	max-width: ~~1000px~~;		width: 100%;
	margin: ~~0 auto~~ 2rem;		max-width: 100%;
	~~padding: 0 1rem~~;		margin-bottom: 2rem;
	}		}

	/* Barre de recherche ~~utilisant les styles Citizen~~ */		/* Container sticky */
	.accueil-search-~~container~~ .citizen-command-palette__search {		.accueil-search-sticky {
			position: sticky;
			top: 0;
			z-index: 10;
			background: var(--color-surface-0);
			padding: 1rem;
			}

			/* Barre de recherche - largeur limitée et centrée */
			.accueil-search-sticky .citizen-command-palette__search {
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	gap: 12px;		gap: 12px;
	padding: ~~14px~~ 16px;		max-width: 600px;
			margin: 0 auto;
			padding: 12px 16px;
	font-size: 0.95rem;		font-size: 0.95rem;
	line-height: 1.5;		line-height: 1.5;
	cursor: pointer;		cursor: pointer;
	border-radius: 8px;		border-radius: 8px;
	background: var(--color-surface-1);		background-color: var(--color-surface-1);
	border: 1px solid var(--border-color-base);		border-width: 1px;
	transition: background ~~0.2s ease~~, border-color ~~0.2s ease~~, transform 0.1s ease;		border-style: solid;
			border-color: var(--border-color-base);
			transition-property: background-color, border-color, transform;
			transition-duration: 0.2s;
			transition-timing-function: ease;
	}		}

	/* États interactifs */		/* États interactifs */
	.accueil-search-~~container~~ .citizen-command-palette__search:hover {		.accueil-search-sticky .citizen-command-palette__search:hover {
	background: var(--color-surface-2);		background-color: var(--color-surface-2);
	border-color: var(--color-progressive);		border-color: var(--color-progressive);
	}		}

	.accueil-search-~~container~~ .citizen-command-palette__search:active {		.accueil-search-sticky .citizen-command-palette__search:active {
	transform: scale(0.995);		transform: scale(0.995);
	}		}

	/* Icône de recherche */		/* Icône de recherche - taille fixe */
	.accueil-search-icon {		.accueil-search-icon {
	display: ~~flex;~~		display: block;
	~~align-items: center;~~		width: 18px;
	~~justify-content: center~~;		height: 18px;
	width: ~~20px~~;
	height: ~~20px~~;
	flex-shrink: 0;		flex-shrink: 0;
	position: relative;		position: relative;
Ligne 47 :		Ligne 60 :
	content: '';		content: '';
	position: absolute;		position: absolute;
	width: ~~10px~~;		width: 9px;
	height: ~~10px~~;		height: 9px;
	border: 2px solid var(--color-subtle);		border-width: 2px;
			border-style: solid;
			border-color: var(--color-subtle);
	border-radius: 50%;		border-radius: 50%;
	top: ~~2px~~;		top: 1px;
	left: ~~2px~~;		left: 1px;
	}		}

Ligne 59 :		Ligne 74 :
	position: absolute;		position: absolute;
	width: 2px;		width: 2px;
	height: ~~6px~~;		height: 5px;
	background: var(--color-subtle);		background-color: var(--color-subtle);
	transform: rotate(45deg);		transform: rotate(45deg);
	bottom: ~~2px~~;		bottom: 1px;
	right: ~~2px~~;		right: 1px;
	}		}

Ligne 71 :		Ligne 86 :
	user-select: none;		user-select: none;
	flex: 1;		flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
	}		}

	/* Responsive ~~- adaptation mobile~~ */		/* Responsive */
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.accueil-search-~~container~~ {		.accueil-search-sticky {
	padding: 0 0~~.5rem;~~		padding: 0.75rem 0.5rem;
	~~margin-bottom: 1~~.5rem;
	}		}

	.accueil-search-~~container~~ .citizen-command-palette__search {		.accueil-search-sticky .citizen-command-palette__search {
	padding: ~~12px~~ 14px;		max-width: 100%;
			padding: 10px 14px;
	font-size: 0.9rem;		font-size: 0.9rem;
			}
			}

			/* Très petits écrans */
			@media (max-width: 480px) {
			.accueil-search-text {
			font-size: 0.85rem;
	}		}
	}		}