Gives a more modern look to Wikipedia.
Modern Wikipedia by Tiago
Details
AuthorTiago
LicenseCC BY-SA
CategoryWikipedia
Created
Updated
Size9.0 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Doesn't work for all languages of Wikipedia.
Tested with French and English.
Source code
/* ==UserStyle==
@name Modern Wikipedia
@version 20240504.09.28
@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") {
:root {
--accent-color-hue: 220;
--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%);
}
/* main landing page 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);
}
}
/* main landing page 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;
}
/* search field in header bar */
#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;
}
/* general button styling */
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;
}
/* language specific home page */
.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 homepage styling */
img {
border-radius: 5px;
}
/* fixed header */
html {
background-color: white;
}
.vector-header-container {
padding: 0 25px;
}
body {
margin-top: 5rem;
}
.vector-header-container {
position: fixed;
top: 0px;
left: 50%;
width: 100%;
z-index: 10;
transform: translatex(-50%);
border-bottom: 1px solid #dcdcdc;
box-shadow: 0 5px 15px #00000017;
}
.vector-header-container::before,
.vector-header-container::after {
content: "";
height: 80px;
width: 100px;
background-color: #fff;
position: absolute;
top: 0px;
}
.vector-header-container::before {
left: -100px;
}
.vector-header-container::after {
right: -100px;
}
.vector-menu-tabs .mw-list-item.vector-tab-noicon,
.vector-page-toolbar-container .vector-dropdown {
margin: 0 8px;
padding: 0 .5em;
}
.vector-below-page-title .vector-column-start,
.vector-below-page-title .vector-column-end {
transform: translateY(5rem);
}
/* */
.cdx-text-input,
.cdx-text-input__input {
height: 38px;
}
.cdx-button,
.catlinks,
.navbox,
.bandeau-article {
border-radius: 10px;
}
/* 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);
}
/* 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);
}
/* hovered elements to accent color */
input:hover + .cdx-button.cdx-button--action-progressive {
background-color: hsla(var(--accent-color-hue), 100%, 80%, 20%);
}
/* 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;
}
/* Wikipedia articles */
.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 #dcdcdc;
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 #dcdcdc;
width: min-content;
padding: .2rem !important;
background-color: white;
}
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;
}
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
border: none;
margin: 0;
}
/* 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);
}
}
/* 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);
}
/* 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;
}
/* 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: 1px solid white;
}
}