#Make the visual refresh "better"

1 messages · Page 1 of 1 (latest)

compact hinge
#

Decently small quickcss snippets to make the discord experience better

  1. Move the user panel over to where it used to be, first image for reference.
 .visual-refresh section[aria-label='User area'] {
    width: calc(85% - var(--space-xs) * 2) !important;
    left: 72px;
    bottom: 0px;
    border-radius: 0px;
}

nav[aria-label="Servers sidebar"] {
  margin-bottom: 0 !important;
}
  1. Remove the top bar (the one that shows the server name and stuff)
    [made by @deft frigate, not me!]
.visual-refresh [class^="base_"] {
    display: grid;
    grid-template-columns: [start] min-content [guildsEnd] min-content [channelsEnd] 1fr [end];
    grid-template-rows: [titleBarEnd] min-content [noticeEnd] 1fr [end];
    grid-template-areas: "guildsList notice notice" "guildsList channelsList page";
}
.visual-refresh [class^="bar_"]:has([class^="recentsIcon_"]) {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    z-index: 1000;
}
.visual-refresh [class^="bar_"]:has([class^="recentsIcon_"]) > * {
    display: none;
}
.visual-refresh [class^="trailing_"]:has([class^="recentsIcon_"]) {
    display: flex;
    position: absolute;
    top: 8px;
    right: calc(var(--space-8) + 1px);
}
.visual-refresh section[aria-label="Channel header"] {
    padding-right: calc(var(--space-8) + 1px + 76px + var(--space-8) + 1px);
}
.visual-refresh [class*="guilds_"] [class*="scroller_"] {
    padding-top: 16px;
}
  1. Make all the server icons circles, regardless of if it's the current server or not
[data-dnd-name] > div > svg > foreignObject > div > img {
    border-radius: 100% !important;
}
  1. Move icons in chat box closer together
div:has(button[aria-label='Send a gift']) {
  gap: 0px !important;
}

I feel pretty confident that 1 and 3 aren't the most efficient way to do this, but it ended up being the easiest way!

Enjoy :D

image.png image.png image.png image.png
unborn gust
#

great snippets, tyvm, id just like to report that those server icons that are generated from the initials of the server name when servers dont have actual icons are missed by the snippet rn

image.png
unborn gust
#

also the space under multiple dms doesnt scale with size rn

#

40 vs 48(also lol the discord logo button up there isnt rounded either, probably the same Type of thing as the generated initials ones)

#

ping indicator doesnt scale either rn

north geyser
#

Incredible, just what I was looking for!

Noting here for the first one I had to adjust the left parameter a bit to get it to sit flush with the server list

left: 64px
compact hinge
compact hinge
north geyser
#

1080p as well on this end

compact hinge
#

Hm strange
I'll look into that though, thank you!

unborn gust
#

im at 1080p too at 110% zoom and the lefthand margin worked perfectly

#

the width was what i had to adjust

#

with width: calc(calc(100% - 32px * 2)) !important;

image.png
turbid flax
#

gracias

deft frigate
compact hinge
north geyser
#

Weirdly enough, I came back to my pc this morning and the box had shifted a lot. Chanced the value of Left back to 72 and now it's fine. Discord pls...

#

Ah! found the issue, discord's new Compact setting under appearance makes the difference.

compact hinge
#

@north geyser adding

.density-compact.visual-refresh section[aria-label='User area'] {
    left: 64px;
}

should fix that :D

#

for spacious, this should work

.density-cozy.visual-refresh section[aria-label='User area'] {
    width: calc(calc(100% - 40px * 2)) !important;
    left: 80px;
}
north geyser
#

Fabulous work!

cyan furnace
#

I have a bit of a problem with "Remove the top bar", it makes the close icon of the search bar overlap with the minimize window button, thus making it impossible to be clicked (it just minimizes the window instead)

image.png
compact hinge
#

in the meantime you can just press escape to close it instead, but yeah that is a bit of a problem
hm

cyan furnace
#

maybe it can be fixed by making the search bar shorter and/or the icons more close together? (I have nearly 0 knowledge about css codes so I might be very wrong)

sinful glen
cyan furnace