MediaWiki:Vector.css: Difference between revisions

Revision as of 17:25, 19 June 2025

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

:root {
  --bg-main: #1e1f22;
  --bg-contrast: #2a2c2f;
  --bg-search: #919193;
  --bg-stub: #00000047;
  --text-search: #222222;
  --text-main: #b6b4b2;
  --link-main: #f9f449;
  --link-hover: #0fc065;
  --border-color-base: #2d2d2d;
  --tab-padding: 8px 14px;
  --icon-size: 16px;
}

body,
#content,
#mw-head,
#mw-panel,
#footer {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

.vector-body,
.vector-body * {
  color: var(--text-main) !important;
  background: none !important;
  box-shadow: none !important;
}


#firstHeading {
  color: var(--text-main) !important;
  font-weight: 500;
}

a,
a:visited {
  color: var(--link-main) !important;
}
a:hover,
a:active {
  color: var(--link-hover) !important;
  text-decoration: underline;
}

a.new,
.mw-body a.new {
  color: #e04343 !important;
  text-decoration: none !important;
}

a.new:hover,
.mw-body a.new:hover {
  text-decoration: underline !important;
}




/* === TOP TABS CLEAN & BOXY === */
.vector-menu-tabs li {
  margin: 0 2px !important;
  border: none !important;
  background: none !important;
}

.vector-menu-tabs li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--tab-padding) !important;
  height: 36px !important;
  line-height: 1.2 !important;
  color: var(--text-main) !important;
  background-color: var(--bg-contrast) !important;
  border: 1px solid #333 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  font-size: 14px !important;
}

.vector-menu-tabs li a:hover {
  background-color: #3a3a3a !important;
  color: var(--link-hover) !important;
}

.vector-menu-tabs li.selected a {
  background-color: var(--link-main) !important;
  color: #101010 !important;
}

.vector-menu-tabs {
  background: var(--bg-main) !important;
  border-bottom: 1px solid #2d2d2d !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-right: none !important;
  border-inline-end: none !important;
}

/* Watch star cleanup */
#ca-watch.icon a,
#ca-unwatch.icon a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--tab-padding) !important;
  height: 36px !important;
  background-color: var(--bg-contrast) !important;
  color: var(--text-main) !important;
  border: 1px solid #333 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-indent: -9999px;
  width: calc(var(--icon-size) + 14px);
  position: relative;
}

#ca-watch.icon a::before,
#ca-unwatch.icon a::before {
  content: "";
  background-image: url("/w/resources/src/mediawiki.skinning/images/watch-icons/watch-progressive.svg");
  background-size: var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: invert(1);
}

.vector-menu-portal .vector-menu-heading {
  color: var(--text-main) !important;
  font-weight: bold;
}

.vector-menu-portal .vector-menu-content li a {
  color: var(--link-main) !important;
}

.vector-search-box-inner,
.vector-search-box-vue input.cdx-text-input__input {
  background-color: var(--bg-search) !important;
  color: var(--text-search) !important;
  border: none !important;
  box-shadow: none !important;
}

.vector-search-box-input::placeholder {
  color: var(--text-search) !important;
  opacity: 0.75;
}

#footer-info,
#footer-info a,
.printfooter,
#contentSub,
#contentSub2 {
  color: var(--text-main) !important;
}

.toc {
  background-color: var(--bg-contrast) !important;
  border-color: #333 !important;
  color: var(--text-main) !important;
}

.toc .toctitle,
.toc .toctitle h2 {
  color: var(--text-main) !important;
}

.vector-menu-dropdown,
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown .vector-menu-content {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  border: none !important;
  box-shadow: none !important;
}

.vector-menu-dropdown a {
  color: var(--link-main) !important;
}

.navbox,
.thumbinner,
.thumbcaption {
  background-color: var(--bg-contrast) !important;
  color: var(--text-main) !important;
  border: none !important;
}

button,
input,
.vector-menu-tabs .selected,
.vector-menu-tabs ul li:hover,
.vector-menu-tabs li,
.vector-menu-tabs a {
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#pt-notifications-alert, #pt-notifications-notice {
  filter: invert(1);
}


.stub-box {
  background: var(--bg-stub) !important;
}

/* Remove right edge vertical line */
#right-navigation:after,
#p-cactions-label:after {
  display: none !important;
  border: none !important;
  content: none !important;
}

/* Vertically align 'More' tab text */
#p-cactions .vector-menu-heading-label {
  display: inline-block;
  transform: translateY(-4px);
}

@media screen {
  .vector-menu-tabs,
  .vector-menu-tabs a,
  #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: none !important;
    background-repeat: unset !important;
    background-size: unset !important;
  }
}

#footer .license,
#footer .license li,
#footer .license a,
#footer .noprint,
#footer .noprint a,
#footer .noprint img,
#footer .noprint div {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
}

#footer-info,
#footer-info a,
.printfooter,
#contentSub,
#contentSub2,
.mw-footer,
.mw-footer li,
.mw-footer li a,
.mw-footer .last-modified,
.mw-footer .license {
  color: var(--text-main) !important;
}

.mw-footer a,
#footer a {
  color: var(--link-main) !important;
}
.mw-footer a:hover,
#footer a:hover {
  color: var(--link-hover) !important;
}

/* Remove default gradient background lines */
@media screen {
  .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
    background-image: none !important;
    background-repeat: unset !important;
    background-size: unset !important;
  }
}

/* Match all content and layout borders to theme green */
#content,
#mw-head,
#mw-panel,
#footer,
#left-navigation,
#right-navigation,
#siteNotice,
#bodyContent,
#contentSub,
#mw-content-text,
.ve-init-mw-desktopArticleTarget-editableContent,
.mw-body,
.mw-body-content,
.vector-page-toolbar-container,
.vector-page-toolbar {
  border-color: #2d2d2d !important;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
  background-image: none !important;
  border-bottom: 1px solid #2d2d2d !important;
  background-size: unset !important;
  background-repeat: unset !important;
  background-position: unset !important;
}


/* Only apply bullets in article content, not sidebar/menu */
.mw-body-content ul,
.mw-parser-output ul {
  list-style-type: disc !important;
  list-style-image: none !important;
  list-style-position: outside !important;
  padding-left: 1em !important;
}

.mw-body-content li,
.mw-parser-output li {
  display: list-item !important;
  color: var(--text-main) !important;
}

.mw-body-content li::marker,
.mw-parser-output li::marker {
  color: var(--text-main) !important;
}

@media screen {
  .mw-parser-output a.external {
    background-image: url(/w/skins/Vector/resources/skins.vector.styles.legacy/images/link-external-small-ltr-progressive-green.svg) !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    background-size: 0.857em !important;
    padding-right: 1em !important;
  }
}

.leaflet-control.ext-datamaps-control,
.leaflet-control.ext-datamaps-control * {
  background-color: #fff !important;
  color: #000 !important;
}
/* Make checkbox checkmark black */
.oo-ui-checkboxInputWidget input[type="checkbox"]:checked + .oo-ui-checkboxInputWidget-checkIcon {
  background-color: #000 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  color: #fff !important;
  filter: invert(0%) !important;
}

.oo-ui-checkboxInputWidget input[type="checkbox"] {
  accent-color: #fff !important;
}

a:link {
  color: #0fc065 !important;
}





/* Suggestions wrapper */
.suggestions {
  background-color: var(--bg-main) !important;
  border: 1px solid #333 !important;
  color: var(--text-main) !important;
  font-size: 14px !important;
  z-index: 9999 !important;
}

/* Each result entry */
.mw-searchSuggest-link {
  display: block !important;
  text-decoration: none !important;
}

.suggestions-result {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid var(--bg-contrast) !important;
}

/* Active result (hovered/selected) */
.suggestions-result-current,
.suggestions-result:hover {
  background-color: var(--bg-main) !important;
  color: var(--link-main) !important;
}

/* Highlighted part of match (e.g., bolded match) */
.suggestions-result .highlight {
  font-weight: bold !important;
  color: var(--link-main) !important;
}

/* Final suggestion line */
.suggestions-special {
  background-color: var(--bg-contrast) !important;
  color: var(--text-main) !important;
  padding: 8px 12px !important;
  font-style: italic;
  border-top: 1px solid #333 !important;
}

.suggestions-special a {
  color: var(--link-main) !important;
}
.suggestions-special a:hover {
  color: var(--link-hover) !important;
}

.suggestions-special .special-query {
  color: var(--link-main) !important;
}








/* Style all submit buttons EXCEPT the search button */
input[type="submit"]:not(#searchButton),
input[type="button"]:not(#searchButton),
button:not(#searchButton) {
  background-color: var(--link-main) !important;
  border: 1px solid var(--link-main) !important;
  color: #101010 !important;
}

input[type="submit"]:not(#searchButton):hover,
input[type="button"]:not(#searchButton):hover,
button:not(#searchButton):hover {
  background-color: var(--link-hover) !important;
  border-color: var(--link-hover) !important;
}

/* Style the search button to match the input background */
#searchButton {
  background-color: #c8c8c9 !important; /* Match the input background */
  background-image: url(/w/skins/Vector/resources/skins.vector.styles.legacy/images/search.svg) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.2em !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Prevent color change on interaction */
#searchButton:hover,
#searchButton:focus,
#searchButton:active {
  background-color: #c8c8c9 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.mw-search-formheader li {
  list-style: none !important;
}

.mw-search-formheader li::before {
  content: none !important;
}


.vector-body th.headerSort {
  background-image: url("/w/resources/src/jquery.tablesorter.styles/images/sort_both.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
  padding-right: 21px !important;
  background-color: var(--bg-contrast) !important;
}

pre {
  border: 1px solid var(--border-color-base) !important;
}