/* ==UserStyle==
@name Twitter Catppuccin
@namespace github.com/catppuccin/userstyles/styles/twitter
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/twitter
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/twitter/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitter
@description Soothing pastel theme for Twitter
@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 colorizeLogo "Colorize Logo" 0
@var checkbox darkenShadows "Darken Shadows on Dark Themes" 1
==/UserStyle== */

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

@-moz-document domain("twitter.com"), domain("x.com") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

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

    body.LightsOut {
      --border-color: @surface0;
      --color: @overlay1;
      --color-emphasis: @text;
      --hover-bg-color: @surface0;

      // shadows
      .r-qo02w8,
      .r-15ce4ve {
        @default-shadow:
          fade(@text, 20%) 0 0 15px,
          fade(@text, 15%) 0 0 3px 1px;
        @black-shadow:
          rgba(0, 0, 0, 0.4) 0 0 15px,
          rgba(0, 0, 0, 0.35) 0 0 3px 1px;

        box-shadow: @default-shadow;

        & when (@darkenShadows = 1) {
          box-shadow: if(@flavor = latte, @default-shadow, @black-shadow);
        }
      }

      .r-1tbvlxk {
        @default-shadow: drop-shadow(fade(@text, 25%) 1px -1px 1px);
        @black-shadow: drop-shadow(rgba(0, 0, 0, 0.5) 1px -1px 1px);

        filter: @default-shadow;

        & when (@darkenShadows = 1) {
          filter: if(@flavor = latte, @default-shadow, @black-shadow);
        }
      }

      .r-1uusn97 {
        @default-shadow:
          fade(@text, 20%) 0 0 5px,
          fade(@text, 15%) 0 1px 4px 1px;
        @black-shadow:
          rgba(0, 0, 0, 0.4) 0 0 5px,
          rgba(0, 0, 0, 0.35) 0 1px 4px 1px;

        box-shadow: @default-shadow;

        & when (@darkenShadows = 1) {
          box-shadow: if(@flavor = latte, @default-shadow, @black-shadow);
        }
      }
    }

    body,
    .PageContainer,
    #placeholder {
      background-color: @base !important;
      color: @text;
    }

    #ScriptLoadFailure span {
      color: @text;
    }

    [style*="scrollbar-color: rgb(62, 65, 68) rgb(22, 24, 28)"] {
      scrollbar-color: @accent transparent !important;
      scrollbar-width: thin;
    }

    // bg color
    [data-testid="primaryColumn"],
    .r-kemksi {
      background-color: @base;
    }

    // arrow on account switcher
    .r-cqee49 {
      color: @base;
    }

    // top nav bg color
    .r-5zmot {
      background-color: fade(@base, 75%);
    }

    // element hover (when on base)
    .r-1hdo0pc,
    .r-pjtv4k {
      background-color: fade(@text, 10%);
    }

    // element active (when on base)
    .r-11gmi9o {
      background-color: fade(@text, 20%);
    }

    .r-1cuuowz {
      background-color: fade(@text, 3%);
    }

    // text
    .r-1nao33i {
      color: @text;
    }

    // white text, seems to appear on accent colors
    .r-jwli3a {
      color: if(@flavor = latte, #fff, @crust);

      // cw svg
      &:has(
        path[d="M3.693 21.707l-1.414-1.414 2.429-2.429c-2.479-2.421-3.606-5.376-3.658-5.513l-.131-.352.131-.352c.133-.353 3.331-8.648 10.937-8.648 2.062 0 3.989.621 5.737 1.85l2.556-2.557 1.414 1.414L3.693 21.707zm-.622-9.706c.356.797 1.354 2.794 3.051 4.449l2.417-2.418c-.361-.609-.553-1.306-.553-2.032 0-2.206 1.794-4 4-4 .727 0 1.424.192 2.033.554l2.263-2.264C14.953 5.434 13.512 5 11.986 5c-5.416 0-8.258 5.535-8.915 7.001zM11.986 10c-1.103 0-2 .897-2 2 0 .178.023.352.067.519l2.451-2.451c-.167-.044-.341-.067-.519-.067zm10.951 1.647l.131.352-.131.352c-.133.353-3.331 8.648-10.937 8.648-.709 0-1.367-.092-2-.223v-2.047c.624.169 1.288.27 2 .27 5.415 0 8.257-5.533 8.915-7-.252-.562-.829-1.724-1.746-2.941l1.438-1.438c1.53 1.971 2.268 3.862 2.33 4.027z"]
      ) {
        color: @text;
      }
    }

    // borders
    .r-1kqtdi0,
    .r-1roi411 {
      border-color: @surface0;
    }

    .r-1igl3o0 {
      border-bottom-color: @surface0;
    }

    .r-2sztyj {
      border-top-color: @surface0;
    }

    .r-1aihyag {
      border-right-color: @surface0;
    }

    .r-1wyyjkm {
      border-left-color: @subtext0; // border when replying to a dm
    }

    // is this post relevant to you?
    .r-1ccsd61,
    .r-xzxzvz {
      border-color: @surface2;
    }

    .r-gu4em3,
    .r-1bnu78o,
    .r-z32n2g, // search bar
    .r-1m3jxhj {
      background-color: @surface0;
    }

    // base color border
    .r-1xc7w19 {
      border-color: @base;
    }

    // active border for dms
    .r-1pbtemp {
      border-right-color: @accent;
    }

    // accent color borders
    .r-vhj8yc {
      border-color: @accent;
    }

    // magnifying glass in search bar
    .r-1bwzh9t {
      color: @overlay1;
    }

    // right side content
    .r-g2wdr4 {
      background-color: @mantle;
    }

    .r-14wv3jr {
      border-color: @mantle;
    }

    // bg color accent
    .r-l5o3uw {
      background-color: @accent;

      .r-jwli3a {
        color: if(@flavor = latte, #fff, @crust);
      }
    }

    // accent element when hovered
    .r-1vtznih {
      background-color: darken(@accent, 10%);

      .r-jwli3a {
        color: if(@flavor = latte, #fff, @crust);
      }
    }

    .r-1peqgm7 {
      background-color: fade(@accent, 10%);
    }

    // accent element when active
    .r-yuvema {
      background-color: darken(@accent, 15%);

      .r-jwli3a {
        color: if(@flavor = latte, #fff, @crust);
      }
    }

    .r-r18ze4 {
      background-color: fade(@accent, 20%);
    }

    // white elements when hovered
    .r-jc7xae {
      background-color: darken(@text, 4%);
    }

    // white elements when active
    .r-6wtuen {
      background-color: darken(@text, 8%);
    }

    // tooltips
    .r-1pr99xn {
      background-color: @surface1;
    }

    // new notifications
    .r-1eltapf {
      background-color: fade(@sapphire, 10%);
    }

    // polls
    .r-eok2q2 {
      background-color: fade(@accent, 60%);
    }

    // box shadow around active poll input box
    .r-9cip40 {
      box-shadow: @accent 0 0 0 1px;
    }

    // spaces
    .r-1blqq69 {
      border-color: @mauve;
    }

    // reactions on dms
    .r-qazpri {
      color: @overlay1;
    }

    @keyframes r-1wvy3k1 {
      0% {
        box-shadow: fade(@mauve, 40%) 0;
      }

      100% {
        box-shadow: fade(@mauve, 0%) 0;
      }
    }

    [style="background-image: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);"] {
      background-image: linear-gradient(
        61.63deg,
        @blue -15.05%,
        @mauve 104.96%
      ) !important;
    }

    // tweet textbox placeholder
    .draftjs-styles_0 .public-DraftEditorPlaceholder-root {
      color: @overlay0;
    }

    // who can reply? bg
    .r-rgqbpe {
      background-color: fade(@blue, 10%);
    }

    // circles
    .r-s224ru {
      background-color: @green;
    }

    .r-h7o7i8 {
      background-color: fade(@green, 10%);
    }

    // live indicator
    .r-4nw3r4,
    .r-1dgebii {
      background-color: @red;
    }

    // live border
    .r-b5kvu3 {
      border-color: @red;
    }

    // red transparent bg (appears with "unfollow" hover)
    .r-qqmkd0 {
      background-color: fade(@red, 10%);
    }

    // red bg on hover
    .r-12d83nn {
      background-color: darken(@red, 10%);
    }

    // red bg when active
    .r-oybae9 {
      background-color: darken(@red, 15%);
    }

    .r-11mg6pl {
      border-color: if(@flavor = latte, #fff, @crust); // white border
    }

    // mask over layer
    .r-11z020y {
      background-color: fade(desaturate(darken(@accent, 10%), 50%), 12%);
    }

    // likes
    [fill="rgb(249,22,127)"],
    [fill="rgb(222,45,108)"],
    g[clip-path="url(#__lottie_element_562)"] path,
    [style="color: rgb(249, 24, 128);"] [viewBox="0 0 24 24"] path {
      fill: @red !important;
    }

    // likes when hover
    .r-1krxqcr {
      background-color: fade(@red, 10%);
    }

    // likes when active
    .r-uuique {
      background-color: fade(@red, 20%);
    }

    // heart svg on notifications page
    .r-vkub15,
    .r-9l7dzd {
      color: @red;
    }

    // bell svg on notifications page
    .r-1cvl2hr {
      color: @accent;
    }

    // retweet svg on notifications page
    .r-o6sn0f {
      color: @green;
    }

    // rt when hover
    .r-15azkrj {
      background-color: fade(@green, 10%);
    }

    // rt when active
    .r-1x669os {
      background-color: fade(@green, 20%);
    }

    // image won't load svg
    [data-testid="card.wrapper"]
      [d="M21.04 1.54L17.5 5.09c-.04-.02-.08-.03-.13-.04L14.3 3H9.7l-3 2H5C3.62 5 2.5 6.12 2.5 7.5v11c0 .46.12.88.34 1.25l-1.3 1.29 1.42 1.42 19.5-19.5-1.42-1.42zM13.7 5l2.33 1.56-2 1.99C13.44 8.2 12.74 8 12 8c-2.21 0-4 1.79-4 4 0 .74.2 1.44.55 2.03L4.5 18.09V7.5c0-.28.22-.5.5-.5h2.3l3-2h3.4zM12 10c.18 0 .35.02.52.07l-2.45 2.45c-.05-.17-.07-.34-.07-.52 0-1.1.9-2 2-2zm7 11H7.24l2-2H19c.28 0 .5-.22.5-.5V9h2v9.5c0 1.38-1.12 2.5-2.5 2.5z"] {
      color: @overlay0;
    }

    // cw button
    .r-n94g0g {
      background-color: fade(@text, 30%); // when hovered
    }

    .r-z9i421 {
      background-color: fade(@text, 27%); // when active
    }

    .r-19130f6 {
      background-color: @crust; // when hovered
    }

    .r-l8tqsx {
      background-color: fade(@text, 10%); // when active
    }

    // lock svg when you try to write a commu note but can't
    .r-3gvs5h {
      background-color: @overlay1;
    }

    // sunglasses commu note
    .r-1fkb3t2 {
      background-color: @surface1;
    }

    // media player text
    .r-jwli3a {
      color: @text;
    }

    .r-1kwlb9n {
      background-color: fade(@red, 12%);
    }

    // hard-coded shit
    // ugly-ass twitter blue/premium bg. why.
    [style*="https://abs.twimg.com/responsive-web/client-web/background-premiumplus-web"] {
      background-image: none !important;
      background-color: @surface0;
    }

    [stroke="#2F3336" i] {
      stroke: @surface2 !important;
    }

    [stroke="#1D9BF0" i],
    [style*="stroke: rgb(29, 155, 240)"] {
      stroke: @accent !important;
    }

    [stroke="#FFD400" i] {
      stroke: @yellow !important;
    }

    [fill="#829AAB" i] {
      fill: @overlay2 !important;
    }

    // "we received your report" svg
    [fill="#1DA1F2" i] {
      fill: if(@flavor = latte, darken(@sky, 15%), darken(@sky, 30%))
        !important;
    }

    [fill="#78C6EE" i] {
      fill: @sky !important;
    }

    // yellow verified badge
    [stop-color="#f4e72a" i],
    [stop-color="#cd8105" i],
    [stop-color="#cb7b00" i],
    [stop-color="#f4ec26" i],
    [stop-color="#f9e87f" i],
    [stop-color="#e2b719" i] {
      stop-color: @yellow !important;
    }

    [fill="#d18800" i] {
      fill: @yellow !important;
    }

    // [fill="#333333" i] {
    //   fill: @crust !important;
    //
    //   ~ [fill="white"] {
    //     fill: @text !important;
    //   }
    // }

    [style*="border-color: rgb(83, 100, 113)"] {
      border-color: @surface1 !important;
    }

    [style*="border-color: rgb(51, 54, 57)"] {
      border-color: @surface0 !important;
    }

    [style*="border-color: rgb(103, 7, 15)"] {
      border-color: fade(@red, 50%) !important;
    }

    [style*="border-color: rgb(29, 155, 240)"] {
      border-color: @accent !important;
    }

    [style*="color: rgb(231, 233, 234)"]:not(
      [style*="background-color: rgb(231, 233, 234)"]
    ),
    [style*="color: rgb(239, 243, 244)"]:not(
      [style*="background-color: rgb(239, 243, 244)"]
    ),
    [style*="color: rgb(255, 255, 255)"]:not(
      [style*="background-color: rgb(255, 255, 255)"]
    ) {
      color: @text !important;
    }

    [style*="color: rgb(231, 233, 234)"]:not(
      [style*="background-color: rgb(231, 233, 234)"]
    )
      input::placeholder {
      color: @subtext1 !important;
    }

    // faded text
    [style*="color: rgb(113, 118, 123)"]:not(
      [style*="background-color: rgb(113, 118, 123)"]
    ),
    [style*="color: rgb(182, 185, 188)"]:not(
      [style*="background-color: rgb(182, 185, 188)"]
    ) {
      color: @overlay1 !important;
    }

    // retweets color
    [style*="color: rgb(0, 186, 124)"]:not(
      [style*="background-color: rgb(0, 186, 124)"]
    ) {
      color: @green !important;
    }

    // likes/unfollow color
    [style*="color: rgb(249, 24, 128)"]:not(
      [style*="background-color: rgb(249, 24, 128)"]
    ),
    [style*="color: rgb(244, 33, 46)"]:not(
      [style*="background-color: rgb(244, 33, 46)"]
    ) {
      color: @red !important;
    }

    [style*="color: rgb(250, 68, 152)"]:not(
      [style*="background-color: rgb(250, 68, 152)"]
    ) {
      color: @pink !important;
    }

    [style*="color: rgb(255, 212, 0)"]:not(
      [style*="background-color: rgb(255, 212, 0)"]
    ) {
      color: @yellow !important;
    }

    [style*="color: rgb(120, 86, 255)"]:not(
      [style*="background-color: rgb(120, 86, 255)"]
    ) {
      color: @mauve !important;
    }

    [style*="color: rgb(255, 122, 0)"]:not(
      [style*="background-color: rgb(255, 122, 0)"]
    ) {
      color: @peach !important;
    }

    // accent color (blue)
    [style*="color: rgb(29, 155, 240)"]:not(
      [style*="background-color: rgb(29, 155, 240)"]
    ) {
      color: @accent !important;
    }

    // background colors
    [style*="background-color: rgb(142, 205, 248)"] {
      background-color: lighten(@accent, 10%) !important;
    }

    [style*="background-color: rgb(2, 17, 61)"] {
      background-color: fade(@accent, 15%) !important;
    }

    [style*="background-color: rgba(255, 255, 255, 0.25)"] {
      background-color: fade(@text, 25%) !important;
    }

    [style*="background-color: rgb(147, 147, 147)"] {
      background-color: @overlay0 !important;

      // for toggle circle
      + [style*="background-color: rgb(250, 250, 250)"] when not(
        @flavor = latte
      ) {
        background-color: @text !important;
      }
    }

    [style*="background-color: rgb(29, 155, 240)"] {
      background-color: @accent !important;

      [style*="color: rgb(255, 255, 255)"] {
        color: if(@flavor = latte, #fff, @crust) !important;
      }
    }

    [style*="background-color: rgb(239, 243, 244)"] {
      background-color: @text !important;

      [style*="color: rgb(15, 20, 25)"] {
        color: if(@flavor = latte, #fff, @crust) !important;
      }
    }

    [style*="background-color: rgb(244, 33, 46)"] {
      background-color: @red !important;

      [style*="color: rgb(255, 255, 255)"] {
        color: if(@flavor = latte, #fff, @crust) !important;
      }
    }

    [style*="background-color: rgb(0, 0, 0)"],
    [style*="background-color: #000"] {
      background-color: @base !important;
    }

    [style*="background-color: rgba(15, 20, 25, 0.75)"] {
      background-color: fade(@crust, 75%) !important;

      [style*="color: rgb(255, 255, 255)"] svg {
        color: @text !important;
      }
    }

    // whatever
    .r-l5o3uw,
    .r-1vtznih,
    .r-4nw3r4,
    .r-12d83nn,
    .r-oybae9,
    .r-yuvema,
    .r-3gvs5h,
    [style="background-image: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);"] {
      [style*="color: rgb(255, 255, 255)"]:not(
        [style*="background-color: rgb(255, 255, 255)"]
      ),
      &[style*="color: rgb(255, 255, 255)"]:not(
        [style*="background-color: rgb(255, 255, 255)"]
      ),
      [style*="color: rgb(231, 233, 234)"]:not(
        [style*="background-color: rgb(231, 233, 234)"]
      ),
      &[style*="color: rgb(231, 233, 234)"]:not(
        [style*="background-color: rgb(231, 233, 234)"]
      ),
      [color="white"] {
        color: if(@flavor = latte, #fff, @crust) !important;
      }
    }

    [data-testid="videoComponent"]:not(.r-4nw3r4),
    .r-loe9s5,
    .r-drfeu3:has(
      [style="background-color: rgba(255, 255, 255, 0.25); border-color: rgba(0, 0, 0, 0); backdrop-filter: blur(4px);"]
    ) {
      [style*="color: rgb(255, 255, 255)"]:not(
        [style*="background-color: rgb(255, 255, 255)"]
      ),
      &[style*="color: rgb(255, 255, 255)"]:not(
        [style*="background-color: rgb(255, 255, 255)"]
      ),
      .r-jwli3a {
        color: #fff !important;
      }
    }

    // dms have to be here bc of the above
    .r-eff69c {
      background-color: darken(@accent, 5%);

      [style*="color: rgb(255, 255, 255)"] {
        color: @crust !important;
      }
    }

    // follow button
    [data-testid$="-follow"] {
      [style*="color: rgb(15, 20, 25)"] {
        color: if(@flavor = latte, #fff, @crust) !important;
      }
    }

    // sports stuff on explore page
    // a[href^="/i/events"] > div > div > div[style^="background-color"] > div[style*="color: rgb(255, 255, 255)"] span {
    //   color: #fff !important;
    // }

    // options
    & when (@colorizeLogo = 1) {
      path[d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"] {
        fill: @accent !important;
      }
    }

    a[aria-label^="Translated from"][aria-label$="by Google"] svg path {
      fill: @text !important;
    }
  }
}

@-moz-document domain("api.twitter.com"), domain("api.x.com") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

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

    html {
      background: @mantle;
    }

    #header {
      color: @subtext0;
      background: @base;
      border-bottom-color: @surface1;

      .logo a {
        border-bottom-color: transparent;
      }

      #session {
        a {
          background: transparent;
          color: @subtext0;
        }

        h2 img {
          border-color: @surface1;
        }
      }
    }

    .footer {
      background: @mantle;
      border-top-color: @surface1;
    }

    .auth h2 {
      color: @subtext1;
    }

    .oauth #bd {
      border-color: @surface1;
    }

    .app-info h3 img {
      border-color: @base;
    }

    .permissions.allow strong {
      color: @green;
    }

    .button {
      background: @overlay0;
      color: @text;
      border-color: @surface1;

      &:hover {
        color: @text;
        border-color: @surface1;
        background: darken(@surface2, 10%);
      }
    }

    .button.selected,
    .follow-button .unfollow .button {
      background-color: @accent;
      color: if(@flavor = latte, #fff, @crust);
      border-color: darken(@accent, 10%);

      &:hover {
        background-color: darken(@accent, 10%);
      }

      .app-info,
      #bd h3 {
        color: @subtext0;
      }

      #ft {
        color: @overlay0;
      }
    }
  }
}

@-moz-document domain("twitter.com"), domain("x.com") {
  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

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

    #session a,
    #session input,
    #session button {
      background: @surface0;
      color: @subtext0;
    }

    #session .user-menu {
      a:focus,
      a:hover,
      button:focus,
      button:hover,
      input:focus,
      input:hover {
        color: if(@flavor = latte, #fff, @crust);
        background-color: @accent;
      }
    }

    .notice,
    .notice p,
    h2 {
      color: @subtext1;
    }

    .notice.error {
      background: fade(@red, 20%);
      border-color: fade(@red, 25%);
    }

    // report page? why isn't this themed
    .ResponsiveLayout--Night .PageContainer {
      background-color: @base;
    }

    .list-explanation {
      color: @subtext0;
    }

    .ResponsiveLayout--Night .list-btn {
      &:first-of-type {
        border-top-color: @mantle;
      }

      &:hover {
        background-color: @mantle;
      }
    }

    .submit-btn {
      background-color: @accent;
      color: if(@flavor = latte, #fff, @crust);
      border-color: darken(@accent, 10%);
    }

    .submit-btn:hover,
    .redirect-btn:hover {
      background-color: darken(@accent, 10%);
    }

    .block-btn {
      color: @maroon;
      border-color: @maroon;
    }

    .mute-btn,
    .unfollow-btn,
    .email-report-btn {
      color: @accent;
      border-color: @accent;
    }

    .list-btn {
      border-color: @surface1;

      &:first-of-type {
        border-top-color: @surface1;
      }

      &:hover {
        background-color: @surface0;
      }
    }

    // authorize page
    .js #session .user-menu {
      background-color: @surface0;
    }

    .dropdown-caret .caret-outer,
    .dropdown-caret .caret-inner {
      border-bottom-color: @surface0;
    }
  }
}