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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 72 : / Ligne 72 : @@
      right: 0;
      top: -100%;
-     margin: 0 auto;
+     margin-left: auto;
+    margin-right: auto;
      width: 50%;
      height: 100%;
@@ Ligne 130 : / Ligne 131 : @@
 .home-search {
+    /* Layout */
      display: flex;
      align-items: center;
-     gap: 1rem;
+     gap: var(--space-sm);
-     max-width: 500px;
+     max-width: 600px;
      width: 100%;
-     margin: 0 auto;
+     margin-top: var(--space-xl);
-     padding: 1rem 1.5rem;
+    margin-left: auto;
+    margin-right: auto;
+     padding: var(--space-md);
-     /* Fond très subtil */
+     /* Style */
-     background: rgba(255, 255, 255, 0.03);
+     background-color: var(--color-surface-1);
-     border: 1px solid rgba(255, 255, 255, 0.1);
+     border: var(--border-base);
-     border-radius: 8px;
+     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.25s cubic-bezier(0.4, 0, 0.2, 1);
+     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .home-search:hover {
-     background: rgba(255, 255, 255, 0.05);
+     background-color: var(--color-surface-0);
-    border-color: rgba(255, 255, 255, 0.15);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-.home-search:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 .home-search__icon {
-     font-size: 1.125rem;
+     font-size: 1rem;
-     opacity: 0.4;
+     opacity: var(--opacity-icon-base);
+    filter: var(--filter-invert);
      flex-shrink: 0;
-    transition: opacity 0.2s ease;
      line-height: 1;
-}
-.home-search:hover .home-search__icon {
-    opacity: 0.6;
 }
 .home-search__text {
      flex: 1;
-    font-size: 0.9375rem;
-    font-weight: 400;
      color: var(--color-base);
-    opacity: 0.5;
      user-select: none;
      text-align: left;
-    letter-spacing: 0.02em;
-    transition: opacity 0.2s ease;
      line-height: 1.4;
 }
-.home-search:hover .home-search__text {
+.home-search__kbd-wrapper {
-     opacity: 0.7;
+     margin-left: var(--space-xs);
 }
 .home-search__kbd {
-     font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace;
+    display: inline;
+     font-family: monospace;
      font-size: 0.8125rem;
-     font-weight: 600;
+     font-weight: var(--font-weight-medium);
-     padding: 0.3rem 0.6rem;
+     padding: 0.1em 0.5em;
-     min-width: 1.75rem;
+     background: var(--color-surface-2);
-    text-align: center;
+     border: var(--border-base);
-    line-height: 1;
+     border-radius: var(--border-radius-medium);
+     color: var(--color-subtle);
-    background: rgba(255, 255, 255, 0.05);
+     vertical-align: baseline;
-     border: 1px solid rgba(255, 255, 255, 0.1);
-     border-radius: 4px;
-    color: var(--color-base);
-     opacity: 0.4;
-    flex-shrink: 0;
-    transition: all 0.2s ease;
-}
-.home-search:hover .home-search__kbd {
-    background: rgba(255, 255, 255, 0.08);
-     border-color: rgba(255, 255, 255, 0.15);
-    opacity: 0.6;
 }
-/* Responsive */
+/* Gradient glow effect - VERSION SIMPLIFIÉE */
-@media (max-width: 768px) {
+.scw-gradient-glow {
-     .home-search {
+     position: relative;
-        padding: 0.875rem 1.25rem;
+    box-shadow: 0 0 0 1px rgba(135, 191, 219, 0.3);
-        border-radius: 6px;
+     transition: box-shadow 0.3s ease;
-    }
-    .home-search__kbd {
-        display: none;
-     }
-    .home-search__icon {
-        font-size: 1rem;
-    }
-    .home-search__text {
-        font-size: 0.875rem;
-    }
 }
-@media (max-width: 480px) {
+.scw-gradient-glow:hover {
-     .home-search {
+     box-shadow:
-         padding: 0.75rem 1rem;
+0 0 1px rgba(253, 179, 49, 0.5),
-         gap: 0.75rem;
+0 20px rgba(253, 179, 49, 0.2);
-    }
 }
@@ Ligne 379 : / Ligne 346 : @@
 .home-link__button a:active {
      background: var(--color-surface-2--active);
-}
-/* ====================================
-. SOCIAL MEDIA
-   ==================================== */
-#home-card-discord {
-    background: #5865f2;
-}
-#home-card-patreon {
-    background: #ff424d;
-}
-#home-card-kofi {
-    background: #ff5e5b;
-}
-#home-card-reddit {
-    background: #ff4500;
 }
@@ Ligne 497 : / Ligne 444 : @@
      .home-search {
-         margin: 0 1rem;
+         margin-left: 1rem;
+        margin-right: 1rem;
          padding: 1rem 1.25rem;
          border-radius: 14px;
      }
-     .home-search__kbd {
+     .home-search__kbd-wrapper {
          display: none;
      }