/* ==UserStyle==
@name DeepL Catppuccin
@namespace github.com/catppuccin/userstyles/styles/deepl
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/deepl
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/deepl/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Adeepl
@description Soothing pastel theme for DeepL
@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== */

@import "https://userstyles.catppuccin.com/lib/lib.less";

@-moz-document regexp("https:\\/\\/www.deepl.com\\/?(.*\\/)translator.*$") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

  #catppuccin(@flavor) {
    #lib.palette();
    #lib.defaults();

    /* header */
    .BasePageHeader-module--container--d81cb {
      background-color: @mantle !important;
    }

    /* background */
    body {
      background-color: @base !important;
      color: @text !important;
    }

    .bg-neutral-next-50,
    .bg-white,
    .contextual-menu-dragging-area,
    input {
      background-color: @base !important;
    }

    .pageFooterV2-module--footerOuterContainer--0b055 {
      background-color: @mantle !important;
    }

    .scrollablePopiverListRoot-module--root--588fe {
      background-color: @base !important;
    }

    /* text color */
    h1,
    h2,
    h3,
    h4,
    p,
    a,
    button,
    span,
    input,
    ul,
    li,
    .mb-3,
    .mb-4,
    .GlossaryModalWithIllustration-module--content--2bf03,
    .lmt__glossary_editor_glossaryName {
      color: @text !important;
    }

    .text-neutral-next-600 {
      color: @subtext0 !important;
    }

    /* privacy notice */
    .cookieBanner-module--container--9baef {
      background-color: @surface0 !important;
      color: @text !important;
    }

    .button-module--button--4f58d.button-module--color_primaryAlt3--cd3cf {
      border-color: @text !important;
    }

    /* side menu */
    .classicSidemenu-module--menuContainer--35157 {
      background-color: @base !important;
    }

    /* borders */
    .border-black {
      border-color: @surface2 !important;
    }

    .border-neutral-next-100,
    .StartFreeTrialButton-module--startFreeTrialButton--bd671 {
      border-color: @surface0 !important;
    }

    .divide-y > :not([hidden]) ~ :not([hidden]) {
      border-color: @base;
    }

    .TranslatorTab-module--active--0b6ea
      .TranslatorTab-module--innerLower--8a080 {
      background-color: @accent !important;
    }

    .ring-neutral-next-900 {
      --tw-ring-color: @surface2;
    }

    .border-neutral-next-900 {
      border-color: @surface2 !important;
    }

    input {
      border-color: @surface0 !important;
    }

    /* hover */
    button:hover,
    .bg-blue-next-500:hover {
      background-color: @surface1 !important;
    }

    a:hover {
      background-color: @mantle !important;
    }

    .FlyoutMenuButton-module--flyoutMenuButton--97ae6:hover {
      background-color: @mantle !important;
    }

    [class*="SourceTranslatorArea-module--focusBorder--"]:has(
      div[contenteditable="true"]:focus
    ) {
      border-color: @accent;
    }

    [class*="PageHeaderLink-module--pageHeaderLink--"]:not(
      [class*="PageHeaderLink-module--nohover--"]
    ):hover {
      color: @accent;
      border-color: @accent;
    }

    .hover\:bg-\[\#B4DAE8\]:hover {
      background-color: @surface2 !important;
    }

    /* highlight */
    .bg-\[\#E1F0F5\] {
      background-color: @surface1 !important;
    }

    /* buttons */
    .TranslatorTab-module--cardButton--4b203,
    .bg-\[\#EDF8FC\] {
      background-color: @surface0 !important;
      border-color: @surface0 !important;
    }

    .StartFreeTrialButton-module--startFreeTrialButton--bd671,
    .bg-blue-next-50 {
      background-color: @surface0 !important;
    }

    .bg-blue-next-500 {
      background-color: @surface0;
      border-color: @surface0;
    }

    .LanguageSelector-module--wrapper--f9f17 {
      --button-background: @surface0 !important;
      --button-border-color: @surface0 !important;
      color: @base !important;
    }

    .CareerBanner-module--container--2ac20 {
      background-color: @surface0 !important;
    }

    /* glossary button */
    .lmt__glossaryButton,
    .lmt__glossaryButton__desktop:hover,
    .ModalDialogContent-module--content--5751e {
      background-color: @surface0 !important;
    }

    .lmt__glossary_acceptButton,
    .lmt__glossary_editor,
    .lmt__glossary_editor_subBar_top,
    .lmt__glossary_editor_subBar_bottom,
    .lmt__glossary_editor_mainBar,
    .Select-module--wrapper--53ec7 .Select-module--flyout--c91f3,
    .lmt_firstEntry-content,
    .lmt__glossary_newEntry_langButton,
    .Select-module--wrapper--53ec7,
    .Select-module--button--f032e {
      background-color: @surface0 !important;
      border-color: @surface0 !important;
    }

    .desktop-glossary-overwrites .lmt__language_select__menu {
      background-color: @surface0 !important;
      color: @text !important;
    }

    .lmt__glossary_newEntry_langDropdown.lmt__language_select__menu
      button
      .langName {
      color: @text !important;
    }

    /* pro banner */
    .ProBanner2021-module--wrapper--c7e3d,
    .p-8 {
      background: @base !important;
    }

    /* some button colors */
    .badge-module--badge--c9ebe.badge-module--proDark--a4d4e {
      background-color: @green;
      color: @base !important;
    }

    .button-module--button--a854e.button-module--color_secondary--f171e {
      background-color: @peach;
      border-color: @peach !important;
      color: @base !important;
    }

    .button-module--button--a854e.button-module--variant_outline--b937c {
      background-color: @surface0 !important;
      border-color: @surface0 !important;
    }

    .button-module--button--a854e.button-module--color_primary--bfa59 {
      background-color: @blue !important;
      border-color: @blue !important;
      color: @base !important;
    }

    /* dropdowns */
    .ProductUpdatesContainer-module--updateContainer--16394,
    .ProductUpdateFooter-module--updateFooter--b46f0,
    .LanguageSelector-module--flyout--6bfe6 {
      background-color: @base !important;
      border-color: @surface0 !important;
    }

    /* allow mic/get extension prompt */
    .bg-neutral-next-900,
    .bg-blue-next-800 {
      background-color: @surface0 !important;
      color: @text !important;
    }

    /* icons, svgs and images */
    svg {
      color: @text !important;
    }

    .lmt__glossary_ad_checkmark,
    .lmt__glossary_arrowDown {
      border-color: @text !important;
    }

    path,
    .DeeplLogoText-module--logoText--34a4f,
    .ProBanner2021-module--lockitem--febe3,
    .FlyoutMenuButton-module--flyoutMenuButton--97ae6::after,
    #top-navi-sidemenu-opener,
    .pageFooterV2-module--socialMediaLinks--71305,
    .ProBanner2021-module--checkitem--2d8e7,
    [src*="https://static.deepl.com/img/app_desktop.svg"] {
      filter: @text-filter;
    }

    .Logo-module--logoImg--1ee7e,
    .LogoLink-module--logoText--33735,
    .deeplLogo-module--logo--ffd7a {
      filter: @blue-filter;
    }
  }
}