Skip to content

Instantly share code, notes, and snippets.

@Bear-03
Last active January 14, 2022 22:00
Show Gist options
  • Save Bear-03/0e7d175b6846fed910d0bc942eb41ad8 to your computer and use it in GitHub Desktop.
Save Bear-03/0e7d175b6846fed910d0bc942eb41ad8 to your computer and use it in GitHub Desktop.
A modification for the ServerColumns theme for BetterDiscord that changes the notification markers for guilds so they don't look "cut off"
/* Check out the ServerColumns theme: https://betterdiscord.app/theme/ServerColumns */
/* Notif marker */
.item-2LIpTv {
--width: 6px;
--right-gap: 0px;
width: var(--width);
right: var(--right-gap);
margin-left: 0;
border-radius: calc(var(--width) / 2);
}
/* Select all notif markers that have
the default (idle) height */
.item-2LIpTv:is(
[style*="height: 8"],
[style*="height: 7"] /* Animation overshoots */
) {
/* Discord handles height changes purely
via js and style tags. A css transition
is needed to smooth the change in height
caused by this rule */
transition: height 0.1s ease-out;
height: var(--width) !important;
}
/* DM marker container */
.pill-22lZHo.wrapper-z5ab_q {
/* Fix spacing between marker and icon for DMs */
transform: translateX(-3px) !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment