MediaWiki:Common.css

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.

/* === Collapsible Sidebar (Vector legacy + Vector 2022) === */

/* Normalize clickable headers */
.skin-vector #mw-panel .portal > h3,
.skin-vector-2022 nav.vector-menu-portal .vector-menu-heading {
  position: relative;
  cursor: pointer;
  user-select: none;
  padding-left: 1.5em; /* space for the chevron on the left */
}

/* Chevron (left side), uses a tiny inline SVG for crispness on all DPIs */
.skin-vector #mw-panel .portal > h3::before,
.skin-vector-2022 nav.vector-menu-portal .vector-menu-heading::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 50%;
  width: 0.85em;
  height: 0.85em;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 150ms ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  /* simple chevron; currentColor so it follows the skin */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='6 9 12 15 18 9'/></svg>");
}

/* Rotate chevron when expanded */
.vector-collapsible--expanded > h3::before,
.vector-collapsible--expanded > .vector-menu-heading::before {
  transform: translateY(-50%) rotate(180deg);
}

/* Hide/show the lists */
.skin-vector #mw-panel .portal.vector-collapsible--collapsed > .body,
.skin-vector-2022 nav.vector-menu-portal.vector-collapsible--collapsed .vector-menu-content {
  display: none;
}

/* Optional: slightly dim collapsed groups */
.skin-vector #mw-panel .portal.vector-collapsible--collapsed > h3,
.skin-vector-2022 nav.vector-menu-portal.vector-collapsible--collapsed .vector-menu-heading {
  opacity: 0.85;
}

/* Keyboard focus style on headers */
.skin-vector #mw-panel .portal > h3:focus,
.skin-vector-2022 nav.vector-menu-portal .vector-menu-heading:focus {
  outline: 2px solid var(--color-progressive,#36c);
  outline-offset: 2px;
}