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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 131 : / Ligne 131 : @@
 .home-search {
-    /* Layout */
      display: flex;
      align-items: center;
@@ Ligne 142 : / Ligne 141 : @@
      padding: var(--space-md);
-     /* Style */
+     /* AUCUN FOND, AUCUNE BORDURE */
-     background-color: var(--color-surface-1);
+     background: transparent;
-     border: var(--border-base);
+     border: none;
      border-radius: var(--border-radius-pill);
-    /* Typography */
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-medium);
-    text-align: center;
-    /* Interaction */
      cursor: pointer;
-     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+     transition: background 0.25s ease;
 }
+/* Effet hover ultra-subtil */
 .home-search:hover {
-     background-color: var(--color-surface-0);
+     background: linear-gradient(
+deg,
+        transparent,
+        rgba(255, 255, 255, 0.03),
+        transparent
+    );
 }
 .home-search__icon {
      font-size: 1rem;
-     opacity: var(--opacity-icon-base);
+     opacity: 0.5;
-    filter: var(--filter-invert);
      flex-shrink: 0;
-     line-height: 1;
+     transition: opacity 0.2s;
+}
+.home-search:hover .home-search__icon {
+    opacity: 0.8;
 }
@@ Ligne 172 : / Ligne 176 : @@
      flex: 1;
      color: var(--color-base);
+    opacity: 0.6;
      user-select: none;
      text-align: left;
-     line-height: 1.4;
+     transition: opacity 0.2s;
+}
+.home-search:hover .home-search__text {
+    opacity: 0.9;
 }
@@ Ligne 182 : / Ligne 191 : @@
 .home-search__kbd {
-     display: inline;
+     display: inline-block;
      font-family: monospace;
-     font-size: 0.8125rem;
+     font-size: 0.75rem;
-    font-weight: var(--font-weight-medium);
+     padding: 0.2em 0.4em;
-     padding: 0.1em 0.5em;
+     background: rgba(255, 255, 255, 0.08);
-     background: var(--color-surface-2);
+     border: 1px solid rgba(255, 255, 255, 0.15);
-     border: var(--border-base);
+     border-radius: 3px;
-     border-radius: var(--border-radius-medium);
      color: var(--color-subtle);
-     vertical-align: baseline;
+     opacity: 0.5;
-}
+     transition: opacity 0.2s;
-/* Gradient glow effect - VERSION SIMPLIFIÉE */
-.scw-gradient-glow {
-    position: relative;
-    box-shadow: 0 0 0 1px rgba(135, 191, 219, 0.3);
-     transition: box-shadow 0.3s ease;
 }
-.scw-gradient-glow:hover {
+.home-search:hover .home-search__kbd {
-     box-shadow:
+     opacity: 0.8;
-0 0 1px rgba(253, 179, 49, 0.5),
-0 20px rgba(253, 179, 49, 0.2);
 }