newtweetdeck.user.css

/* ==UserStyle==
@name           tweetdeck.twitter.com - 20/08/2023, 1:05:42 am
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document domain("tweetdeck.twitter.com") {
    /* new tweet sidebar, minimised unless hovered */
    [data-testid="logged-in-view"] > div:has(+ main) {
        /* border: 1px solid red; */
        /* all these commented-out border styles are debugging aids */
        flex-basis: 50px;
        
        &:hover {
            flex-basis: unset;
        }
    }

    /* column */
    section[role="region"]:not([aria-labelledby]) {
        /* border: 1px solid red; */
        width: 250px;
        
        /* column inner */
        section[role="region"][aria-labelledby] {
            /* border: 1px solid green; */
            width: 245px;
            
            /* tweet text */
            [data-testid="tweetText"] {
                font-size: 12px;
                line-height: 1.3;
            }

            /* == starts: making avatars not waste a ton of space == */
            div:has(> [data-testid="Tweet-User-Avatar"]) {
                /* border: 1px solid white; */
                flex-basis: 0;
            }
            
            [data-testid^="UserAvatar-Container-"] > div > div > div > div[style] {
                width: 24px !important;
                height: 24px !important;
                transform: translateX(8px);
            }
            
            div[dir="ltr"]:has(> span) ~ [role="link"] div:has(> [data-testid="Tweet-User-Avatar"]) {
                flex-basis: unset;
            }
            /* == ends: avatars shite == */
        }
    }

    /* hide the dm drawer unless hovered */
    [data-testid="DMDrawer"] {
        position: relative;
        top: 40px;
        width: 0;
        transition: top 100ms;
        
        &:hover {
            top: 0;
        }
    }
}