MediaWiki:Gadget-rightpanel.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.
/* increase fixed-width size to account for second panel */
@media screen and (min-width: 1300px) {
  :root:root { /* cursed specificity hack until i rework the fixed width gadget to play nice */
    --fixed-width: calc(1300px + var(--mw-panel-width));
  }
}
/* make space to the right of content for the second panel */
div#content {
  margin-right: var(--mw-panel-width);
}
div#mw-head {
  box-sizing: border-box;
  padding-right: var(--mw-panel-width);
}
div#mw-head-base {
  margin-right: var(--mw-panel-width);
  border-top-right-radius: var(--border-radius) !important;
}

/* the right panel itself */
#gadget-rightpanel-panel {
  position: absolute;
  top: 2rem;
  left: calc(min(var(--fixed-width), 100vw) - var(--mw-panel-width));
  width: var(--mw-panel-width);
  height: 100%;
}
#gadget-rightpanel-panel > nav:first-child > .vector-menu-heading {
  display: block; /* overrides CSS that hides the first section heading normally */
}