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