MediaWiki:Vector.css: Difference between revisions

From Warcraft Watch Secrets
Jump to navigation Jump to search
← Older editNewer edit →
Content deleted Content added
Undo revision 7371 by Elnian (talk)
Tag: Undo
No edit summary
Line 1,015: Line 1,015:
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
background-color: var(--theme-link-color-focus);
background-color: var(--theme-link-color-focus);
}

/* dropdown menu*/
#mw-head .vector-menu-dropdown .vector-menu-heading {
/* tab label */
position: relative;
display: flex;
align-items: center;
gap: 3px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
/* arrow icon */
background: none;
opacity: unset;
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-color: var(--theme-icon-color) transparent;
border-width: 6px 5px 0;
margin-top: 2px;
}
#mw-head .vector-menu-dropdown:hover .vector-menu-heading::after {
/* .vector-menu-heading is covered by .vector-menu-checkbox, therefore we can't use .vector-menu-heading:hover::after */
border-color: var(--theme-icon-color-hover) transparent;
}
#mw-head .vector-menu-dropdown .vector-menu-content {
/* dropdown list body */
border: var(--theme-dropdown-border);
border-radius: var(--theme-box-border-radius);
background: var(--theme-dropdown-background);
backdrop-filter: var(--theme-dropdown-backdrop-filter);
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0; /* reset */
z-index: 10;
}
#mw-head .vector-menu-dropdown .vector-menu-content ul {
--theme-link-color: var(--theme-text-color);
--theme-link-color-visited: var(--theme-link-color);
--theme-link-color-hover: var(--theme-link-color);
padding: 4px;
}
#mw-head .vector-menu-dropdown .vector-menu-content li:hover {
background: var(--theme-highlight-background);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a {
display: block;
padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
text-decoration: none;
color: var(--theme-link-color);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:visited {
color: var(--theme-link-color-visited);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:hover {
color: var(--theme-link-color-hover);
}
}

Revision as of 21:19, 2 August 2025

/* 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)
}

/** headings **/
.mw-body h1, .mw-body-content h1, .mw-body-content h2,
.vector-body h3, .vector-body h4,
.vector-body h5, .vector-body h6 {/*
	margin: 0;
	color: var(--theme-heading-color);*/
	font-family: var(--theme-heading-font-face, sans-serif);/*
	line-height: var(--theme-heading-line-height, 1.25);
	font-weight: var(--theme-heading-font-weight, normal);*/
}/*

.mw-body h1, .mw-body-content h1 {
	font-size: var(--theme-heading-font-size-h1, 32px);
	line-height: var(--theme-heading-line-height-h1, 40px);
	font-weight: var(--theme-heading-font-weight-h1, var(--theme-heading-font-weight, normal));
}*/

.mw-body-content h2 {/*
	font-size: var(--theme-heading-font-size-h2, 24px);
	line-height: var(--theme-heading-line-height-h2, 30px);
	font-weight: var(--theme-heading-font-weight-h2, var(--theme-heading-font-weight, normal));
	margin-top: 18px;
	margin-bottom: 9px;*/
	border-bottom: 1px solid var(--theme-heading-rule-color-h2);/*
	padding-bottom: 3px;*/
}

/*.vector-body h3 {
	font-size: var(--theme-heading-font-size-h3, 20px);
	line-height: var(--theme-heading-line-height-h3, 26px);
	font-weight: var(--theme-heading-font-weight-h3, var(--theme-heading-font-weight, normal));
	margin-top: 14px;
	margin-bottom: 7px;
}

.vector-body h4 {
	font-size: var(--theme-heading-font-size-h4, 16px);
	line-height: var(--theme-heading-line-height-h4, 22px);
	font-weight: var(--theme-heading-font-weight-h4, var(--theme-heading-font-weight, normal));
	margin-top: 14px;
	margin-bottom: 7px;
}

.vector-body h5 {
	font-size: var(--theme-heading-font-size-h5, 14px);
	line-height: var(--theme-heading-line-height-h5, 22px);
	font-weight: var(--theme-heading-font-weight-h5, bold);
	margin-top: 10px;
	margin-bottom: 7px;
}

.vector-body h6 {
	font-size: var(--theme-heading-font-size-h6, 12px);
	line-height: var(--theme-heading-line-height-h6, 20px);
	font-weight: var(--theme-heading-font-weight-h1, bold);
	margin-top: 7px;
	margin-bottom: 7px;
}*/

/* reduce heading font size: */
@media (max-width: 900px) {
	.mw-body h1, .mw-body-content h1 {
		font-size: 24px;
		line-height: 32px;
	}
	.mw-body-content h2 {
		font-size: 20px;
		line-height: 28px;
	}
	.vector-body h3 {
		font-size: 18px;
		line-height: 24px;
	}
}
/* section edit link */
.mw-editsection {
	white-space: nowrap;
	color: var(--theme-content-text-mix-color);
}

/***********************************************************************************************************
 * Styles for "real" wiki page content. (in div.mw-parser-output)
 ***********************************************************************************************************/
/* external link icon. */
.link-https {
	padding-right: 0;
	background: none;
}

/* custom icon color*/
.mw-parser-output a.external {
    background-position:center right;
    background-repeat:no-repeat;
    background-image:url(https://commons.wiki.gg/images/2/25/External.svg);
    background-size:10px;
    padding-right:13px
}

.mw-parser-output > :first-child {
	margin-top: 0;
}

/***********************************************************************************************************
 * Over-width table floating-scroll
 ***********************************************************************************************************/
/*
css for floating-scroll v3.2.0
https://amphiluke.github.io/floating-scroll/
(c) 2022 Amphiluke
*/
.fl-scrolls {
	overflow: auto;
	position: fixed;
}

.fl-scrolls div {
	overflow: hidden;
	pointer-events: none;
}

.fl-scrolls div:before {
	content: " ";
}

.fl-scrolls, .fl-scrolls div {
	font-size: 1px;
	line-height: 0;
	margin: 0;
	padding: 0;
}

.fl-scrolls-hidden div:before {
	content: "  ";
}

.fl-scrolls-viewport {
	position: relative;
}

.fl-scrolls-body {
	overflow: auto;
}

.fl-scrolls-viewport .fl-scrolls {
	position: absolute;
}

.fl-scrolls-hoverable .fl-scrolls {
	opacity: 0;
	transition: opacity 0.5s 0.3s;
}

.fl-scrolls-hoverable:hover .fl-scrolls {
	opacity: 1;
}

.fl-scrolls:not([data-orientation]), .fl-scrolls[data-orientation=horizontal] {
	bottom: 0;
	min-height: 17px;
}

.fl-scrolls:not([data-orientation]) div, .fl-scrolls[data-orientation=horizontal] div {
	height: 1px;
}

.fl-scrolls-hidden.fl-scrolls:not([data-orientation]), .fl-scrolls-hidden.fl-scrolls[data-orientation=horizontal] {
	bottom: 9999px;
}

.fl-scrolls-viewport .fl-scrolls:not([data-orientation]), .fl-scrolls-viewport .fl-scrolls[data-orientation=horizontal] {
	left: 0;
}

.fl-scrolls[data-orientation=vertical] {
	right: 0;
	min-width: 17px;
}

.fl-scrolls[data-orientation=vertical] div {
	width: 1px;
}

.fl-scrolls-hidden.fl-scrolls[data-orientation=vertical] {
	right: 9999px;
}

.fl-scrolls-viewport .fl-scrolls[data-orientation=vertical] {
	top: 0;
}

/****** postedit notification ******/
.postedit-container {
	top: 4em;
}

.mw-dismissable-notice {
	position: fixed;
	left: 2em;
	right: 2em;
	bottom: 4em;
	background: var(--theme-site-background);
	max-width: 500px;
	min-height: 80px;
	padding: 12px 8px;
	box-sizing: border-box;
	text-align: left;
	border: 1px solid var(--theme-accent-color);
	border-left-width: 8px;
	backdrop-filter: var(--theme-box-back-backdrop-filter);
	box-shadow: 0 0 10px rgba(127, 127, 127, 0.3);
}
.mw-dismissable-notice .mw-dismissable-notice-close {
	font-size: 11px;
}
.mw-dismissable-notice .mw-dismissable-notice-body {
	margin: 0px 40px 0px 24px;
	font-size: 14px;
}
.mw-dismissable-notice #localNotice {
	margin: 0;
}

/***** Notification area *****/
.mw-notification-area-overlay {
	position: fixed;
	z-index: 9999;
}

.mw-notification-area {
	font-size: 0.90em;
	line-height: 1.7142857143;
}

/* Bubble notifications */
.mw-notification {
	color: var(--theme-text-color);
	box-sizing: border-box;
	border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-accent-color);
	border-radius: var(--theme-box-border-radius);
	backdrop-filter: var(--theme-box-back-backdrop-filter);
	box-shadow: var(--theme-box-shadow);
	background: var(--theme-background-color--secondary);
	transform: none;
}

body.skin-vector .mw-notification, /* default */
#mw-notification-area .mw-notification.mw-notification-type-info {
	background-color: var(--theme-background-color--secondary);
	border: solid 1px var(--theme-border-color);
	color: var(--theme-text-color);
}
#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);
}

/****** indicators ******/
.mw-indicators {
	position: absolute;
	right: 2rem;
	margin-top: 5px;
}

/* Footer icons */
html.view-dark #footer #footer-icons a:has([data-theme="dark"]) {
	background-color: var(--theme-background-color--secondary);
	border-color: var(--theme-border-color);
}

/**** #footer (copyright info) ****/
#footer {
	background: var(--theme-site-background);
	padding: 16px 24px;
	border-radius: 0 0 var(--theme-box-border-radius) var(--theme-box-border-radius);
	position: relative;
	z-index: 0; /* covered by content */
	font-size: 12px;
}

.mw-footer li {
	color: var(--theme-content-text-mix-color);
}

#footer a {
	color: var(--theme-link-color);
}

#footer a:hover {
	color: var(--theme-link-color-hover);
}

#footer-info {
	display: contents;
}

#footer ul li {
	font-size: inherit;
	line-height: 1.5;
	padding: 0;
}

#footer #footer-info-lastmod {
	margin-bottom: 1em;
}

#footer #footer-info-copyright {
	position: relative;
	padding-right: 100px;
}

#footer-places > * {
	margin-top: 1em;
}

/*** search result suggestions ***/
.suggestions {
	background-color: var(--theme-dropdown-background);
	box-sizing: border-box;
	margin-top: 0;
	box-shadow: var(--theme-box-shadow);
	backdrop-filter: var(--theme-box-back-backdrop-filter);
}
.suggestions .suggestions-results,
.suggestions .suggestions-special {
	background: none;
}
.suggestions .suggestions-results {
	border: var(--theme-dropdown-border);
	border-top: 0;
	border-bottom-color: var(--theme-rule-color);
}
.suggestions .suggestions-results:empty {
	border-bottom: 0;
}
.suggestions .suggestions-result, .suggestions .suggestions-special .special-query {
	color: var(--theme-text-color);
}
.suggestions .suggestions-special .special-label { 
	color: var(--theme-content-text-mix-color);
}

.suggestions .suggestions-result {
	padding: 1px 4px;
}
.suggestions .suggestions-special {
	margin: 0;
	padding: 2px 4px 4px;
	border: 1px solid var(--theme-border-color);
	border-top: 0;
	border-radius: var(--theme-box-border-radius);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
	color: var(--theme-text-color);
}
.suggestions .suggestions-result-current { background: var(--theme-highlight-background); }

/*** search form ***/
#mw-head #p-search {
	/* navbar common border bottom */
	border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
	/*background: var(--theme-background-shadow);*/
	margin: 0;
	align-self: stretch;
}
#mw-head #p-search form {
	margin: 0;
}
#mw-head #p-search .vector-search-box-inner {
	border-width: 1px;
	border-style: solid;
	border-color: var(--theme-border-color);
	border-radius: 2px;
}
#mw-head #p-search .vector-search-box-inner:hover {
	border-color: var(--theme-border-color-hover);
}
#mw-head #p-search .vector-search-box-inner:focus-within {
	border-color: var(--theme-border-color-focus);
	box-shadow: var(--theme-shadow-focus);
}
#mw-head #p-search .vector-search-box-input {
	border: 0;
	color: var(--theme-text-color);
	background: var(--theme-background-color-alt);
	box-shadow: var(--theme-shadow);
	height: 26px;
	padding: 0 26px 0 4px;
}
#mw-head #p-search .vector-search-box-input:focus {
	outline: 0;
	z-index: 1100; /* .suggestions: 1099 */
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
	z-index: 1101;
}
#mw-head #p-search .vector-search-box-input::placeholder {
	color: var(--theme-content-text-mix-color);
}
#mw-head #p-search .mw-searchButton {
	opacity: 0;
}
#mw-head #p-search .searchButton {
	width: 26px;
	min-width: unset;
	opacity: 1;
	background-image: none;
	--mask: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E search %3C/title%3E%3Cpath fill-rule='evenodd' d='M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM13 8A5 5 0 1 1 3 8a5 5 0 0 1 10 0z'/%3E%3C/svg%3E%0A") no-repeat;
	-webkit-mask: var(--mask);
	mask: var(--mask);
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
	-webkit-mask-position: center center;
	mask-position: center center;
	background-color: var(--theme-link-color);
}
.theme-dark #simpleSearch .searchButton {
	filter: invert(0);
}
#mw-head #p-search #searchform:hover .searchButton {
	background-color: var(--theme-link-color-hover);
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
	background-color: var(--theme-link-color-focus);
}

/* dropdown menu*/
#mw-head .vector-menu-dropdown .vector-menu-heading {
	/* tab label */
	position: relative;
	display: flex;
	align-items: center;
	gap: 3px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
	/* arrow icon */
	background: none;
	opacity: unset;
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: var(--theme-icon-color) transparent;
	border-width: 6px 5px 0;
	margin-top: 2px;
}
#mw-head .vector-menu-dropdown:hover .vector-menu-heading::after {
	/* .vector-menu-heading is covered by .vector-menu-checkbox, therefore we can't use .vector-menu-heading:hover::after */
	border-color: var(--theme-icon-color-hover) transparent;
}
#mw-head .vector-menu-dropdown .vector-menu-content {
	/* dropdown list body */
	border: var(--theme-dropdown-border);
	border-radius: var(--theme-box-border-radius);
	background: var(--theme-dropdown-background);
	backdrop-filter: var(--theme-dropdown-backdrop-filter);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	left: 0; /* reset */
	z-index: 10;
}
#mw-head .vector-menu-dropdown .vector-menu-content ul {
	--theme-link-color: var(--theme-text-color);
	--theme-link-color-visited: var(--theme-link-color);
	--theme-link-color-hover: var(--theme-link-color);
	padding: 4px;
}
#mw-head .vector-menu-dropdown .vector-menu-content li:hover {
	background: var(--theme-highlight-background);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a {
	display: block;
	padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
	text-decoration: none;
	color: var(--theme-link-color);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:visited {
	color: var(--theme-link-color-visited);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:hover {
	color: var(--theme-link-color-hover);
}
Retrieved from "https://secrets.warcraftwatch.com/w/index.php?title=MediaWiki:Vector.css&oldid=7373"