MDN 2022 redesign usability fixes, use with Stylus (https://add0n.com/stylus.html)

mdn-usability.user.css

/* ==UserStyle==
@name           MDN Usability Fixes
@namespace      kiito
@version        1.0.3
@description    A collection of small contrast and usability fixes for the March 2022 MDN redesign.
@author         kiito
@license        CC-BY-4.0
@updateURL      https://gist.githubusercontent.com/KiitoX/738160b8373c89b7709d0e92620d83eb/raw/mdn-usability.user.css
==/UserStyle== */

@-moz-document domain("developer.mozilla.org") {
    :root {
        --type-code-inline: 600 0.875em/1.5 var(--font-code);
        --type-heading-h1: 600 2.25rem/1.138 var(--font-heading);
    }

    .light {
        --text-secondary: rgb(8, 16, 64);
        --css-code-inline: rgb(233, 233, 233);
        --css-code-block: rgb(244, 244, 244);
    }

    .dark {
        --text-primary: rgb(200, 200, 200);
        --text-secondary: rgb(250, 250, 250);
        --css-code-inline: rgb(40, 40, 60);
    }

    .dark .sidebar,
    .dark .sidebar a {
        color: var(--text-primary);
    }
    .dark .sidebar-heading {
        color: var(--text-secondary);
    }

    pre {
        border: none;
        border-left: solid 4px var(--border-primary);
    }

    code {
        font: var(--type-code-inline);
    }
    pre > code {
        font: var(--type-code-regular);
    }

    a {
        text-decoration: underline;
    }

    table.properties {
        border: 2px solid var(--border-primary);
        border-left-width: 6px;
    }
    table.properties tr {
        border-width: 2px;
        border-color: var(--border-primary);
    }
    table.properties th {
        padding-left: 16px;
    }

    abbr.icon.icon-yes {
        background-color: var(--icon-success);
    }
    abbr.icon.icon-partial {
        background-color: var(--icon-warning);
    }
    abbr.icon.icon-no {
        background-color: var(--icon-critical);
    }
    abbr.icon.icon-experimental,
    abbr.icon.icon-altname {
        background-color: var(--icon-information);
    }

    svg.icon.icon-experimental {
        color: transparent;
        background-color: var(--icon-information);
    }
    svg.icon.icon-nonstandard {
        color: var(--icon-warning);
    }
}

@-moz-document domain("interactive-examples.mdn.mozilla.net") {
    .live .example-choice,
    .live .example-choice::before,
    .live .example-choice .example-choice-button {
        transition: none;
    }
    
    .live .example-choice .example-choice-button,
    .live .example-choice::before {
        border-width: 10px;
        transform: translateX(50%) translateY(-50%);
    }

    .live .example-choice {
        border-left-width: 4px;
        border-radius: 0;
    }
    .live .example-choice.selected {
        box-shadow: none;
    }

    .example-choice-list.large.live, .example-choice-list.live {
        overflow: hidden;
    }
}