diff --git a/Discord/Golden-Devil.theme.css b/Discord/Golden-Devil.theme.css new file mode 100644 index 0000000..3bd9fec --- /dev/null +++ b/Discord/Golden-Devil.theme.css @@ -0,0 +1,1180 @@ +/** + * @name Golden-Devil + * @description A Black and Golden Discord Theme, matching with the SputnikOS Gnome Theme + * @author Anthony + * @version 1.0.0 + * @website https://github.com/refact0r/midnight-discord + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ + +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ +@import url('https://fonts.googleapis.com/css2?family=Ubuntu: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'); + +/* customize things here */ +.theme-dark { + /* font, change to 'gg sans' for default discord font*/ + --font: 'Ubuntu'; + + /* top left corner text */ + --corner-text: 'Midnight'; + + /* color of status indicators and window controls */ + --online-indicator: var(--accent-2); /* change to #23a55a for default green */ + --dnd-indicator: hsl(340, 60%, 60%); /* change to #f13f43 for default red */ + --idle-indicator: hsl(50, 60%, 60%); /* change to #f0b232 for default yellow */ + --streaming-indicator: hsl(260, 60%, 60%); /* change to #593695 for default purple */ + + /* accent colors */ + --accent-1: hsl(190, 70%, 60%); /* links */ + --accent-2: hsl(190, 70%, 48%); /* general unread/mention 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 */ + --mention: hsla(190, 80%, 52%, 0.1); /* mentions & mention messages */ + --mention-hover: hsla(190, 80%, 52%, 0.05); /* mentions & mention messages when hovered */ + + /* text colors */ + --text-0: white; /* text on colored elements */ + --text-1: var(--text-2); /* other normally white text */ + --text-2: hsl(220, 25%, 70%); /* headings and important text */ + --text-3: hsl(220, 15%, 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(230, 20%, 40%, 0.1); /* channels and buttons when hovered */ + --active: hsla(220, 20%, 40%, 0.2); /* channels and buttons when clicked or selected */ + --message-hover: hsla(220, 0%, 0%, 0.1); /* messages when hovered */ + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + /* ALL ANIMATIONS CAN BE DISABLED WITH REDUCED MOTION IN DISCORD SETTINGS */ + --list-item-transition: 0.2s ease; /* channels/members/settings hover transition */ + --unread-bar-transition: 0.2s ease; /* unread bar moving into view transition */ + --moon-spin-transition: 0.4s ease; /* moon icon spin */ + --icon-spin-transition: 1s ease; /* round icon button spin (settings, emoji, etc.) */ + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; /* roundness of big panel outer corners */ + --roundness-l: 20px; /* popout panels */ + --roundness-m: 16px; /* smaller panels, images, embeds */ + --roundness-s: 12px; /* members, settings inputs */ + --roundness-xs: 10px; /* channels, buttons */ + --roundness-xxs: 8px; /* searchbar, small elements */ + + /* direct messages moon icon */ + /* change to block to show, none to hide */ + --discord-icon: none; /* discord icon */ + --moon-icon: block; /* moon icon */ + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/8/8d/Hammer_and_Sickle_with_Red_Star.svg'); /* custom icon url */ + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + /* (just set to none, they're too much work to configure) */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); /* login background artwork */ + --green-to-accent-3-filter: hue-rotate(56deg) saturate(1.43); /* add friend page explore icon */ + --blurple-to-accent-3-filter: hue-rotate(304deg) saturate(0.84) brightness(1.2); /* add friend page school icon */ +} + +/* change fonts (edit the variables above, not this part) */ +:root { + --font-primary: var(--font), 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + --font-display: var(--font), 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} + +/* reduced motion */ +:root.reduce-motion { + --list-item-transition: none; + --unread-bar-transition: none; + --moon-spin-transition: none; + --icon-spin-transition: none; +} + +/* modify colors */ +#app-mount .container_ee69e0 /* channel list */, +.privateChannels_f0963d /* dms list */, +#app-mount .container_b2ca13 /* user panel inner */, +.members_cbd271 /* member list inner */, +.member_a31c43 /* member list members */, +.searchResultsWrap_c2b47d /* search results */, +.searchHeader_b7c924 /* search results header */, +.chat_a7d72e.container_f3abf4 /* message requests */, +#app-mount .panels_a4d4d9 > div /* user panel children */, +.container_adcaac /* vc panel */, +.sidebarRegionScroller_c25c6d /* settings left */, +#app-mount .container_f1fd9c /* browse channels container */, +#app-mount .header_f1fd9c /* browse channels header */, +#app-mount .container_c2efea /* browse channels inner */, +.chat_a7d72e.background_e85cee /* server guide body */, +#app-mount .scrollerContainer_c6b11b /* channels and roles customize */, +.shop_e77fa3 /* shop */, +.wrapper_d880dc.minimum_d880dc /* private call */, +.container_effbe2, .container__33507 /* emoji/sticker and gif picker searchbars */, +#app-mount .uploadModal_f82cc7 /* upload modal */, +.uploadModal_f82cc7 .footer_f82cc7 /* upload modal footer */ { + background: var(--bg-4); +} +.userPanelOuter_c69a7b { + --background-secondary-alt: var(--bg-4) !important; +} +.mainCard_a6d69a /* forum post */, +.navRow_be9398[data-theme=dark] /* add new account bottom */ { + background: var(--bg-3); +} +.folderIconWrapper_bc7085[style="background-color: rgba(88, 101, 242, 0.4);"] /* default color closed folders */ { + background: var(--bg-3) !important; +} +.folder_bc7085.hover_bc7085 /* folder opened on hover */, +#app-mount .outer_c0f6a6.interactive_c0f6a6:hover, #app-mount .outer_c0f6a6.active_c0f6a6 /* friend activity cards on hover */ { + background: var(--bg-2); +} +#app-mount .searchAnswer_b0fa94, /* search filter answer */ +#app-mount .searchFilter_b0fa94 /* search filter */ { + background: var(--bg-1); +} +.newChannel_ecb303 /* new channel */ { + background: var(--bg-1) !important; +} +.chat_a7d72e /* chat + member list */, +.sidebar_a4d4d9 /* channel sidebar */, +.privateChannels_f0963d .scroller_c47fa9 /* dms list inner */, +#app-mount .innerHeader_f1fd9c:after /* channels and roles header shadow */, +.attachedBars_d0696b /* reply bar underneath */ { + background: none; +} +.selected_fd6364 .header_fd6364, .clickable_fd6364 .header_fd6364:hover /* server name hover */ { + background: var(--message-hover); +} +.message_d5deea.replying_d5deea.selected_d5deea, .mouse-mode.full-motion .message_d5deea.replying_d5deea:hover /* fix reply message hover */ { + background: var(--background-message-highlight-hover); +} +div.message_d5deea.replying_d5deea::before /* change reply message bar to neutral */ { + background: var(--text-2); +} +.activeButtonChild_a06035 /* send button */ { + color: var(--accent-2); +} +.container_b2ca13 /* user panel button strikethroughs */, +.numberBadge_df8943 /* unread number badge */, +.toolbar_fc4f04 /* toolbar button strikethroughs */ { + --status-danger: var(--accent-2); +} +.expandedFolderIconWrapper_bc7085 > svg[style="color: rgb(88, 101, 242);"] /* default color folder icons */ { + color: var(--accent-3) !important; +} +.divider_d5deea /* unread divider */, +.mention_c10249 /* NEW unread pill */, +.mentionsBar_eba0ba /* channel list new mention pill */ { + --status-danger: var(--accent-3); +} +.message_d5deea.mentioned_d5deea:before /* mention message left edge */, +.botTagOP_a9e77f /* OP tag */ { + background: var(--accent-3); +} +.container_cebd1c.checked_cebd1c /* settings checkbuttons */ { + background: var(--accent-3) !important; +} +.mention_c10249:active /* NEW unread pill when clicked */ { + background: var(--accent-4); +} +path[fill='rgba(35, 165, 90, 1)'] { + fill: var(--accent-3); +} +path[fill='var(--white-500)'] { + fill: var(--text-0) !important; +} +.numberBadge_df8943 /* dms number badge */, +.newMessagesBar_cf58b5 .barButtonBase_cf58b5 /* unread bar */, +.botTagRegular_a9e77f /* bot tag */, +.endCap_c2654d /* unread divider */, +.lookFilled_dd4f85.colorBrand_dd4f85 /* accent buttons */, +.lookFilled_dd4f85.colorBrand_dd4f85 .defaultColor__77578 /* accent buttons */, +.lookFilled_dd4f85.colorBrandNew__8872c /* accent buttons */, +.lookFilled_dd4f85.colorGreen_dd4f85 /* green buttons */, +.lookFilled_dd4f85.colorRed_dd4f85 /* red buttons */, +.lookFilled_dd4f85.colorYellow__818c3 /* yellow buttons */, +.bar_c10249 /* NEW unread pill */, +.wrapper_f90abb:hover .childWrapper_f90abb, /* default server icon text */ +.wrapper_f90abb.selected_ae80f7 .childWrapper_f90abb /* default server icon text */, +.colorDefault_d90b3d.focused_d90b3d /* menu option hover */, +.colorDefault_d90b3d.focused_d90b3d .caret_d90b3d /* popup menu hover caret */, +.colorDefault_d90b3d:active:not(.hideInteraction_d90b3d) /* menu option active */, +.colorDefault_d90b3d:active:not(.hideInteraction_d90b3d) .caret_d90b3d /* menu option active */, +.tabBar_c2739c .addFriend_c2739c.addFriend_c2739c.addFriend_c2739c /* add friend button */, +#app-mount .button__33db6 /* notice banner button */, +.interactive:hover /* mention hover */, +.uploadIcon_f2f431 /* profile upload image */, +.focused_e1268c .userMenuUsername_e1268c .userMenuText_e1268c /* account switcher account hover */, +.dots_ce0450 /* typing dots */, +.lookOutlined_dd4f85.colorWhite_dd4f85 /* server banner buttons */, +.header_dd5a33 /* server preview mode banner */, +.categoryItem_c72b37.selectedCategoryItem_c72b37, +.live_e17fae /* streaming live */, +#app-mount .activeButton_b48941 /* member page pagination button */ , +#app-mount .tooltipBrand_b6c360 /* member page filter tooltip */, +.button_adcaac.buttonColor_adcaac.buttonActive_adcaac /* active voice channel icons */, +.button_adcaac.buttonColor_adcaac.buttonActive_adcaac:hover /* active voice channel icons */, +.vcd-screen-picker-radio[data-checked="true"] .defaultColor_a595eb /* vencord stream resolution picker buttons when active */, +.icon_c07d45 /* streaming activity type icon */, +.theme-dark .tooltipGreen_b6c360, .theme-light .tooltipGreen_b6c360 /* tooltip text like vc latency */ { + color: var(--text-0); +} +#app-mount .button__33db6, .theme-light .button__33db6 /* notice banner button */, +.lookOutlined_dd4f85.colorWhite_dd4f85 /* server banner buttons */ { + border-color: var(--text-0); +} +#app-mount .button__33db6:hover { + border-color: var(--text-0); + background-color: var(--text-0); +} +.container_cebd1c /* settings checkbutton background */ { + background: var(--bg-1) !important; +} +.container_cebd1c.checked_cebd1c > .slider_cebd1c > rect /* settings checkbutton circle */, +.userMenuItem_e1268c path[fill="var(--white-500)"] /* account switcher account hover */, +.colorDefault_d90b3d.focused_d90b3d path { + fill: var(--text-0); +} +.closeIcon__967e7 path /* alert banner close icon */ { + fill: currentColor; +} +.container_cebd1c > .slider_cebd1c > rect /* settings checkbutton circle */ { + fill: var(--text-1); +} +.menu_ad5fac .menuItemFocused_ad5fac /* account switch button hover */ { + color: var(--text-3); +} +.menu_ad5fac .menuItemFocused_ad5fac path /* account switch button hover */ { + fill: var(--text-3); +} +.mini_c7a159 .grabber_c7a159 /* spotify bar handle */ { + margin-top: 4px; + border-width: 1px; +} +.grabber_c7a159 /* settings slider handle */ { + border-width: 0; +} +.button_adcaac.buttonColor_adcaac /* fix vc buttons */ { + color: var(--text-4); +} +.button_adcaac.buttonColor_adcaac:hover /* fix vc buttons hover */ { + background-color: var(--hover); + color: var(--text-3); +} +.iconBadge_c96c45.isCurrentUserConnected_c96c45 /* change server vc badge to neutral */ { + background-color: var(--bg-1); + color: var(--text-1); +} +.bannerVisible_fd6364 .headerContent_fd6364 /* server name over banner image */, +#app-mount .categoryText_af1167 /* gif chooser category names */, +.searchTitle_a3a4ce { + color: white; +} +.gifIcon_f2f431 /* profile upload image gif chooser */ { + background-color: white; +} +.controlIcon_ef18ee /* fix video maximize button */ { + color: var(--text-1); + opacity: 0.6; +} +.controlIcon_ef18ee:hover /* fix video maximize button hover */ { + opacity: 1; +} +::selection { + background: var(--accent-4); + color: var(--text-0); +} +.lookFilled_f6639d.select_f6639d { + border: none; +} +.checkbox_f6cde8 /* channel checkboxes */ { + border-color: var(--text-4) !important; +} +.newBadge_a57509 /* fix forum new badge */ { + color: var(--accent-2); + line-height: 16px; +} + +/* remove shadows */ +#app-mount .header_b56bbc /* gif picker */ { + box-shadow: none; +} +#app-mount .textContentFooter_a57509 /* forum post image fade */ { + background: none; +} + +/* change online indicator color */ +rect[fill='#23a55a'], +svg[fill='#23a55a'] { + fill: var(--online-indicator) !important; +} +.status_c7d26b[style='background-color: rgb(35, 165, 90);'] { + background-color: var(--online-indicator) !important; +} +rect[fill='#f0b232'], +svg[fill='#f0b232'] { + fill: var(--idle-indicator); +} +.status_c7d26b[style='background-color: rgb(240, 178, 50);'] { + background-color: var(--idle-indicator) !important; +} +rect[fill='#f23f43'], +svg[fill='#f23f43'] { + fill: var(--dnd-indicator); +} +.status_c7d26b[style='background-color: rgb(242, 63, 67);'] { + background-color: var(--dnd-indicator) !important; +} +rect[fill='#593695'], +svg[fill='#593695'] { + fill: var(--streaming-indicator); +} +.status_c7d26b[style='background-color: rgb(89, 54, 149);'] { + background-color: var(--streaming-indicator) !important; +} + +/* color fix filters */ +.container_aef5fd:last-child .icon_aef5fd /* explore discoverable servers icon color */ { + background-color: #3ba55c; + filter: var(--green-to-accent-3-filter); +} +.container_aef5fd:first-child .icon_aef5fd /* explore discoverable servers icon color */ { + filter: var(--blurple-to-accent-3-filter); +} +.artwork_bdd070 /* filter login image */ { + filter: var(--login-bg-filter); +} + +/* fix weird message bar padding */ +.clipContainer_b11c5e { + padding-top: 0; + margin-top: 0; +} + +/* separate header bar */ +.title_a7d72e.themed_fc4f04 /* remove bg */ { + background: none; +} +.searchResultsWrap_c2b47d /* allow overflow */ { + overflow: visible; +} +.chatContent_a7d72e::before /* main chat */, +.membersWrap_cbd271::before /* member list */, +.searchResultsWrap_c2b47d::before /* search results */, +.userPanelOuter_c69a7b::before /* dm profile */, +.container_a6d69a::before /* forums */ { + content: ''; + position: absolute; + margin-top: -48px; + background: var(--background-primary); + width: 100%; + height: 48px; + border-radius: var(--roundness-xl) var(--roundness-xl) 0 0; +} +.wrapper_d880dc.minimum_d880dc ~ .content_a7d72e .container__93316::before /* remove when in private call */ { + display: none; +} +.membersWrap_cbd271 /* fix members list height when not scroll */ { + height: 100%; +} + +/* rearrange toolbar */ +a[href="https://support.discord.com"] /* hide help */ +{ + display: none; +} +.search_ff5f90 { + order: 1; + margin: 0 4px 0 12px; +} +.chat_a7d72e:has(.searchResultsWrap_c2b47d) .searchBar_a46bef { + width: 394px !important; + margin-left: calc(var(--spacing) + 8px); +} +.chat_a7d72e:has(.userPanelOuter_c69a7b) .searchBar_a46bef { + width: 316px !important; + margin-left: calc(var(--spacing) + 8px); +} +.chat_a7d72e:has(.membersWrap_cbd271) .searchBar_a46bef { + width: 216px !important; + margin-left: calc(var(--spacing) + 8px); +} + +/* add spacing */ +.base_a4d4d9 /* outside edges */ { + margin: 0 var(--spacing) var(--spacing) 0; +} +.sidebar_a4d4d9 /* channel list and user panel */, +.content_a7d72e /* between chat and member list */ { + gap: var(--spacing); +} +.sidebar_a4d4d9 /* channel list and chat */ { + margin-right: var(--spacing); +} +.sidebar_a4d4d9.hidden_a4d4d9 { + margin-right: 0; +} +.resizeHandle_d1c246 /* pretend to be a margin */ { + width: var(--spacing); +} +.wrapper_d880dc.fullScreen_d880dc .callContainer_d880dc /* fullscreen vc */ { + margin-top: var(--spacing); +} +.notice_be03aa /* banner notice */, +.wrapper_d880dc.minimum_d880dc /* private call */ { + margin-bottom: var(--spacing); +} +/* fix padding */ +#vc-spotify-player /* vencord spotify */, +.container_adcaac /* vc panel */, +.panel_bf1a22 /* stream panel */ { + padding: 10px; +} + +/* add rounded corners */ +.container_ee69e0 /* channel list */, +.panels_a4d4d9 /* user panels */, +.privateChannels_f0963d /* dms list */, +.container_c2739c /* friends page */, +.applicationStore_cecc86 /* nitro page */, +#app-mount .container_f3abf4 /* message requests */, +.shop_e77fa3 /* discord shop */, +.container_d576e9 /* family center */, +.container_d1c246 /* message request */, +#app-mount .callContainer_d880dc /* vc */, +.chat_a7d72e /* general chat container (for browse channels page */, +.animatedContainer_fd6364 /* server image card */, +.notice_be03aa /* banner notice */, +.wrapper_d880dc.minimum_d880dc, /* private call */ +.wrapper_d880dc.minimum_d880dc ~ .content_a7d72e /* chat under private call */, +.main_d8215a /* server onboarding */ { + border-radius: var(--roundness-xl); + overflow: hidden; +} +.container__93316 /* main chat */, +.chatContent_a7d72e /* main chat inner */, +.container_cbd271 /* members list */, +.members_cbd271 /* members list inner */, +.searchResultsWrap_c2b47d /* search results */, +.profilePanel_b433b4 /* profile panel outer */, +.userPanelOuter_c69a7b /* profile panel inner */, +.userPanelInner_c69a7b /* profile panel inner inner */, +.userPanelInner_c69a7b::before /* profile panel inner inner filter */, +.container_a6d69a /* forums */ { + border-radius: 0 0 var(--roundness-xl) var(--roundness-xl); +} + +/* more rounded corners */ +.messagesPopoutWrap_ac90a2 /* inbox, pinned messages popout */, +.container_e664f3 /* thread popout */, +.menu_d90b3d .item_d90b3dd /* server option popout */, +.userPopoutOuter_c69a7b /* user profile popout */, +.root_b9fccc /* user profile modal */, +.contentWrapper_af5dbb /* emoji, sticker, gif pickers */, +.footer_f9a4c9 /* edit modal footer */, +.layerContainer_cd0de5 .root_f9a4c9 /* upload modal */, +.uploadModal_f82cc7 .footer_f82cc7 /* upload modal footer */ { + border-radius: var(--roundness-l); +} +.roundedBanner_c3e427 /* user profile popout top */, +.banner_ab876d /* user profile top when edit */ { + border-radius: calc(var(--roundness-l) - 4px) calc(var(--roundness-l) - 4px) 0 0; +} +.userPopoutInner_c69a7b:before /* user profile popout bottom */, +.userProfileModalInner_c69a7b:before /* user profile modal bottom */ { + border-radius: calc(var(--roundness-l) - 4px); +} +.overlayBackground_c69a7b /* user profile inner */ { + border-radius: var(--roundness-s); +} +.menu_d90b3d /* general popouts */, +.embed_b0068a/* embeds */, +.mediaAttachmentsContainer__242e2 /* image container */, +.oneByOneGridSingle_cda674 /* image container single */, +.imageContainer_cf58b5 .imageWrapper__178ee /* gif wrapper */, +.markup_f8f345 code /* code block */, +.itemCard_f02fcf /* friend activity */, +.peopleListItem_d51464:hover /* online list friends */, +.withTagAsButton_b2ca13:hover, .withTagless_b2ca13:hover /* user panel username */, +.messageGroupWrapper_ac90a2 /* pinned messages */, +.accountProfileCard_b69b77 /* my account settings profile background */ { + border-radius: var(--roundness-m); +} +.scrollableContainer_d0696b /* message bar */, +.channelTextArea_a7d72e /* message bar underneath */, +.select_f6639d /* bot dropdown select */, +.layout_e9f61e /* members */, +.interactive_f5eb4b /* dms */, +.container_c15230 /* thread link */, +.input_f8bc55 /* settings inputs */, +.item_eb92a8 /* settings radiobutton bars */, +.item_eb92a8 .radioBar_eb92a8 /* settings radiobutton bars */ { + border-radius: var(--roundness-s); +} +.select_f6639d.open_f6639d /* vencord plugin show all */ { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.popout_f6639d /* vencord plugin show all */ { + border-radius: 0 0 var(--roundness-s) var(--roundness-s); +} +.banner_d29eee /* community server tutorial thing on message bar */ { + border-radius: var(--roundness-s) var(--roundness-s) 0 0; +} +.scrollableContainer_d0696b.hasConnectedBar_d0696b /* fix message bar with reply bar */ { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.replyBar_b11c5e { + border-radius: var(--roundness-s) var(--roundness-s) 0 0; +} +.link_d8bfb3 /* channels */, +.content_cdc675 /* member connected to vc */, +.side_a0 .item_a0 /* settings tabs */, +button.button_dd4f85 /* small buttons */, +.container__33507 /* friend searchbar */, +.container_effbe2, /* sticker/emoji picker searchbar */ +.item_d90b3d /* general popout buttons */, +.icon_c07d45 /* streaming icon */, +#vc-spotify-album-image, +.background_ae3c77 /* settings nitro tab selected */, +.hoverButtonGroup_e5c1dc /* video download button */, +.wrapper_ef319f /* message hover menu */, +.previewChannelRowContent_c5d9bc { + border-radius: var(--roundness-xs); +} +.hoverButtonGroup_e5c1dc /* reposition video download button */ { + top: 6px; + right: 6px; +} +.wrapper_a7c28c /* mentions */, +.searchBar_a46bef /* search bar */, +.searchBar_f0963d .searchBarComponent_f0963d /* find conversation search bar */, +.topPill_a0 .item_a0 /* friend online/categories */ { + border-radius: var(--roundness-xxs); +} +#app-mount .centerButton_ef18ee /* fix vc buttons */ { + border-radius: 50%; +} + +/* separate guilds panel background */ +.guilds_a4d4d9 { + background: var(--bg-4); + border-radius: var(--roundness-xl); + margin: 0 0 var(--spacing) var(--spacing); +} +.guilds_a4d4d9.hidden_fea3ef { + margin: 0; +} +#app-mount .scroller_fea3ef { + padding: 12px 0; +} +.base_a4d4d9 { + margin-left: var(--spacing); +} +.guilds_a4d4d9::after /* add bottom scroll shadow */, +.membersWrap_cbd271::after { + content: ''; + position: absolute; + background: linear-gradient(transparent 85%, var(--bg-4) 100%); + bottom: 0; + left: 0; + right: 0; + height: 100px; + pointer-events: none; + border-radius: 0 0 var(--roundness-xl) var(--roundness-xl); +} +.guilds_a4d4d9::before /* add top scroll shadow */ { + content: ''; + position: absolute; + background: linear-gradient(var(--bg-4) 0%, transparent 15%); + top: 0; + left: 0; + right: 0; + height: 100px; + pointer-events: none; + z-index: 1; +} +.childWrapper_f90abb { + background: var(--bg-3); +} +.container_a4d4d9 > [style$='display: flex;'] > .guilds_a4d4d9 { + margin: 0; +} +.container_a4d4d9 > [style$='display: flex;'] { + margin: 0 0 var(--spacing) var(--spacing); +} +/* UNCOMMENT IF YOU REMOVE THE ABOVE SECTION "separate guilds panel background" +.expandedFolderBackground_bc7085, +.folder_bc7085, +.folderIconWrapper_bc7085 { + background-color: var(--bg-4) !important; +} */ + +/* extra top margin for macos and custom clients */ +.container_a4d4d9 { + margin-top: var(--spacing); +} +.platform-win .container_a4d4d9 { + margin-top: 0; +} +/* UNCOMMENT if you want to make panels evenly sized on macos +.platform-osx .wrapper_fea3ef { + margin-top: 0; +} +.platform-osx .container_a4d4d9 { + margin-top: 32px; +} */ + +/* top corner title */ +[class^='wordmarkWindows'] { + padding: 4px var(--spacing); +} +[class^='wordmarkWindows'] > svg { + display: none; +} +[class^='wordmarkWindows']::after { + content: var(--corner-text); + display: block; + position: relative; + height: 16px; + line-height: 16px; + font-family: var(--font); + font-size: 13px; + font-weight: 900; + color: var(--text-5); + transform: scaleX(1.2); + margin-left: 6px; +} + +/* top bar height */ +[class^='typeWindows'] { + height: calc(var(--spacing) + 12px); + margin: 0; +} + +/* window controls */ +[class^='winButton'] > svg { + display: none; +} +[class^='winButton'] { + background: none !important; + top: 0; + width: calc(24px); + height: calc(var(--spacing) + 12px); + margin: 0; +} +[class^='winButtonClose'] { + padding-right: calc(var(--spacing) - 5px); +} +[class^='winButton']::after { + content: ''; + height: 12px; + width: 12px; + border-radius: 12px; +} +[class^='winButton']:hover::after { + filter: brightness(0.8); +} +[class^='winButton']:active::after { + transform: scale(0.9); +} +[class^='winButtonClose']::after { + background-color: var(--dnd-indicator) !important; +} +[class^='winButtonMinMax']:nth-child(3)::after { + background-color: var(--online-indicator) !important; +} +[class^='winButtonMinMax']:nth-child(4)::after { + background-color: var(--idle-indicator) !important; +} + +/* custom dm button moon icon */ +.childWrapper_f90abb > svg:not(.favoriteIcon_dcc7a4) { + display: var(--discord-icon); +} +.childWrapper_f90abb:has(> svg:not(.favoriteIcon_dcc7a4))::before { + content: ''; + display: var(--moon-icon); + position: absolute; + width: 65%; + height: 65%; + background: var(--text-4); + -webkit-mask-image: var(--moon-icon-url); + -webkit-mask-size: var(--moon-icon-size); + -webkit-mask-repeat: none; +} +.wrapper_f90abb:hover .childWrapper_f90abb::before { + /* prettier-ignore */ + transition: background-color 0.15s ease-out, transform var(--moon-spin-transition); + transform: rotate(0deg) scale(1); +} +.wrapper_f90abb:hover > .childWrapper_f90abb::before, +.wrapper_f90abb.selected_f90abb > .childWrapper_f90abb::before { + background: var(--text-0); + transform: rotate(-360deg) scale(0.8); +} +.lowerBadge_c5f96a::before { + content: ''; + display: block; + position: absolute; + width: 24px; + height: 24px; + transform: translate(-4px, -4px); + z-index: -1; + background: var(--bg-3); + border-radius: 50%; +} +/* custom dm button background instead of icon */ +/* .childWrapper_f90abb:has(> svg:not(.favoriteIcon_dcc7a4)) { + background: url('https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png'); + background-color: transparent !important; + background-size: cover; +} */ + +/* vencord spotify player support */ +#vc-spotify-player { + --vc-spotify-green: var(--accent-1); +} + +/* improve unread divider */ +.divider_c2654d { + border-width: 4px; + border-radius: 4px; +} +.divider_c2654d .content_c2654d { + margin-top: -3px; +} +.endCap_c2654d { + margin-top: -1px; + padding-top: 2px; +} +/* improve highlight message left edge */ +.message_d5deea.mentioned_d5deea::before, +.replying_d5deea::before { + width: 4px; + border-radius: 4px; +} +/* modify embeds */ +.embedFull_b0068a { + border: 4px solid var(--bg-2); + border-top-color: transparent !important; + border-bottom-color: transparent !important; + border-right-color: transparent !important; +} + +/* server selected marker */ +.item_c4cd66 { + width: 4px; + border-radius: 4px; + margin-left: 4px; +} + +/* horizontal server list fix */ +#app-mount .app_bd26cc .base_a4d4d9 { + top: calc(var(--server-container) + var(--spacing)) !important; +} + +/* list hover animations */ +.wrapper_d8bfb3 .link_d8bfb3 /* channels */, +.container_e9f61e /* members */, +.channel_c91bad /* dms */, +.side_a0 .item_a0 /* settings */ { + transition: margin-left var(--list-item-transition); +} +.wrapper_d8bfb3:hover .link_d8bfb3, +.side_a0 .item_a0:hover { + margin-left: 10px; +} +.container_e9f61e:hover, +.channel_c91bad:hover { + margin-left: 18px; +} + +/* spin hover animations */ +button.button_f67531 /* make user panel buttons round */ { + border-radius: 50%; +} +.attachButton_f298d4 .attachButtonInner_f298d4 /* upload button */, +.emojiButton_d0696b .contents_dd4f85 /* emoji button */, +.closeButton_df5532 /* settings exit button */, +.contents_dd4f85 > .closeIcon_f9a4c9 /* modal close */ { + transition: transform var(--icon-spin-transition); +} +.button_f67531:last-child:hover .contents_dd4f85, +.attachButton_f298d4:hover .attachButtonInner_f298d4, +.emojiButton_d0696b:hover .contents_dd4f85, +.closeButton_df5532:hover, +.contents_dd4f85:hover > .closeIcon_f9a4c9 { + transform: rotate(360deg); +} + +/* hide unread bar on hover */ +.messagesWrapper_e2e187 { + overflow: hidden; +} +.newMessagesBar_cf58b5 { + top: -48px; + height: 72px; + transition: top var(--unread-bar-transition); + background: none; + box-shadow: none; + border-radius: 0; +} +.newMessagesBar_cf58b5::before { + content: ''; + background: var(--accent-3); + box-shadow: var(--elevation-low); + width: 100%; + position: absolute; + height: 32px; + border-radius: var(--roundness-s); +} +.newMessagesBar_cf58b5:hover { + top: -12px; +} +.top_eba0ba > .containerPadding_eba0ba { + padding: 16px; + margin-top: -40px; + transition: margin-top var(--unread-bar-transition); +} +.top_eba0ba:hover > .containerPadding_eba0ba:hover { + margin-top: -12px; +} +.bottom_eba0ba > .containerPadding_eba0ba { + padding: 16px; + margin-bottom: -40px; + transition: margin-bottom var(--unread-bar-transition); +} +.bottom_eba0ba > .containerPadding_eba0ba:hover { + margin-bottom: -12px; +} + +.theme-light { + --text-link: var(--accent-5); +} +html.theme-light, +.theme-dark { + --activity-card-background: var(--bg-3); + --android-navigation-bar-background: var(--primary-830); + --android-navigation-scrim-background: hsl(var(--primary-830-hsl) / 0.5); + --android-ripple: hsl(var(--white-500-hsl) / 0.07); + --background-accent: var(--bg-2); + --background-floating: var(--bg-3); + --background-mentioned: var(--mention); + --background-mentioned-hover: var(--mention-hover); + --background-message-automod: hsl(var(--red-400-hsl) / 0.05); + --background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1); + --background-message-highlight: var(--active); + --background-message-highlight-hover: var(--hover); + --background-message-hover: var(--message-hover); + --background-mobile-primary: var(--bg-4); + --background-mobile-secondary: var(--primary-630); + --background-modifier-accent: var(--hover); + --background-modifier-accent-2: red; + --background-modifier-active: var(--active); + --background-modifier-hover: var(--hover); + --background-modifier-selected: var(--active); + --background-nested-floating: var(--primary-630); + --background-primary: var(--bg-4); + --background-secondary: var(--bg-3); + --background-secondary-alt: var(--bg-3); + --background-tertiary: var(--bg-3); + --bg-backdrop: hsl(var(--black-500-hsl) / 0.7); + --bg-backdrop-no-opacity: var(--black-500); + --bg-base-primary: var(--primary-600); + --bg-base-secondary: var(--primary-630); + --bg-base-tertiary: var(--primary-660); + --bg-mod-faint: var(--bg-4); + --bg-mod-strong: hsl(var(--primary-500-hsl) / 0.54); + --bg-mod-subtle: hsl(var(--primary-500-hsl) / 0.48); + --bg-surface-overlay: var(--primary-800); + --bg-surface-overlay-tmp: var(--primary-800); + --bg-surface-raised: var(--primary-600); + --black: var(--black-500); + --blur-fallback: hsl(var(--primary-700-hsl) / 0.96); + --blur-fallback-pressed: hsl(var(--primary-730-hsl) / 0.96); + --border-faint: hsl(var(--white-500-hsl) / 0.03); + --border-strong: hsl(var(--white-500-hsl) / 0.16); + --border-subtle: hsl(var(--white-500-hsl) / 0.08); + --bug-reporter-modal-submitting-background: hsl(var(--primary-800-hsl) / 0.6); + --button-creator-revenue-background: var(--teal-430); + --button-danger-background: var(--red-430); + --button-danger-background-active: var(--red-530); + --button-danger-background-disabled: var(--red-430); + --button-danger-background-hover: var(--red-500); + --button-outline-brand-background: hsl(var(--white-500-hsl) / 0); + --button-outline-brand-background-active: var(--brand-560); + --button-outline-brand-background-hover: var(--brand-500); + --button-outline-brand-border: var(--brand-500); + --button-outline-brand-border-active: var(--brand-560); + --button-outline-brand-border-hover: var(--brand-500); + --button-outline-brand-text: var(--white-500); + --button-outline-brand-text-active: var(--white-500); + --button-outline-brand-text-hover: var(--white-500); + --button-outline-danger-background: hsl(var(--white-500-hsl) / 0); + --button-outline-danger-background-active: var(--red-460); + --button-outline-danger-background-hover: var(--red-430); + --button-outline-danger-border: var(--red-400); + --button-outline-danger-border-active: var(--red-430); + --button-outline-danger-border-hover: var(--red-430); + --button-outline-danger-text: var(--white-500); + --button-outline-danger-text-active: var(--white-500); + --button-outline-danger-text-hover: var(--white-500); + --button-outline-positive-background: hsl(var(--white-500-hsl) / 0); + --button-outline-positive-background-active: var(--green-530); + --button-outline-positive-background-hover: var(--green-430); + --button-outline-positive-border: var(--green-360); + --button-outline-positive-border-active: var(--green-530); + --button-outline-positive-border-hover: var(--green-430); + --button-outline-positive-text: var(--white-500); + --button-outline-positive-text-active: var(--white-500); + --button-outline-positive-text-hover: var(--white-500); + --button-outline-primary-background: hsl(var(--white-500-hsl) / 0); + --button-outline-primary-background-active: var(--primary-430); + --button-outline-primary-background-hover: var(--primary-500); + --button-outline-primary-border: var(--primary-500); + --button-outline-primary-border-active: var(--primary-430); + --button-outline-primary-border-hover: var(--primary-500); + --button-outline-primary-text: var(--white-500); + --button-outline-primary-text-active: var(--white-500); + --button-outline-primary-text-hover: var(--white-500); + --button-positive-background: var(--green-430); + --button-positive-background-active: var(--green-530); + --button-positive-background-disabled: var(--green-430); + --button-positive-background-hover: var(--green-500); + --button-secondary-background: var(--bg-2); + --button-secondary-background-active: var(--text-5); + --button-secondary-background-disabled: var(--bg-2); + --button-secondary-background-hover: var(--bg-1); + --card-gradient-bg: hsl(var(--black-500-hsl) / 0.4); + --card-gradient-pressed-bg: hsl(var(--black-500-hsl) / 0.5); + --card-primary-bg: var(--primary-560); + --card-primary-pressed-bg: var(--primary-645); + --card-secondary-bg: var(--bg-3); + --card-secondary-pressed-bg: var(--primary-645); + --channel-icon: var(--text-4); + --channel-text-area-placeholder: var(--text-5); + --channels-default: var(--text-4); + --channeltextarea-background: var(--bg-3); + --chat-background: var(--primary-600); + --chat-border: var(--primary-700); + --chat-input-container-background: var(--primary-600); + --chat-swipe-to-reply-background: var(--primary-660); + --control-brand-foreground: var(--accent-2); + --control-brand-foreground-new: var(--brand-360); + --creator-revenue-icon-gradient-end: var(--teal-430); + --creator-revenue-icon-gradient-start: var(--teal-360); + --creator-revenue-info-box-background: hsl(var(--teal-430-hsl) / 0.1); + --creator-revenue-info-box-border: var(--teal-400); + --creator-revenue-locked-channel-icon: var(--teal-345); + --creator-revenue-progress-bar: var(--teal-400); + --deprecated-card-bg: var(--bg-3); + --deprecated-card-editable-bg: hsl(var(--primary-700-hsl) / 0.3); + --deprecated-quickswitcher-input-background: var(--primary-400); + --deprecated-quickswitcher-input-placeholder: hsl(var(--white-500-hsl) / 0.3); + --deprecated-store-bg: var(--primary-600); + --deprecated-text-input-bg: var(--bg-3); + --deprecated-text-input-border: hsl(var(--black-500-hsl) / 0.3); + --deprecated-text-input-border-disabled: var(--primary-700); + --deprecated-text-input-border-hover: var(--primary-900); + --deprecated-text-input-prefix: var(--primary-200); + --display-banner-overflow-background: hsl(var(--primary-700-hsl) / 0.5); + --divider-strong: hsl(var(--white-500-hsl) / 0.16); + --divider-subtle: hsl(var(--white-500-hsl) / 0.08); + --focus-primary: var(--blue-345); + --forum-post-extra-media-count-container-background: hsl(var(--primary-660-hsl) / 0.8); + --forum-post-tag-background: hsl(var(--primary-660-hsl) / 0.9); + --guild-notifications-bottom-sheet-pill-background: var(--primary-700); + --header-muted: var(--text-4); + --header-primary: var(--text-2); + --header-secondary: var(--text-4); + --home-background: var(--bg-4); + --home-card-resting-border: hsl(var(--transparent-hsl) / 0); + --icon-muted: var(--primary-400); + --icon-primary: var(--primary-130); + --icon-secondary: var(--primary-330); + --info-box-background: hsl(var(--blue-345-hsl) / 0.1); + --info-danger-background: hsl(var(--red-400-hsl) / 0.1); + --info-danger-foreground: var(--red-400); + --info-danger-text: var(--white-500); + --info-help-background: hsl(var(--blue-345-hsl) / 0.1); + --info-help-foreground: var(--blue-345); + --info-help-text: var(--white-500); + --info-positive-background: hsl(var(--green-360-hsl) / 0.1); + --info-positive-foreground: var(--green-360); + --info-positive-text: var(--white-500); + --info-warning-background: hsl(var(--yellow-300-hsl) / 0.1); + --info-warning-foreground: var(--yellow-300); + --info-warning-text: var(--white-500); + --input-background: var(--bg-3); + --input-placeholder-text: var(--text-5); + --interactive-active: var(--text-3); + --interactive-hover: var(--text-3); + --interactive-muted: var(--text-5); + --interactive-normal: var(--text-4); + --legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5); + --legacy-android-blur-overlay-ultra-thin: hsl(var(--black-500-hsl) / 0.025); + --legacy-blur-fallback-default: hsl(var(--primary-660-hsl) / 0.975); + --legacy-blur-fallback-ultra-thin: hsl(var(--black-500-hsl) / 0.95); + --live-stage-tile-border: hsl(var(--primary-500-hsl) / 0.6); + --logo-primary: var(--white-500); + --mention-background: var(--mention); + --mention-foreground: var(--accent-1); + --modal-background: var(--bg-4); + --modal-footer-background: var(--bg-4); + --navigator-header-tint: var(--white-500); + --polls-image-normal-border: hsl(var(--black-430-hsl) / 0.9); + --polls-victor-border: var(--yellow-300); + --polls-victor-fill: var(--mention); + --polls-victor-label: var(--primary-600); + --polls-voted-border: var(--green-330); + --polls-voted-fill: var(--mention); + --polls-voted-label: var(--primary-600); + --profile-gradient-card-background: hsl(var(--black-500-hsl) / 0.7); + --profile-gradient-message-input-border: hsl(var(--primary-500-hsl) / 0.48); + --profile-gradient-note-background: hsl(var(--black-500-hsl) / 0.3); + --profile-gradient-overlay: hsl(var(--black-500-hsl) / 0.6); + --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-500-hsl) / 0.8); + --profile-gradient-profile-body-background-hover: hsl(var(--white-500-hsl) / 0.16); + --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl) / 0.5); + --profile-gradient-role-pill-border: hsl(var(--white-500-hsl) / 0.2); + --profile-gradient-section-box: hsl(var(--black-500-hsl) / 0.45); + --redesign-activity-card-background: var(--primary-560); + --redesign-activity-card-background-pressed: var(--primary-630); + --redesign-activity-card-badge-icon: var(--primary-360); + --redesign-activity-card-border: hsl(var(--white-500-hsl) / 0.02); + --redesign-activity-card-overflow-background: var(--primary-630); + --redesign-button-danger-background: var(--red-430); + --redesign-button-danger-pressed-background: var(--red-460); + --redesign-button-danger-text: var(--white-500); + --redesign-button-overlay-alpha-background: hsl(var(--black-500-hsl) / 0.54); + --redesign-button-overlay-alpha-pressed-background: hsl(var(--black-500-hsl) / 0.64); + --redesign-button-overlay-alpha-text: var(--white-500); + --redesign-button-overlay-background: var(--white-500); + --redesign-button-overlay-pressed-background: var(--primary-230); + --redesign-button-overlay-text: var(--primary-860); + --redesign-button-positive-background: var(--green-430); + --redesign-button-positive-pressed-background: var(--green-460); + --redesign-button-positive-text: var(--white-500); + --redesign-button-primary-alt-background: hsl(var(--brand-500-hsl) / 0); + --redesign-button-primary-alt-border: var(--brand-360); + --redesign-button-primary-alt-on-blurple-background: hsl(var(--brand-530-hsl) / 0); + --redesign-button-primary-alt-on-blurple-border: var(--white-500); + --redesign-button-primary-alt-on-blurple-pressed-background: var(--brand-530); + --redesign-button-primary-alt-on-blurple-pressed-border: var(--brand-360); + --redesign-button-primary-alt-on-blurple-text: var(--white-500); + --redesign-button-primary-alt-pressed-background: hsl(var(--brand-700-hsl) / 0.16); + --redesign-button-primary-alt-pressed-border: hsl(var(--brand-400-hsl) / 0.5); + --redesign-button-primary-alt-pressed-text: var(--brand-360); + --redesign-button-primary-alt-text: var(--brand-360); + --redesign-button-primary-background: var(--brand-500); + --redesign-button-primary-on-blurple-background: var(--white-500); + --redesign-button-primary-on-blurple-pressed-background: var(--brand-200); + --redesign-button-primary-on-blurple-pressed-text: var(--brand-530); + --redesign-button-primary-on-blurple-text: var(--brand-500); + --redesign-button-primary-pressed-background: var(--brand-560); + --redesign-button-primary-text: var(--white-500); + --redesign-button-secondary-alt-background: var(--primary-660); + --redesign-button-secondary-alt-pressed-background: var(--primary-560); + --redesign-button-secondary-alt-pressed-text: var(--primary-330); + --redesign-button-secondary-alt-text: var(--primary-230); + --redesign-button-secondary-background: var(--primary-460); + --redesign-button-secondary-border: hsl(var(--white-500-hsl) / 0.08); + --redesign-button-secondary-pressed-background: var(--primary-500); + --redesign-button-secondary-pressed-border: hsl(var(--transparent-hsl) / 0); + --redesign-button-secondary-text: var(--primary-230); + --redesign-channel-category-name-text: var(--primary-330); + --redesign-channel-message-preview-text: var(--primary-360); + --redesign-channel-name-muted-text: var(--primary-360); + --redesign-channel-name-text: var(--primary-130); + --redesign-chat-input-background: var(--primary-700); + --redesign-input-control-active-bg: var(--primary-645); + --redesign-input-control-selected: var(--brand-500); + --redesign-only-background-active: var(--primary-530); + --redesign-only-background-default: var(--primary-600); + --redesign-only-background-overlay: var(--primary-645); + --redesign-only-background-raised: var(--primary-630); + --redesign-only-background-sunken: var(--primary-660); + --scrollbar-auto-scrollbar-color-thumb: var(--primary-730); + --scrollbar-auto-scrollbar-color-track: var(--primary-630); + --scrollbar-auto-thumb: var(--bg-3); + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--bg-3); + --scrollbar-thin-track: transparent; + --spoiler-hidden-background: var(--primary-700); + --spoiler-revealed-background: var(--primary-660); + --status-danger: var(--red-400); + --status-danger-background: var(--red-400); + --status-danger-text: var(--text-0); + --status-dnd: var(--red-400); + --status-idle: var(--yellow-300); + --status-offline: var(--primary-360); + --status-online: var(--green-360); + --status-positive: var(--green-360); + --status-positive-background: var(--green-430); + --status-positive-text: var(--text-0); + --status-speaking: var(--green-360); + --status-warning: var(--yellow-300); + --status-warning-background: var(--yellow-300); + --status-warning-text: var(--black-500); + --text-brand: var(--accent-1); + --text-danger: var(--red-345); + --text-link: var(--accent-1); + --text-link-low-saturation: var(--blue-330); + --text-low-contrast: var(--primary-360); + --text-message-preview-low-sat: var(--primary-360); + --text-muted: var(--text-5); + --text-muted-on-default: red; + --text-normal: var(--text-3); + --text-positive: var(--green-330); + --text-primary: var(--text-3); + --text-secondary: var(--text-3); + --text-warning: var(--yellow-300); + --textbox-markdown-syntax: var(--primary-360); + --theme-locked-blur-fallback: hsl(var(--primary-700-hsl) / 0.96); + --user-profile-header-overflow-background: hsl(var(--primary-700-hsl) / 0.5); + --voice-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48); + --voice-video-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48); + --white: var(--white-500); + + --profile-gradient-primary-color: var(--bg-4); + --profile-gradient-secondary-color: var(--bg-4); + + --elevation-low: none; + --search-popout-option-fade: none; + --search-popout-option-fade-hover: none; + + --brand-260: var(--bg-1); /* new badge */ + --brand-430: var(--accent-3); + --brand-500: var(--accent-3); + --brand-530: var(--accent-4); + --brand-560: var(--accent-4); + --brand-600: var(--accent-5); + + --brand-experiment-400: var(--accent-3); /* loading spinning animation element */ + + --green-330: var(--accent-1); + --green-360: var(--accent-3); + --green-430: var(--accent-4); + --green-500: var(--accent-4); + --green-530: var(--accent-5); + + --brand-experiment-15a: var(--mention); /* background of reacted reactions */ + --brand-360: var(--accent-2); /* invite text */ + + --primary-500: var(--bg-2); /* progress bars */ + --primary-600: var(--bg-3); /* delete message preview */ + --primary-630: var(--bg-3); /* billing transaction history */ + --primary-660: var(--bg-3); /* search popout "enter" bar */ + + --white-500: var(--text-1); +} + + diff --git a/Discord/Info.txt b/Discord/Info.txt new file mode 100644 index 0000000..cd256ee --- /dev/null +++ b/Discord/Info.txt @@ -0,0 +1 @@ +Light and Dark Themes for Better Discord, Vencord and Vesktop diff --git a/Discord/Pink-Angel.theme.css b/Discord/Pink-Angel.theme.css new file mode 100644 index 0000000..a0d78f1 --- /dev/null +++ b/Discord/Pink-Angel.theme.css @@ -0,0 +1,1179 @@ +/** + * @name Pink-Angel + * @description A white and pink Discord Theme, matching with the SputnikOS Gnome Theme + * @author Anthony + * @version 0.1 + * @source https://github.com/refact0r/midnight-discord/blob/master/midnight.theme.css +*/ + +/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */ +@import url('https://fonts.googleapis.com/css2?family=Ubuntu: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'); + +/* customize things here */ +.theme-light { + /* font, change to 'gg sans' for default discord font*/ + --font: 'Ubuntu'; + + /* top left corner text */ + --corner-text: 'UwU'; + + /* color of status indicators and window controls */ + --online-indicator: rgb(255, 255, 255); /* change to #23a55a for default green */ + --dnd-indicator: rgb(255, 0, 0); /* change to #f13f43 for default red */ + --idle-indicator: rgb(255, 255, 0); /* change to #f0b232 for default yellow */ + --streaming-indicator: #593695; /* change to #593695 for default purple */ + + /* accent colors */ + --accent-1: rgb(255, 255, 255); /* links */ + --accent-2: rgb(255, 90, 153); /* general unread/mention 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 */ + --mention: rgb(255, 90, 153); /* mentions & mention messages */ + --mention-hover: hsla(190, 80%, 52%, 0.05); /* mentions & mention messages when hovered */ + + /* text colors */ + --text-0: rgb(255, 255, 255); /* text on colored elements */ + --text-1: rgb(255, 0, 255); /* other normally white text */ + --text-2: rgb(255, 255, 255); /* headings and important text */ + --text-3: hsl(220, 15%, 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: rgb(255, 255, 255); /* spacing, secondary elements */ + --bg-4: rgb(255, 167, 199); /* 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 */ + --message-hover: hsla(220, 0%, 0%, 0.1); /* messages when hovered */ + + /* amount of spacing and padding */ + --spacing: 12px; + + /* animations */ + /* ALL ANIMATIONS CAN BE DISABLED WITH REDUCED MOTION IN DISCORD SETTINGS */ + --list-item-transition: 0.2s ease; /* channels/members/settings hover transition */ + --unread-bar-transition: 0.2s ease; /* unread bar moving into view transition */ + --moon-spin-transition: 0.4s ease; /* moon icon spin */ + --icon-spin-transition: 1s ease; /* round icon button spin (settings, emoji, etc.) */ + + /* corner roundness (border-radius) */ + --roundness-xl: 22px; /* roundness of big panel outer corners */ + --roundness-l: 20px; /* popout panels */ + --roundness-m: 16px; /* smaller panels, images, embeds */ + --roundness-s: 12px; /* members, settings inputs */ + --roundness-xs: 10px; /* channels, buttons */ + --roundness-xxs: 8px; /* searchbar, small elements */ + + /* direct messages moon icon */ + /* change to block to show, none to hide */ + --discord-icon: none; /* discord icon */ + --moon-icon: block; /* moon icon */ + --moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/8/8d/Hammer_and_Sickle_with_Red_Star.svg'); /* custom icon url */ + --moon-icon-size: auto; + + /* filter uncolorable elements to fit theme */ + /* (just set to none, they're too much work to configure) */ + --login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); /* login background artwork */ + --green-to-accent-3-filter: hue-rotate(56deg) saturate(1.43); /* add friend page explore icon */ + --blurple-to-accent-3-filter: hue-rotate(304deg) saturate(0.84) brightness(1.2); /* add friend page school icon */ +} + +/* change fonts (edit the variables above, not this part) */ +:root { + --font-primary: var(--font), 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + --font-display: var(--font), 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} + +/* reduced motion */ +:root.reduce-motion { + --list-item-transition: none; + --unread-bar-transition: none; + --moon-spin-transition: none; + --icon-spin-transition: none; +} + +/* modify colors */ +#app-mount .container_ee69e0 /* channel list */, +.privateChannels_f0963d /* dms list */, +#app-mount .container_b2ca13 /* user panel inner */, +.members_cbd271 /* member list inner */, +.member_a31c43 /* member list members */, +.searchResultsWrap_c2b47d /* search results */, +.searchHeader_b7c924 /* search results header */, +.chat_a7d72e.container_f3abf4 /* message requests */, +#app-mount .panels_a4d4d9 > div /* user panel children */, +.container_adcaac /* vc panel */, +.sidebarRegionScroller_c25c6d /* settings left */, +#app-mount .container_f1fd9c /* browse channels container */, +#app-mount .header_f1fd9c /* browse channels header */, +#app-mount .container_c2efea /* browse channels inner */, +.chat_a7d72e.background_e85cee /* server guide body */, +#app-mount .scrollerContainer_c6b11b /* channels and roles customize */, +.shop_e77fa3 /* shop */, +.wrapper_d880dc.minimum_d880dc /* private call */, +.container_effbe2, .container__33507 /* emoji/sticker and gif picker searchbars */, +#app-mount .uploadModal_f82cc7 /* upload modal */, +.uploadModal_f82cc7 .footer_f82cc7 /* upload modal footer */ { + background: var(--bg-4); +} +.userPanelOuter_c69a7b { + --background-secondary-alt: var(--bg-4) !important; +} +.mainCard_a6d69a /* forum post */, +.navRow_be9398[data-theme=dark] /* add new account bottom */ { + background: var(--bg-3); +} +.folderIconWrapper_bc7085[style="background-color: rgba(88, 101, 242, 0.4);"] /* default color closed folders */ { + background: var(--bg-3) !important; +} +.folder_bc7085.hover_bc7085 /* folder opened on hover */, +#app-mount .outer_c0f6a6.interactive_c0f6a6:hover, #app-mount .outer_c0f6a6.active_c0f6a6 /* friend activity cards on hover */ { + background: var(--bg-2); +} +#app-mount .searchAnswer_b0fa94, /* search filter answer */ +#app-mount .searchFilter_b0fa94 /* search filter */ { + background: var(--bg-1); +} +.newChannel_ecb303 /* new channel */ { + background: var(--bg-1) !important; +} +.chat_a7d72e /* chat + member list */, +.sidebar_a4d4d9 /* channel sidebar */, +.privateChannels_f0963d .scroller_c47fa9 /* dms list inner */, +#app-mount .innerHeader_f1fd9c:after /* channels and roles header shadow */, +.attachedBars_d0696b /* reply bar underneath */ { + background: none; +} +.selected_fd6364 .header_fd6364, .clickable_fd6364 .header_fd6364:hover /* server name hover */ { + background: var(--message-hover); +} +.message_d5deea.replying_d5deea.selected_d5deea, .mouse-mode.full-motion .message_d5deea.replying_d5deea:hover /* fix reply message hover */ { + background: var(--background-message-highlight-hover); +} +div.message_d5deea.replying_d5deea::before /* change reply message bar to neutral */ { + background: var(--text-2); +} +.activeButtonChild_a06035 /* send button */ { + color: var(--accent-2); +} +.container_b2ca13 /* user panel button strikethroughs */, +.numberBadge_df8943 /* unread number badge */, +.toolbar_fc4f04 /* toolbar button strikethroughs */ { + --status-danger: var(--accent-2); +} +.expandedFolderIconWrapper_bc7085 > svg[style="color: rgb(88, 101, 242);"] /* default color folder icons */ { + color: var(--accent-3) !important; +} +.divider_d5deea /* unread divider */, +.mention_c10249 /* NEW unread pill */, +.mentionsBar_eba0ba /* channel list new mention pill */ { + --status-danger: var(--accent-3); +} +.message_d5deea.mentioned_d5deea:before /* mention message left edge */, +.botTagOP_a9e77f /* OP tag */ { + background: var(--accent-3); +} +.container_cebd1c.checked_cebd1c /* settings checkbuttons */ { + background: var(--accent-3) !important; +} +.mention_c10249:active /* NEW unread pill when clicked */ { + background: var(--accent-4); +} +path[fill='rgba(35, 165, 90, 1)'] { + fill: var(--accent-3); +} +path[fill='var(--white-500)'] { + fill: var(--text-0) !important; +} +.numberBadge_df8943 /* dms number badge */, +.newMessagesBar_cf58b5 .barButtonBase_cf58b5 /* unread bar */, +.botTagRegular_a9e77f /* bot tag */, +.endCap_c2654d /* unread divider */, +.lookFilled_dd4f85.colorBrand_dd4f85 /* accent buttons */, +.lookFilled_dd4f85.colorBrand_dd4f85 .defaultColor__77578 /* accent buttons */, +.lookFilled_dd4f85.colorBrandNew__8872c /* accent buttons */, +.lookFilled_dd4f85.colorGreen_dd4f85 /* green buttons */, +.lookFilled_dd4f85.colorRed_dd4f85 /* red buttons */, +.lookFilled_dd4f85.colorYellow__818c3 /* yellow buttons */, +.bar_c10249 /* NEW unread pill */, +.wrapper_f90abb:hover .childWrapper_f90abb, /* default server icon text */ +.wrapper_f90abb.selected_ae80f7 .childWrapper_f90abb /* default server icon text */, +.colorDefault_d90b3d.focused_d90b3d /* menu option hover */, +.colorDefault_d90b3d.focused_d90b3d .caret_d90b3d /* popup menu hover caret */, +.colorDefault_d90b3d:active:not(.hideInteraction_d90b3d) /* menu option active */, +.colorDefault_d90b3d:active:not(.hideInteraction_d90b3d) .caret_d90b3d /* menu option active */, +.tabBar_c2739c .addFriend_c2739c.addFriend_c2739c.addFriend_c2739c /* add friend button */, +#app-mount .button__33db6 /* notice banner button */, +.interactive:hover /* mention hover */, +.uploadIcon_f2f431 /* profile upload image */, +.focused_e1268c .userMenuUsername_e1268c .userMenuText_e1268c /* account switcher account hover */, +.dots_ce0450 /* typing dots */, +.lookOutlined_dd4f85.colorWhite_dd4f85 /* server banner buttons */, +.header_dd5a33 /* server preview mode banner */, +.categoryItem_c72b37.selectedCategoryItem_c72b37, +.live_e17fae /* streaming live */, +#app-mount .activeButton_b48941 /* member page pagination button */ , +#app-mount .tooltipBrand_b6c360 /* member page filter tooltip */, +.button_adcaac.buttonColor_adcaac.buttonActive_adcaac /* active voice channel icons */, +.button_adcaac.buttonColor_adcaac.buttonActive_adcaac:hover /* active voice channel icons */, +.vcd-screen-picker-radio[data-checked="true"] .defaultColor_a595eb /* vencord stream resolution picker buttons when active */, +.icon_c07d45 /* streaming activity type icon */, +.theme-dark .tooltipGreen_b6c360, .theme-light .tooltipGreen_b6c360 /* tooltip text like vc latency */ { + color: var(--text-0); +} +#app-mount .button__33db6, .theme-light .button__33db6 /* notice banner button */, +.lookOutlined_dd4f85.colorWhite_dd4f85 /* server banner buttons */ { + border-color: var(--text-0); +} +#app-mount .button__33db6:hover { + border-color: var(--text-0); + background-color: var(--text-0); +} +.container_cebd1c /* settings checkbutton background */ { + background: var(--bg-1) !important; +} +.container_cebd1c.checked_cebd1c > .slider_cebd1c > rect /* settings checkbutton circle */, +.userMenuItem_e1268c path[fill="var(--white-500)"] /* account switcher account hover */, +.colorDefault_d90b3d.focused_d90b3d path { + fill: var(--text-0); +} +.closeIcon__967e7 path /* alert banner close icon */ { + fill: currentColor; +} +.container_cebd1c > .slider_cebd1c > rect /* settings checkbutton circle */ { + fill: var(--text-1); +} +.menu_ad5fac .menuItemFocused_ad5fac /* account switch button hover */ { + color: var(--text-3); +} +.menu_ad5fac .menuItemFocused_ad5fac path /* account switch button hover */ { + fill: var(--text-3); +} +.mini_c7a159 .grabber_c7a159 /* spotify bar handle */ { + margin-top: 4px; + border-width: 1px; +} +.grabber_c7a159 /* settings slider handle */ { + border-width: 0; +} +.button_adcaac.buttonColor_adcaac /* fix vc buttons */ { + color: var(--text-4); +} +.button_adcaac.buttonColor_adcaac:hover /* fix vc buttons hover */ { + background-color: var(--hover); + color: var(--text-3); +} +.iconBadge_c96c45.isCurrentUserConnected_c96c45 /* change server vc badge to neutral */ { + background-color: var(--bg-1); + color: var(--text-1); +} +.bannerVisible_fd6364 .headerContent_fd6364 /* server name over banner image */, +#app-mount .categoryText_af1167 /* gif chooser category names */, +.searchTitle_a3a4ce { + color: white; +} +.gifIcon_f2f431 /* profile upload image gif chooser */ { + background-color: white; +} +.controlIcon_ef18ee /* fix video maximize button */ { + color: var(--text-1); + opacity: 0.6; +} +.controlIcon_ef18ee:hover /* fix video maximize button hover */ { + opacity: 1; +} +::selection { + background: var(--accent-4); + color: var(--text-0); +} +.lookFilled_f6639d.select_f6639d { + border: none; +} +.checkbox_f6cde8 /* channel checkboxes */ { + border-color: var(--text-4) !important; +} +.newBadge_a57509 /* fix forum new badge */ { + color: var(--accent-2); + line-height: 16px; +} + +/* remove shadows */ +#app-mount .header_b56bbc /* gif picker */ { + box-shadow: none; +} +#app-mount .textContentFooter_a57509 /* forum post image fade */ { + background: none; +} + +/* change online indicator color */ +rect[fill='#23a55a'], +svg[fill='#23a55a'] { + fill: var(--online-indicator) !important; +} +.status_c7d26b[style='background-color: rgb(35, 165, 90);'] { + background-color: var(--online-indicator) !important; +} +rect[fill='#f0b232'], +svg[fill='#f0b232'] { + fill: var(--idle-indicator); +} +.status_c7d26b[style='background-color: rgb(240, 178, 50);'] { + background-color: var(--idle-indicator) !important; +} +rect[fill='#f23f43'], +svg[fill='#f23f43'] { + fill: var(--dnd-indicator); +} +.status_c7d26b[style='background-color: rgb(242, 63, 67);'] { + background-color: var(--dnd-indicator) !important; +} +rect[fill='#593695'], +svg[fill='#593695'] { + fill: var(--streaming-indicator); +} +.status_c7d26b[style='background-color: rgb(89, 54, 149);'] { + background-color: var(--streaming-indicator) !important; +} + +/* color fix filters */ +.container_aef5fd:last-child .icon_aef5fd /* explore discoverable servers icon color */ { + background-color: #3ba55c; + filter: var(--green-to-accent-3-filter); +} +.container_aef5fd:first-child .icon_aef5fd /* explore discoverable servers icon color */ { + filter: var(--blurple-to-accent-3-filter); +} +.artwork_bdd070 /* filter login image */ { + filter: var(--login-bg-filter); +} + +/* fix weird message bar padding */ +.clipContainer_b11c5e { + padding-top: 0; + margin-top: 0; +} + +/* separate header bar */ +.title_a7d72e.themed_fc4f04 /* remove bg */ { + background: none; +} +.searchResultsWrap_c2b47d /* allow overflow */ { + overflow: visible; +} +.chatContent_a7d72e::before /* main chat */, +.membersWrap_cbd271::before /* member list */, +.searchResultsWrap_c2b47d::before /* search results */, +.userPanelOuter_c69a7b::before /* dm profile */, +.container_a6d69a::before /* forums */ { + content: ''; + position: absolute; + margin-top: -48px; + background: var(--background-primary); + width: 100%; + height: 48px; + border-radius: var(--roundness-xl) var(--roundness-xl) 0 0; +} +.wrapper_d880dc.minimum_d880dc ~ .content_a7d72e .container__93316::before /* remove when in private call */ { + display: none; +} +.membersWrap_cbd271 /* fix members list height when not scroll */ { + height: 100%; +} + +/* rearrange toolbar */ +a[href="https://support.discord.com"] /* hide help */ +{ + display: none; +} +.search_ff5f90 { + order: 1; + margin: 0 4px 0 12px; +} +.chat_a7d72e:has(.searchResultsWrap_c2b47d) .searchBar_a46bef { + width: 394px !important; + margin-left: calc(var(--spacing) + 8px); +} +.chat_a7d72e:has(.userPanelOuter_c69a7b) .searchBar_a46bef { + width: 316px !important; + margin-left: calc(var(--spacing) + 8px); +} +.chat_a7d72e:has(.membersWrap_cbd271) .searchBar_a46bef { + width: 216px !important; + margin-left: calc(var(--spacing) + 8px); +} + +/* add spacing */ +.base_a4d4d9 /* outside edges */ { + margin: 0 var(--spacing) var(--spacing) 0; +} +.sidebar_a4d4d9 /* channel list and user panel */, +.content_a7d72e /* between chat and member list */ { + gap: var(--spacing); +} +.sidebar_a4d4d9 /* channel list and chat */ { + margin-right: var(--spacing); +} +.sidebar_a4d4d9.hidden_a4d4d9 { + margin-right: 0; +} +.resizeHandle_d1c246 /* pretend to be a margin */ { + width: var(--spacing); +} +.wrapper_d880dc.fullScreen_d880dc .callContainer_d880dc /* fullscreen vc */ { + margin-top: var(--spacing); +} +.notice_be03aa /* banner notice */, +.wrapper_d880dc.minimum_d880dc /* private call */ { + margin-bottom: var(--spacing); +} +/* fix padding */ +#vc-spotify-player /* vencord spotify */, +.container_adcaac /* vc panel */, +.panel_bf1a22 /* stream panel */ { + padding: 10px; +} + +/* add rounded corners */ +.container_ee69e0 /* channel list */, +.panels_a4d4d9 /* user panels */, +.privateChannels_f0963d /* dms list */, +.container_c2739c /* friends page */, +.applicationStore_cecc86 /* nitro page */, +#app-mount .container_f3abf4 /* message requests */, +.shop_e77fa3 /* discord shop */, +.container_d576e9 /* family center */, +.container_d1c246 /* message request */, +#app-mount .callContainer_d880dc /* vc */, +.chat_a7d72e /* general chat container (for browse channels page */, +.animatedContainer_fd6364 /* server image card */, +.notice_be03aa /* banner notice */, +.wrapper_d880dc.minimum_d880dc, /* private call */ +.wrapper_d880dc.minimum_d880dc ~ .content_a7d72e /* chat under private call */, +.main_d8215a /* server onboarding */ { + border-radius: var(--roundness-xl); + overflow: hidden; +} +.container__93316 /* main chat */, +.chatContent_a7d72e /* main chat inner */, +.container_cbd271 /* members list */, +.members_cbd271 /* members list inner */, +.searchResultsWrap_c2b47d /* search results */, +.profilePanel_b433b4 /* profile panel outer */, +.userPanelOuter_c69a7b /* profile panel inner */, +.userPanelInner_c69a7b /* profile panel inner inner */, +.userPanelInner_c69a7b::before /* profile panel inner inner filter */, +.container_a6d69a /* forums */ { + border-radius: 0 0 var(--roundness-xl) var(--roundness-xl); +} + +/* more rounded corners */ +.messagesPopoutWrap_ac90a2 /* inbox, pinned messages popout */, +.container_e664f3 /* thread popout */, +.menu_d90b3d .item_d90b3dd /* server option popout */, +.userPopoutOuter_c69a7b /* user profile popout */, +.root_b9fccc /* user profile modal */, +.contentWrapper_af5dbb /* emoji, sticker, gif pickers */, +.footer_f9a4c9 /* edit modal footer */, +.layerContainer_cd0de5 .root_f9a4c9 /* upload modal */, +.uploadModal_f82cc7 .footer_f82cc7 /* upload modal footer */ { + border-radius: var(--roundness-l); +} +.roundedBanner_c3e427 /* user profile popout top */, +.banner_ab876d /* user profile top when edit */ { + border-radius: calc(var(--roundness-l) - 4px) calc(var(--roundness-l) - 4px) 0 0; +} +.userPopoutInner_c69a7b:before /* user profile popout bottom */, +.userProfileModalInner_c69a7b:before /* user profile modal bottom */ { + border-radius: calc(var(--roundness-l) - 4px); +} +.overlayBackground_c69a7b /* user profile inner */ { + border-radius: var(--roundness-s); +} +.menu_d90b3d /* general popouts */, +.embed_b0068a/* embeds */, +.mediaAttachmentsContainer__242e2 /* image container */, +.oneByOneGridSingle_cda674 /* image container single */, +.imageContainer_cf58b5 .imageWrapper__178ee /* gif wrapper */, +.markup_f8f345 code /* code block */, +.itemCard_f02fcf /* friend activity */, +.peopleListItem_d51464:hover /* online list friends */, +.withTagAsButton_b2ca13:hover, .withTagless_b2ca13:hover /* user panel username */, +.messageGroupWrapper_ac90a2 /* pinned messages */, +.accountProfileCard_b69b77 /* my account settings profile background */ { + border-radius: var(--roundness-m); +} +.scrollableContainer_d0696b /* message bar */, +.channelTextArea_a7d72e /* message bar underneath */, +.select_f6639d /* bot dropdown select */, +.layout_e9f61e /* members */, +.interactive_f5eb4b /* dms */, +.container_c15230 /* thread link */, +.input_f8bc55 /* settings inputs */, +.item_eb92a8 /* settings radiobutton bars */, +.item_eb92a8 .radioBar_eb92a8 /* settings radiobutton bars */ { + border-radius: var(--roundness-s); +} +.select_f6639d.open_f6639d /* vencord plugin show all */ { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.popout_f6639d /* vencord plugin show all */ { + border-radius: 0 0 var(--roundness-s) var(--roundness-s); +} +.banner_d29eee /* community server tutorial thing on message bar */ { + border-radius: var(--roundness-s) var(--roundness-s) 0 0; +} +.scrollableContainer_d0696b.hasConnectedBar_d0696b /* fix message bar with reply bar */ { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.replyBar_b11c5e { + border-radius: var(--roundness-s) var(--roundness-s) 0 0; +} +.link_d8bfb3 /* channels */, +.content_cdc675 /* member connected to vc */, +.side_a0 .item_a0 /* settings tabs */, +button.button_dd4f85 /* small buttons */, +.container__33507 /* friend searchbar */, +.container_effbe2, /* sticker/emoji picker searchbar */ +.item_d90b3d /* general popout buttons */, +.icon_c07d45 /* streaming icon */, +#vc-spotify-album-image, +.background_ae3c77 /* settings nitro tab selected */, +.hoverButtonGroup_e5c1dc /* video download button */, +.wrapper_ef319f /* message hover menu */, +.previewChannelRowContent_c5d9bc { + border-radius: var(--roundness-xs); +} +.hoverButtonGroup_e5c1dc /* reposition video download button */ { + top: 6px; + right: 6px; +} +.wrapper_a7c28c /* mentions */, +.searchBar_a46bef /* search bar */, +.searchBar_f0963d .searchBarComponent_f0963d /* find conversation search bar */, +.topPill_a0 .item_a0 /* friend online/categories */ { + border-radius: var(--roundness-xxs); +} +#app-mount .centerButton_ef18ee /* fix vc buttons */ { + border-radius: 50%; +} + +/* separate guilds panel background */ +.guilds_a4d4d9 { + background: var(--bg-4); + border-radius: var(--roundness-xl); + margin: 0 0 var(--spacing) var(--spacing); +} +.guilds_a4d4d9.hidden_fea3ef { + margin: 0; +} +#app-mount .scroller_fea3ef { + padding: 12px 0; +} +.base_a4d4d9 { + margin-left: var(--spacing); +} +.guilds_a4d4d9::after /* add bottom scroll shadow */, +.membersWrap_cbd271::after { + content: ''; + position: absolute; + background: linear-gradient(transparent 85%, var(--bg-4) 100%); + bottom: 0; + left: 0; + right: 0; + height: 100px; + pointer-events: none; + border-radius: 0 0 var(--roundness-xl) var(--roundness-xl); +} +.guilds_a4d4d9::before /* add top scroll shadow */ { + content: ''; + position: absolute; + background: linear-gradient(var(--bg-4) 0%, transparent 15%); + top: 0; + left: 0; + right: 0; + height: 100px; + pointer-events: none; + z-index: 1; +} +.childWrapper_f90abb { + background: var(--bg-3); +} +.container_a4d4d9 > [style$='display: flex;'] > .guilds_a4d4d9 { + margin: 0; +} +.container_a4d4d9 > [style$='display: flex;'] { + margin: 0 0 var(--spacing) var(--spacing); +} +/* UNCOMMENT IF YOU REMOVE THE ABOVE SECTION "separate guilds panel background" +.expandedFolderBackground_bc7085, +.folder_bc7085, +.folderIconWrapper_bc7085 { + background-color: var(--bg-4) !important; +} */ + +/* extra top margin for macos and custom clients */ +.container_a4d4d9 { + margin-top: var(--spacing); +} +.platform-win .container_a4d4d9 { + margin-top: 0; +} +/* UNCOMMENT if you want to make panels evenly sized on macos +.platform-osx .wrapper_fea3ef { + margin-top: 0; +} +.platform-osx .container_a4d4d9 { + margin-top: 32px; +} */ + +/* top corner title */ +[class^='wordmarkWindows'] { + padding: 4px var(--spacing); +} +[class^='wordmarkWindows'] > svg { + display: none; +} +[class^='wordmarkWindows']::after { + content: var(--corner-text); + display: block; + position: relative; + height: 16px; + line-height: 16px; + font-family: var(--font); + font-size: 13px; + font-weight: 900; + color: var(--text-5); + transform: scaleX(1.2); + margin-left: 6px; +} + +/* top bar height */ +[class^='typeWindows'] { + height: calc(var(--spacing) + 12px); + margin: 0; +} + +/* window controls */ +[class^='winButton'] > svg { + display: none; +} +[class^='winButton'] { + background: none !important; + top: 0; + width: calc(24px); + height: calc(var(--spacing) + 12px); + margin: 0; +} +[class^='winButtonClose'] { + padding-right: calc(var(--spacing) - 5px); +} +[class^='winButton']::after { + content: ''; + height: 12px; + width: 12px; + border-radius: 12px; +} +[class^='winButton']:hover::after { + filter: brightness(0.8); +} +[class^='winButton']:active::after { + transform: scale(0.9); +} +[class^='winButtonClose']::after { + background-color: var(--dnd-indicator) !important; +} +[class^='winButtonMinMax']:nth-child(3)::after { + background-color: var(--online-indicator) !important; +} +[class^='winButtonMinMax']:nth-child(4)::after { + background-color: var(--idle-indicator) !important; +} + +/* custom dm button moon icon */ +.childWrapper_f90abb > svg:not(.favoriteIcon_dcc7a4) { + display: var(--discord-icon); +} +.childWrapper_f90abb:has(> svg:not(.favoriteIcon_dcc7a4))::before { + content: ''; + display: var(--moon-icon); + position: absolute; + width: 65%; + height: 65%; + background: var(--text-4); + -webkit-mask-image: var(--moon-icon-url); + -webkit-mask-size: var(--moon-icon-size); + -webkit-mask-repeat: none; +} +.wrapper_f90abb:hover .childWrapper_f90abb::before { + /* prettier-ignore */ + transition: background-color 0.15s ease-out, transform var(--moon-spin-transition); + transform: rotate(0deg) scale(1); +} +.wrapper_f90abb:hover > .childWrapper_f90abb::before, +.wrapper_f90abb.selected_f90abb > .childWrapper_f90abb::before { + background: var(--text-0); + transform: rotate(-360deg) scale(0.8); +} +.lowerBadge_c5f96a::before { + content: ''; + display: block; + position: absolute; + width: 24px; + height: 24px; + transform: translate(-4px, -4px); + z-index: -1; + background: var(--bg-3); + border-radius: 50%; +} +/* custom dm button background instead of icon */ +/* .childWrapper_f90abb:has(> svg:not(.favoriteIcon_dcc7a4)) { + background: url('https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png'); + background-color: transparent !important; + background-size: cover; +} */ + +/* vencord spotify player support */ +#vc-spotify-player { + --vc-spotify-green: var(--accent-1); +} + +/* improve unread divider */ +.divider_c2654d { + border-width: 4px; + border-radius: 4px; +} +.divider_c2654d .content_c2654d { + margin-top: -3px; +} +.endCap_c2654d { + margin-top: -1px; + padding-top: 2px; +} +/* improve highlight message left edge */ +.message_d5deea.mentioned_d5deea::before, +.replying_d5deea::before { + width: 4px; + border-radius: 4px; +} +/* modify embeds */ +.embedFull_b0068a { + border: 4px solid var(--bg-2); + border-top-color: transparent !important; + border-bottom-color: transparent !important; + border-right-color: transparent !important; +} + +/* server selected marker */ +.item_c4cd66 { + width: 4px; + border-radius: 4px; + margin-left: 4px; +} + +/* horizontal server list fix */ +#app-mount .app_bd26cc .base_a4d4d9 { + top: calc(var(--server-container) + var(--spacing)) !important; +} + +/* list hover animations */ +.wrapper_d8bfb3 .link_d8bfb3 /* channels */, +.container_e9f61e /* members */, +.channel_c91bad /* dms */, +.side_a0 .item_a0 /* settings */ { + transition: margin-left var(--list-item-transition); +} +.wrapper_d8bfb3:hover .link_d8bfb3, +.side_a0 .item_a0:hover { + margin-left: 10px; +} +.container_e9f61e:hover, +.channel_c91bad:hover { + margin-left: 18px; +} + +/* spin hover animations */ +button.button_f67531 /* make user panel buttons round */ { + border-radius: 50%; +} +.attachButton_f298d4 .attachButtonInner_f298d4 /* upload button */, +.emojiButton_d0696b .contents_dd4f85 /* emoji button */, +.closeButton_df5532 /* settings exit button */, +.contents_dd4f85 > .closeIcon_f9a4c9 /* modal close */ { + transition: transform var(--icon-spin-transition); +} +.button_f67531:last-child:hover .contents_dd4f85, +.attachButton_f298d4:hover .attachButtonInner_f298d4, +.emojiButton_d0696b:hover .contents_dd4f85, +.closeButton_df5532:hover, +.contents_dd4f85:hover > .closeIcon_f9a4c9 { + transform: rotate(360deg); +} + +/* hide unread bar on hover */ +.messagesWrapper_e2e187 { + overflow: hidden; +} +.newMessagesBar_cf58b5 { + top: -48px; + height: 72px; + transition: top var(--unread-bar-transition); + background: none; + box-shadow: none; + border-radius: 0; +} +.newMessagesBar_cf58b5::before { + content: ''; + background: var(--accent-3); + box-shadow: var(--elevation-low); + width: 100%; + position: absolute; + height: 32px; + border-radius: var(--roundness-s); +} +.newMessagesBar_cf58b5:hover { + top: -12px; +} +.top_eba0ba > .containerPadding_eba0ba { + padding: 16px; + margin-top: -40px; + transition: margin-top var(--unread-bar-transition); +} +.top_eba0ba:hover > .containerPadding_eba0ba:hover { + margin-top: -12px; +} +.bottom_eba0ba > .containerPadding_eba0ba { + padding: 16px; + margin-bottom: -40px; + transition: margin-bottom var(--unread-bar-transition); +} +.bottom_eba0ba > .containerPadding_eba0ba:hover { + margin-bottom: -12px; +} + +.theme-light { + --text-link: var(--accent-5); +} +html.theme-light, +.theme-dark { + --activity-card-background: var(--bg-3); + --android-navigation-bar-background: var(--primary-830); + --android-navigation-scrim-background: hsl(var(--primary-830-hsl) / 0.5); + --android-ripple: hsl(var(--white-500-hsl) / 0.07); + --background-accent: var(--bg-2); + --background-floating: var(--bg-3); + --background-mentioned: var(--mention); + --background-mentioned-hover: var(--mention-hover); + --background-message-automod: hsl(var(--red-400-hsl) / 0.05); + --background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1); + --background-message-highlight: var(--active); + --background-message-highlight-hover: var(--hover); + --background-message-hover: var(--message-hover); + --background-mobile-primary: var(--bg-4); + --background-mobile-secondary: var(--primary-630); + --background-modifier-accent: var(--hover); + --background-modifier-accent-2: red; + --background-modifier-active: var(--active); + --background-modifier-hover: var(--hover); + --background-modifier-selected: var(--active); + --background-nested-floating: var(--primary-630); + --background-primary: var(--bg-4); + --background-secondary: var(--bg-3); + --background-secondary-alt: var(--bg-3); + --background-tertiary: var(--bg-3); + --bg-backdrop: hsl(var(--black-500-hsl) / 0.7); + --bg-backdrop-no-opacity: var(--black-500); + --bg-base-primary: var(--primary-600); + --bg-base-secondary: var(--primary-630); + --bg-base-tertiary: var(--primary-660); + --bg-mod-faint: var(--bg-4); + --bg-mod-strong: hsl(var(--primary-500-hsl) / 0.54); + --bg-mod-subtle: hsl(var(--primary-500-hsl) / 0.48); + --bg-surface-overlay: var(--primary-800); + --bg-surface-overlay-tmp: var(--primary-800); + --bg-surface-raised: var(--primary-600); + --black: var(--black-500); + --blur-fallback: hsl(var(--primary-700-hsl) / 0.96); + --blur-fallback-pressed: hsl(var(--primary-730-hsl) / 0.96); + --border-faint: hsl(var(--white-500-hsl) / 0.03); + --border-strong: hsl(var(--white-500-hsl) / 0.16); + --border-subtle: hsl(var(--white-500-hsl) / 0.08); + --bug-reporter-modal-submitting-background: hsl(var(--primary-800-hsl) / 0.6); + --button-creator-revenue-background: var(--teal-430); + --button-danger-background: var(--red-430); + --button-danger-background-active: var(--red-530); + --button-danger-background-disabled: var(--red-430); + --button-danger-background-hover: var(--red-500); + --button-outline-brand-background: hsl(var(--white-500-hsl) / 0); + --button-outline-brand-background-active: var(--brand-560); + --button-outline-brand-background-hover: var(--brand-500); + --button-outline-brand-border: var(--brand-500); + --button-outline-brand-border-active: var(--brand-560); + --button-outline-brand-border-hover: var(--brand-500); + --button-outline-brand-text: var(--white-500); + --button-outline-brand-text-active: var(--white-500); + --button-outline-brand-text-hover: var(--white-500); + --button-outline-danger-background: hsl(var(--white-500-hsl) / 0); + --button-outline-danger-background-active: var(--red-460); + --button-outline-danger-background-hover: var(--red-430); + --button-outline-danger-border: var(--red-400); + --button-outline-danger-border-active: var(--red-430); + --button-outline-danger-border-hover: var(--red-430); + --button-outline-danger-text: var(--white-500); + --button-outline-danger-text-active: var(--white-500); + --button-outline-danger-text-hover: var(--white-500); + --button-outline-positive-background: hsl(var(--white-500-hsl) / 0); + --button-outline-positive-background-active: var(--green-530); + --button-outline-positive-background-hover: var(--green-430); + --button-outline-positive-border: var(--green-360); + --button-outline-positive-border-active: var(--green-530); + --button-outline-positive-border-hover: var(--green-430); + --button-outline-positive-text: var(--white-500); + --button-outline-positive-text-active: var(--white-500); + --button-outline-positive-text-hover: var(--white-500); + --button-outline-primary-background: hsl(var(--white-500-hsl) / 0); + --button-outline-primary-background-active: var(--primary-430); + --button-outline-primary-background-hover: var(--primary-500); + --button-outline-primary-border: var(--primary-500); + --button-outline-primary-border-active: var(--primary-430); + --button-outline-primary-border-hover: var(--primary-500); + --button-outline-primary-text: var(--white-500); + --button-outline-primary-text-active: var(--white-500); + --button-outline-primary-text-hover: var(--white-500); + --button-positive-background: var(--green-430); + --button-positive-background-active: var(--green-530); + --button-positive-background-disabled: var(--green-430); + --button-positive-background-hover: var(--green-500); + --button-secondary-background: var(--bg-2); + --button-secondary-background-active: var(--text-5); + --button-secondary-background-disabled: var(--bg-2); + --button-secondary-background-hover: var(--bg-1); + --card-gradient-bg: hsl(var(--black-500-hsl) / 0.4); + --card-gradient-pressed-bg: hsl(var(--black-500-hsl) / 0.5); + --card-primary-bg: var(--primary-560); + --card-primary-pressed-bg: var(--primary-645); + --card-secondary-bg: var(--bg-3); + --card-secondary-pressed-bg: var(--primary-645); + --channel-icon: var(--text-4); + --channel-text-area-placeholder: var(--text-5); + --channels-default: var(--text-4); + --channeltextarea-background: var(--bg-3); + --chat-background: var(--primary-600); + --chat-border: var(--primary-700); + --chat-input-container-background: var(--primary-600); + --chat-swipe-to-reply-background: var(--primary-660); + --control-brand-foreground: var(--accent-2); + --control-brand-foreground-new: var(--brand-360); + --creator-revenue-icon-gradient-end: var(--teal-430); + --creator-revenue-icon-gradient-start: var(--teal-360); + --creator-revenue-info-box-background: hsl(var(--teal-430-hsl) / 0.1); + --creator-revenue-info-box-border: var(--teal-400); + --creator-revenue-locked-channel-icon: var(--teal-345); + --creator-revenue-progress-bar: var(--teal-400); + --deprecated-card-bg: var(--bg-3); + --deprecated-card-editable-bg: hsl(var(--primary-700-hsl) / 0.3); + --deprecated-quickswitcher-input-background: var(--primary-400); + --deprecated-quickswitcher-input-placeholder: hsl(var(--white-500-hsl) / 0.3); + --deprecated-store-bg: var(--primary-600); + --deprecated-text-input-bg: var(--bg-3); + --deprecated-text-input-border: hsl(var(--black-500-hsl) / 0.3); + --deprecated-text-input-border-disabled: var(--primary-700); + --deprecated-text-input-border-hover: var(--primary-900); + --deprecated-text-input-prefix: var(--primary-200); + --display-banner-overflow-background: hsl(var(--primary-700-hsl) / 0.5); + --divider-strong: hsl(var(--white-500-hsl) / 0.16); + --divider-subtle: hsl(var(--white-500-hsl) / 0.08); + --focus-primary: var(--blue-345); + --forum-post-extra-media-count-container-background: hsl(var(--primary-660-hsl) / 0.8); + --forum-post-tag-background: hsl(var(--primary-660-hsl) / 0.9); + --guild-notifications-bottom-sheet-pill-background: var(--primary-700); + --header-muted: var(--text-4); + --header-primary: var(--text-2); + --header-secondary: var(--text-4); + --home-background: var(--bg-4); + --home-card-resting-border: hsl(var(--transparent-hsl) / 0); + --icon-muted: var(--primary-400); + --icon-primary: var(--primary-130); + --icon-secondary: var(--primary-330); + --info-box-background: hsl(var(--blue-345-hsl) / 0.1); + --info-danger-background: hsl(var(--red-400-hsl) / 0.1); + --info-danger-foreground: var(--red-400); + --info-danger-text: var(--white-500); + --info-help-background: hsl(var(--blue-345-hsl) / 0.1); + --info-help-foreground: var(--blue-345); + --info-help-text: var(--white-500); + --info-positive-background: hsl(var(--green-360-hsl) / 0.1); + --info-positive-foreground: var(--green-360); + --info-positive-text: var(--white-500); + --info-warning-background: hsl(var(--yellow-300-hsl) / 0.1); + --info-warning-foreground: var(--yellow-300); + --info-warning-text: var(--white-500); + --input-background: var(--bg-3); + --input-placeholder-text: var(--text-5); + --interactive-active: var(--text-3); + --interactive-hover: var(--text-3); + --interactive-muted: var(--text-5); + --interactive-normal: var(--text-4); + --legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5); + --legacy-android-blur-overlay-ultra-thin: hsl(var(--black-500-hsl) / 0.025); + --legacy-blur-fallback-default: hsl(var(--primary-660-hsl) / 0.975); + --legacy-blur-fallback-ultra-thin: hsl(var(--black-500-hsl) / 0.95); + --live-stage-tile-border: hsl(var(--primary-500-hsl) / 0.6); + --logo-primary: var(--white-500); + --mention-background: var(--mention); + --mention-foreground: var(--accent-1); + --modal-background: var(--bg-4); + --modal-footer-background: var(--bg-4); + --navigator-header-tint: var(--white-500); + --polls-image-normal-border: hsl(var(--black-430-hsl) / 0.9); + --polls-victor-border: var(--yellow-300); + --polls-victor-fill: var(--mention); + --polls-victor-label: var(--primary-600); + --polls-voted-border: var(--green-330); + --polls-voted-fill: var(--mention); + --polls-voted-label: var(--primary-600); + --profile-gradient-card-background: hsl(var(--black-500-hsl) / 0.7); + --profile-gradient-message-input-border: hsl(var(--primary-500-hsl) / 0.48); + --profile-gradient-note-background: hsl(var(--black-500-hsl) / 0.3); + --profile-gradient-overlay: hsl(var(--black-500-hsl) / 0.6); + --profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-500-hsl) / 0.8); + --profile-gradient-profile-body-background-hover: hsl(var(--white-500-hsl) / 0.16); + --profile-gradient-role-pill-background: hsl(var(--primary-660-hsl) / 0.5); + --profile-gradient-role-pill-border: hsl(var(--white-500-hsl) / 0.2); + --profile-gradient-section-box: hsl(var(--black-500-hsl) / 0.45); + --redesign-activity-card-background: var(--primary-560); + --redesign-activity-card-background-pressed: var(--primary-630); + --redesign-activity-card-badge-icon: var(--primary-360); + --redesign-activity-card-border: hsl(var(--white-500-hsl) / 0.02); + --redesign-activity-card-overflow-background: var(--primary-630); + --redesign-button-danger-background: var(--red-430); + --redesign-button-danger-pressed-background: var(--red-460); + --redesign-button-danger-text: var(--white-500); + --redesign-button-overlay-alpha-background: hsl(var(--black-500-hsl) / 0.54); + --redesign-button-overlay-alpha-pressed-background: hsl(var(--black-500-hsl) / 0.64); + --redesign-button-overlay-alpha-text: var(--white-500); + --redesign-button-overlay-background: var(--white-500); + --redesign-button-overlay-pressed-background: var(--primary-230); + --redesign-button-overlay-text: var(--primary-860); + --redesign-button-positive-background: var(--green-430); + --redesign-button-positive-pressed-background: var(--green-460); + --redesign-button-positive-text: var(--white-500); + --redesign-button-primary-alt-background: hsl(var(--brand-500-hsl) / 0); + --redesign-button-primary-alt-border: var(--brand-360); + --redesign-button-primary-alt-on-blurple-background: hsl(var(--brand-530-hsl) / 0); + --redesign-button-primary-alt-on-blurple-border: var(--white-500); + --redesign-button-primary-alt-on-blurple-pressed-background: var(--brand-530); + --redesign-button-primary-alt-on-blurple-pressed-border: var(--brand-360); + --redesign-button-primary-alt-on-blurple-text: var(--white-500); + --redesign-button-primary-alt-pressed-background: hsl(var(--brand-700-hsl) / 0.16); + --redesign-button-primary-alt-pressed-border: hsl(var(--brand-400-hsl) / 0.5); + --redesign-button-primary-alt-pressed-text: var(--brand-360); + --redesign-button-primary-alt-text: var(--brand-360); + --redesign-button-primary-background: var(--brand-500); + --redesign-button-primary-on-blurple-background: var(--white-500); + --redesign-button-primary-on-blurple-pressed-background: var(--brand-200); + --redesign-button-primary-on-blurple-pressed-text: var(--brand-530); + --redesign-button-primary-on-blurple-text: var(--brand-500); + --redesign-button-primary-pressed-background: var(--brand-560); + --redesign-button-primary-text: var(--white-500); + --redesign-button-secondary-alt-background: var(--primary-660); + --redesign-button-secondary-alt-pressed-background: var(--primary-560); + --redesign-button-secondary-alt-pressed-text: var(--primary-330); + --redesign-button-secondary-alt-text: var(--primary-230); + --redesign-button-secondary-background: var(--primary-460); + --redesign-button-secondary-border: hsl(var(--white-500-hsl) / 0.08); + --redesign-button-secondary-pressed-background: var(--primary-500); + --redesign-button-secondary-pressed-border: hsl(var(--transparent-hsl) / 0); + --redesign-button-secondary-text: var(--primary-230); + --redesign-channel-category-name-text: var(--primary-330); + --redesign-channel-message-preview-text: var(--primary-360); + --redesign-channel-name-muted-text: var(--primary-360); + --redesign-channel-name-text: var(--primary-130); + --redesign-chat-input-background: var(--primary-700); + --redesign-input-control-active-bg: var(--primary-645); + --redesign-input-control-selected: var(--brand-500); + --redesign-only-background-active: var(--primary-530); + --redesign-only-background-default: var(--primary-600); + --redesign-only-background-overlay: var(--primary-645); + --redesign-only-background-raised: var(--primary-630); + --redesign-only-background-sunken: var(--primary-660); + --scrollbar-auto-scrollbar-color-thumb: var(--primary-730); + --scrollbar-auto-scrollbar-color-track: var(--primary-630); + --scrollbar-auto-thumb: var(--bg-3); + --scrollbar-auto-track: transparent; + --scrollbar-thin-thumb: var(--bg-3); + --scrollbar-thin-track: transparent; + --spoiler-hidden-background: var(--primary-700); + --spoiler-revealed-background: var(--primary-660); + --status-danger: var(--red-400); + --status-danger-background: var(--red-400); + --status-danger-text: var(--text-0); + --status-dnd: var(--red-400); + --status-idle: var(--yellow-300); + --status-offline: var(--primary-360); + --status-online: var(--green-360); + --status-positive: var(--green-360); + --status-positive-background: var(--green-430); + --status-positive-text: var(--text-0); + --status-speaking: var(--green-360); + --status-warning: var(--yellow-300); + --status-warning-background: var(--yellow-300); + --status-warning-text: var(--black-500); + --text-brand: var(--accent-1); + --text-danger: var(--red-345); + --text-link: var(--accent-1); + --text-link-low-saturation: var(--blue-330); + --text-low-contrast: var(--primary-360); + --text-message-preview-low-sat: var(--primary-360); + --text-muted: var(--text-5); + --text-muted-on-default: red; + --text-normal: var(--text-3); + --text-positive: var(--green-330); + --text-primary: var(--text-3); + --text-secondary: var(--text-3); + --text-warning: var(--yellow-300); + --textbox-markdown-syntax: var(--primary-360); + --theme-locked-blur-fallback: hsl(var(--primary-700-hsl) / 0.96); + --user-profile-header-overflow-background: hsl(var(--primary-700-hsl) / 0.5); + --voice-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48); + --voice-video-video-tile-blur-fallback: hsl(var(--primary-700-hsl) / 0.48); + --white: var(--white-500); + + --profile-gradient-primary-color: var(--bg-4); + --profile-gradient-secondary-color: var(--bg-4); + + --elevation-low: none; + --search-popout-option-fade: none; + --search-popout-option-fade-hover: none; + + --brand-260: var(--bg-1); /* new badge */ + --brand-430: var(--accent-3); + --brand-500: var(--accent-3); + --brand-530: var(--accent-4); + --brand-560: var(--accent-4); + --brand-600: var(--accent-5); + + --brand-experiment-400: var(--accent-3); /* loading spinning animation element */ + + --green-330: var(--accent-1); + --green-360: var(--accent-3); + --green-430: var(--accent-4); + --green-500: var(--accent-4); + --green-530: var(--accent-5); + + --brand-experiment-15a: var(--mention); /* background of reacted reactions */ + --brand-360: var(--accent-2); /* invite text */ + + --primary-500: var(--bg-2); /* progress bars */ + --primary-600: var(--bg-3); /* delete message preview */ + --primary-630: var(--bg-3); /* billing transaction history */ + --primary-660: var(--bg-3); /* search popout "enter" bar */ + + --white-500: var(--text-1); +} + +