Fix: Most of the major stuff discord broke (#234)
This commit is contained in:
Jade Herd
@@ -1,11 +1,11 @@
|
||||
// filled buttons and badges should have crust text
|
||||
[class*="lookFilled-"] {
|
||||
&[class*="colorBrand-"],
|
||||
&[class*="colorBrandNew-"],
|
||||
&[class*="colorLink-"],
|
||||
&[class*="colorYellow-"],
|
||||
&[class*="colorRed-"],
|
||||
&[class*="colorGreen-"] {
|
||||
[class*="lookFilled_"] {
|
||||
&[class*="colorBrand_"],
|
||||
&[class*="colorBrandNew_"],
|
||||
&[class*="colorLink_"],
|
||||
&[class*="colorYellow_"],
|
||||
&[class*="colorRed_"],
|
||||
&[class*="colorGreen_"] {
|
||||
color: $crust;
|
||||
|
||||
// darken the nitro button too
|
||||
@@ -14,27 +14,27 @@
|
||||
}
|
||||
|
||||
// spinner color
|
||||
[class*="spinnerItem-"] {
|
||||
[class*="spinnerItem_"] {
|
||||
background-color: $crust;
|
||||
}
|
||||
|
||||
[class*="defaultColor-"] {
|
||||
[class*="defaultColor_"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
|
||||
// ...unless it's primary
|
||||
&[class*="colorPrimary-"] {
|
||||
&[class*="colorPrimary_"] {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
@@ -46,15 +46,15 @@ button[class*="lookFilled-"][class*="colorRed-"]:active {
|
||||
|
||||
// buttons in sidebar when in calls
|
||||
div[class|="actionButtons"] {
|
||||
[class|="button"][class*="buttonColor-"],
|
||||
[class|="button"] [class*="buttonColor-"] {
|
||||
[class|="button"][class*="buttonColor_"],
|
||||
[class|="button"] [class*="buttonColor_"] {
|
||||
background-color: $surface1;
|
||||
|
||||
&[class*="buttonActive-"] {
|
||||
&[class*="buttonActive_"] {
|
||||
background-color: $green;
|
||||
color: $crust;
|
||||
|
||||
[class*="buttonContents-"] {
|
||||
[class*="buttonContents_"] {
|
||||
color: $crust;
|
||||
|
||||
svg {
|
||||
@@ -66,7 +66,7 @@ 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
|
||||
@@ -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)
|
||||
@@ -124,7 +124,7 @@ div[role="radio"][class*="selected"] {
|
||||
}
|
||||
|
||||
// these badges appear in the emoji/sticker picker
|
||||
[class*="topGuildEmojiBadge-"] {
|
||||
[class*="topGuildEmojiBadge_"] {
|
||||
background: linear-gradient(268.26deg, $peach, $red 102.45%);
|
||||
|
||||
* {
|
||||
@@ -132,7 +132,7 @@ div[role="radio"][class*="selected"] {
|
||||
}
|
||||
}
|
||||
|
||||
[class*="newlyAddedBadge-"] {
|
||||
[class*="newlyAddedBadge_"] {
|
||||
background: linear-gradient(268.26deg, $teal, $green 102.45%);
|
||||
|
||||
* {
|
||||
@@ -141,8 +141,8 @@ div[role="radio"][class*="selected"] {
|
||||
}
|
||||
|
||||
//revert nitro icon on nitro subscribe button on external emoji
|
||||
[class*="lookFilled-"]
|
||||
[class*="premiumSubscribeButton-"]
|
||||
> [class*="premiumIcon-"] {
|
||||
[class*="lookFilled_"]
|
||||
[class*="premiumSubscribeButton_"]
|
||||
> [class*="premiumIcon_"] {
|
||||
color: $crust !important;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
[class|="chatContent"] {
|
||||
div[class*="wrapperAudio-"],
|
||||
div[class*="imageWrapper-"] {
|
||||
div[class*="wrapperAudio_"],
|
||||
div[class*="imageWrapper_"] {
|
||||
div[class*="audioControls"],
|
||||
div[class*="videoControls-"] {
|
||||
div[class*="videoControls_"] {
|
||||
background-color: #{adjust-color($mantle, $alpha: -0.2)};
|
||||
|
||||
svg[class*="controlIcon-"] {
|
||||
svg[class*="controlIcon_"] {
|
||||
opacity: 1;
|
||||
color: $subtext1;
|
||||
}
|
||||
@@ -44,42 +44,46 @@
|
||||
}
|
||||
}
|
||||
// Super reactions and beta badge
|
||||
div[class*="isBurstReactionPicker-"] {
|
||||
box-shadow: 0 0 0 2px $mauve, 0 0 16px $lavender;
|
||||
div[class*="isBurstReactionPicker_"] {
|
||||
box-shadow:
|
||||
0 0 0 2px $mauve,
|
||||
0 0 16px $lavender;
|
||||
}
|
||||
div[class|="navButtonSuperReactActive"],
|
||||
div[class|="navButtonSuperReactActive"]:hover {
|
||||
background: linear-gradient(270deg, $pink, $lavender 33.63%, $mauve);
|
||||
color: $crust;
|
||||
}
|
||||
div[class*="betaTag-"] {
|
||||
div[class*="betaTag_"] {
|
||||
background: var(--brand-experiment) !important;
|
||||
color: $crust;
|
||||
}
|
||||
button[class*="navButtonActive-"],
|
||||
button[class*="navButtonActive-"]:hover {
|
||||
button[class*="navButtonActive_"],
|
||||
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;
|
||||
}
|
||||
div[class*="isBurstReactionPicker"] {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 2px $mauve, 0 0 16px $lavender;
|
||||
box-shadow:
|
||||
0 0 0 2px $mauve,
|
||||
0 0 16px $lavender;
|
||||
}
|
||||
// Voice messages play button
|
||||
div[class*="playButtonContainer-"] {
|
||||
div[class*="playButtonContainer_"] {
|
||||
background: var(--brand-experiment) !important;
|
||||
}
|
||||
svg[class*="playIcon-"] path {
|
||||
svg[class*="playIcon_"] path {
|
||||
fill: $crust;
|
||||
}
|
||||
|
||||
// chat header
|
||||
div[class|="container"][class*="header-"] {
|
||||
div[class*="addReactButton-"],
|
||||
div[class|="buttons"]:not([class*="lookBlank-"]) div[class|="contents"] {
|
||||
div[class|="container"][class*="header_"] {
|
||||
div[class*="addReactButton_"],
|
||||
div[class|="buttons"]:not([class*="lookBlank_"]) div[class|="contents"] {
|
||||
background: $surface0;
|
||||
&:hover {
|
||||
background-color: var(--brand-experiment-20a);
|
||||
@@ -89,19 +93,19 @@
|
||||
}
|
||||
|
||||
// "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*="after_inlineCode_"],
|
||||
// [class*="before_inlineCode_"],
|
||||
// [class|="syntaxBefore"],
|
||||
// [class|="syntaxAfter"] {
|
||||
// color: $overlay0;
|
||||
// }
|
||||
|
||||
[class*="inlineCode-"] {
|
||||
[class*="inlineCode_"] {
|
||||
background: $surface0;
|
||||
}
|
||||
|
||||
@@ -110,7 +114,7 @@
|
||||
}
|
||||
|
||||
div[class|="container"] div[class|="cardWrapper"] {
|
||||
div[class*="completed-"] {
|
||||
div[class*="completed_"] {
|
||||
svg[class|="checkmark"] {
|
||||
background-color: $green;
|
||||
color: $crust;
|
||||
@@ -176,7 +180,7 @@ main[class|="chatContent"] div[id|="message-content"] svg[class|="icon"] {
|
||||
}
|
||||
}
|
||||
|
||||
article[class*="embedFull-"] {
|
||||
article[class*="embedFull_"] {
|
||||
border-color: $surface2;
|
||||
}
|
||||
}
|
||||
@@ -188,7 +192,7 @@ div[class|="cooldownWrapper"] {
|
||||
}
|
||||
|
||||
// autocomplete chat textboxes
|
||||
div[class*="autocomplete-"] {
|
||||
div[class*="autocomplete_"] {
|
||||
background-color: $mantle !important;
|
||||
|
||||
div[class*="categoryHeader"] {
|
||||
@@ -200,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;
|
||||
}
|
||||
|
||||
@@ -210,7 +214,7 @@ div[class*="autocomplete-"] {
|
||||
}
|
||||
|
||||
// emoji button
|
||||
div[class|="channelTextArea"] button[class*="emojiButton-"] {
|
||||
div[class|="channelTextArea"] button[class*="emojiButton_"] {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
@@ -230,8 +234,10 @@ div[class|="channelTextArea"] button[class*="emojiButton-"] {
|
||||
}
|
||||
|
||||
// forums
|
||||
div[class|="chat"] > div[class|="content"] > div[class|="container"] {
|
||||
background-color: $base;
|
||||
div[class^="chat"] > div[class^="content"] > div[class^="container"] {
|
||||
div[class^="chatContainer"] > div[class^="container"] {
|
||||
background-color: $base;
|
||||
}
|
||||
|
||||
div[class|="grid"][class*="scrollerBase"],
|
||||
> div[class|="chatContainer"] > div[class|="container"] {
|
||||
@@ -269,13 +275,13 @@ div[class|="chat"] > div[class|="content"] > div[class|="container"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
div[class*="mainCard-"] {
|
||||
div[class*="mainCard_"] {
|
||||
background-color: $surface0;
|
||||
}
|
||||
}
|
||||
|
||||
div[class|="sidebar"] > section[class|="panels"] {
|
||||
svg[class*="buttonIcon-"],
|
||||
svg[class*="buttonIcon_"],
|
||||
div[class*="buttonContents"] {
|
||||
fill: $text;
|
||||
color: $text;
|
||||
@@ -296,11 +302,11 @@ div[class|="sidebar"] > section[class|="panels"] {
|
||||
|
||||
// Bot slash command field
|
||||
div[class|="applicationCommand"] {
|
||||
span[class*="selectedPill-"] {
|
||||
span[class*="selectedPill_"] {
|
||||
border-color: $brand !important;
|
||||
}
|
||||
|
||||
span[class*="erroredPill-"] {
|
||||
span[class*="erroredPill_"] {
|
||||
border-color: $red !important;
|
||||
}
|
||||
}
|
||||
@@ -314,18 +320,18 @@ div[class|="chat"]
|
||||
}
|
||||
|
||||
// fix error border when attempting to start a thread with no message
|
||||
[class*="channelTextAreaInnerError-"] {
|
||||
[class*="channelTextAreaInnerError_"] {
|
||||
border: 1px solid $red !important;
|
||||
}
|
||||
|
||||
// Jump to Present bar text
|
||||
[class*="barButtonBase-"] {
|
||||
[class*="barButtonBase_"] {
|
||||
color: $crust !important;
|
||||
}
|
||||
|
||||
// calls
|
||||
div[class|="callContainer"] {
|
||||
[class*="controlIcon-"] {
|
||||
[class*="controlIcon_"] {
|
||||
color: $subtext1;
|
||||
|
||||
&:hover {
|
||||
@@ -333,25 +339,25 @@ div[class|="callContainer"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="tile-"],
|
||||
div[class*="background-"] {
|
||||
div[class*="tile_"],
|
||||
div[class*="background_"] {
|
||||
background-color: $base !important;
|
||||
}
|
||||
|
||||
div[class*="overlayTitle"],
|
||||
svg[class*="status-"] {
|
||||
svg[class*="status_"] {
|
||||
background-color: $surface0;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
div[class*="header"],
|
||||
svg[class*="selectedIcon-"] {
|
||||
svg[class*="selectedIcon_"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
div[class*="button-"][class*="contents-"],
|
||||
button[class*="cta-"],
|
||||
button[class*="participantsButton-"] {
|
||||
div[class*="button-"][class*="contents_"],
|
||||
button[class*="cta_"],
|
||||
button[class*="participantsButton_"] {
|
||||
background-color: $surface0;
|
||||
color: $text;
|
||||
}
|
||||
@@ -369,7 +375,7 @@ div[class|="callContainer"] {
|
||||
|
||||
div[class|="videoControls"] {
|
||||
div[class|="children"] {
|
||||
div[class*="playingText-"] {
|
||||
div[class*="playingText_"] {
|
||||
color: $subtext1;
|
||||
}
|
||||
}
|
||||
@@ -404,7 +410,7 @@ div[class|="callContainer"] {
|
||||
}
|
||||
}
|
||||
|
||||
button[class*="leftTrayIcon-"][class*="buttonColor-"] {
|
||||
button[class*="leftTrayIcon-"][class*="buttonColor_"] {
|
||||
background-color: $surface0;
|
||||
color: $text;
|
||||
}
|
||||
@@ -413,20 +419,20 @@ div[class|="callContainer"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
[class*="colorable-"] {
|
||||
&[class*="red-"] {
|
||||
[class*="colorable_"] {
|
||||
&[class*="red_"] {
|
||||
background: $red;
|
||||
|
||||
[class*="centerIcon-"] {
|
||||
[class*="centerIcon_"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="primaryDark-"] {
|
||||
&[class*="primaryDark_"] {
|
||||
background: $surface1;
|
||||
color: $text;
|
||||
|
||||
[class*="centerIcon-"] {
|
||||
[class*="centerIcon_"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
@@ -435,24 +441,24 @@ div[class|="callContainer"] {
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="green-"] {
|
||||
&[class*="green_"] {
|
||||
background: $green;
|
||||
|
||||
[class*="centerIcon-"] {
|
||||
[class*="centerIcon_"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="white-"] {
|
||||
&[class*="white_"] {
|
||||
color: $crust;
|
||||
background-color: $subtext1;
|
||||
|
||||
[class*="centerIcon-"] {
|
||||
[class*="centerIcon_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&[class*="active-"] {
|
||||
&[class*="active_"] {
|
||||
background: $text;
|
||||
}
|
||||
}
|
||||
@@ -461,11 +467,11 @@ div[class|="callContainer"] {
|
||||
}
|
||||
|
||||
// Weird gradient thing on forums
|
||||
div[class|="chat"]
|
||||
section[class*="forumOrHome-"]
|
||||
div[class|="upperContainer"]
|
||||
> div[class|="children"]:after {
|
||||
background: none;
|
||||
div[class^="chat"] section[class*="forumOrHome_"] {
|
||||
background-color: $base;
|
||||
div[class^="upperContainer"] > div[class^="children"]:after {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
// gifts
|
||||
@@ -478,20 +484,20 @@ div[class*="giftCodeContainer"] [class*="tile"] {
|
||||
}
|
||||
|
||||
// channels & roles
|
||||
div[class*="chat-"] {
|
||||
div[class*="chat_"] {
|
||||
// header
|
||||
section[class*="header-"] {
|
||||
section[class*="header_"] {
|
||||
background-color: $mantle;
|
||||
}
|
||||
|
||||
div[class*="content-"][class*="container-"] {
|
||||
div[class*="content-"][class*="container_"] {
|
||||
background-color: $mantle;
|
||||
|
||||
div[class*="container"] {
|
||||
background-color: $mantle;
|
||||
}
|
||||
|
||||
div[class*="search-"] {
|
||||
div[class*="search_"] {
|
||||
background-color: $base !important;
|
||||
|
||||
input::placeholder {
|
||||
@@ -504,7 +510,7 @@ div[class*="chat-"] {
|
||||
background-color: $base;
|
||||
}
|
||||
|
||||
div[class*="checkbox-"] {
|
||||
div[class*="checkbox_"] {
|
||||
border-color: $crust !important;
|
||||
svg > path {
|
||||
fill: $crust;
|
||||
@@ -512,10 +518,10 @@ div[class*="chat-"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="scrollerContainer-"] {
|
||||
div[class*="scrollerContainer_"] {
|
||||
background-color: $mantle;
|
||||
|
||||
div[class*="checkIcon-"][style*="opacity: 1;"] > svg > path {
|
||||
div[class*="checkIcon_"][style*="opacity: 1;"] > svg > path {
|
||||
fill: $crust;
|
||||
}
|
||||
}
|
||||
@@ -524,14 +530,14 @@ div[class*="chat-"] {
|
||||
background-color: $mantle;
|
||||
border-bottom: 2px solid $surface0;
|
||||
|
||||
[class*="textBadge-"] {
|
||||
[class*="textBadge_"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="chat-"] {
|
||||
div[class*="chat_"] {
|
||||
// Search Box
|
||||
section[class*="title"] div[class*="searchBar"] span[class*="search"] {
|
||||
background-color: $surface0;
|
||||
@@ -546,26 +552,26 @@ div[class*="chat-"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="chat-"] {
|
||||
div[class*="chat_"] {
|
||||
// Forum Gallery View
|
||||
li[class*="mainCard-"][class*="container"] {
|
||||
li[class*="mainCard_"][class*="container"] {
|
||||
background-color: $surface0;
|
||||
|
||||
&:hover {
|
||||
background-color: $surface1;
|
||||
}
|
||||
|
||||
div[class*="contentPreview-"] {
|
||||
div[class*="contentPreview_"] {
|
||||
background-color: $base;
|
||||
border: none;
|
||||
|
||||
div[class*="textContentFooter-"] {
|
||||
div[class*="textContentFooter_"] {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="tags-"] {
|
||||
div[class*="tagPill-"] {
|
||||
div[class*="tags_"] {
|
||||
div[class*="tagPill_"] {
|
||||
background-color: #{adjust-color($surface1, $alpha: -0.2)};
|
||||
}
|
||||
}
|
||||
@@ -583,23 +589,23 @@ div[class*="chat-"] {
|
||||
}
|
||||
|
||||
// spotify listen along invite
|
||||
[id*="message-accessories-"] > [class*="invite-"] {
|
||||
[id*="message-accessories-"] > [class*="invite_"] {
|
||||
background-color: $base;
|
||||
[class*="inFront-"][class*="header-"] {
|
||||
[class*="inFront-"][class*="header_"] {
|
||||
color: $subtext0;
|
||||
}
|
||||
[class*="partyStatus-"] {
|
||||
[class*="partyStatus_"] {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
// typing indicator
|
||||
[class|="avatar"] [class|="dots"] {
|
||||
[class^="avatar"] [class^="dots"] {
|
||||
color: $base;
|
||||
}
|
||||
|
||||
// members tab
|
||||
div[class|="chat"][class*="page-"] div[class|="content"][class*="container-"] {
|
||||
div[class|="chat"][class*="page-"] div[class|="content"][class*="container_"] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -88,15 +88,10 @@ rect[fill="#593695"] {
|
||||
}
|
||||
|
||||
// Vencord theme input border should use accent
|
||||
#vencordthemes-tab [class*="input-"]:focus {
|
||||
#vencordthemes-tab [class*="input_"]:focus {
|
||||
border-color: $brand !important;
|
||||
}
|
||||
|
||||
// dots in typing
|
||||
svg[class|="cursorDefault"] svg[class|="dots"] circle {
|
||||
fill: $base !important;
|
||||
}
|
||||
|
||||
// inline brand color styles...
|
||||
[style*="background-color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%)"] {
|
||||
background-color: $brand !important;
|
||||
@@ -104,15 +99,15 @@ svg[class|="cursorDefault"] svg[class|="dots"] circle {
|
||||
}
|
||||
|
||||
// for those roles that blend in the background
|
||||
span[class*="username-"][style*="color: rgb(54, 57, 62)"],
|
||||
span[class*="username-"][style*="color: rgb(53, 57, 64)"] {
|
||||
span[class*="username_"][style*="color: rgb(54, 57, 62)"],
|
||||
span[class*="username_"][style*="color: rgb(53, 57, 64)"] {
|
||||
color: var(--background-primary) !important;
|
||||
}
|
||||
|
||||
// server badges
|
||||
div[class*="flowerStarContainer-"] {
|
||||
div[class*="flowerStarContainer_"] {
|
||||
&[class*="boostedGuildTierIconBackgroundWithVisibleBanner"] {
|
||||
svg[class*="flowerStar-"] * {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: #fff;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
@@ -120,11 +115,11 @@ div[class*="flowerStarContainer-"] {
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="iconBackgroundTierOne-"],
|
||||
&[class*="iconBackgroundTierTwo-"]:not(
|
||||
&[class*="iconBackgroundTierOne_"],
|
||||
&[class*="iconBackgroundTierTwo_"]:not(
|
||||
[class*="boostedGuildTierIconBackgroundWithVisibleBanner"]
|
||||
) {
|
||||
svg[class*="flowerStar-"] * {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $surface2;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
@@ -132,8 +127,8 @@ div[class*="flowerStarContainer-"] {
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="iconBackgroundTierThree-"] {
|
||||
svg[class*="flowerStar-"] * {
|
||||
&[class*="iconBackgroundTierThree_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $pink;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
@@ -141,8 +136,8 @@ div[class*="flowerStarContainer-"] {
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="verified-"] {
|
||||
svg[class*="flowerStar-"] * {
|
||||
&[class*="verified_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $green;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
@@ -150,8 +145,8 @@ div[class*="flowerStarContainer-"] {
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="partnered-"] {
|
||||
svg[class*="flowerStar-"] * {
|
||||
&[class*="partnered_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $brand;
|
||||
}
|
||||
div[class|="childContainer"] svg * {
|
||||
@@ -171,7 +166,7 @@ div[class|="communityInfoPill"] {
|
||||
}
|
||||
|
||||
// social links on "what's new"
|
||||
a[class*="socialLink-"][href*="discord"] {
|
||||
a[class*="socialLink_"][href*="discord"] {
|
||||
color: $subtext0;
|
||||
}
|
||||
|
||||
@@ -193,15 +188,15 @@ svg[class|="uploadIcon"] {
|
||||
}
|
||||
|
||||
// anything that uses a color background should have crust text
|
||||
div[class*="unreadMentionsBar-"],
|
||||
div[class*="unreadBar-"] {
|
||||
div[class*="unreadMentionsBar_"],
|
||||
div[class*="unreadBar_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
// make number badges have crust text and bolder
|
||||
div[class|="numberBadge"] {
|
||||
div[class^="numberBadge"] {
|
||||
font-weight: 700;
|
||||
color: $crust;
|
||||
color: $crust !important;
|
||||
}
|
||||
|
||||
// Channel and role badge
|
||||
@@ -234,54 +229,64 @@ div[class|="tags"] div[class|="pinIcon"] path {
|
||||
}
|
||||
|
||||
// speaking indicator
|
||||
div[class*="avatarSpeaking-"] {
|
||||
-webkit-box-shadow: inset 0 0 0 2px $green,
|
||||
div[class*="avatarSpeaking_"] {
|
||||
-webkit-box-shadow:
|
||||
inset 0 0 0 2px $green,
|
||||
inset 0 0 0 3px var(--background-secondary);
|
||||
box-shadow: inset 0 0 0 2px $green,
|
||||
box-shadow:
|
||||
inset 0 0 0 2px $green,
|
||||
inset 0 0 0 3px var(--background-secondary);
|
||||
}
|
||||
|
||||
div[class*="videoLayer-"] > div[class|="tileChild"] > div[class|="border"] {
|
||||
&[class*="speaking-"] {
|
||||
-webkit-box-shadow: inset 0 0 0 2px $green, inset 0 0 0 3px $green;
|
||||
box-shadow: inset 0 0 0 2px $green, inset 0 0 0 3px $green;
|
||||
div[class*="videoLayer_"] > div[class|="tileChild"] > div[class|="border"] {
|
||||
&[class*="speaking_"] {
|
||||
-webkit-box-shadow:
|
||||
inset 0 0 0 2px $green,
|
||||
inset 0 0 0 3px $green;
|
||||
box-shadow:
|
||||
inset 0 0 0 2px $green,
|
||||
inset 0 0 0 3px $green;
|
||||
}
|
||||
|
||||
// this is when emojis fly across the tile
|
||||
&[class*="voiceChannelEffect-"] {
|
||||
-webkit-box-shadow: inset 0 0 0 2px $brand, inset 0 0 0 3px $brand;
|
||||
box-shadow: inset 0 0 0 2px $brand, inset 0 0 0 3px $brand;
|
||||
&[class*="voiceChannelEffect_"] {
|
||||
-webkit-box-shadow:
|
||||
inset 0 0 0 2px $brand,
|
||||
inset 0 0 0 3px $brand;
|
||||
box-shadow:
|
||||
inset 0 0 0 2px $brand,
|
||||
inset 0 0 0 3px $brand;
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="featureIcon-"] path {
|
||||
div[class*="featureIcon_"] path {
|
||||
fill: $brand;
|
||||
}
|
||||
|
||||
div[class*="backgroundAccent-"] {
|
||||
div[class*="backgroundAccent_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
div[class*="profileBadges-"] {
|
||||
div[class*="profileBadges_"] {
|
||||
div[aria-label="Supports Commands"] img {
|
||||
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23#{str-slice(inspect($green), 2)}'%3E%3Cpath d='m8.1176653 16.0847263 4.8330812-8.1694527h2.9315882l-4.8330812 8.1694527z'/%3E%3Cpath d='m20.4189453 9.4038086v-2.4311524c0-1.9775391-1.0825195-3.1118164-2.9697266-3.1118164h-1.5581055v1.7802734l.9594727-.0014648c.8540039 0 1.34375.5683594 1.34375 1.5585938v2.3969727c0 .8300781.1806641 1.8422852 1.5893555 2.3100586l.2856445.0947265-.2856445.0947266c-1.4086914.4677734-1.5893555 1.4799804-1.5893555 2.3100586v2.3964844c0 .9907227-.4897461 1.559082-1.34375 1.559082l-.9594727-.0014648v1.7802734h1.5581055c1.887207 0 2.9697266-1.1342773 2.9697266-3.1118164v-2.4316406c0-1.2583008.3432617-1.6264648 1.5810547-1.6445312v-1.9023438c-1.237793-.0180665-1.5810547-.3862305-1.5810547-1.6450196z'/%3E%3Cpath d='m5.8061523 7.1982422c0-.9760742.5024414-1.5585938 1.3432617-1.5585938l.9594727.0014648v-1.7802734h-1.5576172c-1.887207 0-2.9697266 1.1342773-2.9697266 3.1118164v2.4311523c0 1.2587891-.3432617 1.6269531-1.581543 1.6450195v1.9023438c1.2382812.0180664 1.581543.3862305 1.581543 1.6445312v2.4316406c0 1.9775391 1.0825195 3.1118164 2.9697266 3.1118164h1.5576172v-1.7802734l-.9594727.0014648c-.8408203 0-1.3432617-.5830078-1.3432617-1.559082v-2.3964844c0-.8300781-.1806641-1.8422852-1.5898438-2.3100586l-.2856444-.0947264.2856445-.0947266c1.4091797-.4677734 1.5898437-1.4799804 1.5898437-2.3100586z'/%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="newBadge-"],
|
||||
div[class*="tryItOutBadge-"] {
|
||||
div[class*="newBadge_"],
|
||||
div[class*="tryItOutBadge_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
// Pending Friend Request alert badge
|
||||
[class|="tabBar"] [class|="badge"] {
|
||||
[class^="tabBar"] [class^="badge"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
span[class*="channelMention"]:hover,
|
||||
[class*="mention"]:not(
|
||||
[class*="mentionButton-"],
|
||||
[class*="mentionIcon-"]
|
||||
[class*="mentionButton_"],
|
||||
[class*="mentionIcon_"]
|
||||
):hover {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ $bgImg: (
|
||||
);
|
||||
|
||||
@each $class, $icon in $bgImg {
|
||||
[class*="#{$class}-"] {
|
||||
[class*="#{$class}_"] {
|
||||
background-image: url("#{map-get($icon, icon)}") !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ $imgContent: (
|
||||
);
|
||||
|
||||
@each $class, $icon in $imgContent {
|
||||
[class*="#{$class}-"] {
|
||||
[class*="#{$class}_"] {
|
||||
content: url("#{map-get($icon, icon)}") !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ $svgBg: (
|
||||
@each $class, $color in $svgBg {
|
||||
.theme-dark,
|
||||
.theme-light {
|
||||
svg[class*="#{$class}-"] {
|
||||
svg[class*="#{$class}_"] {
|
||||
background-color: #{map-get($color, color)};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,9 +32,6 @@ $svgColor: (
|
||||
"memberBadgeIcon": (
|
||||
color: $pink,
|
||||
),
|
||||
"stickerIcon": (
|
||||
color: $mauve,
|
||||
),
|
||||
"audioQualityIcon": (
|
||||
color: $sapphire,
|
||||
),
|
||||
@@ -70,7 +67,7 @@ $svgColor: (
|
||||
@each $class, $color in $svgColor {
|
||||
.theme-dark,
|
||||
.theme-light {
|
||||
svg[class*="#{$class}-"] {
|
||||
svg[class*="#{$class}_"] {
|
||||
color: #{map-get($color, color)} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
nav[class*="guilds-"] {
|
||||
nav[class*="guilds_"] {
|
||||
// server icons
|
||||
foreignObject > div[data-list-item-id*="guildsnav_"] {
|
||||
&:hover,
|
||||
&[class*="selected"] {
|
||||
> div[class|="childWrapper"] {
|
||||
> div[class^="childWrapper"] {
|
||||
color: $crust;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -19,7 +19,7 @@ nav[class*="guilds-"] {
|
||||
span[class|="expandedFolderBackground"] {
|
||||
background-color: lighten($base, 3%);
|
||||
}
|
||||
div[class|="folder"][class*="hover-"] {
|
||||
div[class|="folder"][class*="hover_"] {
|
||||
background-color: lighten($base, 8%);
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ div[class|="upperBadge"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
div[class*="participating-"] {
|
||||
div[class*="participating_"] {
|
||||
background: $green;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ div[class|="sidebarRegion"] {
|
||||
fill: $pink !important;
|
||||
}
|
||||
|
||||
&[class*="selected-"] {
|
||||
&[class*="selected_"] {
|
||||
background-color: $brand !important;
|
||||
color: $crust !important;
|
||||
|
||||
@@ -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);"] {
|
||||
@@ -39,7 +39,7 @@ div[class|="sidebarRegion"] {
|
||||
}
|
||||
|
||||
div[class|="contentRegion"] {
|
||||
div[class*="noticeRegion-"] div[style="background-color: rgb(24, 25, 28);"] {
|
||||
div[class*="noticeRegion-"] div[style="background_color: rgb(24, 25, 28);"] {
|
||||
background-color: $crust !important;
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@ div[class|="contentRegion"] {
|
||||
background-color: $brand;
|
||||
}
|
||||
|
||||
div[class*="reducedMotion-"] {
|
||||
div[class*="reducedMotion_"] {
|
||||
div[class|="checkbox"] svg path {
|
||||
fill: $crust;
|
||||
}
|
||||
@@ -101,7 +101,7 @@ div[class|="contentRegion"] {
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
div[class*="gemIndicatorContainer-"] {
|
||||
div[class*="gemIndicatorContainer_"] {
|
||||
background-color: $base;
|
||||
|
||||
div[class|="tierLabel"] {
|
||||
@@ -109,7 +109,7 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
}
|
||||
|
||||
button[class*="lookInverted-"] {
|
||||
button[class*="lookInverted_"] {
|
||||
color: $crust;
|
||||
background-color: $text;
|
||||
|
||||
@@ -118,8 +118,8 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="card-"],
|
||||
h3[class*="price-"] {
|
||||
div[class*="card_"],
|
||||
h3[class*="price_"] {
|
||||
color: $text !important;
|
||||
}
|
||||
}
|
||||
@@ -147,19 +147,19 @@ div[class|="contentRegion"] {
|
||||
color: $text !important;
|
||||
}
|
||||
|
||||
svg[class*="sparkleStar-"] {
|
||||
svg[class*="sparkleStar_"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
div[class*="description-"] {
|
||||
div[class*="description_"] {
|
||||
color: $subtext1 !important;
|
||||
}
|
||||
|
||||
div[class*="card-"] {
|
||||
div[class*="card_"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
button[class*="lookInverted-"] {
|
||||
button[class*="lookInverted_"] {
|
||||
color: $crust;
|
||||
background-color: $text;
|
||||
|
||||
@@ -194,8 +194,8 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
|
||||
div[class|="paymentPane"],
|
||||
div[class*="paginator-"],
|
||||
div[class*="payment-"] {
|
||||
div[class*="paginator_"],
|
||||
div[class*="payment_"] {
|
||||
background-color: $surface0;
|
||||
color: $text;
|
||||
}
|
||||
@@ -204,7 +204,7 @@ div[class|="contentRegion"] {
|
||||
background-color: $surface1;
|
||||
}
|
||||
|
||||
[class*="paymentText-"] {
|
||||
[class*="paymentText_"] {
|
||||
color: $subtext1;
|
||||
}
|
||||
|
||||
@@ -222,19 +222,19 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
|
||||
#notifications-tab {
|
||||
button[class*="marketingUnsubscribeButton-"] {
|
||||
button[class*="marketingUnsubscribeButton_"] {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
#game-activity-tab {
|
||||
div[class*="nowPlayingAdd-"],
|
||||
div[class*="lastPlayed-"],
|
||||
div[class*="overlayStatusText-"] {
|
||||
div[class*="nowPlayingAdd_"],
|
||||
div[class*="lastPlayed_"],
|
||||
div[class*="overlayStatusText_"] {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
div[class*="activeGame-"][class*="nowPlaying"] * {
|
||||
div[class*="activeGame_"][class*="nowPlaying"] * {
|
||||
color: $crust;
|
||||
|
||||
svg > path {
|
||||
@@ -246,7 +246,7 @@ div[class|="contentRegion"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
input[class*="gameNameInput-"] {
|
||||
input[class*="gameNameInput_"] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $mantle;
|
||||
@@ -255,18 +255,18 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="game-"] {
|
||||
div[class*="game_"] {
|
||||
-webkit-box-shadow: 0 1px 0 0 var(--background-modifier-accent);
|
||||
box-shadow: 0 1px 0 0 var(--background-modifier-accent);
|
||||
}
|
||||
|
||||
div[class*="removeGame-"] {
|
||||
div[class*="removeGame_"] {
|
||||
background-color: $surface0;
|
||||
}
|
||||
}
|
||||
|
||||
#emoji-tab {
|
||||
div[class*="emojiRemove-"] {
|
||||
div[class*="emojiRemove_"] {
|
||||
background-color: $surface0;
|
||||
}
|
||||
}
|
||||
@@ -276,20 +276,20 @@ div[class|="contentRegion"] {
|
||||
div[class|="inputSensitivityBar"] {
|
||||
background: $surface1;
|
||||
|
||||
&[class*="speaking-"] {
|
||||
&[class*="speaking_"] {
|
||||
background: $green !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="reactionMe-"] {
|
||||
div[class*="reactionMe_"] {
|
||||
background-color: $surface0 !important;
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
@@ -314,13 +314,13 @@ div[class|="contentRegion"] {
|
||||
|
||||
// server boost page
|
||||
#guild_premium-tab {
|
||||
[class*="tierAccomplished-"],
|
||||
[class*="tierCurrent-"],
|
||||
[class*="tierFirst-"] {
|
||||
[class*="tierAccomplished_"],
|
||||
[class*="tierCurrent_"],
|
||||
[class*="tierFirst_"] {
|
||||
background: $pink;
|
||||
}
|
||||
|
||||
[class*="tierInProgress-"] {
|
||||
[class*="tierInProgress_"] {
|
||||
background-color: $crust;
|
||||
}
|
||||
|
||||
@@ -349,7 +349,7 @@ div[class|="contentRegion"] {
|
||||
color: $pink;
|
||||
}
|
||||
|
||||
svg[class*="tierIconLocked-"] {
|
||||
svg[class*="tierIconLocked_"] {
|
||||
color: $overlay1;
|
||||
}
|
||||
|
||||
@@ -407,14 +407,14 @@ div[class|="contentRegion"] {
|
||||
}
|
||||
|
||||
#roles-tab {
|
||||
div[class*="previewContainer-"] {
|
||||
div[class*="previewContainer_"] {
|
||||
.theme-light {
|
||||
img[class*="roleIcon-"] {
|
||||
img[class*="roleIcon_"] {
|
||||
content: "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.0749 1.66667H4.99996C3.15901 1.66667 1.66663 3.15906 1.66663 5.00001V15C1.66663 16.841 3.15901 18.3333 4.99996 18.3333H15C16.8409 18.3333 18.3333 16.841 18.3333 15V8.92511C17.8052 9.08227 17.2458 9.16667 16.6666 9.16667C13.445 9.16667 10.8333 6.555 10.8333 3.33334C10.8333 2.75419 10.9177 2.19476 11.0749 1.66667ZM6.66663 5.00001C7.58596 5.00001 8.33329 5.74601 8.33329 6.66667C8.33329 7.58801 7.58596 8.33334 6.66663 8.33334C5.74529 8.33334 4.99996 7.58801 4.99996 6.66667C4.99996 5.74601 5.74529 5.00001 6.66663 5.00001ZM4.99996 15L7.49996 11.6667L9.16663 13.3333L12.5 9.16667L15 15H4.99996Z' fill='%23#{str-slice(inspect($surface1), 2)}'/%3E%3Cpath d='M17.5 0V2.5H20V4.16667H17.5V6.66667H15.8334V4.16667H13.3334V2.5H15.8334V0H17.5Z' fill='%23#{str-slice(inspect($surface1), 2)}'/%3E%3C/svg%3E";
|
||||
}
|
||||
}
|
||||
.theme-dark {
|
||||
img[class*="roleIcon-"] {
|
||||
img[class*="roleIcon_"] {
|
||||
content: "data:image/svg+xml,%3Csvg fill='none' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23#{str-slice(inspect($text), 2)}'%3E%3Cpath clip-rule='evenodd' d='m11.0749 1.66667h-6.07488c-1.84095 0-3.33333 1.49239-3.33333 3.33334v9.99999c0 1.841 1.49238 3.3333 3.33333 3.3333h9.99998c1.841 0 3.3334-1.4923 3.3334-3.3333v-6.07489c-.5281.15716-1.0876.24156-1.6667.24156-3.2217 0-5.8333-2.61167-5.8333-5.83333 0-.57915.0844-1.13858.2415-1.66667zm-4.40821 3.33334c.91933 0 1.66666.746 1.66666 1.66666 0 .92134-.74733 1.66667-1.66666 1.66667-.92134 0-1.66667-.74533-1.66667-1.66667 0-.92066.74533-1.66666 1.66667-1.66666zm-1.66667 9.99999 2.5-3.3333 1.66667 1.6666 3.33331-4.16663 2.5 5.83333z' fill-rule='evenodd'/%3E%3Cpath d='m17.5 0v2.5h2.5v1.66667h-2.5v2.5h-1.6667v-2.5h-2.5v-1.66667h2.5v-2.5z'/%3E%3C/g%3E%3C/svg%3E";
|
||||
}
|
||||
}
|
||||
@@ -572,10 +572,10 @@ div[class|="sidebar"] div[class|="container"] {
|
||||
div[class|="pageWrapper"] {
|
||||
background: $base !important;
|
||||
|
||||
div[class*="searchBox-"] {
|
||||
div[class*="searchBox_"] {
|
||||
background-color: $mantle;
|
||||
|
||||
input[class*="searchBoxInput-"] {
|
||||
input[class*="searchBoxInput_"] {
|
||||
color: var(--text-normal);
|
||||
}
|
||||
|
||||
@@ -584,7 +584,7 @@ div[class|="pageWrapper"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="categoryPill-"][class*="selected-"] div {
|
||||
div[class*="categoryPill-"][class*="selected_"] div {
|
||||
color: $crust !important;
|
||||
}
|
||||
}
|
||||
@@ -593,7 +593,7 @@ div[class|="pageWrapper"] {
|
||||
div[class|="homeContainer"] {
|
||||
background: $base !important;
|
||||
|
||||
> div[class|="homeContent"] div[class*="card-"] {
|
||||
> div[class|="homeContent"] div[class*="card_"] {
|
||||
background: $surface0 !important;
|
||||
}
|
||||
}
|
||||
@@ -610,12 +610,12 @@ button[class*="lookFilled"] div[class*="addButton"] {
|
||||
}
|
||||
|
||||
// new label
|
||||
div[class|="itemInner"] div[class|="new"] > div[class*="newText-"] {
|
||||
div[class|="itemInner"] div[class|="new"] > div[class*="newText_"] {
|
||||
color: $crust !important;
|
||||
}
|
||||
|
||||
// app directory
|
||||
div[class*="directoryModal-"] {
|
||||
div[class*="directoryModal_"] {
|
||||
background-color: $base !important;
|
||||
|
||||
& [class*="searchBox"] {
|
||||
@@ -660,11 +660,11 @@ div[class|="tierPreviews"] {
|
||||
}
|
||||
|
||||
div[class|="notice"] {
|
||||
div[class*="noticeText-"] {
|
||||
div[class*="noticeText_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
div[class*="header-"] {
|
||||
div[class*="header_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
@@ -681,7 +681,7 @@ div[class|="notice"] {
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="colorStreamerMode-"] {
|
||||
&[class*="colorStreamerMode_"] {
|
||||
background-color: $mauve;
|
||||
color: $crust;
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
|
||||
&[class*="focused"] {
|
||||
&:not([class*="colorDanger"]),
|
||||
[class*="checkbox-"] {
|
||||
[class*="checkbox_"] {
|
||||
color: var(--interactive-normal);
|
||||
}
|
||||
}
|
||||
@@ -22,7 +22,7 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
color: $crust;
|
||||
|
||||
[class*="subtext"],
|
||||
[class*="caret-"] {
|
||||
[class*="caret_"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
@@ -32,14 +32,14 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
}
|
||||
|
||||
// make active items have dark text
|
||||
&:active:not([class*="hideInteraction-"]) {
|
||||
&:active:not([class*="hideInteraction_"]) {
|
||||
color: var(--background-floating);
|
||||
|
||||
[class*="check-"] {
|
||||
[class*="check_"] {
|
||||
color: var(--interactive-normal);
|
||||
}
|
||||
|
||||
[class*="checkbox-"] {
|
||||
[class*="checkbox_"] {
|
||||
color: var(--background-floating);
|
||||
}
|
||||
}
|
||||
@@ -73,7 +73,7 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
}
|
||||
|
||||
[class*="colorDanger"][class*="focused"],
|
||||
[class*="colorDefault"] [class*="check-"] {
|
||||
[class*="colorDefault"] [class*="check_"] {
|
||||
color: var(--background-floating);
|
||||
background-color: $red;
|
||||
}
|
||||
@@ -85,8 +85,8 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
}
|
||||
|
||||
// user volume slider
|
||||
#user-context-user-volume div[class*="slider-"] {
|
||||
div[class*="bar-"] {
|
||||
#user-context-user-volume div[class*="slider_"] {
|
||||
div[class*="bar_"] {
|
||||
background-color: $surface0;
|
||||
}
|
||||
}
|
||||
@@ -94,10 +94,10 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
|
||||
.theme-dark,
|
||||
.theme-light {
|
||||
div[class|="layerContainer"] div[id|="popout_"] > div[class*="didRender-"] {
|
||||
div[class|="layerContainer"] div[id|="popout_"] > div[class*="didRender_"] {
|
||||
&:not([class|="animatorBottom"]) > div {
|
||||
div[class*="flowerStarContainer-"] {
|
||||
svg[class*="flowerStar-"] * {
|
||||
div[class*="flowerStarContainer_"] {
|
||||
svg[class*="flowerStar_"] * {
|
||||
fill: $brand;
|
||||
}
|
||||
}
|
||||
@@ -116,7 +116,7 @@ div[class|="layerContainer"] [role="menu"] {
|
||||
}
|
||||
|
||||
div[class*="container"] {
|
||||
div[class*="autocompleteArrow-"],
|
||||
div[class*="autocompleteArrow_"],
|
||||
header {
|
||||
background-color: $mantle;
|
||||
}
|
||||
@@ -137,7 +137,7 @@ div[class*="recentMentionsPopout"] {
|
||||
div[class|="header"] {
|
||||
div[class|="tabBar"] {
|
||||
div[class|="badge"],
|
||||
div[class|="tab"][class*="active-"] {
|
||||
div[class|="tab"][class*="active_"] {
|
||||
color: $base;
|
||||
}
|
||||
}
|
||||
@@ -153,7 +153,7 @@ div[class*="recentMentionsPopout"] {
|
||||
--background-tertiary: #{adjust-color($subtext0, $alpha: -0.85)};
|
||||
--background-floating: #{adjust-color($subtext0, $alpha: -0.88)};
|
||||
|
||||
div[class*="jumpButton-"] {
|
||||
div[class*="jumpButton_"] {
|
||||
background-color: $surface0;
|
||||
}
|
||||
}
|
||||
@@ -215,7 +215,7 @@ div[class*="layerContainer"] {
|
||||
}
|
||||
|
||||
// gif/sticker/emoji section
|
||||
section[class|="positionContainer"] {
|
||||
section[class*="positionContainer_"] {
|
||||
// colors tab when active
|
||||
button[class*="navButtonActive"] {
|
||||
background-color: $brand;
|
||||
@@ -230,16 +230,16 @@ section[class|="positionContainer"] {
|
||||
|
||||
#emoji-picker-tab-panel {
|
||||
// more transparent to make things more bearable
|
||||
[class*="stickerInspected-"] [class*="inspectedIndicator"],
|
||||
[class|="emojiItem"][class*="emojiItemSelected-"] {
|
||||
[class*="stickerInspected_"] [class*="inspectedIndicator"],
|
||||
[class|="emojiItem"][class*="emojiItemSelected_"] {
|
||||
background-color: var(--brand-experiment-25a);
|
||||
}
|
||||
|
||||
// newly added thing
|
||||
[class*="newlyAddedHighlight-"] {
|
||||
[class*="newlyAddedHighlight_"] {
|
||||
border: 1px solid $green;
|
||||
|
||||
~ [class*="newlyAddedBadge-"] {
|
||||
~ [class*="newlyAddedBadge_"] {
|
||||
background: $green !important;
|
||||
color: $crust;
|
||||
}
|
||||
@@ -247,7 +247,7 @@ section[class|="positionContainer"] {
|
||||
}
|
||||
|
||||
// same as transparent above, but for stickers
|
||||
[class*="stickerInspected-"] [class|="inspectedIndicator"] {
|
||||
[class*="stickerInspected_"] [class|="inspectedIndicator"] {
|
||||
background-color: var(--brand-experiment-25a);
|
||||
}
|
||||
|
||||
@@ -260,16 +260,18 @@ section[class|="positionContainer"] {
|
||||
div[class*="footer"] {
|
||||
// background-color: $mantle;
|
||||
|
||||
&[class*="footerSeparator-"] {
|
||||
&[class*="footerSeparator_"] {
|
||||
box-shadow: inset 0 1px 0 $surface0;
|
||||
-webkit-box-shadow: inset 0 1px 0 $surface0;
|
||||
}
|
||||
}
|
||||
|
||||
> div[class|="focusLock"] > div[class|="root"] {
|
||||
box-shadow: 0 0 0 1px $surface0,
|
||||
box-shadow:
|
||||
0 0 0 1px $surface0,
|
||||
0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
|
||||
-webkit-box-shadow: 0 0 0 1px $surface0,
|
||||
-webkit-box-shadow:
|
||||
0 0 0 1px $surface0,
|
||||
0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
|
||||
}
|
||||
|
||||
@@ -283,7 +285,7 @@ section[class|="positionContainer"] {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
div[class*="footer-"] {
|
||||
div[class*="footer_"] {
|
||||
color: $text !important;
|
||||
background-color: unset !important;
|
||||
|
||||
@@ -292,26 +294,26 @@ section[class|="positionContainer"] {
|
||||
}
|
||||
}
|
||||
|
||||
li[class*="active-"] {
|
||||
a[class*="downloadButton-"] {
|
||||
li[class*="active_"] {
|
||||
a[class*="downloadButton_"] {
|
||||
transition: all 0.3s ease-in-out;
|
||||
color: $base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="profileColors-"] {
|
||||
[class*="userTagUsernameBase-"],
|
||||
[class*="discrimBase-"],
|
||||
[class*="title-"],
|
||||
[class*="roles-"],
|
||||
[class*="defaultColor-"],
|
||||
[class*="markup-"],
|
||||
[class*="activityUserPopoutV2-"] *,
|
||||
[class*="customStatus-"],
|
||||
[class*="section-"],
|
||||
[class*="additionalActionsIcon-"],
|
||||
[class*="overlayBackground-"] * {
|
||||
&[class*="profileColors_"] {
|
||||
[class*="userTagUsernameBase_"],
|
||||
[class*="discrimBase_"],
|
||||
[class*="title_"],
|
||||
[class*="roles_"],
|
||||
[class*="defaultColor_"],
|
||||
[class*="markup_"],
|
||||
[class*="activityUserPopoutV2_"] *,
|
||||
[class*="customStatus_"],
|
||||
[class*="section_"],
|
||||
[class*="additionalActionsIcon_"],
|
||||
[class*="overlayBackground_"] * {
|
||||
--interactive-normal: #{$crust};
|
||||
--text-normal: #{$crust};
|
||||
--interactive-active: #{$crust};
|
||||
@@ -347,7 +349,7 @@ div[class|="layerContainer"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="queryText-"] {
|
||||
div[class*="queryText_"] {
|
||||
color: $overlay1;
|
||||
strong {
|
||||
color: $text;
|
||||
@@ -380,7 +382,7 @@ div[class|="layerContainer"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
[class*="footerText-"] {
|
||||
[class*="footerText_"] {
|
||||
color: $subtext1;
|
||||
}
|
||||
}
|
||||
@@ -400,25 +402,25 @@ div[class|="layerContainer"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="message-"] {
|
||||
div[class*="message_"] {
|
||||
background-color: $surface0;
|
||||
}
|
||||
|
||||
&[aria-label="Activities"] {
|
||||
div[class*="activityItem-"] {
|
||||
div[class*="activityItem_"] {
|
||||
background-color: $crust;
|
||||
|
||||
div[class*="previewBadge-"] {
|
||||
div[class*="previewBadge_"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
div[class*="activityTag-"] {
|
||||
div[class*="activityTag_"] {
|
||||
background-color: $surface0;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-label="Manage Accounts"] {
|
||||
div[class*="navRow-"] {
|
||||
div[class*="navRow_"] {
|
||||
background-color: $mantle;
|
||||
}
|
||||
}
|
||||
@@ -426,7 +428,7 @@ div[class|="layerContainer"] {
|
||||
|
||||
// Checkbox toggles
|
||||
div[class|="checkbox"] {
|
||||
&[class*="checked-"] {
|
||||
&[class*="checked_"] {
|
||||
border: none;
|
||||
|
||||
svg path {
|
||||
@@ -441,9 +443,9 @@ div[class|="layerContainer"] {
|
||||
background-color: $mantle;
|
||||
}
|
||||
|
||||
div[class*="searchOption-"]::after,
|
||||
div[class*="option-"]::after,
|
||||
li[class*="option-"]::after {
|
||||
div[class*="searchOption_"]::after,
|
||||
div[class*="option_"]::after,
|
||||
li[class*="option_"]::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -456,9 +458,9 @@ div[class|="layerContainer"] {
|
||||
}
|
||||
|
||||
// branded and colored tooltips should have dark text
|
||||
[class*="tooltipBrand-"],
|
||||
[class*="tooltipRed-"],
|
||||
[class*="tooltipGreen-"],
|
||||
[class*="tooltipBrand_"],
|
||||
[class*="tooltipRed_"],
|
||||
[class*="tooltipGreen_"],
|
||||
[class*="tooltipYellow"] {
|
||||
color: $crust;
|
||||
}
|
||||
@@ -476,19 +478,19 @@ div[class|="layerContainer"] {
|
||||
}
|
||||
|
||||
// add account modal + cards
|
||||
form[class*="card-"] {
|
||||
form[class*="card_"] {
|
||||
background-color: $base;
|
||||
}
|
||||
|
||||
// user info
|
||||
div[class*="userInfoSection-"] {
|
||||
div[class*="userInfoSection_"] {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -504,7 +506,7 @@ div[class*="cardWarning-"] div[class*="warning-"] {
|
||||
|
||||
div[class|="tooltipContainer"] {
|
||||
label[class|="label"] {
|
||||
&[class*="labelChecked-"] {
|
||||
&[class*="labelChecked_"] {
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
right top,
|
||||
@@ -532,7 +534,7 @@ div[class*="cardWarning-"] div[class*="warning-"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="keyboardShortcutsModal-"] {
|
||||
div[class*="keyboardShortcutsModal_"] {
|
||||
background-color: $mantle !important;
|
||||
|
||||
div[class|="keybindShortcut"] span[class|="key"] {
|
||||
@@ -549,7 +551,7 @@ div[class|="planOptionClickableContainer"] {
|
||||
fill: $crust !important;
|
||||
}
|
||||
|
||||
span[class*="planOptionDiscount-"] {
|
||||
span[class*="planOptionDiscount_"] {
|
||||
color: $crust !important;
|
||||
}
|
||||
}
|
||||
@@ -572,9 +574,9 @@ div[class|="planOptionClickableContainer"] {
|
||||
color: $crust !important;
|
||||
}
|
||||
|
||||
div[class*="layerContainer-"] {
|
||||
div[class*="layerContainer_"] {
|
||||
div[class|="control"] {
|
||||
div[class*="checked-"] {
|
||||
div[class*="checked_"] {
|
||||
background-color: $green !important;
|
||||
}
|
||||
div[style*="background-color: rgb(114, 118, 125);"] {
|
||||
@@ -583,18 +585,18 @@ div[class*="layerContainer-"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="layerContainer-"] {
|
||||
div[class*="guildPopout-"][role="dialog"] {
|
||||
div[class*="layerContainer_"] {
|
||||
div[class*="guildPopout_"][role="dialog"] {
|
||||
background-color: $base;
|
||||
|
||||
div[class*="guildName-"] {
|
||||
div[class*="guildName_"] {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="layerContainer-"] [role*="dialog"] {
|
||||
a[class*="downloadLink-"] {
|
||||
div[class*="layerContainer_"] [role*="dialog"] {
|
||||
a[class*="downloadLink_"] {
|
||||
color: $overlay1 !important;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
@@ -603,8 +605,8 @@ div[class*="layerContainer-"] [role*="dialog"] {
|
||||
}
|
||||
}
|
||||
|
||||
div[class*="userPopoutOuter-"],
|
||||
div[class*="userProfileOuter-"] {
|
||||
div[class*="userPopoutOuter_"],
|
||||
div[class*="userProfileOuter_"] {
|
||||
div[aria-label="HypeSquad Bravery"] img {
|
||||
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 clip-rule='evenodd' d='m5.01502 4h13.97008c.1187 0 .215.09992.215.22305v9.97865c0 .0697-.0312.1343-.0837.1767l-6.985 5.5752c-.0389.0313-.0847.0464-.1314.0464-.0466 0-.0924-.0151-.1313-.0464l-6.985-5.5752c-.05252-.0424-.08365-.107-.08365-.1767v-9.97865c0-.12313.0963-.22305.21497-.22305zm7.82148 7.0972 4.1275-2.71296c.1039-.06863.2299.04542.1725.15644l-1.7114 3.36192c-.0403.0807.0182.1756.1079.1756h1.0246c.118 0 .1664.1504.0706.219l-4.6267 3.3175c-.0414.0303-.0978.0303-.1402 0l-4.6267-3.3175c-.0948-.0686-.04639-.219.07059-.219h1.02356c.09076 0 .14925-.0949.10791-.1756l-1.71132-3.36293c-.05648-.11001.06958-.22305.17345-.15543l4.12851 2.71296c.0716.0474.1291.112.1674.1887l.6293 1.2636c.0444.0888.1714.0888.2158 0l.6293-1.2636c.0383-.0767.0958-.1423.1674-.1887z' fill='%23#{str-slice(inspect($mauve), 2)}' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||||
}
|
||||
@@ -629,21 +631,21 @@ div[class*="userProfileOuter-"] {
|
||||
}
|
||||
}
|
||||
|
||||
[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;
|
||||
}
|
||||
|
||||
|
||||
@@ -45,26 +45,26 @@ ul[aria-label$=" threads"] > li:nth-child(6n) {
|
||||
}
|
||||
|
||||
// bot tag in sidebar
|
||||
[class|="botText"] {
|
||||
[class*="botText_"] {
|
||||
color: $crust;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
svg[class|="botTagVerified"] {
|
||||
svg[class*="botTagVerified_"] {
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
div[class*="activePostCount-"] {
|
||||
div[class*="activePostCount_"] {
|
||||
background-color: $surface0;
|
||||
color: $text !important;
|
||||
}
|
||||
|
||||
div[class*="newPostCount-"] {
|
||||
div[class*="newPostCount_"] {
|
||||
background-color: $text;
|
||||
color: $crust;
|
||||
}
|
||||
// Live icon
|
||||
div[class*="liveSmall-"] {
|
||||
div[class*="liveSmall_"] {
|
||||
background-color: $red !important;
|
||||
color: $crust;
|
||||
}
|
||||
|
||||
@@ -293,8 +293,8 @@ html {
|
||||
color: $subtext0;
|
||||
}
|
||||
|
||||
[class*="tooltipBrand-"] {
|
||||
[class*="tooltipText-"] {
|
||||
[class*="tooltipBrand_"] {
|
||||
[class*="tooltipText_"] {
|
||||
color: $crust;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user