An aesthetic dark design for Wikipedia. My vision is a clean and coherent style, that looks fresh and futuristic.
Wikipedia | Space Codex by sceptrum
Details
Authorsceptrum
LicenseNo License
Categorywikipedia.org
Created
Updated
Size44 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Space Codex is an overhaul project for Wikipedia's Vector 2022 redesign, which has been released in January 2023.
It's a beta with a number of issues have to be addressed in the future, most of the subpages outside of articles are untouched, though regular reading of the site should be satisfying.
My focus is still on improving articles as they are 99% the most visited on the site. I'm getting closer on laying down the fundamentals. When that happens, I revoke the beta status and possibly it's gonna be released on GitHub.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Wikipedia | Space Codex
@namespace userstyles.world
@version 1.9.83
@description An aesthetic dark design for Wikipedia!
@author Sceptrum
@preprocessor uso
==/UserStyle== */
/* CHANGELOG
1.9.83b - update reference target, update searchbar & dropdown, fix table headers, fix pop-up viewer, increase h4 fsize
1.9.82b - update navbox & reference popup & thumbs
1.9.81b - center logo with mainmenu, reduce space between header and content, fix arrows, improvements in infobox
1.9.8b - fix table unique colors, update visited link color, article improvements, fix sidebar, rework main menu & contents & tools
1.9.73b - move mainmenu, update ambox, change textcolor in contents (NOTE: I wanted to reduce the amount of blue on the viewport. Experimental.), update mainmenu
1.9.71b - fix update changes, fix ambox, update equations
1.9.7b - rework mainpage, add image viewer, fix some headers in infobox
1.9.65b - fix update changes, rename project to Space Codex
1.9.63b - fix contents gradient
1.9.62b - update text color, fix article grid
1.9.6b - add "mainmainpage" which I somehow completely forgot about, fixed tables unique colors, lots of QoL tweaks in arcticles
1.9.5b - change link color, increase text size, fix active line, fix arrows position, add languages: french, spanish, portuguese, dutch, danish, swedish, norwegian, polish, czech, hungarian, slovakian, croatian, romanian, greek, bulgarian, turkish, japanese
1.9.42b - update fs button
1.9.41b - update main background
1.9.4b - update mainpage, fix hatnote, change edit color, update scrollbar
1.9.3b - update mainpage, update tools dropdown
1.9.2b - fix tool button height, fix images, fix hatnote
1.9.1b - small fixes
1.9.0b - update to new layout
1.0.0 - initial release
*/
@-moz-document
domain("wikipedia.org"),
domain("en.wikipedia.org"),
domain("fr.wikipedia.org"),
domain("es.wikipedia.org"),
domain("pt.wikipedia.org"),
domain("nl.wikipedia.org"),
domain("da.wikipedia.org"),
domain("sv.wikipedia.org"),
domain("no.wikipedia.org"),
domain("pl.wikipedia.org"),
domain("cs.wikipedia.org"),
domain("hu.wikipedia.org"),
domain("sk.wikipedia.org"),
domain("hr.wikipedia.org"),
domain("ro.wikipedia.org"),
domain("el.wikipedia.org"),
domain("bg.wikipedia.org"),
domain("tr.wikipedia.org"),
domain("ja.wikipedia.org") {
:root {
--backgroundmain: rgb(20, 20, 23);
--headerlight: rgb(20, 25, 35);
--tablemain: rgb(18, 28, 38);
--tablemainlight: rgb(46, 51, 71);
--tablemainlight: rgb(41, 46, 61);
--tablemainalt: rgb(28,30,37);
--tablehead: rgb(51, 61, 51);
--tableheadlight: rgb(61, 71, 61);
--tableheadmenu: rgb(39, 47, 39);
--titleblue: rgb(29, 47, 97);
--borderblue: rgb(150, 194, 225);
--white: white;
--textwhite: rgb(220, 220, 226);
--textgrey: rgb(163, 163, 168);
--editgrey: rgb(84, 89, 93);
--textdarkgreyhover: rgb(109, 116, 121);
--linkblue: rgba(120, 175, 255, 0.9);
--linkbluehover: rgb(148, 198, 255);
--linkgreen: rgb(60, 171, 125);
--linkgreenhover: rgb(91, 205, 166);
--linkred: rgb(237, 44, 53);
--linkred2: rgb(180, 35, 30);
--linkvisited: rgb(98, 137, 193);
--placeholder: rgb(70, 70, 75);
--ts100: 0 0 1px;
--ts120: 0 0 1.2px;
--ts150: 0 0 1.5px;
--trebuchet: Trebuchet MS, sans-serif;
--lineblue: rgb(220,220,226);
--radius5: 7px;
}
* {
scrollbar-color:
rgb(35, 40, 50) rgb(20, 20, 23) !important;
}
.cdx-button:enabled:focus:not(:active):not(.cdx-button--is-active) {
border: none;
box-shadow: none;
}
body {
background: var(--backgroundmain) !important;
font-family: var(--trebuchet), sans-serif;
}
.mw-body {
background: var(--backgroundmain);
color: var(--white);
grid-template: min-content min-content min-content min-content / 100% min-content !important;
grid-template-areas:
'titlebar-cx columnEnd'
'titlebar columnEnd'
'toolbar columnEnd'
'content columnEnd' !important;
}
.mw-page-container {
background: var(--backgroundmain);
}
.mw-page-container-inner {
gap: 28px;
}
h1, h2, h3, h4, h5, h6, ud {
border-bottom: none;
font-weight: bold;
color: var(--white);
}
h2, h3 {
clear: left;
}
p, li, dt, dd {
color: var(--textwhite);
line-height: 24px;
}
p {
font-family: sans-serif;
}
a,
.mw-parser-output a.extiw,
.mw-parser-output a.external,
a.mw-selflink {
color: var(--linkblue);
text-shadow: var(--ts100);
cursor: pointer !important;
}
a:hover,
.mw-parser-output a.extiw:hover,
.mw-parser-output a.external:hover {
color: var(--linkbluehover);
text-shadow: var(--ts100);
text-decoration: none;
}
a.new {
color: var(--linkred);
}
a:visited {
color: var(--linkvisited);
}
i,
small,
caption,
.hatnote {
color: var(--linkgreen);
text-shadow: var(--ts100);
}
h1 i,
h2 i,
h3 i {
color: var(--white);
text-shadow: none;
font-style: normal;
}
input:focus + *,
input:target + *,
input:active + *,
input:focus-visible,
input:focus-within {
outline-width: 0 !important;
outline-color: transparent !important;
border-width: 0 !important;
box-shadow: none !important;
}
.vector-header-container .mw-header {
padding-bottom: 0;
padding-top: 16px;
background: var(--backgroundmain);
}
.vector-header-start {
padding-left: 15px;
}
.vector-icon.mw-ui-icon-wikimedia-menu {
scale: 1.0;
}
#vector-main-menu-dropdown {
filter: invert(1);
}
.mw-logo-container {
filter: invert(1);
}
.vector-feature-main-menu-pinned-enabled .vector-header-start {
padding-left: 32px !important;
}
.cdx-typeahead-search--show-thumbnail.cdx-typeahead-search--auto-expand-width:not(.cdx-typeahead-search--expanded) {
margin-left: 33px;
}
#searchInput,
.cdx-search-input--has-end-button {
background: black;
border: none;
border-radius: 9px;
font-family: var(--trebuchet);
}
.client-js .vector-search-box-vue .vector-search-box-input {
padding-left: 35px;
}
#searchInput::placeholder {
color: var(--placeholder);
}
#searchInput:focus {
box-shadow: none;
caret-color: var(--textwhite);
}
.cdx-search-input--has-end-button:focus {
outline: none;
}
.cdx-text-input__input {
border: none;
padding-top: 5px;
}
.cdx-text-input__input::placeholder {
font-family: var(--trebuchet);
color: var(--placeholder);
}
.cdx-text-input__input:enabled {
background: none;
color: var(--placeholder);
}
.cdx-text-input__input:enabled:focus {
box-shadow: none;
caret-color: var(--textwhite);
color: var(--textwhite);
}
.cdx-text-input__start-icon {
filter: invert(1);
margin: 1px 0 0 1px;
}
.cdx-text-input__start-icon svg {
filter: invert(1);
}
.cdx-text-input__input:enabled ~ .cdx-text-input__icon-vue {
color: var(--placeholder);
margin: 1px 0 0 1px;
}
.cdx-text-input__input:enabled.cdx-text-input__input--has-value ~ .cdx-text-input__icon-vue,
.cdx-text-input__input:enabled.cdx-text-input__input--has-value~.cdx-text-input__icon-vue {
color: var(--placeholder);
}
.cdx-text-input__input:enabled:focus~.cdx-text-input__icon-vue {
color: var(--textwhite);
margin: 1px 0 0 1px;
}
.cdx-search-input__end-button {
display: none;
}
.cdx-typeahead-search__menu.cdx-menu {
background: var(--tablemain);
width: 494px;
margin: 4px 0 0 4px;
border: none;
border-radius: var(--radius5);
}
.cdx-menu-item--enabled .cdx-menu-item__content {
color: var(--white);
}
.cdx-search-result-title__match {
font-weight: unset;
}
.cdx-menu-item__text__description {
color: var(--textwhite) !important;
}
.cdx-thumbnail__image {
border: none;
}
.cdx-menu-item--enabled:hover,
.cdx-menu-item--enabled.cdx-menu-item--highlighted {
background: var(--tablemainlight);
}
.cdx-menu-item--enabled.cdx-menu-item--highlighted:first-child {
border-top-left-radius: var(--radius5);
border-top-right-radius: var(--radius5);
}
.cdx-menu-item--enabled.cdx-menu-item--highlighted:last-child {
border-bottom-left-radius: var(--radius5);
border-bottom-right-radius: var(--radius5);
}
.cdx-menu--has-footer .cdx-menu-item:last-of-type:not(:first-of-type) {
border-top: none;
margin-top: 7px;
}
.cdx-typeahead-search__search-footer {
min-height: 48px;
color: var(--white);
border-bottom-left-radius: var(--radius5);
border-bottom-right-radius: var(--radius5);
}
.cdx-typeahead-search__search-footer__icon {
color: var(--white);
}
.cdx-typeahead-search__search-footer__icon path,
.cdx-typeahead-search__search-footer__icon circle {
...