An aesthetic dark design for Wikipedia.
Wikipedia | Space Codex by sceptrum
Details
Authorsceptrum
LicenseNo License
Categorywikipedia.org
Created
Updated
Size49 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.
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.
My vision is a clean and coherent Wikipedia, that looks fresh and futuristic.
2024.07.18: A factory dark mode has finally arrived for desktop. I'm not sure, I should smile or cry about it. It doesn't look good in terms of quality in my opinion, pretty far from that to be honest. Space Codex works with the light theme for obvious reasons.
2024.07.15: Tables are really grievous to style properly. Perhaps, I'm also lacking some skills, but I run into glitches constantly due to the rather loose editing protocols.
2024.06.29: An appearance box is available with sizing options. For now, I recommend using small font size and standard width. I have to adjust a couple of things in order to work as intended.
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.88
@description An aesthetic dark design for Wikipedia!
@author Sceptrum
@preprocessor uso
==/UserStyle== */
/* CHANGELOG
1.9.88b - fix contents position, change color of tablemain & tablehead
1.9.87b - fix titles
1.9.86b - add login page
1.9.85b - fix equation box, fix popup viewer, fix image width, update tables
1.9.84b - add appearance box, fix active tabs
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);
--tablemain: rgb(18, 28, 37);
--tablemainlight: rgb(46, 51, 71);
--tablemainlight: rgb(41, 46, 61);
--tablemainalt: rgb(28,30,37);
--tablehead: rgb(51, 61, 51);
--tablehead: var(--tableheadmenu);
--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;
}
.mw-heading, h1, h2, h3, h4, h5, h6,
.mw-heading ud {
font-weight: bold;
color: var(--white);
}
h2, h3 {
clear: left;
}
.mw-heading1, h1, .mw-heading2, h2 {
border-bottom: none;
}
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...