Modern Wikipedia by Tiago

/* ==UserStyle==
@name         Modern Wikipedia
@version      20250215.12.00
@namespace    https://userstyles.world/user/Tiago
@description  Gives a more modern look to Wikipedia.
@author       Tiago
@license      CC BY-SA
==/UserStyle== */

@-moz-document domain("wikipedia.org") {
/* set custom color */
:root {
  --accent-color-hue: 260;

  --accent-color-bright: hsl(var(--accent-color-hue), 100%, 65%);
  --accent-color-normal: hsl(var(--accent-color-hue), 100%, 55%);
  --accent-color-darker: hsl(var(--accent-color-hue), 100%, 40%);
}

/* 000 Global Modification */

html.skin-theme-clientpref-day {
  background-color: white;
}
html.skin-theme-clientpref-night {
  background-color: var(--background-color-base);
}

html,
.mw-page-container,
.mw-page-container > div > *,
.vector-pinned-container,
.vector-header-container .mw-header,
.vector-header-container .vector-sticky-header {
  transition: background-color 400ms ease-out; /* transition dark / light switch */
}
/* link colors */
.vector-toc .vector-toc-link,
a,
.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive,
.cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive,
.vector-pinnable-element .mw-list-item a,
.vector-dropdown-content .mw-list-item a,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button,
.vector-pinnable-element .mw-list-item a:not(.mw-selflink):visited,
.vector-dropdown-content .mw-list-item a:not(.mw-selflink):visited,
.mw-parser-output a.extiw,
.mw-parser-output a.external {
  color: var(--accent-color-darker);
}
.vector-menu-tabs .mw-list-item a,
.mw-collapsible-toggle-default .mw-collapsible-text {
  color: var(--accent-color-normal);
}
/* scrolling */
* {
  scroll-behavior: smooth;
}
/* scrollbar */
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar:hover,
*::-webkit-scrollbar:is(body::-webkit-scrollbar-thumb:hover),
*::-webkit-scrollbar:active,
*::-webkit-scrollbar:is(body::-webkit-scrollbar-thumb:active) {
  width: 10px;
}
*::-webkit-scrollbar-thumb {
  background-color: #9b9b9b;
  border-radius: 5px;
  width: 10px;
  border: 2px solid white;
}
.skin-theme-clientpref-night *::-webkit-scrollbar-thumb {
  border-color: var(--background-color-base);
}
/* buttons */
button,
.mw-ui-button,
.vector-pinnable-header-toggle-button {
  border-radius: 5px;
}
.lang-list-button,
.other-project-link,
.central-featured-lang > a {
  border-radius: 8px;
}

/* end of 000 */
/* 001 Main Landing Page (https://www.wikipedia.org) */
/* main search field */
.pure-button-primary-progressive {
  border-radius: 0 10px 10px 0 !important;
  background-color: var(--accent-color-normal);
  border: none;
  &:hover {
    box-shadow: 0 0 15px -5px var(--accent-color-bright);
    background-color: var(--accent-color-bright);
  }
}

/* language links */
.other-project-link:hover,
.central-featured-lang:hover {
  transition: background-color 200ms ease, box-shadow 300ms ease;
}
.central-featured-lang > a {
  overflow: hidden;
}

/* end of 001 */
/* 002 Header Bar */
/* search field */
#searchform,
.cdx-search-input--has-end-button {
  border: none !important;
}
#searchInput,
.cdx-text-input__input {
  border-radius: 10px 0 0 10px;
}
.cdx-search-input__end-button {
  border-radius: 0 10px 10px 0 !important;
}

/* fixed header */
body {
  margin-top: 5rem;
}
.vector-header-container {
  position: fixed;
  top: 0px;
  left: 50%;
  width: 100%;
  z-index: 10;
  padding: 0 25px;
  transform: translatex(-50%);
  border-bottom: 1px solid var(--border-color-muted);
  box-shadow: 0 5px 15px #00000017;
}
.vector-header-container.vector-sticky-header-container {
	pointer-events: none;
}

/* header elements */
.cdx-text-input,
.cdx-text-input__input {
  height: 38px;
}
.cdx-button,
.catlinks,
.navbox,
.bandeau-article {
  border-radius: 10px;
}

/* end of 002 */
/* 003 Language Specific Home Pages */
.mw-parser-output #mp-upper,
#mp-bottom {
  gap: 10px;
  margin: 10px 0 !important;
}
.mp-box {
  margin: 0 !important;
}

.mw-parser-output > div > div > div:is(:not(div[style])):not(:is(h2 ~ div)):not(:is(#mp-topbanner div)):not(.thumbcaption),
.mp-box {
  border-radius: 10px;
  padding: 0 !important;
  box-shadow: 0 0 1px #999;
  & > h2 {
    margin: 2em 0 0;
    padding: 1em;
    border-radius: 10px 10px 0 0;
    border: none;
  }
  & > h2:first-child {
    margin: 0;
  }
  & > *:is(:not(h2):not(.mw-heading2)) {
    border-radius: 10px;
  }
  & > *:is(:not(h2)) {
    margin: 1em;
  }
  & > .mw-heading2 {
    border-color: var(--accent-color-bright);
  }
}
.mw-parser-output .main-top {
  border-radius: 10px;
  box-shadow: 0 3px 15px -5px grey;
  overflow: hidden;
}

/* end of 003 */
img {
  border-radius: 5px;
}



/* 004 Asides / Sidebars */
/* moves the asides down to keep them visible (otherwise hidden by the fixed header) */
.vector-below-page-title .vector-column-start,
.vector-below-page-title .vector-column-end {
  transform: translateY(5rem);
}

/* enf of 004 */
/* 006 Popup and Menus */
/* drop-down menu */
.uls-menu,
.vector-dropdown-content {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 100vmax #0003, 0 3px 10px #00000030 !important;
  & * {
    border-radius: 5px;
  }
}
.vector-dropdown-content {
  top: calc(100% + 1.5rem) !important;
}
.cdx-menu {
  margin-top: .2rem;
  overflow: hidden;
  border-radius: 10px !important;
  box-shadow: 0 3px 15px #00000030;
}
/* Info popup */
.oo-ui-popupWidget-popup {
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  box-shadow: 0 2px 5px #00000030;
}
.oo-ui-popupWidget {
  filter: drop-shadow(0 2px 5px #00000030);
}
/* end of 006 */
/* 005 Article */
/* article tab bar */
.vector-menu-tabs .mw-list-item.vector-tab-noicon,
.vector-page-toolbar-container .vector-dropdown {
  margin: 0 8px;
  padding: 0 .5em;
}

/* hovered elements to accent color */
input:hover + .cdx-button.cdx-button--action-progressive {
  background-color: hsla(var(--accent-color-hue), 100%, 80%, 20%);
}

/* button focus border color */
:focus,
input:focus + .cdx-button {
  outline-color: var(--accent-color-darker);
  border-color: var(--accent-color-darker) !important;
  box-shadow: none !important;
}
input:focus + .cdx-button {
  border: 1px solid;
}

/* 005>001 Wikipedia articles content */
.vector-page-toolbar-container {
  flex-direction: column;
  box-shadow: none !important;
}
#left-navigation .vector-menu-tabs a {
  margin-top: .5rem;
  padding: .5rem 1rem;
  border-radius: 8px;
  border-bottom: none;
  &:hover {
    border-bottom: none;
    background-color: #0000000a;
  }
}
#left-navigation li {
  margin: 0;
}
#left-navigation .vector-menu-tabs .mw-list-item.selected a {
  box-shadow: 0 2px 5px #0003;
  border-bottom: none;
}
.vector-feature-zebra-design-disabled #vector-toc-pinned-container {
  top: 50px;
}
.infobox .infobox-above,
.infobox .infobox-title,
.infobox caption,
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
  line-height: 3em;
}
table.infobox,
table.infobox_v2,
.mw-parser-output .sidebar {
  border-radius: 10px;
  border-spacing: 0px;
  line-height: 2rem;
  border: none;
  outline: 1px solid var(--border-color-muted);;
  padding: .2rem !important;
}
.infobox th,
.infobox_v2 th {
  padding-left: 5px;
}
.infobox th,
.infobox_v2 th {
  border-radius: 8px;
}
.mw-parser-output .ambox {
  border-radius: 10px;
}
figure[typeof~='mw:File/Thumb'] > figcaption,
figure[typeof~='mw:File/Frame'] > figcaption {
  border: none;
}
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
div.thumbinner {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--border-color-muted);
  width: min-content;
  padding: .2rem !important;
  background-color: var(--background-color-base);
  min-width: 20%;
}
div.infobox_v3 {
  padding: 0;
  padding-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.infobox_v3 table {
  width: calc(100% - 10px);
  margin: 5px;
}
.infobox_v3 .navbar .plainlinks {
  margin-left: 5px;
}
.navbox {
  padding: 0 !important;
  overflow: hidden;
}
.mw-tmh-player {
  min-width: 230px;
}
div.navbox-container,
#bandeau-portail,
.mw-parser-output .documentation,
.mw-parser-output .documentation-metadata {
  border-radius: 10px;
}
.thumbcaption {
  line-height: 2;
}
.wikitable {
  margin: 2em 0;
  box-shadow: 0 3px 15px -10px #000;
}
.vector-feature-zebra-design-disabled .vector-toc .vector-toc-text {
  padding: 11px 0;
}
.mw-parser-output .navbox + .navbox,
.mw-parser-output .navbox + .navbox-styles + .navbox {
  margin-top: 5px;
}
.vector-body h2 {
  margin-top: 3em;
  font-size: 2em;
}
/* images */
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
  border: none;
  margin: 0;
}
@media (max-width: calc(639px)) {
  body.skin--responsive figure {
    width: fit-content;
  }
}
/* end of 005>001 */

/* video player / audio player */
.video-js,
.vjs-control-bar,
.video-js .vjs-volume-control {
  border-radius: 5px;
}
.video-js .vjs-volume-control {
  transform: translateY(-.2rem);
}
/* audio player play icon */
.mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon {
  background-color: var(--accent-color-normal);
  border-radius: 5px;
  &:hover {
    background-color: var(--accent-color-bright);
  }
}
/* loading bar */
.mw-tmh-player-progress {
  border: none;
  position: fixed;
  inset: 0;
  top: unset;
  z-index: 100;
}
.mw-tmh-player-progress-bar {
  height: .5rem;
  border-radius: 1em;
  animation: mw-tmh-player-progress-bar-slide 3s infinite linear;
  background-color: var(--accent-color-normal);
}
/* history page */
#pagehistory li {
  padding: .8em .5em;
}
/* */
#mwe-popups-settings {
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
}