Dark minimalist Wiki - Jencansee by jencansee

/* ==UserStyle==
@name         Dark minimalist Wiki - Jencansee
@version      20221127.22.57
@namespace    userstyles.world/user/jencansee
@description  This is by no means is bug free, I made and test it within ~30 minutes because I needed dark theme really fast. Also, you should have 'TeX Gyre Heros' font installed. All fixed and patches highly appreciated.
@author       jencansee
@license      No License
==/UserStyle== */

@-moz-document domain("wikipedia.org") {
*, ::before, ::after {
    box-sizing: border-box !important;
    font-family: "TeX Gyre Heros", Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif !important;
    background-color: #0f0f0f !important;
    color: #aaa !important;
    border-color: #292929 !important;
}

:root {
    scroll-behavior: smooth;
}

::selection {
    background: #aaa !important;
    color: black !important;
}

.vector-body {
    font-size: 1em !important;
}

body.mediawiki.skin-vector-legacy #firstHeading, body.mediawiki.skin-vector-legacy #bodyContent {
  max-width: 1280px;
  margin: 0 auto;
    background: none !important;
}
a { background: none !important }

#bodyContent {
  box-shadow: 0 0 120px rgba(255,255,255,.2);
  border-radius: 7px;
  padding: 15px 25px;
  background: #3737371c !important;
}


.infobox {
    margin-left: 60px;
}
#mw-head-base { margin-left: 0; }

#right-navigation {
    float: none;
    position: absolute;
    top: 25px;
    left: 35%;
}

.vector-search-box { 
    min-width: 450px !important;
    width: 668px !important;
    margin: 0;
}
.vector-search-box-inner { width: 30vw; min-width: 80%; }
.vector-search-box-input { 
    border-radius: 7px;
    height: 40px; padding-left: 15px;
}
input#searchButton { padding-right: 50px; }
.vector-search-box-input:focus, .vector-search-box-inner:hover .vector-search-box-input:focus {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.mwe-popups .mwe-popups-extract::after {
    background-image: linear-gradient(to right, rgba(15, 15, 15, .8), #0f0f0f 50%) !important;
    width: 120%;
    bottom: -8px;
    filter: blur(5px);
}

#mw-panel nav:not(nav#p-lang), .wbc-editpage, #footer-places, #footer-icons, #left-navigation, #p-views,
#p-lang .uls-settings-trigger, #p-lang .vector-menu-heading, #p-personal, .mw-wiki-logo
{
    display: none !important;
}

.mw-body { border: none; padding: 80px 20px !important; margin-left: 0 !important; }
.mw-body h1 { 
    font-weight: 700; border: none;
    font-size: 2.8em; margin-bottom: 15px !important; 
}
.mw-body h1 span {
    background: linear-gradient(180deg,#fff,#aaa) !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
}
.mw-disambig { border-bottom: 2px dashed #7038b7 !important; }

#mw-panel { position: static; }
#p-lang {
    position: absolute;
    top: 10px;
    right: calc(100vw / 2.31);
    padding: 0; margin: 0;
}

.jquery-tablesorter th.headerSort a, .jquery-tablesorter th.headerSort sup { background: none !important;}

.searchButton[name="go"], .haudio img, .jquery-tablesorter th.headerSort  {
  background-color: transparent !important;
  filter: invert(1);
}

.tocnumber {
    color: #575757;
}
.mw-interlanguage-selector.mw-ui-button {
    color: #f2f2f2;
    margin-left: 5px !important;
}

.vector-menu-content-list .interlanguage-link { display: none; }

.interwiki-ja, .interwiki-en, .interwiki-ru, .interwiki-es, .interwiki-uk {
    display: inline-block !important;
    margin-right: 5px !important;
}

.mw-parser-output .keyboard-key {
    background: linear-gradient(to bottom,#131313,#282828);

}

.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display {
    background: none !important;
    filter: invert(1);
}


ul { list-style-image: none; }
ul li::marker {
    filter: invert(1);
}

.mw-parser-output a.external {
    filter: grayscale(1);
}
.mw-editsection { opacity: .3; }

img {
    filter: brightness(.75); 
    transition: filter .3s ease-in-out;
}

img:hover {
    filter: brightness(1);
}


}