Duolingo - Customization by jesuscc1993

/* ==UserStyle==
@name           Duolingo - Customization
@description    Provides some extra customization options for Duolingo. DISCLAIMER: some features are currently not supported on Firefox.
@version        2024.04.29.11.07
@author         MetalTxus
@namespace      https://github.com/jesuscc1993/
@license        CC BY-SA 4.0
@preprocessor   stylus

@var  checkbox  hide-leagues                        "Hide leagues"                                 0
@var  checkbox  hide-goals                          "Hide goals"                                   0
@var  checkbox  hide-premium                        "Hide some premium adds and features"          0
@var  checkbox  hide-leaderboards                   "Hide leaderboards"                            0
@var  checkbox  hide-classes                        "Hide classes"                                 0
@var  checkbox  hide-pronunciation                  "Hide pronunciation"                           0
@var  checkbox  hide-pronunciation-unless-hovered   "Hide pronunciation (unless hovered)"          0
@var  checkbox  hide-characters                     "Hide Duolingo characters"                     0

==/UserStyle== */
@-moz-document domain("duolingo.com") {
  @media (min-width: 700px) {
    [data-test="player-end-carousel"] > :nth-child(1) {
      width: 100%;
    }

    [data-test="player-end-carousel"] > :nth-child(2) {
      display: none;
    }

    [data-test*="challenge"] > .uH5m4 {
      max-width: none;
      width: 672px;
    }
  }

  [data-test="challenge-tap-token"] {
    user-select: text;
  }

  /* characters */
  if (hide-characters) {
    /* regular ones */
    ._2qg6J,
    svg[style*="--web-ui_speech-bubble-alignment"] {
      display: none;
    }

    ._2kEEj {
      margin-left: -16px;
    }

    /* grid variant */
    ._1KcR7 {
      opacity: 0;
    }

    ._2kgY1 {
      grid-template-columns: 0 1fr;
      grid-gap: 0;
    }
  }

  /* pronunciation */
  if (hide-pronunciation) {
    ._47IB1._3x_e5._2m_ED {
      display: none;
    }
  }

  if (hide-pronunciation-unless-hovered) {
    ._3PW0K,
    ._1bl79 {
      &:not(:hover) ._47IB1._3x_e5._2m_ED {
        opacity: 0;
      }

      ._47IB1._3x_e5._2m_ED {
        transition: opacity 150ms;
      }
    }
  }

  /* goals */
  if (hide-goals) {
    [data-test="/settings/coach"] {
      display: none;
    }
  }

  /* premium */
  if (hide-premium) {
    ._3Z2SD, /* review section */
    [data-test="free-plus-button"],
    [href="/review"],
    [href="/settings/super"],
    div:has(> [data-test="plus-offer-logo"]),
    div:has(> div > [data-test="plus-offer-logo"]):has(> div > [src*="practiceHub"]),
    /*div:has(> [data-test="plus-offer-logo"]) + div:has(img)*/ {
      display: none !important;
    }
  }

  /* leaderboards */
  if (hide-leaderboards) {
    [href="/leaderboard"] {
      display: none !important;
    }
  }

  /* classes */
  if (hide-classes) {
    [href="https://classes.duolingo.com/"]
    {
      display: none !important;
    }
  }

  /* sidebar item spacing fix */
  ._3bTT7 {
    gap: 0;

    > div > a {
      margin-bottom: 8px;
      display: block;
    }
  }
}

@-moz-document regexp("https:\\/\\/www\\.duolingo\\.com\\/(characters|guidebook|learn|practice-hub|shop).*") {
  #root > div:nth-child(2) > div > div:nth-child(2) > div > div:nth-child(1) > div {
    /* leagues */
    if (hide-leagues) {
      &:not(:has(> div:nth-child(5))) {
        > div:nth-child(2) {
          display: none;
        }
      }

      &:has(> div:nth-child(5)) {
        > div:nth-child(3) {
          display: none;
        }
      }
    }

    /* goals */
    if (hide-goals) {
      &:not(:has(> div:nth-child(5))) {
        > div:nth-child(3) {
          display: none;
        }
      }

      &:has(> div:nth-child(5)) {
        > div:nth-child(4) {
          display: none;
        }
      }
    }

    /* premium */
    if (hide-premium) {
      &:not(:has(> div:nth-child(5))) {
        > div:nth-child(4) {
          display: none;
        }
      }

      &:has(> div:nth-child(5)) {
        > div:nth-child(5) {
          display: none;
        }
      }
    }
  }
}