Fix: Bugs Tnixc found and hopefully the rest (#235)
This commit is contained in:
Jade Herd
@@ -262,7 +262,7 @@ button[class*="emojiButtonNormal"] > div > div {
|
||||
--interactive-active: #{$text};
|
||||
|
||||
// "spine" svgs before threads
|
||||
svg[class|="spine"] {
|
||||
svg[class^="spine"] {
|
||||
color: $surface2;
|
||||
}
|
||||
|
||||
@@ -308,12 +308,12 @@ nav[class*="guilds-"].theme-dark {
|
||||
@import "@catppuccin/palette/scss/mocha";
|
||||
|
||||
// server icons
|
||||
foreignObject > div[data-list-item-id|="guildsnav_"] {
|
||||
foreignObject > div[data-list-item-id^="guildsnav_"] {
|
||||
background-color: lighten($base, 2%);
|
||||
|
||||
&:hover,
|
||||
&[class*="selected"] {
|
||||
> div[class|="childWrapper"] {
|
||||
> div[class^="childWrapper"] {
|
||||
color: $crust;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -326,10 +326,10 @@ nav[class*="guilds-"].theme-dark {
|
||||
}
|
||||
|
||||
// lightens folder wrapper bg
|
||||
span[class|="expandedFolderBackground"] {
|
||||
span[class^="expandedFolderBackground"] {
|
||||
background-color: lighten($base, 3%);
|
||||
}
|
||||
div[class|="folder"][class*="hover-"] {
|
||||
div[class^="folder"][class*="hover-"] {
|
||||
background-color: lighten($base, 8%);
|
||||
}
|
||||
|
||||
@@ -340,8 +340,8 @@ nav[class*="guilds-"].theme-dark {
|
||||
}
|
||||
|
||||
// server list icons
|
||||
div[class|="upperBadge"] {
|
||||
> div[class|="iconBadge"] {
|
||||
div[class^="upperBadge"] {
|
||||
> div[class^="iconBadge"] {
|
||||
path {
|
||||
color: $base;
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
color: $crust;
|
||||
|
||||
// darken the nitro button too
|
||||
svg[class|="premiumIcon"] {
|
||||
svg[class^="premiumIcon"] {
|
||||
color: darken($pink, 20%);
|
||||
}
|
||||
|
||||
@@ -30,11 +30,11 @@
|
||||
}
|
||||
|
||||
// For some reason, red buttons on click turn blue. Sure.
|
||||
button[class*="lookFilled-"][class*="colorRed_"]:active {
|
||||
button[class*="lookFilled_"][class*="colorRed_"]:active {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
[class*="lookOutlined-"][class*="colorPrimary_"] {
|
||||
[class*="lookOutlined_"][class*="colorPrimary_"] {
|
||||
border-color: $surface1;
|
||||
|
||||
&:hover {
|
||||
@@ -45,9 +45,9 @@ button[class*="lookFilled-"][class*="colorRed_"]:active {
|
||||
}
|
||||
|
||||
// buttons in sidebar when in calls
|
||||
div[class|="actionButtons"] {
|
||||
[class|="button"][class*="buttonColor_"],
|
||||
[class|="button"] [class*="buttonColor_"] {
|
||||
div[class^="actionButtons"] {
|
||||
[class^="button"][class*="buttonColor_"],
|
||||
[class^="button"] [class*="buttonColor_"] {
|
||||
background-color: $surface1;
|
||||
|
||||
&[class*="buttonActive_"] {
|
||||
@@ -66,11 +66,11 @@ div[class|="actionButtons"] {
|
||||
}
|
||||
|
||||
// lookInverted buttons should have darker brand text
|
||||
[class*="lookInverted-"][class*="colorBrand_"] {
|
||||
[class*="lookInverted_"][class*="colorBrand_"] {
|
||||
color: var(--brand-experiment-600);
|
||||
|
||||
// darken the nitro button too
|
||||
svg[class|="premiumIcon"] {
|
||||
svg[class^="premiumIcon"] {
|
||||
color: darken($pink, 15%);
|
||||
}
|
||||
}
|
||||
@@ -78,17 +78,17 @@ div[class|="actionButtons"] {
|
||||
// lookLink + colorPrimary should be themed
|
||||
.theme-dark,
|
||||
.theme-light {
|
||||
[class*="lookLink-"][class*="colorPrimary_"] {
|
||||
[class*="lookLink_"][class*="colorPrimary_"] {
|
||||
color: $text;
|
||||
}
|
||||
[class*="lookFilled-"][class*="colorTransparent_"] {
|
||||
[class*="lookFilled_"][class*="colorTransparent_"] {
|
||||
color: $text;
|
||||
background-color: $surface0;
|
||||
}
|
||||
}
|
||||
|
||||
// dangerous button when hovered is colored properly
|
||||
div[class*="button-"][class*="dangerous_"]:hover {
|
||||
div[class*="button_"][class*="dangerous_"]:hover {
|
||||
color: darken($red, 10%);
|
||||
}
|
||||
|
||||
@@ -102,12 +102,12 @@ div[role="radio"][class*="selected"] {
|
||||
}
|
||||
}
|
||||
//nonspecific radio buttons
|
||||
[class*="container-"][style*="background-color: var(--green_360)"] {
|
||||
[class*="container_"][style*="background_color: var(__green_360)"] {
|
||||
--green-360: #{$green}; //vencord plugin settings
|
||||
background-color: $green !important;
|
||||
}
|
||||
[class*="container-"][style*="background-color: var(--primary_400)"],
|
||||
[class*="container-"][style*="background_color: rgb(130, 133, 143)"] {
|
||||
[class*="container_"][style*="background_color: var(__primary_400)"],
|
||||
[class*="container_"][style*="background_color: rgb(130, 133, 143)"] {
|
||||
background-color: $crust !important; //used in a lot of places
|
||||
}
|
||||
// vencord spotify plugin button theming support (uses vencord-specific classes)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
[class|="chatContent"] {
|
||||
[class^="chatContent"] {
|
||||
div[class*="wrapperAudio_"],
|
||||
div[class*="imageWrapper_"] {
|
||||
div[class*="audioControls"],
|
||||
@@ -14,28 +14,28 @@
|
||||
|
||||
// new message ruler
|
||||
#---new-messages-bar {
|
||||
span[class|="unreadPill"] {
|
||||
span[class^="unreadPill"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
|
||||
// new message bar
|
||||
div[class|="newMessagesBar"] {
|
||||
div[class^="newMessagesBar"] {
|
||||
button {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
|
||||
// text input area
|
||||
div[class|="channelTextArea"] {
|
||||
div[class|="buttons"] * {
|
||||
div[class^="channelTextArea"] {
|
||||
div[class^="buttons"] * {
|
||||
color: var(--interactive-normal) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// reactions
|
||||
[id|="message-reactions"] {
|
||||
div[class|="reaction"] {
|
||||
[id^="message-reactions"] {
|
||||
div[class^="reaction"] {
|
||||
background-color: $surface0;
|
||||
&:hover {
|
||||
background-color: var(--brand-experiment-20a);
|
||||
@@ -49,8 +49,8 @@
|
||||
0 0 0 2px $mauve,
|
||||
0 0 16px $lavender;
|
||||
}
|
||||
div[class|="navButtonSuperReactActive"],
|
||||
div[class|="navButtonSuperReactActive"]:hover {
|
||||
div[class^="navButtonSuperReactActive"],
|
||||
div[class^="navButtonSuperReactActive"]:hover {
|
||||
background: linear-gradient(270deg, $pink, $lavender 33.63%, $mauve);
|
||||
color: $crust;
|
||||
}
|
||||
@@ -62,7 +62,7 @@
|
||||
button[class*="navButtonActive_"]:hover {
|
||||
color: $crust;
|
||||
}
|
||||
div[class*="colorPremiumGradient-"][class*="focused_"] {
|
||||
div[class*="colorPremiumGradient_"][class*="focused_"] {
|
||||
background: linear-gradient(270deg, $pink, $lavender 33.63%, $mauve);
|
||||
color: $crust !important;
|
||||
}
|
||||
@@ -81,9 +81,9 @@
|
||||
}
|
||||
|
||||
// chat header
|
||||
div[class|="container"][class*="header_"] {
|
||||
div[class^="container"][class*="header_"] {
|
||||
div[class*="addReactButton_"],
|
||||
div[class|="buttons"]:not([class*="lookBlank_"]) div[class|="contents"] {
|
||||
div[class^="buttons"]:not([class*="lookBlank_"]) div[class^="contents"] {
|
||||
background: $surface0;
|
||||
&:hover {
|
||||
background-color: var(--brand-experiment-20a);
|
||||
@@ -93,15 +93,15 @@
|
||||
}
|
||||
|
||||
// "Messages failed to load" bar
|
||||
div[class|="messagesErrorBar"] div[class*="barButtonBase_"] {
|
||||
div[class^="messagesErrorBar"] div[class*="barButtonBase_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
// code stuff
|
||||
// [class*="after_inlineCode_"],
|
||||
// [class*="before_inlineCode_"],
|
||||
// [class|="syntaxBefore"],
|
||||
// [class|="syntaxAfter"] {
|
||||
// [class^="syntaxBefore"],
|
||||
// [class^="syntaxAfter"] {
|
||||
// color: $overlay0;
|
||||
// }
|
||||
|
||||
@@ -113,9 +113,9 @@
|
||||
background: $surface0;
|
||||
}
|
||||
|
||||
div[class|="container"] div[class|="cardWrapper"] {
|
||||
div[class^="container"] div[class^="cardWrapper"] {
|
||||
div[class*="completed_"] {
|
||||
svg[class|="checkmark"] {
|
||||
svg[class^="checkmark"] {
|
||||
background-color: $green;
|
||||
color: $crust;
|
||||
}
|
||||
@@ -130,7 +130,7 @@ div[style*="d1382af8d9e755bc44811b1fd92990a8.svg"] {
|
||||
}
|
||||
|
||||
// server boost icon... again
|
||||
main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
|
||||
main[class^="chatContent"] div[id^="message-content"] svg[class^="icon"] {
|
||||
> path[d="M4 0L0 4V8L4 12L8 8V4L4 0ZM7 7.59L4 10.59L1 7.59V4.41L4 1.41L7 4.41V7.59Z"],
|
||||
> path[d="M2 4.83V7.17L4 9.17L6 7.17V4.83L4 2.83L2 4.83Z"] {
|
||||
color: $pink;
|
||||
@@ -140,8 +140,8 @@ main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
|
||||
// spoiler messages
|
||||
.theme-dark,
|
||||
.theme-light {
|
||||
span[class|="spoilerContent"],
|
||||
div[class|="spoilerContent"] {
|
||||
span[class^="spoilerContent"],
|
||||
div[class^="spoilerContent"] {
|
||||
background-color: $surface0;
|
||||
|
||||
&[class*="hidden"] {
|
||||
@@ -167,14 +167,14 @@ main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="spoilerContainer"] {
|
||||
div[class|="spoilerWarning"] {
|
||||
div[class^="spoilerContainer"] {
|
||||
div[class^="spoilerWarning"] {
|
||||
color: $text;
|
||||
background-color: adjust-color($crust, $alpha: -0.3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
div[class|="spoilerWarning"] {
|
||||
div[class^="spoilerWarning"] {
|
||||
color: $text;
|
||||
background-color: $crust;
|
||||
}
|
||||
@@ -187,7 +187,7 @@ main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
|
||||
}
|
||||
|
||||
// cooldown text
|
||||
div[class|="cooldownWrapper"] {
|
||||
div[class^="cooldownWrapper"] {
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
@@ -204,7 +204,7 @@ div[class*="autocomplete_"] {
|
||||
div[class*="autocompleteRowContentSecondary"] {
|
||||
background-color: transparent;
|
||||
}
|
||||
div[class|="usageWrapper"] > div[class*="title_"] {
|
||||
div[class^="usageWrapper"] > div[class*="title_"] {
|
||||
color: $brand !important;
|
||||
}
|
||||
|
||||
@@ -214,17 +214,17 @@ div[class*="autocomplete_"] {
|
||||
}
|
||||
|
||||
// emoji button
|
||||
div[class|="channelTextArea"] button[class*="emojiButton_"] {
|
||||
div[class^="channelTextArea"] button[class*="emojiButton_"] {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
// upload???
|
||||
[class|="uploadDropModal"] {
|
||||
[class^="uploadDropModal"] {
|
||||
&[class*="error"] {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
div[class|="inner"] {
|
||||
div[class^="inner"] {
|
||||
border-color: $crust;
|
||||
|
||||
* {
|
||||
@@ -239,14 +239,14 @@ div[class^="chat"] > div[class^="content"] > div[class^="container"] {
|
||||
background-color: $base;
|
||||
}
|
||||
|
||||
div[class|="grid"][class*="scrollerBase"],
|
||||
> div[class|="chatContainer"] > div[class|="container"] {
|
||||
div[class^="grid"][class*="scrollerBase"],
|
||||
> div[class^="chatContainer"] > div[class^="container"] {
|
||||
background-color: $base;
|
||||
}
|
||||
|
||||
// forum icons
|
||||
div[class|="pinIcon"],
|
||||
div[class|="stepStatus"] {
|
||||
div[class^="pinIcon"],
|
||||
div[class^="stepStatus"] {
|
||||
> svg > path {
|
||||
fill: $subtext0;
|
||||
}
|
||||
@@ -264,13 +264,13 @@ div[class^="chat"] > div[class^="content"] > div[class^="container"] {
|
||||
}
|
||||
|
||||
// discord icon
|
||||
svg[class|="discordIcon"] {
|
||||
svg[class^="discordIcon"] {
|
||||
background-color: $brand;
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
// new badge
|
||||
div[class|="newBadge"] {
|
||||
div[class^="newBadge"] {
|
||||
background-color: $lavender !important;
|
||||
color: $crust;
|
||||
}
|
||||
@@ -280,7 +280,7 @@ div[class^="chat"] > div[class^="content"] > div[class^="container"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="sidebar"] > section[class|="panels"] {
|
||||
div[class^="sidebar"] > section[class^="panels"] {
|
||||
svg[class*="buttonIcon_"],
|
||||
div[class*="buttonContents"] {
|
||||
fill: $text;
|
||||
@@ -288,20 +288,20 @@ div[class|="sidebar"] > section[class|="panels"] {
|
||||
}
|
||||
}
|
||||
|
||||
[data-list-id|="forum-channel-list"] {
|
||||
div[class|="body"] > div[class|="tags"] div[class*="pill"] {
|
||||
[data-list-id^="forum-channel-list"] {
|
||||
div[class^="body"] > div[class^="tags"] div[class*="pill"] {
|
||||
background-color: $mantle;
|
||||
}
|
||||
|
||||
// new post button
|
||||
button[class|="submitButton"][class*="colorBrand"] {
|
||||
button[class^="submitButton"][class*="colorBrand"] {
|
||||
background-color: $brand;
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
|
||||
// Bot slash command field
|
||||
div[class|="applicationCommand"] {
|
||||
div[class^="applicationCommand"] {
|
||||
span[class*="selectedPill_"] {
|
||||
border-color: $brand !important;
|
||||
}
|
||||
@@ -312,10 +312,10 @@ div[class|="applicationCommand"] {
|
||||
}
|
||||
|
||||
// fix the sidebar on smaller servers
|
||||
div[class|="chat"]
|
||||
> div[class|="content"]
|
||||
main[class|="chatContent"]
|
||||
+ div[class|="container"] {
|
||||
div[class^="chat"]
|
||||
> div[class^="content"]
|
||||
main[class^="chatContent"]
|
||||
+ div[class^="container"] {
|
||||
background-color: var(--background-secondary);
|
||||
}
|
||||
|
||||
@@ -324,13 +324,18 @@ div[class|="chat"]
|
||||
border: 1px solid $red !important;
|
||||
}
|
||||
|
||||
// Threads header icon
|
||||
div[class^="messagesWrapper"] ol[class^="scrollerInner"] svg[class^="icon"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
// Jump to Present bar text
|
||||
[class*="barButtonBase_"] {
|
||||
color: $crust !important;
|
||||
}
|
||||
|
||||
// calls
|
||||
div[class|="callContainer"] {
|
||||
div[class^="callContainer"] {
|
||||
[class*="controlIcon_"] {
|
||||
color: $subtext1;
|
||||
|
||||
@@ -355,7 +360,7 @@ div[class|="callContainer"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
div[class*="button-"][class*="contents_"],
|
||||
div[class*="button_"][class*="contents_"],
|
||||
button[class*="cta_"],
|
||||
button[class*="participantsButton_"] {
|
||||
background-color: $surface0;
|
||||
@@ -363,59 +368,59 @@ div[class|="callContainer"] {
|
||||
}
|
||||
|
||||
// call quality and nitro indicator
|
||||
div[class|="indicators"] {
|
||||
div[class|="liveQualityIndicator"] {
|
||||
div[class^="indicators"] {
|
||||
div[class^="liveQualityIndicator"] {
|
||||
background-color: $red !important;
|
||||
|
||||
svg[class|="premiumStreamIcon"] {
|
||||
svg[class^="premiumStreamIcon"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="videoControls"] {
|
||||
div[class|="children"] {
|
||||
div[class^="videoControls"] {
|
||||
div[class^="children"] {
|
||||
div[class*="playingText_"] {
|
||||
color: $subtext1;
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="bottomControls"] {
|
||||
button[class|="textButton"] {
|
||||
div[class^="bottomControls"] {
|
||||
button[class^="textButton"] {
|
||||
color: $text;
|
||||
background-color: $surface1;
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="toolbar"] {
|
||||
svg[class|="controlIcon"] {
|
||||
div[class^="toolbar"] {
|
||||
svg[class^="controlIcon"] {
|
||||
color: var(--interactive-normal);
|
||||
}
|
||||
|
||||
div[class|="streamQualityIndicator"] div[class|="liveQualityIndicator"] {
|
||||
div[class^="streamQualityIndicator"] div[class^="liveQualityIndicator"] {
|
||||
background-color: $surface1 !important;
|
||||
|
||||
div[class|="qualityIndicator"] {
|
||||
div[class^="qualityIndicator"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
svg[class|="premiumStreamIcon"] {
|
||||
svg[class^="premiumStreamIcon"] {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="liveIndicator"] div[class|="live"] {
|
||||
div[class^="liveIndicator"] div[class^="live"] {
|
||||
background-color: $red !important;
|
||||
color: $crust !important;
|
||||
}
|
||||
}
|
||||
|
||||
button[class*="leftTrayIcon-"][class*="buttonColor_"] {
|
||||
button[class*="leftTrayIcon_"][class*="buttonColor_"] {
|
||||
background-color: $surface0;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
div[class|="badge"] {
|
||||
div[class^="badge"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
@@ -436,7 +441,7 @@ div[class|="callContainer"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
svg[class|="raisedHandButtonIcon"] {
|
||||
svg[class^="raisedHandButtonIcon"] {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
@@ -490,7 +495,7 @@ div[class*="chat_"] {
|
||||
background-color: $mantle;
|
||||
}
|
||||
|
||||
div[class*="content-"][class*="container_"] {
|
||||
div[class*="content_"][class*="container_"] {
|
||||
background-color: $mantle;
|
||||
|
||||
div[class*="container"] {
|
||||
@@ -506,16 +511,9 @@ div[class*="chat_"] {
|
||||
}
|
||||
|
||||
div[class*="browser"] {
|
||||
div[class*="content"] div[class|="container"] {
|
||||
div[class*="content"] div[class^="container"] {
|
||||
background-color: $base;
|
||||
}
|
||||
|
||||
div[class*="checkbox_"] {
|
||||
border-color: $crust !important;
|
||||
svg > path {
|
||||
fill: $crust;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="scrollerContainer_"] {
|
||||
@@ -591,7 +589,7 @@ div[class*="chat_"] {
|
||||
// spotify listen along invite
|
||||
[id*="message-accessories-"] > [class*="invite_"] {
|
||||
background-color: $base;
|
||||
[class*="inFront-"][class*="header_"] {
|
||||
[class*="inFront_"][class*="header_"] {
|
||||
color: $subtext0;
|
||||
}
|
||||
[class*="partyStatus_"] {
|
||||
@@ -605,12 +603,12 @@ div[class*="chat_"] {
|
||||
}
|
||||
|
||||
// members tab
|
||||
div[class|="chat"][class*="page-"] div[class|="content"][class*="container_"] {
|
||||
div[class^="chat"][class*="page_"] div[class^="content"][class*="container_"] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Server Guide
|
||||
div[class|="chat"] div[class|="homeContainer"] {
|
||||
div[class^="chat"] div[class^="homeContainer"] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -623,6 +621,6 @@ div[class|="chat"] div[class|="homeContainer"] {
|
||||
}
|
||||
|
||||
// Members sidebar
|
||||
aside[class|="membersWrap"] {
|
||||
aside[class^="membersWrap"] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
// online
|
||||
rect[fill="#23a55a"],
|
||||
foreignObject[mask="url(#svg-mask-status-online)"] > div,
|
||||
div[class|="dotOnline"],
|
||||
i[class|="statusOnline"] {
|
||||
div[class^="dotOnline"],
|
||||
i[class^="statusOnline"] {
|
||||
fill: $green !important;
|
||||
background-color: $green !important;
|
||||
}
|
||||
@@ -37,8 +37,8 @@ rect[fill="rgba(242, 63, 67, 1)"] {
|
||||
rect[fill="#82858f"],
|
||||
foreignObject[mask="url(#svg-mask-status-offline)"] > div,
|
||||
foreignObject[mask="url(#svg-mask-status-offline)"] > rect,
|
||||
div[class|="dotOffline"],
|
||||
i[class|="statusOffline"] {
|
||||
div[class^="dotOffline"],
|
||||
i[class^="statusOffline"] {
|
||||
fill: $subtext0 !important;
|
||||
background-color: $subtext0 !important;
|
||||
}
|
||||
@@ -110,7 +110,7 @@ div[class*="flowerStarContainer_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: #fff;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
div[class^="childContainer"] svg * {
|
||||
fill: $crust;
|
||||
}
|
||||
}
|
||||
@@ -122,7 +122,7 @@ div[class*="flowerStarContainer_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $surface2;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
div[class^="childContainer"] svg * {
|
||||
fill: $text;
|
||||
}
|
||||
}
|
||||
@@ -131,7 +131,7 @@ div[class*="flowerStarContainer_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $pink;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
div[class^="childContainer"] svg * {
|
||||
fill: $crust;
|
||||
}
|
||||
}
|
||||
@@ -140,7 +140,7 @@ div[class*="flowerStarContainer_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $green;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
div[class^="childContainer"] svg * {
|
||||
fill: $crust;
|
||||
}
|
||||
}
|
||||
@@ -149,18 +149,18 @@ div[class*="flowerStarContainer_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $brand;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
div[class^="childContainer"] svg * {
|
||||
fill: $crust;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// public / verified server info pill
|
||||
div[class|="communityInfoPill"] {
|
||||
div[class^="communityInfoPill"] {
|
||||
--background-accent: #{adjust-color($base, $alpha: -0.3)};
|
||||
color: $text;
|
||||
|
||||
div[class|="text"] {
|
||||
div[class^="text"] {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -171,18 +171,18 @@ a[class*="socialLink_"][href*="discord"] {
|
||||
}
|
||||
|
||||
// upload icon
|
||||
svg[class|="uploadIcon"] {
|
||||
svg[class^="uploadIcon"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
// empty states. why is it colored like this
|
||||
.theme-dark,
|
||||
.theme-light {
|
||||
h2[class|="emptyStateHeader"] {
|
||||
h2[class^="emptyStateHeader"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
p[class|="emptyStateSubtext"] {
|
||||
p[class^="emptyStateSubtext"] {
|
||||
color: $subtext0;
|
||||
}
|
||||
}
|
||||
@@ -200,31 +200,31 @@ div[class^="numberBadge"] {
|
||||
}
|
||||
|
||||
// Channel and role badge
|
||||
div[class|="newChannel"] {
|
||||
div[class^="newChannel"] {
|
||||
color: $crust;
|
||||
background-color: $brand !important;
|
||||
}
|
||||
|
||||
// Clyde AI Bot tag
|
||||
div[class|="botTag"] {
|
||||
div[class^="botTag"] {
|
||||
background-color: $brand;
|
||||
}
|
||||
|
||||
// Add Friend text box border on selection should use accent
|
||||
div[class|="addFriendInputWrapper"]:focus-within {
|
||||
div[class^="addFriendInputWrapper"]:focus-within {
|
||||
border-color: $brand;
|
||||
}
|
||||
|
||||
// spotify button on text area
|
||||
button[class|="attachButton"] {
|
||||
svg path[class|="attachButtonPlay"] {
|
||||
button[class^="attachButton"] {
|
||||
svg path[class^="attachButtonPlay"] {
|
||||
color: $green;
|
||||
fill: $green;
|
||||
}
|
||||
}
|
||||
|
||||
// Forum channel pins
|
||||
div[class|="tags"] div[class|="pinIcon"] path {
|
||||
div[class^="tags"] div[class^="pinIcon"] path {
|
||||
fill: $base !important;
|
||||
}
|
||||
|
||||
@@ -238,7 +238,7 @@ div[class*="avatarSpeaking_"] {
|
||||
inset 0 0 0 3px var(--background-secondary);
|
||||
}
|
||||
|
||||
div[class*="videoLayer_"] > div[class|="tileChild"] > div[class|="border"] {
|
||||
div[class*="videoLayer_"] > div[class^="tileChild"] > div[class^="border"] {
|
||||
&[class*="speaking_"] {
|
||||
-webkit-box-shadow:
|
||||
inset 0 0 0 2px $green,
|
||||
@@ -290,3 +290,11 @@ span[class*="channelMention"]:hover,
|
||||
):hover {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
div[class^="checkbox"][class*="checked_"] {
|
||||
border-color: $crust !important;
|
||||
|
||||
svg path {
|
||||
fill: $crust !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,10 +16,10 @@ nav[class*="guilds_"] {
|
||||
}
|
||||
|
||||
// lightens folder wrapper bg
|
||||
span[class|="expandedFolderBackground"] {
|
||||
span[class^="expandedFolderBackground"] {
|
||||
background-color: lighten($base, 3%);
|
||||
}
|
||||
div[class|="folder"][class*="hover_"] {
|
||||
div[class^="folder"][class*="hover_"] {
|
||||
background-color: lighten($base, 8%);
|
||||
}
|
||||
|
||||
@@ -36,8 +36,8 @@ nav[class*="guilds_"] {
|
||||
}
|
||||
|
||||
// server list icons
|
||||
div[class|="upperBadge"] {
|
||||
> div[class|="iconBadge"] path {
|
||||
div[class^="upperBadge"] {
|
||||
> div[class^="iconBadge"] path {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
@@ -46,6 +46,6 @@ div[class|="upperBadge"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="lowerBadge"] div[class|="iconBadge"] path {
|
||||
div[class^="lowerBadge"] div[class^="iconBadge"] path {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// settings
|
||||
div[class|="sidebarRegion"] {
|
||||
div[class|="serverBoostTabItem"] {
|
||||
svg[class|="icon"] {
|
||||
div[class^="sidebarRegion"] {
|
||||
div[class^="serverBoostTabItem"] {
|
||||
svg[class^="icon"] {
|
||||
fill: $pink !important;
|
||||
}
|
||||
|
||||
@@ -9,13 +9,13 @@ div[class|="sidebarRegion"] {
|
||||
background-color: $brand !important;
|
||||
color: $crust !important;
|
||||
|
||||
svg[class|="icon"] {
|
||||
svg[class^="icon"] {
|
||||
fill: $crust !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="premiumTab"] {
|
||||
div[class^="premiumTab"] {
|
||||
> div > svg > path {
|
||||
fill: $pink;
|
||||
}
|
||||
@@ -29,7 +29,7 @@ div[class|="sidebarRegion"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="tabBarItemContainer-"] [class*="textBadge_"] {
|
||||
div[class*="tabBarItemContainer_"] [class*="textBadge_"] {
|
||||
color: $crust;
|
||||
|
||||
&[style*="background-color: var(--brand-500);"] {
|
||||
@@ -38,24 +38,24 @@ div[class|="sidebarRegion"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="contentRegion"] {
|
||||
div[class*="noticeRegion-"] div[style="background_color: rgb(24, 25, 28);"] {
|
||||
div[class^="contentRegion"] {
|
||||
div[class*="noticeRegion_"] div[style="background_color: rgb(24, 25, 28);"] {
|
||||
background-color: $crust !important;
|
||||
}
|
||||
|
||||
div[class|="streamerModeEnabledBtn"] {
|
||||
div[class^="streamerModeEnabledBtn"] {
|
||||
background-color: $mauve;
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
// color bars with ticks
|
||||
[class|="bar"],
|
||||
[class|="markDash"] {
|
||||
[class^="bar"],
|
||||
[class^="markDash"] {
|
||||
background: $surface1;
|
||||
}
|
||||
|
||||
[id="privacy-&-safety-tab"] {
|
||||
div[class|="radioBar"] {
|
||||
div[class^="radioBar"] {
|
||||
&[style*="hsl(139,"] {
|
||||
border-color: $green;
|
||||
}
|
||||
@@ -79,12 +79,6 @@ div[class|="contentRegion"] {
|
||||
button[class*="colorBrandNew"] {
|
||||
background-color: $brand;
|
||||
}
|
||||
|
||||
div[class*="reducedMotion_"] {
|
||||
div[class|="checkbox"] svg path {
|
||||
fill: $crust;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#keybinds-tab {
|
||||
@@ -97,14 +91,14 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
|
||||
#nitro-server-boost-tab {
|
||||
circle[class|="circleProgress"] {
|
||||
circle[class^="circleProgress"] {
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
div[class*="gemIndicatorContainer_"] {
|
||||
background-color: $base;
|
||||
|
||||
div[class|="tierLabel"] {
|
||||
div[class^="tierLabel"] {
|
||||
color: $subtext1;
|
||||
}
|
||||
}
|
||||
@@ -125,14 +119,14 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
|
||||
#subscriptions-tab {
|
||||
[class|="sectionAccountCredit"],
|
||||
[class|="subscriptionDetails"] {
|
||||
[class^="sectionAccountCredit"],
|
||||
[class^="subscriptionDetails"] {
|
||||
border-color: var(--background-modifier-accent);
|
||||
}
|
||||
}
|
||||
|
||||
#library-inventory-tab {
|
||||
div[class|="promotionIcon"] {
|
||||
div[class^="promotionIcon"] {
|
||||
background-color: $base;
|
||||
}
|
||||
}
|
||||
@@ -178,29 +172,29 @@ div[class|="contentRegion"] {
|
||||
border-color: var(--background-modifier-accent);
|
||||
}
|
||||
|
||||
div[class|="defaultIndicator"] {
|
||||
div[class^="defaultIndicator"] {
|
||||
color: $text;
|
||||
background-color: $surface1;
|
||||
}
|
||||
|
||||
div[class*="summaryInfo"],
|
||||
[class|="paymentHeader"] {
|
||||
[class^="paymentHeader"] {
|
||||
color: $text;
|
||||
border-color: var(--background-modifier-accent);
|
||||
}
|
||||
|
||||
div[class|="premiumIndicator"] {
|
||||
div[class^="premiumIndicator"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
div[class|="paymentPane"],
|
||||
div[class^="paymentPane"],
|
||||
div[class*="paginator_"],
|
||||
div[class*="payment_"] {
|
||||
background-color: $surface0;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
div[class|="expandedInfo"] {
|
||||
div[class^="expandedInfo"] {
|
||||
background-color: $surface1;
|
||||
}
|
||||
|
||||
@@ -208,7 +202,7 @@ div[class|="contentRegion"] {
|
||||
color: $subtext1;
|
||||
}
|
||||
|
||||
div[class|="codeRedemptionRedirect"] {
|
||||
div[class^="codeRedemptionRedirect"] {
|
||||
background-color: $mantle;
|
||||
color: $text;
|
||||
border-color: $surface0;
|
||||
@@ -216,7 +210,7 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
|
||||
[id="voice-&-video-tab"] {
|
||||
div[class|="backgroundOptionRing"] {
|
||||
div[class^="backgroundOptionRing"] {
|
||||
border-color: $brand;
|
||||
}
|
||||
}
|
||||
@@ -242,7 +236,7 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
}
|
||||
|
||||
input[class|="gameName"] {
|
||||
input[class^="gameName"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
@@ -272,8 +266,8 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
|
||||
// Voice & Audio checks
|
||||
section[class|="inputSensitivityToggle"] {
|
||||
div[class|="inputSensitivityBar"] {
|
||||
section[class^="inputSensitivityToggle"] {
|
||||
div[class^="inputSensitivityBar"] {
|
||||
background: $surface1;
|
||||
|
||||
&[class*="speaking_"] {
|
||||
@@ -288,24 +282,14 @@ div[class|="contentRegion"] {
|
||||
|
||||
// toggles in preferencs
|
||||
// checked
|
||||
div[class|="control"] > div[class*="checked_"],
|
||||
div[class|="sensitivity"] div[class*="checked_"],
|
||||
div[class^="control"] > div[class*="checked_"],
|
||||
div[class^="sensitivity"] div[class*="checked_"],
|
||||
div[style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)"] {
|
||||
background-color: $green !important;
|
||||
|
||||
// svg[class|="slider"] {
|
||||
// > rect {
|
||||
// fill: $base;
|
||||
// }
|
||||
|
||||
// > svg > path {
|
||||
// fill: $green;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// unchecked
|
||||
div[class|="control"] {
|
||||
div[class^="control"] {
|
||||
> div[style*="background-color: hsl(218, calc(var(--saturation-factor, 1) * 4.6%), 46.9%)"],
|
||||
> div[style$="background-color: rgb(128, 132, 142);"] {
|
||||
background-color: $surface2 !important;
|
||||
@@ -324,7 +308,7 @@ div[class|="contentRegion"] {
|
||||
background-color: $crust;
|
||||
}
|
||||
|
||||
div[class|="progressWithSubscriptions"] > svg > g > rect {
|
||||
div[class^="progressWithSubscriptions"] > svg > g > rect {
|
||||
&:first-child {
|
||||
color: $crust;
|
||||
}
|
||||
@@ -334,18 +318,18 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="tierHeaderUnlocked"],
|
||||
div[class|="tierHeaderLocked"] {
|
||||
div[class^="tierHeaderUnlocked"],
|
||||
div[class^="tierHeaderLocked"] {
|
||||
background-color: $crust;
|
||||
color: $subtext0;
|
||||
|
||||
div[class|="tierUnlocked"] {
|
||||
div[class^="tierUnlocked"] {
|
||||
background-image: linear-gradient(90deg, $blue, $mauve);
|
||||
color: $crust;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
svg[class|="tierIcon"] {
|
||||
svg[class^="tierIcon"] {
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
@@ -353,19 +337,19 @@ div[class|="contentRegion"] {
|
||||
color: $overlay1;
|
||||
}
|
||||
|
||||
svg[class|="tierLock"] {
|
||||
svg[class^="tierLock"] {
|
||||
color: $surface2;
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="tierBody"] {
|
||||
div[class^="tierBody"] {
|
||||
color: $subtext1;
|
||||
background-color: $mantle;
|
||||
}
|
||||
}
|
||||
|
||||
// active circles like the ones on server welcome screen settings
|
||||
svg[class|="activeCircle"] {
|
||||
svg[class^="activeCircle"] {
|
||||
color: $crust;
|
||||
background-color: $green;
|
||||
}
|
||||
@@ -422,7 +406,7 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
|
||||
#family-center-tab {
|
||||
div[class|="featureCards"] svg[class|="icon"] {
|
||||
div[class^="featureCards"] svg[class^="icon"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
@@ -433,8 +417,26 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .theme-light div[class|="contentRegion"] #appearance-tab {
|
||||
div[class|="themeSelection"][class*="lightIcon"] {
|
||||
#appearance-tab {
|
||||
div[class^="selectionCircle"] {
|
||||
box-shadow:
|
||||
inset 0 0 0 2px $blue,
|
||||
inset 0 0 0 4px var(--background-primary);
|
||||
|
||||
svg[class^="checkmarkCircle"] {
|
||||
> circle {
|
||||
fill: $crust !important;
|
||||
}
|
||||
|
||||
> g > path {
|
||||
fill: $blue !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .theme-light div[class^="contentRegion"] #appearance-tab {
|
||||
div[class^="themeSelection"][class*="lightIcon"] {
|
||||
background: $surface0;
|
||||
}
|
||||
}
|
||||
@@ -479,10 +481,10 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="perksModal"] {
|
||||
div[class^="perksModal"] {
|
||||
background-color: $base;
|
||||
|
||||
li[class|="perk"] {
|
||||
li[class^="perk"] {
|
||||
background-color: $mantle;
|
||||
|
||||
svg {
|
||||
@@ -490,45 +492,45 @@ div[class|="perksModal"] {
|
||||
}
|
||||
}
|
||||
|
||||
svg[class|="giftIcon"] {
|
||||
svg[class^="giftIcon"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
div[class|="tierHeaderUnlocked"] {
|
||||
div[class^="tierHeaderUnlocked"] {
|
||||
background-image: linear-gradient(90deg, $blue, $mauve);
|
||||
color: $base;
|
||||
}
|
||||
|
||||
div[class|="tierUnlocked"],
|
||||
div[class|="tierMarkerBackground"] {
|
||||
div[class^="tierUnlocked"],
|
||||
div[class^="tierMarkerBackground"] {
|
||||
background-color: $base;
|
||||
}
|
||||
|
||||
div[class|="barBackground"],
|
||||
div[class|="tierMarkerInProgress"],
|
||||
div[class|="tierBody"] {
|
||||
div[class^="barBackground"],
|
||||
div[class^="tierMarkerInProgress"],
|
||||
div[class^="tierBody"] {
|
||||
background-color: $crust !important;
|
||||
}
|
||||
|
||||
div[class|="tierMarkerAccomplished"] {
|
||||
div[class^="tierMarkerAccomplished"] {
|
||||
background: $pink !important;
|
||||
}
|
||||
|
||||
div[class|="tierMarkerInProgress"] [class|="currentTierIcon"] {
|
||||
div[class^="tierMarkerInProgress"] [class^="currentTierIcon"] {
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
div[class|="barForeground"],
|
||||
div[class|="tierMarkerAccomplished"] {
|
||||
div[class^="barForeground"],
|
||||
div[class^="tierMarkerAccomplished"] {
|
||||
background-color: $pink;
|
||||
}
|
||||
|
||||
svg[class|="currentTierIcon"] {
|
||||
svg[class^="currentTierIcon"] {
|
||||
color: $base;
|
||||
}
|
||||
|
||||
div[class*="tierMarkerLabelText"],
|
||||
svg[class|="tierLock"] {
|
||||
svg[class^="tierLock"] {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -536,7 +538,7 @@ div[class|="perksModal"] {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
div[class|="tierHeaderLocked"] {
|
||||
div[class^="tierHeaderLocked"] {
|
||||
background-color: darken($crust, 5%);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -547,13 +549,13 @@ div[class|="perksModal"] {
|
||||
}
|
||||
|
||||
// boost progress bar
|
||||
div[class|="sidebar"] div[class|="container"] {
|
||||
div[class|="progressBar"] {
|
||||
div[class^="sidebar"] div[class^="container"] {
|
||||
div[class^="progressBar"] {
|
||||
background: linear-gradient(90deg, $blue, $mauve);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
div[class|="progressBar"] {
|
||||
div[class^="progressBar"] {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
hsl(221, 70%, 55.5%),
|
||||
@@ -564,12 +566,12 @@ div[class|="sidebar"] div[class|="container"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="divider"] {
|
||||
div[class^="divider"] {
|
||||
border-color: var(--background-modifier-accent);
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="pageWrapper"] {
|
||||
div[class^="pageWrapper"] {
|
||||
background: $base !important;
|
||||
|
||||
div[class*="searchBox_"] {
|
||||
@@ -584,33 +586,33 @@ div[class|="pageWrapper"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="categoryPill-"][class*="selected_"] div {
|
||||
div[class*="categoryPill_"][class*="selected_"] div {
|
||||
color: $crust !important;
|
||||
}
|
||||
}
|
||||
|
||||
// public server home
|
||||
div[class|="homeContainer"] {
|
||||
div[class^="homeContainer"] {
|
||||
background: $base !important;
|
||||
|
||||
> div[class|="homeContent"] div[class*="card_"] {
|
||||
> div[class^="homeContent"] div[class*="card_"] {
|
||||
background: $surface0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// the header for the public server home
|
||||
section[class|="title"] {
|
||||
section[class^="title"] {
|
||||
background: var(--background-primary) !important;
|
||||
}
|
||||
|
||||
div[class|="categoryItem"][class*="selectedCategoryItem"],
|
||||
div[class^="categoryItem"][class*="selectedCategoryItem"],
|
||||
button[class*="lookFilled"] div[class*="addButton"] {
|
||||
// color when selected or if button
|
||||
color: $crust !important;
|
||||
}
|
||||
|
||||
// new label
|
||||
div[class|="itemInner"] div[class|="new"] > div[class*="newText_"] {
|
||||
div[class^="itemInner"] div[class^="new"] > div[class*="newText_"] {
|
||||
color: $crust !important;
|
||||
}
|
||||
|
||||
@@ -632,12 +634,12 @@ div[class*="directoryModal_"] {
|
||||
}
|
||||
|
||||
// student hubs
|
||||
section[class|="guildListSection"] {
|
||||
div[class|="guildList"]:first-child {
|
||||
div[class|="iconContainer"] {
|
||||
section[class^="guildListSection"] {
|
||||
div[class^="guildList"]:first-child {
|
||||
div[class^="iconContainer"] {
|
||||
background-color: $green;
|
||||
|
||||
> div[class|="icon"] {
|
||||
> div[class^="icon"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='none' height='24' viewBox='0 0 25 24' width='25' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23#{str-slice(inspect($crust), 2)}'%3E%3Cpath clip-rule='evenodd' d='m13.25 18v-12h-1.5v12z' fill-rule='evenodd'/%3E%3Cpath clip-rule='evenodd' d='m7 12.75c-.69036 0-1.25.5596-1.25 1.25v4h-1.5v-4c0-1.5188 1.23122-2.75 2.75-2.75h11c1.5188 0 2.75 1.2312 2.75 2.75v4h-1.5v-4c0-.6904-.5596-1.25-1.25-1.25z' fill-rule='evenodd'/%3E%3Cpath d='m12.5 7c-1.3807 0-2.5-1.11929-2.5-2.5s1.1193-2.5 2.5-2.5 2.5 1.11929 2.5 2.5-1.1193 2.5-2.5 2.5z'/%3E%3Cpath d='m20 22c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5-1.1193 2.5-2.5 2.5z'/%3E%3Cpath d='m12.5 22c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5-1.1193 2.5-2.5 2.5z'/%3E%3Cpath d='m5 22c-1.38071 0-2.5-1.1193-2.5-2.5s1.11929-2.5 2.5-2.5 2.5 1.1193 2.5 2.5-1.11929 2.5-2.5 2.5z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
@@ -653,13 +655,13 @@ path[d="M17.225 6.06504C17.3227 6.00866 17.4362 5.98608 17.548 6.00084C17.6598 6
|
||||
fill: $crust;
|
||||
}
|
||||
|
||||
div[class|="tierPreviews"] {
|
||||
button[class|="button"] {
|
||||
div[class^="tierPreviews"] {
|
||||
button[class^="button"] {
|
||||
background: linear-gradient(90deg, $teal, $blue);
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="notice"] {
|
||||
div[class^="notice"] {
|
||||
div[class*="noticeText_"] {
|
||||
color: $crust;
|
||||
}
|
||||
@@ -668,11 +670,11 @@ div[class|="notice"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
div[class|="closeButton"] > svg > path {
|
||||
div[class^="closeButton"] > svg > path {
|
||||
fill: $crust;
|
||||
}
|
||||
|
||||
button[class|="button"] {
|
||||
button[class^="button"] {
|
||||
border-color: $crust;
|
||||
color: $crust;
|
||||
|
||||
@@ -685,7 +687,7 @@ div[class|="notice"] {
|
||||
background-color: $mauve;
|
||||
color: $crust;
|
||||
|
||||
button[class|="button"]:hover {
|
||||
button[class^="button"]:hover {
|
||||
background: darken($mauve, 10%);
|
||||
color: $mantle;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
div[class|="layerContainer"] [role="menu"] {
|
||||
div[class^="layerContainer"] [role="menu"] {
|
||||
// make menu items readable when hovered
|
||||
--brand-experiment-560: var(--brand-experiment-25a);
|
||||
--brand-experiment-600: var(--brand-experiment);
|
||||
@@ -46,13 +46,13 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
}
|
||||
|
||||
// Account switcher submenu
|
||||
div[id|="account-switch-account"] {
|
||||
div[id^="account-switch-account"] {
|
||||
&[class*="focused"] {
|
||||
div[class*="userMenuUsername"] div {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
svg[class|="activeIcon"] {
|
||||
svg[class^="activeIcon"] {
|
||||
circle {
|
||||
fill: $blue;
|
||||
}
|
||||
@@ -62,7 +62,7 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
}
|
||||
}
|
||||
|
||||
svg[class|="activeIcon"] {
|
||||
svg[class^="activeIcon"] {
|
||||
circle {
|
||||
fill: $crust;
|
||||
}
|
||||
@@ -79,7 +79,7 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
}
|
||||
|
||||
#guild-header-popout-premium-subscribe {
|
||||
div[class|="iconContainer"] > svg {
|
||||
div[class^="iconContainer"] > svg {
|
||||
color: $pink;
|
||||
}
|
||||
}
|
||||
@@ -94,8 +94,8 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
|
||||
.theme-dark,
|
||||
.theme-light {
|
||||
div[class|="layerContainer"] div[id|="popout_"] > div[class*="didRender_"] {
|
||||
&:not([class|="animatorBottom"]) > div {
|
||||
div[class^="layerContainer"] div[id^="popout_"] > div[class*="didRender_"] {
|
||||
&:not([class^="animatorBottom"]) > div {
|
||||
div[class*="flowerStarContainer_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $brand;
|
||||
@@ -134,21 +134,21 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
}
|
||||
|
||||
div[class*="recentMentionsPopout"] {
|
||||
div[class|="header"] {
|
||||
div[class|="tabBar"] {
|
||||
div[class|="badge"],
|
||||
div[class|="tab"][class*="active_"] {
|
||||
div[class^="header"] {
|
||||
div[class^="tabBar"] {
|
||||
div[class^="badge"],
|
||||
div[class^="tab"][class*="active_"] {
|
||||
color: $base;
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="controls-"] {
|
||||
div[class^="controls-"] {
|
||||
--background-secondary: #{$surface0};
|
||||
--background-primary: #{adjust-color($surface0, $alpha: -0.1)};
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="scroller"] {
|
||||
div[class^="scroller"] {
|
||||
[role="button"] {
|
||||
--background-tertiary: #{adjust-color($subtext0, $alpha: -0.85)};
|
||||
--background-floating: #{adjust-color($subtext0, $alpha: -0.88)};
|
||||
@@ -162,13 +162,13 @@ div[class*="recentMentionsPopout"] {
|
||||
|
||||
div[class*="rolesList"] {
|
||||
// make box lighter
|
||||
div[class|="role"],
|
||||
button[class|="addButton"] {
|
||||
div[class^="role"],
|
||||
button[class^="addButton"] {
|
||||
background-color: lighten($mantle, 4%);
|
||||
}
|
||||
|
||||
div[class|="role"] {
|
||||
span[class|="roleCircle"] {
|
||||
div[class^="role"] {
|
||||
span[class^="roleCircle"] {
|
||||
// default roles
|
||||
&[style*="background-color: rgb(185, 187, 190)"] {
|
||||
background-color: $subtext0 !important;
|
||||
@@ -186,12 +186,12 @@ div[class*="rolesList"] {
|
||||
div[class*="layerContainer"] {
|
||||
> div[class*="layer"] {
|
||||
// reaction popout
|
||||
div[class|="reactors"] {
|
||||
div[class^="reactors"] {
|
||||
background-color: var(--background-primary);
|
||||
}
|
||||
|
||||
// the not selector should make it not style the user popouts
|
||||
//div[class|="scroller"]:not(
|
||||
//div[class^="scroller"]:not(
|
||||
// [style*="padding-right: 4px;"],
|
||||
// [style*="padding-right: 8px;"]
|
||||
// ) {
|
||||
@@ -224,14 +224,14 @@ section[class*="positionContainer_"] {
|
||||
}
|
||||
|
||||
// Latte text color on gif categories
|
||||
.theme-light section[class|="positionContainer"] div[class|="categoryText"] {
|
||||
.theme-light section[class^="positionContainer"] div[class^="categoryText"] {
|
||||
color: $base;
|
||||
}
|
||||
|
||||
#emoji-picker-tab-panel {
|
||||
// more transparent to make things more bearable
|
||||
[class*="stickerInspected_"] [class*="inspectedIndicator"],
|
||||
[class|="emojiItem"][class*="emojiItemSelected_"] {
|
||||
[class^="emojiItem"][class*="emojiItemSelected_"] {
|
||||
background-color: var(--brand-experiment-25a);
|
||||
}
|
||||
|
||||
@@ -247,16 +247,16 @@ section[class*="positionContainer_"] {
|
||||
}
|
||||
|
||||
// same as transparent above, but for stickers
|
||||
[class*="stickerInspected_"] [class|="inspectedIndicator"] {
|
||||
[class*="stickerInspected_"] [class^="inspectedIndicator"] {
|
||||
background-color: var(--brand-experiment-25a);
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
// color: $text;
|
||||
|
||||
> div[class|="focusLock"]
|
||||
> div[class|="root"]
|
||||
> div[class|="container"]
|
||||
> div[class^="focusLock"]
|
||||
> div[class^="root"]
|
||||
> div[class^="container"]
|
||||
div[class*="footer"] {
|
||||
// background-color: $mantle;
|
||||
|
||||
@@ -266,7 +266,7 @@ section[class*="positionContainer_"] {
|
||||
}
|
||||
}
|
||||
|
||||
> div[class|="focusLock"] > div[class|="root"] {
|
||||
> div[class^="focusLock"] > div[class^="root"] {
|
||||
box-shadow:
|
||||
0 0 0 1px $surface0,
|
||||
0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
|
||||
@@ -276,10 +276,10 @@ section[class*="positionContainer_"] {
|
||||
}
|
||||
|
||||
// browser-only download client popout
|
||||
div[class|="focusLock"] div[class|="downloadApps"] {
|
||||
div[class^="focusLock"] div[class^="downloadApps"] {
|
||||
background-color: $base !important;
|
||||
|
||||
button[class|="modalCloseButton"],
|
||||
button[class^="modalCloseButton"],
|
||||
h2,
|
||||
h3 {
|
||||
color: $text;
|
||||
@@ -325,12 +325,12 @@ section[class*="positionContainer_"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="layerContainer"] {
|
||||
div[class^="layerContainer"] {
|
||||
// right-click popups for guild, channels, and user
|
||||
#guild-header-popout,
|
||||
#guild-context,
|
||||
div[id|="channel-context"],
|
||||
div[id|="user-context"] {
|
||||
div[id^="channel-context"],
|
||||
div[id^="user-context"] {
|
||||
background: $crust;
|
||||
}
|
||||
|
||||
@@ -357,15 +357,15 @@ div[class|="layerContainer"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="focusLock"] {
|
||||
div[class^="focusLock"] {
|
||||
// create channel (modal)
|
||||
// stream popout (modalSize)
|
||||
// edit attachment (uploadModal)
|
||||
// Join server from link (contentWrapper)
|
||||
div[class|="modal"],
|
||||
div[class|="modalSize"],
|
||||
div[class|="uploadModal"],
|
||||
div[class|="contentWrapper"] {
|
||||
div[class^="modal"],
|
||||
div[class^="modalSize"],
|
||||
div[class^="uploadModal"],
|
||||
div[class^="contentWrapper"] {
|
||||
background-color: $mantle;
|
||||
li,
|
||||
p,
|
||||
@@ -394,7 +394,7 @@ div[class|="layerContainer"] {
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&[class|="fixed"] {
|
||||
&[class^="fixed"] {
|
||||
&:after {
|
||||
background-color: $red;
|
||||
}
|
||||
@@ -427,7 +427,7 @@ div[class|="layerContainer"] {
|
||||
}
|
||||
|
||||
// Checkbox toggles
|
||||
div[class|="checkbox"] {
|
||||
div[class^="checkbox"] {
|
||||
&[class*="checked_"] {
|
||||
border: none;
|
||||
|
||||
@@ -439,7 +439,7 @@ div[class|="layerContainer"] {
|
||||
}
|
||||
|
||||
// add game
|
||||
div[class|="addGamePopout"] {
|
||||
div[class^="addGamePopout"] {
|
||||
background-color: $mantle;
|
||||
}
|
||||
|
||||
@@ -449,9 +449,9 @@ div[class|="layerContainer"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[class|="queryContainer"] {
|
||||
div[class^="queryContainer"] {
|
||||
background-color: $crust !important;
|
||||
span[class|="key"] {
|
||||
span[class^="key"] {
|
||||
color: $text;
|
||||
background-color: $base;
|
||||
}
|
||||
@@ -466,7 +466,7 @@ div[class|="layerContainer"] {
|
||||
}
|
||||
|
||||
// when hovering active threads
|
||||
div[class|="popout"] div[class|="row"][role="button"] {
|
||||
div[class^="popout"] div[class^="row"][role="button"] {
|
||||
&:hover {
|
||||
color: $crust;
|
||||
|
||||
@@ -484,13 +484,13 @@ form[class*="card_"] {
|
||||
|
||||
// user info
|
||||
div[class*="userInfoSection_"] {
|
||||
div[class|="connectedAccountContainer"] {
|
||||
div[class^="connectedAccountContainer"] {
|
||||
background-color: adjust-color($surface0, $alpha: -0.55) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Warning card popouts ex. admin change username/account deletion
|
||||
div[class*="cardWarning-"] div[class*="warning_"] {
|
||||
div[class*="cardWarning_"] div[class*="warning_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
@@ -499,13 +499,13 @@ div[class*="cardWarning-"] div[class*="warning_"] {
|
||||
#sticker-picker-tab-panel {
|
||||
/* --background-floating: #{$surface0};
|
||||
|
||||
+ div[class|="slotsContainer"] {
|
||||
+ div[class^="slotsContainer"] {
|
||||
background-color: $surface0;
|
||||
}
|
||||
*/
|
||||
|
||||
div[class|="tooltipContainer"] {
|
||||
label[class|="label"] {
|
||||
div[class^="tooltipContainer"] {
|
||||
label[class^="label"] {
|
||||
&[class*="labelChecked_"] {
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
@@ -537,7 +537,7 @@ div[class*="cardWarning-"] div[class*="warning_"] {
|
||||
div[class*="keyboardShortcutsModal_"] {
|
||||
background-color: $mantle !important;
|
||||
|
||||
div[class|="keybindShortcut"] span[class|="key"] {
|
||||
div[class^="keybindShortcut"] span[class^="key"] {
|
||||
color: $crust;
|
||||
|
||||
svg g {
|
||||
@@ -546,8 +546,8 @@ div[class*="keyboardShortcutsModal_"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="planOptionClickableContainer"] {
|
||||
div[class|="checkbox"] svg path {
|
||||
div[class^="planOptionClickableContainer"] {
|
||||
div[class^="checkbox"][class*="checked"] svg path {
|
||||
fill: $crust !important;
|
||||
}
|
||||
|
||||
@@ -570,12 +570,12 @@ div[class|="planOptionClickableContainer"] {
|
||||
.react-datepicker__day--selected:after {
|
||||
background-color: $blue !important;
|
||||
}
|
||||
[class|="datePickerHint"] [class|="hintValue"] {
|
||||
[class^="datePickerHint"] [class^="hintValue"] {
|
||||
color: $crust !important;
|
||||
}
|
||||
|
||||
div[class*="layerContainer_"] {
|
||||
div[class|="control"] {
|
||||
div[class^="control"] {
|
||||
div[class*="checked_"] {
|
||||
background-color: $green !important;
|
||||
}
|
||||
@@ -622,41 +622,41 @@ div[class*="userProfileOuter_"] {
|
||||
div[aria-label="Early Verified Bot Developer"] {
|
||||
content: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21.58 11.4-4.28-7.39-.35-.6h-9.91l-.35.6-4.27 7.39-.35.6.35.6 4.27 7.39.35.6h9.92l.35-.6 4.28-7.39.35-.6zm-13.07-1.03-1.63 1.63 1.63 1.63v2.73l-4.36-4.36 4.37-4.37v2.74zm3.12 6.93-2.04-.63 3.1-9.98 2.04.64zm3.86-.93v-2.73l1.63-1.64-1.63-1.63v-2.74l4.36 4.37z' fill='%23#{str-slice(inspect($blue), 2)}'/%3E%3C/svg%3E");
|
||||
}
|
||||
div[class|="userPopoutOverlayBackground"]
|
||||
> div[class|="scroller"]
|
||||
> div[class|="section"]:first-child
|
||||
> div[class|="buttonsContainer"]
|
||||
div[class^="userPopoutOverlayBackground"]
|
||||
> div[class^="scroller"]
|
||||
> div[class^="section"]:first-child
|
||||
> div[class^="buttonsContainer"]
|
||||
> button:nth-child(2) {
|
||||
background: $brand;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="layerContainer-"] [id|="slate_toolbar"] {
|
||||
[class*="layerContainer_"] [id^="slate_toolbar"] {
|
||||
background-color: var(--background-floating);
|
||||
|
||||
[class*="buttons-"] [class*="icon_"] {
|
||||
[class*="buttons_"] [class*="icon_"] {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="layerContainer-"] div[id="sort-and_view"] {
|
||||
[class*="layerContainer_"] div[id="sort_and_view"] {
|
||||
div[id="sort-and-view-reset-all"] [style="color: var(--text-normal);"]:hover {
|
||||
color: $crust !important;
|
||||
}
|
||||
}
|
||||
|
||||
[class|="layerContainer"] [class|="quickswitcher"] [class*="badge_"] {
|
||||
[class^="layerContainer"] [class^="quickswitcher"] [class*="badge_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
// Clyde user popout
|
||||
div[class|="layerContainer"] div[aria-label="clyde"] {
|
||||
div[class|="profileBadges"] div[class|="textBadge"] {
|
||||
div[class^="layerContainer"] div[aria-label="clyde"] {
|
||||
div[class^="profileBadges"] div[class^="textBadge"] {
|
||||
background-color: $brand !important;
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
button[class|="messageClydeButton"] {
|
||||
button[class^="messageClydeButton"] {
|
||||
color: $text;
|
||||
background-color: $surface1;
|
||||
|
||||
@@ -667,14 +667,14 @@ div[class|="layerContainer"] div[aria-label="clyde"] {
|
||||
}
|
||||
|
||||
// User popout edit button
|
||||
div[class|="layerContainer"] div[class|="pencilContainer"] {
|
||||
svg[class|="editIcon"] {
|
||||
div[class^="layerContainer"] div[class^="pencilContainer"] {
|
||||
svg[class^="editIcon"] {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
// Keybinds popout
|
||||
div[class|="keyboardShortcutsModal"] span[class|="key"] {
|
||||
div[class^="keyboardShortcutsModal"] span[class^="key"] {
|
||||
color: $crust !important;
|
||||
|
||||
svg g {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
// "spine" svgs before threads
|
||||
svg[class|="spine"] {
|
||||
svg[class^="spine"] {
|
||||
color: $surface2;
|
||||
}
|
||||
|
||||
div[class|="spineBorder"] {
|
||||
div[class^="spineBorder"] {
|
||||
background: $surface2;
|
||||
}
|
||||
|
||||
|
||||
@@ -289,7 +289,7 @@ html {
|
||||
--background-floating: #{$surface0};
|
||||
--background-tertiary: #{lighten($base, 3%)};
|
||||
|
||||
svg[class|="activityIcon"] {
|
||||
svg[class^="activityIcon"] {
|
||||
color: $subtext0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user