« Modèle:Accueil/search/styles.css » : différence entre les versions

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
-/* Container sticky reprenant le style Citizen */
+/* Container positionné comme la command palette */
 .accueil-search-container {
-   position: sticky;
+   position: fixed;
    top: var(--space-xs);
+  right: var(--space-xs);
+  left: var(--space-xs);
    z-index: 100;
    max-width: 56rem;
    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 {
    display: flex;
@@ Ligne 19 : / Ligne 20 : @@
    border-radius: var(--border-radius-medium);
    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);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    cursor: pointer;
+  pointer-events: auto;
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 0.2s;
@@ Ligne 45 : / Ligne 46 : @@
    margin-right: var(--space-xs);
    line-height: 0;
+  opacity: var(--opacity-icon-base);
 }
@@ Ligne 50 : / Ligne 52 : @@
 .accueil-search-icon img {
    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 {
-   color: var(--color-subtle);
+   color: var(--color-base);
+  font-weight: var(--font-weight-normal);
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
+}
+/* Masquer sur scroll pour éviter les conflits */
+.accueil-search-container.hidden {
+  display: none;
 }
@@ Ligne 70 : / Ligne 72 : @@
 @media (max-width: 1000px) {
    .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) {
    .accueil-search-container {
+    position: sticky;
      top: 0;
      padding: var(--space-xxs);
      margin-bottom: 1.5rem;
+    pointer-events: auto;
    }
    .accueil-search-bar {
      padding: var(--space-xs) var(--space-sm);
-    font-size: var(--font-size-x-small);
    }