Skip to content

Commit 254cfcd

Browse files
CovkieCovkie
authored
forum fixes/switch animations/tooltip and vesktop screenshare contrast (#388)
* forum new badge/pressed reaction why the hell do these use different vars.. discord UX team is insane * restore switch animations/gray tooltip text * vesktop screenshare * server/gdm join/leave icons * forwarded text * all in-use blurple alphas|channels & roles check * status change * unread new pressed * make the bg-mod lighter makes many things more visible * cleanup switch transitions * reorganize & drop border var `--button-filled-brand-border` this var is supposed to be almost invisible // default works fine
1 parent 9e836c5 commit 254cfcd

File tree

4 files changed

+68
-46
lines changed

4 files changed

+68
-46
lines changed

‎src/components/_details.scss‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,18 @@
1-
// // streaming
2-
// svg[fill="#593695"],
3-
// rect[fill="#593695"],
4-
// rect[fill="#5b3a91"] {
5-
// fill: $mauve !important;
6-
// }
7-
// I can't seem to get the indicator to appear?
8-
91
$svg-platform-colors: (
102
//online indicators (not var based)
11-
$yellow: #cc954c,
12-
$red: #d83a41,
13-
$green: #40a258,
14-
$overlay1: #82838b
3+
$yellow: #ca9654,
4+
$red: #d83a42,
5+
$green: #43a25a,
6+
$overlay1: #82838b,
7+
"var(--twitch)": #9147ff
158
);
169
@each $var, $color in $svg-platform-colors {
1710
svg [fill="#{$color}"],
1811
svg[fill="#{$color}"] {
1912
fill: #{$var};
2013
}
21-
}
2214

23-
$div-platform-colors: (
24-
//online indicators (not var based)
25-
$yellow: "rgb(204, 149, 76)",
26-
$red: "rgb(216, 58, 65)",
27-
$green: "rgb(64, 162, 88)",
28-
$overlay1: "rgb(130, 131, 139)"
29-
);
30-
@each $var, $color in $div-platform-colors {
31-
div[style="background-color: #{$color};"] {
15+
div[style="background-color: rgb(#{red($color)}, #{green($color)}, #{blue($color)});"] {
3216
background-color: #{$var} !important;
3317
}
3418
}
@@ -48,13 +32,16 @@ div[class^="expandedFolderBackground_"] {
4832
// div[class^="container_"][style*="opacity: 1; background-color:"]
4933
div[class^="control_"] > div[class^="container_"] {
5034
background-color: #{$surface2} !important;
35+
transition: background-color 0.2s;
5136

5237
> svg {
5338
> rect {
5439
fill: var(--white);
40+
transition: fill 0.2s;
5541
}
5642
> svg > path {
5743
fill: #{$surface2};
44+
transition: fill 0.2s;
5845
}
5946
}
6047

@@ -75,8 +62,10 @@ div[class^="control_"] > div[class^="container_"] {
7562
// Vencord custom switches
7663
div[class^="vc-addon-card"] > div div[class^="container_"] {
7764
--primary-400: #{$surface2};
65+
transition: background-color 0.2s;
7866
> svg > rect {
7967
fill: var(--white);
68+
transition: fill 0.2s;
8069
}
8170

8271
&[class*="checked_"] > svg > rect {
@@ -95,6 +84,15 @@ div[class^="message"][class*="isSystemMessage"] div[class^="icon"] {
9584
&[style*="/assets/6f076a64de25de4b.svg"] {
9685
@include recolor($subtext0);
9786
}
87+
88+
// Left server/group icon
89+
&[style*="/assets/53e42368b1409f1a.svg"] {
90+
@include recolor($red);
91+
}
92+
// Joined server/group icon
93+
&[style*="/assets/8b9de960da063cb9.svg"] {
94+
@include recolor($green);
95+
}
9896
}
9997

10098
img[class*="maskIcon"][src*="/assets/c8ae30e56eb87fdf.svg"] {
@@ -123,6 +121,11 @@ div[class^="textContentFooter_"] {
123121
background-color: #{rgba($surface1, 0.9)};
124122
}
125123
}
124+
// Forum new badge / OP tag
125+
div[class^="newBadge_"][class*="textBadge_"][style="background-color: var(--brand-260);"],
126+
span[class*="botTagOP_"] {
127+
color: var(--badge-brand-text);
128+
}
126129

127130
// Universally style inline styles
128131
[style*="color: white"] {

‎src/components/_variables.scss‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -49,26 +49,6 @@
4949
--brand-90a: #{adjust-color($brand, $alpha: -0.1)};
5050
--brand-95a: #{adjust-color($brand, $alpha: -0.05)};
5151

52-
--spotify: #{$green};
53-
54-
// Accent coloured buttons
55-
--button-filled-brand-border: #{darken($brand, math.div(5%, 2))};
56-
--button-filled-brand-text: #{$crust};
57-
--button-filled-brand-background: #{$brand};
58-
--button-filled-brand-background-hover: #{darken($brand, math.div(15%, 2))}; // TODO: Upcoming palette tints/shades
59-
--button-filled-brand-background-active: #{darken($brand, math.div(25%, 2))};
60-
61-
--button-filled-brand-inverted-text: #{$crust};
62-
--button-filled-brand-inverted-background: #{$text};
63-
--button-filled-brand-inverted-background-hover: #{darken(
64-
$text,
65-
math.div(15%, 2)
66-
)};
67-
--button-filled-brand-inverted-background-active: #{darken(
68-
$text,
69-
math.div(25%, 2)
70-
)};
71-
7252
--header-primary: #{$text} !important;
7353
--header-secondary: #{$subtext0} !important;
7454
--__header-bar-background: #{$mantle} !important;
@@ -78,6 +58,7 @@
7858
--text-muted: #{$subtext0} !important;
7959
--text-link: #{$blue} !important;
8060
--text-link-low-saturation: #{$sapphire};
61+
--text-low-contrast: #{$overlay1};
8162
--text-positive: #{$green};
8263
--text-warning: #{$yellow};
8364
--text-danger: #{$red};
@@ -102,7 +83,11 @@
10283
--message-reacted-background: #{adjust-color($brand, $alpha: -0.7)} !important;
10384
--message-reacted-text: #{$brand};
10485

86+
--opacity-blurple-8: #{adjust-color($brand, $alpha: -0.92)};
10587
--opacity-blurple-16: #{adjust-color($brand, $alpha: -0.84)};
88+
--opacity-blurple-24: #{adjust-color($brand, $alpha: -0.76)};
89+
--opacity-blurple-32: #{adjust-color($brand, $alpha: -0.68)};
90+
--opacity-blurple-60: #{adjust-color($brand, $alpha: -0.4)};
10691
--blurple-50: #{$brand};
10792

10893
--background-primary: #{$base} !important;
@@ -187,6 +172,7 @@
187172
--yellow-360: #{$yellow};
188173
--yellow-300: #{$yellow};
189174
--red-400: #{$red};
175+
--red-430: #{darken($red, 10%)};
190176
--red-500: #{darken($red, 15%)};
191177

192178
--primary-100: #{$subtext1};
@@ -286,6 +272,23 @@
286272
--button-outline-primary-text-active: #{$base};
287273
--button-outline-primary-border-active: #{darken($surface2, math.div(5%, 2))};
288274

275+
// Accent coloured buttons
276+
--button-filled-brand-text: #{$crust};
277+
--button-filled-brand-background: #{$brand};
278+
--button-filled-brand-background-hover: #{darken($brand, math.div(15%, 2))}; // TODO: Upcoming palette tints/shades
279+
--button-filled-brand-background-active: #{darken($brand, math.div(25%, 2))};
280+
281+
--button-filled-brand-inverted-text: #{$crust};
282+
--button-filled-brand-inverted-background: #{$text};
283+
--button-filled-brand-inverted-background-hover: #{darken(
284+
$text,
285+
math.div(15%, 2)
286+
)};
287+
--button-filled-brand-inverted-background-active: #{darken(
288+
$text,
289+
math.div(25%, 2)
290+
)};
291+
289292
--modal-background: #{$base} !important;
290293
--modal-footer-background: #{$crust};
291294

@@ -343,9 +346,9 @@
343346
--deprecated-card-bg: #{adjust-color($crust, $alpha: -0.4)};
344347
--deprecated-card-editable-bg: #{adjust-color($crust, $alpha: -0.7)};
345348

346-
--bg-mod-faint: #{adjust-color($base, $alpha: -0.9)};
347-
--bg-mod-subtle: #{adjust-color($base, $alpha: -0.75)} !important;
348-
--bg-mod-strong: #{adjust-color($base, $alpha: -0.55)} !important;
349+
--bg-mod-faint: #{adjust-color($surface2, $alpha: -0.9)};
350+
--bg-mod-subtle: #{adjust-color($surface2, $alpha: -0.75)} !important;
351+
--bg-mod-strong: #{adjust-color($surface2, $alpha: -0.55)} !important;
349352

350353
--deprecated-text-input-bg: #{$crust};
351354
--deprecated-text-input-border: #{adjust-color($crust, $alpha: -0.7)};
@@ -374,6 +377,7 @@
374377

375378
--twitch: #{darken($mauve, 10%)};
376379
--playstation: #{darken($blue, 10%)};
380+
--spotify: #{$green};
377381

378382
--notice-background-critical: #{$red};
379383
--notice-background-info: #{$blue};

‎src/components/tweaks/_dark.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ button[class^="container_"]>div[class^="icon_"]>svg, // Add Friend Page Discover
1212
div[class^="newBadge_"],
1313
div[class^="premiumTab_"][class*="selected_"], // Nitro tab selected in settings
1414
label[class^="checkboxWrapper_"], label[class^="checkboxWrapperDisabled_"], div[class^="checkbox_"][class*="box_"],
15-
svg[class^="checkmarkCircle"],
15+
svg[class^="checkmarkCircle"], div[class*="checkIcon_"],
1616
button[class*="button_"][class*="lookFilled_"][class*="colorRed_"],
1717
button[class*="button_"][class*="lookFilled_"][class*="colorGreen_"],
1818
button[class*="button_"][class*="lookFilled_"][class*="colorLink_"],
@@ -51,3 +51,12 @@ div[class^="friendRequestContainer_"] > button[class*="colorGreen_"] {
5151
color: #{$crust} !important;
5252
}
5353
}
54+
55+
.vcd-screen-picker-option-radio[data-checked="true"] {
56+
--text-normal: #{$crust};
57+
}
58+
59+
// Channels & Roles Browse channels count
60+
div[class*="textBadge_"][class*="base_"][style*="background-color: var(--background-accent)"] {
61+
--white: #{$text};
62+
}

‎src/components/tweaks/_light.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,9 @@
33
--white: #{$crust} !important;
44
--white-500: #{$crust} !important;
55
}
6+
7+
// Exception
8+
div[class*="tooltipGrey_"] {
9+
--white-500: #{$text};
10+
--white: #{$text};
11+
}

0 commit comments

Comments
 (0)