MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-/* --- COMUTER WIKI FULL STYLING --- */
+/* --- COMUTER WIKI CLEAN STYLING --- */
-/* 1. Font Styling */
+/* 1. Global Font */
 body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
 }
-/* 2. Header & Logo Layout */
+/* 2. Logo Container */
-/* Stacks the icon on top of the title */
 .mw-logo {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
+    text-decoration: none !important;
+    background: transparent !important;
      height: auto !important;
      padding: 10px !important;
-    text-decoration: none !important;
-    background: transparent !important;
 }
-/* 3. Icon Sizing (The Computer Head) */
+/* 3. The Icon (Computer Head) */
 .mw-logo-icon {
      width: 120px !important;
@@ Line 24: / Line 23: @@
      max-width: none !important;
      max-height: none !important;
-    margin-bottom: 5px !important;
 }
-/* 4. Wordmark (The Text) */
+/* 4. The Wordmark/Text */
+/* We use var(--color-base) to automatically flip text color when the theme changes */
 .mw-logo-wordmark {
      display: block !important;
@@ Line 33: / Line 32: @@
      height: auto !important;
      width: auto !important;
-     font-weight: bold;
+     font-weight: bold !important;
+    font-size: 1.2em !important;
+    color: var(--color-base, #202122) !important;
 }
-/* 5. Header Sizing & Colors (Light Mode) */
+/* 5. Header Sizing */
+/* We removed all hardcoded background colors so Vector 2022 can handle itself natively */
 .mw-header {
      height: auto !important;
      min-height: 160px !important;
-    background-color: #ffffff !important;
-    transition: background-color 0.2s ease;
-}
-/* 6. DARK MODE COMPATIBILITY */
-/* This kicks in when you toggle the Dark Mode switch */
-html.skin-theme-clientpref-night .mw-header {
-    background-color: #101418 !important; /* Deep grey to match Vector dark mode */
-}
-html.skin-theme-clientpref-night .mw-logo-wordmark {
-    color: #eaecf0 !important; /* Light text for the title */
 }
-/* 7. Sticky Header (Scroll View) */
+/* 6. Sticky Header (Scroll View) */
-/* Shrinks the logo back down so it doesn't block the screen while reading */
 .vector-sticky-header .mw-logo {
      flex-direction: row !important;
      padding: 0 !important;
-    margin-left: 5px !important;
 }
@@ Line 65: / Line 53: @@
      width: 35px !important;
      height: 35px !important;
-    margin-bottom: 0 !important;
 }
 .vector-sticky-header .mw-logo-wordmark {
      margin-left: 10px !important;
+    font-size: 1em !important;
 }