MediaWiki:Common.css

From WikiPhone
Revision as of 04:45, 19 August 2025 by CaptainChris (talk | contribs)
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.
/* CSS placed here will be applied to all skins */
/* Main page layout */
.mp-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  /* keep everything inside the wiki content width */
  box-sizing: border-box;
}

/* Left column fills remaining space */
.mp-left {
  flex: 1 1 auto;
  min-width: 0; /* prevents weird overflow with long content */
}

/* Right sidebar */
.mp-right {
  flex: 0 0 320px;         /* fixed sidebar width on desktop */
  max-width: 100%;
  box-sizing: border-box;
  border-left: 1px solid #e0e0e0; /* subtle divider */
  padding-left: 16px;
  margin-left: 4px;
}

/* Make cards/embed inside the sidebar not hang off the edge */
.mp-right > * {
  width: 100%;
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
  .mp-container {
    flex-direction: column;
  }
  .mp-right {
    flex: none;
    width: 100%;
    border-left: 0;
    border-top: 1px solid #e0e0e0;
    padding-left: 0;
    padding-top: 12px;
    margin-left: 0;
    margin-top: 12px;
  }
}