HighSpell Wiki

MediaWiki:Vector.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.
/* 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: #0fc065;
  --link-hover: #12e179;
  --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 {
  border-color: #333 !important;
  color: var(--text-main) !important;
}

.toc .toctitle,
.toc .toctitle h2 {
  color: var(--text-main) !important;
  background-color: var(--bg-contrast) !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 {
  body.page-HighLite .mw-parser-output a.external {
    background-image: url(/w/skins/Vector/resources/skins.vector.styles.legacy/images/link-external-small-ltr-progressive-highlite.svg) !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    background-size: 0.857em !important;
    padding-right: 1em !important;
  }

  body:not(.page-HighLite) .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;
}

.vector-body .wikitable th {
  background-color: var(--bg-contrast) !important;
}

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



/* === HighLite Themed Page === */
body.page-HighLite {
  --bg-main: #1e1f22;
  --bg-contrast: #2a2c2f;
  --text-main: #f0f0f0;
  --link-main: #f9f449;
  --link-hover: #f9f449;
  --border-color-base: #3d3d3d;
  --button-bg: #ffe600;
  --button-hover: #fff24d;
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* Text color override */
body.page-HighLite .mw-parser-output,
body.page-HighLite .mw-parser-output * {
  color: var(--text-main);
}

/* Links */
body.page-HighLite a {
  color: var(--link-main) !important;
  text-decoration: none !important;
}
body.page-HighLite a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}

/* Headings */
body.page-HighLite h1,
body.page-HighLite h2,
body.page-HighLite h3,
body.page-HighLite h4 {
  color: var(--link-main) !important;
  border-color: var(--border-color-base) !important;
}

/* Backgrounds for boxes */
body.page-HighLite .infobox,
body.page-HighLite .navbox,
body.page-HighLite .toc,
body.page-HighLite .mw-message-box {
  background-color: var(--bg-contrast) !important;
  border: 1px solid var(--border-color-base) !important;
}

/* Buttons */
body.page-HighLite .button,
body.page-HighLite input[type="submit"],
body.page-HighLite .cdx-button {
  background-color: var(--button-bg) !important;
  color: #000 !important;
  border: none !important;
}
body.page-HighLite .button:hover,
body.page-HighLite input[type="submit"]:hover,
body.page-HighLite .cdx-button:hover {
  background-color: var(--button-hover) !important;
}




/* ===== Number Input Styling ===== */
input[type="number"],
#aurum-controls input[type="number"] {
  -moz-appearance: textfield;       /* Firefox: hide native arrows */
  -webkit-appearance: none;         /* Chrome/Safari */
  appearance: none;

  background-color: var(--bg-main, #1e1f22);
  color: var(--text-main, #b6b4b2);
  border: 1px solid var(--border-color-base, #2d2d2d);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
  width: 120px;
}

/* ===== Chrome/WebKit: Green Up/Down Arrows ===== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  background-color: transparent;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230fc065'%3E%3Cpath d='M7 10l5-5 5 5H7zM7 14l5 5 5-5H7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  height: 32px;
  width: 22px;
}

/* ===== Firefox: Prevent Focus Ring ===== */
input[type="number"]::-moz-focus-inner {
  border: 0;
}

/* ===== Focus Style ===== */
input[type="number"]:focus {
  outline: none;
  border-color: var(--link-main, #0fc065);
  box-shadow: 0 0 2px var(--link-main, #0fc065);
}


/* ===== Form Layout ===== */
#aurum-controls.form-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 300px;
}

#aurum-controls label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-main, #b6b4b2);
  font-size: 14px;
}




[class*="mw-customtoggle-"] {
  color: var(--link-main) !important;
  text-decoration: none !important;
  cursor: pointer;
}

[class*="mw-customtoggle-"]:hover,
[class*="mw-customtoggle-"]:active {
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}
Retrieved from "https://highspell.wiki/w/index.php?title=MediaWiki:Vector.css&oldid=12723"