MediaWiki:Vector.css

From Warcraft Watch Secrets
Revision as of 21:11, 2 August 2025 by Elnian (talk | contribs)
Jump to navigation Jump to search

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.
/* skin error overrides */
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child( even ) td {
	background-color: inherit !important; /* avoids white-on-white in dark skin */
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
	background-color: inherit !important; /* avoids white-on-white in dark skin */
}

/***********************************************************************************************************
 * css reset for browser default rules and MediaWiki internal rules
 ***********************************************************************************************************/
* {
	outline: 0;
}
	
table {
	white-space: unset; /* be set to `no-wrap` in MW internal css */
}
	
html {
	font-size: 16px; /* reset rem size */
}
	
body {
	overflow-y: unset;
}
	
pre {
	margin: 0;
}
	
h1, h2, h3, h4, h5, h6 {
	padding: 0;
	border: 0 solid transparent;
}
	
table {
	background-color: transparent; 
	display: table;
	white-space: unset;
}
@media (max-width: calc(639px)) {
    .mw-parser-output table {
		display: table;
    }
}

body, code {
	background: none;
}


html {
	color-scheme: dark;
}

.mw-body {
	background-color: #202020;
	color: #ccc;
	border: 1px solid #ed7117;
	font-family: sans-serif;
}

.mw-body h1, 
.mw-body-content h1, 
.mw-body-content h2, 
.vector-body h3, 
.vector-body h4, 
.vector-body h5, 
.vector-body h6 {
	font-family: sans-serif;
}

.mw-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #ccc;
	font-family: sans-serif;
}

.mw-footer li {
	color: #ccc;
}

#mw-head #p-search .vector-search-box-input {
	color: #ccc;
	background: #202020;
	box-shadow: none;
}

#mw-head #p-search .vector-search-box-inner {
	border-color: #ed7117;
}

#filetoc {
	background-color: #111;
	border: 1px solid #383838;
}

div#simpleSearch {
	background: 202020;
	border: 1px solid #ed7117;
}

body {
	background-color: #111;
}

ul {
	list-style-image: none;
}

a {
	color: #518fce;
}

a:visited {
	color: #518fce;
}

code {
	border-radius: 2px;
	padding: 1px 4px;
}

pre, code, .mw-code {
	color: #fff;
	border: 1px solid #383838;
	background: #181818;
}

#mw-page-base {
	background-color: #111;
	background-image: none;
	background-position: bottom left;
	height: 5em;
}

.vector-menu-tabs-legacy li {
	float: left;
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	background-image: linear-gradient(to top,#ed7117 1px,#101010 0,#111 100%);
}

.vector-menu-tabs-legacy li a {
	color: #518fce;
}

.vector-menu-tabs-legacy li a:visited {
	color: #518fce;
}

.vector-menu-tabs-legacy .selected {
	background: #111;
	background-image: linear-gradient(to top,#202020 0,#111 100%);
	border-bottom: none;
}

.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
	color: #ccc;
}

.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading {
	background-image: linear-gradient(rgba(0,0,0,0) 0,#ed7117 100%);
	background-repeat: no-repeat;
	background-size: 1px 100%;
}

.vector-menu-heading-label {
	color: #ae7117;
	font-size: 14px;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
	display: block;
	color: #ed7117;
	margin: 0.5em 0 0 0.66666667em;
	border: 0;
	padding: 0.25em 0;
	font-size: 0.75em;
	font-weight: normal;
	background-image: linear-gradient(to right,rgba(0,0,0,0) 0, #ed7117 33%, #ed7117 66%, rgba(0,0,0,0) 100%);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% 1px;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
	color: #518fce;
}

.vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
	color: #518fce;
}

#catlinks {
	--theme-box-border-radius: 0;
}

#catlinks {
	text-align: left;
	background: #111;
	border: 1px solid #383838;
	border-radius: 0;
	margin: 16px 0 0 0;
	padding: 0.5em 1em;
}

#pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, 
#pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
    opacity: 0.51;
    color: #ccc;
}

input[type="submit"],
button[type="submit"] {
	background-color: #0077cc;
	color: #ccc;
	padding: 0.5em 1em;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: #005fa3;
}

/***********************************************************************************************************
 * css for pages under MediaWiki or Special NS, or system widgets on template/module pages and so on
 ***********************************************************************************************************/
/********* ooui *********/
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
	background: none;
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
	color: var(--theme-text-color);
}

.oo-ui-tabOptionWidget {
	color: var(--theme-text-color);
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
	color: var(--theme-text-color);
	background: none;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
	color: var(--theme-content-text-mix-color);
}

.oo-ui-tabSelectWidget-framed {
	background: none;
}

/********* Special:Preferences *********/
#preferences .mw-htmlform-submit-buttons {
    background-color: var(--theme-background-color--secondary);
    border-top: 1px solid var(--theme-border-color);
    border-left: 1px solid var(--theme-border-color);
    border-right: 1px solid var(--theme-border-color);
}
.mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout { border-color: var(--theme-border-color); }

fieldset {
	border: 1px solid #ed711788;
}

.toc {
	background-color: #111;
	border:1px solid #ed711744;
}

.tocnumber {
	color: #aaa;
}

dev#content table {
	color: #ccc;
}

.darktable, .darkbox, div#content table.wikitable, div#content table.cargoTable {
    border: 1px solid var(--theme-border-color);
    padding: 5px;
    background: var(--theme-background-color);
    margin: 0.5em 0em 1em 0.5em;
}

table.darktable th,
table.darkbox th,
.navbox-title,
table.navbox th,
table.stylish td:first-child {
	background-color: #062544;
}

table.darktable th, 
table.darktable tr:not(:first-child) th.outer, 
table.darkbox th, 
table.darkbox tr:not(:first-child) th.outer, 
table.stylish td:first-child, 
div#content table.wikitable > tr > th, 
div#content table.wikitable > * > tr > th, 
div#content table.cargoTable > tr > th, 
div#content table.cargoTable > * > tr > th {
    background-color: #062544;
    padding: 0 0.5em;
}

div#content,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
div#content table {
	color: #ccc;
}

table.wikitable > tr > th, table.wikitable > * > tr > th {
	border-color: #303030;
	color: #ccc;
}

.darktable,.darkbox,div#content table.wikitable,div#content table.cargoTable {
    border: 1px solid var(--theme-border-color);
    padding: 5px;
    background: var(--theme-background-color);
    margin: 0.5em 0em 1em 0.5em
}

table.wikitable,table.cargoTable {
    border-collapse: unset
}

.wikitable > tr > th,.wikitable > tr > td,.wikitable > * > tr > th,.wikitable > * > tr > td,.cargoTable > tr > th,.cargoTable > tr > td,.cargoTable > * > tr > th,.cargoTable > * > tr > td {
    border: none
}

.darktable,.stylish {
    font-size: 89%
}

.stylish {
    padding: 5px;
    margin: 0.5em 0em 1em 0.5em
}

table.darktable th,table.darktable tr:not(:first-child) th.outer,table.darkbox th,table.darkbox tr:not(:first-child) th.outer,table.stylish td:first-child,div#content table.wikitable > tr > th,div#content table.wikitable > * > tr > th,div#content table.cargoTable > tr > th,div#content table.cargoTable > * > tr > th {
    background-color: var(--theme-header-background-color);
    padding: 0 0.5em;
}

table.darktable caption {
    font-size: 120%;
    font-weight: bold
}

table.darktable tr:not(:first-child) th,table.darkbox tr:not(:first-child) th,div#content table.wikitable tr:not(:first-child) th,div#content table.cargoTable tr:not(:first-child) th {
    background-color: var(--theme-header-background-color)
}

.rowtitle {
    font-size: 1.15em;
    padding: 0.2em 2em 0.2em 0.5em
}

table.extrapadding td {
    padding-left: 4px;
    padding-right: 4px
}

table.td-right td {
    text-align: right
}

div#content .title {
    background-color: var(--theme-background-color--secondary);
    text-align: center;
    font-weight: bold;
    padding: 1px 2px
}

.theme-dark table.darktable td.title,.theme-dark .darkbox td.title {
    background-color: #303030
}

.alt,.rowtitle {
    background-color: var(--theme-background-color-alt)
}

table.zebra > tbody > tr:nth-child(2n+1),table.zebra.darktable > tbody > tr:nth-child(2n+1),table.zebra.wikitable > tbody > tr:nth-child(2n+1),table.zebra.darkbox > tbody > tr:nth-child(2n+1),table.filehistory > tbody > tr:nth-child(2n+1) {
    background-color: var(--theme-background-color-alt)
}

table .hover:hover {
    background-color: orange
}

/* Gadget description length */
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
	max-width: unset;
}

/******* Search result page. (Special:Search)	******/
.mw-search-form-wrapper {
	font-size: 1em;
}

.mw-search-form-wrapper #mw-search-top-table {
	display: flex;
	align-items: center;
}

.mw-search-form-wrapper #mw-search-top-table > div {
	float: none;
}

.mw-search-form-wrapper .results-info {
	color: var(--theme-content-text-mix-color);
	font-size: 1em;
	padding: 0 0 0 3em;
	white-space: nowrap;
	text-align: right;
	flex: 1 1 auto;
}

.mw-search-form-wrapper .mw-search-visualclear {
	display: none;
}

.mw-search-form-wrapper .mw-search-profile-tabs {
	border: 0;
	margin: 1em 0;
}

.mw-search-form-wrapper .mw-search-profile-tabs .search-types + div {
	display: none;
}

.mw-search-form-wrapper .mw-search-profile-tabs .search-types {
	width: 100%;
	float: none;
	padding: 0;
}

.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
	float: none;
	display: inline-block;
	vertical-align: middle;
}

.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current {
	background:var(--theme-border-color);
	border-radius: 2px;
	overflow: hidden;
}
.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current:nth-child(1) {
  border-radius: 0 2px 2px 0;
}

.mw-search-form-wrapper #mw-searchoptions {
	padding: 1em;
	background: var(--theme-background-color-alt);
	border: 1px solid var(--theme-accent-color);
	border-radius: 4px;
}

/* New inline in Special:History diffs */
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
	background-color: var(--theme-accent-color-bright);
	border-color: var(--theme-accent-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
	background-color: var(--theme-accent-color);
	border-color: var(--theme-accent-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
	background-color: var(--theme-accent-color);
	border-color: var(--theme-accent-color-bright);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
	border-color: var(--theme-accent-color-bright);
    box-shadow: inset 0 0 0 1px var(--theme-accent-color-bright);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip {
	border-color: var(--theme-accent-color-bright);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
	background-color: var(--theme-accent-color);
	border-color: var(--theme-accent-color);
}

.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
	background-color: var(--theme-accent-color-bright);
	border-color: #0006;
}

/* Edit conflict */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
    background-color: var(--theme-background-color--secondary);
    border-color: var(--theme-border-color);
}

.mw-twocolconflict-single-column.mw-twocolconflict-split-copy, .mw-twocolconflict-split-column.mw-twocolconflict-split-copy {
    border-color: var(--theme-border-color);
    background-color: var(--theme-background-color--secondary);
    color: var(--theme-text-color);
}
.mw-twocolconflict-single-column .mw-twocolconflict-split-collapsed .mw-twocolconflict-split-fade, .mw-twocolconflict-split-column .mw-twocolconflict-split-collapsed .mw-twocolconflict-split-fade {
    background-image: linear-gradient(transparent,var(--theme-background-color-alt));
}

.mw-twocolconflict-single-column.mw-twocolconflict-split-unselected.mw-twocolconflict-split-delete, .mw-twocolconflict-split-column.mw-twocolconflict-split-unselected.mw-twocolconflict-split-delete {
    border-color: var(--theme-border-color);
}
.mw-twocolconflict-single-column, .mw-twocolconflict-split-column {
    background-color: var(--theme-background-color--secondary);
    color: var(--theme-text-color);
}

.mw-twocolconflict-single-column.mw-twocolconflict-split-unselected ins.mw-twocolconflict-diffchange, .mw-twocolconflict-split-column.mw-twocolconflict-split-unselected ins.mw-twocolconflict-diffchange {
	background-color: var(--theme-border-color);
}
.mw-twocolconflict-single-column.mw-twocolconflict-split-unselected.mw-twocolconflict-split-add, .mw-twocolconflict-split-column.mw-twocolconflict-split-unselected.mw-twocolconflict-split-add {
  border-color: var(--theme-border-color);
}
.mw-twocolconflict-split-selection > div:nth-child(2) .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked + span, .mw-twocolconflict-split-selection > div:nth-child(2) .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:active + span, .mw-twocolconflict-split-selection > div:nth-child(2) .oo-ui-radioInputWidget [type="radio"] + span {
	background: var(--theme-background-color--secondary);
}
.mw-twocolconflict-split-selection > div:nth-child(1) .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:checked + span, .mw-twocolconflict-split-selection > div:nth-child(1) .oo-ui-radioInputWidget.oo-ui-widget-enabled [type="radio"]:active + span, .mw-twocolconflict-split-selection > div:nth-child(1) .oo-ui-radioInputWidget [type="radio"] + span {
	background: var(--theme-background-color--secondary);
}
.mw-twocolconflict-split-editable .mw-twocolconflict-split-editor, .mw-twocolconflict-split-difftext { color: var(--theme-text-color); }

/* ?action=history */
#pagehistory li {
	border: dashed 1px var(--theme-border-color);
}

/* Wiki editor */
.wikiEditor-ui-toolbar .tabs span.tab a::before {
	left: 5px;
}

#mw-notification-area .mw-notification.mw-notification-type-error {
    background-color: rgba(154,0,0,0.8);
    border: solid 1px #d33;
    color: var(--theme-text-color)
}

#mw-notification-area .mw-notification.mw-notification-type-warn {
    background-color: rgba(138,104,0,0.8);
    border: solid 1px #fc3;
    color: var(--theme-text-color)
}

#mw-notification-area .mw-notification.mw-notification-type-success {
    background-color: rgba(1,140,48,0.8);
    border: solid 1px rgb(1,210,48);
    color: var(--theme-text-color)
}
Retrieved from "https://secrets.warcraftwatch.com/w/index.php?title=MediaWiki:Vector.css&oldid=7369"