Cynosphere/xmc
1
1
Fork 0
mirror of https://gitlab.com/Cynosphere/xmc.git synced 2024-08-14 22:57:03 +00:00
Code Issues Projects Releases Packages Wiki Activity

Make Modular

Browse source
This commit is contained in:
CI 2023-02-15 03:59:16 +00:00
parent 9761e0d166
commit aab8e97348
11 changed files with 903 additions and 348 deletions
Download patch file Download diff file Expand all files Collapse all files

86
modular/collapsing_members/dynamic.css Normal file
View file

@ -0,0 +1,86 @@
@media (width < 1300px) {
[class^="chat-"]
> [class^="content-"]
> [class^="container-"]
> [class^="membersWrap-"],
[class^="chat-"] > [class^="content-"] > [class^="membersWrap-"] {
width: 50px !important;
min-width: 50px !important;
}
[class^="chat-"]
> [class^="content-"]
> [class^="container-"]:hover
> [class^="membersWrap-"],
[class^="chat-"] > [class^="content-"] > [class^="membersWrap-"]:hover {
width: 240px !important;
}
[class^="chat-"]
> [class^="content-"]
> [class^="container"]
> [class^="membersWrap-"],
[class^="chat-"] > [class^="content-"] > [class^="membersWrap-"] {
min-width: 0;
min-height: 100%;
background-color: var(--background-secondary);
}
[class^="chat-"]
> [class^="content-"]
> [class^="container-"]
> [class^="membersWrap-"]
> [class^="members-"],
[class^="chat-"]
> [class^="content-"]
> [class^="membersWrap-"]
> [class^="members-"] {
width: 58px !important;
}
[class^="chat-"]
> [class^="content-"]
> [class^="container-"]:hover
> [class^="membersWrap-"]
> [class^="members-"],
[class^="chat-"]
> [class^="content-"]
> [class^="membersWrap-"]:hover
> [class^="members-"] {
width: 240px !important;
}
[class^="chat-"]
> [class^="content-"]
> [class^="container-"]
> [class^="membersWrap-"]
> [class^="members-"]
> [class^="content-"]
> [class^="membersGroup-"],
[class^="chat-"]
> [class^="content-"]
> [class^="membersWrap-"]
> [class^="members-"]
> [class^="content-"]
> [class^="membersGroup-"] {
height: 0;
padding-top: 12px;
}
[class^="chat-"]
> [class^="content-"]
> [class^="container-"]:hover
> [class^="membersWrap-"]
> [class^="members-"]
> [class^="content-"]
> [class^="membersGroup-"],
[class^="chat-"]
> [class^="content-"]
> [class^="membersWrap-"]:hover
> [class^="members-"]
> [class^="content-"]
> [class^="membersGroup-"] {
height: 40px;
padding-top: 24px;
}
}

0
modular/collapsing_members.css → modular/collapsing_members/on.css
View file

180
modular/collapsing_sidebar/compact-er_support.css Normal file
View file

@ -0,0 +1,180 @@
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
width: 56px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
width: 240px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> *:not(:last-child),
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child
> [class^="avatarWrapper-"]
> [class^="nameTag-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child
> div:last-child {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> [class^="panels-"]
> [class^="container-"]:last-child {
width: 232px;
position: relative;
bottom: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child {
width: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav
> [class^="scroller-"] {
margin-top: 32px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="privateChannels-"]
> [class^="searchBar-"] {
position: fixed;
top: 0;
width: 240px;
z-index: 101;
background: var(--background-secondary);
padding: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
height: 32px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"] {
height: 32px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"]:after {
content: "";
height: 32px;
width: 240px;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(
0deg,
var(--background-secondary) 5%,
transparent 100%
);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
top: -67px;
position: relative;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="scroller-"]
> ul
> div[style="height: 84px;"] {
height: 0 !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
~ [class^="chat-"]
[class^="chatContent-"]
> form
> [class^="channelTextArea"] {
margin-left: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
~ [class^="chat-"]
[class^="title-"] {
margin-left: 184px;
width: calc(100% - 184px);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
~ [class^="chat-"]
[class^="title-"] {
margin-left: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="channelInfo-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"][class*="selected-"]
[class^="iconVisibility-"]
> [class^="content-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"]:not([class*="typeThread-"])
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
> [class^="iconVisibility-"][class*="clickable-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class^="icons-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class*="username-"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"] {
margin-left: 20px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
height: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"]
> * {
display: none;
}

182
modular/collapsing_sidebar/dynamic.css Normal file
View file

@ -0,0 +1,182 @@
@media (width < 1300px) {
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
width: 56px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
width: 240px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> *:not(:last-child),
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child
> [class^="avatarWrapper-"]
> [class^="nameTag-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child
> div:last-child {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> [class^="panels-"]
> [class^="container-"]:last-child {
width: 232px;
position: relative;
bottom: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child {
width: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav
> [class^="scroller-"] {
margin-top: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="privateChannels-"]
> [class^="searchBar-"] {
position: fixed;
top: 0;
width: 240px;
z-index: 101;
background: var(--background-secondary);
padding: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
height: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"] {
height: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"]:after {
content: "";
height: 48px;
width: 240px;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(
0deg,
var(--background-secondary) 5%,
transparent 100%
);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
top: -67px;
position: relative;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="scroller-"]
> ul
> div[style="height: 84px;"] {
height: 0 !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
~ [class^="chat-"]
[class^="chatContent-"]
> form
> [class^="channelTextArea"] {
margin-left: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
~ [class^="chat-"]
[class^="title-"] {
margin-left: 184px;
width: calc(100% - 184px);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
~ [class^="chat-"]
[class^="title-"] {
margin-left: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="channelInfo-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"][class*="selected-"]
[class^="iconVisibility-"]
> [class^="content-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"]:not([class*="typeThread-"])
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
> [class^="iconVisibility-"][class*="clickable-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class^="icons-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class*="username-"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"] {
margin-left: 20px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
height: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"]
> * {
display: none;
}
}

182
modular/collapsing_sidebar/dynamic_+_compact-er_support.css Normal file
View file

@ -0,0 +1,182 @@
@media (width < 1300px) {
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
width: 56px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
width: 240px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> *:not(:last-child),
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child
> [class^="avatarWrapper-"]
> [class^="nameTag-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child
> div:last-child {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> [class^="panels-"]
> [class^="container-"]:last-child {
width: 232px;
position: relative;
bottom: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child {
width: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav
> [class^="scroller-"] {
margin-top: 32px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="privateChannels-"]
> [class^="searchBar-"] {
position: fixed;
top: 0;
width: 240px;
z-index: 101;
background: var(--background-secondary);
padding: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
height: 32px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"] {
height: 32px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"]:after {
content: "";
height: 32px;
width: 240px;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(
0deg,
var(--background-secondary) 5%,
transparent 100%
);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
top: -67px;
position: relative;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="scroller-"]
> ul
> div[style="height: 84px;"] {
height: 0 !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
~ [class^="chat-"]
[class^="chatContent-"]
> form
> [class^="channelTextArea"] {
margin-left: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
~ [class^="chat-"]
[class^="title-"] {
margin-left: 184px;
width: calc(100% - 184px);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
~ [class^="chat-"]
[class^="title-"] {
margin-left: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="channelInfo-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"][class*="selected-"]
[class^="iconVisibility-"]
> [class^="content-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"]:not([class*="typeThread-"])
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
> [class^="iconVisibility-"][class*="clickable-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class^="icons-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class*="username-"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"] {
margin-left: 20px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
height: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"]
> * {
display: none;
}
}

169
modular/collapsing_sidebar/integrated.css
View file

@ -1,169 +0,0 @@
div[class^="sidebar-"]:has(> nav[class^="container-"]) > [class^="panels-"] {
position: absolute;
bottom: 0;
width: 240px;
height: 53px;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
z-index: 10;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> [class^="panels-"]:hover {
height: unset;
flex-direction: column;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]) {
width: unset;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"] {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="scroller-"] {
width: 56px;
margin-top: 48px;
margin-bottom: 53px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
> nav[class^="container-"]
> [class^="scroller-"] {
width: 240px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"] {
position: fixed;
top: 0;
width: 240px;
z-index: 101;
background: var(--background-secondary);
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
height: 48px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"] {
height: 48px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"]:after {
content: "";
height: 48px;
width: 240px;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(
0deg,
var(--background-secondary) 5%,
transparent 100%
);
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
top: -67px;
position: relative;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="scroller-"]
> ul
> div[style="height: 84px;"] {
height: 0 !important;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
~ [class^="chat-"]
[class^="chatContent-"]
> form
> [class^="channelTextArea"] {
width: calc(100% - 184px);
margin-left: 184px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
~ [class^="chat-"]
[class^="chatContent-"]
> form
> [class^="channelTextArea"] {
margin-left: 0;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
~ [class^="chat-"]
[class^="title-"] {
margin-left: 184px;
width: calc(100% - 184px);
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
~ [class^="chat-"]
[class^="title-"] {
margin-left: 0;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="channelInfo-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"][class*="selected-"]
[class^="iconVisibility-"]
> [class^="content-"]
> [class^="children-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"]:not([class*="typeThread-"])
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
> [class^="iconVisibility-"][class*="clickable-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class^="icons-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class*="username-"] {
display: none;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"] {
margin-left: 20px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
~ [class^="chat-"]
[class^="autocomplete-"] {
left: -184px;
}

169
modular/collapsing_sidebar/integrated_-_compact-er_support.css
View file

@ -1,169 +0,0 @@
div[class^="sidebar-"]:has(> nav[class^="container-"]) > [class^="panels-"] {
position: absolute;
bottom: 0;
width: 240px;
height: 40px;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
z-index: 10;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> [class^="panels-"]:hover {
height: unset;
flex-direction: column;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]) {
width: unset;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"] {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="scroller-"] {
width: 56px;
margin-top: 48px;
margin-bottom: 53px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
> nav[class^="container-"]
> [class^="scroller-"] {
width: 240px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"] {
position: fixed;
top: 0;
width: 240px;
z-index: 101;
background: var(--background-secondary);
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
height: 32px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"] {
height: 32px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"]:after {
content: "";
height: 32px;
width: 240px;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(
0deg,
var(--background-secondary) 5%,
transparent 100%
);
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
top: -67px;
position: relative;
}
div[class^="sidebar-"]:has(> nav[class^="container-"])
> nav[class^="container-"]
> [class^="scroller-"]
> ul
> div[style="height: 84px;"] {
height: 0 !important;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
~ [class^="chat-"]
[class^="chatContent-"]
> form
> [class^="channelTextArea"] {
width: calc(100% - 184px);
margin-left: 184px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
~ [class^="chat-"]
[class^="chatContent-"]
> form
> [class^="channelTextArea"] {
margin-left: 0;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
~ [class^="chat-"]
[class^="title-"] {
margin-left: 184px;
width: calc(100% - 184px);
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
~ [class^="chat-"]
[class^="title-"] {
margin-left: 0;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="channelInfo-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"][class*="selected-"]
[class^="iconVisibility-"]
> [class^="content-"]
> [class^="children-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"]:not([class*="typeThread-"])
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
> [class^="iconVisibility-"][class*="clickable-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class^="icons-"],
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class*="username-"] {
display: none;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"] {
margin-left: 20px;
}
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
~ [class^="chat-"]
[class^="autocomplete-"] {
left: -184px;
}

180
modular/collapsing_sidebar/on.css Normal file
View file

@ -0,0 +1,180 @@
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
width: 56px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
width: 240px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> *:not(:last-child),
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child
> [class^="avatarWrapper-"]
> [class^="nameTag-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child
> div:last-child {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> [class^="panels-"]
> [class^="container-"]:last-child {
width: 232px;
position: relative;
bottom: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child {
width: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav
> [class^="scroller-"] {
margin-top: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="privateChannels-"]
> [class^="searchBar-"] {
position: fixed;
top: 0;
width: 240px;
z-index: 101;
background: var(--background-secondary);
padding: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
height: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"] {
height: 48px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"]:after {
content: "";
height: 48px;
width: 240px;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(
0deg,
var(--background-secondary) 5%,
transparent 100%
);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
top: -67px;
position: relative;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="scroller-"]
> ul
> div[style="height: 84px;"] {
height: 0 !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
~ [class^="chat-"]
[class^="chatContent-"]
> form
> [class^="channelTextArea"] {
margin-left: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
~ [class^="chat-"]
[class^="title-"] {
margin-left: 184px;
width: calc(100% - 184px);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
~ [class^="chat-"]
[class^="title-"] {
margin-left: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="channelInfo-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"][class*="selected-"]
[class^="iconVisibility-"]
> [class^="content-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"]:not([class*="typeThread-"])
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
> [class^="iconVisibility-"][class*="clickable-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class^="icons-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
> [class^="content-"]
> [class*="username-"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
> [class^="content-"]
> [class^="mainContent-"]
> [class^="name-"] {
margin-left: 20px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
height: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"]
> * {
display: none;
}

7
modular/collapsing_sidebar/simple.css
View file

@ -1,7 +0,0 @@
[class^="sidebar-"] {
overflow: hidden;
width: 48px;
}
[class^="sidebar-"]:hover {
width: 240px;
}

87
modular/compacter_mode.css
View file

@ -71,6 +71,16 @@ section[class^="panels-"]
min-height: 24px;
}
section[class^="panels-"] > [class^="container-"]:last-child {
position: relative;
}
section[class^="panels-"] > [class^="container-"]:last-child > div:last-child {
position: absolute;
right: 0;
padding-right: 8px;
}
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
@ -434,11 +444,18 @@ button.hh2-spotify-controls-button {
padding-top: 9px !important;
padding-bottom: 9px !important;
}
[class^="channelTextArea-"],
[class^="channelTextArea-"] [class^="inner-"],
[class^="channelTextArea-"] [class^="buttons-"],
[class^="channelTextArea-"] [class^="attachWrapper-"],
[class^="channelTextArea-"] [class^="attachButton-"] {
height: 40px !important;
[class^="channelTextArea-"] [class^="attachButton-"],
[class^="channelTextArea-"] > [class^="scrollableContainer-"],
[class^="channelTextArea-"] [class^="inner-"] > [class^="textArea-"] {
min-height: 40px !important;
}
[class^="channelTextArea-"] [class^="buttons-"],
[class^="channelTextArea-"] [class^="attachWrapper-"] {
height: 40px;
}
[class^="channelTextArea-"] [class^="attachButton-"],
[class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] {
@ -504,3 +521,69 @@ button.hh2-spotify-controls-button {
> [class^="labelContainer-"] {
min-height: 24px;
}
[class^="sidebar-"]
> [class^="privateChannels-"]
ul[class^="content-"]
> [class^="channel-"]
[class*="layout-"] {
height: 36px;
padding: 0 4px;
}
[class^="sidebar-"]
> [class^="privateChannels-"]
ul[class^="content-"]
> [class^="channel-"]
[class*="layout-"]
> [class^="avatar-"],
[class^="sidebar-"]
> [class^="privateChannels-"]
ul[class^="content-"]
> [class^="channel-"]
[class*="layout-"]
> [class^="avatar-"]
> [class^="wrapper-"] {
height: 24px !important;
width: 24px !important;
}
[class^="sidebar-"]
> [class^="privateChannels-"]
ul[class^="content-"]
> [class^="channel-"]
[class*="layout-"]
> [class^="avatar-"]
> [class^="wrapper-"]
> svg[viewbox="0 0 40 40"] {
height: 32px !important;
width: 32px !important;
}
[class^="sidebar-"]
> [class^="privateChannels-"]
ul[class^="content-"]
> [class^="channel-"]
[class*="layout-"]
> [class^="avatar-"]
> [class^="wrapper-"]
> svg[viewbox="0 0 32 32"] {
height: 24px !important;
width: 24px !important;
}
[class^="sidebar-"]
> [class^="privateChannels-"]
ul[class^="content-"]
> [class^="channel-"]
[class*="layout-"]
> [class^="avatar-"] {
margin-right: 8px;
}
[class^="sidebar-"]
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
padding: 9px 4px 2px 9px;
height: 24px;
}
[class^="sidebar-"] > [class^="privateChannels-"] > [class^="searchBar-"] {
height: 32px;
}

9
modular/textarea/fullwidth.css
View file

@ -1,5 +1,6 @@
[class^="chatContent-"] > form {
padding: 0 !important;
bottom: 0;
}
[class^="chatContent-"] > form [class^="channelTextArea"] {
margin-bottom: 0 !important;
@ -24,6 +25,12 @@
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="buttons-"],
[class^="chatContent-"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="attachWrapper-"],
[class^="chatContent-"]
> form
[class^="channelTextArea"]
@ -31,7 +38,7 @@
> [class^="inner-"]
> [class^="attachWrapper-"]
> [class^="attachButton-"] {
height: 53px;
min-height: 53px;
}
[class^="chatContent-"]
> form