SheWhoReignsSupreme/Equicord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ChannelTabs: use theme colors (#1301)

Browse source
This commit is contained in:
gitb0i 2026-08-16 08:33:34 -07:00 • committed by GitHub
parent ca0bd2c129
commit e9bcda23ab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 34 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/equicordplugins/channelTabs/components/ChannelTab.tsx
View file

@ -133,7 +133,7 @@ export const NotificationDot = ({ channelIds }: { channelIds: string[]; }) => {
width: "16px"
}}
ref={node => node?.style.setProperty("background-color",
hasMention ? "var(--red-400)" : "var(--brand-500)", "important"
hasMention ? "var(--danger-color, var(--red-400))" : "var(--main-color, var(--brand-experiment, var(--brand-500)))", "important"
)}
>
{badgeText}

64
src/equicordplugins/channelTabs/style.css
View file

@ -1,5 +1,5 @@
:root {
--channeltabs-red: #f23f42;
--channeltabs-red: var(--danger-color, #f23f42);
--channeltabs-blue: #0052b6;
--channeltabs-yellow: #f0b132;
--channeltabs-green: #24934f;
@ -153,8 +153,8 @@
}
.vc-channeltabs-bookmark-star-checked {
fill: var(--brand-experiment, var(--brand-500));
stroke: var(--brand-experiment, var(--brand-500));
fill: var(--main-color, var(--brand-experiment, var(--brand-500)));
stroke: var(--main-color, var(--brand-experiment, var(--brand-500)));
}
.vc-channeltabs-bookmark {
@ -232,7 +232,7 @@
cursor: ew-resize;
z-index: 10;
opacity: 0;
background: var(--brand-500);
background: var(--hover-color, var(--main-color, var(--brand-experiment, var(--brand-500))));
border-radius: 0 11px 11px 0;
transition: opacity 0.2s ease;
}
@ -301,8 +301,8 @@
.vc-channeltabs-tab-selected {
transform: translateY(-1px);
background-color: var(--background-base-low);
border: 1px solid var(--brand-500);
border-bottom: 2px solid var(--brand-500);
border: 1px solid var(--main-color, var(--brand-experiment, var(--brand-500)));
border-bottom: 2px solid var(--main-color, var(--brand-experiment, var(--brand-500)));
box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}
@ -360,7 +360,7 @@
.vc-channeltabs-tab:hover:not(.vc-channeltabs-tab-selected) {
transform: translateY(-1px) scale(1.02);
background-color: var(--background-secondary-alt);
border-color: var(--border-subtle);
border-color: var(--hover-color, var(--border-subtle));
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}
@ -587,7 +587,7 @@
/* stylelint-disable-next-line no-descending-specificity */
.vc-channeltabs-tab:has([data-has-mention="true"]) {
animation: vc-channeltabs-mention-pulse 2s ease-in-out infinite;
box-shadow: 0 0 8px rgb(242 63 66 / 60%), 0 0 16px rgb(242 63 66 / 30%);
box-shadow: 0 0 8px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 60%, transparent), 0 0 16px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 30%, transparent);
}
@keyframes vc-channeltabs-mention-pulse {
@ -595,11 +595,11 @@
/* stylelint-disable-next-line rule-empty-line-before */
0%,
100% {
box-shadow: 0 0 8px rgb(242 63 66 / 60%), 0 0 16px rgb(242 63 66 / 30%);
box-shadow: 0 0 8px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 60%, transparent), 0 0 16px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 30%, transparent);
}
50% {
box-shadow: 0 0 12px rgb(242 63 66 / 80%), 0 0 24px rgb(242 63 66 / 50%);
box-shadow: 0 0 12px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 80%, transparent), 0 0 24px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 50%, transparent);
}
}
@ -607,8 +607,8 @@
.vc-channeltabs-tab-selected:has([data-has-mention="true"]) {
box-shadow:
0 1px 3px rgb(0 0 0 / 20%),
0 0 12px rgb(242 63 66 / 80%),
0 0 24px rgb(242 63 66 / 50%);
0 0 12px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 80%, transparent),
0 0 24px color-mix(in srgb, var(--danger-color, rgb(242 63 66)) 50%, transparent);
}
/* Pink Nitro glow effect (easter egg) */
@ -862,7 +862,7 @@
top: 0;
bottom: 0;
width: 3px;
background: var(--brand-500);
background: var(--main-color, var(--brand-experiment, var(--brand-500)));
border-radius: 3px;
animation: vc-channeltabs-drop-indicator 0.5s ease-in-out infinite;
}
@ -873,12 +873,12 @@
0%,
100% {
opacity: 0.6;
box-shadow: 0 0 8px var(--brand-500);
box-shadow: 0 0 8px var(--main-color, var(--brand-experiment, var(--brand-500)));
}
50% {
opacity: 1;
box-shadow: 0 0 12px var(--brand-500);
box-shadow: 0 0 12px var(--main-color, var(--brand-experiment, var(--brand-500)));
}
}
@ -1072,8 +1072,8 @@
/* Drag and drop visual feedback */
.vc-channeltabs-bookmarks-drop-target {
background-color: color-mix(in srgb, var(--brand-500) 15%, transparent);
border: 1px dashed color-mix(in srgb, var(--brand-500) 65%, transparent);
background-color: color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 15%, transparent);
border: 1px dashed color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 65%, transparent);
border-radius: 6px;
}
@ -1083,8 +1083,8 @@
}
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-target {
border-color: color-mix(in srgb, var(--brand-500) 70%, var(--border-subtle));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 35%, transparent);
border-color: color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 70%, var(--border-subtle));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 35%, transparent);
}
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-before::before,
@ -1095,8 +1095,8 @@
bottom: 3px;
width: 2px;
border-radius: 999px;
background-color: var(--brand-500);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-500) 30%, transparent);
background-color: var(--main-color, var(--brand-experiment, var(--brand-500)));
box-shadow: 0 0 0 1px color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 30%, transparent);
}
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-drop-before::before {
@ -1116,10 +1116,10 @@
}
.vc-channeltabs-bookmark.vc-channeltabs-folder-drop-target {
background-color: color-mix(in srgb, var(--brand-500) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--brand-500) 80%, var(--border-subtle));
background-color: color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 80%, var(--border-subtle));
transform: scale(1.03);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 20%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 20%, transparent);
}
.vc-channeltabs-bookmark.vc-channeltabs-folder-expanded {
@ -1142,13 +1142,13 @@
/* Active bookmark visual indicator */
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-active {
border: 1px solid var(--brand-500);
box-shadow: 0 0 4px var(--brand-500);
background-color: color-mix(in srgb, var(--brand-500) 15%, transparent);
border: 1px solid var(--main-color, var(--brand-experiment, var(--brand-500)));
box-shadow: 0 0 4px var(--main-color, var(--brand-experiment, var(--brand-500)));
background-color: color-mix(in srgb, var(--main-color, var(--brand-experiment, var(--brand-500))) 15%, transparent);
}
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-active:hover {
box-shadow: 0 0 6px var(--brand-500);
box-shadow: 0 0 6px var(--hover-color, var(--main-color, var(--brand-experiment, var(--brand-500))));
}
/* keybind Settings Styles */
@ -1207,7 +1207,7 @@
.channelTabs-keybind-button:hover:not(:disabled) {
background-color: var(--background-mod-subtle);
border-color: var(--brand-experiment);
border-color: var(--hover-color, var(--main-color, var(--brand-experiment, var(--brand-500))));
transform: translateY(-1px);
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}
@ -1223,11 +1223,11 @@
}
.channelTabs-keybind-button.listening {
background: linear-gradient(135deg, var(--brand-experiment) 0%, var(--brand-experiment-560) 100%);
background: linear-gradient(135deg, var(--main-color, var(--brand-experiment, var(--brand-500))) 0%, var(--brand-experiment-560) 100%);
color: var(--white);
border-color: var(--brand-experiment);
border-color: var(--main-color, var(--brand-experiment, var(--brand-500)));
animation: keybind-pulse 1.5s ease-in-out infinite;
box-shadow: 0 0 12px var(--brand-experiment);
box-shadow: 0 0 12px var(--main-color, var(--brand-experiment, var(--brand-500)));
}
@keyframes keybind-pulse {

2
src/equicordplugins/channelTabs/util/constants.tsx
View file

@ -31,7 +31,7 @@ function AnimationSettings(): JSX.Element {
{ label: "Plus Button Pulse", value: "plus-pulse", selected: settings.store.animationPlusPulse },
{ label: "Mention Badge Glow", value: "mention-glow", selected: settings.store.animationMentionGlow },
{ label: "Compact Mode Expansion", value: "compact-expand", selected: settings.store.animationCompactExpand },
{ label: "Selected Tab Blue Border", value: "selected-border", selected: settings.store.animationSelectedBorder },
{ label: "Selected Tab Accent Border", value: "selected-border", selected: settings.store.animationSelectedBorder },
{ label: "Selected Tab Background Color", value: "selected-background", selected: settings.store.animationSelectedBackground },
{ label: "Tab Shadow Effects", value: "tab-shadows", selected: settings.store.animationTabShadows },
{ label: "Tab Repositioning (smooth position changes)", value: "tab-positioning", selected: settings.store.animationTabPositioning },