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

Navigation interactive dans l’historique

← Modification précédente

@@ Ligne 1 : / Ligne 1 : @@
-/* Container principal aligné avec Citizen */
+/* Container positionné comme la command palette */
 .accueil-search-container {
-   max-width: 1000px;
+  position: fixed;
-   margin: 0 auto 2rem;
+  top: var(--space-xxl);
-   padding: 0 1rem;
+  right: var(--space-xs);
+  left: var(--space-xs);
+  z-index: 100;
+   max-width: 56rem;
+   margin-inline: auto;
+   pointer-events: none;
 }
-/* Barre de recherche utilisant les styles Citizen */
+/* Barre de recherche avec effet glass identique */
-.accueil-search-container .citizen-command-palette__search {
+.accueil-search-bar {
    display: flex;
    align-items: center;
-   gap: 12px;
+   padding: var(--space-xs) var(--space-md);  /* Plus compacte */
-   padding: 14px 16px;
+   overflow: hidden;
-   font-size: 0.95rem;
+  border: var(--border-base);
-   line-height: 1.5;
+  border-radius: var(--border-radius-medium);
+  box-shadow: var(--box-shadow-drop-xx-large);
+  backdrop-filter: var(--backdrop-filter-frosted-glass);
+   font-size: var(--font-size-small);
+   line-height: var(--line-height-small);
    cursor: pointer;
-   border-radius: 8px;
+   pointer-events: auto;
-   background: var(--color-surface-1);
+   transition-property: background-color, border-color, box-shadow;
-  border: 1px solid var(--border-color-base);
+   transition-duration: 0.2s;
-   transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
+  transition-timing-function: ease;
 }
 /* États interactifs */
-.accueil-search-container .citizen-command-palette__search:hover {
+.accueil-search-bar:hover {
-  background: var(--color-surface-2);
    border-color: var(--color-progressive);
+  box-shadow: var(--box-shadow-drop-xx-large), 0 0 0 1px var(--color-progressive);
 }
-.accueil-search-container .citizen-command-palette__search:active {
+.accueil-search-bar:active {
-   transform: scale(0.995);
+   transform: translateY(1px);
 }
-/* Icône de recherche */
+/* Icône - wrapper inline de l'image */
 .accueil-search-icon {
-   display: flex;
+   display: inline-flex;
    align-items: center;
-   justify-content: center;
+   margin-right: var(--space-xs);
-  width: 20px;
+   line-height: 0;
-   height: 20px;
+   opacity: var(--opacity-icon-base);
-  flex-shrink: 0;
-   position: relative;
-  opacity: 0.87;
 }
-/* Loupe en CSS */
+/* Cibler l'image MediaWiki générée */
-.accueil-search-icon::before {
+.accueil-search-icon img {
-   content: '';
+   vertical-align: middle;
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  border: 2px solid var(--color-subtle);
-  border-radius: 50%;
-  top: 2px;
-  left: 2px;
 }
-.accueil-search-icon::after {
+/* Texte placeholder - typographie identique à command palette */
-   content: '';
+.accueil-search-text {
-   position: absolute;
+   color: var(--color-base);
-  width: 2px;
+   font-weight: var(--font-weight-normal);
-  height: 6px;
+   flex: 1 1 auto;
-  background: var(--color-subtle);
+  white-space: nowrap;
-   transform: rotate(45deg);
+   overflow: hidden;
-   bottom: 2px;
+   text-overflow: ellipsis;
-   right: 2px;
 }
-/* Texte placeholder */
+/* Masquer sur scroll pour éviter les conflits */
-.accueil-search-text {
+.accueil-search-container.hidden {
-   color: var(--color-subtle);
+  display: none;
-  user-select: none;
+}
-   flex: 1;
+/* Responsive - adaptation tablette */
+@media (max-width: 1000px) {
+   .accueil-search-container {
+    right: var(--space-xxs);
+    left: var(--space-xxs);
+   }
 }
@@ Ligne 76 : / Ligne 80 : @@
 @media (max-width: 768px) {
    .accueil-search-container {
-     padding: 0 0.5rem;
+    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);
    }
-   .accueil-search-container .citizen-command-palette__search {
+   .accueil-search-icon {
-     padding: 12px 14px;
+     margin-right: var(--space-xxs);
-    font-size: 0.9rem;
    }
 }