MediaWiki:Vector.css: Difference between revisions

Revision as of 17:35, 12 August 2025

/* All CSS here will be loaded for users of the Vector skin */

/* ===== NUCLEAR: flatten Vector (Legacy) tabs ===== */

/* 0) Containers: remove any bg/border leftover */
#mw-head, #left-navigation, #right-navigation,
#p-namespaces, #p-views, #p-cactions {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 1) Kill the tab “pills” on <li> and <a> */
#p-namespaces .vectorTabs,
#p-views      .vectorTabs,
#p-cactions   .vectorTabs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#p-namespaces .vectorTabs li,
#p-views      .vectorTabs li,
#p-cactions   .vectorTabs li {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) Links = plain text; remove gradients/sprites/borders */
#p-namespaces .vectorTabs li a,
#p-views      .vectorTabs li a,
#p-cactions   .vectorTabs li a {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 6px 10px !important;   /* adjust spacing */
  color: #2b2b2b !important;      /* normal text color */
  font-weight: 600;
}

/* 3) There’s a sneaky inner <span> that carries the white pill — nuke it */
#p-namespaces .vectorTabs li a span,
#p-views      .vectorTabs li a span,
#p-cactions   .vectorTabs li a span {
  background: transparent !important;
  background-image: none !important;
}

/* 4) Active + hover states as simple underlines in jewel tones */
#p-namespaces .vectorTabs li.selected a,
#p-views      .vectorTabs li.selected a,
#p-cactions   .vectorTabs li.selected a {
  color: #9c2c2c !important;                 /* ruby */
  border-bottom: 2px solid #9c2c2c !important;
}

#p-namespaces .vectorTabs li a:hover,
#p-views      .vectorTabs li a:hover,
#p-cactions   .vectorTabs li a:hover {
  color: #00796b !important;                  /* emerald */
  border-bottom: 2px solid #c49b6e !important;/* subtle gold underline */
  text-decoration: none !important;
}

/* 5) Make the glossy search box match your style */
#simpleSearch, #searchInput {
  background: #fff8f0 !important;             /* light ivory */
  border: 1px solid #c49b6e !important;       /* gold-ish edge */
  box-shadow: none !important;
  color: #2b2b2b !important;
}
#searchInput::placeholder { color: #9c8b73 !important; }