Bluesky Threads Theme by Whey

/* ==UserStyle==
@name           Bluesky Threads Theme
@namespace      github.com/openstyles/stylus
@version        0.2.0
@description    userstyle for bluesky that makes it look like Threads
@author         Whey!
==/UserStyle== */
@-moz-document url-prefix("https://bsky.app"),
url-prefix(https://main.bsky.dev) {
    /* Insert code here... */
    /*from birdified*/
    /* color defs */
    :root {
        /* this doesnt work, it will always fallback to blue*/
        /* heyy Noble pls make --themeColor defined in :root alr thx*/
        --color-brand: var(--tweak-accent, var(--themeColor, rgb(0, 133, 255)));

        --numpad: 2px;
        --elipsisfix: 530px;
        --elipsisfix2: 107px;
        --color-twitter-comment: #1d9bf0;
        --color-twitter-repost: #00ba7c;
        --color-twitter-like: #f91880;
        /*}
        .r-kemksi, .colorMode--dark{*/
        --placeholderbg: rgb(38, 39, 45);
        --placeholdercolor: hsl(0, 0%, 17%);
        --placeholdericoncolor: hsl(231, 8%, 29%);
        --feedoutline: var(--color-twitter-border);
        --feedtext: var(--color-twitter-white);
        --lightbg: rgb(22, 24, 28);
        --darkerlightbg: #26272d;
        --darkdimheader: #000000ba;
        --hoverlight: rgba(255, 255, 255, 0.1);
        --hoverdim: rgba(231, 233, 234, 0.1);
        --overlaydim: rgba(91, 112, 131, 0.4);
        --black: black;
        --white: white;
        --blackish: #0f1419;
        --whiteish: #eff3f4;
        --black065: rgba(0, 0, 0, 0.65);
        --blackelipsis: #00000080;
        --threadlines: #333639;
        --color-twitter-grey: rgb(113, 118, 123);
        --color-twitter-white: rgb(231, 233, 234);
        --color-twitter-border-alt: rgb(83, 100, 113);
        --color-twitter-border: rgb(47, 51, 54);
        --color-twitter-comment-transparent: rgba(29, 155, 240, 0.15);
        --color-twitter-repost-transparent: rgba(0, 168, 124, 0.15);
        --color-twitter-like-transparent: rgba(249, 24, 128, 0.15);
        --searchbg: #202327;
        --color-twitter-grey-shadow: rgba(113, 118, 123, 0.7);
    }
    html[class="theme--dim"] {
        --black065: rgba(22, 30, 39, 0.65) !important;
        --color-twitter-border: #2F3F52;
    }
    /*light mode*/
    .r-14lw9ot,
    .colorMode--light {
        --placeholderbg: rgb(243, 243, 248);
        --placeholdercolor: hsl(0, 0%, 96%);
        --placeholdericoncolor: hsl(231, 8%, 88%);
        --feedoutline: var(--color-brand);
        --feedtext: var(--color-brand);
        --lightbg: rgb(247, 249, 249);
        --darkerlightbg: #f3f3f8;
        --darkdimheader: rgba(255, 255, 255, 0.67);
        --hoverlight: rgba(15, 20, 25, 0.1);
        --hoverdim: rgba(231, 233, 234, 0.1);
        /*make light mode pls thx*/
        --overlaydim: rgba(0, 0, 0, 0.4);
        --black: white;
        --white: black;
        --blackish: #eff3f4;
        --whiteish: #0f1419;
        --black065: rgba(255, 255, 255, 0.65);
        --blackelipsis: rgba(255, 255, 255, 0.502);
        --threadlines: #cfd9de;
        --color-twitter-grey: rgb(83, 100, 113);
        --color-twitter-white: rgb(15, 20, 25);
        --color-twitter-border-alt: rgb(207, 217, 222);
        --color-twitter-border: #eff3f4;
        --color-twitter-comment-transparent: rgba(29, 155, 240, 0.1);
        --color-twitter-repost-transparent: rgba(0, 168, 124, 0.1);
        --color-twitter-like-transparent: rgba(249, 24, 128, 0.1);
        --searchbg: #eff3f4;
        --color-twitter-grey-shadow: rgba(83, 100, 113, 0.7);
    }
    .r-84gixx {
        color: var(--color-twitter-like);
    }
    .r-5ld2xk {
        color: var(--color-twitter-repost);
    }

    /*birdified end*/
    /*threads*/
    div[data-testid="HomeScreen"] > div > div[style*="border-color"] {
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }

    div[data-testid="HomeScreen"] > div > div[style*="position: relative;"] {
        position: sticky !important;
        padding-bottom: 10px !important;
        top: 0;
        z-index: 9;
        /*box-shadow: 0 0px 0 black !important;*/
        overflow: visible;
        border-color: transparent !important;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        &::after {
            z-index: -10;
            content: "";
            background: transparent;
            box-shadow: 0 -25px 0px black !important;
            position: absolute;
            bottom: -50px;
            left: -0.5px;
            width: 600px;
            height: 50px;
            border-top-left-radius: 32px;
            border-top-right-radius: 32px;
            pointer-events: none;
        }
        &::before {
            z-index: -9;
            content: "";
            background: transparent;
            box-shadow: 0 -1px 0px #2D2D2D !important;
            position: absolute;
            bottom: -50px;
            left: -0.5px;
            width: 600px;
            height: 50px;
            border-top-left-radius: 32px;
            border-top-right-radius: 32px;
            pointer-events: none;
        }
        & svg[viewBox="0 0 64 57"] * {
            fill: #E3E5E7 !important;
        }
    }

    div[data-testid="customFeedPage-feed-flatlist"] > .r-1ye8kvj,
    [data-testid="homeScreenFeedTabs"], 
    div[data-testid="followingFeedPage-feed-flatlist"] > div > div,
    .r-1ye8kvj /* 600px widths */
    {
        background: #181818 !important;
    }
    
    /* tab pager color */
    div[role="tab"] > div[style*="border-bottom-color"] {
        /*border-color: #E3E5E7 !important;*/
        border-color: transparent !important;
    }
    div[role="tab"] > div{
        border-bottom-width: 0px !important;
        padding-bottom: 14px;
    }
    div[role="tab"]{
        padding-top: 16px;
        align-items: center;
        min-width: 100px;
        border-bottom-width: 2px;
        border-style: solid;
        border-color: transparent;
        &:has(> div[style*="border-bottom-color"]){
            border-color: #E3E5E7 !important;
        }
    }

    /*post ctrl spacing*/
    div[style="flex-direction: row; justify-content: space-between; align-items: center;"] {
        display: flex !important;
        justify-content: flex-start !important;
        /* Stack everything to the left */
        gap: 10px !important;
        & > div {
            flex: 0 0 auto !important;
            margin: unset !important;
            width: auto !important;
            display: flex !important;
            & > * {
                overflow: visible !important;
            }
            padding-top: 8px;
            padding-bottom: 4px;
            & > *,
            & > * > *,
            & > * > * > *,
            & > * > * > * > *,
            & > *:not([aria-label*="Unlike"]) > * > * > * > *,
            & > * > * > * > * > * > * {
                fill: #ccc !important;
                color: #ccc !important;
            }
            &:has(button[aria-label*="ike"]) {
                order: -1;
                & > button {
                    padding-left: 0 !important;
                }
            }
        }
    }
    /*#CCC*/
    /* color replacements */
    [style*="color: rgb(140, 158, 178)"],
    *:not(button[aria-expanded])>[style*="color: rgb(16, 131, 254)"]:not([href*="/profile/"]):not([role="link"]):not([style*="font-size: 11.25px"]) {
        color: #777 !important;
    }

    /*nav*/
    nav {
        width: 100% !important;
        background: transparent !important;
        pointer-events: none;
        & > * {
            pointer-events: auto;
        }
        
        & > *:not(button[data-testid="viewHeaderBackOrMenuBtn"]){
            margin-right: auto !important;
        }
        
        
        left: 0 !important;
        align-items: center !important;
        & > a:nth-child(1),
        & > div:nth-last-child(1) {
            margin: 0 ;
            padding: 0 !important;
            width: auto;
        }
        & > div:nth-last-child(1) {
            & > button {
                background: transparent !important;
                & > div:nth-last-child(1) {
                    display: none;
                }
            }
            /*& svg{
                height: 20px!important;
                width: 20px!important;
            }*/
        }
        & [style="color: rgb(241, 243, 245);"],
        & a:not(:has(>div:nth-child(2)[style*="font-weight: 800;"])) [style="color: rgb(241, 243, 245);"] *,
        & > div:nth-last-child(1) * {
            color: #777 !important;
            fill: #777 !important;
        }
        & > a > div:nth-child(2) {
            /*:not(:has(>div:nth-child(2)[style*="font-weight: 800;"]))*/
            /*color: #777 !important;*/
            display: none;
        }


        /*ordering*/
        & > a:nth-child(1) {
            order: 10;
            padding: 4px 9px !important;
            margin-bottom: 10px;
            &,
            & * {
                height: 42px !important;
                width: 42px !important;
            }
        }
        & > a[href="/messages"] {
            order: 20;
        }
        height: 100dvh !important;
        & > a[href="/"] {
            order: 51;
            margin-top: auto;
        }
        & > a[href="/search"] {
            order: 52;
        }
        & > div:nth-last-child(1) {
            order: 53;
            &:hover *{
                fill: white !important;
            }
            background: rgb(23, 23, 23) !important;
            border-radius: 8px;
            & *:not(button) {
                height: 24px !important;
                width: 24px !important;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            & button{
            padding: 14px 18px !important;
                & > div {
                    margin: 0 !important;
                    & > div {
                            transform: translateX(-12p...