MediaWiki:Minerva.css

From Final Fantasy XIV Online Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* All CSS here will be loaded for users of the MinervaNeue skin */

/* #region Use Meteor's heading font */

.pre-content h1,
.content .mw-heading1,
.content h1,
.content .mw-heading2,
.content h2 {
  /* this font is provided by an import in [[Mediawiki:Common.css]] */
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 500;
}

/* #endregion */

/* #region Mobile navbox display */

/* Fix navbox table margin on minerva */
.content .navbox table {
  margin-block: 0;
}

/* Apply compact navbox layout to phone breakpoint */
@media screen and (max-width: 639px) {
  :root {
    /* remove inner borders */
    --navbox-inner-border: 0;
    --navbox-label-border: 0;
    /* no row striping, since every row is separated by a group header anyway */
    --navbox-data-row-even-bg: transparent;
    --navbox-data-row-odd-bg: transparent;
  }
  
  /* basic vertical layout - simply do not render tables as tables */
  .mw-parser-output .navbox :is(table, tbody, tr, td, th) {
    /* sacrelige */
    display: block;
    /* overrides `width` set on elements by Module:Navbox */
    width: auto !important;
  }
  
  /* indent group contents */
  .mw-parser-output .navbox-list-with-group {
    /* overrides `padding` set on elements by Module:Navbox */
    padding-left: 1rem !important;
  }
  
  /* add consistent margin between lines to make things a bit more readable */
  .mw-parser-output .navbox-list,
  .mw-parser-output .navbox-group {
    margin-block: 2px;
  }
  
  /* clean up group labels */
  .skin-minerva .mw-parser-output .navbox-group {
    text-align: left;
    /* reduced horizontal padding since the entire list is now vertical */
    padding-inline: 0.5rem;
  }
}

/* #endregion */

/* #region Mobile table scrolling */

@media screen and (max-width: 639px) {
  .content table {
    width: unset !important; /* override !important in minerva */
  }
}

.mw-parser-output > table,
.mw-parser-output > section > table /* just minerva things */ {
  max-width: calc(100% + 32px);
  overflow-x: auto;
  overflow-y: visible;
  margin-inline: -16px;
  padding-inline: 16px;
}
@media screen and (min-width: 640px) {
  .mw-parser-output > table,
  .mw-parser-output > section > table {
    max-width: calc(100% + 6.70rem);
    margin-inline: -3.35rem;
    padding-inline: 3.35rem;
  }
}

/* #endregion */

/* #region Fixing floated elements */

/*
 * I could've sworn this was something that Minerva/MobileFrontend does for you
 * under normal circumstances but it doesn't appear to be the case. Investigate
 * if these lines are still needed if we ever update either of those.
 * [[User:Erin Umbreon]] 2026-08-23
 */
@media screen and (max-width: 639px) {
  .content figure[typeof~="mw:File"].mw-halign-right,
  .content figure[typeof~="mw:File/Frameless"].mw-halign-right,
  .content figure[typeof~="mw:File"].mw-halign-left,
  .content figure[typeof~="mw:File/Frameless"].mw-halign-left {
    float: none !important;
    clear: both !important;
    margin-inline: auto !important;
  }
}

/* #endregion */