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.
:root {
--bg: #f8d5e4;
--bg-1: #fff5fb;
--bg-2: #ffebf5;
--surface: #ffffff;
--border: #f7d6e6;
--border-strong: #ff6b9d;
--text: #cc226c;
--text-strong: #1a0610;
--text-muted: #6b3b53;
--heading: #ff6b9d;
--link: #fd007f;
--link-hover: #fa4aa2;
--link-visited: #8a012f;
--heading-gradient-start: #ff6b9d;
--heading-gradient-end: #ff8fb0;
--primary: #ff6b9d;
--primary-hover: #ff8fb0;
--danger: #b91c1c;
--danger-hover: #dc2626;
--disabled-bg: #fff5fb;
--disabled-border: #f7d6e6;
--disabled-text: #a76a86;
--overlay: rgba( 0, 0, 0, 0.5 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 255, 107, 157, 0.15 );
--shadow-medium: rgba( 255, 107, 157, 0.22 );
--shadow-strong: rgb(252, 84, 168);
--focus-ring: rgba( 255, 107, 157, 0.2 );
--positive: #22c55e;
--negative: #ef4444;
--positive-bg: rgba( 34, 197, 94, 0.12 );
--negative-bg: rgba( 239, 68, 68, 0.12 );
--right-margin: 20px;
--surface-tint: rgba( 255, 107, 157, 0.1 );
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='dark-neutral'] {
--bg: #111214;
--bg-1: #15171a;
--bg-2: #1b1e22;
--surface: #14161a;
--border: #262a30;
--border-strong: #3a3f47;
--text: #ffe7d7e1;
--text-strong: #f1f3f5;
--text-muted: #9aa3ad;
--heading: #e5bca0fd;
--link: #e5bca0fd;
--link-hover: #e5bca0a6;
--link-visited: #e5bca0a6;
--heading-gradient-start: #e5bca0fd;
--heading-gradient-end: #f0d8c9;
--primary: #9c7a62;
--primary-hover: #c49a7f;
--danger: #ff3b6e;
--danger-hover: #ff567f;
--disabled-bg: #14161a;
--disabled-border: #262a30;
--disabled-text: #6f7782;
--overlay: rgba( 0, 0, 0, 0.6 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 0, 0, 0, 0.2 );
--shadow-medium: rgba( 0, 0, 0, 0.35 );
--shadow-strong: rgba( 0, 0, 0, 0.5 );
--focus-ring: rgba( 229, 188, 160, 0.22 );
--positive: #aaff00;
--negative: #ff3366;
--positive-bg: rgba( 170, 255, 0, 0.12 );
--negative-bg: rgba( 255, 51, 102, 0.12 );
--right-margin: 20px;
--surface-tint: rgba( 156, 122, 98, 0.18 );
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='power-light'] {
--bg: #fff0f0;
--bg-1: #fff5f5;
--bg-2: #ffebeb;
--surface: #ffffff;
--border: #f7d6d6;
--border-strong: #ff6b6b;
--text: #a00909;
--text-strong: #1a0606;
--text-muted: #6b3b3b;
--heading: #ff6b6b;
--link: #ff6b6b;
--link-hover: #fa4a4a;
--link-visited: #d63333;
--heading-gradient-start: #ff6b6b;
--heading-gradient-end: #ff8f8f;
--primary: #ff6b6b;
--primary-hover: #ff8f8f;
--danger: #b91c1c;
--danger-hover: #dc2626;
--disabled-bg: #fff5f5;
--disabled-border: #f7d6d6;
--disabled-text: #a76a6a;
--overlay: rgba( 0, 0, 0, 0.5 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 255, 107, 107, 0.15 );
--shadow-medium: rgba( 255, 107, 107, 0.22 );
--shadow-strong: rgba( 255, 107, 107, 0.3 );
--focus-ring: rgba( 255, 107, 107, 0.2 );
--positive: #22c55e;
--negative: #ef4444;
--positive-bg: rgba( 34, 197, 94, 0.12 );
--negative-bg: rgba( 239, 68, 68, 0.12 );
--right-margin: 20px;
--surface-tint: rgba( 255, 107, 107, 0.1 );
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='magic-light'] {
--bg: #f0f8ff;
--bg-1: #f5fbff;
--bg-2: #ebf5ff;
--surface: #ffffff;
--border: #d6e6f7;
--border-strong: #6ba6ff;
--text: #004196;
--text-strong: #06101a;
--text-muted: #3b536b;
--heading: #6ba6ff;
--link: #6ba6ff;
--link-hover: #4a9afa;
--link-visited: #3384d6;
--heading-gradient-start: #6ba6ff;
--heading-gradient-end: #8fc3ff;
--primary: #6ba6ff;
--primary-hover: #8fc3ff;
--danger: #b91c1c;
--danger-hover: #dc2626;
--disabled-bg: #f5fbff;
--disabled-border: #d6e6f7;
--disabled-text: #6a86a7;
--overlay: rgba( 0, 0, 0, 0.5 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 107, 166, 255, 0.15 );
--shadow-medium: rgba( 107, 166, 255, 0.22 );
--shadow-strong: rgba( 107, 166, 255, 0.3 );
--focus-ring: rgba( 107, 166, 255, 0.2 );
--positive: #22c55e;
--negative: #ef4444;
--positive-bg: rgba( 34, 197, 94, 0.12 );
--negative-bg: rgba( 239, 68, 68, 0.12 );
--right-margin: 20px;
--surface-tint: rgba( 107, 166, 255, 0.1 );
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='sense-light'] {
--bg: #f8f0ff;
--bg-1: #fbf5ff;
--bg-2: #f5ebff;
--surface: #ffffff;
--border: #e6d6f7;
--border-strong: #a66bff;
--text: #410096;
--text-strong: #10061a;
--text-muted: #533b6b;
--heading: #a66bff;
--link: #a66bff;
--link-hover: #9a4afa;
--link-visited: #8433d6;
--heading-gradient-start: #a66bff;
--heading-gradient-end: #c38fff;
--primary: #a66bff;
--primary-hover: #c38fff;
--danger: #b91c1c;
--danger-hover: #dc2626;
--disabled-bg: #fbf5ff;
--disabled-border: #e6d6f7;
--disabled-text: #866aa7;
--overlay: rgba( 0, 0, 0, 0.5 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 166, 107, 255, 0.15 );
--shadow-medium: rgba( 166, 107, 255, 0.22 );
--shadow-strong: rgba( 166, 107, 255, 0.3 );
--focus-ring: rgba( 166, 107, 255, 0.2 );
--positive: #22c55e;
--negative: #ef4444;
--positive-bg: rgba( 34, 197, 94, 0.12 );
--negative-bg: rgba( 239, 68, 68, 0.12 );
--right-margin: 20px;
--surface-tint: rgba( 166, 107, 255, 0.1 );
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='charm-light'] {
--bg: #fff7e6;
--bg-1: #fffaf0;
--bg-2: #ffefd5;
--surface: #ffffff;
--border: #f3d6b6;
--border-strong: #d97706;
--text: #a55d00;
--text-strong: #1a0f06;
--text-muted: #6b4a3b;
--heading: #b45309;
--link: #c2410c;
--link-hover: #9a3412;
--link-visited: #7c2d12;
--heading-gradient-start: #b45309;
--heading-gradient-end: #f59e0b;
--primary: #d97706;
--primary-hover: #f59e0b;
--danger: #b91c1c;
--danger-hover: #dc2626;
--disabled-bg: #fffaf0;
--disabled-border: #f3d6b6;
--disabled-text: #a77d6a;
--overlay: rgba( 0, 0, 0, 0.5 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 217, 119, 6, 0.15 );
--shadow-medium: rgba( 217, 119, 6, 0.22 );
--shadow-strong: rgba( 217, 119, 6, 0.3 );
--focus-ring: rgba( 245, 158, 11, 0.2 );
--positive: #22c55e;
--negative: #ef4444;
--positive-bg: rgba( 34, 197, 94, 0.12 );
--negative-bg: rgba( 239, 68, 68, 0.12 );
--right-margin: 20px;
--surface-tint: rgba( 217, 119, 6, 0.1 );
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='power-dark'] {
--bg: #1a0b0b;
--bg-1: #261010;
--bg-2: #331616;
--surface: #220f0f;
--border: #5a2f2f;
--border-strong: #ff6b6b;
--text: #ff9494;
--text-strong: #ffffff;
--text-muted: #b4c9c9;
--heading: #ff6b6b;
--link: #ffb488d7;
--link-hover: #ff6b6b;
--link-visited: #ff8f45d5;
--heading-gradient-start: #ff4d4d;
--heading-gradient-end: #ff8f8f;
--primary: #b30000;
--primary-hover: #e60000;
--danger: #ff3b6e;
--danger-hover: #ff567f;
--disabled-bg: #2d0b0b;
--disabled-border: #5a2f2f;
--disabled-text: #817c8a;
--overlay: rgba( 0, 0, 0, 0.6 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 255, 77, 77, 0.2 );
--shadow-medium: rgba( 255, 77, 77, 0.35 );
--shadow-strong: rgba( 255, 77, 77, 0.5 );
--focus-ring: rgba( 255, 77, 77, 0.3 );
--positive: #aaff00;
--negative: #ff3366;
--positive-bg: rgba( 170, 255, 0, 0.12 );
--negative-bg: rgba( 255, 51, 102, 0.12 );
--right-margin: 20px;
--surface-tint: #4d1f1f;
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='charm-dark'] {
--bg: #1a120b;
--bg-1: #261a10;
--bg-2: #332216;
--surface: #22170f;
--border: #5a432f;
--border-strong: #f59e0b;
--text: #fde8a3;
--text-strong: #fdf5c5;
--text-muted: #c9bdb4;
--heading: #fbbf24;
--link: #f59e0b;
--link-hover: #fbbf24;
--link-visited: #d97706;
--heading-gradient-start: #f59e0b;
--heading-gradient-end: #fbbf24;
--primary: #b45309;
--primary-hover: #d97706;
--danger: #ff3b6e;
--danger-hover: #ff567f;
--disabled-bg: #2d1a0b;
--disabled-border: #5a432f;
--disabled-text: #8a827c;
--overlay: rgba( 0, 0, 0, 0.6 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 245, 158, 11, 0.2 );
--shadow-medium: rgba( 245, 158, 11, 0.35 );
--shadow-strong: rgba( 245, 158, 11, 0.5 );
--focus-ring: rgba( 251, 191, 36, 0.3 );
--positive: #aaff00;
--negative: #ff3366;
--positive-bg: rgba( 170, 255, 0, 0.12 );
--negative-bg: rgba( 255, 51, 102, 0.12 );
--right-margin: 20px;
--surface-tint: #4d3621;
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='dark-lightBlue'] {
--bg: #040914;
--bg-1: #091427;
--bg-2: #0c1b3a;
--surface: #081226;
--border: #12243c;
--border-strong: #3a6ea6;
--text: #9ceeff;
--text-strong: #00515f;
--text-muted: #8fb2cc;
--heading: #76e2ff;
--link: #4cc9f0;
--link-hover: #76e2ff;
--link-visited: #2ea9ff;
--heading-gradient-start: #4cc9f0;
--heading-gradient-end: #76e2ff;
--primary: #2ec7ff;
--primary-hover: #76e2ff;
--danger: #ff3b6e;
--danger-hover: #ff567f;
--disabled-bg: #0b172d;
--disabled-border: #213a50;
--disabled-text: #7a90a6;
--overlay: rgba( 0, 0, 0, 0.6 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 76, 201, 240, 0.2 );
--shadow-medium: rgba( 76, 201, 240, 0.35 );
--shadow-strong: rgba( 76, 201, 240, 0.5 );
--focus-ring: rgba( 76, 201, 240, 0.3 );
--positive: #aaff00;
--negative: #ff3366;
--positive-bg: rgba( 170, 255, 0, 0.12 );
--negative-bg: rgba( 255, 51, 102, 0.12 );
--right-margin: 20px;
--surface-tint: #1a3f66;
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='dark-purple'] {
--bg: #11061c;
--bg-1: #1a0e2a;
--bg-2: #221237;
--surface: #170a26;
--border: #3a2b5a;
--border-strong: #6e48a6;
--text: #e3a8ff;
--text-strong: #eeb8ff;
--text-muted: #b8acd6;
--heading: #c557cf;
--link: #e993ffcc;
--link-hover: #e96eff;
--link-visited: #d066fd96;
--heading-gradient-start: #d03cff;
--heading-gradient-end: #e96eff;
--primary: #490268;
--primary-hover: #684374;
--danger: #ff3b6e;
--danger-hover: #ff567f;
--disabled-bg: #1a132b;
--disabled-border: #3a2b5a;
--disabled-text: #8d7bb1;
--overlay: rgba( 0, 0, 0, 0.6 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 208, 60, 255, 0.2 );
--shadow-medium: rgba( 208, 60, 255, 0.35 );
--shadow-strong: rgba( 208, 60, 255, 0.5 );
--focus-ring: rgba( 208, 60, 255, 0.3 );
--positive: #aaff00;
--negative: #ff3366;
--positive-bg: rgba( 170, 255, 0, 0.12 );
--negative-bg: rgba( 255, 51, 102, 0.12 );
--right-margin: 20px;
--surface-tint: #3a2b5a;
}
/* -----------------------------------------------------------------------------------*/
:root[data-theme='christmas'] {
--bg: #0b1a12;
--bg-1: #10261a;
--bg-2: #163322;
--surface: #0f2217;
--border: #2f5a41;
--border-strong: #d4af37;
--text: #f4f0e6;
--text-strong: #ffffff;
--text-muted: #c9c1b4;
--heading: #d4af37;
--link: #e04b4b;
--link-hover: #ff6b6b;
--link-visited: #c13f3f;
--heading-gradient-start: #d4af37;
--heading-gradient-end: #fff2b2;
--primary: #0f7a3a;
--primary-hover: #14914a;
--danger: #b91c1c;
--danger-hover: #dc2626;
--disabled-bg: #0d1c13;
--disabled-border: #2f5a41;
--disabled-text: #7c8a81;
--overlay: rgba( 0, 0, 0, 0.6 );
--overlay-light: rgb( 0 0 0 / 0.3 );
--shadow-soft: rgba( 212, 175, 55, 0.2 );
--shadow-medium: rgba( 212, 175, 55, 0.35 );
--shadow-strong: rgba( 212, 175, 55, 0.5 );
--focus-ring: rgba( 212, 175, 55, 0.3 );
--positive: #22c55e;
--negative: #ef4444;
--positive-bg: rgba( 34, 197, 94, 0.12 );
--negative-bg: rgba( 239, 68, 68, 0.12 );
--right-margin: 20px;
--surface-tint: #1f4d36;
}
/*
* =========================
* = Centering the content =
* =========================
*/
html body {
position: relative;
}
#p-personal {
right: var( --right-margin );
}
#p-search {
margin-right: var( --right-margin );
}
.suggestions {
/* We can't get around !important here due to inline CSS. */
right: var( --right-margin ) !important;
}
/* For Extension:UniversalLanguageSelector */
.imeselector {
position: fixed;
}
#content {
margin-right: var( --right-margin );
}
/*
* =======================
* = Color configuration =
* =======================
*/
/*
* ==========================
* = Standard HTML elements =
* ==========================
*/
html body {
background: var( --bg );
color: var( --text );
}
:focus {
outline: 0;
}
/*
* Headers and paragraphs
*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--heading) !important;
font-weight: 700 !important;
}
h1,
h2,
h3 {
font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
border-bottom: 1px solid var( --border-strong );
}
h4,
h5,
h6 {
border-bottom: none;
}
p {
color: var( --text );
}
b {
color: var(--heading);
}
/*
* Tables
*/
table {
background: var( --bg-1 );
color: var( --text );
}
/*
* Inputs
*/
input[ type='text' ],
input:not( [ type ] ),
select,
option {
background: var( --bg );
border: 1px solid var( --border );
color: var( --text );
}
/*
* Lists
*/
ul {
list-style-type: disc;
list-style-image: none;
}
/*
* Textarea
*/
textarea {
background: var( --bg );
border: 1px solid var( --border );
color: var( --text );
}
/*
* Pre & Code
*/
pre,
code,
tt,
kbd,
samp,
.mw-code {
background: var( --bg );
color: var( --text );
}
pre,
code,
.mw-code {
border: 1px dashed var( --border );
}
/*
* Horizontal rule
*/
hr {
background: var( --border );
color: var( --border );
}
/*
* Links
*/
a,
a.stub {
color: var( --link );
}
a:visited,
a.stub:visited {
color: var( --link-visited );
}
a:hover,
a:active,
a:focus,
a.stub:hover,
a.stub:active,
a.stub:focus {
color: var( --link-hover );
text-decoration: underline;
}
a.new,
a.new:hover,
a.new:active,
a.new:focus,
a.new:visited {
color: var( --link-visited );
}
.mw-parser-output a.external,
.mw-parser-output a.external:visited {
color: var( --link );
background: none;
padding: 0;
}
.mw-parser-output a.external:visited {
color: var( --link-visited );
}
/*
* Forms
*/
fieldset {
border: 1px solid var( --border );
}
/*
* ======================
* = Custom UI elements =
* ======================
*/
/* We add a gratuitous .oo-ui-widget in some places to increase the weight of the selectors. */
/*
* Classic UI widgets
*/
.ui-widget-overlay {
background: var( --overlay-light ) !important;
}
.ui-widget-content {
/* Have to use !important to override inline style. */
color: var( --text ) !important;
}
.ui-widget.ui-widget-content {
background: var( --bg-1 );
color: var( --text );
}
body .ui-dialog .ui-dialog-titlebar.ui-widget-header,
body .ui-dialog .ui-dialog-buttonpane.ui-widget-content {
/* Have to use !important to override another one, ugh. */
background: var( --bg-2 ) !important;
color: var( --text );
}
.ui-widget .ui-widget-header {
border: 1px solid var( --border );
}
body .ui-button.ui-widget {
background: var( --surface ) !important;
border: 1px solid var( --border ) !important;
color: var( --text );
box-shadow: none;
}
body .ui-button.ui-widget:is( :hover, :active, :focus ) {
background: var( --surface ) !important;
border: 1px solid var( --border-strong ) !important;
color: var( --text );
box-shadow: none;
}
/*
* Message dialog
*/
.oo-ui-widget.oo-ui-messageDialog-title,
.oo-ui-widget.oo-ui-messageDialog-message {
color: var( --text );
}
/*
* Panels
*/
.oo-ui-panelLayout-framed {
border: 1px solid var( --border );
}
/*
* Media search widget
*/
.oo-ui-widget.oo-ui-widget-enabled.mw-widget-mediaSearchWidget .mw-widget-mediaResultWidget .mw-widget-mediaResultWidget-overlay {
border: 1px solid var( --border );
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.mw-widget-mediaSearchWidget .mw-widget-mediaResultWidget:is( :hover, :active, :focus, .oo-ui-optionWidget-selected ) {
border: none;
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.mw-widget-mediaSearchWidget .mw-widget-mediaResultWidget:is( :hover, :active, :focus, .oo-ui-optionWidget-selected ) .mw-widget-mediaResultWidget-overlay {
border: 1px solid var( --border );
box-shadow: none;
}
/*
* File upload widget
*/
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectFileWidget.oo-ui-selectFileWidget-dropTarget {
background-color: var( --bg-1 );
}
.oo-ui-selectFileWidget-dropLabel,
.oo-ui-widget.oo-ui-labelWidget.oo-ui-inline-help {
color: var( --text );
}
/*
* Windows
*/
.oo-ui-windowManager.oo-ui-windowManager-modal .oo-ui-window.oo-ui-dialog .oo-ui-window-frame {
background-color: var( --bg-1 );
border: 1px solid var( --border );
box-shadow: none;
}
.oo-ui-windowManager.oo-ui-windowManager-floating .oo-ui-window.oo-ui-dialog .oo-ui-window-frame .oo-ui-window-foot {
outline: none;
}
/*
* Save dialog
*/
.ve-ui-mwSaveDialog-savePanel .ve-ui-mwSaveDialog-summary {
background: transparent;
}
.ve-ui-mwSaveDialog-savePanel .ve-ui-mwSaveDialog-options {
background-color: var( --bg-2 );
border: 1px solid var( --border );
}
.ve-ui-mwSaveDialog-savePanel .ve-ui-mwSaveDialog-summaryLabel,
.ve-ui-mwSaveDialog-savePanel .ve-ui-mwSaveDialog-license {
color: var( --text );
}
/*
* Tab select widget
*/
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-framed {
background-color: var( --bg-2 );
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
color: var( --text );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-framed .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabOptionWidget:is( :hover, :active, :focus, .oo-ui-optionWidget-selected ) {
background-color: var( --bg-2 );
box-shadow: none;
color: var( --text );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-frameless {
background-color: var( --bg-2 );
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget {
color: var( --text );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabSelectWidget-frameless .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tabOptionWidget:is( :hover, :active, :focus, .oo-ui-optionWidget-selected ) {
background-color: var( --bg-2 );
box-shadow: none;
color: var( --link );
}
/*
* Toolbar
*/
.oo-ui-toolbar .oo-ui-toolbar-bar {
background-color: var( --bg-1 );
color: var( --text );
}
.oo-ui-toolbar.oo-ui-toolbar-position-top .oo-ui-toolbar-bar {
border-bottom: 1px solid var( --border );
}
.oo-ui-toolbar .oo-ui-menuToolGroup {
border-left: 1px solid var( --border );
border-right: 1px solid var( --border );
}
.oo-ui-toolbar .oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-tool-active {
background-color: var( --bg-2 );
}
.oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:is( :hover, :active, :focus ) {
outline: none;
box-shadow: none;
}
.oo-ui-toolbar .oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle {
border-right: none;
outline: none;
box-shadow: none;
}
.oo-ui-toolbar .oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle:is( :hover, :active, :focus ) {
border-right: none;
outline: none;
box-shadow: none;
}
.oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:is( :hover, :active, :focus ) {
background-color: var( --bg-2 );
color: var( --text );
}
.oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link {
background-color: var( --bg-2 );
color: var( --text );
}
.oo-ui-toolbar .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle {
border-right: none;
outline: none;
box-shadow: none;
}
.oo-ui-toolbar .oo-ui-popupToolGroup.oo-ui-widget-enabled .oo-ui-popupToolGroup-handle:is( :hover, :active, :focus ) {
background-color: var( --bg-2 );
color: var( --text );
}
.oo-ui-toolbar .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active .oo-ui-popupToolGroup-handle {
background-color: var( --bg-2 );
color: var( --text );
}
.oo-ui-toolbar .oo-ui-popupToolGroup-tools {
background-color: var( --bg );
border: 1px solid var( --border );
}
.oo-ui-toolbar .oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:is( :hover, :active, :focus ) {
background-color: var( --bg );
color: var( --text );
}
.oo-ui-toolbar .oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
color: var( --text );
}
.oo-ui-toolbar .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary .oo-ui-tool-link {
background: var( --disabled-bg );
border: 1px solid var( --disabled-border ); /* Disabled border */
color: var( --disabled-text );
box-shadow: none;
}
.oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-tool-link {
background: var( --primary );
border: 1px solid var( --primary );
color: var( --text-strong );
box-shadow: none;
}
.oo-ui-toolbar .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-tool-link:is( :hover, :active, :focus ) {
background: var( --primary-hover );
border: 1px solid var( --primary-hover );
color: var( --text-strong );
box-shadow: none;
}
/*
* Text input
*/
/* Note that we have to use some weird combinations of hover on the parent
and focus on the child, to correctly override the default styles. */
/* The search input has to be special-cased as it doesn't use either of the
mw-ui or oo-ui classes. */
.mw-ui-input:not( :disabled ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --bg );
border: 1px solid var( --border );
color: var( --text );
}
.mw-ui-input:not( :disabled ):is( :hover, :active, :focus ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-textInputWidget:is( *, :hover ) .oo-ui-inputWidget-input:is( :hover, :active, :focus ) {
border: 1px solid var( --border-strong );
box-shadow: none;
outline: none;
outline-offset: 0;
}
.mw-ui-input:not( :disabled )::placeholder,
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-textInputWidget .oo-ui-inputWidget-input::placeholder {
color: var( --text-muted );
}
.mw-ui-input:disabled,
.oo-ui-widget.oo-ui-widget-disabled.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background: var( --bg-1 );
border: 1px solid var( --border );
color: var( --text-muted );
}
/*
* Buttons
*/
/* Normal buttons with frame */
.mw-ui-button:not( :disabled ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed .oo-ui-buttonElement-button {
background: var( --surface );
border: 1px solid var( --border );
color: var( --text );
box-shadow: none;
}
.mw-ui-button:not( :disabled ):is( :hover, :active, :focus ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
background: var( --surface );
border-color: var( --border-strong );
color: var( --text );
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-buttonElement-active .oo-ui-buttonElement-button {
background: var( --primary );
border-color: var( --primary );
color: var( --text-strong );
box-shadow: none;
}
/* "Primary" and "progressive" buttons with frame */
.mw-ui-button:is( .mw-ui-primary,.mw-ui-progressive ):not( :disabled ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button,
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button,
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
background: var( --primary );
border: 1px solid var( --primary );
color: var( --text-strong );
box-shadow: none;
}
.mw-ui-button:is( .mw-ui-primary,.mw-ui-primary ):not( :disabled ):is( :hover, :active, :focus ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:is( :hover, :active, :focus ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button:is( :hover, :active, :focus ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
background: var( --primary-hover );
border: 1px solid var( --primary-hover );
color: var( --text-strong );
box-shadow: none;
}
/* "Destructive" buttons with frame */
.mw-ui-button.mw-ui-destructive:not( :disabled ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button {
background: var( --bg-1 );
border: 1px solid var( --danger );
color: var( --danger );
box-shadow: none;
}
.mw-ui-button.mw-ui-destructive:not( :disabled ):is( :hover, :active, :focus ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-framed.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
background: var( --bg-2 );
border: 1px solid var( --danger-hover );
color: var( --danger );
box-shadow: none;
}
/* Disabled buttons with frame */
.mw-ui-button:disabled,
.oo-ui-widget.oo-ui-widget-disabled.oo-ui-buttonElement-framed .oo-ui-buttonElement-button {
background: var( --disabled-bg );
border: 1px solid var( --disabled-border );
color: var( --disabled-text );
box-shadow: none;
}
/* Normal buttons without frame */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
background: transparent;
border: 0;
color: var( --text );
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
background: transparent;
border: 0;
color: var( --text );
box-shadow: none;
text-decoration: underline;
}
/* "Primary" and "progressive" buttons without frame */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button,
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
background: transparent;
border: 0;
color: var( --link );
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-primary .oo-ui-buttonElement-button:is( :hover, :active, :focus ),
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
background: transparent;
border: 0;
color: var( --link-hover );
box-shadow: none;
text-decoration: underline;
}
/* "Destructive" buttons without frame */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button {
background: transparent;
border: 0;
color: var( --danger );
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
background: transparent;
border: 0;
color: var( --danger );
box-shadow: none;
text-decoration: underline;
}
/* Disabled buttons without frame */
.oo-ui-widget.oo-ui-widget-disabled.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
background: transparent;
border: 0;
color: var( --disabled-text );
box-shadow: none;
}
/* Close button of some dialogs */
.oo-ui-processDialog-actions-safe .oo-ui-widget.oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) .oo-ui-buttonElement-button {
background-color: transparent;
border: none;
}
.oo-ui-processDialog-actions-safe .oo-ui-widget.oo-ui-widget-enabled.oo-ui-iconElement:not( .oo-ui-labelElement ) .oo-ui-buttonElement-button:is( :hover, :active, :focus ) {
background-color: var( --surface );
border: none;
}
/* Button select widget */
.oo-ui-widget.oo-ui-buttonSelectWidget.oo-ui-widget-enabled:is( :hover, :active, :focus ) .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
border-color: var( --primary );
box-shadow: none;
outline: none;
}
/*
* Dropdown Menus
*/
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownInputWidget:is( *, :hover ) {
background: transparent;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget .oo-ui-dropdownWidget-handle {
background: var( --bg );
border: 1px solid var( --border );
color: var( --text );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget .oo-ui-dropdownWidget-handle:is( :hover, :active, :focus ) {
background: var( --bg );
border: 1px solid var( --border-strong );
color: var( --text );
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
background: var( --bg );
border: 1px solid var( --border );
color: var( --text );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle:is( :hover, :active, :focus ) {
background: var( --bg );
border: 1px solid var( --border-strong );
color: var( --text );
box-shadow: none;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget {
background: var( --bg );
border: 1px solid var( --border );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget {
background: var( --bg );
color: var( --text );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --bg-1 );
color: var( --text );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted,
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted {
background: var( --bg-2 );
color: var( --text-strong );
}
/*
* Checkboxes
*/
/* Make sure the catch-all filter: invert(100%) further down doesn't affect these. */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ] + span {
filter: none;
background-color: var( --bg );
border-color: var( --border );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ]:checked + span {
filter: none;
background-color: var( --primary );
border-color: var( --primary );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ]:hover + span {
filter: none;
background-color: var( --bg );
border-color: var( --primary );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ]:checked:hover + span {
filter: none;
background-color: var( --primary-hover );
border-color: var( --primary-hover );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-checkboxInputWidget[ type='checkbox' ]:focus + span {
box-shadow: none;
}
/*
* Radio buttons
*/
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-radioInputWidget [ type='radio' ] + span {
background-color: var( --bg );
border-color: var( --border );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-radioInputWidget [ type='radio' ]:checked + span {
border-color: var( --primary-hover );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-radioInputWidget [ type='radio' ]:hover + span {
border-color: var( --primary );
}
/*
* Date input & Calendar
*/
.oo-ui-widget-enabled.mw-widget-dateInputWidget .mw-widget-dateInputWidget-handle {
background: var( --bg );
border: 1px solid var( --border );
color: var( --text );
transition: border-color 250ms;
}
.oo-ui-widget-enabled.mw-widget-dateInputWidget-empty .mw-widget-dateInputWidget-handle {
color: var( --text-muted );
}
.oo-ui-widget-enabled.mw-widget-dateInputWidget .mw-widget-dateInputWidget-handle:is( :hover, :active, :focus ) {
background: var( --bg );
color: var( --text );
border: 1px solid var( --border-strong );
box-shadow: none;
transition: border-color 250ms;
}
.oo-ui-widget.oo-ui-widget-enabled.mw-widget-dateInputWidget .mw-widget-dateInputWidget-handle:is( :hover, :active, :focus ) {
border: 1px solid var( --border );
}
.oo-ui-widget-enabled.mw-widget-dateInputWidget-empty .mw-widget-dateInputWidget-handle:is( :hover, :active, :focus ) {
color: var( --text-muted );
}
.oo-ui-widget-enabled.mw-widget-calendarWidget {
border: 1px solid var( --border );
/* This isn't color related, but it really looks much better with this */
padding: 3px;
}
.oo-ui-widget-enabled.mw-widget-dateInputWidget-calendar {
background: var( --bg );
}
.mw-widget-calendarWidget-item.mw-widget-calendarWidget-day,
.mw-widget-calendarWidget-item.mw-widget-calendarWidget-month,
.mw-widget-calendarWidget-item.mw-widget-calendarWidget-year {
color: var( --text );
}
.mw-widget-calendarWidget-item.mw-widget-calendarWidget-day.mw-widget-calendarWidget-day-additional {
color: var( --text-muted );
}
.mw-widget-calendarWidget-item.mw-widget-calendarWidget-day:hover,
.mw-widget-calendarWidget-item.mw-widget-calendarWidget-month:hover,
.mw-widget-calendarWidget-item.mw-widget-calendarWidget-year:hover {
background: var( --primary );
}
.mw-widget-calendarWidget-item-selected.mw-widget-calendarWidget-day,
.mw-widget-calendarWidget-item-selected.mw-widget-calendarWidget-month,
.mw-widget-calendarWidget-item-selected.mw-widget-calendarWidget-year {
background: var( --primary-hover );
}
.mw-widget-calendarWidget-item.mw-widget-calendarWidget-day.mw-widget-calendarWidget-day-today {
box-shadow: 0 0 0 1px var( --border-strong );
}
/*
* Multiselect widget (see Special:RecentChanges / Special:Watchlist)
*/
/* Overall background, needs to be set because some descendants are transparent */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined {
background: var( --bg-2 );
}
/* Top part containing the selected tags */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
background: var( --bg-2 );
border: 1px solid var( --border );
}
/* Labels in the top part, like a title */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle label {
color: var( --text );
}
/* The added tag items */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagItemWidget {
background: var( --surface );
border: 1px solid var( --border );
color: var( --text );
}
/* The added tag items, focused */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagItemWidget:focus {
box-shadow: none;
}
/* Currently selected tag item */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagItemWidget.mw-rcfilters-ui-tagItemWidget-selected {
background: var( --primary );
border: 1px solid var( --primary );
color: var( --text-strong );
}
/* The dropdown handle */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
background: var( --bg-2 );
}
/* The buttons on the bottom right */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget {
border: 1px solid var( --border );
}
/*
* Filter selection table (see Special:RecentChanges / Special:Watchlist)
*/
/* Top header */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-table.mw-rcfilters-ui-filterMenuHeaderWidget-header {
background: var( --bg-2 );
border-bottom: 1px solid var( --border );
}
/* Top header title */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-table .mw-rcfilters-ui-filterMenuHeaderWidget-title {
color: var( --text );
}
/* Section header */
.section-lead{
color: var( --text )!important;
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-filterMenuSectionOptionWidget {
background: var( --bg-2 );
}
/* Section header labels */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-filterMenuSectionOptionWidget .oo-ui-labelElement-label {
color: var( --text );
}
/* Filters table, option */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.oo-ui-widget-enabled.mw-rcfilters-ui-filterMenuOptionWidget {
background: var( --bg-2 );
border-bottom: 1px solid var( --bg );
}
/* Filters table, option labels */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.oo-ui-widget-enabled.mw-rcfilters-ui-filterMenuOptionWidget .oo-ui-labelElement-label {
color: var( --text );
}
/* Filters table, option, highlighted */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --bg-2 );
}
/* Filters table, option labels, highlighted */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-optionWidget-highlighted .oo-ui-labelElement-label {
color: var( --text );
}
/* Filters table, option, muted */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted {
background: var( --bg-1 );
}
/* Filters table, option labels, muted */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .oo-ui-widget.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .oo-ui-labelElement-label {
color: var( --text-muted );
}
/* Footer */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-menuSelectWidget-footer {
background: var( --bg );
border-top: 1px solid var( --border );
}
/* Footer, labels */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-menuSelectWidget .mw-rcfilters-ui-menuSelectWidget-footer .oo-ui-labelElement-label {
color: var( --text );
}
/*
* Popup widget & anchor
*/
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget .oo-ui-popupWidget-popup {
background: var( --bg );
border: 1px solid var( --border );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget .oo-ui-popupWidget-popup label {
color: var( --text );
}
/* Fill color for the bottom anchor */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
border-top-color: var( --bg );
}
/* Fill color for the top anchor */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
border-bottom-color: var( --bg );
}
/* Border color for the bottom anchor */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before {
border-top-color: var( --border );
}
/* Border color for the top anchor */
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
border-bottom-color: var( --border );
}
/*
* Notification pop-up
*/
.skin-vector .mw-notification {
background: var( --bg );
color: var( --text );
}
/*
* Miscellaneous
*/
.oo-ui-labelWidget.oo-ui-inline-help {
color: var( --text );
}
.oo-ui-widget.ve-ui-targetWidget-focused {
border: 1px solid var( --border-strong );
box-shadow: none;
}
.oo-ui-widget.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-widget.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
background-color: var( --bg-2 );
color: var( --text );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-selectWidget .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
background: var( --bg-2 );
}
.oo-ui-widget.ve-ui-targetWidget:not( .oo-ui-pendingElement-pending ) {
background: transparent;
}
.mw-message-box-warning.mw-message-box {
background-color: var( --bg-2 );
border: 1px solid var( --border );
color: var( --text );
}
.mw-message-box-error.mw-message-box {
background-color: var( --bg-2 );
border: 1px solid var( --border );
color: var( --text );
}
/* Kind of a catch-all to make icons dark */
.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
filter: invert( 100% );
}
/*
* ==================================
* = Parts of the main MediaWiki UI =
* ==================================
*/
#mw-page-base {
background: transparent;
}
/*
* Head / Tabs
*/
/* The "Not logged in" text where the username would be */
#mw-head #p-personal #pt-anonuserpage {
color: var( --text );
background-image: none;
}
#mw-head .vector-menu-tabs {
background-image: none;
border: 0;
padding: 0;
}
#mw-head .vector-menu-tabs li {
background: transparent;
}
#mw-head .vector-menu-tabs li.selected {
background: linear-gradient( var( --bg ), 30%, var( --bg-1 ) );
}
#mw-head .vector-menu-tabs li a,
#mw-head .vector-menu-tabs li a:visited {
background-image: none;
border-left: 1px solid var( --border );
border-right: 1px solid var( --border );
margin-right: -1px;
color: var( --link );
}
#mw-head .vector-menu-tabs li.selected a,
#mw-head .vector-menu-tabs li.selected a:visited {
color: var( --text );
}
#mw-head .vector-menu-tabs li.new a,
#mw-head .vector-menu-tabs li.new a:visited {
color: var( --link-visited );
}
/*
* The "More [actions]" drop-down pseudo-tab
*/
#mw-head .vector-menu-dropdown .vector-menu-heading {
color: var( --link );
background-image: none;
border-right: 1px solid var( --border );
}
/* Make the "More" menu arrow visible on MW 1.39+ */
.vector-menu-dropdown .vector-menu-heading::after {
filter: invert( 100% );
}
/* Also make the "More" text itself the same color as other tabs, for consistency (MW 1.39+) */
.vector-menu-dropdown .vector-menu-heading {
color: var( --link );
}
/* Disable the ugly dotted outline when focused */
#mw-head .vector-menu-dropdown-noicon input.vector-menu-checkbox:focus + h3 {
outline: 0;
}
#mw-head .vector-menu-dropdown .vector-menu-content {
background: var( --bg );
border: 1px solid var( --border );
}
#mw-head .vector-menu-dropdown .vector-menu-content li a {
color: var( --link );
margin: 10px;
}
.mw-heading2{
border-bottom-color: var(--border-strong);
}
/* Arrow icon */
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
filter: invert( 100% );
}
/*
* Search input field
*/
#simpleSearch #searchInput {
background: var( --bg-1 );
border: 1px solid var( --border );
color: var( --text );
}
#simpleSearch #searchInput:focus,
#simpleSearch:hover #searchInput,
#simpleSearch:hover #searchInput:focus {
border: 1px solid var( --border-strong );
box-shadow: none;
}
#searchInput::placeholder {
color: var( --text-muted );
}
#simpleSearch #searchButton {
filter: invert( 100% );
}
/*
* Search suggestions
*/
/* We need to override inline CSS, so duplicate the class to increase matching weight */
.suggestions-results.suggestions-results {
background: var( --bg );
border: 1px solid var( --border );
}
.suggestions .suggestions-results .mw-searchSuggest-link .suggestions-result {
color: var( --text );
}
.suggestions .suggestions-results a.mw-searchSuggest-link:is( .suggestions-result-current, .suggestions-result:is( :hover, :active, :focus ) ) {
background: var( --bg-1 );
}
.suggestions a.mw-searchSuggest-link .suggestions-special {
background: var( --bg );
border: 1px solid var( --border );
}
.suggestions a.mw-searchSuggest-link .suggestions-special:is( .suggestions-result-current, :hover, :active, :focus ) {
background: var( --bg-1 );
}
.suggestions a.mw-searchSuggest-link .suggestions-special .special-label {
color: var( --text-muted );
}
.suggestions a.mw-searchSuggest-link .suggestions-special .special-query {
color: var( --text );
}
/*
* mediawiki.userSuggest, the username suggestion widget used in various places
*/
div.suggestions-result {
color: var( --text );
}
/*
* Advanced search
*/
#powersearch #mw-searchoptions {
background: var( --bg );
border: 1px solid var( --border );
}
/*
* Left-side panel
*/
#mw-panel .vector-menu-portal .vector-menu-heading {
color: var( --text );
background: var(--bg);
border-bottom: 1pt dotted var( --border );
}
#mw-panel .vector-menu-portal .vector-menu-content .vector-menu-content-list li a {
color: var( --link );
}
#mw-panel .vector-menu-portal .vector-menu-content .vector-menu-content-list li a:visited {
color: var( --link-visited );
}
#mw-panel .vector-menu-portal .vector-menu-content .vector-menu-content-list li a:is( :hover, :active, :focus ) {
color: var( --link-hover );
text-decoration: underline;
}
/*
* Main content
*/
.mw-body {
border: 1px solid var( --border );
background: var( --bg-1 );
color: var( --text );
padding: 1em;
}
/*
* Footer
*/
#footer ul li {
color: var( --text-muted );
}
/* New, Codex style "Powered by MediaWiki" button in MW 1.43+ */
#footer-icons li:not( #footer-poweredbyico ) a {
background: transparent;
}
#footer-poweredbyico a {
/* Force this to have the background span the entire "button", which is more like what's
* intended than the default display style
*/
display: inline-block;
}
/*
* ==============================
* = Regular wiki page contents =
* ==============================
*/
/*
* Table of Contents
*/
#toc,
.toc,
.toccolours {
border: 1px solid var( --border );
border-radius: 50px;
background: var( --bg );
}
.tocnumber {
color: var( --link );
}
.toctogglelabel {
color: var( --link );
}
/*
* Wikitable
*/
table.wikitable {
padding: 1em;
background: var(--bg);
border: 1px solid var(--border);
border-collapse: collapse;
color: var(--text);
}
table.wikitable caption {
margin-left: inherit;
margin-right: inherit;
background: var(--bg);
border: 1px solid var(--border);
font-weight: bold;
}
table.wikitable :is(th, td) {
background: var(--bg);
border: 1px solid var(--border);
padding: 0.2em;
}
table.wikitable th {
background: var(--bg-1);
text-align: center;
}
table.wikitable tr :is(th, td) {
border: 1px solid var(--border);
color: var(--text);
}
table.wikitable tr th {
background: var(--bg);
color: var(--text);
}
table.wikitable code {
background: transparent;
border: 0;
color: var( --text );
}
.mw-collapsible-text{
color: var(--link)!important;
}
/*--------------------------*/
.wikitable {
width: 100%;
border-collapse: collapse;
background: var(--bg-1);
border: 2px solid var(--border);
border-radius: 20px;
margin: 20px 0;
box-shadow: 0 6px 24px var(--shadow-soft);
overflow: hidden;
}
.wikitable th {
background: var(--primary);
color: var(--text-strong);
font-weight: 700;
padding: 16px 20px;
text-align: left;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
border: none;
}
.wikitable th:first-child {
border-top-left-radius: 20px;
}
.wikitable th:last-child {
border-top-right-radius: 20px;
}
.wikitable td {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
vertical-align: top;
}
.wikitable tr:nth-child(even) td {
background: var(--bg-1);
}
.wikitable tr:hover td {
background: var(--bg-1);
}
.wikitable tr:last-child td {
border-bottom: none;
}
.wikitable tr:last-child td:first-child {
border-bottom-left-radius: 20px;
}
.wikitable tr:last-child td:last-child {
border-bottom-right-radius: 20px;
}
/*
* Datatable
*/
.mw-datatable-is-ascending a,
.mw-datatable-is-descending a {
background: transparent;
padding-left: 0;
}
.mw-datatable-is-ascending a::before {
content: '\2b9d \00a0';
}
.mw-datatable-is-descending a::before {
content: '\2b9f \00a0';
}
.mw-datatable th {
background: var( --bg-1 );
border: 1px solid var( --border );
}
.mw-datatable td {
background: var( --bg );
border: 1px solid var( --border );
}
.mw-datatable tr:hover td {
background: var( --bg-1 );
}
/*
* Thumbnails
*/
.thumb .thumbinner {
background: var( --bg );
border: 1px solid var( --border );
}
.thumb .thumbinner .thumbimage {
background: var( --bg );
border: 1px solid var( --border );
}
/*
* User message
*/
.usermessage {
background: var( --bg );
border: 1px solid var( --border );
color: var( --text );
}
/*
* Galleries
*/
li.gallerybox div.thumb {
background: var( --bg );
border: 1px solid var( --border );
}
/*
* Categories
*/
.catlinks {
border: 1px solid var( --border );
background: var( --bg );
}
/*
* Blockquote
*/
.vector-body blockquote {
border-left: 4px solid var( --bg-2 );
}
/*
* =========================
* = Special page contents =
* =========================
*/
#contentSub,
#contentSub2 {
color: var( --text-muted );
}
/*
* Create account
*/
.mw-createacct-benefits-container {
display: none;
}
/*
* Login
*/
/* Don't be fooled by the button's id; it's in the login page */
#mw-createaccount-join {
background: var( --surface );
border: 1px solid var( --border );
color: var( --text );
}
#mw-createaccount-join:is( :hover, :active, :focus ) {
background: var( --surface );
border: 1px solid var( --border-strong );
color: var( --text );
box-shadow: none;
}
/*
* Search results
*/
.mw-search-profile-tabs {
background: var( --bg );
border: 1px solid var( --border );
}
.search-types .current a {
color: var( --text );
}
.mw-search-result-data {
color: var( --text-muted );
}
/*
* Editing
*/
.editOptions {
background: var( --bg-2 );
border: 1px solid var( --border );
color: var( --text );
}
/*
* File page
*/
#filetoc {
background: var( --bg );
border: 1px solid var( --border );
}
table.mw_metadata :is( th, td ) {
border: 1px solid var( --border );
}
table.mw_metadata th {
background: var( --bg );
}
table.mw_metadata td {
background: transparent;
}
.filehistory a img,
#file img:hover {
background: transparent;
}
/*
* History, Changes, Watchlist, Contributions
*/
#mw-indicator-mw-helplink a {
background-image: none;
padding-left: 0;
}
.mw-rcfilters-ui-watchlistTopSectionWidget .mw-rcfilters-ui-watchlistTopSectionWidget-separator {
border-top: 2px solid var( --border );
}
.oo-ui-widget.oo-ui-widget-enabled.oo-ui-dropdownWidget.mw-rcfilters-ui-rclToOrFromWidget .oo-ui-dropdownWidget-handle:is( *, :hover, :active, :focus ) {
background: transparent;
border: 0;
}
#pagehistory li.selected {
background: var( --bg-1 );
color: var( --text );
}
.mw-plusminus-pos {
color: var( --positive );
}
.mw-plusminus-neg {
color: var( --negative );
}
.autocomment,
.autocomment a,
.autocomment a:visited {
color: var( --text-muted );
}
/* Duplicate class selector to add weight */
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend.mw-changeslist-legend {
background: var( --bg );
border: 1px solid var( --border );
}
/*
* Revision differences
*/
table.diff,
td.diff-otitle,
td.diff-ntitle {
background: transparent;
}
td.diff-addedline {
background: var( --bg );
border-color: var( --positive );
}
td.diff-deletedline {
background: var( --bg );
border-color: var( --negative );
}
td.diff-context {
background: transparent;
border-color: var( --border );
color: var( --text );
}
td.diff-addedline .diffchange,
td.diff-deletedline .diffchange {
border-radius: 0.33em;
padding: 0.25em;
}
td.diff-addedline .diffchange {
background: var( --positive-bg );
color: var( --text-strong );
}
td.diff-deletedline .diffchange {
background: var( --negative-bg );
color: var( --text-strong );
}
/*
* Preferences
*/
.mw-prefs-buttons {
background: var( --bg-1 );
}
/*
* The legend box on Special:RecentChanges
*/
.mw-changeslist-legend {
background-color: transparent;
}
/*
* ===============================
* = Extension-specific elements =
* ===============================
*/
/*
* WikiEditor
*/
.wikiEditor-ui .wikiEditor-ui-toolbar {
background: var( --bg-2 );
}
.wikiEditor-ui .wikiEditor-ui-toolbar .group .label,
.wikiEditor-ui .wikiEditor-ui-toolbar .group .tool-select .label {
color: var( --text );
}
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a {
color: var( --link );
}
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a.current {
color: var( --link-hover );
}
.wikiEditor-ui .wikiEditor-ui-toolbar .tabs span.tab a::before,
.wikiEditor-ui .wikiEditor-ui-toolbar .group .tool-select .label::after {
filter: invert( 100% );
}
.wikiEditor-ui .wikiEditor-ui-toolbar .group .tool-select .options .option {
background: var( --bg-2 );
color: var( --text );
}
.wikiEditor-ui .wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
background: var( --bg-2 );
}
.wikiEditor-ui .wikiEditor-ui-toolbar .booklet .index .current,
.wikiEditor-ui .wikiEditor-ui-toolbar .booklet .index :hover,
.wikiEditor-ui .wikiEditor-ui-toolbar .page-characters div span,
.wikiEditor-ui .wikiEditor-ui-toolbar .page-characters div span:hover {
background: var( --bg-2 );
color: var( --text );
}
.wikiEditor-ui .wikiEditor-ui-toolbar .page-table td {
color: var( --text );
}
/*
* Spoilers
*/
.spoilers .spoilers-button {
background: var( --surface );
border: 1px solid var( --border );
color: var( --text );
}
.spoilers .spoilers-button:is( :hover, :active, :focus ) {
background: var( --surface );
border: 1px solid var( --border );
color: var( --text );
}
.spoilers .spoilers-body {
background: var( --bg );
border: 1px solid var( --border );
color: var( --text );
}
/*
* ProblemReports
*/
div#reportProblemForm {
background-color: transparent;
}
body .ui-dialog .ui-icon-closethick {
filter: invert( 100% );
}
/* ---------------------Cores para overlay do sidebar ---------------*/
body.sidebar-open::before {
background: var( --overlay );
}
/* Cores para menu mobile (hamburger) */
.mobile-hamburger-menu {
background: linear-gradient( 135deg, var( --primary ), var( --primary-hover ) );
box-shadow: 0 6px 20px var( --shadow-soft );
}
.mobile-hamburger-menu:hover {
box-shadow: 0 8px 30px var( --shadow-strong );
}
.mobile-hamburger-menu span {
background: black ;
}
body.skin-vector-legacy .user-menu-container {
background: transparent;
}
body.skin-vector-legacy .user-menu-header,
.personal-menu-header {
color: var( --heading );
background: var( --bg-1 );
box-shadow: 0 6px 20px var( --shadow-soft );
border-color: var( --border-strong );
}
body.skin-vector-legacy .user-menu-header:hover,
.personal-menu-header:hover {
background: var( --surface );
}
body.skin-vector-legacy .user-menu-content,
.personal-menu-content {
background: var( --surface );
border-color: var( --border-strong );
box-shadow: 0 6px 20px var( --shadow-soft );
}
body.skin-vector-legacy .user-menu-list li {
border-bottom-color: var( --border );
}
body.skin-vector-legacy .user-menu-list a {
color: var( --link );
border-left-color: transparent;
}
body.skin-vector-legacy .user-menu-list a:hover {
background: var( --surface );
color: var( --link-hover );
border-left-color: var( --border-strong );
}
/* Cores para alternador de tema */
#pt-theme-toggle a {
background: var( --surface );
color: var( --link );
border-color: var( --border-strong );
box-shadow: 0 6px 20px var( --shadow-soft );
}
/* Cores para Back to Top */
.btt-button {
background: linear-gradient( 135deg, var( --primary ) 0%, var( --primary-hover ) 100% );
box-shadow: 0 4px 20px var( --shadow-soft );
}
.btt-button:hover {
box-shadow: 0 8px 30px var( --shadow-strong );
background: linear-gradient( 135deg, var( --primary-hover ) 0%, var( --primary ) 100% );
}
.btt-button:active {
box-shadow: 0 4px 15px var( --shadow-strong );
}
.btt-button::before {
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: var( --text-strong );
}
.btt-button:hover::before {
border-bottom-color: var( --text );
}
@keyframes btt-pulse {
0% { box-shadow: 0 4px 20px var( --shadow-soft ); }
50% { box-shadow: 0 4px 25px var( --shadow-strong ); }
100% { box-shadow: 0 4px 20px var( --shadow-soft ); }
}
@media (prefers-contrast: high) {
.btt-button {
background: var( --text-strong );
border-color: var( --text-strong );
}
.btt-button::before {
border-bottom-color: var( --text-strong );
}
.btt-button:hover {
background: var( --bg-2 );
}
}
/*------------------ Cores para cabeçalho e base -----------------------*/
#mw-head {
border-bottom-color: var( --border-strong );
background-color: var( --surface );
border-color: var( --border );
box-shadow: 0 2px 6px var( --shadow-medium );
}
/* Cores para conteúdo principal */
body.skin-vector-legacy #content,
body.skin-vector-legacy .mw-body {
border-color: var( --border ) !important;
box-shadow: 0 0px 20px var( --shadow-strong ) !important;
}
/* Cores para sidebar */
body.skin-vector-legacy #mw-panel {
background: var( --surface );
border-right-color: var( --border-strong );
box-shadow: 0 4px 6px var( --shadow-strong ), 0 1px 0 var( --shadow-soft ) inset;
}
body.skin-vector-legacy #mw-panel .vector-menu-portal,
body.skin-vector-legacy #mw-panel .portal {
border-color: var( --border );
background: var( --bg-1 );
}
/* Cores para headings dos portais */
body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading,
body.skin-vector-legacy #mw-panel .portal h3 {
color: var( --text-strong ) !important;
background: linear-gradient( 135deg, var( --primary ), var( --primary-hover ) );
border-bottom-color: var( --border );
text-shadow: 0 1px 2px var( --text-strong ) !important;
box-shadow: 0 6px 10px var( --shadow-strong ), 0 1px 0 var( --shadow-soft ) inset;
}
body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading:hover,
body.skin-vector-legacy #mw-panel .portal h3:hover {
background: linear-gradient( 135deg, var( --primary-hover ), var( --primary ) );
}
/*---------- Cores para itens e links da sidebar -------------- */
body.skin-vector-legacy #mw-panel .vector-menu-content ul,
body.skin-vector-legacy #mw-panel .portal .body ul {
background: var( --bg-1 );
}
body.skin-vector-legacy #mw-panel .vector-menu-content li,
body.skin-vector-legacy #mw-panel .portal .body li {
border-bottom-color: var( --border );
}
body.skin-vector-legacy #mw-panel .vector-menu-content a,
body.skin-vector-legacy #mw-panel .portal .body a {
color: var( --link );
border-left-color: transparent;
}
body.skin-vector-legacy #mw-panel .vector-menu-content a:hover,
body.skin-vector-legacy #mw-panel .portal .body a:hover {
color: var( --link-hover );
background: var( --surface );
border-left-color: var( --border-strong );
}
/* Cores para scrollbar */
body.skin-vector-legacy #mw-panel::-webkit-scrollbar-track { background: var( --surface ); }
body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb { background: var( --primary ); }
body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb:hover { background: var( --primary ); }
/* Cores para logo */
body.skin-vector-legacy #p-logo a {
background-color: var( --surface );
border-color: var( --border );
box-shadow: 0 8px 20px var( --shadow-medium );
}
body.skin-vector-legacy #p-logo a:hover {
border-color: var( --primary );
box-shadow: 0 8px 24px var( --shadow-medium );
}
/* 🎨 Firefox */
html {
scrollbar-width: thin; /* width: auto | thin | none */
scrollbar-color: var(--text) transparent; /* thumb color and track color */
}
/* 🎨 Chrome, Edge, Safari (WebKit/Blink) */
::-webkit-scrollbar {
width: 8px; /* width of vertical scrollbar */
height: 8px; /* height of horizontal scrollbar */
}
::-webkit-scrollbar-track {
background: transparent; /* background of the track */
}
::-webkit-scrollbar-thumb {
background-color: var(--text); /* color of the thumb */
border-radius: 4px; /* rounded corners */
border: 2px solid transparent; /* inner spacing */
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--text); /* keep the same color on hover */
}
::-webkit-scrollbar-corner {
background: transparent; /* bottom-right corner where scrollbars meet */
}
/*------------- Cores para menu pessoal (top-right)---------------- */
body.skin-vector-legacy
#pt-userpage a,
#pt-mytalk a,
#pt-preferences a,
#pt-watchlist a,
#pt-mycontris a,
#pt-logout a {
color: var( --link ) !important;
border-left-color: transparent !important;
}
body.skin-vector-legacy
#pt-userpage a:hover,
#pt-mytalk a:hover,
#pt-preferences a:hover,
#pt-watchlist a:hover,
#pt-mycontris a:hover,
#pt-logout a:hover {
color: var( --text-strong ) !important;
background-color: var( --primary ) !important;
border-color: var( --primary ) !important;
border-left-color: transparent !important;
}
body.skin-vector-legacy #p-personal {
background: var( --surface );
border-color: var( --border-strong );
box-shadow: 0 6px 20px var( --shadow-soft );
}
body.skin-vector-legacy #p-personal li {
border-bottom-color: var( --border );
}
body.skin-vector-legacy #p-personal a {
color: var( --link );
border-left-color: transparent;
}
body.skin-vector-legacy #p-personal a:hover {
background: var( --surface );
color: var( --link-hover );
border-left-color: var( --border-strong );
}
/* Cores para formulários */
#searchInput,
Input::placeholder {
color: var( --link );
border-color: var( --border-strong ) !important;
}
input[type="text"],
input[type="search"],
textarea,
select {
border-color: var( --border ) !important;
}
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
border-color: var( --primary ) !important;
box-shadow: 0 0 0 3px var( --focus-ring ) !important;
}
/* Cores para botões e abas */
#ca-view a,
#ca-viewsource a,
#ca-ve-edit a,
#ca-edit a,
#ca-history a,
#p-cactions .vector-menu-heading,
#ca-delete a,
#ca-move a,
#ca-protect a {
background: var( --surface ) !important;
color: var( --link ) !important;
border-color: var( --border ) !important;
box-shadow: 0 2px 8px var( --shadow-soft ) !important;
}
#ca-view a:hover,
#ca-viewsource a:hover,
#ca-edit a:hover,
#ca-history a:hover,
#ca-watch a:hover,
#ca-unwatch a:hover,
#p-cactions .vector-menu-heading:hover,
#ca-delete a:hover,
#ca-move a:hover,
#ca-protect a:hover {
color: var( --link-hover ) !important;
border-color: var( --primary ) !important;
box-shadow: 0 8px 30px var( --shadow-strong ) !important;
border-color: var( --border-strong ) !important;
}
#ca-view.selected a,
#ca-viewsource.selected a,
#ca-edit.selected a,
#ca-ve-edit.selected a,
#ca-history.selected a,
#ca-watch.selected a,
#ca-unwatch.selected a,
#ca-more.selected a {
background: linear-gradient( 135deg, var( --primary ), var( --primary-hover ) ) !important;
color: var( --text-strong ) !important;
border-color: transparent !important;
box-shadow: 0 8px 30px var( --shadow-strong ) !important;
}
#ca-view.selected.mw-list-item.collapsible,
#ca-viewsource.selected.mw-list-item.collapsible,
#ca-edit.selected.mw-list-item.collapsible,
#ca-ve-edit.selected.mw-list-item.collapsible,
#ca-history.selected.mw-list-item.collapsible,
#ca-watch.selected.mw-list-item.collapsible,
#ca-unwatch.selected.mw-list-item.collapsible,
#ca-more.selected.mw-list-item.collapsible {
background: var(--surface) !important;
}
:root:not( [ data-theme ] )
.oo-ui-iconElement-icon,
:root:not( [ data-theme ] )
.oo-ui-indicatorElement-indicator,
:root[ data-theme$='-light' ]
.oo-ui-iconElement-icon,
:root[ data-theme$='-light' ]
.oo-ui-indicatorElement-indicator {
filter: none !important;
}
/* -------------------------------------Mw Native Img ------------------------------------- */
figcaption {
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-color: var(--border)!important;
padding: 10px!important;
margin: -2px 0 5px ;
}
.mw-file-description::after{
display: none!important;
}
.mw-file-description {
border-color: var(--border);
padding: 10px!important;
border-radius: 20px!important;
}
img.mw-file-element,.mw-broken-media {
border-radius: 20px!important;
box-shadow: 5px 5px 10px var(--text);
}
figure[typeof="mw:File/Thumb"],
figure[typeof="mw:Error mw:File/Thumb"] {
border-top: 1px solid var(--border);
border-color: var(--border);
background: var(--bg);
color:var(--text);
}
/* Footer Modern Styles */
#footer {
background: var(--bg-2);
border-top: 1px solid var(--border);
padding: 2rem 1rem;
margin: 3rem;
text-align: center;
color: var(--text-muted);
/* Full width breakout */
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
box-sizing: border-box;
}
#footer ul {
margin: 0;
padding: 0 ;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
}
/* Categories Modern Styles */
.catlinks {
border: none;
background: var(--bg-1);
padding: 1rem 1.5rem;
margin-top: 2rem;
border-radius: 12px;
box-shadow: 0 4px 12px var(--shadow-soft);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
clear: both;
}
.mw-normal-catlinks {
background: transparent;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.mw-normal-catlinks > a:first-child {
font-weight: 700;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-right: 0.5rem;
padding: 0;
pointer-events: none;
}
.mw-normal-catlinks ul {
display: inline-flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.mw-normal-catlinks li {
margin: 0;
padding: 0;
border: none;
display: inline-block;
line-height: 1;
}
.mw-normal-catlinks li a {
display: inline-block;
padding: 6px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
color: var(--text);
font-size: 0.85rem;
font-weight: 500;
text-decoration: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px var(--shadow-soft);
}
.mw-normal-catlinks li a:hover {
background: var(--primary);
color: var(--text-strong);
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 8px var(--shadow-medium);
text-decoration: none;
}