|
|
@ -18,6 +18,11 @@
|
|
|
|
/* top left corner text */
|
|
|
|
/* top left corner text */
|
|
|
|
--corner-text: 'UwU';
|
|
|
|
--corner-text: 'UwU';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Colors */
|
|
|
|
|
|
|
|
--dark-pink: rgb(255, 90, 153);
|
|
|
|
|
|
|
|
--light-pink: rgb(255, 167, 199);
|
|
|
|
|
|
|
|
--pink-white: rgb(255, 243, 249);
|
|
|
|
|
|
|
|
|
|
|
|
/* color of status indicators and window controls */
|
|
|
|
/* color of status indicators and window controls */
|
|
|
|
--online-indicator: rgb(255, 90, 153); /* change to #23a55a for default green */
|
|
|
|
--online-indicator: rgb(255, 90, 153); /* change to #23a55a for default green */
|
|
|
|
--dnd-indicator: rgb(255, 0, 0); /* change to #f13f43 for default red */
|
|
|
|
--dnd-indicator: rgb(255, 0, 0); /* change to #f13f43 for default red */
|
|
|
@ -25,9 +30,9 @@
|
|
|
|
--streaming-indicator: rgb(0, 0, 255); /* change to #593695 for default purple */
|
|
|
|
--streaming-indicator: rgb(0, 0, 255); /* change to #593695 for default purple */
|
|
|
|
|
|
|
|
|
|
|
|
/* accent colors */
|
|
|
|
/* accent colors */
|
|
|
|
--accent-1: rgb(255, 255, 255); /* links */
|
|
|
|
--accent-1: rgb(255, 243, 249); /* links */
|
|
|
|
--accent-2: rgb(255, 90, 153); /* general unread/mention elements */
|
|
|
|
--accent-2: rgb(255, 243, 249); /* general unread/mention elements */
|
|
|
|
--accent-3: rgb(255, 255, 255); /* accent buttons */
|
|
|
|
--accent-3: rgb(255, 243, 249); /* accent buttons */
|
|
|
|
--accent-4: hsl(190, 70%, 36%); /* accent buttons when hovered */
|
|
|
|
--accent-4: hsl(190, 70%, 36%); /* accent buttons when hovered */
|
|
|
|
--accent-5: hsl(190, 70%, 30%); /* accent buttons when clicked */
|
|
|
|
--accent-5: hsl(190, 70%, 30%); /* accent buttons when clicked */
|
|
|
|
--mention: rgb(255, 90, 153); /* mentions & mention messages */
|
|
|
|
--mention: rgb(255, 90, 153); /* mentions & mention messages */
|
|
|
@ -37,14 +42,14 @@
|
|
|
|
--text-0: black; /* text on colored elements */
|
|
|
|
--text-0: black; /* text on colored elements */
|
|
|
|
--text-1: rgb(255, 90, 153); /* other normally white text */
|
|
|
|
--text-1: rgb(255, 90, 153); /* other normally white text */
|
|
|
|
--text-2: rgb(255, 90, 153); /* headings and important text */
|
|
|
|
--text-2: rgb(255, 90, 153); /* headings and important text */
|
|
|
|
--text-3: rgba(0, 0, 0, 0.5); /* normal text */
|
|
|
|
--text-3: rgba(255, 243, 249, 0.5); /* normal text */
|
|
|
|
--text-4: rgb(255, 90, 153); /* icon buttons and channels */
|
|
|
|
--text-4: rgb(255, 90, 153); /* icon buttons and channels */
|
|
|
|
--text-5: hsl(220, 15%, 25%); /* muted channels/chats and timestamps */
|
|
|
|
--text-5: hsl(220, 15%, 25%); /* muted channels/chats and timestamps */
|
|
|
|
|
|
|
|
|
|
|
|
/* background and dark colors */
|
|
|
|
/* background and dark colors */
|
|
|
|
--bg-1: hsl(220, 15%, 20%); /* dark buttons when clicked */
|
|
|
|
--bg-1: hsl(220, 15%, 20%); /* dark buttons when clicked */
|
|
|
|
--bg-2: hsl(220, 15%, 16%); /* dark buttons */
|
|
|
|
--bg-2: hsl(220, 15%, 16%); /* dark buttons */
|
|
|
|
--bg-3: rgb(255, 255, 255); /* spacing, secondary elements */
|
|
|
|
--bg-3: rgb(255, 243, 249); /* spacing, secondary elements */
|
|
|
|
--bg-4: rgb(255, 167, 199); /* main background color */
|
|
|
|
--bg-4: rgb(255, 167, 199); /* main background color */
|
|
|
|
--hover: rgb(255, 90, 153); /* channels and buttons when hovered */
|
|
|
|
--hover: rgb(255, 90, 153); /* channels and buttons when hovered */
|
|
|
|
--active: hsla(220, 20%, 40%, 0.2); /* channels and buttons when clicked or selected */
|
|
|
|
--active: hsla(220, 20%, 40%, 0.2); /* channels and buttons when clicked or selected */
|
|
|
@ -119,7 +124,7 @@
|
|
|
|
.container_effbe2, .container__33507 /* emoji/sticker and gif picker searchbars */,
|
|
|
|
.container_effbe2, .container__33507 /* emoji/sticker and gif picker searchbars */,
|
|
|
|
#app-mount .uploadModal_f82cc7 /* upload modal */,
|
|
|
|
#app-mount .uploadModal_f82cc7 /* upload modal */,
|
|
|
|
.uploadModal_f82cc7 .footer_f82cc7 /* upload modal footer */ {
|
|
|
|
.uploadModal_f82cc7 .footer_f82cc7 /* upload modal footer */ {
|
|
|
|
background: var(--bg-4);
|
|
|
|
background: var(--light-pink);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.userPanelOuter_c69a7b {
|
|
|
|
.userPanelOuter_c69a7b {
|
|
|
|
--background-secondary-alt: var(--bg-4) !important;
|
|
|
|
--background-secondary-alt: var(--bg-4) !important;
|
|
|
@ -262,7 +267,7 @@ path[fill='var(--white-500)'] {
|
|
|
|
border-width: 0;
|
|
|
|
border-width: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.button_adcaac.buttonColor_adcaac /* fix vc buttons */ {
|
|
|
|
.button_adcaac.buttonColor_adcaac /* fix vc buttons */ {
|
|
|
|
color: var(--text-4);
|
|
|
|
color: var(--dark-pink);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.button_adcaac.buttonColor_adcaac:hover /* fix vc buttons hover */ {
|
|
|
|
.button_adcaac.buttonColor_adcaac:hover /* fix vc buttons hover */ {
|
|
|
|
background-color: var(--hover);
|
|
|
|
background-color: var(--hover);
|
|
|
@ -872,14 +877,14 @@ html.theme-light {
|
|
|
|
--background-message-automod: hsl(var(--red-400-hsl) / 0.05);
|
|
|
|
--background-message-automod: hsl(var(--red-400-hsl) / 0.05);
|
|
|
|
--background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1);
|
|
|
|
--background-message-automod-hover: hsl(var(--red-400-hsl) / 0.1);
|
|
|
|
--background-message-highlight: var(--active);
|
|
|
|
--background-message-highlight: var(--active);
|
|
|
|
--background-message-highlight-hover: var(--hover);
|
|
|
|
--background-message-highlight-hover: var(--pink-white);
|
|
|
|
--background-message-hover: var(--message-hover);
|
|
|
|
--background-message-hover: var(--message-hover);
|
|
|
|
--background-mobile-primary: var(--bg-4);
|
|
|
|
--background-mobile-primary: var(--bg-4);
|
|
|
|
--background-mobile-secondary: var(--primary-630);
|
|
|
|
--background-mobile-secondary: var(--primary-630);
|
|
|
|
--background-modifier-accent: var(--hover);
|
|
|
|
--background-modifier-accent: var(--hover);
|
|
|
|
--background-modifier-accent-2: red;
|
|
|
|
--background-modifier-accent-2: red;
|
|
|
|
--background-modifier-active: var(--active);
|
|
|
|
--background-modifier-active: var(--active);
|
|
|
|
--background-modifier-hover: var(--hover);
|
|
|
|
--background-modifier-hover: var(--dark-pink);
|
|
|
|
--background-modifier-selected: var(--active);
|
|
|
|
--background-modifier-selected: var(--active);
|
|
|
|
--background-nested-floating: var(--primary-630);
|
|
|
|
--background-nested-floating: var(--primary-630);
|
|
|
|
--background-primary: var(--bg-4);
|
|
|
|
--background-primary: var(--bg-4);
|
|
|
@ -959,9 +964,9 @@ html.theme-light {
|
|
|
|
--card-primary-pressed-bg: var(--primary-645);
|
|
|
|
--card-primary-pressed-bg: var(--primary-645);
|
|
|
|
--card-secondary-bg: var(--bg-3);
|
|
|
|
--card-secondary-bg: var(--bg-3);
|
|
|
|
--card-secondary-pressed-bg: var(--primary-645);
|
|
|
|
--card-secondary-pressed-bg: var(--primary-645);
|
|
|
|
--channel-icon: var(--text-4);
|
|
|
|
--channel-icon: var(--dark-pink);
|
|
|
|
--channel-text-area-placeholder: var(--text-5);
|
|
|
|
--channel-text-area-placeholder: var(--text-5);
|
|
|
|
--channels-default: var(--text-4);
|
|
|
|
--channels-default: var(--dark-pink);
|
|
|
|
--channeltextarea-background: var(--bg-3);
|
|
|
|
--channeltextarea-background: var(--bg-3);
|
|
|
|
--chat-background: var(--primary-600);
|
|
|
|
--chat-background: var(--primary-600);
|
|
|
|
--chat-border: var(--primary-700);
|
|
|
|
--chat-border: var(--primary-700);
|
|
|
@ -1015,8 +1020,8 @@ html.theme-light {
|
|
|
|
--info-warning-text: var(--white-500);
|
|
|
|
--info-warning-text: var(--white-500);
|
|
|
|
--input-background: var(--bg-3);
|
|
|
|
--input-background: var(--bg-3);
|
|
|
|
--input-placeholder-text: var(--text-5);
|
|
|
|
--input-placeholder-text: var(--text-5);
|
|
|
|
--interactive-active: var(--text-3);
|
|
|
|
--interactive-active: var(--pink-white);
|
|
|
|
--interactive-hover: var(--text-3);
|
|
|
|
--interactive-hover: var(--pink-white);
|
|
|
|
--interactive-muted: var(--text-5);
|
|
|
|
--interactive-muted: var(--text-5);
|
|
|
|
--interactive-normal: var(--text-4);
|
|
|
|
--interactive-normal: var(--text-4);
|
|
|
|
--legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5);
|
|
|
|
--legacy-android-blur-overlay-default: hsl(var(--primary-660-hsl) / 0.5);
|
|
|
@ -1104,9 +1109,9 @@ html.theme-light {
|
|
|
|
--redesign-only-background-sunken: var(--primary-660);
|
|
|
|
--redesign-only-background-sunken: var(--primary-660);
|
|
|
|
--scrollbar-auto-scrollbar-color-thumb: var(--primary-730);
|
|
|
|
--scrollbar-auto-scrollbar-color-thumb: var(--primary-730);
|
|
|
|
--scrollbar-auto-scrollbar-color-track: var(--primary-630);
|
|
|
|
--scrollbar-auto-scrollbar-color-track: var(--primary-630);
|
|
|
|
--scrollbar-auto-thumb: var(--bg-3);
|
|
|
|
--scrollbar-auto-thumb: var(--dark-pink);
|
|
|
|
--scrollbar-auto-track: transparent;
|
|
|
|
--scrollbar-auto-track: transparent;
|
|
|
|
--scrollbar-thin-thumb: var(--bg-3);
|
|
|
|
--scrollbar-thin-thumb: var(--dark-pink);
|
|
|
|
--scrollbar-thin-track: transparent;
|
|
|
|
--scrollbar-thin-track: transparent;
|
|
|
|
--spoiler-hidden-background: var(--primary-700);
|
|
|
|
--spoiler-hidden-background: var(--primary-700);
|
|
|
|
--spoiler-revealed-background: var(--primary-660);
|
|
|
|
--spoiler-revealed-background: var(--primary-660);
|
|
|
@ -1120,7 +1125,7 @@ html.theme-light {
|
|
|
|
--status-positive: var(--green-360);
|
|
|
|
--status-positive: var(--green-360);
|
|
|
|
--status-positive-background: var(--green-430);
|
|
|
|
--status-positive-background: var(--green-430);
|
|
|
|
--status-positive-text: var(--text-0);
|
|
|
|
--status-positive-text: var(--text-0);
|
|
|
|
--status-speaking: rgb(255, 90, 153);
|
|
|
|
--status-speaking: var(--dark-pink);
|
|
|
|
--status-warning: var(--yellow-300);
|
|
|
|
--status-warning: var(--yellow-300);
|
|
|
|
--status-warning-background: var(--yellow-300);
|
|
|
|
--status-warning-background: var(--yellow-300);
|
|
|
|
--status-warning-text: var(--black-500);
|
|
|
|
--status-warning-text: var(--black-500);
|
|
|
@ -1161,20 +1166,30 @@ html.theme-light {
|
|
|
|
--brand-experiment-400: var(--accent-3); /* loading spinning animation element */
|
|
|
|
--brand-experiment-400: var(--accent-3); /* loading spinning animation element */
|
|
|
|
|
|
|
|
|
|
|
|
--green-330: var(--accent-1);
|
|
|
|
--green-330: var(--accent-1);
|
|
|
|
--green-360: var(--accent-3);
|
|
|
|
--green-360: var(--dark-pink);
|
|
|
|
--green-430: var(--accent-4);
|
|
|
|
--green-430: var(--accent-4);
|
|
|
|
--green-500: var(--accent-4);
|
|
|
|
--green-500: var(--accent-4);
|
|
|
|
--green-530: var(--accent-5);
|
|
|
|
--green-530: var(--accent-5);
|
|
|
|
|
|
|
|
|
|
|
|
--brand-experiment-15a: var(--mention); /* background of reacted reactions */
|
|
|
|
--brand-experiment-15a: var(--mention); /* background of reacted reactions */
|
|
|
|
--brand-360: var(--accent-2); /* invite text */
|
|
|
|
--brand-360: var(--dark-pink); /* invite text */
|
|
|
|
|
|
|
|
|
|
|
|
--primary-500: var(--bg-2); /* progress bars */
|
|
|
|
--primary-500: var(--bg-2); /* progress bars */
|
|
|
|
--primary-600: var(--bg-3); /* delete message preview */
|
|
|
|
--primary-600: var(--bg-3); /* delete message preview */
|
|
|
|
--primary-630: var(--bg-3); /* billing transaction history */
|
|
|
|
--primary-630: var(--bg-3); /* billing transaction history */
|
|
|
|
--primary-660: var(--bg-3); /* search popout "enter" bar */
|
|
|
|
--primary-660: var(--bg-3); /* search popout "enter" bar */
|
|
|
|
|
|
|
|
|
|
|
|
--white-500: var(--text-1);
|
|
|
|
--white-500: var(--dark-pink);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.menu_d90b3d {
|
|
|
|
|
|
|
|
background: var(--pink-white) /* Right click menu */
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.item_d90b3d {
|
|
|
|
|
|
|
|
color: var(--dark-pink)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.scroller_d53d65 {
|
|
|
|
|
|
|
|
background: var(--light-pink)
|
|
|
|
|
|
|
|
}
|
|
|
|