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:
Cynthia Foxwell 2023-10-26 14:10:59 -06:00
parent fb2ac7da82
commit 0a16e600eb
62 changed files with 3136 additions and 3130 deletions
Download patch file Download diff file Expand all files Collapse all files

254
modular/collapsing_sidebar/compact-er_support.css
View file

@ -1,54 +1,54 @@
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) {
width: 56px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):hover {
width: 240px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
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[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 {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> [class^="panels_"]
> [class^="container_"]:last-child {
width: 224px;
position: relative;
bottom: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child {
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^="container-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"] {
padding-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-"] {
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;
@ -57,25 +57,25 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
padding: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
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-"] {
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 {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"]
> [class^="bannerImage_"]:after {
content: "";
height: 32px;
width: 240px;
@ -89,145 +89,145 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
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-"]
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-"]
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-"] {
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-"] {
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^="linkTop-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="modeSelected-"]
[class^="linkTop-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="iconVisibility-"]:not([class*="typeThread-"])
[class^="linkTop-"]
> [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^="linkTop-"]
> [class^="icons-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
[class^="linkTop-"]
> [class*="username-"] {
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^="linkTop_"]
> [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="iconVisibility_"][class*="modeSelected_"]
[class^="linkTop_"]
> [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="iconVisibility_"]:not([class*="typeThread_"])
[class^="linkTop_"]
> [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^="linkTop_"]
> [class^="icons_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="voiceUser_"]
[class^="linkTop_"]
> [class*="username_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
[class^="linkTop-"]
> [class^="name-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="iconVisibility_"][class*="typeThread_"]
[class^="linkTop_"]
> [class^="name_"] {
margin-left: 20px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
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-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> [class^="privateChannels_"]
ul[class^="content_"]
> [class*="privateChannelsHeaderContainer_"]
> * {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
.channel-typing-indicator,
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="devBanner-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="devBanner_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="scroller-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="scroller_"]
> ul
> [class*="containerWithMargin-"] {
> [class*="containerWithMargin_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"] {
width: 32px !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"]
> svg {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class*="unreadBar-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class*="unreadBar_"]
> span,
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"]
> [class*="barText-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"]
> [class*="barText_"] {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
margin-left: 8px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="voiceChannelsButton-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="voiceChannelsButton_"] {
display: none;
}

252
modular/collapsing_sidebar/dynamic.css
View file

@ -1,54 +1,54 @@
@media (width < 1300px) {
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) {
width: 56px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):hover {
width: 240px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
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[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 {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> [class^="panels_"]
> [class^="container_"]:last-child {
width: 224px;
position: relative;
bottom: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> [class^="panels_"]
> [class^="container_"]:last-child {
width: 40px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav {
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-"] {
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;
@ -57,25 +57,25 @@
padding: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
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-"] {
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 {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"]
> [class^="bannerImage_"]:after {
content: "";
height: 48px;
width: 240px;
@ -89,146 +89,146 @@
);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
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-"]
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-"]
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-"] {
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-"] {
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^="linkTop-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="modeSelected-"]
[class^="linkTop-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="iconVisibility-"]:not([class*="typeThread-"])
[class^="linkTop-"]
> [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^="linkTop-"]
> [class^="icons-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
[class^="linkTop-"]
> [class*="username-"] {
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^="linkTop_"]
> [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="iconVisibility_"][class*="modeSelected_"]
[class^="linkTop_"]
> [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="iconVisibility_"]:not([class*="typeThread_"])
[class^="linkTop_"]
> [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^="linkTop_"]
> [class^="icons_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="voiceUser_"]
[class^="linkTop_"]
> [class*="username_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
[class^="linkTop-"]
> [class^="name-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="iconVisibility_"][class*="typeThread_"]
[class^="linkTop_"]
> [class^="name_"] {
margin-left: 20px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
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-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> [class^="privateChannels_"]
ul[class^="content_"]
> [class*="privateChannelsHeaderContainer_"]
> * {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
.channel-typing-indicator,
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="devBanner-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="devBanner_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="scroller-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="scroller_"]
> ul
> [class*="containerWithMargin-"] {
> [class*="containerWithMargin_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"] {
width: 32px !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"]
> svg {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class*="unreadBar-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class*="unreadBar_"]
> span,
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"]
> [class*="barText-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"]
> [class*="barText_"] {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
margin-left: 8px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="voiceChannelsButton-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="voiceChannelsButton_"] {
display: none;
}
}

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

@ -1,54 +1,54 @@
@media (width < 1300px) {
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) {
width: 56px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):hover {
width: 240px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
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[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 {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> [class^="panels_"]
> [class^="container_"]:last-child {
width: 224px;
position: relative;
bottom: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> [class^="panels_"]
> [class^="container_"]:last-child {
width: 40px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav {
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-"] {
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;
@ -57,25 +57,25 @@
padding: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"] {
height: 32px !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"]
> [class^="bannerImage_"] {
height: 32px !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"]:after {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"]
> [class^="bannerImage_"]:after {
content: "";
height: 32px !important;
width: 240px;
@ -89,146 +89,146 @@
);
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
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-"]
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-"]
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-"] {
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-"] {
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^="linkTop-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="modeSelected-"]
[class^="linkTop-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="iconVisibility-"]:not([class*="typeThread-"])
[class^="linkTop-"]
> [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^="linkTop-"]
> [class^="icons-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
[class^="linkTop-"]
> [class*="username-"] {
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^="linkTop_"]
> [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="iconVisibility_"][class*="modeSelected_"]
[class^="linkTop_"]
> [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="iconVisibility_"]:not([class*="typeThread_"])
[class^="linkTop_"]
> [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^="linkTop_"]
> [class^="icons_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="voiceUser_"]
[class^="linkTop_"]
> [class*="username_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
[class^="linkTop-"]
> [class^="name-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="iconVisibility_"][class*="typeThread_"]
[class^="linkTop_"]
> [class^="name_"] {
margin-left: 20px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
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-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> [class^="privateChannels_"]
ul[class^="content_"]
> [class*="privateChannelsHeaderContainer_"]
> * {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
.channel-typing-indicator,
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="devBanner-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="devBanner_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="scroller-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="scroller_"]
> ul
> [class*="containerWithMargin-"] {
> [class*="containerWithMargin_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"] {
width: 32px !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"]
> svg {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class*="unreadBar-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class*="unreadBar_"]
> span,
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"]
> [class*="barText-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"]
> [class*="barText_"] {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
margin-left: 8px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="voiceChannelsButton-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="voiceChannelsButton_"] {
display: none;
}
}

256
modular/collapsing_sidebar/on.css
View file

@ -1,55 +1,55 @@
div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav {
width: unset;
z-index: 9;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
div[class^="sidebar_"]:not(:has(> [class^="side_"])) {
width: 56px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):hover {
width: 240px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
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[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 {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> [class^="panels_"]
> [class^="container_"]:last-child {
width: 224px;
position: relative;
bottom: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="panels-"]
> [class^="container-"]:last-child {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> [class^="panels_"]
> [class^="container_"]:last-child {
width: 40px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav
> [class^="scroller-"] {
> [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-"] {
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;
@ -58,25 +58,25 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
padding: 0;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
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-"] {
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 {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"]
> [class^="bannerImage_"]:after {
content: "";
height: 48px;
width: 240px;
@ -90,150 +90,150 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
);
}
[class^="animatedBannerHoverLayer-"] {
[class^="animatedBannerHoverLayer_"] {
top: -48px !important;
height: 48px !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
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-"]
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-"]
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-"] {
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-"] {
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^="linkTop-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="modeSelected-"]
[class^="linkTop-"]
> [class^="children-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="iconVisibility-"]:not([class*="typeThread-"])
[class^="linkTop-"]
> [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^="linkTop-"]
> [class^="icons-"],
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="voiceUser-"]
[class^="linkTop-"]
> [class*="username-"] {
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^="linkTop_"]
> [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="iconVisibility_"][class*="modeSelected_"]
[class^="linkTop_"]
> [class^="children_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="iconVisibility_"]:not([class*="typeThread_"])
[class^="linkTop_"]
> [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^="linkTop_"]
> [class^="icons_"],
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="voiceUser_"]
[class^="linkTop_"]
> [class*="username_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="containerDefault-"]
[class^="iconVisibility-"][class*="typeThread-"]
[class^="linkTop-"]
> [class^="name-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="containerDefault_"]
[class^="iconVisibility_"][class*="typeThread_"]
[class^="linkTop_"]
> [class^="name_"] {
margin-left: 20px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
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-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> [class^="privateChannels_"]
ul[class^="content_"]
> [class*="privateChannelsHeaderContainer_"]
> * {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
.channel-typing-indicator,
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="devBanner-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="devBanner_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="scroller-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="scroller_"]
> ul
> [class*="containerWithMargin-"] {
> [class*="containerWithMargin_"] {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"] {
width: 32px !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"]
> svg {
display: none;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class*="unreadBar-"]
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class*="unreadBar_"]
> span,
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
> nav[class^="container-"]
> [class^="container-"][class*="bottom-"]
> [class^="containerPadding-"]
> [class^="bar-"]
> [class*="barText-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
> nav[class^="container_"]
> [class^="container_"][class*="bottom_"]
> [class^="containerPadding_"]
> [class^="bar_"]
> [class*="barText_"] {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
margin-left: 8px;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
[class^="voiceChannelsButton-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover)
[class^="voiceChannelsButton_"] {
display: none;
}