The editors' meeting has been canceled for technical reasons.
User:Ayato/dark-theme.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
: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:[email protected]&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) }