#This, but fixed with new classes

1 messages ยท Page 1 of 1 (latest)

willow gazelle
#

just wanted to ask is it supposed to like Sanp?

jolly anchor
#

no idea

quiet silo
#

member list will close when you went too far right side, any fix for this I appreciate a lot.

search bar at the top doesn't animate or overlaps which looks weird, a minor thing but if there's a fix I appreciate.

Thank you @jolly anchor

azure magnet
azure magnet
#

@quiet silo sorry for ghost ping, but this is the correct fixed version:

/* minified memberlist (midnight theme version) */
:root{
    --collapsed: 62px;
    --expanded: 240px;
    --transition: 0.2s ease-out;
}
.searchResultsWrap__9f374,
.container_def45c {
    margin-right: var(--spacing);
}
.container_b2ce9c {
    background: none;
}
.membersWrap__90226,
.container_b2ce9c {
    padding-right: var(--spacing);
    min-width: unset;
    width: var(--collapsed);
    transition: var(--transition);
}
.membersWrap__90226::before {
    width: calc(100% - var(--spacing));
}
.members__9f47b {
    width: var(--collapsed);
    transition: var(--transition);
}
.membersWrap__90226:hover,
.membersWrap__90226:hover .members__9f47b,
.container_b2ce9c:hover {
    width: var(--expanded);
}
.membersGroup__85843 {
    height: 0;
    padding-top: 0;
    transition: var(--transition);
}
.membersWrap__90226:hover .membersGroup__85843 {
    padding: 24px 8px 0 16px;
    height: 40px;
}
.searchBar_e0c60b {
    margin-right: var(--spacing);
}
.chat__52833:has(.membersWrap__90226:not(:hover)) .searchBar_e0c60b {
    width: calc(var(--collapsed) - 24px) !important;
    margin-left: calc(var(--spacing) + 8px);
}
.base__3e6af {
    margin-right: 0;
}```
azure magnet
quiet silo
quiet silo
#

It works flawlessly, just a small minor issue I found that don't have to be fixed if it's impossible or don't have the time for it.

#

I appreciate the fix a lot prayumaru

azure magnet
quiet silo
azure magnet
# quiet silo

ok i have fixed this, but removed the case where you hover on the very edge because it will be a ton of work to implement for every single discord panel.

/* minified memberlist (midnight theme version) */
:root {
    --collapsed: 62px;
    --expanded: 240px;
    --transition: 0.2s ease-out;
}
.membersWrap__90226 {
    min-width: unset;
    width: var(--collapsed);
    transition: var(--transition);
    height: 100%;
}
.members__9f47b,
.container_b2ce9c {
    width: var(--collapsed);
    transition: var(--transition);
}
.membersWrap__90226:hover,
.membersWrap__90226:hover .members__9f47b,
.container_b2ce9c:hover {
    width: var(--expanded);
}
.membersGroup__85843 {
    height: 0;
    padding-top: 0;
    transition: var(--transition);
}
.membersWrap__90226:hover .membersGroup__85843 {
    padding: 24px 8px 0 16px;
    height: 40px;
}
.chat__52833:has(.membersWrap__90226:not(:hover)) .searchBar_e0c60b {
    width: calc(var(--collapsed) - 24px) !important;
    margin-left: calc(var(--spacing) + 8px);
}```
real basin
#

does anyone else have this kinda broke inside of threads

#

ok nvm

#

there was a channel width var in my theme

#

switched that to the minified width and it's fine now

#

lol

zealous kelp
#

thank you blobcatcozy

whole solstice
#

hey, the latest discord update seems to have broken this snippet, is there any fix

analog mango
#

Made slight changes, idk how to fix it fully but it works.

:root {
    --hidden-user-width: 60px; --user-width: 240px; --transition-time: 0.4s;
}
.container_b2ce9c,
.membersWrap__5ca6b{
    transition-duration:var(--transition-time);
    justify-content:unset;
    min-width:unset;
    width:var(--hidden-user-width);
}
.membersGroup_cad095{
    height:0px;
    transition-duration:var(--transition-time);
    padding-top:0px
}
.container_b2ce9c:hover 
.membersGroup_cad095,
.membersWrap__5ca6b:hover 
.membersGroup_cad095{
    height:40px;
    padding-top:24px
}
.container_b2ce9c:hover,
.membersWrap__5ca6b:hover{
    width:var(--user-width);
}
.profilePanel-2PWEok{ transition-duration:var(--transition-time); }```
whole solstice
#

ty

rich drum
#
:root{
    --collapsed-thread-member-list-width: 60px; 
    --collapsed-sidebar-width: 48px;
    --collapsed-member-list-width: 48px;
}
/* CHANNELS */
[class^=base_]>[class^=content_]>[class^=chat_]
    >[class^=content_]>[class^=container_] {
        margin: var(--ui-margin-value);
        margin-top: 0;
        max-width: var(--collapsed-member-list-width);
        
        >aside>div>div>h3[class^=membersGroup]{
            height:0px;
            padding-top:0px;
        }

        &:hover {
            max-width: 100%;
            >aside>div>div>h3[class^=membersGroup]{
                height:40px;
                padding-top:24px;
            }
        }
    }


/* THREAS */
[class^=chat]>[class^=content_]>[class^=membersWrap] {
    flex-basis:var(--collapsed-thread-member-list-width);
    min-width: unset;
    max-width: var(--collapsed-thread-member-list-width);
    >[class^=members]{
        min-width: unset;
        max-width: var(--collapsed-thread-member-list-width);
        >ul>[class^=membersGroup]{
            height:0px;
            padding-top:0px;
        }            
        &:hover{
            max-width: 100%;
            >ul>[class^=membersGroup]{
                height:40px;
                padding-top:24px;
            }
        }
    }
    &:hover {
        max-width: 100%;
    }
}

Works for normal channels & threads, add animations if you want
tho is too easy to break

drifting panther
analog mango
#
/* Minifiedmemberlist */
:root {  --hidden-user-width: 60px; --user-width: 240px; --transition-time: 0.4s; }

.container_cbd271,
.membersWrap_cbd271 {
    transition-duration:var(--transition-time);
    justify-content:unset;
    min-width:unset;
    width:var(--hidden-user-width);
}
.membersGroup_cbd271 {
    height:0px;
    transition-duration:var(--transition-time);
    padding-top:0px
}
.container_cbd271:hover 
.membersGroup_cbd271,
.membersWrap_cbd271:hover 
.membersGroup_cbd271 {
    height:40px;
    padding-top:24px
}
.container_cbd271:hover,
.membersWrap_cbd271:hover {  width:var(--user-width); }
.profilePanel-2PWEok{ transition-duration:var(--transition-time); }