MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* --- COMPREHENSIVE WIKI STYLING --- */
+/* --- COMUTER WIKI FULL STYLING --- */
-/* 1. Global Font Update */
+/* 1. Font Styling */
 body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
 }
-/* 2. Header Layout Fix */
+/* 2. Header & Logo Layout */
-/* Ensures the menu button and logo stay side-by-side */
+/* Stacks the icon on top of the title */
-.vector-header-start {
-    display: flex !important;
-    flex-direction: row !important;
-    align-items: center !important;
-    height: auto !important;
-}
-/* 3. Logo Stacking */
-/* Forces Icon on top and Wordmark (text) below */
 .mw-logo {
      display: flex !important;
@@ Line 23: / Line 14: @@
      height: auto !important;
      padding: 10px !important;
-    margin-left: 15px !important;
      text-decoration: none !important;
+    background: transparent !important;
 }
-/* 4. Icon Sizing */
+/* 3. Icon Sizing (The Computer Head) */
 .mw-logo-icon {
-     width: 120px !important;  /* Change this to make logo bigger/smaller */
+     width: 120px !important;
      height: 120px !important;
      max-width: none !important;
@@ Line 36: / Line 27: @@
 }
-/* 5. Title/Wordmark Styling */
+/* 4. Wordmark (The Text) */
 .mw-logo-wordmark {
      display: block !important;
@@ Line 45: / Line 36: @@
 }
-/* 6. Main Menu (Hamburger) Fix */
+/* 5. Header Sizing & Colors (Light Mode) */
-/* Makes sure the button doesn't disappear or get squished */
-#vector-main-menu-dropdown-label {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    min-width: 44px !important;
-    min-height: 44px !important;
-}
-/* 7. Header Height Adjustment */
 .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 */
 }
-/* 8. Sticky Header Fix */
+/* 7. Sticky Header (Scroll View) */
-/* When you scroll down, the logo goes back to normal so it doesn't block the screen */
+/* Shrinks the logo back down so it doesn't block the screen while reading */
 .vector-sticky-header .mw-logo {
      flex-direction: row !important;