MediaWiki:Vector.css: Difference between revisions

Revision as of 15:43, 30 May 2026

/* Flat page tabs to match the card theme */

/* Kill Vector's tab gradient and edge images */
.vector-menu-tabs,
.vector-menu-tabs li,
.vectorTabs,
.vectorTabs li {
  background-image: none !important;
}

/* Each tab as a flat button */
.vector-menu-tabs li,
.vectorTabs li {
  background: #ffffff !important;
  border: 1px solid #d8d3c6;
  border-radius: 4px;
  margin: 6px 4px 0 0;
  height: auto !important;
}

.vector-menu-tabs li a,
.vectorTabs li a {
  background-color: transparent !important;
  color: #444 !important;
  padding: 5px 12px !important;
  height: auto !important;
  line-height: 1.4 !important;
}

/* Active tab */
.vector-menu-tabs li.selected,
.vectorTabs li.selected {
  background: #ffffff !important;
  border-color: #c4bdac;
}
.vector-menu-tabs li.selected a,
.vectorTabs li.selected a {
  color: #222 !important;
  font-weight: 600;
}

/* Hover */
.vector-menu-tabs li:hover,
.vectorTabs li:hover {
  background: #ece8df !important;
}

/* "More" dropdown trigger to match */
.vector-menu-dropdown h3,
#p-cactions h3 {
  background: #f4f2ec !important;
  border: 1px solid #d8d3c6;
  border-radius: 4px;
  margin-top: 6px;
}
body { background: #ffffff !important; }
/* Whiten the header band behind the tabs */
#mw-page-base,
#mw-head-base {
  background: #ffffff !important;
}
/* Restore the native watch/unwatch star */
#ca-watch,
#ca-unwatch {
  background: none !important;
  border: none !important;
}
#ca-watch.icon a,
#ca-unwatch.icon a {
  display: block !important;
  width: 28px !important;
  height: 0 !important;
  padding: 3.1em 0 0 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background-position: 5px 45% !important;
  background-repeat: no-repeat !important;
}
#ca-watch.icon a,
#ca-unwatch.icon a {
filter: grayscale(100%) brightness(0.4) !important;
}

/* Kill the tab edge image on the links, but not the star */
.vector-menu-tabs li:not(.icon) a,
.vectorTabs li:not(.icon) a {
  background-image: none !important;
}