MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* --- COMUTER WIKI FULL 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 */
 .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 */
+/* 3. The Icon (Computer Head) */
 .mw-logo-icon {
      width: 120px !important;
@@ Line 23: / Line 23: @@
      max-width: none !important;
      max-height: none !important;
-    margin-bottom: 5px !important;
 }
-/* 4. Wordmark (The Text) */
+/* 4. The Wordmark ICON (The image that says "Comuter Wiki") */
 .mw-logo-wordmark {
-     display: block !important;
+     display: block !important; /* Forces it to show up */
-     text-align: center !important;
+     width: 150px !important;  /* Adjust this to fit your image width */
-     height: auto !important;
+     height: auto !important;   /* Let the height scale naturally */
-     width: auto !important;
+     max-height: none !important;
-    font-weight: bold !important;
+     margin-top: 10px !important;
-     font-size: 1.2em !important; /* Makes the title a bit bigger */
-    color: #202122 !important; /* Default dark text for light mode */
 }
-/* 5. Header Sizing & Colors (Light Mode) */
+/* 5. Header Background (Light Mode) */
 .mw-header {
      height: auto !important;
-     min-height: 160px !important;
+     min-height: 190px !important;
      background-color: #ffffff !important;
 }
-/* 6. DARK MODE COMPATIBILITY */
+/* 6. DARK MODE COLORS */
 html.skin-theme-clientpref-night .mw-header {
      background-color: #101418 !important;
-}
-/* Explicitly force the text to be light grey/white in Dark Mode */
-html.skin-theme-clientpref-night .mw-logo-wordmark {
-    color: #eaecf0 !important;
 }
 /* 7. Sticky Header (Scroll View) */
+/* This makes them side-by-side again when you scroll so it's not huge */
 .vector-sticky-header .mw-logo {
      flex-direction: row !important;
      padding: 0 !important;
-    margin-left: 5px !important;
 }
@@ Line 64: / Line 56: @@
      width: 35px !important;
      height: 35px !important;
-    margin-bottom: 0 !important;
 }
 .vector-sticky-header .mw-logo-wordmark {
+    width: 100px !important; /* Shorter width for the sticky header */
+    margin-top: 0 !important;
      margin-left: 10px !important;
-    font-size: 1em !important; /* Shrink text back for sticky header */
 }