Bsky Feeds On The Side by rampwuff

/* ==UserStyle==
@name         Bsky Feeds On The Side
@version      20230814.16.43
@namespace    userstyles.world/user/rampwuff
@description  A much more comfortable way to browse between feeds on web (screen size bigger than 1230px)
@author       rampwuff
@license      No License
==/UserStyle== */

@-moz-document regexp("^https?://.*staging\\.bsky\\.app/$") {
@media(min-width: 1230px) {
    
    
    /**
        FEED MENU
    */
    
    
    /* Position the feed menu from the top of the page to the sidebar */
    #root > div > div > div:first-of-type > div > div > div > div > div > div > div:first-of-type {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        left: calc(50% + 460px) !important; /* the 440px here is a random magic number */
        top: 160px !important; /* as is this number */
        width: 304px !important;
        transform: translateX(-50%) translateY(0px) !important; /* necessary to avoid the feed jumping up when scrolling down */
    }

    /* Everything under this is just property drilling cause bsky REALLY likes duplicate inline styling */
    #root > div > div > div:first-of-type > div > div > div > div > div > div > div:first-of-type > div {
        width: 304px !important;
        flex-direction: column !important;
    }

    #root > div > div > div:first-of-type > div > div > div > div > div > div > div:first-of-type > div > div,
    #root > div > div > div:first-of-type > div > div > div > div > div > div > div:first-of-type > div > div > div {
        flex-direction: column !important;
    }

    
    /**
        FEED
    */
    
    
    /* The feed has a padding-top to account for the feed menu, but since that's gone now we can get rid of that */
    #root > div > div > div:first-of-type > div > div > div > div > div > div > div:not(:first-of-type) > div > div:first-of-type > div > div > div {
        padding-top: 0 !important;
    }
    
}
}