From 7c444f7e516a5297ea321dcf113de1a9a606513e Mon Sep 17 00:00:00 2001 From: moonmoon Date: Mon, 1 Dec 2025 13:20:01 +0100 Subject: [PATCH] Upload files to "AIO" --- AIO/moon-midnight_AIO.css | 2041 +++++++++++++++++++++++++++++++++++++ 1 file changed, 2041 insertions(+) create mode 100644 AIO/moon-midnight_AIO.css diff --git a/AIO/moon-midnight_AIO.css b/AIO/moon-midnight_AIO.css new file mode 100644 index 0000000..d178837 --- /dev/null +++ b/AIO/moon-midnight_AIO.css @@ -0,0 +1,2041 @@ +/** + * @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; +}