User:MarkFan8901/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 {
	--color-base: #eaecf0;
	--color-base--hover: #f8f9fa;
	--color-emphasized: #f8f9fa;
	--color-subtle: #a2a9b1;
	--color-inverted: #101418;
	--color-progressive: #88a3e8;
	--color-progressive--hover: #b0c1f0;
	--color-progressive--active: #cbd6f6;
	--color-destructive: #fd7865;
	--color-destructive--hover: #fea898;
	--color-destructive--active: #ffc8bd;
	--color-visited: #a799cd;
	--color-destructive--visited: #c99391;
	--color-error: #fd7865;
	--color-warning: #fecc44;
	--color-success: #2cb491;
	--color-notice: #f8f9fa;
	--color-content-added: #80cdb3;
	--color-content-removed: #fd7865;
	--color-base--subtle: #a2a9b1;
	--box-shadow-color-base: #fff;
	--box-shadow-color-progressive--focus: #6b8edf;
	--box-shadow-color-destructive--focus: #6b8edf;
	--box-shadow-color-inverted: #000;
	--background-color-base: #101418;
	--background-color-dark: #080a0c;
	--background-color-neutral: #27292d;
	--background-color-neutral-subtle: #202122;
	--background-color-interactive: #27292d;
	--background-color-interactive-subtle: #202122;
	--background-color-disabled: #54595d;
	--background-color-disabled-subtle: #404244;
	--background-color-inverted: #f8f9fa;
	--background-color-progressive--focus: #6b8edf;
	--background-color-progressive-subtle: #233566;
	--background-color-destructive--focus: #6b8edf;
	--background-color-destructive-subtle: #612419;
	--background-color-error: #fc493b;
	--background-color-error--hover: #fd7865;
	--background-color-error--active: #fea898;
	--background-color-error-subtle: #612419;
	--background-color-warning-subtle: #453217;
	--background-color-success-subtle: #153d31;
	--background-color-notice-subtle: #27292d;
	--background-color-content-added: #233566;
	--background-color-content-removed: #453217;
	--background-color-backdrop-light: rgba(0,0,0,0.65);
	--background-color-backdrop-dark: rgba(255,255,255,0.65);
	--border-color-base: #72777d;
	--border-color-subtle: #54595d;
	--border-color-muted: #404244;
	--border-color-interactive: #a2a9b1;
	--border-color-disabled: #54595d;
	--border-color-inverted: #101418;
	--border-color-progressive--focus: #6b8edf;
	--border-color-destructive--focus: #6b8edf;
	--border-color-error: #fc493b;
	--border-color-error--hover: #fd7865;
	--border-color-warning: #fecc44;
	--border-color-success: #2cb491;
	--border-color-notice: #c8ccd1;
	--border-color-content-added: #233566;
	--border-color-content-removed: #987027;
}

body {
	background-color: #08080a;
}

a         {color: var(--color-progressive)}
a.new     {color: var(--color-destructive)}
a:visited {color: var(--color-visited)}

textarea {
	color: var(--color-emphasized);
	background-color: var(--background-color-dark);
	border-color: var(--border-color-muted);
}

.mw-body {
	border-color: var(--border-color-base);
}

#mw-page-base {
	background-color: var(--background-color-base);
	background-image: linear-gradient(to bottom,var(--background-color-base) 50%,var(--background-color-dark) 100%);
}

.vector-menu-tabs {
	   background-image: linear-gradient(to bottom,var(--background-color-base) 50%,var(--border-color-base) 100%);
	a {
		color: var(--color-progressive);
		background-image: linear-gradient(to bottom,var(--background-color-base) 50%,var(--border-color-base) 100%);
	}
	a.new     {color: var(--color-destructive)}
	a:visited {color: var(--color-visited)}
	.selected {
		background-color: var(--background-color-base);
		background-image: none !important;
	}
	.mw-list-item {
		background-image: linear-gradient(to bottom,var(--background-color-base) 0,var(--background-color-dark) 100%);
	}
}

.vector-legacy-sidebar {
	a         {color: #38f !important}
	a:visited {color: #34a !important}
}

.vector-search-box-input {background-color: rgba(0, 0, 0, 0.5)}

.suggestions * {
	color:            var(--color-base)            !important;
	background-color: var(--background-color-base) !important;
}

table {
	color:            var(--color-base)               !important;
	border-color:     var(--border-color-base)        !important;
	background-color: var(--background-color-neutral) !important;
}

#footer-icons a {background-color: var(--background-color-base)}