Authormostlysoftware
LicenseNo License
CategoryDiscord
Created
Updated
Size3.0 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
VIEW DISCORD IN SMALLER WINDOWS. WIDGETIZE YOUR DISCORD. NEW AND UPDATED.
(Same old discord slim, but now with friend icons shown in collapsed view.)
A minor but necessary tweak to discord: sidebars hide away when you're not using them, and reveal themselves when you mouse-over them.
added a delay to the sidebar, so you don't accidentally open or close it.
/* ==UserStyle==
@name Discord Slim
@namespace USO Archive
@author Mostly Software (Arcael)
@description `Use discord on tiny screens. Hover over sidebars to show contents. Delay to avoid accidental activation.`
@version 20210914.10.10
@license CC0-1.0
@preprocessor uso
==/UserStyle== */
/* ==UserStyle==
@name Discord Slim
@namespace USO Archive
@author Mostly Software (Arcael)
@description `Use discord on tiny screens. Hover over sidebars to show contents. Delay to avoid accidental activation.`
@version 20200505.22.22
@license CC0-1.0
@preprocessor uso
==/UserStyle== */
@-moz-document url-prefix("https://discord") {
/* variables for easy editing */
:root {
--transitionfunction: .4s .4s ease-in-out;
--collapsedwidth: 50px;
}
/* set up transitions and delays */
[class|=sidebar],
[class|=membersWrap],
[class|=membersWrap] [class|=members],
[class|=sidebar] > * > * > *,
[class|=sidebar] > :not([class|=privateChannels]),
[class*=nowPlaying],
[class*=nowPlaying] > *,
[class|=sidebar] [class|=panels],
[class|=sidebar] [class|=privateChannelsHeaderContainer] > :first-child
{
transition:
width var(--transitionfunction),
min-width var(--transitionfunction),
opacity var(--transitionfunction),
transform var(--transitionfunction),
flex-basis var(--transitionfunction),
height var(--transitionfunction),
margin-bottom var(--transitionfunction);
transform-origin: 0 0;
}
/* collapse sidebars */
[class|=sidebar]:not(:hover),
[class|=membersWrap]:not(:hover) .members-1998pB
{
width: var(--collapsedwidth);
}
[class|=membersWrap]:not(:hover),
[class*=nowPlaying]:not(:hover)
{
width: var(--collapsedwidth);
min-width: 0;
flex-basis:50px;
}
/* hide collapsed sidebar contents */
[class|=sidebar]:not(:hover) > :not([class|=privateChannels]),
[class|=membersWrap]:not(:hover) [class|=members],
[class*=nowPlaying]:not(:hover) > *
{
opacity:0;
}
/* hide user icon subheader when collapsed */
[class|=sidebar]:not(:hover) [class|=privateChannelsHeaderContainer] > :first-child {
opacity:0;
}
/* nudge sidebar contents to the left */
[class|=sidebar] > *
{
margin-left:-8px;
}
/* hide user panel until hover */
[class|=sidebar]:not(:hover) [class*=panels]
{
margin-bottom:-50px;
}
}
@-moz-document url-prefix("https://discord.com/channels/@me/") {
/* longer delay on user icon sidebar */
[class|=sidebar]:hover,
[class|=sidebar]:hover *,
[class|=sidebar]:hover [class|=panels],
[class|=sidebar]:hover [class|=privateChannelsHeaderContainer] > :first-child
{
transition-delay:.5s;
}
}