catppuccin.user.css

/* ==UserStyle==
@name Arch Wiki Catppuccin
@namespace github.com/catppuccin/userstyles/styles/arch-wiki
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/arch-wiki
@version 0.0.9
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/arch-wiki/catppuccin.user.css
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Aarch-wiki
@description Soothing pastel theme for Arch Wiki
@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"]
==/UserStyle== */

@-moz-document domain('wiki.archlinux.org') {
  @media (prefers-color-scheme: dark) {
    :root {
      #catppuccin(@darkFlavor, @accentColor);
    }
  }
  @media (prefers-color-scheme: light) {
    :root {
      #catppuccin(@lightFlavor, @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;
      }
    }

    #content table,
    #content h1,
    #content h2,
    #content h3,
    #content h4,
    #content h5,
    #content pre,
    #content code,
    #content tt {
      color: @text !important;
    }

    body.skin-vector-2022 .vector-sticky-header {
      color: @text !important;
      background-color: @mantle !important;
      border-bottom-color: @blue !important;
    }

    #vector-main-menu-pinned-container,
    #vector-page-tools-pinned-container {
      background-color: @base !important;
    }

    #ooui-php-191,
    #preferences .mw-htmlform-submit-buttons {
      background-color: @mantle !important;
    }

    .mw-echo-ui-notificationItemWidget-content-message-header,
    .oo-ui-labelElement-label {
      color: @text !important;
    }

    .oo-ui-optionWidget-selected {
      background-color: @surface2 !important;
    }

    .oo-ui-buttonElement-framed.oo-ui-widget-disabled
      > .oo-ui-buttonElement-button {
      background-color: @surface0 !important;
      color: @text !important;
      border-color: @surface2 !important;
      filter: brightness(0.4);
      cursor: not-allowed;
    }

    .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
      background-color: @surface1 !important;
    }

    .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
      background-color: @surface2 !important;
    }

    .mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(odd) td,
    .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
      .oo-ui-tagMultiselectWidget-handle,
    .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined
      .oo-ui-tagItemWidget.oo-ui-widget-enabled,
    .mw-rcfilters-ui-cell.mw-rcfilters-ui-filterTagMultiselectWidget-views-select,
    .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
    .oo-ui-popupWidget-popup,
    .mw-echo-ui-notificationItemWidget,
    .mw-echo-ui-placeholderItemWidget {
      background-color: @surface0 !important;
    }

    .mw-echo-ui-notificationsInboxWidget-toolbarWrapper {
      background-color: @base !important;
    }

    #archnavbar {
      background-color: @mantle !important;
      border-bottom-color: @blue !important;
    }
    .mw-parser-output {
      background-color: @base !important;
    }

    .mw-page-container {
      background-color: @base !important;
    }

    .vector-header-container {
      background-color: @base !important;
    }

    #content,
    header.mw-header li:not(.new),
    #mw-panel-toc,
    #mw-navigation li:not(.new),
    #mw-panel li:not(.new),
    #column-one li:not(.new),
    #footer {
      a:not([role="button"], .new) {
        color: @blue !important;
      }
    }

    @media screen {
      html.client-darkmode {
        background-color: @base;
      }
    }

    .vector-feature-zebra-design-disabled,
    body {
      background-color: @base;
    }

    #archnavbarlogo {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" version="1" width="600" height="126"><path d="M159.568 34.427c-8.89-.014-16.267 1.809-19.12 2.803l-2.937 15.857c-.007.058 14.617-3.9 21.059-3.667 10.665.383 11.646 4.076 11.46 9.06.182.292-2.752-4.503-11.979-4.664-11.64-.2-28.069 4.122-28.046 21.692-.314 19.765 14.764 25.579 25.032 25.686 9.232-.168 13.563-3.496 15.934-5.28 3.115-3.257 6.679-6.532 10.078-10.462-3.216 5.844-6.005 9.884-8.907 12.977v2.611l14.033-2.361.096-38.144c-.143-5.399 3.096-26.057-26.703-26.108m-2.016 33.21c5.817.08 12.488 2.948 12.497 9.849.03 6.277-7.863 9.651-12.996 9.598-5.135-.053-11.949-4.036-11.979-10.155.099-5.47 6.426-9.432 12.478-9.291zm37.972-29.685-.095 63.166 16.348-3.15.027-35.814c.004-5.333 7.62-11.564 17.178-11.464 2.028-3.67 5.84-13.05 6.77-15.183-21.351-.051-21.623 6.137-25.336 9.18-.04-5.806-.013-9.292-.013-9.292zm92.002 8.292c-.158-.074-8.526-9.788-25.35-9.864-15.758-.262-33.433 5.847-33.716 32.27.138 23.232 16.979 32.311 33.805 32.488 18.007.187 25.172-11.26 25.602-11.543-2.149-1.863-10.196-9.837-10.196-9.837s-5.027 7.157-14.779 7.248c-9.755.093-18.234-7.54-18.354-18.189-.125-10.65 7.795-16.419 18.427-16.885 9.205-.002 14.516 5.943 14.516 5.943zm20.606-30.399-15.434 3.628.115 82.277 15.204-2.745.172-38.72c.033-4.06 5.874-10.295 15.626-10.097 9.325.097 11.41 6.215 11.384 6.988l.269 44.824 14.993-2.65.057-47.53c.099-4.574-10.018-14.233-26.28-14.302-7.729.012-12.009 1.762-14.187 3.052-3.726 2.879-7.985 5.637-12.17 9.157 3.869-4.97 7.117-8.407 10.29-10.961z" fill="@{text}" fill-rule="evenodd"/><path d="m360.136 17.218 6.962-1.742.33 82.95-7.074 1.204zm18.928 24.757 6.101-2.716.052 59.478-5.892 1.217zm-1.45-21.448 4.92-4.015 4.086 4.547-4.921 4.121zm19.024 20.365 6.962-1.421.033 12.434c.001.534 3.823-13.89 22.258-13.57 17.9.1 20.827 13.957 20.73 17.064l.221 43.725-6.102 1.324-.035-43.189c.07-1.261-2.79-11.927-15.439-11.966-12.646-.037-21.409 9.186-21.393 15.078l.1 38.047-7.07 1.847zm110.954 58.546-6.962 1.42-.033-12.433c-.001-.534-3.825 13.89-22.258 13.57-17.9-.1-20.827-13.957-20.73-17.064l-.221-43.725 7.397-1.494.114 43.19c.003 1.18 1.416 12.096 14.065 12.135 12.646.037 21.506-7.616 21.569-19.139l-.09-34.076 6.885-1.757zm13.645-59.037-4.882 3.82 18.717 24.494-19.963 28.3 5.179 3.843 18.766-26.28 19.368 26.902 4.791-3.82-20.757-28.765 16.56-23.262-5.092-4.305-15.085 21.525zM61.88 1.778c-5.385 13.203-8.633 21.839-14.629 34.649 3.676 3.896 8.188 8.434 15.516 13.559-7.878-3.242-13.252-6.497-17.267-9.874-7.673 16.011-19.695 38.818-44.09 82.65 19.174-11.068 34.037-17.893 47.889-20.497a35 35 0 0 1-.91-8.213l.023-.614c.304-12.284 6.694-21.73 14.264-21.09 7.57.642 13.454 11.126 13.15 23.41-.058 2.312-.319 4.536-.774 6.598 13.701 2.68 28.405 9.487 47.32 20.407-3.73-6.866-7.059-13.056-10.238-18.95-5.007-3.882-10.23-8.933-20.884-14.402 7.323 1.903 12.566 4.099 16.653 6.552C75.58 35.786 72.963 27.79 61.88 1.778" fill="@{blue}" fill-rule="evenodd"/><path d="M576.771 93.265V80.603h-4.73v-1.695h11.38v1.695h-4.75v12.662zm8.629 0V78.908h2.859l3.398 10.166q.47 1.42.686 2.125.245-.784.764-2.301l3.437-9.99h2.556v14.357h-1.831V81.25l-4.172 12.016h-1.714l-4.152-12.222v12.222h-1.832" font-weight="400" font-size="8.441" font-family="DejaVu Sans Mono" fill="@{subtext1}"/></svg>'
      );
      background: url("data:image/svg+xml,@{svg}") !important;
      background-size: 190px 40px !important;
    }
    .cdx-text-input__input:enabled:focus {
      border-color: @blue;
      box-shadow: @blue !important;
    }

    .archwiki-template-box-tip {
      background-color: fadeout(hsla(90, 90%, 65%, 0.3), 10%) !important;
      border-color: fadeout(hsla(90, 90%, 75%, 0.3), 10%);
      color: @subtext1;
    }

    .archwiki-template-box-note {
      background-color: fadeout(hsla(208, 100%, 61%, 0.3), 5%) !important;
      border-color: fadeout(hsla(208, 100%, 81%, 0.3), 5%) !important;
      color: @subtext1;
    }

    .archwiki-template-box-warning {
      background-color: fadeout(hsla(7, 99%, 60%, 0.3), 5%) !important;
      border-color: fadeout(hsla(7, 99%, 80%, 0.3), 05%) !important;
      color: @subtext1;
    }

    .firstHeading {
      color: @accent-color !important;
    }

    #content {
      border-color: @overlay0;
    }

    #content pre:not([class*="CodeMirror"]),
    #content code,
    #content tt {
      background-color: @surface0;
      color: @text;
      border-color: @overlay0;
    }

    .vector-pinned-container {
      border-color: @overlay0 !important;
    }

    .vector-pinnable-header-label {
      color: @text;
    }

    .vector-pinnable-header-toggle-button,
    .vector-pinnable-header-unpin-button {
      color: @mantle;
      background-color: @accent-color;
      border-color: @base;
    }

    .wikitable {
      background-color: @base;
    }

    .wikitable > tr > th,
    .wikitable > tr > td,
    .wikitable > * > tr > th,
    .wikitable > * > tr > td {
      color: @text;
      border-color: @crust;
    }

    .wikitable > tr > th,
    .wikitable > * > tr > th {
      background-color: @mantle;
      color: @text;
    }

    .pre {
      color: @mantle;
    }

    .mw-headline {
      color: @text;
    }

    .plainlinks,
    .archwiki-template-man,
    .external text {
      color: multiply(@blue, #555);
    }

    .cdx-button:enabled.cdx-button--weight-quiet,
    .cdx-button.cdx-button--fake-button--enabled,
    .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet,
    .diff-context,
    .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle,
    .oo-ui-checkboxInputWidget [type="checkbox"] + span {
      background-color: @surface0;
      color: @text;
      border-color: @surface2;
    }

    .vector-feature-zebra-design-disabled,
    #contentSub:not(:empty) {
      color: @surface0 !important;
    }

    .mw-editfont-monospace {
      background-color: @surface0;
      color: @text;
      border-color: @surface1;
    }

    .diff-deletedline,
    .mw-message-box-warning {
      background-color: @yellow;
      color: @mantle;
    }

    .diff-addedline {
      background-color: @sky;
      color: @mantle;
    }

    .mw-message-box-error {
      background-color: @flamingo;
      border-color: @red;
      color: @base;
    }

    .mw-number-text {
      color: @text;
    }

    .cdx-checkbox__icon {
      background-color: @surface0;
    }

    .oo-ui-checkboxInputWidget.oo-ui-widget-enabled
      [type="checkbox"]:checked
      + span,
    .cdx-checkbox__input:enabled:checked + .cdx-checkbox__icon,
    .cdx-button:enabled.cdx-button--weight-primary.cdx-button--action-progressive {
      background-color: @blue;
      border-color: @sapphire;
      color: @mantle !important;
    }

    .vector-feature-zebra-design-disabled,
    #vector-toc-pinned-container,
    .vector-toc::after {
      background: linear-gradient(rgba(255, 255, 255, 0), @base) !important;
    }

    #archnavbar ul li.anb-selected a {
      color: @accent-color !important;
    }

    .archwiki-template-message {
      background-color: @base;
    }

    .catlinks {
      background-color: @mantle;
    }

    .mw-parser-output p {
      color: @text !important;
    }

    .archwiki-template-meta-related-articles {
      background-color: @surface0;
    }

    .archwiki-template-meta-related-articles p {
      color: @text;
      border-bottom-color: @blue;
    }

    .archwiki-template-meta-related-articles ul li a {
      color: @blue important;
    }

    .mw-plusminus-neg,
    a.new {
      color: @red !important;
    }

    .mw-plusminus-pos {
      color: @green;
    }

    .mw-plusminus-null {
      color: @subtext0;
    }

    .oo-ui-textInputWidget .oo-ui-inputWidget-input,
    .mw-widget-dateInputWidget-handle,
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled
      > .oo-ui-buttonElement-button,
    #pagehistory li.selected {
      background-color: @surface0 !important;
      color: @text !important;
      border-color: @surface2 !important;
    }

    .oo-ui-menuSelectWidget {
      background-color: @surface0;
      border-color: @surface2;
    }

    .oo-ui-OptionWidget-highlighted {
      background-color: @overlay0 !important;
    }

    .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget,
    .minoredit,
    .comment {
      color: @text;
    }

    .mw-footer-container {
      color: @text !important;
    }

    #archnavbarlist li a {
      color: @blue !important;
    }

    .anb-selected {
      color: @subtext1 !important;
    }

    .mw-footer li {
      color: @text;
    }

    .vector-main-menu,
    .vector-pinnable-element {
      background-color: @base !important;
    }

    #p-navigation ul li a {
      color: @blue !important;
    }

    .archwiki-template-box-note a {
      color: @blue !important;
    }

    .archwiki-template-box-note a:visited {
      color: @mauve !important;
    }

    .mw-page-title-main {
      color: @text;
    }

    .vector-tab-noicon mw-list-item a {
      color: @blue;
    }

    .mw-header {
      background-color: @base !important;
      color: @text;
    }

    .mw-footer li a {
      color: @blue;
    }

    .cdx-text-input__input:enabled {
      background-color: @surface0 !important;
      color: @text !important;
      border-color: @surface1;
    }

    .cdx-button:enabled,
    .cdx-button.cdxbutton--fake-button--enabled {
      color: @mantle;
      background-color: @accent-color;
      border-color: @base;
    }

    .cdx-menu {
      background-color: @surface0;
    }

    .cdx-menu:hover {
      background-color: @base !important;
    }

    .anb-home {
      color: @text !important;
    }

    .vector-dropdown-content {
      background-color: @base !important;
    }

    .mw-headline::before {
      color: @accent-color !important;
    }

    .cdx-button {
      background-color: @base !important;
      color: @text !important;
      border-color: @base !important;
    }

    .mw-body {
      background-color: @base !important;
      color: @text !important;
      border-color: @base !important;
    }

    .mw-search-profile-tabs {
      background-color: @base !important;
      color: @text !important;
      border-color: @base !important;
    }

    .mw-content-ltr {
      background-color: @base !important;
    }

    .vector-sticky-pinned-container::after {
      background: @base !important;
    }

    .cdx-search-input {
      border-color: @mantle !important;
    }

    .oo-ui-widget:hover {
      background-color: @surface0 !important;
    }
  }
}

/* prettier-ignore */
@catppuccin: {
  @latte:     { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };
  @frappe:    { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; };
  @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; };
  @mocha:     { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
}

// vim:ft=less