View source for User:Ayato/dark-theme.css

:root {
	/* Link Colours (Brighter & more saturated for contrast) */
	--link-base: #C78CFF; /* More vibrant pastel purple */
	--link-visited: #A460E5; /* Richer violet for distinction */
	--link-hover: #E7BFFF; /* Lighter lilac with a glowing effect */
	--link-contrast: #FFFFFF; /* Ensures readability */

	/* Neutral Colour Palette */
	--neutral-darkest: #F0F0F0; /* Light gray for readable headings */
	--body-background: #141414; /* Deep, rich black */
	--body-background-rgb: 20, 20, 20;
	--text-color: #E0E0E0; /* Gentle off-white for eye comfort */
	--muted-text-color: #A8A8A8; /* Softer gray for subtle text */
	--page-background: #1C1C1C; /* Layered dark gray */
	--secondary-background: #252525; /* Softer contrast for panels */
	--shadow-color: rgba(0, 0, 0, 0.7); /* Stronger shadow for depth */
	--border-color: #383838; /* Balanced subtle borders */

	/* Primary Colour Palette */
	--primary-base: #A278C2; /* Softened lavender with depth */
	--primary-base-rgb: 162, 120, 194;
	--primary-darker: #7B5899; /* A richer purple for contrast */
	--primary-darker-rgb: 123, 88, 153;
	--primary-lighter: #9165B1; /* Darker lavender (was too light before) */
	--primary-lighter-rgb: 145, 101, 177;
	--primary-contrast: #FFFFFF; /* Always clear against purple tones */
	--primary-contrast-rgb: 255, 255, 255;
	--primary-deep: #5D3B72; /* Even deeper plum tone */
	--primary-deep-rgb: 93, 59, 114;

	/* Accent Colours (Slightly richer for contrast) */
	--accent-1: #5B8EF6; /* More vibrant blue */
	--accent-2: #E066A2; /* Warmer pink */
	--accent-3: #87D987; /* More readable mint green */
	--accent-4: #E5A93D; /* Slightly muted gold */
	--accent-5: #E57357; /* Balanced coral shade */
}



@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

body::before {
	opacity: .25;
}
.oo-ui-iconElement-icon:not(.oo-ui-icon-check), .wikiEditor-ui-toolbar .tabs span.tab a::before,.skin-vector-legacy #pt-uls .uls-trigger::before,[class*="oo-ui-icon-"]:not(.oo-ui-icon-check) {
	filter: invert(1)
}
.oo-ui-iconElement-icon[class*="progressive"],.oo-ui-icon-linked {
	filter: hue-rotate(40deg)!important
}
/* body */
body {
	color: var(--text-color);
	background: var(--body-background);
	line-height: 1.6;
}
.vector-body {
	font-size: 1rem;
}
@media screen and (min-width: 982px) {
	.mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer {
		margin-left: 12.5rem;
	}
	#mw-panel {
		width: 11rem;
		padding-left: .5rem;
	}
	#p-logo, #p-logo a {
		width: 11rem;
	}
}

/* Page layout */
.mw-body {
	padding: 1rem 2rem;
	border: 1px solid var(--border-color);
	background-color: var(--page-background);
}

#mw-page-base {
	background: none;
	height: 6.5rem;
}
#mw-head-base {
	margin-top: -5.5rem;
	height: 4.5rem;
	background: none;
	position: relative;
}
#mw-head {
	top: 0;
}
#left-navigation, #right-navigation {
	margin-top: 3rem;
	margin-bottom: 0;
	padding: 0;
}
#left-navigation {
	margin-left: calc(12.5rem - 1px);
}
.vector-menu-tabs, .vector-menu-tabs a, .vector-menu-tabs li {
	background: none;
	height: unset;
}
.vector-menu-tabs li:not(:last-of-type) {
	margin-right: .5rem;
}
.vector-menu-tabs li a, .vector-menu-dropdown .vector-menu-heading {
	background: none;
	color: var(--primary-deep);
	text-decoration: none;
	font-size: 0.9rem;
	padding: 0.5rem 0.9rem;
	border-radius: .25rem .25rem 0 0;
	height: unset;
	line-height: 1.6;
	float: none;
	transition: .2s;
	border: 1px solid transparent;
	border-bottom: 0;
}
.vector-menu-tabs li a:hover, .vector-menu-dropdown:hover label, .wikiEditor-ui-toolbar {
	background: var(--secondary-background);
}
.vector-menu-tabs li.selected a, .vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited {
	background: var(--page-background);
	color: var(--text-color);
	border-color: var(--border-color);
}
.vector-menu-tabs .mw-watchlink.icon {
	margin-right: .5rem;
}
.vector-menu-tabs .mw-watchlink.icon a {
	width: 2rem;
	height: unset;
	padding: 0.5rem 0.9rem;
	overflow: hidden;
	text-indent: -9999px;
	color: transparent;
}
.vector-menu-tabs .mw-watchlink.icon a::before {
	top: .7rem;
	left: .35rem;
}
.vector-menu-tabs, .vector-menu-tabs a, .vector-menu-tabs-legacy .selected {
	background: none;
	border: 0;
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
	background-image: none;
}

/* search */
@media screen and (min-width: 982px) {
	.vector-search-box {
		margin: 0 2rem 0 .5rem;
	}
}
.vector-search-box form {
	margin: 0;
}
.vector-search-box-input {
	background: var(--neutral-lightest);
	border-radius: 0.3rem;
	padding: 0.5rem 0.4rem 0.5rem;
	border: 1px solid var(--primary-base);
	color: var(--primary-deep);
	height: unset;
	font-size: 0.9rem;
}
.vector-search-box-inner:hover .vector-search-box-input, .vector-search-box-input:focus, .vector-search-box-inner:hover .vector-search-box-input:focus {
	border-color: var(--primary-darker);
	box-shadow: none;
}

/* personal tools */
@media screen and (min-width: 982px) {
	#p-personal {
		position: absolute;
		top: 1px;
		right: 1.5rem;
		z-index: 100;
		padding: 0;
		background: none;
		width: unset;
	}
}
#p-personal ul {
	background: var(--page-background);
	padding: 0;
	display: flex;
	align-items: center;
	border-radius: 0.3rem;
}
#p-personal li {
	margin: 0!important;
	padding: 0!important;
}
#p-personal li a,#mw-head #p-personal .vector-menu-content .vector-menu-content-list a {
	color: var(--primary-deep);
	text-decoration: none;
	font-size: 0.9rem;
	padding: 0.3rem 0.6rem;
	border-radius: 0.3rem;
	transition: background 0.2s;
	line-height: 1.2;
}
.vector-user-menu-legacy #pt-anonuserpage, .vector-user-menu-legacy #pt-userpage a {
	padding-left: 1.75rem !important;
	background-position: .4rem center;
}
.skin-vector-legacy #pt-notifications-notice .mw-echo-notifications-badge, .skin-vector-legacy #pt-notifications-alert .mw-echo-notifications-badge {
	top: 0
}

/* Sidebar */
#mw-panel .vector-menu {
	border-radius: 0.25rem;
	margin: 0 0 1rem;
	background: var(--page-background);
	border: 1px solid var(--border-color);
	overflow: hidden;
	transition: transform 0.2s ease;
	text-overflow: ellipsis;
	padding: 0;
}
#mw-panel .vector-menu .vector-menu-heading {
	font-size: 1rem;
	padding: 0.3rem 0.8rem;
	border-radius: 0.25rem 0.25rem 0 0;
	background: var(--primary-base);
	color: var(--primary-contrast);
	font-weight: 600;
	margin: 0;
}
#mw-panel .vector-menu-portal .vector-menu-content {
	margin: 0
}
#mw-panel .vector-menu-portal .vector-menu-content li {
	padding: 0;
}
#mw-panel .portal .vector-menu-content .vector-menu-content-list li a, #mw-panel .portal .vector-menu-content .vector-menu-content-list li a:hover {
	display: block;
	padding: 0.4rem 0.8rem;
	color: var(--link-base);
	text-decoration: none;
	border-radius: 0.25rem;
	transition: all 0.3s ease;
	font-size: 0.9rem;
	position: relative;
	line-height: 1.4;
	background: none;
	box-shadow: none;
}
#mw-panel .vector-menu-portal .vector-menu-content li a.feedlink {
	background: none;
}
#mw-panel .portal .vector-menu-content .vector-menu-content-list li a:hover {
	transform: translateX(1rem);
}
#mw-panel .vector-menu-portal .vector-menu-content li a::before {
	content: '❤';
	position: absolute;
	left: -.4rem;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	transform: translateX(-15px);
	color: var(--current)
}
#mw-panel .vector-menu-portal .vector-menu-content li:nth-child(5n + 1) {
	--current: var(--accent-1);
}
#mw-panel .vector-menu-portal .vector-menu-content li:nth-child(5n + 2) {
	--current: var(--accent-2);
}
#mw-panel .vector-menu-portal .vector-menu-content li:nth-child(5n + 3) {
	--current: var(--accent-3);
}
#mw-panel .vector-menu-portal .vector-menu-content li:nth-child(5n + 4) {
	--current: var(--accent-4);
}
#mw-panel .vector-menu-portal .vector-menu-content li:nth-child(5n + 5) {
	--current: var(--accent-5);
}
#mw-panel .vector-menu-portal .vector-menu-content li a:hover::before {
	opacity: 1;
	transform: translateX(0);
}

/* page content */
.mw-body .firstHeading {
	border-bottom: 3px solid var(--primary-lighter);
	font-size: 2.5rem;
	position: relative;
	color: var(--neutral-darkest);
}
.mw-body h1, .mw-body .mw-heading1, .mw-body-content h1, .mw-body-content .mw-heading1, .mw-body-content h2, .mw-body-content .mw-heading2 {
	padding-bottom: 0.5rem;
	line-height: 1.2;
	font-family: 'Quicksand', system-ui, -apple-system, sans-serif;
	font-weight: 600;
}

.mw-body:not(:has(.mw-indicators *)) .firstHeading::after {
	content: '♥';
	position: absolute;
	right: 0;
	bottom: 0.5rem;
	color: var(--primary-lighter);
	opacity: 0.5;
	font-size: 1.5rem;
}
.mw-indicators {
	top: 1.25rem;
}
#mw-content-subtitle, #contentSub2 {
	margin: 0 0 1rem;
	color: var(--muted-text-color);
}
.toc, .toccolours, .catlinks {
	background-color: var(--page-background);
	border: 1px solid var(--border-color);
}

/* background */
.CodeMirror, .oo-ui-checkboxInputWidget [type="checkbox"] + span, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-textInputWidget .oo-ui-inputWidget-input, .wikitable, .wikiEditor-ui-toolbar .group .tool-select .options, .wikiEditor-ui-toolbar .booklet > .index, textarea,.oo-ui-popupWidget-popup,.mw-echo-ui-notificationItemWidget,.mw-echo-ui-notificationItemWidget-unread:hover {
	background-color: var(--page-background)
}
#p-personal li a:hover, .CodeMirror-gutters, .editOptions, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .wikitable > tr > th, .wikitable > * > tr > th, .ext-WikiEditor-ResizingDragBar, .wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover, .wikiEditor-ui-toolbar .booklet > .index > :hover,.mw-echo-ui-notificationItemWidget:hover.mw-echo-ui-notificationItemWidget:hover {
	background-color: var(--secondary-background);
}
.ext-WikiEditor-ResizingDragBar span, .tool-button:hover, .ext-WikiEditor-realtimepreview-button:hover, .tool.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button:hover, .wikiEditor-ui-toolbar .page-characters div span:hover,,.mw-echo-ui-notificationItemWidget-unread {
	background-color: var(--border-color)
}
.wikiEditor-ui-toolbar .booklet > .index > .current {
	background-color: rgba(var(--primary-base-rgb), .2);
}

/* text */
.mw-body, .parsoid-body, .mw-footer li, .wikiEditor-ui-toolbar .group .tool-select .label, .wikiEditor-ui-toolbar .tabs span.tab a.current, .wikiEditor-ui-toolbar .tabs span.tab a.current:visited, .CodeMirror, .editOptions, .mw-heading, h1, h2, h3, h4, h5, h6, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-textInputWidget .oo-ui-inputWidget-input, .wikitable > tr > th, .wikitable > * > tr > th, .wikitable, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .wikiEditor-ui-toolbar .group .tool-select .options .option, .wikiEditor-ui-toolbar .page-characters div span, .wikiEditor-ui-toolbar .page-table td, textarea,.mw-echo-ui-notificationsListWidget:not(:hover) a, #p-personal .mw-echo-ui-notificationsListWidget:not(:hover) a.new,.mw-echo-ui-notificationItemWidget-content-message-header,.mw-echo-ui-notificationItemWidget-content-actions-timestamp {
	color: var(--text-color)
}
.wikiEditor-ui-toolbar .group .label, .wikiEditor-ui-toolbar .page-table th,.mw-echo-ui-menuItemWidget > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,.mw-echo-ui-notificationItemWidget-content-message-body {
	color: var(--muted-text-color)
}
a, .mw-collapsible-toggle-default .mw-collapsible-text, .toctogglelabel, .wikiEditor-ui-toolbar .tabs span.tab a, .cm-mw-link-pagename, .cm-mw-link-bracket, .cm-mw-link-delimiter, .cm-mw-extlink, .cm-mw-free-extlink, .mw-parser-output a.extiw, .mw-parser-output a.external {
	color: var(--link-base);
}
a:visited, .mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
	color: var(--link-visited);
}
a:active, .mw-parser-output a.extiw:active, .mw-parser-output a.external:active {
	color: var(--link-hover)
}
.wikiEditor-ui-toolbar .booklet > .index > .current {
	color: var(--primary-base)
}
.cm-mw-exttag-name, .cm-mw-htmltag-name, .cm-mw-exttag-bracket, .cm-mw-exttag-attribute, .cm-mw-htmltag-bracket, .cm-mw-htmltag-attribute {
	color: var(--accent-3)
}
.cm-mw-exttag-bracket, .cm-mw-exttag-attribute, .cm-mw-htmltag-bracket, .cm-mw-htmltag-attribute {
	opacity: .75
}
.cm-mw-templatevariable, .cm-mw-templatevariable-bracket {
	color: var(--accent-4)
}

/* border */
.mw-heading1, h1, .mw-heading2, h2, .wikiEditor-ui-toolbar .group, .wikiEditor-ui-toolbar .section-secondary .group, .wikiEditor-ui .wikiEditor-ui-top, .wikiEditor-ui-toolbar .sections .section, .CodeMirror-sizer, .editOptions, .oo-ui-checkboxInputWidget [type="checkbox"] + span, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, .oo-ui-textInputWidget .oo-ui-inputWidget-input, .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td, .wikitable, .ext-WikiEditor-ResizingDragBar, .CodeMirror-gutters, .wikiEditor-ui .wikiEditor-ui-view, .wikiEditor-ui-toolbar .group .tool-select .options, .wikiEditor-ui-toolbar .page-characters div span, .wikiEditor-ui-toolbar .page-table td, textarea,.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head,.oo-ui-popupWidget-popup,.mw-echo-ui-notificationItemWidget:not(:last-child) {
	border-color: var(--border-color)
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:hover + span, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus, .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span, .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus, .wikiEditor-ui-toolbar .page-characters div span:hover,.mw-echo-ui-notificationItemWidget-unread:hover {
	border-color: var(--primary-base)
}

.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:focus + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:focus + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:active + span,.mw-echo-ui-notificationItemWidget:focus {
	box-shadow: inset 0 0 0 1px var(--primary-base)
}

@keyframes unseen-fadeout-to-unread {
  from {
    background-color:var(--page-background)
  }
  to {
    background-color:var(--border-color)
  }
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:focus + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:focus + span, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	background-color: var(--primary-base);
	border-color: var(--primary-base);
	color: var(--primary-contrast)
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:hover + span, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
	background-color: var(--primary-darker);
	border-color: var(--primary-darker);
	color: var(--primary-contrast)
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:checked:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:indeterminate:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:active + span, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
	background-color: var(--primary-deep);
	border-color: var(--primary-deep);
	color: var(--primary-contrast)
}