CollapsibleUI: Drop until rewrite
This commit is contained in:
thororen1234
parent
7f65b1b395
commit
6d8276aa7b
3 changed files with 0 additions and 672 deletions
|
|
@ -1,146 +0,0 @@
|
||||||
/*
|
|
||||||
* Vencord, a Discord client mod
|
|
||||||
* Copyright (c) 2026 Vendicated and contributors
|
|
||||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { ChannelToolbarButton } from "@api/HeaderBar";
|
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
|
||||||
import { EquicordDevs } from "@utils/constants";
|
|
||||||
import { classNameFactory } from "@utils/css";
|
|
||||||
import { classes } from "@utils/misc";
|
|
||||||
import definePlugin from "@utils/types";
|
|
||||||
import { ContextMenuApi, Menu } from "@webpack/common";
|
|
||||||
import type { ReactNode, SVGProps } from "react";
|
|
||||||
|
|
||||||
import { PanelId, panelRegistry, settings, toolbarPanelOrder } from "./settings";
|
|
||||||
import managedStyle from "./style.css?managed";
|
|
||||||
|
|
||||||
const cl = classNameFactory("vc-collapsible-ui-");
|
|
||||||
|
|
||||||
type StateStore = ReturnType<typeof settings.use>;
|
|
||||||
|
|
||||||
function PanelsIcon(props: SVGProps<SVGSVGElement>) {
|
|
||||||
return (
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" {...props}>
|
|
||||||
<path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3H3V5Zm0 5h6v11H5a2 2 0 0 1-2-2V10Zm8 0h10v9a2 2 0 0 1-2 2H11V10Zm2-5h8v3h-8V5Z" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStateClasses(store: StateStore) {
|
|
||||||
const classNames = [cl("state"), cl(`collapsed-size-${store.collapsedSize}`), cl(`transition-${store.transitionMs}`)];
|
|
||||||
|
|
||||||
for (const panelId of toolbarPanelOrder) {
|
|
||||||
const panel = panelRegistry[panelId];
|
|
||||||
if (store[panel.collapsedKey]) classNames.push(cl(`${panel.classId}-collapsed`));
|
|
||||||
}
|
|
||||||
|
|
||||||
return classes(...classNames);
|
|
||||||
}
|
|
||||||
|
|
||||||
function togglePanel(panelId: PanelId) {
|
|
||||||
const key = panelRegistry[panelId].collapsedKey;
|
|
||||||
settings.store[key] = !settings.store[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
const ToolbarMenu = ErrorBoundary.wrap(({ onClose }: { onClose(): void; }) => {
|
|
||||||
const store = settings.use();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu.Menu navId="vc-collapsible-ui-toolbar-menu" onClose={onClose} aria-label="Collapsible UI">
|
|
||||||
{toolbarPanelOrder.map(panelId => {
|
|
||||||
const panel = panelRegistry[panelId];
|
|
||||||
const collapsed = store[panel.collapsedKey];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu.MenuCheckboxItem
|
|
||||||
key={panelId}
|
|
||||||
id={`vc-collapsible-ui-${panel.classId}`}
|
|
||||||
label={panel.label}
|
|
||||||
checked={!collapsed}
|
|
||||||
action={() => togglePanel(panelId)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Menu.Menu>
|
|
||||||
);
|
|
||||||
}, { noop: true });
|
|
||||||
|
|
||||||
const ToolbarButtons = ErrorBoundary.wrap(() => {
|
|
||||||
const store = settings.use();
|
|
||||||
const anyCollapsed = toolbarPanelOrder.some(panelId => store[panelRegistry[panelId].collapsedKey]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<span aria-hidden className={getStateClasses(store)} style={{ display: "none" }} />
|
|
||||||
<ChannelToolbarButton
|
|
||||||
icon={PanelsIcon}
|
|
||||||
tooltip="Collapsible UI"
|
|
||||||
aria-label="Collapsible UI"
|
|
||||||
selected={anyCollapsed}
|
|
||||||
onClick={event => ContextMenuApi.openContextMenu(event, () => <ToolbarMenu onClose={ContextMenuApi.closeContextMenu} />)}
|
|
||||||
onContextMenu={event => ContextMenuApi.openContextMenu(event, () => <ToolbarMenu onClose={ContextMenuApi.closeContextMenu} />)}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}, { noop: true });
|
|
||||||
|
|
||||||
const ChatButtonsRow = ErrorBoundary.wrap(({ buttons }: { buttons: ReactNode[]; }) => {
|
|
||||||
const { chatButtonsCollapsed } = settings.use();
|
|
||||||
|
|
||||||
if (buttons.length === 0) return <>{buttons}</>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={classes(
|
|
||||||
cl("chat-buttons"),
|
|
||||||
chatButtonsCollapsed && cl("chat-buttons-collapsed")
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className={cl("chat-buttons-items")}>
|
|
||||||
{buttons}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}, { noop: true });
|
|
||||||
|
|
||||||
export default definePlugin({
|
|
||||||
name: "CollapsibleUI",
|
|
||||||
description: "Native collapsible channel, member, chat button, and user area surfaces.",
|
|
||||||
tags: ["Appearance", "Customisation", "Chat", "Servers"],
|
|
||||||
dependencies: ["HeaderBarAPI", "ChatInputButtonAPI"],
|
|
||||||
authors: [EquicordDevs.benjii],
|
|
||||||
searchTerms: ["ui", "sidebar", "layout"],
|
|
||||||
managedStyle,
|
|
||||||
settings,
|
|
||||||
|
|
||||||
headerBarButton: {
|
|
||||||
icon: PanelsIcon,
|
|
||||||
location: "channeltoolbar",
|
|
||||||
priority: 25,
|
|
||||||
render: () => <ToolbarButtons />,
|
|
||||||
},
|
|
||||||
|
|
||||||
patches: [
|
|
||||||
{
|
|
||||||
find: ".DISPLAY_NAME_STYLES_COACHMARK)",
|
|
||||||
replacement: {
|
|
||||||
match: /className:(\i\.\i),(?=style:(\i),children:\[)/,
|
|
||||||
replace: "className:$self.userAreaControlsClass($1),"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
chatBarButtonWrapper: {
|
|
||||||
wrapper: (buttons: ReactNode) => {
|
|
||||||
if (!Array.isArray(buttons) || buttons.length === 0) return buttons;
|
|
||||||
return <ChatButtonsRow buttons={buttons} />;
|
|
||||||
},
|
|
||||||
priority: 0,
|
|
||||||
},
|
|
||||||
|
|
||||||
userAreaControlsClass(className: string) {
|
|
||||||
return classes(className, cl("user-area-controls"));
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,110 +0,0 @@
|
||||||
/*
|
|
||||||
* Vencord, a Discord client mod
|
|
||||||
* Copyright (c) 2026 Vendicated and contributors
|
|
||||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { definePluginSettings } from "@api/Settings";
|
|
||||||
import { OptionType } from "@utils/types";
|
|
||||||
|
|
||||||
export const transitionMarkers = [0, 80, 120, 160, 200, 260, 320];
|
|
||||||
export const collapsedSizeMarkers = [8, 12, 16, 20, 24, 28, 32, 40, 48];
|
|
||||||
|
|
||||||
export const panelRegistry = {
|
|
||||||
guildBar: {
|
|
||||||
id: "guildBar",
|
|
||||||
classId: "guild-bar",
|
|
||||||
label: "Guild Bar",
|
|
||||||
collapsedKey: "guildBarCollapsed",
|
|
||||||
},
|
|
||||||
channelList: {
|
|
||||||
id: "channelList",
|
|
||||||
classId: "channel-list",
|
|
||||||
label: "Channel List",
|
|
||||||
collapsedKey: "channelListCollapsed",
|
|
||||||
},
|
|
||||||
membersList: {
|
|
||||||
id: "membersList",
|
|
||||||
classId: "members-list",
|
|
||||||
label: "Members List",
|
|
||||||
collapsedKey: "membersListCollapsed",
|
|
||||||
},
|
|
||||||
chatButtons: {
|
|
||||||
id: "chatButtons",
|
|
||||||
classId: "chat-buttons",
|
|
||||||
label: "Message Buttons",
|
|
||||||
collapsedKey: "chatButtonsCollapsed",
|
|
||||||
},
|
|
||||||
titleBar: {
|
|
||||||
id: "titleBar",
|
|
||||||
classId: "title-bar",
|
|
||||||
label: "Title Bar",
|
|
||||||
collapsedKey: "titleBarCollapsed",
|
|
||||||
},
|
|
||||||
headerBar: {
|
|
||||||
id: "headerBar",
|
|
||||||
classId: "header-bar",
|
|
||||||
label: "Header Bar",
|
|
||||||
collapsedKey: "headerBarCollapsed",
|
|
||||||
},
|
|
||||||
userArea: {
|
|
||||||
id: "userArea",
|
|
||||||
classId: "user-area",
|
|
||||||
label: "User Area",
|
|
||||||
collapsedKey: "userAreaCollapsed",
|
|
||||||
},
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
export type PanelId = keyof typeof panelRegistry;
|
|
||||||
|
|
||||||
export const toolbarPanelOrder = ["guildBar", "channelList", "membersList", "chatButtons", "titleBar", "headerBar", "userArea"] as const satisfies readonly PanelId[];
|
|
||||||
|
|
||||||
export const settings = definePluginSettings({
|
|
||||||
collapsedSize: {
|
|
||||||
type: OptionType.SLIDER,
|
|
||||||
description: "Collapsed hover area size in pixels.",
|
|
||||||
default: 12,
|
|
||||||
markers: collapsedSizeMarkers,
|
|
||||||
},
|
|
||||||
transitionMs: {
|
|
||||||
type: OptionType.SLIDER,
|
|
||||||
description: "Panel transition speed in milliseconds.",
|
|
||||||
default: 160,
|
|
||||||
markers: transitionMarkers,
|
|
||||||
},
|
|
||||||
guildBarCollapsed: {
|
|
||||||
type: OptionType.BOOLEAN,
|
|
||||||
description: "Persist the guild bar as collapsed.",
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
channelListCollapsed: {
|
|
||||||
type: OptionType.BOOLEAN,
|
|
||||||
description: "Persist the channel list as collapsed.",
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
membersListCollapsed: {
|
|
||||||
type: OptionType.BOOLEAN,
|
|
||||||
description: "Persist the members list as collapsed.",
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
chatButtonsCollapsed: {
|
|
||||||
type: OptionType.BOOLEAN,
|
|
||||||
description: "Persist the message button row as collapsed.",
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
titleBarCollapsed: {
|
|
||||||
type: OptionType.BOOLEAN,
|
|
||||||
description: "Persist the title bar as collapsed.",
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
headerBarCollapsed: {
|
|
||||||
type: OptionType.BOOLEAN,
|
|
||||||
description: "Persist the header bar as collapsed.",
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
userAreaCollapsed: {
|
|
||||||
type: OptionType.BOOLEAN,
|
|
||||||
description: "Persist the user area as collapsed.",
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,416 +0,0 @@
|
||||||
@property --vc-cui-collapsed-size {
|
|
||||||
syntax: "<length>";
|
|
||||||
inherits: true;
|
|
||||||
initial-value: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@property --vc-cui-transition {
|
|
||||||
syntax: "<time>";
|
|
||||||
inherits: true;
|
|
||||||
initial-value: 160ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--vc-cui-chat-buttons-width: min(320px, 36vw);
|
|
||||||
--vc-cui-hover-peek: var(--vc-cui-collapsed-size);
|
|
||||||
--vc-cui-hover-delay: 120ms;
|
|
||||||
--vc-cui-header-bar-height: 32px;
|
|
||||||
--vc-cui-user-area-collapsed-width: 52px;
|
|
||||||
--vc-cui-ease: cubic-bezier(.2, 0, 0, 1);
|
|
||||||
--vc-cui-fade-transition: opacity var(--vc-cui-transition) var(--vc-cui-ease);
|
|
||||||
--vc-cui-inline-transition:
|
|
||||||
width var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
inline-size var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
min-width var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
min-inline-size var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
max-width var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
max-inline-size var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
flex-basis var(--vc-cui-transition) var(--vc-cui-ease);
|
|
||||||
--vc-cui-block-transition:
|
|
||||||
height var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
block-size var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
min-height var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
min-block-size var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
max-height var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
max-block-size var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
padding var(--vc-cui-transition) var(--vc-cui-ease)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-collapsed-size-8) {
|
|
||||||
--vc-cui-collapsed-size: 8px
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-collapsed-size-12) {
|
|
||||||
--vc-cui-collapsed-size: 12px
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-collapsed-size-16) {
|
|
||||||
--vc-cui-collapsed-size: 16px
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-collapsed-size-20) {
|
|
||||||
--vc-cui-collapsed-size: 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-collapsed-size-24) {
|
|
||||||
--vc-cui-collapsed-size: 24px
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-collapsed-size-28) {
|
|
||||||
--vc-cui-collapsed-size: 28px
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-collapsed-size-32) {
|
|
||||||
--vc-cui-collapsed-size: 32px
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-collapsed-size-40) {
|
|
||||||
--vc-cui-collapsed-size: 40px
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-collapsed-size-48) {
|
|
||||||
--vc-cui-collapsed-size: 48px
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-transition-0) {
|
|
||||||
--vc-cui-transition: 0ms
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-transition-80) {
|
|
||||||
--vc-cui-transition: 80ms
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-transition-120) {
|
|
||||||
--vc-cui-transition: 120ms
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-transition-160) {
|
|
||||||
--vc-cui-transition: 160ms
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-transition-200) {
|
|
||||||
--vc-cui-transition: 200ms
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-transition-260) {
|
|
||||||
--vc-cui-transition: 260ms
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-transition-320) {
|
|
||||||
--vc-cui-transition: 320ms
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"])) {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
overflow: hidden !important;
|
|
||||||
transition: var(--vc-cui-inline-transition) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"])):is(:hover, :focus-within) {
|
|
||||||
z-index: 3
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"]), :is(:hover, :focus-within), :is(.vc-betterFolders-sidebar-grid:has(.vc-betterFolders-sidebar:is(:hover, :focus-within)) nav[class*="guilds_"])) {
|
|
||||||
background: var(--background-gradient-low, var(--background-base-lowest)) !important;
|
|
||||||
border-start-end-radius: var(--radius-sm, 8px);
|
|
||||||
width: var(--vc-cui-collapsed-size) !important;
|
|
||||||
inline-size: var(--vc-cui-collapsed-size) !important;
|
|
||||||
min-width: var(--vc-cui-collapsed-size) !important;
|
|
||||||
min-inline-size: var(--vc-cui-collapsed-size) !important;
|
|
||||||
max-width: var(--vc-cui-collapsed-size) !important;
|
|
||||||
max-inline-size: var(--vc-cui-collapsed-size) !important;
|
|
||||||
flex: 0 0 var(--vc-cui-collapsed-size) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
overflow: hidden !important;
|
|
||||||
transition: var(--vc-cui-inline-transition) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar-grid:has(nav[class*="guilds_"]:is(:hover, :focus-within), .vc-betterFolders-sidebar:is(:hover, :focus-within)) .vc-betterFolders-sidebar {
|
|
||||||
z-index: 3;
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar-grid:not(:has(nav[class*="guilds_"]:is(:hover, :focus-within), .vc-betterFolders-sidebar:is(:hover, :focus-within))) .vc-betterFolders-sidebar {
|
|
||||||
width: 0 !important;
|
|
||||||
inline-size: 0 !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
min-inline-size: 0 !important;
|
|
||||||
max-width: 0 !important;
|
|
||||||
max-inline-size: 0 !important;
|
|
||||||
flex: 0 0 0 !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebarList_"] {
|
|
||||||
overflow: hidden !important;
|
|
||||||
transition: var(--vc-cui-inline-transition) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebarList_"]:is(:hover, :focus-within) {
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebarList_"]:is(:hover, :focus-within) > * {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
transition: var(--vc-cui-fade-transition);
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-channel-list-collapsed):not(:has([class*="sidebar_"] > [class*="panels_"]:is(:hover, :focus-within))) [class*="sidebarList_"]:not(:is(:hover, :focus-within)) {
|
|
||||||
width: var(--vc-cui-collapsed-size) !important;
|
|
||||||
inline-size: var(--vc-cui-collapsed-size) !important;
|
|
||||||
min-width: var(--vc-cui-collapsed-size) !important;
|
|
||||||
min-inline-size: var(--vc-cui-collapsed-size) !important;
|
|
||||||
max-width: var(--vc-cui-collapsed-size) !important;
|
|
||||||
max-inline-size: var(--vc-cui-collapsed-size) !important;
|
|
||||||
flex: 0 0 var(--vc-cui-collapsed-size) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"] {
|
|
||||||
overflow: hidden !important;
|
|
||||||
transition: var(--vc-cui-inline-transition) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) {
|
|
||||||
width: var(--vc-cui-user-area-collapsed-width) !important;
|
|
||||||
inline-size: var(--vc-cui-user-area-collapsed-width) !important;
|
|
||||||
min-width: var(--vc-cui-user-area-collapsed-width) !important;
|
|
||||||
min-inline-size: var(--vc-cui-user-area-collapsed-width) !important;
|
|
||||||
max-width: var(--vc-cui-user-area-collapsed-width) !important;
|
|
||||||
max-inline-size: var(--vc-cui-user-area-collapsed-width) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) .vc-collapsible-ui-user-area-controls {
|
|
||||||
max-width: 0 !important;
|
|
||||||
min-width: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition:
|
|
||||||
max-width var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
opacity var(--vc-cui-transition) var(--vc-cui-ease) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"]:is(:hover, :focus-within) .vc-collapsible-ui-user-area-controls {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"] {
|
|
||||||
overflow: hidden !important;
|
|
||||||
transition: var(--vc-cui-inline-transition) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"]:is(:hover, :focus-within) {
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"]:is(:hover, :focus-within) > * {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
transition: var(--vc-cui-fade-transition);
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"]:not(:is(:hover, :focus-within)) {
|
|
||||||
width: var(--vc-cui-collapsed-size) !important;
|
|
||||||
min-width: var(--vc-cui-collapsed-size) !important;
|
|
||||||
max-width: var(--vc-cui-collapsed-size) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-members-list-collapsed) [class*="membersWrap"]:not(:is(:hover, :focus-within)) > * {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: var(--vc-cui-fade-transition)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-user-area-collapsed) [class*="sidebar_"] > [class*="panels_"]:is(:hover, :focus-within) > * {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
transition: var(--vc-cui-fade-transition)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-user-area-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) {
|
|
||||||
height: var(--vc-cui-hover-peek) !important;
|
|
||||||
block-size: var(--vc-cui-hover-peek) !important;
|
|
||||||
min-height: var(--vc-cui-hover-peek) !important;
|
|
||||||
min-block-size: var(--vc-cui-hover-peek) !important;
|
|
||||||
max-height: var(--vc-cui-hover-peek) !important;
|
|
||||||
max-block-size: var(--vc-cui-hover-peek) !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
border-top-width: 0 !important;
|
|
||||||
padding-block: 0 !important;
|
|
||||||
transition: var(--vc-cui-block-transition) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-user-area-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) > * {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: var(--vc-cui-fade-transition)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed):has(.vc-collapsible-ui-channel-list-collapsed) [class*="sidebar_"] > [class*="panels_"]:not(:is(:hover, :focus-within)) {
|
|
||||||
width: calc(var(--vc-cui-hover-peek) + 4px) !important;
|
|
||||||
inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important;
|
|
||||||
min-width: calc(var(--vc-cui-hover-peek) + 4px) !important;
|
|
||||||
min-inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important;
|
|
||||||
max-width: calc(var(--vc-cui-hover-peek) + 4px) !important;
|
|
||||||
max-inline-size: calc(var(--vc-cui-hover-peek) + 4px) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"] {
|
|
||||||
overflow: hidden !important;
|
|
||||||
transition: var(--vc-cui-block-transition) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"]:is(:hover, :focus-within) {
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"]:is(:hover, :focus-within) > * {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
transition: var(--vc-cui-fade-transition);
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"]:not(:is(:hover, :focus-within)) {
|
|
||||||
height: var(--vc-cui-hover-peek) !important;
|
|
||||||
block-size: var(--vc-cui-hover-peek) !important;
|
|
||||||
min-height: var(--vc-cui-hover-peek) !important;
|
|
||||||
min-block-size: var(--vc-cui-hover-peek) !important;
|
|
||||||
max-height: var(--vc-cui-hover-peek) !important;
|
|
||||||
max-block-size: var(--vc-cui-hover-peek) !important;
|
|
||||||
padding-block: 0 !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-title-bar-collapsed) section[class*="title_"][class*="container__"]:not(:is(:hover, :focus-within)) > * {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: var(--vc-cui-fade-transition)
|
|
||||||
}
|
|
||||||
|
|
||||||
/* stylelint-disable no-descending-specificity */
|
|
||||||
body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]) {
|
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
overflow: hidden !important;
|
|
||||||
transition: var(--vc-cui-block-transition) !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="base_"]:has(> [class*="bar_"] > [class*="title_"]) {
|
|
||||||
/* stylelint-disable-next-line value-keyword-case */
|
|
||||||
grid-template-rows: [top] var(--vc-cui-hover-peek) [titleBarEnd] auto [noticeEnd] minmax(0, 1fr) [end] !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="base_"]:has(> [class*="bar_"]:is(:hover, :focus-within) > [class*="title_"]) {
|
|
||||||
/* stylelint-disable-next-line value-keyword-case */
|
|
||||||
grid-template-rows: [top] var(--vc-cui-header-bar-height) [titleBarEnd] auto [noticeEnd] minmax(0, 1fr) [end] !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]):is(:hover, :focus-within) {
|
|
||||||
height: var(--vc-cui-header-bar-height) !important;
|
|
||||||
block-size: var(--vc-cui-header-bar-height) !important;
|
|
||||||
min-height: var(--vc-cui-header-bar-height) !important;
|
|
||||||
min-block-size: var(--vc-cui-header-bar-height) !important;
|
|
||||||
max-height: var(--vc-cui-header-bar-height) !important;
|
|
||||||
max-block-size: var(--vc-cui-header-bar-height) !important;
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]):is(:hover, :focus-within) > * {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
transition: var(--vc-cui-fade-transition);
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]):not(:is(:hover, :focus-within)) {
|
|
||||||
height: var(--vc-cui-hover-peek) !important;
|
|
||||||
block-size: var(--vc-cui-hover-peek) !important;
|
|
||||||
min-height: var(--vc-cui-hover-peek) !important;
|
|
||||||
min-block-size: var(--vc-cui-hover-peek) !important;
|
|
||||||
max-height: var(--vc-cui-hover-peek) !important;
|
|
||||||
max-block-size: var(--vc-cui-hover-peek) !important;
|
|
||||||
padding-block: 0 !important
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-header-bar-collapsed) [class*="bar_"]:has(> [class*="title_"]):not(:is(:hover, :focus-within)) > * {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: var(--vc-cui-fade-transition)
|
|
||||||
}
|
|
||||||
/* stylelint-enable no-descending-specificity */
|
|
||||||
|
|
||||||
/* stylelint-disable no-descending-specificity */
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar-grid:has(nav[class*="guilds_"]:is(:hover, :focus-within), .vc-betterFolders-sidebar:is(:hover, :focus-within)) .vc-betterFolders-sidebar > *,
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"])):is(:hover, :focus-within) > * {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
transition: var(--vc-cui-fade-transition);
|
|
||||||
transition-delay: calc(var(--vc-cui-hover-delay) + var(--vc-cui-transition))
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"])):is(:hover, :focus-within) > [class*="unreadMentionsIndicator"] {
|
|
||||||
pointer-events: none
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) .vc-betterFolders-sidebar-grid:not(:has(nav[class*="guilds_"]:is(:hover, :focus-within), .vc-betterFolders-sidebar:is(:hover, :focus-within))) .vc-betterFolders-sidebar > *,
|
|
||||||
body:has(.vc-collapsible-ui-guild-bar-collapsed) nav[class*="guilds_"]:not(:is(.vc-betterFolders-sidebar nav[class*="guilds_"]), :is(:hover, :focus-within), :is(.vc-betterFolders-sidebar-grid:has(.vc-betterFolders-sidebar:is(:hover, :focus-within)) nav[class*="guilds_"])) > * {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: var(--vc-cui-fade-transition)
|
|
||||||
}
|
|
||||||
|
|
||||||
body:has(.vc-collapsible-ui-channel-list-collapsed):not(:has([class*="sidebar_"] > [class*="panels_"]:is(:hover, :focus-within))) [class*="sidebarList_"]:not(:is(:hover, :focus-within)) > * {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: var(--vc-cui-fade-transition)
|
|
||||||
}
|
|
||||||
/* stylelint-enable no-descending-specificity */
|
|
||||||
|
|
||||||
.vc-collapsible-ui-chat-buttons {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
min-inline-size: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.vc-collapsible-ui-chat-buttons-collapsed {
|
|
||||||
min-inline-size: var(--vc-cui-hover-peek)
|
|
||||||
}
|
|
||||||
|
|
||||||
.vc-collapsible-ui-chat-buttons-items {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
min-inline-size: 0;
|
|
||||||
max-inline-size: var(--vc-cui-chat-buttons-width);
|
|
||||||
overflow: hidden;
|
|
||||||
transition:
|
|
||||||
max-inline-size var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
opacity var(--vc-cui-transition) var(--vc-cui-ease),
|
|
||||||
margin var(--vc-cui-transition) var(--vc-cui-ease)
|
|
||||||
}
|
|
||||||
|
|
||||||
.vc-collapsible-ui-chat-buttons-collapsed .vc-collapsible-ui-chat-buttons-items {
|
|
||||||
max-inline-size: 0;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.vc-collapsible-ui-chat-buttons-collapsed:is(:hover, :focus-within) .vc-collapsible-ui-chat-buttons-items {
|
|
||||||
max-inline-size: var(--vc-cui-chat-buttons-width);
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
transition-delay: var(--vc-cui-hover-delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
body:has(.vc-collapsible-ui-state) {
|
|
||||||
--vc-cui-transition: 0ms
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Reference in a new issue