Makes Discord's Compact mode more like IRC (and thus better)
Compact++ by Grzesiek11
Imported and mirrored from https://gitlab.com/Grzesiek11/compactplusplus-discord-theme/-/snippets/3628352/raw/main/compactplusplus.user.css
Details
AuthorGrzesiek11
LicenseMIT
Categorydiscord.com
Created
Updated
Size15 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Discord's default Cozy mode is "modern, beautiful, and easy on the eyes"... or so they say. If you disagree with this (oddly emotional) description and prefer the more traditional IRC look, which also fits many more messages on the screen, Discord also has got you covered with Compact mode.
It's not great, though. The nice alignment of usernames and message contents known from IRC clients is not there, making messages harder to read than on Cozy mode. Moreover, due to a lack of proper testing with new features and overlooked edge cases, it's inconsistent and buggy.
Compact++ aims to be what Discord's Compact mode should have been. Something more than an afterthought.
Features
- Splits message headers (timestamps, avatars and usernames) and contents into two columns, aligning them nicely
- Displays the entire username when it's hovered over
- Always displays timestamps
- Resizes avatars to be slightly larger
- Removes or reduces needless margins
- Moves tags and icons to the left of the username
- Fixes alignment of system messages, including AutoMod
- Allows customizing aspects of the theme with CSS variables and build options
- Optionally removes tags and icons from the username
- Optionally hides reply contents until the message is hovered over
How to use
Discord settings
Enabling Compact mode
To have the theme apply, you need to switch to Compact mode first.
Go to User Settings (cogwheel), then to Appearance in the App Settings section. In the Message Display section, switch to Compact.
Enabling avatars in Compact mode
If you'd like to have avatars in Compact mode, you can enable them as well.
Go to User Settings (cogwheel), then to Appearance in the App Settings section. In the Message Display section, enable Show avatars in Compact mode.
Keep in mind this setting is not synced by Discord, so you need to set it every time you log in.
Contributing
This theme went through a lot of testing, but Discord is big and constantly changing - there's a chance we missed something. If you find a bug, open a new issue describing the problem.
If there's something that you think could be covered by this theme but isn't, or could be done differently - open a new issue describing the feature. If you want to instead provide changes directly - you can open a merge request.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Compact++
@namespace gitlab.com/Grzesiek11/compactplusplus-discord-theme
@version 1.5.5
@description Makes Discord's Compact mode more like IRC (and thus better)
@author Grzesiek11 <grzesiek11@stary.pc.pl> (https://grzesiek11.stary.pc.pl)
@preprocessor less
@license MIT
@homepageURL https://gitlab.com/Grzesiek11/compactplusplus-discord-theme
@supportURL https://gitlab.com/Grzesiek11/compactplusplus-discord-theme/-/issues
@var checkbox hide-tags "Hide tags" 0
@var checkbox hide-icons "Hide icons" 0
@var checkbox minimize-replies "Minimize replies" 0
@var text header-width "Header width" 160px
@var text header-margin-left "Header margin left" 10px
@var text header-margin-right "Header margin right" 5px
@var text message-margin-right "Message margin right" 15px
@var text avatar-size "Avatar size" 20px
@var text link-line-offset "Link line offset" 10px
@var text reply-link-line-width "Reply link line width" 20px
@var text pronoundb-pronouns-width "PronounDB pronouns width" 45px
==/UserStyle== */
@-moz-document domain("discord.com") {
:root {
/* Message header width */
--compactplusplus-header-width: @header-width;
/* Message header left margin */
--compactplusplus-header-margin-left: @header-margin-left;
/* Message header right margin */
--compactplusplus-header-margin-right: @header-margin-right;
/* Message container right margin */
--compactplusplus-message-margin-right: @message-margin-right;
/* Message avatar size */
--compactplusplus-avatar-size: @avatar-size;
/* Thread and reply link line offset */
--compactplusplus-link-line-offset: @link-line-offset;
/* Reply link line width */
--compactplusplus-reply-link-line-width: @reply-link-line-width;
/* PronounDB pronouns width */
--compactplusplus-pronoundb-pronouns-width: @pronoundb-pronouns-width;
}
/* Message container */
.compact_f9f2ca.wrapper_f9f2ca {
padding-left: 0;
padding-right: var(--compactplusplus-message-margin-right) !important;
}
/* Message content container */
.compact_f9f2ca .contents_f9f2ca {
margin-left: 0;
padding-left: 0;
text-indent: 0;
}
/* Message markup first header 1 */
.compact_f9f2ca .markup_f8f345 h1:first-child,
/* Message markup first header 2 */
.compact_f9f2ca .markup_f8f345 h2:first-child,
/* Message markup first header 3 */
.compact_f9f2ca .markup_f8f345 h3:first-child {
margin-top: 0;
}
/* Message markup last header 1 */
.compact_f9f2ca .markup_f8f345 h1:last-child,
/* Message markup last header 2 */
.compact_f9f2ca .markup_f8f345 h2:last-child,
/* Message markup last header 3 */
.compact_f9f2ca .markup_f8f345 h3:last-child {
margin-bottom: 0;
}
/* Message markup first unordered list */
.compact_f9f2ca .markup_f8f345 ul:first-child,
/* Message markup first ordered list */
.compact_f9f2ca .markup_f8f345 ol:first-child {
margin-top: 0;
}
/* Message markup list last element */
.compact_f9f2ca .markup_f8f345 li:last-child {
margin-bottom: 0;
}
/* Message markup unordered list */
.compact_f9f2ca .markup_f8f345 ul,
/* Message markup ordered list */
.compact_f9f2ca .markup_f8f345 ol {
margin-bottom: 4px;
}
/* Message markup last unordered list */
.compact_f9f2ca .markup_f8f345 ul:last-child,
/* Message markup last ordered list */
.compact_f9f2ca .markup_f8f345 ol:last-child {
margin-bottom: 0px;
}
/* Message markup code block */
.compact_f9f2ca .markup_f8f345 pre {
max-width: unset;
}
/* Message markup quote container */
.compact_f9f2ca .markup_f8f345 blockquote {
padding-right: 0;
max-width: unset;
min-width: 0;
}
/* Message markup quote line */
.compact_f9f2ca .blockquoteContainer_f8f345 .blockquoteDivider_f8f345 {
flex-shrink: 0;
}
/* Message header container */
.compact_f9f2ca .header_f9f2ca {
margin-left: var(--compactplusplus-header-margin-left);
position: absolute;
display: flex;
width: var(--compactplusplus-header-width);
align-items: center;
}
/* Message timestamp */
.compact_f9f2ca .header_f9f2ca .timestamp_f9f2ca {
flex-grow: 1;
margin-right: 0;
text-align: left;
white-space: nowrap;
width: unset;
}
/* Hidden message timestamp */
.compact_f9f2ca .timestampVisibleOnHover_f9f2ca {
opacity: unset;
}
/* Message avatar */
.compact_f9f2ca .avatar_f9f2ca {
position: static;
width: var(--compactplusplus-avatar-size);
height: var(--compactplusplus-avatar-size);
margin-left: 5px;
margin-right: 0;
z-index: auto;
order: 1;
}
/* Message username container */
.compact_f9f2ca .headerText_f9f2ca {
display: flex;
align-items: center;
margin-left: 5px;
margin-right: 0;
min-width: 0;
order: 2;
}
& when (@hide-tags = 1) {
/* Message tag */
.compact_f9f2ca .botTag_f9f2ca,
/* System message tag */
.compact_f9f2ca .systemTag_bc2461,
/* AutoMod notice tag */
.compact_f9f2ca .systemTag_df2817,
/* Message clan tag */
.compact_f9f2ca .clanTagChiplet_f9f2ca {
display: none;
}
}
& when (@hide-tags = 0) {
/* Message tag */
.compact_f9f2ca .botTag_f9f2ca,
/* System message tag */
.compact_f9f2ca .systemTag_bc2461,
/* AutoMod notice tag */
.compact_f9f2ca .systemTag_df2817,
/* Message clan tag */
.compact_f9f2ca .clanTagChiplet_f9f2ca {
margin-left: 0;
margin-right: 5px;
}
/* Message tag */
.compact_f9f2ca .botTag_f9f2ca {
position: static;
}
/* Message clan tag */
.compact_f9f2ca .clanTagChiplet_f9f2ca {
white-space: nowrap;
}
}
/* Message username */
.compact_f9f2ca .headerText_f9f2ca .username_f9f2ca {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: static;
flex-shrink: 1;
z-index: 1;
order: 2;
}
/* Message username on hover */
.mouse-mode .compact_f9f2ca .headerText_f9f2ca .username_f9f2ca:hover,
/* AutoMod message username container on hover */
.mouse-mode .compact_bc2461.usernameContainer_bc2461 > :nth-child(2):hover,
/* AutoMod notice username container on hover */
.mouse-mode .compact_df2817.usernameContainer_df2817 > :nth-child(2):hover,
/* Vencord PronounDB plugin: Message pronouns on hover */
.mouse-mode .compact_f9f2ca .header_f9f2ca .timestamp_f9f2ca.vc-pronoundb-compact:hover {
/* Show full username */
overflow: visible;
background-color: var(--background-secondary-alt);
outline: 3px solid var(--background-secondary-alt);
border-radius: 3px;
}
/* Role and new member icon container */
.compact_f9f2ca .headerText_f9f2ca :has(.newMemberBadge_ed263a), .compact_f9f2ca .headerText_f9f2ca :has(.roleIcon_f9f2ca) {
order: 1;
}
& when (@hide-icons = 1) {
/* Role icon */
.compact_f9f2ca .roleIcon_f9f2ca,
/* New member icon */
.compact_f9f2ca .newMemberBadge_ed263a {
display: none;
}
}
& when (@hide-icons = 0) {
/* Role icon */
.compact_f9f2ca .roleIcon_f9f2ca,
/* New member icon */
.compact_f9f2ca .newMemberBadge_ed263a {
margin-right: 5px;
margin-left: 0;
}
}
/* Message tag in username container (like the Remix tag) */
.compact_f9f2ca .headerText_f9f2ca .botTag_f9f2ca {
order: 0;
}
/* Silent message icon container */
.compact_f9f2ca .badgesContainer_f9f2ca {
margin-right: 0;
margin-left: 5px;
}
/* Silent message icon */
.compact_f9f2ca .badge_ba89c1 when (@hide-icons = 1) {
display: none;
}
/* Silent message icon */
.compact_f9f2ca .badge_ba89c1 when (@hide-icons = 0) {
position: static;
}
/* Message content */
.compact_f9f2ca .contents_f9f2ca .messageContent_f9f2ca {
display: block;
}
/* Message content */
.compact_f9f2ca .contents_f9f2ca .messageContent_f9f2ca,
/* Message accessories container */
.compact_f9f2ca > .container_b558d0,
/* AutoMod referenced message container */
.compact_bc2461.messageContent_bc2461,
/* AutoMod referenced message footer */
.compact_bc2461.footerContainer_bc2461,
/* Edit input */
.compact_f9f2ca .channelTextArea_bdf0de,
/* Edit actions */
.compact_f9f2ca .operations_baf0d6,
/* AutoMod notice embed */
.embedCard_df2817.compact_df2817 {
margin-left: calc(var(--compactplusplus-header-width) + var(--compactplusplus-header-margin-left) + var(--compactplusplus-header-margin-right));
}
/* Message content of message with empty embed container */
.compact_f9f2ca:has(> .container_b558d0:empty) .contents_f9f2ca .messageContent_f9f2ca {
/* Make the content have at least 1 line of height, in case the client
* renders a message with no content and no embeds */
/* This has happened before with the 2023-09_soundmoji experiment. If a
* client without the experiment enabled received a message with only a
* soundmoji, it got rendered without content. */
min-height: 1lh;
}
/* AutoMod blocked message notice container */
.blockedNoticeContainer_e8366c.compact_e8366c {
margin-left: 0;
}
/* AutoMod blocked message accessories container */
.ephemeralAccessories_e8366c.compact_e8366c {
margin-left: 0;
}
/* System message container */
.compact_d76df7 {
margin-left: 0;
}
/* System message content */
.compact_f9f2ca.systemMessage_d5deea > .contents_f9f2ca > .messageContent_f9f2ca,
/* Blocked message drawer */
.compact_f9f2ca .blockedSystemMessage_c09d0f {
margin-left: calc(var(--compactplusplus-header-width) + var(--compactplusplus-header-margin-left) - var(--compactplusplus-avatar-size));
}
/* System message icon */
.compact_d76df7 .iconContainer_d76df7 {
margin-right: var(--compactplusplus-header-margin-right);
width: var(--compactplusplus-avatar-size);
height: var(--compactplusplus-avatar-size);
align-items: center;
padding-top: 0;
}
/* Send welcome sticker button */
.compact_f9f2ca .welcomeCTA_f6dde0,
/* Poll closed embed */
.compact_...