149 lines
3.4 KiB
SCSS
149 lines
3.4 KiB
SCSS
// filled buttons and badges should have crust text
|
|
[class*="lookFilled_"] {
|
|
&[class*="colorBrand_"],
|
|
&[class*="colorBrandNew_"],
|
|
&[class*="colorLink_"],
|
|
&[class*="colorYellow_"],
|
|
&[class*="colorRed_"],
|
|
&[class*="colorGreen_"] {
|
|
color: $crust;
|
|
|
|
// darken the nitro button too
|
|
svg[class|="premiumIcon"] {
|
|
color: darken($pink, 20%);
|
|
}
|
|
|
|
// spinner color
|
|
[class*="spinnerItem_"] {
|
|
background-color: $crust;
|
|
}
|
|
|
|
[class*="defaultColor_"] {
|
|
color: $crust;
|
|
}
|
|
}
|
|
|
|
// ...unless it's primary
|
|
&[class*="colorPrimary_"] {
|
|
color: $text;
|
|
}
|
|
}
|
|
|
|
// For some reason, red buttons on click turn blue. Sure.
|
|
button[class*="lookFilled-"][class*="colorRed_"]:active {
|
|
background-color: $red;
|
|
}
|
|
|
|
[class*="lookOutlined-"][class*="colorPrimary_"] {
|
|
border-color: $surface1;
|
|
|
|
&:hover {
|
|
background-color: $surface0;
|
|
color: $text;
|
|
border-color: $surface1;
|
|
}
|
|
}
|
|
|
|
// buttons in sidebar when in calls
|
|
div[class|="actionButtons"] {
|
|
[class|="button"][class*="buttonColor_"],
|
|
[class|="button"] [class*="buttonColor_"] {
|
|
background-color: $surface1;
|
|
|
|
&[class*="buttonActive_"] {
|
|
background-color: $green;
|
|
color: $crust;
|
|
|
|
[class*="buttonContents_"] {
|
|
color: $crust;
|
|
|
|
svg {
|
|
color: $crust;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// lookInverted buttons should have darker brand text
|
|
[class*="lookInverted-"][class*="colorBrand_"] {
|
|
color: var(--brand-experiment-600);
|
|
|
|
// darken the nitro button too
|
|
svg[class|="premiumIcon"] {
|
|
color: darken($pink, 15%);
|
|
}
|
|
}
|
|
|
|
// lookLink + colorPrimary should be themed
|
|
.theme-dark,
|
|
.theme-light {
|
|
[class*="lookLink-"][class*="colorPrimary_"] {
|
|
color: $text;
|
|
}
|
|
[class*="lookFilled-"][class*="colorTransparent_"] {
|
|
color: $text;
|
|
background-color: $surface0;
|
|
}
|
|
}
|
|
|
|
// dangerous button when hovered is colored properly
|
|
div[class*="button-"][class*="dangerous_"]:hover {
|
|
color: darken($red, 10%);
|
|
}
|
|
|
|
// make all selected radio buttons's text crust
|
|
div[role="radio"][class*="selected"] {
|
|
color: $crust;
|
|
|
|
// make the allow radio button's bg to the correct green
|
|
&[class*="allow"] {
|
|
background-color: $green;
|
|
}
|
|
}
|
|
//nonspecific radio buttons
|
|
[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)"] {
|
|
background-color: $crust !important; //used in a lot of places
|
|
}
|
|
// vencord spotify plugin button theming support (uses vencord-specific classes)
|
|
.vc-spotify-button-row .vc-spotify-button {
|
|
&.vc-spotify-shuffle-on,
|
|
&.vc-spotify-repeat-context,
|
|
&.vc-spotify-repeat-track {
|
|
color: var(--interactive-normal);
|
|
}
|
|
&.vc-spotify-repeat-off,
|
|
&.vc-spotify-shuffle-off {
|
|
color: var(--text-muted);
|
|
}
|
|
}
|
|
|
|
// these badges appear in the emoji/sticker picker
|
|
[class*="topGuildEmojiBadge_"] {
|
|
background: linear-gradient(268.26deg, $peach, $red 102.45%);
|
|
|
|
* {
|
|
color: $crust !important;
|
|
}
|
|
}
|
|
|
|
[class*="newlyAddedBadge_"] {
|
|
background: linear-gradient(268.26deg, $teal, $green 102.45%);
|
|
|
|
* {
|
|
color: $crust !important;
|
|
}
|
|
}
|
|
|
|
//revert nitro icon on nitro subscribe button on external emoji
|
|
[class*="lookFilled_"]
|
|
[class*="premiumSubscribeButton_"]
|
|
> [class*="premiumIcon_"] {
|
|
color: $crust !important;
|
|
}
|