Jump to content

MediaWiki:Common.css

From Things and Stuff Wiki

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.
/* ============================================================
   Things and Stuff Wiki — Common.css
   Ported from Vector-transf skin for MW 1.45 / Vector 2022
   ============================================================ */

/* --- Hide right-side column (Appearance / Page tools panel) --- */
.vector-column-end { display: none; }

/* --- Hide pinnable header UI (label + move/hide buttons) --- */
.vector-main-menu-pinnable-header,
.vector-toc-pinnable-header { display: none; }

/* --- Main page: hide page title --- */
.page-Main_Page .mw-page-title-main { display: none; }

/* --- TOC: show sticky pinned container in left sidebar.
   Vector JS hides .vector-sticky-pinned-container via
   .client-js .vector-sticky-pinned-container { display: none }
   and moves the TOC element into it via JS. Override the hide,
   and remove contain:paint from vector-column-start so that
   position:sticky inside it works correctly. --- */
.client-js .vector-feature-toc-pinned-clientpref-1 .vector-sticky-pinned-container {
  display: block !important;
}
.vector-column-start {
  contain: none !important;
}

/* --- Headings: article headings always have an id attribute;
   Vector 2022 UI headings (.vector-pinnable-header-label etc.) do not. --- */
#mw-content-text h2[id] {
  font-size: 1.23em;
  font-weight: bold;
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
  padding: 0.21em 0.6em 0.09em;
  margin: 1.4em 0 0.9em;
}
#mw-content-text h3[id] {
  font-size: 1.13em;
  background: #f5f5f5;
  border-bottom: 1px solid #dedede;
  padding: 0.1em 0.6em 0.08em;
  margin: 1.4em 0.7em 0.9em 0.7em;
}
#mw-content-text h4[id] {
  font-size: 1.1em;
  background: #f8f8f8;
  padding: 0.1em 0.6em;
  margin: 1.5em 1em 0.6em 1em;
}
#mw-content-text h5[id] {
  margin: 0 1.6em;
  padding-right: 0.6em;
}

/* --- TOC: float right, no border (legacy .toc class) --- */
#toc, .toc {
  border: none;
  padding: 1em 2em;
  width: 270px;
  float: right;
  margin-left: 2em;
}
.toc li { margin: 0 0 0.1em 0; }

/* --- Content --- */
.mw-parser-output pre {
  line-height: 1.3em;
  border: none;
  overflow: auto;
  margin: 0.3em 0 0.6em;
}
.mw-parser-output textarea { height: 70vh; }

/* --- Menu template (#menubottom): columns side-by-side, centred.
   Vector skin CSS sets .mw-parser-output table { display: block } which
   overrides inline-block — needs !important. text-align:center on the
   container centres the inline-block tables; reset on tables themselves. --- */
#menubottom {
  font-size: 0;
  line-height: 0;
  text-align: center;
}
#menubottom table {
  display: inline-block !important;
  vertical-align: top;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.4;
  border-spacing: 0;
  border-collapse: collapse;
  margin: 0;
  overflow: visible !important;
  width: auto !important;
  max-width: none !important;
}
#menubottom td {
  padding: 1px 5px;
  white-space: nowrap;
}

/* --- General content tables --- */
.mw-parser-output td { padding: 0 5px; }
td:empty { padding: 0; }

/* --- Horizontally scrollable centred tables --- */
.mw-parser-output center {
  white-space: nowrap;
  overflow-x: auto;
}
.mw-parser-output center table {
  display: inline-block;
  vertical-align: top;
}
.mw-parser-output center::-webkit-scrollbar { background: #fafafa; height: 16px; }
.mw-parser-output center::-webkit-scrollbar-track { border-radius: 6px; }
.mw-parser-output center::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #eee;
  box-shadow: inset 0 0 6px rgba(100,100,100,0.1);
}

/* --- Hide toolbox items --- */
#t-whatlinkshere, #t-specialpages { display: none; }

/* --- Sidebar nav portlet (#p-navigation): compact inline links.
   .vector-pinnable-element .mw-list-item a { display: flex } from skin CSS
   needs !important to override. --- */
#p-navigation .vector-menu-content-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.1em 0.5em;
  padding: 0.25em 0;
}
#p-navigation .vector-menu-content-list .mw-list-item {
  display: inline !important;
  padding: 0 !important;
}
#p-navigation .vector-menu-content-list .mw-list-item a {
  display: inline !important;
  padding: 0 !important;
  font-size: 0.85em;
}

/* --- Sidebar toolbox (#p-tb): smaller text --- */
#p-tb .vector-menu-content-list .mw-list-item a {
  font-size: smaller;
}

/* --- Anchor scroll offset for sticky header --- */
#mw-content-text .mw-headline {
  scroll-margin-top: 4rem;
}