mirror of
https://gitlab.com/Cynosphere/xmc.git
synced 2024-08-14 22:57:03 +00:00
Make Modular
This commit is contained in:
parent
9761e0d166
commit
aab8e97348
11 changed files with 903 additions and 348 deletions
86
modular/collapsing_members/dynamic.css
Normal file
86
modular/collapsing_members/dynamic.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
180
modular/collapsing_sidebar/compact-er_support.css
Normal file
180
modular/collapsing_sidebar/compact-er_support.css
Normal 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
182
modular/collapsing_sidebar/dynamic.css
Normal 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
182
modular/collapsing_sidebar/dynamic_+_compact-er_support.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -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
180
modular/collapsing_sidebar/on.css
Normal 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;
|
||||||
|
}
|
|
@ -1,7 +0,0 @@
|
||||||
[class^="sidebar-"] {
|
|
||||||
overflow: hidden;
|
|
||||||
width: 48px;
|
|
||||||
}
|
|
||||||
[class^="sidebar-"]:hover {
|
|
||||||
width: 240px;
|
|
||||||
}
|
|
|
@ -71,6 +71,16 @@ section[class^="panels-"]
|
||||||
min-height: 24px;
|
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-"]
|
section[class^="panels-"]
|
||||||
> [class^="wrapper-"]
|
> [class^="wrapper-"]
|
||||||
> [class^="container-"]
|
> [class^="container-"]
|
||||||
|
@ -434,11 +444,18 @@ button.hh2-spotify-controls-button {
|
||||||
padding-top: 9px !important;
|
padding-top: 9px !important;
|
||||||
padding-bottom: 9px !important;
|
padding-bottom: 9px !important;
|
||||||
}
|
}
|
||||||
|
[class^="channelTextArea-"],
|
||||||
[class^="channelTextArea-"] [class^="inner-"],
|
[class^="channelTextArea-"] [class^="inner-"],
|
||||||
[class^="channelTextArea-"] [class^="buttons-"],
|
[class^="channelTextArea-"] [class^="buttons-"],
|
||||||
[class^="channelTextArea-"] [class^="attachWrapper-"],
|
[class^="channelTextArea-"] [class^="attachWrapper-"],
|
||||||
[class^="channelTextArea-"] [class^="attachButton-"] {
|
[class^="channelTextArea-"] [class^="attachButton-"],
|
||||||
height: 40px !important;
|
[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^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] {
|
[class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] {
|
||||||
|
@ -504,3 +521,69 @@ button.hh2-spotify-controls-button {
|
||||||
> [class^="labelContainer-"] {
|
> [class^="labelContainer-"] {
|
||||||
min-height: 24px;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
[class^="chatContent-"] > form {
|
[class^="chatContent-"] > form {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
[class^="chatContent-"] > form [class^="channelTextArea"] {
|
[class^="chatContent-"] > form [class^="channelTextArea"] {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
|
@ -24,6 +25,12 @@
|
||||||
> [class^="scrollableContainer-"]
|
> [class^="scrollableContainer-"]
|
||||||
> [class^="inner-"]
|
> [class^="inner-"]
|
||||||
> [class^="buttons-"],
|
> [class^="buttons-"],
|
||||||
|
[class^="chatContent-"]
|
||||||
|
> form
|
||||||
|
[class^="channelTextArea"]
|
||||||
|
> [class^="scrollableContainer-"]
|
||||||
|
> [class^="inner-"]
|
||||||
|
> [class^="attachWrapper-"],
|
||||||
[class^="chatContent-"]
|
[class^="chatContent-"]
|
||||||
> form
|
> form
|
||||||
[class^="channelTextArea"]
|
[class^="channelTextArea"]
|
||||||
|
@ -31,7 +38,7 @@
|
||||||
> [class^="inner-"]
|
> [class^="inner-"]
|
||||||
> [class^="attachWrapper-"]
|
> [class^="attachWrapper-"]
|
||||||
> [class^="attachButton-"] {
|
> [class^="attachButton-"] {
|
||||||
height: 53px;
|
min-height: 53px;
|
||||||
}
|
}
|
||||||
[class^="chatContent-"]
|
[class^="chatContent-"]
|
||||||
> form
|
> form
|
||||||
|
|
Loading…
Reference in a new issue