Skip to content

Instantly share code, notes, and snippets.

@cwillsey06

cwillsey06/discordapp-responsive-sidebars.user.css

Last active March 7, 2023 00:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cwillsey06/8b4b089379b4253de9f454805f45ab10 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cwillsey06/8b4b089379b4253de9f454805f45ab10 to your computer and use it in GitHub Desktop.
Download ZIP
Minimize Discord sidebars when viewport is too small
Raw
discordapp-responsive-sidebars.user.css
/* ==UserStyle==
@name Responsive sidebars
@namespace github.com/cwillsey06
@version 1.0.0
@description minimizes sidebars when viewport is too small
@author cwillsey06
@preprocessor uso
@var text viewport-size "minimum viewport size" 1024px
@var text servers-width "width of servers panel when minimized" 5px
@var text channel-width "width of channel panel when minimized" 5px
@var text animation-dur "scaling transition duration" 200ms
@var text panel-opacity "opacity of the panels wthen minimized" 0
==/UserStyle== */
@-moz-document regexp("https?://(ptb\\.|canary\\.)?discord.com/(channels|store|guild-discovery).*") {
[class*="sidebar"] {
transition-property: width, opacity;
transition-duration: /*[[animation-dur]]*/;
opacity: 1;
}
[class*="guilds"] {
transition-property: width, opacity;
transition-duration: /*[[animation-dur]]*/;
opacity: 1;
}
@media only screen and (max-width: /*[[viewport-size]]*/) {
[class*="sidebar"]:not(:hover):not(:focus-within) {
width: /*[[channel-width]]*/;
opacity: /*[[panel-opacity]]*/
}
[class*="guilds"]:not(:hover):not(:focus-within) {
width: /*[[servers-width]]*/;
opacity: /*[[panel-opacity]]*/
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment