SheWhoReignsSupreme/Equicord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3
Equicord/src/equicordplugins/collapsibleUi/style.css
Benjii 1a99148ee2
CollapsibileUI (#1231) 
* refactor:collapsibleUI

Add surfaceClass API / rewrite collapsible

* fix: satisfy collapsibleUI stylelint

* ok papi

* Update CollapsibleUI

* Updates

* bleh

* [autofix.ci] apply automated fixes

* [autofix.ci] apply automated fixes (attempt 2/3)

---------

Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-07-08 17:11:12 -04:00

349 lines
12 KiB
CSS
Raw Blame History

[data-vc-collapsible-ui-base],
[data-vc-collapsible-ui-guild-bar],
[data-vc-collapsible-ui-channel-list],
[data-vc-collapsible-ui-members-list],
[data-vc-collapsible-ui-title-bar],
[data-vc-collapsible-ui-header-bar],
[data-vc-collapsible-ui-user-area],
.vc-collapsible-ui-chat-buttons {
--vc-cui-peek-size: 12px;
--vc-cui-user-area-collapsed-width: 52px;
--vc-cui-header-bar-height: 32px;
--vc-cui-collapsed-block-size: 8px;
--vc-cui-guild-bar-expanded-width: 64px;
--vc-cui-channel-list-min-width: 264px;
--vc-cui-channel-list-max-width: 432px;
--vc-cui-members-list-expanded-width: 240px;
--vc-cui-title-bar-expanded-height: 46px;
--vc-cui-chat-buttons-offset: 24px;
--vc-cui-restore-button-size: 24px;
--vc-cui-fade-delay: 80ms;
--vc-cui-transition: 140ms ease;
}
[data-vc-collapsible-ui-base-channel-list-collapsed] {
/* stylelint-disable-next-line value-keyword-case */
grid-template-columns: [start] min-content [guildsEnd] min-content [sidebarEnd] var(--vc-cui-peek-size) [channelsEnd] 1fr [end] !important;
}
[data-vc-collapsible-ui-base-channel-list-collapsed][data-vc-collapsible-ui-base-channel-list-interaction-expanded] {
/* stylelint-disable-next-line value-keyword-case */
grid-template-columns: [start] min-content [guildsEnd] min-content [sidebarEnd] var(--custom-guild-sidebar-width, 312px) [channelsEnd] 1fr [end] !important;
}
[data-vc-collapsible-ui-guild-bar],
[data-vc-collapsible-ui-channel-list],
[data-vc-collapsible-ui-members-list],
[data-vc-collapsible-ui-title-bar],
[data-vc-collapsible-ui-header-bar],
[data-vc-collapsible-ui-user-area] {
overflow: hidden;
transition: opacity var(--vc-cui-transition);
}
[data-vc-collapsible-ui-sidebar] {
position: relative;
}
[data-vc-collapsible-ui-sidebar-user-area-detached] {
--custom-app-panels-height: 0px !important;
}
[data-vc-collapsible-ui-sidebar-channel-list-collapsed] {
z-index: 5;
overflow: visible !important;
}
[data-vc-collapsible-ui-guild-bar-collapsed],
[data-vc-collapsible-ui-channel-list-collapsed],
[data-vc-collapsible-ui-members-list-collapsed] {
width: var(--vc-cui-peek-size) !important;
min-width: var(--vc-cui-peek-size) !important;
max-width: var(--vc-cui-peek-size) !important;
flex: 0 0 var(--vc-cui-peek-size) !important;
opacity: 0.01;
/* Delay only the opacity fade; dimensions change immediately to avoid animated layout work. */
transition-delay: var(--vc-cui-fade-delay);
}
[data-vc-collapsible-ui-guild-bar-collapsed]:is(:hover, :focus-within) {
width: var(--vc-cui-guild-bar-expanded-width) !important;
min-width: var(--vc-cui-guild-bar-expanded-width) !important;
max-width: var(--vc-cui-guild-bar-expanded-width) !important;
flex-basis: var(--vc-cui-guild-bar-expanded-width) !important;
opacity: 1;
transition-delay: 0ms;
}
[data-vc-collapsible-ui-channel-list-expanded],
[data-vc-collapsible-ui-channel-list-collapsed]:is(:hover, :focus-within) {
width: var(--custom-guild-sidebar-width, 312px) !important;
min-width: var(--vc-cui-channel-list-min-width) !important;
max-width: var(--vc-cui-channel-list-max-width) !important;
flex-basis: var(--custom-guild-sidebar-width, 312px) !important;
opacity: 1;
transition-delay: 0ms;
}
[data-vc-collapsible-ui-sidebar-channel-list-expanded] {
width: var(--custom-guild-sidebar-width, 312px) !important;
min-width: var(--custom-guild-sidebar-width, 312px) !important;
max-width: var(--custom-guild-sidebar-width, 312px) !important;
}
[data-vc-collapsible-ui-sidebar-channel-list-expanded] [data-vc-collapsible-ui-channel-list-collapsed] {
width: var(--custom-guild-sidebar-width, 312px) !important;
min-width: var(--vc-cui-channel-list-min-width) !important;
max-width: var(--vc-cui-channel-list-max-width) !important;
flex-basis: var(--custom-guild-sidebar-width, 312px) !important;
opacity: 1;
}
[data-vc-collapsible-ui-members-list-collapsed] {
flex: 0 1 auto !important;
flex-basis: auto !important;
}
[data-vc-collapsible-ui-members-list-collapsed]:is(:hover, :focus-within) {
width: var(--vc-cui-members-list-expanded-width) !important;
min-width: var(--vc-cui-members-list-expanded-width) !important;
max-width: var(--vc-cui-members-list-expanded-width) !important;
flex-basis: auto !important;
opacity: 1;
}
[data-vc-collapsible-ui-title-bar-collapsed] {
height: var(--vc-cui-collapsed-block-size) !important;
min-height: var(--vc-cui-collapsed-block-size) !important;
max-height: var(--vc-cui-collapsed-block-size) !important;
padding-block: 0 !important;
color: transparent !important;
opacity: 0.01 !important;
}
[data-vc-collapsible-ui-title-bar-collapsed]:is(:hover, :focus-within) {
height: var(--vc-cui-title-bar-expanded-height) !important;
min-height: var(--vc-cui-title-bar-expanded-height) !important;
max-height: var(--vc-cui-title-bar-expanded-height) !important;
color: inherit !important;
opacity: 1 !important;
}
[data-vc-collapsible-ui-base-header-bar-collapsed] {
--custom-app-top-bar-height: var(--vc-cui-collapsed-block-size) !important;
}
[data-vc-collapsible-ui-base-header-bar-expanded] {
--custom-app-top-bar-height: var(--vc-cui-header-bar-height) !important;
}
[data-vc-collapsible-ui-header-bar-collapsed] {
position: relative;
z-index: 10;
height: var(--vc-cui-collapsed-block-size) !important;
min-height: var(--vc-cui-collapsed-block-size) !important;
max-height: var(--vc-cui-collapsed-block-size) !important;
opacity: 0.01;
-webkit-app-region: drag;
overflow: visible;
}
[data-vc-collapsible-ui-header-bar-expanded] {
opacity: 1;
}
[data-vc-collapsible-ui-header-bar-collapsed]::before {
position: absolute;
z-index: 2;
inset: 0;
height: var(--vc-cui-collapsed-block-size);
content: "";
pointer-events: auto;
-webkit-app-region: no-drag;
}
[data-vc-collapsible-ui-header-bar-collapsed] > * {
pointer-events: none;
}
[data-vc-collapsible-ui-user-area-collapsed] > * {
opacity: 0;
pointer-events: none;
}
[data-vc-collapsible-ui-header-bar-collapsed][data-vc-collapsible-ui-header-bar-interaction-expanded] {
height: var(--vc-cui-header-bar-height) !important;
min-height: var(--vc-cui-header-bar-height) !important;
max-height: var(--vc-cui-header-bar-height) !important;
opacity: 1;
overflow: visible;
}
[data-vc-collapsible-ui-header-bar-collapsed][data-vc-collapsible-ui-header-bar-interaction-expanded]::before {
display: none;
}
[data-vc-collapsible-ui-header-bar-collapsed][data-vc-collapsible-ui-header-bar-interaction-expanded] > * {
pointer-events: auto;
}
[data-vc-collapsible-ui-user-area] {
background: var(--background-secondary-alt) !important;
}
[data-vc-collapsible-ui-user-area-collapsed] {
height: var(--vc-cui-peek-size) !important;
min-height: var(--vc-cui-peek-size) !important;
max-height: var(--vc-cui-peek-size) !important;
padding-block: 0 !important;
border-top-width: 0 !important;
}
[data-vc-collapsible-ui-user-area-collapsed]:is(:hover, :focus-within) {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
[data-vc-collapsible-ui-user-area-collapsed]:is(:hover, :focus-within) > * {
opacity: 1;
pointer-events: auto;
}
[data-vc-collapsible-ui-sidebar-channel-list-collapsed]:not([data-vc-collapsible-ui-sidebar-user-area-detached]) [data-vc-collapsible-ui-user-area] {
width: var(--vc-cui-user-area-collapsed-width) !important;
min-width: var(--vc-cui-user-area-collapsed-width) !important;
max-width: var(--vc-cui-user-area-collapsed-width) !important;
z-index: 4;
}
[data-vc-collapsible-ui-sidebar-channel-list-collapsed]:not([data-vc-collapsible-ui-sidebar-user-area-detached]) [data-vc-collapsible-ui-user-area-expanded] {
position: absolute !important;
right: auto !important;
bottom: 6px !important;
left: 6px !important;
height: var(--vc-cui-user-area-collapsed-width) !important;
min-height: var(--vc-cui-user-area-collapsed-width) !important;
max-height: var(--vc-cui-user-area-collapsed-width) !important;
flex: 0 0 auto !important;
align-self: flex-start;
overflow: hidden !important;
}
[data-vc-collapsible-ui-sidebar-channel-list-collapsed]:not([data-vc-collapsible-ui-sidebar-user-area-detached]) [data-vc-collapsible-ui-user-area-expanded] > * {
width: var(--custom-guild-sidebar-width, 312px);
min-width: var(--vc-cui-channel-list-min-width);
max-width: var(--vc-cui-channel-list-max-width);
opacity: 1;
pointer-events: auto;
}
[data-vc-collapsible-ui-sidebar-channel-list-collapsed]:not([data-vc-collapsible-ui-sidebar-user-area-detached]) [data-vc-collapsible-ui-user-area-expanded]:is(:hover, :focus-within) {
width: var(--custom-guild-sidebar-width, 312px) !important;
min-width: var(--vc-cui-channel-list-min-width) !important;
max-width: var(--vc-cui-channel-list-max-width) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
[data-vc-collapsible-ui-sidebar-channel-list-collapsed]:not([data-vc-collapsible-ui-sidebar-user-area-detached]) [data-vc-collapsible-ui-user-area-guild-bar-collapsed][data-vc-collapsible-ui-user-area-collapsed] {
width: var(--vc-cui-peek-size) !important;
min-width: var(--vc-cui-peek-size) !important;
max-width: var(--vc-cui-peek-size) !important;
}
[data-vc-collapsible-ui-sidebar-channel-list-expanded]:not([data-vc-collapsible-ui-sidebar-user-area-detached]) [data-vc-collapsible-ui-user-area] {
width: var(--custom-guild-sidebar-width, 312px) !important;
min-width: var(--vc-cui-channel-list-min-width) !important;
max-width: var(--vc-cui-channel-list-max-width) !important;
}
[data-vc-collapsible-ui-user-area-detached] {
position: fixed !important;
right: auto !important;
bottom: auto !important;
width: var(--custom-guild-sidebar-width, 312px) !important;
min-width: var(--custom-guild-sidebar-width, 312px) !important;
max-width: var(--custom-guild-sidebar-width, 312px) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
cursor: grab;
z-index: 2 !important;
}
[data-vc-collapsible-ui-user-area-detached]:active {
cursor: grabbing;
}
.vc-collapsible-ui-chat-buttons {
position: relative;
display: flex;
align-items: center;
gap: 4px;
min-inline-size: 0;
}
.vc-collapsible-ui-chat-buttons-items {
display: flex;
align-items: center;
min-inline-size: 0;
overflow: hidden;
transition:
transform var(--vc-cui-transition),
opacity var(--vc-cui-transition);
transform-origin: right center;
}
.vc-collapsible-ui-chat-buttons-collapsed .vc-collapsible-ui-chat-buttons-items {
position: absolute;
top: 50%;
right: var(--vc-cui-chat-buttons-offset);
width: max-content;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) scaleX(0);
transition-delay: var(--vc-cui-fade-delay);
}
.vc-collapsible-ui-chat-buttons-collapsed:is(:hover, :focus-within) .vc-collapsible-ui-chat-buttons-items {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) scaleX(1);
transition-delay: 0ms;
}
.vc-collapsible-ui-restore-button {
display: flex;
align-items: center;
justify-content: center;
width: var(--vc-cui-restore-button-size);
height: var(--vc-cui-restore-button-size);
border-radius: var(--radius-sm);
color: var(--interactive-normal);
}
.vc-collapsible-ui-restore-button:hover {
color: var(--interactive-hover);
background: var(--background-modifier-hover);
}
.vc-collapsible-ui-chat-buttons:not(.vc-collapsible-ui-chat-buttons-collapsed) .vc-collapsible-ui-restore-button {
display: none;
}
@media (prefers-reduced-motion: reduce) {
[data-vc-collapsible-ui-guild-bar],
[data-vc-collapsible-ui-channel-list],
[data-vc-collapsible-ui-members-list],
[data-vc-collapsible-ui-title-bar],
[data-vc-collapsible-ui-header-bar],
[data-vc-collapsible-ui-user-area],
.vc-collapsible-ui-chat-buttons,
.vc-collapsible-ui-chat-buttons-items {
--vc-cui-transition: 0ms;
}
}
Reference in a new issue View git blame Copy permalink