watatomo · December 30, 2023 07:15
diff --git a/twt-catppuccin.user.css b/twt-catppuccin.user.css
 /* ==UserStyle==
 @name           Twitter Catppuccin
 @namespace      github.com/watatomo
 @version        1.0.0
 @description    Works best with twitter on lights out mode, blue color selected
 @author         Ren (watatomo)
 @preprocessor   stylus

 @var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
 @var select accent "Accent" ["Rosewater", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue*", "Sapphire", "Sky", "Lavender"]
 ==/UserStyle== */
 @-moz-document domain("twitter.com") {
    if (theme == "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;
    } else if (theme=="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;
    } else if (theme=="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;
    } else if (theme=="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;
        $lavender = #b4befe;
        $blue = #89b4fa;
        $text = #cdd6f4;
        $subtext1 = #bac2de;
        $subtext0 = #a6adc8;
        $overlay2 = #9399b2;
        $overlay1 = #7f849c;
        $overlay0 = #6c7086;
        $surface2 = #585b70;
        $surface1 = #45475a;
        $surface0 = #313244;
        $base = #1e1e2e;
        $mantle = #181825;
        $crust = #11111b;
    }

    if (accent == "Rosewater") {
        $accent = $rosewater
    } else if (accent == "Flamingo") {
        $accent = $flamingo
    } else if (accent == "Pink") {
        $accent = $pink
    } else if (accent == "Mauve") {
        $accent = $mauve
    } else if (accent == "Red") {
        $accent = $red
    } else if (accent == "Maroon") {
        $accent = $maroon
    } else if (accent == "Peach") {
        $accent = $peach
    } else if (accent == "Yellow") {
        $accent = $yellow
    } else if (accent == "Green") {
        $accent = $green
    } else if (accent == "Teal") {
        $accent = $teal
    } else if (accent == "Blue") {
        $accent = $blue
    } else if (accent == "Sapphire") {
        $accent = $sapphire
    } else if (accent == "Sky") {
        $accent = $sky
    } else if (accent == "Lavender") {
        $accent = $lavender
    }
    
    body,
    .PageContainer {
        background-color: $base !important;
        color: $text;
    }
    
    a {
         color: $accent;
     }
    
    [data-testid="primaryColumn"],
    .r-kemksi,
    .r-yfoy6g {
        background-color: $base;
    }
    
    .r-cqee49 {
        color: $base;
    }
    
    html .ResponsiveLayout--Night,
    .r-54znze {
        color: $text;
    }
    
    // ???
    #session a, #session input, #session button {
        background: $surface0;
        color: $subtext0;
    }
    
    #session .user-menu a:focus, #session .user-menu a:hover, #session .user-menu button:focus, #session .user-menu button:hover, #session .user-menu input:focus, #session .user-menu input:hover {
        color: theme is "Latte" ? #fff : $crust;
        background-color: $accent;
    }
    
    .notice, .notice p, h2 {
        color: $subtext1;
    }
    
    .notice.error {
        background: alpha($red, 20%)
        border-color: alpha($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: theme is "Latte" ? #fff : $crust;
        border-color: darken($accent, 10%);
    }
    
    .submit-btn:hover, .redirect-btn:hover {
        background-color: $overlay2;
    }
    
    .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;
        }
    }
    
    .submit-btn:hover, .redirect-btn:hover {
        background-color: darken($accent, 10%);
    }
    
    // authorize page
    
    
    ///
    
    .js #session .user-menu {
        background-color: $surface0;
    }
    
    .dropdown-caret .caret-outer,
    .dropdown-caret .caret-inner {
        border-bottom-color: $surface0;
    }
    
    ///
    
    .r-jc7xae {
        background-color: $subtext0;
    }
    
    // hovered elements?
    .r-1hdo0pc {
        background-color: alpha($subtext1, 0.1);
    }
    
    // header
    .r-5zmot {
        background-color: alpha($base, 0.65);
    }
    
    // search bar
    .r-z32n2g,
    .r-8erxvq,
    // side containers
    .r-g2wdr4,
    .r-g6ijar {
        background-color: $mantle;
    }
    
    body.LightsOut .tnt_menu_item:hover a {
        background-color: $mantle !important;
    }
    
    // active?
    .r-14tof1o {
        background-color: $crust;
    }
    
    // side containers borders
    .r-14wv3jr,
    .r-74htps {
        border-color: $mantle;
    }
    
    // main border
    [data-testid="primaryColumn"],
    .r-1kqtdi0,
    .r-1roi411 {
        border-color: $surface1;
    }
    
    .r-gu4em3,
    .r-1bnu78o {
        background-color: $surface1;
    }
    
    .r-2sztyj {
        border-top-color: $surface1;
    }
    
    .r-1igl3o0 {
        border-bottom-color: $surface1;
    }
    
    // accent text
    .r-1cvl2hr {
        color: $accent;
    }
    
    // accent element
    .r-l5o3uw,
    // .r-4nw3r4,
    .r-1to6hqq {
        background-color: $accent;
    }
    
    .r-4nw3r4 {
        background-color: $red;
    }
    
    [data-testid="SideNav_NewTweet_Button"] {
        background-color: $accent !important;
        
        > div * {
            color: theme is "Latte" ? #fff !important : $crust !important;
        }
    }
    
    // accent element when hovered
    .r-1vtznih {
        background-color: darken($accent, 10%);
    }
    
    // accent element with accent bg
    .r-jwli3a,
    [data-testid="tweetButtonInline"] span {
        color: theme is "Latte" ? #fff : $crust;
    }
    
    .r-vhj8yc {
        border-color: $accent;
    }
    
    .r-1pbtemp {
        border-right-color: $accent;
    }
    
    
    
    // unset for image containers and stuff
    [data-testid="tweetPhoto"],
    a[href*="/i/events/"],
    a ~ div:has(.r-jwli3a),
    [style="transition-duration: 0.5s; transition-property: background-color;"],
    // [role="presentation"],
    [data-testid*="Carousel-Nav"],
    [data-testid="reply"],
    [data-testid="retweet"],
    [data-testid="like"],
    [data-testid="unlike"],
    [aria-label="Share Tweet"],
    [aria-label="Remove media"],
    [aria-label="Edit media"],
    h1 > a[href="/home"],
    nav[aria-label="Edit photo"] ~ div:has(.r-jwli3a),
    .r-drfeu3,
    .r-19130f6,
    [style*="background-color"][style*="(15"][style*="20"][style*="25"][style*="0.75)"],
    [data-testid="placementTracking"],
    .r-5i3rd4
    
    {
        .r-jwli3a {
            color: #fff;
        }
    }
    
    [data-testid="playButton"] .r-jwli3a {
        color: $crust;
    }
    
    // .r-1habvwh [data-testid="messageEntry"] [data-testid="tweetText"],
    // [data-testid="messageEntry"] [data-testid="DMCompositeMessage"] a,
    // .r-gu4em3 a {
    //     color: $text !important;
    // }
    
    // [data-testid="messageEntry"] [data-testid="tweetText"][style*="color"][style*="(255"][style*="255"][style*="255)"] {
    //     &,
    //     a {
    //         color: theme is "Latte" ? #fff !important : $crust !important;
    //     }
    // }
    
    .css-1dbjc4n.r-1fz3rvf [data-testid="tweetText"] {
        color: $text;
    }
    
    .r-qazpri {
        color: $overlay0;
    }
    
    // spoiler blur
    .r-drfeu3 {
        background-color: alpha($crust, 0.6)
    }
    
    // main text
    .r-1nao33i,
    .r-vlxjld,
    [data-testid="app-bar-back"],
    .r-1nao33i,
    .r-13v1u17 {
        color: $text;
    }
    
    [aria-label="Top Tweets off"] * {
        color: $text !important;
    }
    
    // subdued text
    .r-1bwzh9t,
    .r-115tad6,
    .r-1bwzh9t {
        color: $overlay1;
    }
    
    input[data-testid="SearchBox_Search_Input"],
    .draftjs-styles_0 .public-DraftEditorPlaceholder-root,
    .r-1bwzh9t,
    [data-testid="tweet"] a.r-1bwzh9t {
        color: $overlay0;
    }
    
    // follow button
    [role="button"][data-testid*="-follow"] {
        background-color: $text !important;
    }
    
    // follow indicator
    [data-testid="userFollowIndicator"] {
        background-color: $surface0;
    }
    
    // buttons
    #topic-follow-button0,
    [data-testid*="-unfollow"],
    [data-testid="editProfileButton"] {
        border-color: $surface2 !important;
        
        > div {
            color: $text !important;
        }
    }
    
    [aria-label="Choose audience"] {
        border-color: $surface2 !important;
    }
    
    [data-testid*="-unfollow"]:hover {
        border-color: $maroon;
        
        > div {
            color: $maroon !important;
        }
    }
    
    // red overlay
    .r-qqmkd0 {
        background-color: alpha($maroon, 0.15)
    }
    
    // dm module shadow
    .r-qo02w8 {
        box-shadow: alpha($text, 0.2) 0px 0px 15px, alpha($text, 0.15) 0px 0px 3px 1px;
    }
    
    // shadow ig
    .r-1tbvlxk {
        filter: drop-shadow(alpha($text, 0.3) 0 2.5px 2px);
    }
    
    // retweet svg
    .r-o6sn0f {
        color: $green;
    }
    
    // like svg
    .r-vkub15 {
        color: $red;
    }
    
    // circles
    .r-s224ru {
        background-color: $green;
    }
    
    .r-h7o7i8 {
        background-color: alpha($green, 0.1);
    }
    
    // twitter yellow LMAO
    .r-jopxes {
        color: $yellow;
    }
    
    // new notifications?
    .r-1eltapf {
        background-color: alpha($sapphire, 0.1);
    }
    
    .r-9l7dzd {
        color: $maroon;
    }
    
    #header[role="banner"] {
        background: $base;
        color: $text;
        border-bottom-color: $surface1;
        
        .logo a {
            border-bottom-color: transparent;
        }
        
        #session h2 {
            a {
                color: $subtext0;
                background: unset;
            }
            
            img {
                border-color: $surface1;
            }
        }
    }
    
    [role="navigation"].footer {
        background: $mantle;
        border-top-color: $surface1;
        
        #ft {
            color: $overlay1;
        }
    }
    
    .teams label {
        color: $overlay1;
    }
    
    // a:link, a:visited, a:active, input.textual.link, button.textual.link {
    //     color: $accent;
    // }
    
    // ?
    
    [stroke="#2F3336"] {
        stroke: $surface2 !important;
    }

    [stroke="#1D9BF0"] {
        stroke: $accent !important;
    }
    
    [stroke="#FFD400"] {
        stroke: $yellow !important;
    }
    
    [fill="#829AAB"] {
        fill: $overlay2 !important;
    }
    
    .r-12bvdwa {
        color: $mauve;
    }
    
    .r-1xc7w19 {
        border: 1px solid $base;
    }
    
    .css-1dbjc4n.r-gtdqiz.r-ipm5af.r-136ojw6 > div {
        backdrop-filter: blur(12px);
    }
    
    [style*="color"][style*="255"][style*="212"][style*="0"] {
        color: $yellow !important;
    }
    
    [style*="color"][style*="0"][style*="186"][style*="124"] {
        color: $green !important;
    }
    
    [style*="color"][style*="249"][style*="24"][style*="128"] {
        color: $red !important;
    }
    
    [style*="color"][style*="120"][style*="86"][style*="255"] {
        color: $mauve !important;
    }
    
    [style*="color"][style*="255"][style*="122"][style*="0"] {
        color: $peach !important;
    }
    
    [style*="color"][style*="244"][style*="33"][style*="46"] {
        color: $maroon !important;
    }
    
    [style*="color"][style*="29"][style*="155"][style*="240"] {
        color: $accent !important;
    }
    
    [style*="color"][style*="15"][style*="20"][style*="25"]:not([style*="background-color"][style*="15"][style*="20"][style*="25"][style*="0.75"]) {
        color: theme is "Latte" ? #fff !important : $crust !important;
    }
    
    [style*="background-color"][style*="29"][style*="155"][style*="240"] {
        background-color: $accent !important;
    }
    
    [style*="background-color"][style*="239"][style*="243"][style*="244"] {
        background-color: $text !important;
    }
    
    [style*="background-color"][style*="15"][style*="20"][style*="25"][style*="0.75"]:not([style*="color"][style*="15"][style*="20"][style*="25"]) {
        background-color: alpha($base, 0.75) !important;
    }
    
    [style*="border-color"][style*="201"][style*="54"][style*="204"] {
        border-color: $mauve !important;
    }
    
    [style*="border-color"][style*="83"][style*="100"][style*="113"] {
        border-color: $surface2 !important;
    }
    
    [style*="background-color"][style*="(244"][style*="33"][style*="46)"] {
        background-color: $maroon !important;
    }
    
    [style*="color"][style*="239"][style*="243"][style*="244"] {
        color: $text !important;
    }
    
    [style*="border-bottom"][style*="(239"][style*="243"][style*="244)"] {
        border-bottom-color: $text !important;
    }
    
    [style*="border-color"][style*="(103"][style*="7"][style*="15)"] {
        border-color: $red !important;
    }
    
    [fill="#1d9bf0"] {
        fill: $blue !important;
    }
    
    [aria-describedby^="CHECKBOX_"][aria-describedby$="_LABEL"],
    .css-1dbjc4n.r-lrvibr,
    .r-1p0dtai.r-1ei5mc7.r-1pi2tsx.r-1d2f490.r-crgep1.r-orgf3d.r-t60dpp.r-u8s1d.r-zchlnj.r-ipm5af.r-13qz1uu,
    [style*="color"][style*="(255"][style*="255"][style*="255)"] {
        color: theme is "Latte" ? #fff !important : $crust !important;
    }
    
    [class="css-1dbjc4n r-k200y r-gu4em3 r-6t5ypu r-1roi411 r-1fuqb1j r-deolkf r-dnmrzs r-1ny4l3l r-ymttw5 r-1f1sjgu r-o7ynqc r-6416eg"],
    [class="css-901oao r-jwli3a r-37j5jr r-a023e6 r-16dba41 r-rjixqe r-bcqeeo r-1udh08x r-bnwqim r-fdjqy7 r-1rozpwm r-qvutc0"] {
        span {
            color: $text !important;
        }
    }
    
    [class="css-1dbjc4n r-173mn98 r-l5o3uw r-1dpl46z r-vhj8yc r-1fuqb1j r-deolkf r-dnmrzs r-1ny4l3l r-ymttw5 r-1f1sjgu r-o7ynqc r-6416eg"],
    [class="css-1dbjc4n r-173mn98 r-l5o3uw r-wab3e5 r-vhj8yc r-1fuqb1j r-deolkf r-dnmrzs r-1ny4l3l r-ymttw5 r-1f1sjgu r-o7ynqc r-6416eg"] {
        span {
            color: theme is "Latte" ? #fff !important : $crust !important;
        }
    }
 }

 @-moz-document domain("api.twitter.com") {
    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: theme is "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") {
    // TWITTER MEDIA DOWNLOADER
    
    body[data-nightmode="true"] .twMediaDownloader_media_button button.btn,
    .twMediaDownloader_media_button button.btn {
        background-color: $surface0;
        border-color: $surface2;
        color: $overlay2;
        
        &:hover {
            color: $text;
            background-color: $surface1;
            border-color: $overlay1
        }
    }
    
    .twMediaDownloader_download_button_container {
        bottom: 0 !important;
    }

    .twMediaDownloader_download_button {
        color: $accent;
        text-decoration: none;
        font-family: "TwitterChirp", "Meiryo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 12px;
    }

    #twMediaDownloader_container,
    #twMediaDownloader_container.night_mode {
        .btn {
            background-color: $surface0;
            color: $text;
            border-color: $surface1;

            &[disabled] {
                color: $text;
                background-color: $surface0;
                background-image: linear-gradient($overlay1, $surface0);
                border-color: $surface1;
            }
        }

        .twMediaDownloader_dialog {
            background: $crust;

            .twMediaDownloader_toolbox {
                background: $base;

                .range_container {
                    h3 {
                        color: $subtext0;
                    }

                    table {
                        color: $text;
                    }

                    input {
                        padding: 4px;
                        color: $text;

                        &.tweet_id,
                        &.tweet_number {
                            color: $overlay1;
                            background: $mantle;
                            border: solid 1px $surface0;
                        }
                    }
                }

                .twMediaDownloader_button_container {
                    label {
                        color: $text;
                    }
                }
            }

            .twMediaDownloader_status {
                background: $mantle;

                .twMediaDownloader_log {
                    color: $text;
                    background: $base;
                    border: inset $crust 1px;

                    .log-item {
                        text-shadow: unset;

                        a.tweet-link {
                            color: $red;
                        }

                        a.media-link {
                            color: $blue;
                        }
                    }
                }
            }
        }
    }
 }
	/* ==UserStyle==
	@name Twitter Catppuccin
	@namespace github.com/watatomo
	@version 1.0.0
	@description Works best with twitter on lights out mode, blue color selected
	@author Ren (watatomo)
	@preprocessor stylus

	@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
	@var select accent "Accent" ["Rosewater", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue*", "Sapphire", "Sky", "Lavender"]
	==/UserStyle== */
	@-moz-document domain("twitter.com") {
	if (theme == "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;
	} else if (theme=="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;
	} else if (theme=="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;
	} else if (theme=="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;
	$lavender = #b4befe;
	$blue = #89b4fa;
	$text = #cdd6f4;
	$subtext1 = #bac2de;
	$subtext0 = #a6adc8;
	$overlay2 = #9399b2;
	$overlay1 = #7f849c;
	$overlay0 = #6c7086;
	$surface2 = #585b70;
	$surface1 = #45475a;
	$surface0 = #313244;
	$base = #1e1e2e;
	$mantle = #181825;
	$crust = #11111b;
	}

	if (accent == "Rosewater") {
	$accent = $rosewater
	} else if (accent == "Flamingo") {
	$accent = $flamingo
	} else if (accent == "Pink") {
	$accent = $pink
	} else if (accent == "Mauve") {
	$accent = $mauve
	} else if (accent == "Red") {
	$accent = $red
	} else if (accent == "Maroon") {
	$accent = $maroon
	} else if (accent == "Peach") {
	$accent = $peach
	} else if (accent == "Yellow") {
	$accent = $yellow
	} else if (accent == "Green") {
	$accent = $green
	} else if (accent == "Teal") {
	$accent = $teal
	} else if (accent == "Blue") {
	$accent = $blue
	} else if (accent == "Sapphire") {
	$accent = $sapphire
	} else if (accent == "Sky") {
	$accent = $sky
	} else if (accent == "Lavender") {
	$accent = $lavender
	}

	body,
	.PageContainer {
	background-color: $base !important;
	color: $text;
	}

	a {
	color: $accent;
	}

	[data-testid="primaryColumn"],
	.r-kemksi,
	.r-yfoy6g {
	background-color: $base;
	}

	.r-cqee49 {
	color: $base;
	}

	html .ResponsiveLayout--Night,
	.r-54znze {
	color: $text;
	}

	// ???
	#session a, #session input, #session button {
	background: $surface0;
	color: $subtext0;
	}

	#session .user-menu a:focus, #session .user-menu a:hover, #session .user-menu button:focus, #session .user-menu button:hover, #session .user-menu input:focus, #session .user-menu input:hover {
	color: theme is "Latte" ? #fff : $crust;
	background-color: $accent;
	}

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

	.notice.error {
	background: alpha($red, 20%)
	border-color: alpha($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: theme is "Latte" ? #fff : $crust;
	border-color: darken($accent, 10%);
	}

	.submit-btn:hover, .redirect-btn:hover {
	background-color: $overlay2;
	}

	.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;
	}
	}

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

	// authorize page


	///

	.js #session .user-menu {
	background-color: $surface0;
	}

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

	///

	.r-jc7xae {
	background-color: $subtext0;
	}

	// hovered elements?
	.r-1hdo0pc {
	background-color: alpha($subtext1, 0.1);
	}

	// header
	.r-5zmot {
	background-color: alpha($base, 0.65);
	}

	// search bar
	.r-z32n2g,
	.r-8erxvq,
	// side containers
	.r-g2wdr4,
	.r-g6ijar {
	background-color: $mantle;
	}

	body.LightsOut .tnt_menu_item:hover a {
	background-color: $mantle !important;
	}

	// active?
	.r-14tof1o {
	background-color: $crust;
	}

	// side containers borders
	.r-14wv3jr,
	.r-74htps {
	border-color: $mantle;
	}

	// main border
	[data-testid="primaryColumn"],
	.r-1kqtdi0,
	.r-1roi411 {
	border-color: $surface1;
	}

	.r-gu4em3,
	.r-1bnu78o {
	background-color: $surface1;
	}

	.r-2sztyj {
	border-top-color: $surface1;
	}

	.r-1igl3o0 {
	border-bottom-color: $surface1;
	}

	// accent text
	.r-1cvl2hr {
	color: $accent;
	}

	// accent element
	.r-l5o3uw,
	// .r-4nw3r4,
	.r-1to6hqq {
	background-color: $accent;
	}

	.r-4nw3r4 {
	background-color: $red;
	}

	[data-testid="SideNav_NewTweet_Button"] {
	background-color: $accent !important;

	> div * {
	color: theme is "Latte" ? #fff !important : $crust !important;
	}
	}

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

	// accent element with accent bg
	.r-jwli3a,
	[data-testid="tweetButtonInline"] span {
	color: theme is "Latte" ? #fff : $crust;
	}

	.r-vhj8yc {
	border-color: $accent;
	}

	.r-1pbtemp {
	border-right-color: $accent;
	}



	// unset for image containers and stuff
	[data-testid="tweetPhoto"],
	a[href*="/i/events/"],
	a ~ div:has(.r-jwli3a),
	[style="transition-duration: 0.5s; transition-property: background-color;"],
	// [role="presentation"],
	[data-testid*="Carousel-Nav"],
	[data-testid="reply"],
	[data-testid="retweet"],
	[data-testid="like"],
	[data-testid="unlike"],
	[aria-label="Share Tweet"],
	[aria-label="Remove media"],
	[aria-label="Edit media"],
	h1 > a[href="/home"],
	nav[aria-label="Edit photo"] ~ div:has(.r-jwli3a),
	.r-drfeu3,
	.r-19130f6,
	[style="background-color"][style="(15"][style="20"][style="25"][style*="0.75)"],
	[data-testid="placementTracking"],
	.r-5i3rd4

	{
	.r-jwli3a {
	color: #fff;
	}
	}

	[data-testid="playButton"] .r-jwli3a {
	color: $crust;
	}

	// .r-1habvwh [data-testid="messageEntry"] [data-testid="tweetText"],
	// [data-testid="messageEntry"] [data-testid="DMCompositeMessage"] a,
	// .r-gu4em3 a {
	// color: $text !important;
	// }

	// [data-testid="messageEntry"] [data-testid="tweetText"][style="color"][style="(255"][style="255"][style="255)"] {
	// &,
	// a {
	// color: theme is "Latte" ? #fff !important : $crust !important;
	// }
	// }

	.css-1dbjc4n.r-1fz3rvf [data-testid="tweetText"] {
	color: $text;
	}

	.r-qazpri {
	color: $overlay0;
	}

	// spoiler blur
	.r-drfeu3 {
	background-color: alpha($crust, 0.6)
	}

	// main text
	.r-1nao33i,
	.r-vlxjld,
	[data-testid="app-bar-back"],
	.r-1nao33i,
	.r-13v1u17 {
	color: $text;
	}

	[aria-label="Top Tweets off"] * {
	color: $text !important;
	}

	// subdued text
	.r-1bwzh9t,
	.r-115tad6,
	.r-1bwzh9t {
	color: $overlay1;
	}

	input[data-testid="SearchBox_Search_Input"],
	.draftjs-styles_0 .public-DraftEditorPlaceholder-root,
	.r-1bwzh9t,
	[data-testid="tweet"] a.r-1bwzh9t {
	color: $overlay0;
	}

	// follow button
	[role="button"][data-testid*="-follow"] {
	background-color: $text !important;
	}

	// follow indicator
	[data-testid="userFollowIndicator"] {
	background-color: $surface0;
	}

	// buttons
	#topic-follow-button0,
	[data-testid*="-unfollow"],
	[data-testid="editProfileButton"] {
	border-color: $surface2 !important;

	> div {
	color: $text !important;
	}
	}

	[aria-label="Choose audience"] {
	border-color: $surface2 !important;
	}

	[data-testid*="-unfollow"]:hover {
	border-color: $maroon;

	> div {
	color: $maroon !important;
	}
	}

	// red overlay
	.r-qqmkd0 {
	background-color: alpha($maroon, 0.15)
	}

	// dm module shadow
	.r-qo02w8 {
	box-shadow: alpha($text, 0.2) 0px 0px 15px, alpha($text, 0.15) 0px 0px 3px 1px;
	}

	// shadow ig
	.r-1tbvlxk {
	filter: drop-shadow(alpha($text, 0.3) 0 2.5px 2px);
	}

	// retweet svg
	.r-o6sn0f {
	color: $green;
	}

	// like svg
	.r-vkub15 {
	color: $red;
	}

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

	.r-h7o7i8 {
	background-color: alpha($green, 0.1);
	}

	// twitter yellow LMAO
	.r-jopxes {
	color: $yellow;
	}

	// new notifications?
	.r-1eltapf {
	background-color: alpha($sapphire, 0.1);
	}

	.r-9l7dzd {
	color: $maroon;
	}

	#header[role="banner"] {
	background: $base;
	color: $text;
	border-bottom-color: $surface1;

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

	#session h2 {
	a {
	color: $subtext0;
	background: unset;
	}

	img {
	border-color: $surface1;
	}
	}
	}

	[role="navigation"].footer {
	background: $mantle;
	border-top-color: $surface1;

	#ft {
	color: $overlay1;
	}
	}

	.teams label {
	color: $overlay1;
	}

	// a:link, a:visited, a:active, input.textual.link, button.textual.link {
	// color: $accent;
	// }

	// ?

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

	[stroke="#1D9BF0"] {
	stroke: $accent !important;
	}

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

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

	.r-12bvdwa {
	color: $mauve;
	}

	.r-1xc7w19 {
	border: 1px solid $base;
	}

	.css-1dbjc4n.r-gtdqiz.r-ipm5af.r-136ojw6 > div {
	backdrop-filter: blur(12px);
	}

	[style="color"][style="255"][style="212"][style="0"] {
	color: $yellow !important;
	}

	[style="color"][style="0"][style="186"][style="124"] {
	color: $green !important;
	}

	[style="color"][style="249"][style="24"][style="128"] {
	color: $red !important;
	}

	[style="color"][style="120"][style="86"][style="255"] {
	color: $mauve !important;
	}

	[style="color"][style="255"][style="122"][style="0"] {
	color: $peach !important;
	}

	[style="color"][style="244"][style="33"][style="46"] {
	color: $maroon !important;
	}

	[style="color"][style="29"][style="155"][style="240"] {
	color: $accent !important;
	}

	[style="color"][style="15"][style="20"][style="25"]:not([style="background-color"][style="15"][style="20"][style="25"][style*="0.75"]) {
	color: theme is "Latte" ? #fff !important : $crust !important;
	}

	[style="background-color"][style="29"][style="155"][style="240"] {
	background-color: $accent !important;
	}

	[style="background-color"][style="239"][style="243"][style="244"] {
	background-color: $text !important;
	}

	[style="background-color"][style="15"][style="20"][style="25"][style="0.75"]:not([style="color"][style="15"][style="20"][style*="25"]) {
	background-color: alpha($base, 0.75) !important;
	}

	[style="border-color"][style="201"][style="54"][style="204"] {
	border-color: $mauve !important;
	}

	[style="border-color"][style="83"][style="100"][style="113"] {
	border-color: $surface2 !important;
	}

	[style="background-color"][style="(244"][style="33"][style="46)"] {
	background-color: $maroon !important;
	}

	[style="color"][style="239"][style="243"][style="244"] {
	color: $text !important;
	}

	[style="border-bottom"][style="(239"][style="243"][style="244)"] {
	border-bottom-color: $text !important;
	}

	[style="border-color"][style="(103"][style="7"][style="15)"] {
	border-color: $red !important;
	}

	[fill="#1d9bf0"] {
	fill: $blue !important;
	}

	[aria-describedby^="CHECKBOX_"][aria-describedby$="_LABEL"],
	.css-1dbjc4n.r-lrvibr,
	.r-1p0dtai.r-1ei5mc7.r-1pi2tsx.r-1d2f490.r-crgep1.r-orgf3d.r-t60dpp.r-u8s1d.r-zchlnj.r-ipm5af.r-13qz1uu,
	[style="color"][style="(255"][style="255"][style="255)"] {
	color: theme is "Latte" ? #fff !important : $crust !important;
	}

	[class="css-1dbjc4n r-k200y r-gu4em3 r-6t5ypu r-1roi411 r-1fuqb1j r-deolkf r-dnmrzs r-1ny4l3l r-ymttw5 r-1f1sjgu r-o7ynqc r-6416eg"],
	[class="css-901oao r-jwli3a r-37j5jr r-a023e6 r-16dba41 r-rjixqe r-bcqeeo r-1udh08x r-bnwqim r-fdjqy7 r-1rozpwm r-qvutc0"] {
	span {
	color: $text !important;
	}
	}

	[class="css-1dbjc4n r-173mn98 r-l5o3uw r-1dpl46z r-vhj8yc r-1fuqb1j r-deolkf r-dnmrzs r-1ny4l3l r-ymttw5 r-1f1sjgu r-o7ynqc r-6416eg"],
	[class="css-1dbjc4n r-173mn98 r-l5o3uw r-wab3e5 r-vhj8yc r-1fuqb1j r-deolkf r-dnmrzs r-1ny4l3l r-ymttw5 r-1f1sjgu r-o7ynqc r-6416eg"] {
	span {
	color: theme is "Latte" ? #fff !important : $crust !important;
	}
	}
	}

	@-moz-document domain("api.twitter.com") {
	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: theme is "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") {
	// TWITTER MEDIA DOWNLOADER

	body[data-nightmode="true"] .twMediaDownloader_media_button button.btn,
	.twMediaDownloader_media_button button.btn {
	background-color: $surface0;
	border-color: $surface2;
	color: $overlay2;

	&:hover {
	color: $text;
	background-color: $surface1;
	border-color: $overlay1
	}
	}

	.twMediaDownloader_download_button_container {
	bottom: 0 !important;
	}

	.twMediaDownloader_download_button {
	color: $accent;
	text-decoration: none;
	font-family: "TwitterChirp", "Meiryo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 12px;
	}

	#twMediaDownloader_container,
	#twMediaDownloader_container.night_mode {
	.btn {
	background-color: $surface0;
	color: $text;
	border-color: $surface1;

	&[disabled] {
	color: $text;
	background-color: $surface0;
	background-image: linear-gradient($overlay1, $surface0);
	border-color: $surface1;
	}
	}

	.twMediaDownloader_dialog {
	background: $crust;

	.twMediaDownloader_toolbox {
	background: $base;

	.range_container {
	h3 {
	color: $subtext0;
	}

	table {
	color: $text;
	}

	input {
	padding: 4px;
	color: $text;

	&.tweet_id,
	&.tweet_number {
	color: $overlay1;
	background: $mantle;
	border: solid 1px $surface0;
	}
	}
	}

	.twMediaDownloader_button_container {
	label {
	color: $text;
	}
	}
	}

	.twMediaDownloader_status {
	background: $mantle;

	.twMediaDownloader_log {
	color: $text;
	background: $base;
	border: inset $crust 1px;

	.log-item {
	text-shadow: unset;

	a.tweet-link {
	color: $red;
	}

	a.media-link {
	color: $blue;
	}
	}
	}
	}
	}
	}
	}