moonmoon/MoonMoon_Discord_Theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
MoonMoon_Discord_Theme/AIO/moon-midnight_AIO.css

2090 lines
73 KiB
CSS
Raw Normal View History

Update AIO/moon-midnight_AIO.css
2025-12-01 13:36:34 +01:00
/**
* @name m0on Midnight
* @description a heavily customized midnight theme based on my current profile
* @author refact0r and m0onmo0n
* @version 2.1.1
* @invite nz87hXyvcy
* @website https://github.com/refact0r/midnight-discord
* @source https://github.com/refact0r/midnight-discord/blob/master/themes/midnight.theme.css
* @authorId 508863359777505290
* @authorLink https://www.refact0r.dev
*/
/* 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;
--border-hover: var(--border-subtle);
}
body {
container-name: body;
/* font, change to '' for default discord font */
--font: 'figtree';
--code-font: '';
/* sizes */
--gap: 6px; /* spacing between panels */
--divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */
--border-thickness: 1px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */
--custom-guild-list-width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2 + var(--border-thickness) * 2);
--border-hover-transition: 0.2s ease;
}
.visual-refresh {
/* panel separation */
.guilds__5e434 /* server list */,
.sidebarList__5e434 /* channel list (includes dm list) */,
.panels__5e434 /* 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 */,
.content_f75fb0 > aside > .outer_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;
transition: border-color var(--border-hover-transition);
&:hover {
border-color: var(--border-hover);
}
}
.panels__5e434 /* user panel */ {
bottom: 0;
left: 0;
width: 100%;
}
.sidebar__5e434 /* server list + channel list + user panel group */ {
margin: 0 var(--gap) var(--gap) var(--gap);
}
.guilds__5e434 /* server list */ {
margin-bottom: calc(var(--custom-app-panels-height, 0) + var(--gap));
margin-right: var(--gap);
}
.guilds__5e434 + div:not(.sidebarList__5e434) /* betterfolders */ {
width: 100% !important;
}
.scroller_ef3116 /* server list inner scroller */ {
padding: var(--custom-guild-list-padding) 0;
}
.folderGroup__48112 {
width: 100%;
}
.listItem__650eb {
width: 100%;
}
.sidebarList__5e434 /* 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__5e434:after /* server list + channel list bottom shadow */ {
display: none;
}
.wrapper_ef3116 /* remove server list shadow */ {
mask: none;
}
.chat_f75fb0 /* chat group outer */ {
border: none !important;
background: none;
}
.chatContent_f75fb0 {
overflow: hidden;
}
.container__133bf /* friends page group outer */,
.page__5e434 {
padding-bottom: var(--gap);
padding-right: var(--gap);
border: none !important;
background: none;
}
.page__5e434 > .chat_f75fb0,
.page__5e434 > .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;
}
.page__5e434 > div > .chat_f75fb0 > .content_f75fb0 /* chat outer */ {
border-left: none;
}
.tabBody__133bf /* friends page */ {
border: none !important;
}
.listeningAlong_e0cf27 /* user panel listening along */ {
border-top: none !important;
}
.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;
min-width: fit-content;
}
.members_c8ffbb /* member list inner */,
.member_c8ffbb /* member list item */ {
background: none;
}
.resizeHandle__01ae2 /* resize handle */ {
background: transparent;
}
.privateChannels_e6b769 /* 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);
}
.content_f75fb0 > aside > .outer_c0bea0 /* dm user panel */ {
margin-left: var(--gap);
overflow: hidden;
/* min-width: 340px; */
background-position: center calc(-1 * var(--border-thickness));
background-size: 100% calc(100% + 2 * var(--border-thickness));
}
.searchResultsWrap_a9e706 /* search results */ {
margin-left: var(--gap);
}
.notice__6e2b9 /* notice banner */ {
margin: 0 var(--gap) var(--gap) 0;
border-radius: var(--radius-md);
box-sizing: border-box;
height: 40px;
}
.container__01ae2 /* vc chat + titlebar group */ {
border: none;
background: none;
}
.chat_a44415::before /* vc chat shadow */ {
display: none;
}
.channelChatWrapper_cb9592 /* vc chat + titlebar group outer */ {
background: none;
}
.page__5e434 > 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);
}
.wrapper_cb9592.fullScreen_cb9592 {
margin-top: var(--gap);
margin-left: var(--gap);
width: calc(100% - var(--gap));
height: calc(100% - 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_cdf8a9 /* message loading placeholders */,
.wrapper_cdf8a9 > .wrapper_fc8177 {
background: none;
}
.page__5e434 > .chat_f75fb0 /* friend page, server members page */ {
background: none !important;
}
.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 */,
.unreadBottom__629e4 /* channel list non-community unread pill */ {
bottom: 0;
}
.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);
}
#vc-spotify-player /* vencord spotify plugin */ {
background: none;
}
/* 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);
background-position: center calc(-1 * var(--border-thickness));
background-size: 100% calc(100% + 2 * var(--border-thickness));
}
.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';
--font-code: var(--code-font), 'gg mono';
}
[class*='scroll'] {
will-change: scroll-position;
}
.burstGlow__23977 {
display: none;
}
/* animations.css */
body {
--list-item-transition: 0.2s ease; /* transition for list items */
--dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */
}
@property --animations {
syntax: 'off | on';
inherits: false;
initial-value: on;
}
@container body style(--animations: on) {
.visual-refresh {
/* list hover animations */
.wrapper__2ea32 .link__2ea32 /* channels */,
.container__91a9d /* members */,
.channel__972a0 /* dms */,
.side_aa8da2 .item_aa8da2 /* settings */ {
transition: margin-left var(--list-item-transition);
will-change: margin-left;
}
.wrapper__2ea32:hover .link__2ea32,
.side_aa8da2 .item_aa8da2: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;
}
}
}
/* background-image.css */
body {
--background-image-url: url('');
}
@property --background-image {
syntax: 'off | on';
inherits: false;
initial-value: off;
}
@container body style(--background-image: on) {
.visual-refresh #app-mount .bg__960e4 {
background: var(--background-image-url);
background-size: cover;
background-position: center;
}
}
/* chatbar.css */
body {
--chatbar-height: 47px; /* height of the chatbar (52px by default, 47px to align it with the user panel) */
--custom-channel-textarea-text-area-height: var(--chatbar-height);
}
@property --custom-chatbar {
syntax: 'off | separated';
inherits: false;
initial-value: aligned;
}
.visual-refresh {
.attachWrapper__0923f {
padding-top: 0;
padding-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
}
@container body style(--custom-chatbar: separated) {
.visual-refresh {
.chatContent_f75fb0 {
background: none;
border-radius: 0;
border: none;
backdrop-filter: none;
}
.messagesWrapper__36d07 {
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);
transition: border-color var(--border-hover-transition);
overflow: hidden;
&:hover {
border-color: var(--border-hover);
}
}
.scrollerSpacer__36d07 {
height: calc(26px + var(--space-xs));
}
.scroller__36d07::-webkit-scrollbar-track {
margin-bottom: calc(26px);
}
.chatContent_f75fb0:has(.typing_b88801) .messagesWrapper__36d07::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--background-base-lower);
height: 26px;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
z-index: 2;
}
.form_f75fb0 {
display: flex;
flex-direction: column;
padding: 0;
width: 100%;
margin-top: 0;
}
.typing_b88801 {
position: absolute;
order: -1;
top: calc(-26px + var(--border-thickness) * -1);
left: calc(var(--border-thickness));
border-radius: 0 0 0 var(--radius-lg);
padding: 0 0 0 var(--space-sm);
height: 26px;
}
.channelBottomBarArea_f75fb0 {
margin-top: var(--gap);
}
.channelTextArea_f75fb0 {
margin: 0;
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);
transition: border-color var(--border-hover-transition);
&:hover {
border-color: var(--border-hover);
}
}
.stackedBars__74017 {
background: none !important;
}
.wrapper__44df5 {
margin: var(--gap) 0 0 0;
height: var(--chatbar-height);
padding: 0;
border-radius: var(--radius-lg);
border: var(--border-thickness) solid var(--border-subtle);
backdrop-filter: var(--panel-backdrop-filter);
transition: border-color var(--border-hover-transition);
&:hover {
border-color: var(--border-hover);
}
}
}
}
/* colors.css */
@property --colors {
syntax: 'on | off';
inherits: false;
initial-value: on;
}
:root {
--colors: on; /* turn off to use discord default colors */
/* text colors */
--text-0: white; /* text on colored elements */
--text-1: var(--text-2); /* other normally white text */
--text-2: white; /* headings and important text */
--text-3: hsl(200, 100%, 89%); /* normal text */
--text-4: hsl(201, 26%, 65%); /* icon buttons and channels */
--text-5: hsl(220, 15%, 42%); /* 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(223, 17%, 8%); /* spacing, secondary elements */
--bg-4: hsla(220, 15%, 10%, 1); /* main background color */
--hover: hsla(230, 20%, 40%, 0.1); /* channels and buttons when hovered */
--active: hsla(220, 20%, 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(220, 0%, 0%, 0.1); /* messages when hovered */
/* accent colors */
--accent-1: hsl(190, 70%, 60%); /* links and other accent text */
--accent-2: hsl(190, 70%, 48%); /* small accent elements */
--accent-3: hsl(190, 70%, 42%); /* accent buttons */
--accent-4: hsl(190, 70%, 36%); /* accent buttons when hovered */
--accent-5: hsl(190, 70%, 30%); /* accent buttons when clicked */
--accent-new: var(--accent-2); /* stuff that's normally red like mute/deafen buttons */
--mention: hsl(var(--yellow-300-hsl)/0.08); /* background of messages that mention you */
--mention-hover: hsla(200, 89%, 86%, 0.08); /* 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: #23a55a; /* change to #43a25a for default */
--dnd: hsl(340, 60%, 60%); /* change to #d83a42 for default */
--idle: hsl(50, 60%, 60%); /* change to #ca9654 for default */
--streaming: hsl(260, 60%, 60%); /* change to #593695 for default */
--offline: var(--text-4); /* change to #83838b for default offline color */
/* border colors */
--border-light: var(--hover); /* light border color */
--border: var(--active); /* normal border color */
--button-border: hsl(220, 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:not(.custom-user-profile-theme),
.visual-refresh .theme-light:not(.custom-user-profile-theme) {
--activity-card-background: var(--bg-3);
--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(--hover);
--background-mod-normal: var(--active);
--background-mod-strong: var(--active-2);
--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);
--chat-text-muted: var(--text-5);
--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: var(--yellow-1);
--text-tertiary: var(--text-4);
--user-profile-overlay-background: var(--bg-4);
--user-profile-overlay-background-hover: var(--bg-2);
--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-text: var(--text-2);
--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-1);
--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);
--deprecated-text-input-bg: var(--bg-3);
--deprecated-text-input-border: var(--border-light);
--background-code: var(--bg-3);
/* --control-background-active-active: var(--green-new-62);
--control-background-active-default: var(--green-new-50);
--control-background-active-hover: var(--green-new-55);
--control-background-active-loading: var(--green-new-50); */
--control-background-critical-primary-active: var(--red-5);
--control-background-critical-primary-default: var(--red-3);
--control-background-critical-primary-hover: var(--red-4);
--control-background-critical-primary-loading: var(--red-3);
--control-background-critical-secondary-active: var(--text-5);
--control-background-critical-secondary-default: var(--bg-2);
--control-background-critical-secondary-hover: var(--bg-1);
--control-background-critical-secondary-loading: var(--bg-2);
/* --control-background-expressive-active: var(--neutral-10);
--control-background-expressive-default: var(--neutral-1);
--control-background-expressive-hover: var(--neutral-1);
--control-background-expressive-loading: var(--neutral-1);
--control-background-icon-only-active: hsl(var(--opacity-20-hsl) / 0.2);
--control-background-icon-only-hover: hsl(var(--opacity-16-hsl) / 0.1607843137254902);
--control-background-overlay-primary-active: var(--neutral-17);
--control-background-overlay-primary-default: var(--neutral-1);
--control-background-overlay-primary-hover: var(--neutral-9);
--control-background-overlay-primary-loading: var(--neutral-1);
--control-background-overlay-secondary-active: hsl(var(--opacity-black-48-hsl) / 0.47843137254901963);
--control-background-overlay-secondary-default: hsl(var(--opacity-black-52-hsl) / 0.5215686274509804);
--control-background-overlay-secondary-hover: hsl(var(--opacity-black-64-hsl) / 0.6392156862745098);
--control-background-overlay-secondary-loading: hsl(var(--opacity-black-52-hsl) / 0.5215686274509804); */
--control-background-primary-active: var(--accent-5);
--control-background-primary-default: var(--accent-3);
--control-background-primary-hover: var(--accent-4);
--control-background-primary-loading: var(--accent-3);
--control-background-secondary-active: var(--text-5);
--control-background-secondary-default: var(--bg-2);
--control-background-secondary-hover: var(--bg-1);
--control-background-secondary-loading: var(--bg-2);
/* --control-border-active-active: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);
--control-border-active-default: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);
--control-border-active-hover: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196);
--control-border-active-loading: hsl(var(--opacity-white-8-hsl) / 0.0784313725490196); */
--control-border-critical-primary-active: var(--button-border);
--control-border-critical-primary-default: var(--button-border);
--control-border-critical-primary-hover: var(--button-border);
--control-border-critical-primary-loading: var(--button-border);
--control-border-critical-secondary-active: var(--border-light);
--control-border-critical-secondary-default: var(--border-light);
--control-border-critical-secondary-hover: var(--border-light);
--control-border-critical-secondary-loading: var(--border-light);
/* --control-border-expressive-active: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
--control-border-expressive-default: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
--control-border-expressive-hover: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
--control-border-expressive-loading: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
--control-border-icon-only-active: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
--control-border-icon-only-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
--control-border-overlay-primary-active: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
--control-border-overlay-primary-default: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
--control-border-overlay-primary-hover: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
--control-border-overlay-primary-loading: hsl(var(--opacity-12-hsl) / 0.12156862745098039);
--control-border-overlay-secondary-active: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
--control-border-overlay-secondary-default: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
--control-border-overlay-secondary-hover: hsl(var(--opacity-4-hsl) / 0.0392156862745098);
--control-border-overlay-secondary-loading: hsl(var(--opacity-4-hsl) / 0.0392156862745098); */
--control-border-primary-active: var(--button-border);
--control-border-primary-default: var(--button-border);
--control-border-primary-hover: var(--button-border);
--control-border-primary-loading: var(--button-border);
--control-border-secondary-active: var(--border-light);
--control-border-secondary-default: var(--border-light);
--control-border-secondary-hover: var(--border-light);
--control-border-secondary-loading: var(--border-light);
/*--control-brand-foreground: var(--brand-360);
--control-brand-foreground-new: var(--brand-360);
--control-icon-active-active: var(--white);
--control-icon-active-default: var(--white);
--control-icon-active-hover: var(--white);
--control-icon-active-loading: var(--white);
--control-icon-critical-primary-active: var(--white);
--control-icon-critical-primary-default: var(--white);
--control-icon-critical-primary-hover: var(--white);
--control-icon-critical-primary-loading: var(--white);
--control-icon-critical-secondary-active: var(--red-new-22);
--control-icon-critical-secondary-default: var(--red-new-22);
--control-icon-critical-secondary-hover: var(--red-new-22);
--control-icon-critical-secondary-loading: var(--red-new-22);
--control-icon-expressive-active: var(--black);
--control-icon-expressive-default: var(--black);
--control-icon-expressive-hover: var(--black);
--control-icon-expressive-loading: var(--black);
--control-icon-icon-only-active: var(--neutral-1);
--control-icon-icon-only-default: var(--neutral-16);
--control-icon-icon-only-hover: var(--neutral-1);
--control-icon-icon-only-loading: var(--neutral-1);
--control-icon-overlay-primary-active: var(--black);
--control-icon-overlay-primary-default: var(--black);
--control-icon-overlay-primary-hover: var(--black);
--control-icon-overlay-primary-loading: var(--black);
--control-icon-overlay-secondary-active: var(--white);
--control-icon-overlay-secondary-default: var(--white);
--control-icon-overlay-secondary-hover: var(--white);
--control-icon-overlay-secondary-loading: var(--white);
--control-icon-primary-active: var(--white);
--control-icon-primary-default: var(--white);
--control-icon-primary-hover: var(--white);
--control-icon-primary-loading: var(--white);
--control-icon-secondary-active: var(--neutral-1);
--control-icon-secondary-default: var(--neutral-1);
--control-icon-secondary-hover: var(--neutral-1);
--control-icon-secondary-loading: var(--neutral-1);
--control-text-active-active: var(--white);
--control-text-active-default: var(--white);
--control-text-active-hover: var(--white);
--control-text-active-loading: var(--white);*/
--control-text-critical-primary-active: var(--text-0);
--control-text-critical-primary-default: var(--text-0);
--control-text-critical-primary-hover: var(--text-0);
--control-text-critical-primary-loading: var(--text-0);
--control-text-critical-secondary-active: var(--red-2);
--control-text-critical-secondary-default: var(--red-2);
--control-text-critical-secondary-hover: var(--red-2);
--control-text-critical-secondary-loading: var(--red-2);
/* --control-text-expressive-active: var(--black);
--control-text-expressive-default: var(--black);
--control-text-expressive-hover: var(--black);
--control-text-expressive-loading: var(--black);
--control-text-overlay-primary-active: var(--black);
--control-text-overlay-primary-default: var(--black);
--control-text-overlay-primary-hover: var(--black);
--control-text-overlay-primary-loading: var(--black);
--control-text-overlay-secondary-active: var(--white);
--control-text-overlay-secondary-default: var(--white);
--control-text-overlay-secondary-hover: var(--white);
--control-text-overlay-secondary-loading: var(--white); */
--control-text-primary-active: var(--text-0);
--control-text-primary-default: var(--text-0);
--control-text-primary-hover: var(--text-0);
--control-text-primary-loading: var(--text-0);
--control-text-secondary-active: var(--text-3);
--control-text-secondary-default: var(--text-3);
--control-text-secondary-hover: var(--text-3);
--control-text-secondary-loading: var(--text-3);
}
.visual-refresh {
::placeholder {
color: var(--text-5);
}
.bg__960e4 /* main background */ {
background: var(--bg-3);
}
.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);
}
.hiddenVisually_b18fe2[aria-expanded="false"] > .folderPreviewWrapper__48112 /* collapsed folders */ {
--background-primary: var(--bg-3);
}
.panel__5dec7 /* game activity panel */,
.container__722ff /* background between vc and vc chat */ {
background: none;
}
.side_aa8da2 .item_aa8da2:hover /* settings tab */ {
background-color: var(--bg-3) !important;
}
.side_aa8da2 .item_aa8da2:active,
.side_aa8da2 .item_aa8da2.selected_aa8da2 {
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 */,
.accountProfileCard__1fed1 /* account settings profile background */ {
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;
}
.badge_c3d04b /* shop "orbs exclusive" badge */ {
background-color: var(--text-1);
}
#app-mount .message__5126c.replying__5126c:hover /* override fix for message reply hover */ {
background: var(--reply-hover);
}
.visual-refresh .voiceBar__7aaec .barText__7aaec, .visual-refresh .voiceChannelsIcon__7aaec /* x in voice bar text */ {
color: var(--accent-2);
}
.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__3f21e /* settings checkbutton background */ {
background-color: var(--bg-1) !important;
transition: background-color 0.2s ease;
}
.container__3f21e.checked__3f21e /* settings checkbutton background */ {
background-color: var(--accent-2) !important;
}
.container__3f21e .slider__3f21e > svg > path /* settings checkbutton check */ {
fill: var(--bg-1) !important;
transition: fill 0.2s ease;
}
.container__3f21e.checked__3f21e .slider__3f21e > svg > path /* settings checkbutton check */ {
fill: var(--accent-2) !important;
}
.container__3f21e rect[fill='white'] /* settings checkbutton slider */ {
fill: var(--text-3) !important;
transition: fill 0.2s ease;
}
.container__3f21e.checked__3f21e rect[fill='white'] /* settings checkbutton slider */ {
fill: var(--text-0) !important;
}
.refreshIcon__88a69 /* 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 */,
.mediaMosaicAltText__0f481 /* image alt text label */ {
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__9a9f9 /* 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.primaryDark_f1ceac, .colorable_f1ceac.primaryDark_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);
}
.lookOutlined__201d5.colorWhite__201d5 /* outline buttons */ {
border-color: var(--text-5);
color: var(--text-3);
}
.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_c36707 /* 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='#82838b'] {
fill: var(--offline);
}
.status_a423bd[style='background-color: rgb(130, 131, 139);'] {
background-color: var(--offline) !important;
}
rect[fill='#43a25a'],
path[fill='#43a25a'] /* status activity icon */,
path[fill='var(--status-positive)'] /* 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(202, 150, 84);'] {
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__88a69[style='--radio-bar-accent-color: var(--yellow-360); padding: 10px;'] {
--radio-bar-accent-color: var(--yellow-2) !important;
}
.radioBar__88a69[style='--radio-bar-accent-color: var(--green-360); padding: 10px;'] {
--radio-bar-accent-color: var(--green-2) !important;
}
.radioBar__88a69[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-2);
}
.barFill_a562c8 {
background-color: var(--accent-2) !important;
}
.vcd-screen-picker-option-radio[data-checked='true'] .defaultColor__4bd52 {
color: var(--text-0);
}
.memberRowContainer__71c22.memberSelected__71c22 td {
background: var(--bg-3);
}
}
::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: on;
--dms-icon-svg-url: url("https://raw.githubusercontent.com/squidfunk/mkdocs-material/refs/heads/master/material/templates/.icons/material/shield-moon.svg"); /* icon svg url. MUST BE A SVG. old icon: https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.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: 3px; /* 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 {
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;
}
}
}
/* top-bar.css */
@property --move-top-bar-buttons {
syntax: 'on | off';
inherits: false;
initial-value: on;
}
@container body style(--move-top-bar-buttons: off) {
.visual-refresh {
/* remove help button */
.trailing_c38106 > a[href="https://support.discord.com"],
.recentsIcon_c99c29,
.winButtons_c38106::before
{
display: none;
}
/* make server list inner scroll */
.stack_dbd263 {
overflow: hidden scroll;
scrollbar-width: none;
}
}
}
@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: show;
scrollbar-width: none;
}
/* create space for inbox button */
.tutorialContainer__1f388 {
margin-bottom: 1px;
}
/* move inbox button*/
.clickable_c99c29 {
display: none;
position: fixed;
width: 24px;
height: 24px;
top: calc(var(--custom-app-top-bar-height) + 1px + var(--custom-guild-list-padding) + 30px);
left: calc(var(--gap) + 15px + var(--custom-guild-list-padding));
/*top: calc(var(--custom-app-top-bar-height) + var(--custom-guild-list-padding) + 7px);
left: calc(var(--gap) + 54px + var(--custom-guild-list-padding));*/
/*top: calc(var(--custom-app-top-bar-height) + 1px + var(--custom-guild-list-padding) + 38px);*/
/*left: calc(var(--gap) + 1px + var(--custom-guild-list-padding));*/
}
/* style inbox button */
.clickable_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);
}
}
}
.clickable_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 */
.clickable_c99c29 .iconBadge__9293f {
--custom-icon-offset: 8px;
width: 10px;
height: 10px;
transition: background 0.15s ease-out;
}
.clickable_c99c29:hover .iconBadge__9293f {
background: var(--white);
}
}
}
/* transparency-blur.css */
@property --panel-blur {
syntax: 'off | on';
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_c36707 /* tooltips */ {
background: var(--bg-floating);
}
.menu_c1e9c4 /* context menus */,
.contentWrapper__08434 /* emoji/gif panel */,
.root__49fc1 /* modals like invite */,
.outer_c0bea0.user-profile-popout:not(.custom-theme-background) /* small profile popup */,
.autocomplete__6b0e0 /* autocomplete */,
.container__55c99 /* search suggestions */,
.messagesPopoutWrap_e8b59c /* inbox */,
.popout__76f04 /* channel hover popout */,
.bar__7aaec /* channel list new unreads bar */ {
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: on;
}
@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: on;
}
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;
}
}
/**
* @name Horizontal Server List
* @author MoonMoon
* @description Moves the server list from the left to the top of Discord. Originally made by: Gibbu#1211
*/
:root {
--HSL-server-direction: column; /* Direction of the server list. | OPTIONS: column, column-reverse | DEFAULT: column */
--HSL-server-alignment: flex-start; /* Alignment of the server list. | OPTIONS: flex-start, center, flex-end | DEFAULT: flex-start */
}
.content__5e434 {
margin-top: var(--custom-guild-list-width);
overflow: visible !important;
}
#app-mount .sidebar__5e434 {
border-radius: 0;
overflow: visible !important;
}
#app-mount .guilds__5e434 {
transform-origin: top left;
rotate: -90deg;
height: 100vw !important;
bottom: unset;
position: absolute !important;
left: 0;
}
#app-mount .tree_ef3116 {
padding-top: var(--HSL-top-padding, var(--size-sm));
}
#app-mount .wrapper_cc5dd2 {
rotate: 90deg;
}
#app-mount .itemsContainer_ef3116,
#app-mount .stack_dbd263 {
flex-direction: var(--HSL-server-direction);
justify-content: var(--HSL-server-alignment);
}
.container__5e434 > div[style]:not(.base__5e434) {
width: 100vw !important;
height: var(--custom-guild-list-width) !important;
position: absolute;
top: calc(var(--custom-guild-list-width) + var(--custom-app-top-bar-height));
pointer-events: none;
z-index: 1;
}
.container__5e434 > div[style]:not(.base__5e434) .guilds__5e434 {
pointer-events: all;
}
.container__5e434 > div[style]:not(.base__5e434) + .base__5e434 .content__5e434 {
margin-top: calc(var(--custom-guild-list-width) * 2);
}
/**
* @name Discord Ui Tweaks
* @author Wolfÿ
* @version 1.0.1-Alpha
* @description Just a collection of tweaks I created or which I collected that were made by others (I try to mention them in the repo!) that make Discord a little more enjoyable
* @invite avia
* @source https://github.com/MEWPASCO/rainbowglow-avatars
* @website https://www.avariaxyz.win/
*/
/* Rainbow VC Avatars */
@import url('https://raw.githubusercontent.com/MEWPASCO/rainbowglow-avatars/main/rainbow.css');
/* === Collapse Icon Left (by sakgoyal) === */
.containerDefault__29444 > div {
padding-left: 0.5em;
}
.containerDefault__29444 > div > div {
display: flex;
justify-content: start !important;
flex-direction: row-reverse !important;
}
/* === Remove Profile Reactions (by LuSaffi) === */
.avatarPopover__2d0ab,
.statusPopover__2d0ab,
.activityPopover__2d0ab {
display: none;
}
/* === Unclamp User Bios (by myself) === */
.descriptionClamp_f5f93a:not(.headerText_faa96b .descriptionClamp_f5f93a) {
-webkit-line-clamp: unset;
max-height: 400px;
}
.viewFullBio_f5f93a {
display: none;
}
/* === Revert App-Tags to BOT (by hanyuko + tweak) === */
span[class*="botTag"]:not([class*="botTagAi"], [class*="botTagCozy"], [class*="botTagRemix"], [class*="botTagOP"]) span[class*="botText"] {
visibility: hidden;
position: relative;
}
span[class*="botTag"]:not([class*="botTagAi"], [class*="botTagCozy"], [class*="botTagRemix"], [class*="botTagOP"]) span[class*="botText"]::after {
content: "BOT";
visibility: visible;
position: absolute;
left: 0;
font-size: 0.625rem;
}
/* === Bot Forms (by nexpId) === */
form > div.focusLock__49fc1 > div.rootWithShadow__49fc1 {
width: var(--modal-width-medium);
}
.rootWithShadow__49fc1 .header__49fc1 {
padding: var(--modal-vertical-padding) var(--modal-horizontal-padding);
margin-bottom: var(--modal-vertical-padding);
border-bottom: 1px solid var(--border-normal);
}
.header__49fc1 .colorHeaderPrimary_c9946a {
text-align: center;
font-weight: var(--font-weight-semibold);
flex-grow: 1;
}
.header__49fc1 .closeButton_e858dd {
top: unset;
right: var(--modal-horizontal-padding);
margin: auto 0;
}
.closeButton_e858dd .contents__201d5 {
height: 24px;
}
.submissionWarning_e858dd {
display: none;
}
.formItem__1b11b .eyebrow_b717a1 {
margin-bottom: 4px;
}
.errorMessage_b717a1 {
color: var(--text-danger);
}
.input__0f084.error__0f084:focus {
color: var(--text-normal);
}
/* === GIF Favorites Cleanup (by MadelineMaid) === */
[class*="gifFavoriteButton_"] {
background-color: transparent;
}
[class*="result_"] [class*="favButton"] {
right: unset;
}
/* === Remove Chatbox Icons (by Sessh) === */
/* to change, select one of the "button[aria-label="Select emoji"]" areas and change the text that's inside those " " */
/*
Select Emoji - Emoji icon
Open sticker picker - Sticker icon
Open GIF picker - GIF icon
Send a gift - Gift icon
Apps - Controller icon
*/
.visual-refresh button[aria-label="Select emoji"],
button[aria-label="Open GIF picker"],
button[aria-label="Send a gift"],
button[aria-label="Apps"] {
display: none;
}
.visual-refresh .buttons__74017 {
align-items: center;
gap: 0.1px;
}
/* === Fullscreen emoji/sticker/gif modal === */
.layerContainer_da8173 .positionLayer__08434 {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
.positionLayer__08434 .drawerSizingWrapper__08434 {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
width: 90vw !important;
height: 90vh;
}
/**
* @name Unread msg and selected channel snippet
* @author Amnissya
* @description Random snippet on gibbu's support server that transforms the unread channel behaviour and current channel behaviour
*/
/*=============================================*/
/*unread msg*/
/*server*/
:where(.visual-refresh) .modeUnreadImportant__2ea32 .icon__2ea32, :where(.visual-refresh) .modeUnreadImportant__2ea32:hover .icon__2ea32 {
color: #cd664c!important;
}
.modeUnreadImportant__2ea32 .name__2ea32 {
color: #cd664c!important;
}
.unreadImportant__2ea32 {
display: none;
}
/*dms*/
:where(.visual-refresh) .highlighted__20a53 {
color: #cd664c;
}
.unreadPill__972a0 {
display: none;
}
/*=============================================*/
/*server select read*/
/*server*/
.container__2637a .wrapper__2ea32.modeSelected__2ea32 .name__2ea32, .container__2637a .wrapper__2ea32.modeConnected__2ea32 .name__2ea32 {
color: #89b482!important;
}
.modeSelected__2ea32 .link__2ea32, .modeSelected__2ea32:hover .link__2ea32 {
background:none;
}
.container__2637a .wrapper__2ea32.modeSelected__2ea32 .icon__2ea32, .container__2637a .wrapper__2ea32.modeConnected__2ea32 .icon__2ea32 {
color: #89b482!important;
}
/*dms*/
:where(.visual-refresh) .interactive__972a0:active, :where(.visual-refresh) .interactiveSelected__972a0 {
color: #89b482!important;
background: none;
}
Reference in a new issue Copy permalink