Provides some extra customization options for Discord.
Discord - Customization by jesuscc1993
Imported from https://github.com/jesuscc1993/user-css/raw/develop/discord/discord.user.css
Mirrored from https://github.com/jesuscc1993/user-css/raw/develop/discord/discord-customization/discord-customization.user.css
Details
Authorjesuscc1993
LicenseNO-REDISTRIBUTION
Categoryunset
Created
Updated
Size12 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Discord - Customization
@description Provides some extra customization options for Discord.
@version 2024.10.01.15.37
@author MetalTxus
@namespace https://github.com/jesuscc1993/
@license CC BY-SA 4.0
@preprocessor less
@var text font-family "Font family" "'Whitney', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
@var text min-sidebar_width "Min sidebar width" 240px
@var text max-sidebar_width "Max sidebar width" 240px
@var text channel-padding "Channel padding (sidebar)" 6px
@var text category-spacing "Category spacing (sidebar)" 16px
@var text block-emoji-size "Block emoji size" 3rem
@var text block-emoji-zoom "Block emoji zoom (hover)" unset
@var text inline-emoji-size "Inline emoji size" 1.375em
@var text inline-emoji-zoom "Inline emoji zoom (hover)" unset
@var text reaction-emoji-size "Reaction emoji size" 1rem
@var text avatar-scale "Avatar scale" unset
@var text avatar-zoom "Avatar zoom (hover)" unset
@var text group-spacing "Message groups spacing" unset
@var text li-margin "List item margin" 4px
@var text transition "Transition duration" 150ms
@var checkbox avatar-decorations "Avatar decorations" 1
@var checkbox darker-quotes "Darker code and quotes" 0
@var checkbox full-width-embeds "Full width embeds" 0
@var checkbox reduce-message-spacing "Reduce message spacing" 0
@var checkbox restore-blurple "Restore blurple" 0
@var checkbox blurple-mentions "Blurple mentions" 0
@var checkbox hide-voice-channels "Hide voice channels" 0
@var checkbox hide-download-icon "Hide download icon" 0
==/UserStyle== */
@-moz-document domain("discord.com") {
:root {
--avatar-scale: @avatar-scale;
--avatar-zoom: @avatar-zoom;
--block-emoji-size: @block-emoji-size;
--block-emoji-zoom: @block-emoji-zoom;
--inline-emoji-size: @inline-emoji-size;
--inline-emoji-zoom: @inline-emoji-zoom;
--reaction-emoji-size: @reaction-emoji-size;
--channel-padding: @channel-padding;
--custom-category-channel-space-before-category: @category-spacing;
--font-family: @font-family;
--group-spacing: @group-spacing;
--max-sidebar_width: @max-sidebar_width;
--min-sidebar_width: @min-sidebar_width;
--li-margin: @li-margin;
--transition: @transition;
}
html.theme-dark {
--font-display: var(--font-family);
}
body {
font-family: var(--font-family);
}
/* responsive columns */
[class*="content_"] {
[class*="sidebar_"]:not([class*="hidden_"]),
[class*="membersWrap_"] [class*="members_"] {
width: ~"max(var(--min-sidebar_width), var(--max-sidebar_width))" !important;
}
[class*="membersWrap_"] {
min-width: var(--min-sidebar_width);
}
[class*="sidebar_"] [class*="channel"],
[class*="membersWrap_"] [class*="member_"] {
max-width: 100% !important;
}
[class*="bannerImage_"],
[class*="bannerImage_"] [class^="bannerImg"],
[class*="bannerImage_"] [class^="bannerImg"]:before {
width: 100%;
}
[class*="sidebar_"] [class*="panels_"] [class*="container_"] [class*="avatarWrapper_"] {
flex: 1;
}
}
/* channel padding */
[class*="sidebar_"] [class*="iconVisibility"]:not([class*="wrapperCommon"]) a {
padding: var(--channel-padding) 8px;
[class*="children"],
+ [class*="children"] {
margin-top: 0;
}
}
/* HIDE UNLESS HOVERED */
/* common setup */
[class*="content_"] {
[class*="guilds"] {
z-index: 102;
}
[class*="sidebar_"] {
height: 100%;
}
[class*="membersWrap_"] {
right: 0;
height: calc(100vh - 50px);
}
[class*="sidebar_"],
[class*="membersWrap_"] {
transition: var(--transition);
transition-delay: 0.2s;
z-index: 101;
}
}
/* hide server members unless hovered */
@media (max-width: 1152px) {
[class*="membersWrap_"] {
position: absolute;
&:not(:hover) {
margin-right: calc(var(--min-sidebar_width) * -1 + 8px);
}
}
}
/* hide channels unless hovered */
@media (max-width: 800px) {
[class*="sidebar_"] {
position: absolute;
&:not(:hover) {
margin-left: calc(var(--min-sidebar_width) * -1 + 8px);
}
& + [class*="chat"] {
padding-left: 8px;
}
}
[class*="chatContent"] [class*="messagesWrapper"] {
padding-right: 8px;
}
}
/* HIDE AVATARS */
@media (max-width: 480px) {
[class*="messageListItem"] {
img[class*="avatar"],
[class*="timestamp"] {
display: none;
}
[class*="message"] {
padding: 0.125rem 1rem;
}
[class*="messageContent"] {
margin-left: 0;
padding-left: 0;
}
}
}
/* RESIZE */
/* avatars */
html when not (@avatar-scale =unset) {
[class*="messageListItem"] img[class*="avatar_"] {
transform: scale(var(--avatar-scale)) !important;
margin-top: 4px;
}
}
html when not (@avatar-zoom =unset) {
[class*="messageListItem"] img[class*="avatar_"] {
&,
& + img[class*="avatarDecoration_"] {
transition: var(--transition);
}
&:hover,
&:hover + img[class*="avatarDecoration_"] {
transform: scale(var(--avatar-zoom)) !important;
}
}
}
/* emojis */
[class*="messagesWrapper"] {
/* fixes vanilla's lack of vertical spacing between emojis */
img.emoji {
margin: 1px 0;
}
img.emoji:not(.jumboable) {
width: var(--inline-emoji-size) !important;
height: var(--inline-emoji-size) !important;
}
img.emoji.jumboable {
width: var(--block-emoji-size) !important;
height: var(--block-emoji-size) !important;
}
[class*="reactionInner"] img.emoji {
width: var(--reaction-emoji-size) !important;
height: var(--reaction-emoji-size) !important;
}
[class*="scrollable"] {
max-height: none;
}
[class*="emojiContainer"] + [class*="emojiContainer"] {
margin-left: 0.5rem;
}
[class*="popoverReactionHoverBar"] {
gap: 0.25rem;
}
}
/* emoji zoom */
[class*="messagesWrapper_"] {
[class*="messageContent_"] {
overflow: visible;
}
img.emoji {
transition: var(--transition);
z-index: 1;
position: relative;
&:hover {
z-index: 2;
}
}
}
[role="textbox"] img.emoji:hover {
transform: none !important;
}
html when not (@inline-emoji-zoom =unset) {
[class*="messagesWrapper_"] {
[class*="messageContent"] img.emoji:hover {
transform: scale(var(--inline-emoji-zoom));
}
}
}
html when not (@block-emoji-zoom =unset) {
[class*="messagesWrapper_"] {
img.emoji.jumboable:hover {
transform: scale(var(--block-emoji-zoom));
}
}
}
/* MISCELLANEOUS */
[class*="messagesWrapper"] textArea {
max-height: none !important;
resize: vertical;
}
[class*="isMentioned"] {
margin-top: 1px;
}
/* float bot tag */
[class*="nameAndDecorators"] {
& > *:first-child {
flex: 1;
}
& > *:not(:first-child) {
align-self: normal;
}
}
/* hide voice channels */
html when (@hide-voice-channels = 1) {
[class*="containerDefault"]:has([class*="iconVisibility"][class*="typeVoice"]),
[class*="voiceChannelsButton"] {
display: none;
}
[class*="containerPadding_"] [class*="voiceChannels"] {
display: none;
}
}
/* hide download icon */
html when (@hide-download-icon = 1) {
[class*="listItem"]:not(:nth-child(2)) [class*="guildSeparator"] {
display: none;
}
[class*="guilds"] [class*="scroller"] > [class*="listItem"] {
&:last-child,
&:nth-last-child(2) {
display: none;
}
}
}
/* hide misc stuff */
[class*="emptyChannelIcon"],
[class^="userPopout"] [class^="footer"] {
display: none;
}
/* hide ads */
[aria-label="Send a gift"],
[class*="buttons"][class*="you"] > *:first-child,
[href="/shop"],
[href="/store"] {
display: none;
}
/* make "invisible" usernames readeable */
[class*="name"][style="color: rgb(255, 255, 255);"] {
color: #747f8d !important;
}
[class*="name"][style="color: rgb(54, 57, 62);"],
[class*="name"][style="color: rgb(54, 57, 63);"] {
color: #98a8b3 !important;
}
/* hide folder when set to match background */
[class*="folderIconWrapper"] svg[style="color: rgb(47, 49, 54);"] {
display: none;
}
/* mentions restoration */
[class*="mentioned"] .mention[class*="wrapper"] {
color: var(--brand) !important;
background: transparent;
}
/* custom list margin */
[class*="markup"] ol,
[class*="markup"] ul {
margin: 4px 0 4px 16px;
}
[class*="markup"] ol,
[class*="markup"] li {
@margin: calc(var(--li-margin) / 2);
margin-top: @margin;
margin-bottom: @margin;
}
/* avatar decorations */
[class*="avatarDecoration_"] when (@avatar-decorations =0) {
display: none;
}
/* darker code and quotes */
html when (@darker-quotes = 1) {
[class*="markup"] code,
blockquote {
background: #0003;
}
[class*="textArea"] [class*="markup"] code,
[class*="textArea"] blockquote {
background: var(--background-secondary);
}
}
/* full width embeds */
[class*="embedWrapper_"] when (@full-width-embeds = 1) {
&,
[class*="gridContainer_"] {
max-width: 100% !important;
}
[class*="embedGalleryImagesWrapper"] {
max-width: 536px;
}
}
/* reduced message spacing */
ht...