MediaWiki:Minerva.css: Difference between revisions

Newer edit →

@@ Line 1: / Line 1: @@
 /* All CSS here will be loaded for users of the MinervaNeue skin */
-/* --- Fix Untenables logo alignment on mobile (Minerva skin) --- */
+/* Center and stack the logo above the Minerva mobile header icons */
-.mw-logo {
+.minerva-header {
-     display: flex;
+     display: flex !important;
-     justify-content: center;
+     flex-direction: column !important;
-     align-items: center;
+     align-items: center !important;
-     flex-direction: column;
+}
+.minerva-header .mw-logo {
+     order: -1; /* move logo to the top */
      width: 100%;
-     margin: 0 auto;
+     text-align: center;
-     padding: 0.5em 0;
+     margin-bottom: 0.3em;
 }
-.mw-logo img {
+.minerva-header .mw-logo img {
-     max-width: 180px; /* Adjust for logo width */
+     max-width: 180px;
      height: auto;
-     margin: 0 auto;
+     display: inline-block;
 }
+/* Ensure icons (hamburger/search/profile) appear below logo and stay centered */
 .minerva-header .header {
-     flex-direction: column !important;
+     width: 100%;
+    display: flex;
+    justify-content: center !important;
      align-items: center !important;
+    flex-wrap: wrap;
 }
-/* Push icons below the logo */
 .minerva-header .minerva-icon,
 .minerva-header .toggle-list {
-    order: 2;
+     margin: 0 6px;
-     margin-top: 0.3em;
-    display: inline-flex;
-    justify-content: center;
-    width: 100%;
 }
-/* Slight padding under the logo so menu doesn’t overlap */
+/* Add a bit of top padding so the logo isn’t squished under the URL bar */
-#page-secondary-actions {
+body.skin-minerva {
-     margin-top: 0.5em;
+     padding-top: 0.5em;
 }