MediaWiki:Vector.css

Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* CSS placed here will affect users of the Vector skin */
#p-logo {
	top: -233px; /* From -160px. Distance from the top */
	height: 236px; /* From 160px. Height of logo */
}
#p-logo a {
	height: 236px; /* From 160px. Height of logo */
}

:root {
  --hf-hero-bg: var(--hf-h2-bg, #3c553c); /* falls back to your section color */
  --hf-hero-fg: #fff;
  --hf-hero-border: #ccc;
}

/* HeaderTemplate */
.hf-hero {
  margin-top: .7em;
}
.hf-hero-table {
  width: 100%;
  border-collapse: separate;
  border: 1px solid var(--hf-hero-border);
  border-radius: 12px;
  background: var(--hf-hero-bg);
  overflow: hidden;
}
.hf-hero-left,
.hf-hero-right {
  color: var(--hf-hero-fg);
  vertical-align: middle;
  padding: .6em .8em;
}
.hf-hero-left { width: 45%; white-space: nowrap; text-align: center; }
.hf-hero-right { font-size: 125%; text-align: center; }
.hf-hero-title {
  font-size: 195%;
  font-weight: 700;
  margin: 0;
}

/* Make custom [Show/Hide] toggles look like links */
span[class^="mw-customtoggle-"] {
  color: #0645ad;               /* standard MediaWiki link blue */
  cursor: pointer;
  text-decoration: underline;
  font-weight: normal;
}
span[class^="mw-customtoggle-"]:hover {
  color: #0b0080;               /* darker hover like links */
}

/* Make the whole left column solid color */
#mw-panel {
  background: #3c553c;
  position: fixed;       /* sticks full height */
  top: 0;
  bottom: 0;
  left: 0;
  width: 10em;           /* default Vector sidebar width */
  padding-top: 5em;      /* leaves space for logo */
}

/* Adjust links so they don’t overlap */
#mw-panel .portal .body li a {
  color: #fff;
}
#mw-panel .portal .body li a:hover {
  background: rgba(255,255,255,0.1);
}

#mw-panel {
  width: 11em;        /* wider than default ~10em */
}

/* Make the entire left column + top bar match the sidebar green */
#mw-head-base,
#mw-head,
#p-logo,
#mw-panel {
  background: #3c553c;
}

/* Optional: change tab backgrounds so they blend */
#p-personal,
#p-navigation,
.vector-menu-tabs {
  background: #3c553c;
}

/* Page background */
body,
.vector-body,
#content {
  background: #f4f1e6;   /* pick your tone */
  color: #16181d;        /* keep text dark */
}