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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 124 : / Ligne 124 : @@
      display: block;
 }
 /* ====================================
-. BARRE DE RECHERCHE
+. BARRE DE RECHERCHE - STYLE STAR CITIZEN
     ==================================== */
@@ Ligne 133 : / Ligne 134 : @@
      align-items: center;
      gap: 1rem;
-     max-width: 560px;
+     max-width: 500px;
      width: 100%;
      margin: 0 auto;
-     padding: 1.125rem 1.75rem;
+     padding: 1rem 1.5rem;
-     background: rgba(255, 255, 255, 0.03);
-     border: 1px solid rgba(255, 255, 255, 0.1);
+    /* Style minimaliste */
-     border-radius: 16px;
+     background: rgba(255, 255, 255, 0.02);
-     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+     border: 1px solid rgba(255, 255, 255, 0.08);
+     border-radius: 8px;
      cursor: pointer;
-     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+     transition: all 0.3s ease;
 }
 .home-search:hover {
-     background: rgba(255, 255, 255, 0.06);
+     background: rgba(255, 255, 255, 0.04);
-     border-color: rgba(255, 255, 255, 0.15);
+     border-color: rgba(255, 255, 255, 0.12);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+     transform: translateY(-1px);
-     transform: translateY(-2px);
 }
 .home-search:active {
      transform: translateY(0);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-.home-search:focus {
-    outline: 2px solid rgba(66, 133, 244, 0.4);
-    outline-offset: 3px;
 }
 .home-search__icon {
-     font-size: 1.25rem;
+     font-size: 1.125rem;
-     opacity: 0.4;
+     opacity: 0.3;
      flex-shrink: 0;
      transition: opacity 0.2s ease;
@@ Ligne 170 : / Ligne 166 : @@
 .home-search:hover .home-search__icon {
-     opacity: 0.6;
+     opacity: 0.5;
 }
 .home-search__text {
      flex: 1;
-     font-size: 1rem;
+     font-size: 0.9375rem;
      font-weight: 400;
-     color: rgba(255, 255, 255, 0.6);
+     color: rgba(255, 255, 255, 0.4);
      user-select: none;
      text-align: left;
+    letter-spacing: 0.3px;
      transition: color 0.2s ease;
 }
 .home-search:hover .home-search__text {
-     color: rgba(255, 255, 255, 0.8);
+     color: rgba(255, 255, 255, 0.6);
 }
 .home-search__kbd {
      font-family: monospace;
-     font-size: 0.8125rem;
+     font-size: 0.75rem;
-     font-weight: 600;
+     font-weight: 500;
-     padding: 0.375rem 0.625rem;
+     padding: 0.25rem 0.5rem;
-     min-width: 2rem;
+     min-width: 1.5rem;
      text-align: center;
-     background: rgba(255, 255, 255, 0.04);
-     border: 1px solid rgba(255, 255, 255, 0.08);
+     background: rgba(255, 255, 255, 0.03);
-     border-radius: 6px;
+     border: 1px solid rgba(255, 255, 255, 0.06);
-     color: rgba(255, 255, 255, 0.4);
+     border-radius: 4px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+     color: rgba(255, 255, 255, 0.3);
      flex-shrink: 0;
      transition: all 0.2s ease;
@@ Ligne 204 : / Ligne 202 : @@
 .home-search:hover .home-search__kbd {
-     background: rgba(255, 255, 255, 0.06);
+     background: rgba(255, 255, 255, 0.05);
-     border-color: rgba(255, 255, 255, 0.12);
+     border-color: rgba(255, 255, 255, 0.1);
-     color: rgba(255, 255, 255, 0.6);
+     color: rgba(255, 255, 255, 0.4);
 }
 /* ====================================