MediaWiki:CRT Search.css: Difference between revisions

← Older edit

@@ Line 3: / Line 3: @@
   * Light mode is default; dark mode applied via skin-theme-clientpref-night class
   */
+/* Utility cards (above search) */
+.crt-card-subtitle {
+    font-size: 0.85rem;
+    opacity: 0.7;
+}
 /* Container */
@@ Line 62: / Line 68: @@
      margin: 0;
      font-size: 18px;
+    color: #333;
+}
+.crt-mobile-close-btn {
+    display: none;
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #666;
+    cursor: pointer;
+    padding: 0 4px;
+    line-height: 1;
+}
+.crt-mobile-close-btn:hover {
      color: #333;
 }
@@ Line 84: / Line 105: @@
 /* Scrollable filters body */
 .crt-filters-body {
-     flex: 1;
+     flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: visible;
      padding: 12px;
+    min-height: 0;
 }
@@ Line 691: / Line 713: @@
      .crt-search-wrapper {
          flex-direction: column;
+    }
+    .crt-card-subtitle {
+        display: none;
+    }
+    .crt-mobile-filter-toggle {
+        display: block;
      }
-     .crt-mobile-filter-toggle {
+     .crt-mobile-close-btn {
          display: block;
      }
@@ Line 705: / Line 735: @@
          right: 0;
          bottom: 0;
-         max-height: 100vh;
+        height: 100vh;
+         max-height: none;
          border-radius: 0;
-         z-index: 1000;
+         z-index: 10000;
+        background: #f8f8f8;
+        flex-direction: column;
      }
      .crt-search-filters.mobile-open {
          display: flex;
+    }
+    .crt-filters-body {
+        flex: 1 1 0;
+        min-height: 0;
+        overflow-y: auto;
+        overflow-x: hidden;
      }
@@ Line 742: / Line 782: @@
      }
 }
+/* Notifications */
+.crt-notifications {
+    position: fixed;
+    top: 60px;
+    right: 20px;
+    z-index: 1000;
+    max-width: 400px;
+}
+.crt-notification {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px 16px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    background: #1e1e22;
+    border: 1px solid #3a3a3e;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    animation: slideIn 0.3s ease;
+}
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+.crt-notification-warning {
+    border-color: #f59e0b;
+    background: linear-gradient(135deg, #292524 0%, #1c1917 100%);
+}
+.crt-notification-error {
+    border-color: #ef4444;
+    background: linear-gradient(135deg, #292524 0%, #1c1917 100%);
+}
+.crt-notification-info {
+    border-color: #3b82f6;
+}
+.crt-notification-icon {
+    flex-shrink: 0;
+    font-size: 16px;
+}
+.crt-notification-message {
+    flex: 1;
+    font-size: 14px;
+    color: #e5e5e5;
+    line-height: 1.4;
+}
+.crt-notification-close {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    color: #888;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+}
+.crt-notification-close:hover {
+    color: #fff;
+}
 /* ============================================
@@ Line 756: / Line 874: @@
 html.skin-theme-clientpref-night .crt-mobile-filter-toggle:hover {
      background: #3a3a3e;
+}
+html.skin-theme-clientpref-night .crt-mobile-close-btn {
+    color: #aaa;
+}
+html.skin-theme-clientpref-night .crt-mobile-close-btn:hover {
+    color: #fff;
 }