Jump to content

MediaWiki:Minerva.css: Difference between revisions

From The Untenables
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* All CSS here will be loaded for users of the MinervaNeue skin */
/* All CSS here will be loaded for users of the MinervaNeue skin */


/* Fix overlapping logo on mobile and clean up header layout */
/* Center the logo and push the menu below on narrow screens (Minerva version) */
.skin-minerva .minerva-header {
@media (max-width: 768px) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 0.5em;
}


/* Center the logo and make it responsive */
  /* The header container itself */
.skin-minerva .minerva-header .mw-logo {
  .minerva-header {
     display: block !important;
     display: block !important;
     text-align: center !important;
     text-align: center !important;
     margin: 0 auto 0.25em auto !important;
     padding: 0.5em 0;
    width: auto !important;
  }
}


.skin-minerva .minerva-header .mw-logo img {
  /* The logo */
     max-width: 160px !important;
  .minerva-header .mw-logo,
  .minerva-header .mw-wiki-logo {
     display: block !important;
    margin: 0 auto !important;
     height: auto !important;
     height: auto !important;
     display: inline-block !important;
     max-height: 90px !important;
}
  }


/* Properly align menu icons under the logo */
  /* Menu and icons below logo */
.skin-minerva .minerva-header .minerva-user-navigation,
  .minerva-header .menu,
.skin-minerva .minerva-header .minerva-menu {
  .minerva-header .minerva-user-navigation,
     display: flex !important;
  .minerva-header .toggle-list,
     justify-content: center !important;
  .minerva-header .minerva-icon {
    width: 100% !important;
     display: block !important;
     margin-top: 0.2em !important;
     margin: 0.4em auto !important;
}
     text-align: center !important;
  }


/* Prevent overlap and spacing issues */
  /* Optional: slightly shrink logo on smaller devices */
.skin-minerva .minerva-header .minerva-user-navigation a,
  .minerva-header .mw-logo img {
.skin-minerva .minerva-header .minerva-menu a {
     max-width: 160px !important;
     margin: 0 6px !important;
  }
}
 
@media (max-width: 720px) {
    .skin-minerva .minerva-header {
        flex-wrap: wrap !important;
    }
}
}

Revision as of 19:10, 19 October 2025

/* All CSS here will be loaded for users of the MinervaNeue skin */

/* Center the logo and push the menu below on narrow screens (Minerva version) */
@media (max-width: 768px) {

  /* The header container itself */
  .minerva-header {
    display: block !important;
    text-align: center !important;
    padding: 0.5em 0;
  }

  /* The logo */
  .minerva-header .mw-logo,
  .minerva-header .mw-wiki-logo {
    display: block !important;
    margin: 0 auto !important;
    height: auto !important;
    max-height: 90px !important;
  }

  /* Menu and icons below logo */
  .minerva-header .menu,
  .minerva-header .minerva-user-navigation,
  .minerva-header .toggle-list,
  .minerva-header .minerva-icon {
    display: block !important;
    margin: 0.4em auto !important;
    text-align: center !important;
  }

  /* Optional: slightly shrink logo on smaller devices */
  .minerva-header .mw-logo img {
    max-width: 160px !important;
  }
}
Retrieved from "https://untenables.com/index.php?title=MediaWiki:Minerva.css&oldid=122"