/* main.css */ @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); :root { container-name: root; --custom-guild-list-padding: 12px; --panel-backdrop-filter: none; } body { container-name: body; /* font, change to '' for default discord font */ --font: 'figtree'; /* sizes */ --gap: 12px; /* spacing between panels */ --divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */ } .visual-refresh { /* panel separation */ .guilds_c48ade /* server list */, .sidebarList_c48ade /* channel list (includes dm list) */, .panels_c48ade /* user panel */, .chat_f75fb0 > .subtitleContainer_f75fb0 /* chat titlebar */, .chatContent_f75fb0 /* chat */, .container_c8ffbb /* member list */, .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */, .container__133bf > .container__9293f /* friends titlebar */, .container_f391e3 > .container__9293f /* message requests titlebar */, .homeWrapper__0920e > .container__9293f /* nitro page titlebar */, .container__01ae2 > .container__9293f /* vc chat titlebar */, .container_fb64c9 > .container__9293f /* new thread panel */, .peopleColumn__133bf /* online friends */, .nowPlayingColumn__133bf /* active now */, .scroller_c880e8 /* nitro page */, .container_f391e3 > .content_f75fb0 /* message requests */, .shop__6db1d /* shop */, .outer_c0bea0.panel_c0bea0 /* dm user panel */, .searchResultsWrap_a9e706 /* search results */, .container_f369db /* forum */, .chat_fb64c9 /* new thread panel */, .container_a592e1 /* server discovery */, .callContainer_cb9592 /* vc container */, .wrapper_cb9592.sidebarOpen_cb9592 .callContainer_cb9592 /* vc container when chat open */, .callContainer__722ff /* stage */, .chat_f75fb0 > .header_c791b2 /* server members header */, .chat_f75fb0 > .scrollerBase_d125d2 /* server members page */, .chat_f75fb0 > .header__0b563 /* server channels and roles header */, .chat_f75fb0 > .container__0b563 /* server channels and roles page */ { background-color: var(--background-base-lower); border-radius: var(--radius-lg); border: var(--border-thickness) solid var(--border-subtle); backdrop-filter: var(--panel-backdrop-filter); box-sizing: border-box; } .panels_c48ade /* user panel */ { bottom: 0; left: 0; width: 100%; overflow: hidden; } .sidebar_c48ade /* server list + channel list + user panel group */ { margin: 0 var(--gap) var(--gap) var(--gap); } .guilds_c48ade /* server list */ { margin-bottom: calc(var(--custom-app-panels-height, 0) + var(--gap)); margin-right: var(--gap); } .guilds_c48ade + div:not(.sidebarList_c48ade) /* betterfolders */ { width: 100% !important; } .scroller_ef3116 /* server list inner scroller */ { padding: var(--custom-guild-list-padding) 0; align-items: center; } .tree_ef3116 { align-items: center; } .stack_dbd263[data-align=stretch] /* server list inner inner */ { align-items: center; } .expandedFolderBackground__48112 { left: calc(var(--custom-guild-list-padding) - (var(--guildbar-folder-size) - var(--guildbar-avatar-size)) / 2 + var(--border-thickness)); } .sidebarList_c48ade /* channel list */ { margin-bottom: calc(var(--custom-app-panels-height, 0) + var(--gap)); } .container__2637a /* channel list inner */ { padding-bottom: 0; } .clickable_f37cb1, .container__2637a /* channel list inner */, .header_f37cb1 /* server name */ { background: none; } .scroller__629e4 /* channel list inner scroller */ { margin-bottom: 0; } /* fix discord's idiotic server banners */ .bannerImage_f37cb1, .bannerImg_f37cb1 { width: 100%; } .bannerVisible_f37cb1 .headerEllipseBackdrop_f37cb1 { display: none; } .headerGlass_f37cb1 { top: 0; left: 0; right: 0; width: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .sidebar_c48ade:after /* server list + channel list bottom shadow */ { display: none; } .chat_f75fb0 /* chat group outer */ { border: none !important; background: none; } .container__133bf /* friends page group outer */, .page_c48ade { padding-bottom: var(--gap); padding-right: var(--gap); border: none !important; background: none; } .page_c48ade > .chat_f75fb0, .page_c48ade > .container__133bf { padding: 0; } .container__9293f /* friends, message requests, + other stuff titlebar */ { margin-bottom: var(--gap); } .subtitleContainer_f75fb0 /* chat titlebar */ { margin-bottom: var(--gap); } .title_f75fb0 /* chat titlebar inner */ { border: none; background: none; margin-bottom: 0; } .chatContent_f75fb0 /* chat */ { overflow: hidden; } .container_c8ffbb /* member list */ { margin-left: var(--gap); overflow: hidden; height: auto; min-width: var(--custom-member-list-width); } .content_f75fb0 > .membersWrap_c8ffbb /* forum post member list */ { margin-left: var(--gap); overflow: hidden; height: auto; } .members_c8ffbb /* member list inner */, .member_c8ffbb /* member list item */ { background: none; } .resizeHandle__01ae2 /* resize handle */ { background: transparent; } .privateChannels__35e86 /* dm list */, .scroller__99e7c /* dm list inner */ { background: none; } .scroller__99e7c /* dm list inner */ { margin-bottom: 0; } .tabBody__133bf /* online friends + active now group outer */ { background: none; } .nowPlayingColumn__133bf /* active now */ { margin-left: var(--gap); } .container__7d20c /* active now inner */ { background: none; } .scroller__7d20c /* active now inner */ { border: none; } .homeWrapper__0920e /* nitro page group inner */ { border: none; background: none; } .applicationStore_f07d62 /* nitro page group outer */ { background: none; } .shop__6db1d /* shop */ { overflow: hidden; height: auto; } .shop__08415 /* shop inner scroller */ { margin-top: calc(var(--custom-channel-header-height) * -1 - 16px); } .outer_c0bea0.panel_c0bea0 /* dm user panel */ { margin-left: var(--gap); overflow: hidden; height: auto; min-width: 340px; } .searchResultsWrap_a9e706 /* search results */ { margin-left: var(--gap); } .notice__6e2b9 /* notice banner */ { margin: 0 var(--gap) var(--gap) 0; border-radius: var(--radius-md); background: rgb(172, 83, 113); } .container__01ae2 /* vc chat + titlebar group */ { border: none; background: none; } .chat_ee72fa::before /* vc chat shadow */ { display: none; } .channelChatWrapper_cb9592 /* vc chat + titlebar group outer */ { background: none; } .page_c48ade > div > .chatLayerWrapper__01ae2 /* forum/thread chat outer */ { margin: 0 var(--gap) var(--gap) 0; height: calc(100% - var(--gap)); } .container__01ae2 /* forum/thread chat */ { padding-left: calc((var(--gap) - var(--chat-resize-handle-width))); } .container_fb64c9 /* new thread panel */ { background: none; } .chat_fb64c9::before /* new thread panel chat shadow */ { display: none; } .container_a592e1 /* server discovery */ { overflow: hidden; } .backdrop__8a7fc /* server discovery top bar */ { background-color: var(--background-base-lower); } .wrapper_cb9592 /* dm vc wrapper */ { background: none; margin-bottom: var(--gap); } /* remove excess background from settings */ .standardSidebarView__23e6b, .contentRegion__23e6b, .sidebarRegionScroller__23e6b, .contentRegionScroller__23e6b { background: none; } .standardSidebarView__23e6b { backdrop-filter: var(--panel-backdrop-filter); } /* remove excess backgrounds */ .wrapper_d852db /* message loading placeholders */, .wrapper_d852db > .wrapper_fc8177 { background: none; } .newMessagesBar__0f481 /* unread messages bar */ { top: 12px; left: 12px; right: 12px; border-radius: var(--radius-sm); padding: 0 8px; } .bottom__7aaec /* channel list new unreads pill */ { bottom: 12px; } .unreadMentionsIndicatorBottom_ef3116 /* server list new pill */, .unreadMentionsIndicatorTop_ef3116 { width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2); padding: calc(var(--custom-guild-list-padding) / 2); } /* jank ass solution to only apply padding to treatment 3 */ .form_f75fb0 /* chat bar outer form */ { --space-8: 16px; } .channelBottomBarArea_f75fb0 /* chat bar inner */ { --space-8: 8px; } /* get rid of extra space in treatment 2 */ .accessoryBar__74017 { padding-top: 0; } /* general chat bar improvements */ .channelTextArea_f75fb0 /* chat bar */ { border-radius: var(--radius-md); } .themedBackground__74017 /* chat bar inner */ { background: none; } .slateTextArea_ec4baf /* actual typing area */ { margin-left: 2px; } /* improve unread divider */ .divider__908e2 { border-width: var(--divider-thickness); border-radius: var(--divider-thickness); } .endCap__908e2 { margin-top: calc(var(--divider-thickness) / -2); } .divider__908e2 .content__908e2 { margin-top: calc(var(--divider-thickness) - var(--divider-thickness) * 2); } /* improve highlight message left edge */ .message__5126c.mentioned__5126c::before, .replying__5126c::before, .ephemeral__5126c::before { width: var(--divider-thickness); border-radius: var(--divider-thickness); height: calc(100% - 2 * var(--radius-sm)); top: var(--radius-sm); left: calc(var(--divider-thickness) / -2 + 1px); left: calc(var(--radius-sm) / 2); } .message__5126c { border-radius: var(--radius-md); margin-left: 4px; } /* improve server selected marker */ .pill_e5445c.wrapper__58105 { width: calc((var(--custom-guild-list-padding) - 4px) / 2 + 4px); } .item__58105 { width: 4px; border-radius: 4px; margin-left: calc((var(--custom-guild-list-padding) - 4px) / 2); } /* improve embeds */ .embedFull__623de { border: 4px solid var(--border-normal); border-top-color: var(--border-subtle) !important; border-top-width: 1px; border-bottom-color: var(--border-subtle) !important; border-bottom-width: 1px; border-right-color: var(--border-subtle) !important; border-right-width: 1px; } /* improve borders */ .reaction__23977 /* message reactions */, .reactionBtn__23977.forceShow__23977 /* add reaction button */ { border-width: 2px; } /* roundness */ .embedFull__623de /* embeds */, .hljs /* code block */, .imageWrapper_af017a /* image */, .container__9271d /* thread link */ { border-radius: var(--radius-md); } .outer_c0bea0 /* profile outer */, .contentWrapper__08434 /* gif panel */ { border-radius: var(--radius-lg); } .inner_c0bea0 /* profile inner */ { border-radius: calc(var(--radius-lg) - 4px); } .outer_c0bea0 /* profile outer */ { border: 1px solid var(--border-subtle); } .root__24502 { background: none; } /* remove unnecessary backgrounds */ .app__160d8, #app-mount, body { background: transparent !important; } } body { --font-primary: var(--font), 'gg sans'; --font-display: var(--font), 'gg sans'; } [class*='scroll'] { will-change: scroll-position; } .burstGlow__23977 { display: none; } /* animations.css */ @property --animations { syntax: 'on | off'; inherits: false; initial-value: on; } body { --list-item-transition: 0.2s ease; /* transition for list items */ --dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */ } @container body style(--animations: on) { .visual-refresh { /* list hover animations */ .wrapper__2ea32 .link__2ea32 /* channels */, .container__91a9d /* members */, .channel__972a0 /* dms */, .side_b3f026 .item_b3f026 /* settings */ { transition: margin-left var(--list-item-transition); will-change: margin-left; } .wrapper__2ea32:hover .link__2ea32, .side_b3f026 .item_b3f026:hover { margin-left: 10px; } .container__91a9d:hover, .channel__972a0:hover { margin-left: 18px; } /* list hover channel dot */ .unread__2ea32 { border-radius: 50%; width: 8px; height: 8px; margin-left: -4px; transition: var(--list-item-transition); will-change: margin-left; } .wrapper__2ea32:hover .unread__2ea32 { margin-left: 4px; } .typeThread__2ea32 .unread__2ea32 { left: -31px; } } } /* background-image.css */ @property --background-image { syntax: 'on | off'; inherits: false; initial-value: off; } body { --background-image-url: url(''); } @container body style(--background-image: on) { .visual-refresh .bg__960e4 { background: var(--background-image-url); background-size: cover; background-position: center; } } /* colors.css */ @property --colors { syntax: 'on | off'; inherits: false; initial-value: on; } :root { /* text colors */ --text-0: var(--bg-4); /* text on colored elements */ --text-1: hsl(220, 45%, 95%); /* other normally white text */ --text-2: hsl(220, 25%, 70%); /* headings and important text */ --text-3: hsl(220, 20%, 60%); /* normal text */ --text-4: hsl(220, 15%, 40%); /* icon buttons and channels */ --text-5: hsl(220, 15%, 25%); /* muted channels/chats and timestamps */ /* background and dark colors */ --bg-1: hsl(220, 15%, 20%); /* dark buttons when clicked */ --bg-2: hsl(220, 15%, 16%); /* dark buttons */ --bg-3: hsl(220, 15%, 13%); /* spacing, secondary elements */ --bg-4: hsl(220, 15%, 10%); /* main background color */ --hover: hsla(221, 19%, 40%, 0.1); /* channels and buttons when hovered */ --active: hsla(220, 19%, 40%, 0.2); /* channels and buttons when clicked or selected */ --active-2: hsla(220, 19%, 40%, 0.3); /* extra state for transparent buttons */ --message-hover: hsla(230, 0%, 0%, 0.1); /* messages when hovered */ /* accent colors */ --accent-1: var(--blue-1); /* links and other accent text */ --accent-2: var(--blue-2); /* small accent elements */ --accent-3: var(--blue-3); /* accent buttons */ --accent-4: var(--blue-4); /* accent buttons when hovered */ --accent-5: var(--blue-5); /* accent buttons when clicked */ --accent-new: var(--blue-2); /* stuff that's normally red like mute/deafen buttons */ --mention: linear-gradient(to right, color-mix(in hsl, var(--blue-2), transparent 90%) 40%, transparent); /* background of messages that mention you */ --mention-hover: linear-gradient(to right, color-mix(in hsl, var(--blue-2), transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */ --reply: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 90%) 40%, transparent); /* background of messages that reply to you */ --reply-hover: linear-gradient(to right, color-mix(in hsl, var(--text-3), transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */ /* status indicator colors */ --online: var(--green-2); /* change to #43a25a for default */ --dnd: var(--red-2); /* change to #d83a42 for default */ --idle: var(--yellow-2); /* change to #ca9654 for default */ --streaming: var(--purple-2); /* change to #593695 for default */ --offline: var(--text-4); /* change to #83838b for default offline color */ /* border colors */ --border-light: hsl(230, 20%, 40%, 0.1); /* light border color */ --border: hsl(230, 20%, 40%, 0.2); /* normal border color */ --button-border: hsl(0, 0%, 100%, 0.1); /* neutral border color of buttons */ /* base colors */ --red-1: oklch(76% 0.12 0); --red-2: oklch(70% 0.12 0); --red-3: oklch(64% 0.12 0); --red-4: oklch(58% 0.12 0); --red-5: oklch(52% 0.12 0); --green-1: oklch(76% 0.11 170); --green-2: oklch(70% 0.11 170); --green-3: oklch(64% 0.11 170); --green-4: oklch(58% 0.11 170); --green-5: oklch(52% 0.11 160); --blue-1: oklch(76% 0.1 215); --blue-2: oklch(70% 0.1 215); --blue-3: oklch(64% 0.1 215); --blue-4: oklch(58% 0.1 215); --blue-5: oklch(52% 0.1 215); --yellow-1: oklch(80% 0.11 90); --yellow-2: oklch(74% 0.11 90); --yellow-3: oklch(68% 0.11 90); --yellow-4: oklch(62% 0.11 90); --yellow-5: oklch(56% 0.11 90); --purple-1: oklch(76% 0.11 310); --purple-2: oklch(70% 0.11 310); --purple-3: oklch(64% 0.11 310); --purple-4: oklch(58% 0.11 310); --purple-5: oklch(52% 0.11 310); } @container root style(--colors: on) { .visual-refresh body, .visual-refresh .theme-dark, .visual-refresh .theme-light { --activity-card-background: red; --alert-bg: red; --autocomplete-bg: var(--bg-3); --background-accent: var(--bg-2); --background-floating: var(--bg-3); --background-nested-floating: var(--bg-4); --background-mentioned: var(--mention); --background-mentioned-hover: var(--mention-hover); --background-message-automod: red; --background-message-automod-hover: red; --background-message-highlight: var(--reply); --background-message-highlight-hover: var(--reply-hover); --background-message-hover: var(--message-hover); --background-primary: var(--bg-4); --background-secondary: var(--bg-3); --background-secondary-alt: var(--bg-3); --background-tertiary: var(--bg-4); --bg-base-primary: var(--bg-4); /* screenshare window? */ --bg-base-secondary: var(--bg-4); --bg-base-tertiary: var(--bg-3); --background-mod-subtle: var(--bg-3); --background-mod-normal: var(--bg-3); --background-mod-strong: var(--bg-3); --background-base-low: var(--bg-4); --background-base-lower: var(--bg-4); --background-base-lowest: var(--bg-4); --background-surface-high: var(--bg-3); --background-surface-higher: var(--bg-3); --background-surface-highest: var(--bg-3); --bg-surface-overlay: var(--bg-4); --bg-surface-raised: var(--bg-3); --chat-background-default: var(--bg-3); --input-background: var(--bg-3); --modal-background: var(--bg-4); --modal-footer-background: var(--bg-4); --background-modifier-accent: var(--hover); --background-modifier-active: var(--active); --background-modifier-hover: var(--hover); --background-modifier-selected: var(--active); --bg-mod-faint: var(--hover); --bg-mod-subtle: var(--bg-2); --bg-mod-strong: var(--bg-2); --bg-brand: var(--accent-2); --border-faint: var(--border-light); --border-subtle: var(--border); --border-normal: var(--border); --border-strong: var(--border); --input-border: var(--border); --button-danger-background: var(--red-3); --button-danger-background-active: var(--red-5); --button-danger-background-hover: var(--red-4); --button-danger-background-disabled: var(--red-5); --button-danger-border: var(--button-border); --button-filled-brand-text: var(--text-0); --button-filled-brand-background: var(--accent-3); --button-filled-brand-background-active: var(--accent-5); --button-filled-brand-background-hover: var(--accent-4); --button-filled-brand-border: var(--button-border); --button-filled-brand-inverted-background: var(--text-1); --button-filled-brand-inverted-background-active: var(--text-3); --button-filled-brand-inverted-background-hover: var(--text-2); --button-filled-brand-inverted-text: var(--bg-4); --button-filled-white-background: var(--text-1); --button-filled-white-background-active: var(--text-3); --button-filled-white-background-hover: var(--text-2); --button-filled-white-text: var(--bg-4); --button-outline-danger-background: var(--bg-2); --button-outline-danger-background-active: var(--text-5); --button-outline-danger-background-hover: var(--bg-1); --button-outline-danger-border: var(--border-light); --button-outline-danger-border-active: var(--border-light); --button-outline-danger-border-hover: var(--border-light); --button-outline-danger-text: var(--red-1); --button-outline-danger-text-active: var(--red-1); --button-outline-danger-text-hover: var(--red-1); --button-outline-primary-background: red; --button-outline-primary-background-active: var(--active); --button-outline-primary-background-hover: var(--hover); --button-outline-primary-border: var(--text-5); --button-outline-primary-border-active: var(--text-5); --button-outline-primary-border-hover: var(--text-5); --button-outline-primary-text: var(--text-3); --button-outline-primary-text-active: var(--text-3); --button-outline-primary-text-hover: var(--text-3); --button-outline-positive-background: red; --button-outline-positive-background-active: var(--green-4); --button-outline-positive-background-hover: var(--green-3); --button-outline-positive-border: var(--green-2); --button-outline-positive-border-active: var(--green-4); --button-outline-positive-border-hover: var(--green-3); --button-outline-positive-text: var(--text-3); --button-outline-positive-text-active: var(--text-0); --button-outline-positive-text-hover: var(--text-0); --button-positive-background: var(--green-2); --button-positive-background-active: var(--green-4); --button-positive-background-hover: var(--green-3); --button-positive-background-disabled: var(--green-4); --button-positive-border: var(--button-border); --button-secondary-background: var(--bg-2); --button-secondary-background-active: var(--text-5); --button-secondary-background-hover: var(--bg-1); --button-secondary-background-disabled: var(--bg-3); --button-secondary-text: var(--text-3); --button-transparent-background: var(--hover); --button-transparent-background-active: var(--active-2); --button-transparent-background-hover: var(--active); --button-transparent-text: var(--text-3); --redesign-button-secondary-text: var(--text-3); --polls-voted-fill: color-mix(in hsl, var(--accent-2), transparent 90%); --polls-victor-fill: color-mix(in hsl, var(--green-2), transparent 90%); --card-primary-bg: var(--bg-3); --card-secondary-bg: var(--bg-2); --channel-icon: var(--text-4); --channels-default: var(--text-4); --embed-title: var(--text-2); --header-primary: var(--text-2); --header-secondary: var(--text-4); --header-muted: var(--text-4); --icon-muted: var(--text-5); --icon-primary: var(--text-3); --icon-secondary: var(--text-4); --icon-tertiary: var(--text-4); --info-danger-background: red; --info-danger-text: red; --info-help-background: color-mix(in hsl, var(--blue-2), transparent 80%); --info-help-foreground: var(--blue-1); --info-help-text: var(--blue-1); --info-positive-background: color-mix(in hsl, var(--yellow-1), transparent 80%); --info-positive-text: var(--green-1); --info-warning-background: color-mix(in hsl, var(--yellow-2), transparent 80%); --info-warning-text: var(--yellow-1); --text-brand: var(--accent-1); --text-danger: var(--red-1); --text-link: var(--accent-1); --text-link-low-saturation: red; --text-low-contrast: var(--text-4); --text-message-preview-low-sat: red; --text-muted: var(--text-5); --text-muted-on-default: var(--text-4); --text-normal: var(--text-3); --text-positive: var(--green-1); --text-primary: var(--text-3); --text-secondary: var(--text-4); --text-warning: var(--yellow-1); --text-default: var(--text-3); --text-feedback-critical: var(--red-1); --text-feedback-positive: var(--green-1); --text-feedback-info: red; --text-feedback-warning: red; --text-tertiary: var(--text-4); --status-danger: var(--red-2); --status-danger-background: var(--red-3); --status-danger-text: var(--white); --status-dnd: var(--dnd); /* server profiles */ --status-idle: var(--idle); --status-offline: var(--offline); --status-online: var(--online); --status-positive: var(--green-2); --status-positive-background: var(--green-2); --status-positive-text: var(--white); --status-speaking: var(--green-2); --status-warning: var(--yellow-2); --status-warning-background: red; --status-warning-text: var(--black); --background-feedback-critical: color-mix(in hsl, var(--red-2), transparent 80%); --background-feedback-info: color-mix(in hsl, var(--blue-2), transparent 80%); --background-feedback-positive: color-mix(in hsl, var(--green-2), transparent 80%); --background-feedback-warning: color-mix(in hsl, var(--yellow-2), transparent 80%); --interactive-normal: var(--text-4); --interactive-hover: var(--text-3); --interactive-active: var(--text-3); --interactive-muted: var(--text-5); --mention-foreground: var(--accent-1); --mention-background: color-mix(in hsl, var(--accent-2), transparent 90%); --channel-text-area-placeholder: var(--text-5); --message-reacted-background: color-mix(in hsl, var(--accent-2), transparent 80%); --custom-channel-members-bg: var(--bg-4); --redesign-input-control-selected: var(--accent-2); --scrollbar-auto-thumb: var(--bg-3); --scrollbar-auto-track: transparent; --scrollbar-thin-thumb: var(--bg-3); --scrollbar-thin-track: transparent; --white: var(--text-0); --white-500: var(--text-0); --redesign-button-overlay-alpha-text: var(--text-2); --brand-360: var(--accent-2); --brand-500: var(--accent-2); --blurple-50: var(--accent-2); --red-400: var(--red-2); --red-500: var(--red-3); --green-360: var(--green-2); /* seems to be mostly used by vencord plugins */ --primary-400: var(--text-4); } .visual-refresh { ::placeholder { color: var(--text-5); } .modeUnreadImportant__2ea32 .icon__2ea32, .wrapper__2ea32:hover .icon__2ea32 /* correct channel icon color */ { color: var(--text-3); } .text_b88801 > strong /* xxx is typing.. */ { color: var(--text-3); } .folder__48112[aria-expanded="false"] > .folderIconWrapper__48112 /* collapsed folders */ { --background-primary: var(--bg-3); } .panel__5dec7 /* game activity panel */, #vc-spotify-player /* vencord spotify plugin */, .container__722ff /* background between vc and vc chat */ { background: none; } .side_b3f026 .item_b3f026:hover /* settings tab */ { background-color: var(--bg-3) !important; } .side_b3f026 .item_b3f026:active, .side_b3f026 .item_b3f026.selected_b3f026 { background-color: var(--bg-2) !important; } .quickSelectPopout_ebaca5 /* dm vc region select popout */, .participantsButton__211d1 /* vc participants button */, .voiceBar__7aaec /* n in voice bar (channel list) */, .mainCard_f369db /* form posts */ { background-color: var(--bg-3); } .colorable_f1ceac.primaryDark_f1ceac, .reaction_f8896c /* forum post reaction */ { background-color: var(--bg-2); } .expandedFolderIconWrapper__48112 > svg[style="color: rgb(88, 101, 242);"] /* folder icon */ { color: var(--accent-2) !important; } .colorPickerSwatch__459fb[style="background-color: rgb(88, 101, 242);"] /* folder color picker swatch */, .newBadge_faa96b /* forum post new badge */, .mentioned__5126c:before /* mention message left edge */ { background-color: var(--accent-2) !important; } .replying__5126c:before /* reply message left edge */ { background-color: var(--text-2) !important; } #app-mount .message__5126c.replying__5126c:hover /* override fix for message reply hover */ { background: var(--reply-hover); } .ephemeral__5126c /* ephemeral messages */ { background: var(--mention) !important; } .ephemeral__5126c:hover { background: var(--mention-hover) !important; } .botTagRegular__82f07 /* bot tag */ { background-color: var(--accent-2); } .botTagOP__82f07 /* forum post op tag */ { color: var(--text-0); } .container__87bf1 /* settings checkbutton background */ { background-color: var(--bg-1) !important; transition: background-color 0.2s ease; } .container__87bf1.checked__87bf1 /* settings checkbutton background */ { background-color: var(--accent-2) !important; } .container__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ { fill: var(--bg-1) !important; transition: fill 0.2s ease; } .container__87bf1.checked__87bf1 .slider__87bf1 > svg > path /* settings checkbutton check */ { fill: var(--accent-2) !important; } .container__87bf1 rect[fill='white'] /* settings checkbutton slider */ { fill: var(--text-3) !important; transition: fill 0.2s ease; } .container__87bf1.checked__87bf1 rect[fill='white'] /* settings checkbutton slider */ { fill: var(--text-0) !important; } .refreshIcon__001a7 /* settings radiobutton center */ { fill: var(--text-0); } .categoryText_d02962 /* gif chooser category names */, .bannerColor_fb7f94 /* profile banner button */, .backButton_e4cb9a /* stream preview back button */, .viewersIcon_d6b206 /* stream preview viewers icon */, .bottomControls_e4cb9a /* stream preview viewer number */, .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac /* stream preview control icon */, .bannerVisible_f37cb1 .name_f37cb1 /* server name over banner image */, .dropdownButtonBannerVisible__2637a /* server name over banner dropdown button */ { color: var(--text-1); } .headerText_e4cb9a.base_eb1a4c /* stream preview header text */, .participantName__2cdb8 /* stream preview participant name */ { color: var(--text-1) !important; } .playPausePopIcon_cf09d8 > path /* video play/pause popup */ { fill: var(--text-1); } .headerTitle_e4cb9a:hover /* stream preview header title hover underline */ { border-color: var(--text-1) !important; } .controlIcon_cf09d8 /* video play button */, .wrapper_cf09d8 /* video time */, .iconWrapper__6eb54 /* video initial play button */, .wrapper__926d7 /* youtube embed play button */, .viewersIcon_d6b206:hover /* stream preview viewers icon */ , .headerTitle_e4cb9a:hover .backButton_e4cb9a /* stream preview back button hover */, .viewersIcon_d6b206:hover /* stream preview viewers icon */, .pictureInPictureVideo_e4cb9a .controlIcon_f1ceac:hover /* stream preview control icon */ { color: var(--text-2); } .wrapper__926d7 a:link, .wrapper__926d7 a:visited, .headerTitle_e4cb9a:hover .headerText_e4cb9a.base_eb1a4c /* stream preview back button hover */ { color: var(--text-2) !important; } .downloadHoverButtonIcon__6c706 /* video download button */, .iconContainer__211d1>svg /* vc participants button icon */, .selectedIcon__2f4f7 /* vc selected camera icon */, .colorable_f1ceac.primaryDark_f1ceac .centerIcon_f1ceac /* vc icon button */, .colorable_f1ceac.primaryDark_f1ceac /* vc icon button nub */, .iconBadge__650eb.base__2b1f5 /* server vc badge */, #app-mount .akaBadge__488b1 /* aka badge */, .message_fcf29c /* you have unsaved settings message */, .friendRequestsButton__523aa .base__2b1f5 /* inbox friend request number */, .textBadge__2b1f5[style='background-color: var(--background-accent);'], .tooltipBlack__382e7 /* server boost tooltip */, .colorable_f1ceac.experimentDark_f1ceac, .colorable_f1ceac.experimentDark_f1ceac .centerIcon_f1ceac /* vc buttons */ { color: var(--text-3); } .status__2f4f7 path[fill='var(--white)'], .emptyChannelIcon__00de6 path[fill='var(--white)'] /* channel start icon */ { fill: var(--text-3); } .grabber_a562c8 /* vc volume slider grabber */ { background-color: var(--text-3); } .textBadge__2b1f5 /* new text badge (right click on person in vc) */ { color: var(--text-0); } .unread__3b95d /* new unreads bar (channel list */ { color: var(--text-4); } .colorable_f1ceac.white_f1ceac /* vc icon button nub when white */ { background-color: var(--primary-130); color: var(--bg-4); } .iconBadge__650eb.isCurrentUserConnected__650eb /* green vc badge when connected */ { color: var(--text-0); } .container__37e49 /* user panel buttons */, .numberBadge__2b1f5 /* unread number badge */, .toolbar__9293f /* toolbar button strikethroughs */ { --status-danger: var(--accent-new); } .container__37e49 .button__67645.redGlow__67645 /* user panel button backgrounds*/ { background-color: color-mix(in hsl, var(--accent-new), transparent 90%); } .container__37e49 .button__67645.enabled__67645.redGlow__67645:hover /* user panel button backgrounds hover */ { background-color: color-mix(in hsl, var(--accent-new), transparent 80%); } .divider__5126c /* unread divider */ { --divider-color: var(--accent-new); } .iconBadge__9293f /* icon badge */, .mentionsBar__7aaec /* new mention pill */, .mention__3b95d /* server list new mention pill */ { background-color: var(--accent-new); } .newMessagesBar__0f481 /* unread bar */ { background-color: var(--accent-3); } .barButtonAlt__0f481 /* unread bar mark as read button */ { --button-secondary-background: var(--accent-3); --button-secondary-background-hover: var(--accent-4); } .updateIconForeground__49676 /* update button */ { fill: var(--green-1); } .colorable_f1ceac.red_f1ceac:hover /* vc disconnect button hover */ { background-color: var(--red-4); } .button_f7ecac.dangerous_f7ecac:hover /* image attachment delete button hover in chat bar */ { color: var(--red-4); } .contentWrapper__08434 ::-webkit-scrollbar-thumb /* gif picker scrollbar */ { background-color: var(--bg-1); } .circleIconButton__5bc7e /* new server button */ { color: var(--text-3); } .circleIconButton__5bc7e:hover { color: var(--bg-4); } .tooltipGrey__382e7 /* spotify plugin time tooltip */ { color: var(--text-3); background-color: var(--bg-3); } .textContentFooter__9a337 /* forum post image fade */ { background: linear-gradient(0deg, var(--bg-4), transparent); } .result__2dc39:after /* remove gif hover overlay */ { display: none; } .result__2dc39:hover /* gif hover */ { outline: 2px solid var(--accent-2); } .reactionBtn__23977.forceShow__23977:hover /* fix add reaction button border hover */ { border-color: var(--bg-2); } .flash__03436[data-flash=true] /* reply message flash */ { background: var(--background-message-highlight); } /* status indicators */ rect[fill='#83838b'] { fill: var(--offline); } .status_a423bd[style='background-color: rgb(131, 131, 139);'] { background-color: var(--offline) !important; } rect[fill='#43a25a'], path[fill='#43a25a'] /* status activity icon */, .vc-platform-indicator > svg[fill="#43a25a"] { fill: var(--online); } .status_a423bd[style='background-color: rgb(67, 162, 90);'] { background-color: var(--online) !important; } rect[fill='#ca9654'], .vc-platform-indicator > svg[fill='#ca9654'] { fill: var(--idle); } .status_a423bd[style='background-color: rgb(201, 150, 86);'] { background-color: var(--idle) !important; } rect[fill='#d83a42'], .vc-platform-indicator > svg[fill='#d83a42'] { fill: var(--dnd); } .status_a423bd[style='background-color: rgb(216, 58, 66);'] { background-color: var(--dnd) !important; } rect[fill='#9147ff'] { fill: var(--streaming); } div[style='display: flex; justify-content: center; align-items: center; border-radius: 5px; background-color: rgb(67, 162, 90); height: 10px; width: 25px;'] { background-color: var(--online) !important; } /* fix radio bar button colors */ .radioBar__001a7[style='--radio-bar-accent-color: var(--yellow-360); padding: 10px;'] { --radio-bar-accent-color: var(--yellow-2) !important; } .radioBar__001a7[style='--radio-bar-accent-color: var(--green-360); padding: 10px;'] { --radio-bar-accent-color: var(--green-2) !important; } .radioBar__001a7[style='--radio-bar-accent-color: var(--red-400); padding: 10px;'] { --radio-bar-accent-color: var(--red-2) !important; } #vc-spotify-player { --vc-spotify-green: var(--accent-new); } ::selection, .highlight { background: var(--accent-3); color: var(--text-0); } } } /* dms-button.css */ @property --dms-icon { syntax: 'default | off | on'; inherits: false; initial-value: on; } body { --dms-icon-svg-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* icon svg url. MUST BE A SVG. */ --dms-icon-svg-size: 90%; /* size of the svg (css mask-size) */ --dms-icon-color-before: var(--icon-secondary); --dms-icon-color-after: var(--white); --dms-background-image-url: url('https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png'); --dms-background-image-size: cover; /* size of the background image (css background-size) */ --dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* color of the background image (css background) */ } @container body style(--dms-icon: on) { .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg { display: none; } .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8::before { content: ''; display: block; position: absolute; width: 65%; height: 65%; background: var(--dms-icon-color-before); mask-image: var(--dms-icon-svg-url); mask-size: var(--dms-icon-svg-size); mask-position: center; mask-repeat: no-repeat; transition: background-color 0.15s ease-out; } .wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before { transform: rotate(0deg) scale(1); } .wrapper__6e9f8[data-list-item-id='guildsnav___home']:hover > .childWrapper__6e9f8::before, .wrapper__6e9f8[data-list-item-id='guildsnav___home'].selected__6e9f8 > .childWrapper__6e9f8::before { background: var(--dms-icon-color-after); transform: rotate(-360deg) scale(0.8); } @container body style(--animations: on) { .wrapper__6e9f8[data-list-item-id='guildsnav___home'] .childWrapper__6e9f8::before { transition: background-color 0.15s ease-out, transform var(--dms-icon-svg-transition); } } } @container body style(--dms-icon: off) { .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 > svg { display: none; } } @property --dms-background { syntax: 'off | image | color'; inherits: false; initial-value: off; } @container body style(--dms-background: image) { .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 { background-image: var(--dms-background-image-url); background-color: transparent !important; background-size: var(--dms-background-image-size); background-position: center; background-repeat: no-repeat; } } @container body style(--dms-background: color) { .wrapper__6e9f8[data-list-item-id='guildsnav___home'] > .childWrapper__6e9f8 { background: var(--dms-background-color); } } /* flipped-chatbar.css */ @property --flipped-chatbar { syntax: 'on | off'; inherits: false; initial-value: on; } body { --chatbar-height: 47px; /* height of the chatbar */ --chatbar-padding: 8px; /* padding of the chatbar */ --custom-channel-textarea-text-area-height: var(--chatbar-height); } @container body style(--flipped-chatbar: on) { .visual-refresh { .form_f75fb0 { margin: 0 var(--chatbar-padding) var(--chatbar-padding) var(--chatbar-padding); padding: 0; --chatbar-border-color: var(--border-faint); } .channelTextArea_f75fb0 { margin: 0; border-color: var(--chatbar-border-color); transition: none; } .base_b88801 { top: -25px; left: 0; right: 0; background-color: var(--chat-background-default); padding: 0 8px; border-radius: var(--radius-md) var(--radius-md) 0 0; border: 1px solid var(--chatbar-border-color); border-bottom: none; transition: none; } .stackedBars__74017, .threadSuggestionBar__841c8 { border-color: var(--chatbar-border-color) !important; } .stackedBars__74017 { background: none !important; } .form_f75fb0:has(.base_b88801) { .channelTextArea_f75fb0, .wrapper__44df5 { border-radius: 0 0 var(--radius-md) var(--radius-md); } } .form_f75fb0:has(.channelTextArea__74017:focus-within) { --chatbar-border-color: var(--border-subtle); } .scrollerSpacer__36d07 { height: calc(25px + var(--chatbar-padding)); } .scroller__36d07::-webkit-scrollbar-track { margin-bottom: calc(21px + var(--chatbar-padding)); } .bottomBar__0f481 { margin-bottom: 25px; } .wrapper__44df5 /* phone verification bar */ { margin: 0; border-radius: var(--radius-md); } } } /* top-bar.css */ @property --move-top-bar-buttons { syntax: 'on | off'; inherits: false; initial-value: off; } @container body style(--move-top-bar-buttons: on) { .visual-refresh { /* remove help button */ .trailing_c38106 > a[href="https://support.discord.com"] { display: none; } /* make server list inner scroll */ .stack_dbd263 { overflow: hidden scroll; scrollbar-width: none; } /* create space for inbox button */ .tutorialContainer__1f388 { margin-bottom: 48px; } /* move inbox button */ .recentsIcon_c99c29 { position: fixed; width: 40px; height: 40px; top: calc(var(--custom-app-top-bar-height) + 1px + var(--custom-guild-list-padding) + 48px); left: calc(var(--gap) + 1px + var(--custom-guild-list-padding)); } /* style inbox button */ .recentsIcon_c99c29 .button__85643 { width: 100%; height: 100%; background-color: var(--background-surface-higher); border-radius: var(--radius-md); transition: background-color 0.15s ease-out; &:hover { background-color: var(--bg-brand); .icon__9293f { color: var(--white); } } } .recentsIcon_c99c29 .svg__2338f { transition: color 0.15s ease-out; width: 24px; height: 24px; } /* shift inbox popup panel into view */ .recentMentionsPopout__95796 { transform: translateX(100%); } /* move top bar title */ .title_c38106 { padding-left: var(--gap); justify-content: flex-start; } .title__85643 { gap: 4px; } /* style top bar title */ .title__85643 .icon_f34534 { width: 16px; height: 16px; display: none; } .title__85643 .text-sm\/medium_cf4812 { line-height: 90%; color: var(--text-muted); font-weight: 700; } /* fix settings animation transform */ .layer__960e4.baseLayer__960e4 { transform: none !important; } .layers__960e4 > .layer__960e4.animating__960e4 { will-change: opacity; } /* unread icon */ .recentsIcon_c99c29 .iconBadge__9293f { --custom-icon-offset: 8px; width: 10px; height: 10px; transition: background 0.15s ease-out; } .recentsIcon_c99c29:hover .iconBadge__9293f { background: var(--white); } } } /* transparency-blur.css */ @property --panel-blur { syntax: 'on | off'; inherits: false; initial-value: off; } @container body style(--panel-blur: on) { .visual-refresh { #app-mount { --panel-backdrop-filter: blur(var(--blur-amount)); } .popoverReactionHoverBar_f84418 /* message hover quick action bar */, .tooltip__382e7 /* tooltips */ { background: var(--bg-floating); } .menu_c1e9c4 /* context menus */, .contentWrapper__08434 /* emoji/gif panel */, .root__49fc1 /* modals like invite */, .outer_c0bea0.biteSize_c0bea0:not(.custom-theme-background) /* small profile popup */, .autocomplete__6b0e0 /* autocomplete */, .container__55c99 /* search suggestions */, .messagesPopoutWrap__45690 /* inbox */, .popout__76f04 /* channel hover popout */ { background: var(--bg-floating); } } } @property --transparency-tweaks { syntax: 'on | off'; inherits: false; initial-value: off; } @container body style(--transparency-tweaks: on) { .visual-refresh { .formWithLoadedChatInput_f75fb0:before, .children__9293f:after { display: none; } } } @property --remove-bg-layer { syntax: 'on | off'; inherits: false; initial-value: off; } @container body style(--remove-bg-layer: on) { .bg__960e4 { background: transparent !important; } } /* user-panel.css */ @property --small-user-panel { syntax: 'on | off'; inherits: false; initial-value: off; } @container body style(--small-user-panel: on) { .visual-refresh { .base_c48ade { grid-template-areas: 'titleBar titleBar titleBar' 'guildsList notice notice' 'guildsList channelsList page' 'guildsList userPanel page'; } .panels_c48ade { max-width: calc(var(--custom-guild-sidebar-width) - var(--custom-guild-list-width)); } } } /* window-controls.css */ @property --custom-window-controls { syntax: 'on | off'; inherits: false; initial-value: off; } body { --window-control-size: 14px; } @container body style(--custom-window-controls: on) { .winButtons_c38106 { gap: 0; padding-right: calc(var(--gap) - (var(--window-control-size) / 2) + 1px); } .winButtons_c38106::before { margin-right: calc(var(--custom-app-top-bar-height) / 4); } .winButton_c38106 > svg { display: none; } .winButton_c38106 { background: none !important; width: calc(var(--window-control-size) * 2); height: var(--custom-app-top-bar-height); } .winButton_c38106::after { display: block; content: ''; height: var(--window-control-size); width: var(--window-control-size); border-radius: 50%; } .winButton_c38106:hover::after { filter: brightness(0.7); } .winButton_c38106:active::after { transform: scale(0.9); } .winButtonClose_c38106::after { background-color: var(--dnd) !important; } .winButtonMinMax_c38106:nth-child(1)::after { background-color: var(--idle) !important; } .winButtonMinMax_c38106:nth-child(2)::after { background-color: var(--online) !important; } }