Twitter Catppuccin by myamusashi

/* ==UserStyle==
@name           Twitter Catppuccin
@namespace      github.com/catppuccin/userstyles/styles/twitter
@homepageURL 	  https://github.com/catppuccin/userstyles/tree/main/styles/twitter
@version        1.0.0
@description    Soothing pastel theme for Twitter
@author         Catppuccin
@supportURL     https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atwitter
@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:Grey"]
@var checkbox colorizeLogo "Colorize Logo" 0
@var checkbox darkenShadows "Darken Shadows on Dark Themes" 1
==/UserStyle== */
@-moz-document domain("twitter.com") {
    @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];

        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;
                @latte-shadow: @crust 0 0 15px,
                fade(@crust, 95%) 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(@lookup=latte, @latte-shadow, @black-shadow);
                }
            }

            .r-1tbvlxk {
                @default-shadow: drop-shadow(@text 1px -1px 1px);
                @latte-shadow: drop-shadow(@crust 1px -1px 1px);
                @black-shadow: drop-shadow(rgb(0, 0, 0) 1px -1px 1px);

                filter: @default-shadow;

                & when (@darkenShadows =1) {
                    filter: if(@lookup=latte, @latte-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-color 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(@lookup=latte, #fff, @crust);
        } // borders
        .r-1kqtdi0,
        .r-1roi411 {
            border-color: @surface0;
        }

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

        .r-2sztyj {
            border-top-color: @surface0;
        } // is this post relevant to you?
        .r-1ccsd61 {
            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-color;
        } // accent color borders
        .r-vhj8yc {
            border-color: @accent-color;
        } // 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-color;

            .r-jwli3a {
                color: if(@lookup=latte, #fff, @crust);
            }
        } // accent element when hovered
        .r-1vtznih {
            background-color: darken(@accent-color, 10%);

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

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

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

        .r-r18ze4 {
            background-color: fade(@accent-color, 20%);
        } // white elements when hovered
        .r-jc7xae {
            background-color: darken(@text, 4%);
        } // white elements when active
        .r-6wtuen {
            background-color: darken(@text, 8%);
        } // new notifications
        .r-1eltapf {
            background-color: fade(@sapphire, 10%);
        } // polls
        .r-eok2q2 {
            background-color: fade(@accent-color, 60%);
        } // box shadow around active poll input box
        .r-9cip40 {
            box-shadow: @accent-color 0 0 0 1px;
        } // spaces
        .r-1blqq69 {
            border-color: @mauve;
        }

        @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(@lookup=latte, #fff, @crust); // white border
        } // mask over layer
        .r-11z020y {
            background-color: fade(desaturate(darken(@accent-color, 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-color;
        } // retweet svg on notifications page
        .r-o6sn0f {
            color: @green;
        } // rt when hover
        .r-15azkrj {
            background-color: fade(@gre...