Wikipedia Catppuccin by Ahava

/* ==UserStyle==
@name           Wikipedia Catppuccin
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Not an official catppuccin port
@author         Ahava
@preprocessor   less
@var select ctp-style "Style" {
  "Latte": "latte",
  "Frappe": "frappe",
  "Macchiato": "macchiato",
  "Mocha": "mocha"
}
==/UserStyle== */
@-moz-document regexp("^https?:\\/\\/[a-z-]+\\.wikipedia\\.org\\/(?:[^:\\/]+\\/[^:\\s]*)$") {
    :root {
        --background-color-base: e("var(--ctp-@{ctp-style}-base)") !important;
        --color-base: e("var(--ctp-@{ctp-style}-text)") !important;
        --color-progressive: e("var(--ctp-@{ctp-style}-blue)") !important;
        --color-emphasized: e("var(--ctp-@{ctp-style}-text)") !important;
        --background-color-neutral-subtle: e("var(--ctp-@{ctp-style}-mantle)") !important;
        --background-color-neutral: e("var(--ctp-@{ctp-style}-surface0)") !important;
        --background-color-interactive-subtle: e("var(--ctp-@{ctp-style}-crust)") !important;
    }
    
    html.skin-theme-clientpref-night .ve-ui-overlay {
        color: e("var(--ctp-@{ctp-style}-text)") !important;
    }
    
    .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
        background-color: e("var(--ctp-@{ctp-style}-mantle)") !important;
    }
    
    .oo-ui-fieldLayout-body {
        color: e("var(--ctp-@{ctp-style}-text)") !important;
    }
    
    .oo-ui-window-body {
        background-color: e("var(--ctp-@{ctp-style}-base)") !important;
    }
    
    .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
        background-color: e("var(--ctp-@{ctp-style}-blue)") !important;
    }

    .mw-parser-output .help-box {
        background-color: e("var(--ctp-@{ctp-style}-mantle)") !important;
    }
    
    html.skin-theme-clientpref-night .mw-parser-output [style*="background"] {
        color: e("var(--ctp-@{ctp-style}-mantle)") !important;
    }

    .mw-parser-output .help-box .sidebar-title {
        background-color: e("var(--ctp-@{ctp-style}-crust)") !important;
    }

    .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
    .ve-ui-mwTransclusionOutlineTemplateWidget-sticky {
        background-color: e("var(--ctp-@{ctp-style}-crust)") !important;
    }

    .ve-ui-mwTemplatePage-description {
        color: rgb(from e("var(--ctp-@{ctp-style}-text)") / 0.8) !important;
    }
    
    caption.infobox-title.fn.summary {
        color: var(--color-base) !important;
        background-color: var(--background-color-interactive-subtle) !important;
    }

    .infobox {
        color: var(--color-base) !important;
        background-color: var(--background-color-neutral-subtle) !important;
    }
    
    .oo-ui-icon-puzzle,
    .mw-ui-icon-puzzle::before {
        filter: invert(1);
    }

    .mwe-popups .mwe-popups-extract[dir="ltr"]::after {
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, e("var(--ctp-@{ctp-style}-base)") 90%) !important;
    }

    .ve-ui-expandableContent-fade {
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, e("var(--ctp-@{ctp-style}-crust)") 90%) !important;
    }

    .mw-inputbox-centered {
        background-color: inherit !important;
    }

    /* Table Colors */
    .active .table-active {
        background: e("var(--ctp-@{ctp-style}-green)") !important;
    }

    :root::selection {
        background-color: rgb(from e("var(--ctp-@{ctp-style}-overlay2)") / 0.3) !important;
    }

    .table-rh {
        background-color: e("var(--ctp-@{ctp-style}-mantle)") !important;
    }

    @media screen {
        a:visited {
            color: e("var(--ctp-@{ctp-style}-mauve)") !important;
        }
    }

    :root {
        --ctp-latte-rosewater: #dc8a78;
        --ctp-latte-rosewater-rgb: 220 138 120;
        --ctp-latte-rosewater-hsl: 10.800 58.824% 66.667%;
        --ctp-latte-flamingo: #dd7878;
        --ctp-latte-flamingo-rgb: 221 120 120;
        --ctp-latte-flamingo-hsl: 0.000 59.763% 66.863%;
        --ctp-latte-pink: #ea76cb;
        --ctp-latte-pink-rgb: 234 118 203;
        --ctp-latte-pink-hsl: 316.034 73.418% 69.020%;
        --ctp-latte-mauve: #8839ef;
        --ctp-latte-mauve-rgb: 136 57 239;
        --ctp-latte-mauve-hsl: 266.044 85.047% 58.039%;
        --ctp-latte-red: #d20f39;
        --ctp-latte-red-rgb: 210 15 57;
        --ctp-latte-red-hsl: 347.077 86.667% 44.118%;
        --ctp-latte-maroon: #e64553;
        --ctp-latte-maroon-rgb: 230 69 83;
        --ctp-latte-maroon-hsl: 354.783 76.303% 58.627%;
        --ctp-latte-peach: #fe640b;
        --ctp-latte-peach-rgb: 254 100 11;
        --ctp-latte-peach-hsl: 21.975 99.184% 51.961%;
        --ctp-latte-yellow: #df8e1d;
        --ctp-latte-yellow-rgb: 223 142 29;
        --ctp-latte-yellow-hsl: 34.948 76.984% 49.412%;
        --ctp-latte-green: #40a02b;
        --ctp-latte-green-rgb: 64 160 43;
        --ctp-latte-green-hsl: 109.231 57.635% 39.804%;
        --ctp-latte-teal: #179299;
        --ctp-latte-teal-rgb: 23 146 153;
        --ctp-latte-teal-hsl: 183.231 73.864% 34.510%;
        --ctp-latte-sky: #04a5e5;
        --ctp-latte-sky-rgb: 4 165 229;
        --ctp-latte-sky-hsl: 197.067 96.567% 45.686%;
        --ctp-latte-sapphire: #209fb5;
        --ctp-latte-sapphire-rgb: 32 159 181;
        --ctp-latte-sapphire-hsl: 188.859 69.953% 41.765%;
        --ctp-latte-blue: #1e66f5;
        --ctp-latte-blue-rgb: 30 102 245;
        --ctp-latte-blue-hsl: 219.907 91.489% 53.922%;
        --ctp-latte-lavender: #7287fd;
        --ctp-latte-lavender-rgb: 114 135 253;
        --ctp-latte-lavender-hsl: 230.935 97.203% 71.961%;
        --ctp-latte-text: #4c4f69;
        --ctp-latte-text-rgb: 76 79 105;
        --ctp-latte-text-hsl: 233.793 16.022% 35.490%;
        --ctp-latte-subtext1: #5c5f77;
        --ctp-latte-subtext1-rgb: 92 95 119;
        --ctp-latte-subtext1-hsl: 233.333 12.796% 41.373%;
        --ctp-latte-subtext0: #6c6f85;
        --ctp-latte-subtext0-rgb: 108 111 133;
        --ctp-latte-subtext0-hsl: 232.800 10.373% 47.255%;
        --ctp-latte-overlay2: #7c7f93;
        --ctp-latte-overlay2-rgb: 124 127 147;
        --ctp-latte-overlay2-hsl: 232.174 9.623% 53.137%;
        --ctp-latte-overlay1: #8c8fa1;
        --ctp-latte-overlay1-rgb: 140 143 161;
        --ctp-latte-overlay1-hsl: 231.429 10.048% 59.020%;
        --ctp-latte-overlay0: #9ca0b0;
        --ctp-latte-overlay0-rgb: 156 160 176;
        --ctp-latte-overlay0-hsl: 228.000 11.236% 65.098%;
        --ctp-latte-surface2: #acb0be;
        --ctp-latte-surface2-rgb: 172 176 190;
        --ctp-latte-surface2-hsl: 226.667 12.162% 70.980%;
        --ctp-latte-surface1: #bcc0cc;
        --ctp-latte-surface1-rgb: 188 192 204;
        --ctp-latte-surface1-hsl: 225.000 13.559% 76.863%;
        --ctp-latte-surface0: #ccd0da;
        --ctp-latte-surface0-rgb: 204 208 218;
        --ctp-latte-surface0-hsl: 222.857 15.909% 82.745%;
        --ctp-latte-base: #eff1f5;
        --ctp-latte-base-rgb: 239 241 245;
        --ctp-latte-base-hsl: 220.000 23.077% 94.902%;
        --ctp-latte-mantle: #e6e9ef;
        --ctp-latte-mantle-rgb: 230 233 239;
        --ctp-latte-mantle-hsl: 220.000 21.951% 91.961%;
        --ctp-latte-crust: #dce0e8;
        --ctp-latte-crust-rgb: 220 224 232;
        --ctp-latte-crust-hsl: 220.000 20.690% 88.627%;
    }

    :root {
        --ctp-frappe-rosewater: #f2d5cf;
        --ctp-frappe-rosewater-rgb: 242 213 207;
        --ctp-frappe-rosewater-hsl: 10.286 57.377% 88.039%;
        --ctp-frappe-flamingo: #eebebe;
        --ctp-frappe-flamingo-rgb: 238 190 190;
        --ctp-frappe-flamingo-hsl: 0.000 58.537% 83.922%;
        --ctp-frappe-pink: #f4b8e4;
        --ctp-frappe-pink-rgb: 244 184 228;
        --ctp-frappe-pink-hsl: 316.000 73.171% 83.922%;
        --ctp-frappe-mauve: #ca9ee6;
        --ctp-frappe-mauve-rgb: 202 158 230;
        --ctp-frappe-mauve-hsl: 276.667 59.016% 76.078%;
        --ctp-frappe-red: #e78284;
        --ctp-frappe-red-rgb: 231 130 132;
        --ctp-frappe-red-hsl: 358.812 67.785% 70.784%;
        --ctp-frappe-maroon: #ea999c;
        --ctp-frappe-maroon-rgb: 234 153 156;
        --ctp-frappe-maroon-hsl: 357.778 65.854% 75.882%;
        --ctp-frappe-peach: #ef9f76;
        --ctp-frappe-peach-rgb: 239 159 118;
        --ctp-frappe-peach-hsl: 20.331 79.085% 70.000%;
        --ctp-frappe-yellow: #e5c890;
        --ctp-frappe-yellow-rgb: 229 200 144;
        --ctp-frappe-yellow-hsl: 39.529 62.044% 73.137%;
        --ctp-frappe-green: #a6d189;
        --ctp-frappe-green-rgb: 166 209 137;
        --ctp-frappe-green-hsl: 95.833 43.902% 67.843%;
        --ctp-frappe-teal: #81c8be;
        --ctp-frappe-teal-rgb: 129 200 190;
        --ctp-frappe-teal-hsl: 171.549 39.227% 64.510%;
        --ctp-frappe-sky: #99d1db;
        --ctp-frappe-sky-rgb: 153 209 219;
        --ctp-frappe-sky-hsl: 189.091 47.826% 72.941%;
        --ctp-frappe-sapphire: #85c1dc;
        --ctp-frappe-sapphire-rgb: 133 193 220;
        --ctp-frappe-sapphire-hsl: 198.621 55.414% 69.216%;
        --ctp-frappe-blue: #8caaee;
        --ctp-frappe-blue-rgb: 140 170 238;
        --ctp-frappe-blue-hsl: 221.633 74.242% 74.118%;
        --ctp-frappe-lavender: #babbf1;
        --ctp-frappe-lavender-rgb: 186 187 241;
        --ctp-frappe-lavender-hsl: 238.909 66.265% 83.725%;
        --ctp-frappe-text: #c6d0f5;
        --ctp-frappe-text-rgb: 198 208 245;
        --ctp-frappe-text-hsl: 227.234 70.149% 86.863%;
        --ctp-frappe-subtext1: #b5bfe2;
        --ctp-frappe-subtext1-rgb: 181 191 226;
        --ctp-frappe-subtext1-hsl: 226.667 43.689% 79.804%;
        --ctp-frappe-subtext0: #a5adce;
        --ctp-frappe-subtext0-rgb: 165 173 206;
        --ctp-frappe-subtext0-hsl: 228.293 29.496% 72.745%;
        --ctp-frappe-overlay2: #949cbb;
        --ctp-frappe-overlay2-rgb: 148 156 187;
        --ctp-frappe-overlay2-hsl: 227.692 22.286% 65.686%;
        --ctp-frappe-overlay1: #838ba7;
        --ctp-frappe-overlay1-rgb...