☰

Wikipedia Vector 2022 Redesign

various typographic improvements and bug fixes to wikipedia's vector 2022 theme

// ==UserScript==
// @name         Wikipedia Vector 2022 Redesign
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  various typographic improvements and bug fixes to wikipedia's vector 2022 theme
// @author       tinytinytinytiny
// @run-at       document-start
// @match        http://wikipedia.org/*
// @match        https://wikipedia.org/*
// @match        http://*.wikipedia.org/*
// @match        https://*.wikipedia.org/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width,initial-scale=1');

    const styles = {
        ':root': {
            '--link-color': '#0645ad',
            '--step--1': 'clamp(0.915rem, 0.885rem + 0.17vw, 1.0125rem)',
            '--step-0': 'clamp(1.00rem, 0.96rem + 0.22vw, 1.125rem)',
            '--step-1': 'clamp(1.20rem, 1.15rem + 0.26vw, 1.35rem)',
            '--step-2': 'clamp(1.44rem, 1.33rem + 0.55vw, 1.8rem)',
            '--step-3': 'clamp(1.73rem, 1.56rem + 0.82vw, 2.20rem)'
        },
        'body.skin-vector-2022': {
            'background-color': 'unset',
            'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Lato", "Helvetica", "Arial", sans-serif',
            'font-size': 'var(--step-0)',
            'overflow': 'hidden auto'
        },
        '.skin-vector-2022 a': {
            'color': 'var(--link-color)',
            'text-decoration-thickness': 'from-font',
            'text-underline-position': 'under'
        },
        '.skin-vector-2022 a:hover, .skin-vector-2022 a:active': {
            'text-decoration': 'underline',
        },
        '.skin-vector-2022 a:active, .skin-vector-2022 .mw-parser-output a.extiw:active, .skin-vector-2022 .mw-parser-output a.external:active': {
            'color': 'var(--link-color)',
            'text-decoration-thickness': '2px'
        },
        '.skin-vector-2022 div:has(> table)': {
            'overflow-x': 'auto'
        },
        '.vector-feature-page-tools-disabled .vector-main-menu': {
            'background-color': 'unset'
        },
        '.skin-vector-2022 .mw-header': {
            'position': 'relative'
        },
        '.skin-vector-2022 .mw-header::before': {
            'background-color': '#f8f9fa',
            'content': '""',
            'inset': '0 50%',
            'margin-inline': '-50vw',
            'position': 'absolute',
            'z-index': '-1'
        },
        '.skin-vector-2022 .mw-parser-output': {
            'overflow': 'visible'
        },
        '.skin-vector-2022 .mw-body': {
            'padding': '1.5em 0'
        },
        '.skin-vector-2022 .vector-body': {
            'font-family': 'var(--font-serif)',
            'font-size': 'inherit',
            'line-height': '1.65',
            'position': 'static',
            'z-index': 'auto'
        },
        '.skin-vector-2022 .mw-body h1, .skin-vector-2022 .mw-body-content h1': {
            'font-size': 'var(--step-3)'
        },
        '.skin-vector-2022 .vector-body h2': {
            'font-size': 'var(--step-2)',
            'margin-top': '1.5em'
        },
        '.skin-vector-2022 .vector-body h3': {
            'font-size': 'var(--step-1)'
        },
        '.skin-vector-2022 .vector-body .mp-h2': {
            'margin-top': '0.5em'
        },
        '.skin-vector-2022 .vector-body p': {
            'margin': '0.5em 0 1em 0'
        },
        '.skin-vector-2022 .vector-page-toolbar-container, .skin-vector-2022 table, .skin-vector-2022 .catlinks, .skin-vector-2022 .reflist, .skin-vector-2022 .thumbcaption, .vector-toc .vector-toc-list-item a': {
            'font-size': 'var(--step--1)'
        },
        '.skin-vector-2022 .vector-body-before-content': {
            'align-items': 'baseline',
            'display': 'flex',
            'flex-direction': 'row-reverse'
        },
        '.skin-vector-2022 .vector-body #siteSub': {
            'flex-grow': '1',
            'font-size': '0.75em',
            'margin': '0',
            'padding-top': '0.5em'
        },
        '.skin-vector-2022 .mw-indicators img': {
            'vertical-align': 'text-bottom'
        },
        '.skin-vector-2022 #coordinates': {
            'top': '2.65em'
        },
        '.vector-toc-pinned #vector-toc-pinned-container': {
            'padding-top': '0'
        },
        '.skin-vector-2022 .vector-toc': {
            'max-height': '100dvh',
            'overscroll-behavior': 'contain',
            'padding-bottom': '30px'
        },
        '.skin-vector-2022 .vector-toc .vector-toc-contents, .skin-vector-2022 .vector-toc .vector-toc-list': {
            'line-height': 'inherit'
        },
        '.skin-vector-2022 .vector-toc-toggle': {
            'top': '0.2em'
        },
        '.skin-vector-2022 .infobox': {
            'margin-left': '2em',
            'line-height': '1.55'
        }
    };

    const stylesheet = new CSSStyleSheet();
    stylesheet.replace(
        Object.entries(styles)
        .map(([selector, properties]) =>
             `${selector} { ${Object.entries(properties).map(([prop, value]) => `${prop}: ${value};`).join(' ')} }`)
        .join(' ')
    ).then(() => {
        document.adoptedStyleSheets = [stylesheet];
    });
})();