You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1180 lines
44 KiB
CSS
1180 lines
44 KiB
CSS
/**
|
|
* @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);
|
|
}
|
|
|
|
|