Discord Minimize Sidebars by xiaopanpankevinpan

/* ==UserStyle==
@name           Discord Minimize Sidebars
@namespace      https://openuserjs.org/users/kevin_pan_940506
@version        2.1.1
@description    `
    This works for Discord's new layout! (Which was introduced on 2025/03/25)
`
@author         XiaoPanPanKevinPan
@preprocessor   uso

var     <type>      <name>          <label>                                         <default value>
@var    text        duration        "Transition Duration"                           0.25s
@var    text        delay           "Transition Delay (e.g. before re-minimizing)"  0.75s

------

@var    select      cWork           "Channels - Minimize?"                          {
    "Yes*": "",
    "No":   "*:not(*)"
}
@var    select      cSelSide        "Channels - Whole Sidebar as Triggerzone"       {
    "Yes*": `[class*='app_'] [class*='base_'] [class*="sidebar_"]:not(:hover):not(:focus-within):not(body:has(#guild-context, [class*="accountProfilePopoutWrapper_"]) *) `,
    "No":   `[class*='app_'] [class*='base_'] [class*="sidebar_"] `
}
@var    text        cOpa            "Channels - Opacity on minimized"               0.00
@var    text        cVisWidth       "Channels - Visible Width on minimized"         0px

------

@var    select      gWork           "Servers - Minimize?"                           {
    "Yes*": "",
    "No":   "*:not(*)"
}
@var    text        gVisWidth       "Servers - Visible Width on minimized"          5px
@var    text        gOpa            "Servers - Opacity on minimized"                0.00
@var    select      gSelSide        "Servers - Whole Sidebar as triggerzone"        {
    "Yes*": `[class*='app_'] [class*='base_'] [class*="sidebar_"]:not(:hover):not(:focus-within):not(body:has(#channel-context, [class*="accountProfilePopoutWrapper_"]) *)  `,
    "No":   `[class*='app_'] [class*='base_'] [class*="sidebar_"] `
}

------

@var    select      uFade           "User Panel - Faded?"                           {
    "Yes*": "",
    "No": "*:not(*)"
}
@var    text        ufOpa           "User Panel - Opacity on Faded"                 0.00

@var    select      uSmlSty         `User Panel - Style better for squeezed?`       {
    "Yes*": "",
    "No":   "*:not(*)"
}

@var    select      uAbs            "User Panel - as a Floating Ball?"              {
    "Yes": "",
    "No*": "*:not(*)"
}
@var    text        uaWidth         "User Panel - Floating Width"                   `300px`
@var    text        uaMinWidth      "User Panel - Floating Width on minimized"                   `300px`
@var    text        uaLeft          "User Panel - Floating Left"                    `none`
@var    text        uaMinLeft       "User Panel - Floating Left on minimized"                    "-290px"

------

@var    select      tWork           "Top Bar - Hide?"                               {
    "Yes*": "",
    "No": "*:not(*)"
}
@var    text        tOpa            "Top Bar - Opacity on Minimized"                0.00
@var    text        tVisHeight      "Top Bar - Visible Height on minimized"         5px
==/UserStyle== */
@-moz-document regexp("https?://(ptb\\.|canary\\.)?discord.com/(channels|store|guild-discovery).*") {

    /*-- START OF channel sidebar --*/
    /*[[cWork]]*/ [class*="sidebarList_"] {
        transition: width /*[[duration]]*/, opacity /*[[duration]]*/;
        opacity: 1;
    }
    /*[[cWork]]*/ body:not(:has(#channel-context)) /*[[cSelSide]]*/ [class*="sidebarList_"]:not(:hover):not(:focus-within) {
        transition: width /*[[duration]]*/ /*[[delay]]*/, opacity /*[[duration]]*/ /*[[delay]]*/;
        width: /*[[cVisWidth]]*/;
        opacity: /*[[cOpa]]*/;
    }
    /*-- END OF channel sidebar --*/
    
    /*-- START OF guild sidebar --*/
    /*[[gWork]]*/ [class*="guilds_"] {
        transition: width /*[[duration]]*/, opacity /*[[duration]]*/;
        opacity: 1;
    }
    /*[[gWork]]*/ body:not(:has(#guild-context)) /*[[gSelSide]]*/ [class*="guilds_"]:not(:hover):not(:focus-within) {
        transition: width /*[[duration]]*/ /*[[delay]]*/, opacity /*[[duration]]*/ /*[[delay]]*/;
        width: /*[[gVisWidth]]*/;
        opacity: /*[[gOpa]]*/;
    }
    /*-- END OF guild sidebar --*/
    
    /*-- START OF User Panel: Fade --*/
    /*[[uFade]]*/ [class*='app_'] [class*='base_'] [class*="sidebar_"] [class*="panels_"] {
        transition: opacity /*[[duration]]*/;
    }
    /*[[uFade]]*/ body:not(:has(#channel-context, #guild-context, [class*="accountProfilePopoutWrapper_"])) [class*='app_'] [class*='base_'] [class*="sidebar_"]:not(:hover):not(:focus-within) [class*="panels_"]:not(:hover):not(:focus-within) {
        transition: opacity /*[[duration]]*/ /*[[delay]]*/;
        opacity: /*[[ufOpa]]*/;
    }
    /*-- END OF User Panel: Fade --*/
    
    /*-- START OF User Panel: Squizzed Style --*/
    /*[[uSmlSty]]*/ [class*='app_'] [class*='base_'] [class*="sidebar_"] [class*="panels_"] {
        overflow: hidden;
    }
    /*[[uSmlSty]]*/ [class*='app_'] [class*='base_'] [class*="sidebar_"] [class*="panels_"] [class*="avatarWrapper_"] {
        z-index: 1;
    }
    /*-- END OF User Panel: Squizzed Style --*/

    /*-- START OF User Panel: Floating Ball --*/
    /*[[uAbs]]*/ [class*='app_'] [class*='base_'] [class*="sidebar_"] [class*="panels_"] {
        position: absolute;
        width: /*[[uaWidth]]*/;
        left: /*[[uaLeft]]*/;
        transition: width /*[[duration]]*/, left /*[[duration]]*/;
    }
    /*[[uAbs]]*/ body:not(:has([class*="accountProfilePopoutWrapper_"])) [class*='app_'] [class*='base_'] [class*="sidebar_"] [class*="panels_"]:not(:hover):not(:focus-within) {
        left: /*[[uaMinLeft]]*/;
        width: /*[[uaMinWidth]]*/;
        transition: width /*[[duration]]*/ /*[[delay]]*/, left /*[[duration]]*/ /*[[delay]]*/;
    }
    /*[[uAbs]]*/ [class*='app_'] [class*='base_'] [class*="sidebar_"] [class*="sidebarList_"] > * {
        padding-bottom: 0;
    }
    /*[[uAbs]]*/ [class*='app_'] [class*='base_'] [class*="sidebar_"] [class*="guilds_"] {
        margin-bottom: 0;
    }
    /*-- END OF User Panel: Floating Ball --*/
    
    /*-- START OF top bar --*/
    /*[[tWork]]*/ [class*="bar_"]:has([class*="title_"] + [class*="leading_"] + [class*="trailing_"]) {
        transition: height /*[[duration]]*/, opacity /*[[duration]]*/;
        opacity: 1;
    }
    /*[[tWork]]*/ [class*="bar_"]:has([class*="title_"] + [class*="leading_"] + [class*="trailing_"]):not(:hover):not(:focus-within) {
        transition: height /*[[duration]]*/ /*[[delay]]*/, opacity /*[[duration]]*/ /*[[delay]]*/;
        opacity: /*[[tOpa]]*/;
    }
    /*[[tWork]]*/ [class*="base_"]:has([class*="bar_"] [class*="title_"] + [class*="leading_"] + [class*="trailing_"]) {
        transition: grid-template-rows /*[[duration]]*/;
    }
    /*[[tWork]]*/ [class*="base_"]:has([class*="bar_"]:not(:hover):not(:focus-within) [class*="title_"] + [class*="leading_"] + [class*="trailing_"]){
        transition: grid-template-rows /*[[duration]]*/ /*[[delay]]*/;
        --custom-app-top-bar-height: /*[[tVisHeight]]*/;
        &, & * {
            --custom-app-top-bar-height: /*[[tVisHeight]]*/;
        }
    }
    /*-- END OF top bar --*/
    
    /*-- START OF fixes for firefox --*/
    /*  There is a difference of behaviours between Firefox and Chromium.
     *  When there is a `width` set on `.sidebar_*` but the children of it
     *  cannot fill the width, Chrome use the sum of the children's widths
     *  as the real width, while Firefox follows the set `width`. This fix
     *  unset the width on `.sidebar_*` so that Firefox calculate the width
     *  like Chrome.
     */
    [class*='app_'] [class*='base_'] [class*="sidebar_"] {
        width: unset !important;
        overflow: visible;
    }
    /*  It seems that Firefox uses some hacks to lower down the frequency 
     *  of re-rendering by eliminate the amount of :hover events. We 
     *  detect the state of :not(:hover), which firefox couldn't parse it
     *  very well (yet). So we use some empty rules of :hover to hint it.
     */
    [class*='app_'] [class*='base_'] [class*="sidebar_"] :is([class*="sidebarList_"], [class*="guilds_"], [class*="panels_"]):is(:hover, :focus-within), [class*="bar_"]:has([class*="title_"]):is(:hover, :focus-within) {}
    /*-- END OF a fix for firefox --*/

}