diff --git a/AIO/moon-midnight_AIO.css b/AIO/moon-midnight_AIO.css index d178837..5021333 100644 --- a/AIO/moon-midnight_AIO.css +++ b/AIO/moon-midnight_AIO.css @@ -1,2041 +1,2089 @@ -/** - * @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 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; + +}