xmc/modular/collapsing_sidebar/compact-er_support.css
2023-03-17 21:31:42 +00:00

185 lines
4.8 KiB
CSS

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: 224px;
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;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
.channel-typing-indicator {
display: none;
}