MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 121: / Line 121: @@
 /* ============================================================
-    HERO: integrated search bar
+    HERO: search bar (works on all MediaWiki installs)
     ============================================================ */
@@ Line 130: / Line 130: @@
 }
-.bc-hero-search form {
+.bc-hero-search-link {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
-}
-.bc-hero-search-input {
-    width: 100%;
      height: 46px;
+    padding: 0 10px 0 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
-     color: #fff;
+     text-decoration: none !important;
-    padding: 0 14px;
-    outline: none;
 }
-.bc-hero-search-input::placeholder {
+.bc-hero-search-placeholder {
-     color: rgba(255,255,255,.70);
+     color: rgba(255,255,255,.70) !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-.bc-hero-search-input:focus {
+.bc-hero-search-cta {
-     border-color: rgba(255,255,255,.45);
+     height: 34px;
-     background: rgba(255,255,255,.14);
+     display: inline-flex;
-}
+    align-items: center;
+     padding: 0 14px;
-.bc-hero-search-btn {
+     border-radius: 10px;
-    height: 46px;
-     padding: 0 16px;
-     border-radius: 12px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.16);
-     color: #fff;
+     color: #fff !important;
      font-weight: 700;
-    cursor: pointer;
      white-space: nowrap;
 }
-.bc-hero-search-btn:hover {
+.bc-hero-search-link:hover {
-     background: rgba(255,255,255,.22);
+     background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.30);
 }
-/* Slightly tighter secondary pill row */
+.bc-hero-search-link:hover .bc-hero-search-cta {
-.bc-pillrow-secondary .bc-pill {
+     background: rgba(255,255,255,.22);
-    background: rgba(255,255,255,.09);
+     border-color: rgba(255,255,255,.30);
-    border-color: rgba(255,255,255,.16);
-}
-.bc-pillrow-secondary .bc-pill:hover {
-     background: rgba(255,255,255,.15);
-     border-color: rgba(255,255,255,.24);
 }
-/* Mobile: stack button under input */
+/* Mobile: keep it clean */
 @media (max-width: 640px) {
-     .bc-hero-search form {
+     .bc-hero-search-link {
          grid-template-columns: 1fr;
+        height: auto;
+        padding: 12px 14px;
+        gap: 10px;
      }
-     .bc-hero-search-btn {
+     .bc-hero-search-cta {
          width: 100%;
+        justify-content: center;
+        height: 40px;
      }
 }
 /* ============================================================