Wikipedia Catppuccin by Iridescent-cdu

/* ==UserStyle==
@name Wikipedia Catppuccin
@namespace github.com/catppuccin/userstyles/styles/wikipedia
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/wikipedia
@version 0.0.22
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Awikipedia
@description Soothing pastel theme for Wikipedia
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
@var checkbox highlight-redirect "Highlight redirect links" 0
==/UserStyle== */

@-moz-document domain('wikipedia.org') {
  @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css");

  @media (prefers-color-scheme: light) {
    :root {
      #catppuccin(@lightFlavor, @accentColor);
    }
  }
  @media (prefers-color-scheme: dark) {
    :root {
      #catppuccin(@darkFlavor, @accentColor);
    }
  }

  #catppuccin(@lookup, @accent) {
    @rosewater: @catppuccin[@@lookup][@rosewater];
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    color-scheme: if(@lookup = latte, light, dark);

    ::selection {
      background-color: fade(@accent-color, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    --ctp-rosewater: @rosewater;
    --ctp-flamingo: @flamingo;
    --ctp-pink: @pink;
    --ctp-mauve: @mauve;
    --ctp-red: @red;
    --ctp-maroon: @maroon;
    --ctp-peach: @peach;
    --ctp-yellow: @yellow;
    --ctp-green: @green;
    --ctp-teal: @teal;
    --ctp-sky: @sky;
    --ctp-sapphire: @sapphire;
    --ctp-blue: @blue;
    --ctp-lavender: @lavender;
    --ctp-text: @text;
    --ctp-subtext1: @subtext1;
    --ctp-subtext0: @subtext0;
    --ctp-overlay2: @overlay2;
    --ctp-overlay1: @overlay1;
    --ctp-overlay0: @overlay0;
    --ctp-surface2: @surface2;
    --ctp-surface1: @surface1;
    --ctp-surface0: @surface0;
    --ctp-base: @base;
    --ctp-mantle: @mantle;
    --ctp-crust: @crust;

    --background-color-base: @base;

    body,
    .vector-feature-zebra-design-enabled .vector-header-container .mw-header,
    .vector-feature-zebra-design-enabled .mw-page-container,
    .vector-feature-zebra-design-enabled .vector-pinned-container,
    .vector-feature-zebra-design-enabled
      .vector-dropdown
      .vector-dropdown-content,
    .uls-lcd,
    .uls-search,
    .uls-filtersuggestion,
    #uls-settings-block.uls-settings-block--vector-2022.uls-settings-block--with-add-languages,
    .app-badges .footer-sidebar-content,
    .pure-form input[type="search"],
    .suggestions-dropdown,
    .cdx-menu,
    .vector-header-container .mw-header,
    .mw-page-container,
    .vector-pinned-container,
    .vector-header-container .vector-sticky-header,
    .mw-mmv-image,
    .mw-body,
    .frb-form-wrapper,
    .mw-echo-ui-placeholderItemWidget,
    .oo-ui-popupWidget-popup,
    .mw-echo-ui-notificationItemWidget,
    .oo-ui-optionWidget-selected {
      background-color: @base;
    }

    body,
    .mw-heading,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .vector-feature-zebra-design-enabled body,
    .vector-feature-zebra-design-enabled
      .vector-toc
      .vector-toc-list-item-active
      > .vector-toc-link,
    .vector-feature-zebra-design-enabled
      .vector-toc
      .vector-toc-level-1-active:not(.vector-toc-list-item-expanded)
      > .vector-toc-link,
    .vector-feature-zebra-design-enabled
      .vector-toc
      .vector-toc-list-item-active.vector-toc-level-1-active
      > .vector-toc-link,
    .vector-menu-tabs .mw-list-item.selected a,
    .vector-menu-tabs .mw-list-item.selected a:visited,
    .cdx-button:enabled,
    .cdx-button.cdx-button--fake-button--enabled,
    .mw-footer li,
    .vector-feature-zebra-design-enabled
      .vector-toc
      .vector-toc-level-1-active:not(.vector-toc-list-item-active)
      > .vector-toc-link,
    .central-featured-lang small,
    .footer-sidebar-text,
    .other-project-tagline,
    .site-license,
    .search-container .js-langpicker-label,
    .langlist > ul > li,
    .suggestion-title,
    .cdx-menu-item--enabled .cdx-menu-item__content,
    .mwe-popups .mwe-popups-extract,
    .mw-body-content .mw-number-text h3,
    .vector-pinnable-element .vector-menu-heading,
    .vector-toc .vector-toc-list-item-active > .vector-toc-link,
    .vector-toc
      .vector-toc-level-1-active:not(.vector-toc-list-item-expanded)
      > .vector-toc-link,
    .vector-toc
      .vector-toc-list-item-active.vector-toc-level-1-active
      > .vector-toc-link,
    .uls-empty-state .uls-empty-state__header,
    .uls-empty-state .uls-empty-state__desc,
    .uls-no-results-found-title,
    .mw-mmv-post-image,
    .mw-mmv-credit,
    .frb-form-wrapper,
    .mw-echo-ui-notificationItemWidget-content-message-header,
    .oo-ui-labelElement,
    #contentSub:not(:empty) {
      color: @text !important;
    }

    .mw-parser-output .fmbox {
      border-color: @surface2 !important;
      background-color: @base !important;
    }

    .cdx-thumbnail__image {
      border-color: @text;
    }

    /* maths */
    .equation-box,
    .equation-box * {
      background: none !important;
    }
    img.mwe-math-fallback-image-display,
    img.mwe-math-fallback-image-inline {
      & when (@lookup = latte) {
        filter: brightness(0) saturate(100%) invert(31%) sepia(9%)
          saturate(1499%) hue-rotate(196deg) brightness(90%) contrast(85%);
      }

      & when (@lookup = frappe) {
        filter: brightness(0) saturate(100%) invert(92%) sepia(6%)
          saturate(3753%) hue-rotate(184deg) brightness(93%) contrast(106%);
      }

      & when (@lookup = macchiato) {
        filter: brightness(0) saturate(100%) invert(82%) sepia(7%)
          saturate(1042%) hue-rotate(193deg) brightness(103%) contrast(92%);
      }

      & when (@lookup = mocha) {
        filter: brightness(0) saturate(100%) invert(83%) sepia(28%)
          saturate(223%) hue-rotate(190deg) brightness(99%) contrast(93%);
      }
    }

    .mwe-popups .mwe-popups-extract[dir="ltr"]::after {
      background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        @surface0 50%
      );
    }
    table {
      background: @surface2 !important;
    }

    tr {
      background-color: @surface0 !important;
    }

    th {
      background: @overlay0 !important;
      color: @mantle !important;
    }

    .quotebox,
    div.thumbinner {
      background-color: @surface0 !important;
      border-color: @surface2 !important;
    }

    .navbox-group,
    .infobox-label {
      color: @text !important;
    }

    .cdx-button:enabled,
    .cdx-text-input__input:enabled {
      color: @text;
      background-color: @base;
      border-color: @surface2;
      &:hover {
        background-color: @mantle;
        border-color: @text;
        color: @text;
      }
    }

    .vector-dropdown .vector-dropdown-content,
    .header-container.header-chrome {
      background-color: @mantle;
    }

    .skin-vector .uls-search {
      border-bottom-color: @surface2;
    }

    .oo-ui-textInputWidget,
    .oo-ui-inputWidget-input {
      color: @text !important;
      background-color: @surface1 !important;
      border-color: @surface2 !important;
    }

    .oo-ui-pendingElement-pending {
      background-color: @base;
      background-image: linear-gradient(
        135deg,
        @surface0 25%,
        transparent 25%,
        transparent 50%,
        @surface0 50%,
        @surface0 75%,
        transparent 75%,
        transparent
      );
    }

    .oo-ui-tagItemWidget.oo-ui-widget-disabled {
      color: @text;
      background-color: @overlay0;
      text-shadow: 0 0 0 @text;
      border-color: @surface0;
    }

    .oo-ui-buttonElement-frameless.oo-ui-widget-enabled
      > .oo-ui-buttonElement-button,
    .mw-mmv-credit,
    .mw-mmv-options-dialog-header,
    .mw-mmv-options-text-header {
      color: @text;
    }

    .mw-mmv-options-text-body {
      color: @subtext0;
    }

    .mw-ui-input:not(:disabled) {
      background-color: @surface0;
      color: @text;
      border-color: @surface2;
    }

    .mw-ui-button {
      color: @mantle;
      background-color: @accent-color;
      border-color: @accent-color;
    }

    .imbox-delete {
      border-color: @red !important;
      background-color: @surface0 !important;
    }

    .imbox {
      background-color: @overlay0 !important;
      borde...