Discord Minimize Sidebars by xiaopanpankevinpan

/* ==UserStyle==
@name           Discord Minimize Sidebars
@namespace      https://openuserjs.org/users/kevin_pan_940506
@version        1.3.0
@description    `
    I stole the idea from the masterpiece https://userstyles.org/styles/227553/ of Vinter (1363485 on userstyles.org). But what's different?
    - Use Sidebar as Triggerzone; vice versa if possible and you want.
    - Choose what to be minimized.
`
@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      cSelSvrBar      "Channels - Server Sidebar as Triggerzone"      {
    "Yes*": `[class*="guilds"]:not(:hover):not(:focus-within) + * `,
    "No":   ""
}
@var    text        cOpa            "Channels - Opacity on minimized"               0.00
@var    text        cVisWidth       "Channels - Visible Width on minimized"         5px

------

@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      gSelChlBar      "Servers - Channel Sidebar as Triggerzone"      {
    "Yes*": `:not(:has(+ * [class*="sidebar_"]:is(:hover, :focus-within)))`,
    "No":   ""
}
==/UserStyle== */
@-moz-document regexp("https?://(ptb\\.|canary\\.)?discord.com/(channels|store|guild-discovery).*") {

/*-- START OF channel sidebar --*/
    
/*[[cWork]]*/ [class*="sidebar_"] {
    transition: width /*[[duration]]*/, opacity /*[[duration]]*/;
    opacity: 1;
}

/*[[cWork]]*/ /*[[cSelSvrBar]]*/ [class*="sidebar_"]: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]]*/ [class*="guilds_"]:not(:hover):not(:focus-within)/*[[gSelChlBar]]*/ {
    transition: width /*[[duration]]*/ /*[[delay]]*/, opacity /*[[duration]]*/ /*[[delay]]*/;
    width: /*[[gVisWidth]]*/;
    opacity: /*[[gOpa]]*/;
}
    
/*-- END OF guild sidebar --*/

}