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

channelTabs macos tweaks (#701)

Browse source
This commit is contained in:
Jake 2026-01-28 13:55:42 +00:00 • committed by GitHub
parent 188fe57d44
commit f2efb8b28c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,6 @@ import { Flex } from "@components/Flex";
import { Heading } from "@components/Heading";
import { Paragraph } from "@components/Paragraph";
import { BasicChannelTabsProps, ChannelTabsProps, clearStaleNavigationContext, closeTab, createTab, handleChannelSwitch, isNavigationFromSource, isTabSelected, moveToTab, openedTabs, openStartupTabs, saveTabs, settings, setUpdaterFunction, useGhostTabs } from "@equicordplugins/channelTabs/util";
import { IS_MAC } from "@utils/constants";
import { classNameFactory } from "@utils/css";
import { classes } from "@utils/misc";
import { useForceUpdater } from "@utils/react";
@ -294,7 +293,6 @@ export default function ChannelsTabsContainer(props: BasicChannelTabsProps) {
className={classes(
cl("container"),
tabBarPosition === "top" && cl("container-top"),
IS_MAC && tabBarPosition === "top" && cl("container-top-macos"),
!animationHover && cl("no-hover-animation"),
!animationSelection && cl("no-selection-animation"),
!animationDragDrop && cl("no-drag-animation"),

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

@ -78,10 +78,6 @@
overflow: hidden;
}
.vc-channeltabs-container-top-macos {
padding-left: 80px !important;
}
.vc-channeltabs-separator {
width: 98%;
height: 1px;
@ -1172,6 +1168,7 @@
width: 20px;
height: 20px;
min-width: 20px;
max-width: 20px;
font-size: 12px;
font-weight: 700;
display: flex;
@ -1179,28 +1176,32 @@
justify-content: center;
padding: 0;
transition:
opacity 0.4s ease-out 0.2s,
transform 0.4s ease-out 0.2s,
margin 0.4s ease-out;
opacity 0.2s ease-out,
transform 0.2s ease-out,
max-width 0.2s ease-out,
margin 0.2s ease-out;
flex-shrink: 0;
overflow: hidden;
}
/* position: Left */
.vc-channeltabs-tab-number-badge[data-position="left"] {
margin-right: 0.5rem;
transition:
opacity 0.4s ease-out,
transform 0.4s ease-out,
margin-right 0.4s ease-out;
opacity 0.2s ease-out,
transform 0.2s ease-out,
max-width 0.2s ease-out,
margin-right 0.2s ease-out;
}
/* position: Right */
.vc-channeltabs-tab-number-badge[data-position="right"] {
margin-left: 0.5rem;
transition:
opacity 0.4s ease-out 0.2s,
transform 0.4s ease-out 0.2s,
margin-left 0.4s ease-out;
opacity 0.2s ease-out,
transform 0.2s ease-out,
max-width 0.2s ease-out,
margin-left 0.2s ease-out;
}
/* hover effect (slight scale up) */
@ -1211,17 +1212,21 @@
/* directional slide animations for compact mode */
.vc-channeltabs-tab-compact:not(:hover, .vc-channeltabs-tab-selected) .vc-channeltabs-tab-number-badge[data-position="right"] {
opacity: 0;
transform: translateX(-10px) scale(0.95);
transform: translateX(-6px) scale(0.95);
max-width: 0;
margin-left: 0;
pointer-events: none;
}
.vc-channeltabs-tab-compact:not(:hover, .vc-channeltabs-tab-selected) .vc-channeltabs-tab-number-badge[data-position="left"] {
opacity: 0;
transform: translateX(-15px) scale(0.9);
transform: translateX(-6px) scale(0.95);
max-width: 0;
margin-right: 0;
pointer-events: none;
}
/* disable transitions when compact expand animation is disabled */
.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-number-badge {
transition: none !important;
}
}