MediaWiki:Common.css

From IndieWeb

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */

/**
 * Use system-ui font and apply other typographic adjustments.
 * This brings the design of the site closer inline with events.indieweb.org
 * and makes it look a little less like Wikipedia.
 */
.mw-body h1,
.mw-body-content h1,
.mw-body-content h2,
.mw-page-container,
.mw-page-title-main,
.mw-page-title-namespace,
.mw-page-title-separator,
.mw-headline,
.mw-first-heading {
  font-family: system-ui, sans-serif;
}

.mw-page-title-namespace,
.mw-page-title-separator {
  color: #4a4a4a;
  font-weight: 400;
}

.mw-body-content h1,
.mw-headline,
.mw-page-title-main {
  color: #363636;
  font-weight: 600;
  line-height: 1.125;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Increase body font size to 16px */
.vector-body {
  font-size: 1rem;
}

/* Prevent images from growing too large */
.mw-file-description img {
  max-width: 100%;
  height: auto;
}

/* Adjust spacing of elements in sidebar */
.vector-main-menu-container .vector-menu-heading {
  margin-top: 1em; /* Add space above headings in sidebar */
}
.vector-main-menu-container .vector-menu-content-list li {
  margin-bottom: 0; /* Remove extra inter-list-item spacing */
}
.vector-main-menu-container .vector-menu-content-list li.mw-list-item a {
  padding-bottom: 0.3em; /* Remove extra inter-list-item spacing */
  padding-top: 0.3em;
}

/**
 * Fixes to version of Vector (2022) installed in 2024-01. Later updates to this skin may fix these issues.
 */

/* Force font family on sticky header */ 
.skin-vector-2022 .vector-sticky-header-context-bar-primary {
  font-family: inherit;
}

/* Prevent header breaking outside viewport on narrower screens */
.skin-vector-2022 .vector-header-container,
.skin-vector-2022 .mw-logo,
.skin-vector-2022 .cdx-text-input {
  min-width: auto;
}

/* Apply max width to content, outside of display preference */
.skin-vector-2022 #mw-content-text {
  max-width: 60rem;
}

/* Avoid separating subcategory headings from their items across columns */
.mw-category-group { break-inside: avoid }

/* Call out non-secured external pages with an open lock icon. */
.mw-body-content a.external[href ^="http://"] {
  background:url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23999'%3E%3Crect width='8' height='4' x='1.5' y='6.5' fill='%23BBB' rx='1'/%3E%3Cpath d='M8.5 6.5v-2a3 3 0 1 0-6 0'/%3E%3C/g%3E%3C/svg%3E) center right no-repeat;
  padding-right: 1em;
}

/* Secured external pages should not be an exception. Give them standard external link image. */
.mw-body-content a[href ^="https://"], .mw-body-content a[href ^="ircs://"], .link-https {
  background: url(/wiki/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg) center right no-repeat;
  padding-right: 1em;
}

/* Don’t show external link icon for indieweb domains */
.mw-body-content a.external[href *=".indieweb.org/"] {
  background-image: none;
  padding-right: 0;
}

/* We don’t use Discussion pages, so hide the links */
#ca-talk,
#ca-talk-sticky-header {
  display: none;
}