mirror of https://gitlab.com/Cynosphere/xmc.git
rework collapsing sidebar, add dynamic mode for sidebar and member list
This commit is contained in:
parent
9acd2f8851
commit
9761e0d166
777
xmc.user.css
777
xmc.user.css
|
@ -1885,6 +1885,7 @@ html.platform-win:not(.app-focused) [class*="winButton-"] {
|
|||
}`,
|
||||
'Fullwidth': `[class^="chatContent-"] > form {
|
||||
padding: 0 !important;
|
||||
bottom: 0;
|
||||
}
|
||||
[class^="chatContent-"] > form [class^="channelTextArea"] {
|
||||
margin-bottom: 0 !important;
|
||||
|
@ -1896,8 +1897,9 @@ html.platform-win:not(.app-focused) [class*="winButton-"] {
|
|||
|
||||
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="textArea-"],
|
||||
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="buttons-"],
|
||||
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="attachWrapper-"],
|
||||
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="attachWrapper-"] > [class^="attachButton-"] {
|
||||
height: 53px;
|
||||
min-height: 53px;
|
||||
}
|
||||
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="textArea-"] > div > [class*="fontSize16Padding-"] {
|
||||
padding-top: 15px !important;
|
||||
|
@ -2903,6 +2905,82 @@ section[class^="panels-"] > [class^="container-"]:last-child > div:last-child {
|
|||
> [class^="membersGroup-"] {
|
||||
height: 40px;
|
||||
padding-top: 24px;
|
||||
}`,
|
||||
'Dynamic': `@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;
|
||||
}
|
||||
}`,
|
||||
}
|
||||
|
||||
|
@ -3009,6 +3087,16 @@ section[class^="panels-"]
|
|||
min-height: 24px;
|
||||
}
|
||||
|
||||
section[class^="panels-"] > [class^="container-"]:last-child {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
section[class^="panels-"] > [class^="container-"]:last-child > div:last-child {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
section[class^="panels-"]
|
||||
> [class^="wrapper-"]
|
||||
> [class^="container-"]
|
||||
|
@ -3370,11 +3458,18 @@ button.hh2-spotify-controls-button {
|
|||
padding-top: 9px !important;
|
||||
padding-bottom: 9px !important;
|
||||
}
|
||||
[class^="channelTextArea-"],
|
||||
[class^="channelTextArea-"] [class^="inner-"],
|
||||
[class^="channelTextArea-"] [class^="buttons-"],
|
||||
[class^="channelTextArea-"] [class^="attachWrapper-"],
|
||||
[class^="channelTextArea-"] [class^="attachButton-"] {
|
||||
height: 40px !important;
|
||||
[class^="channelTextArea-"] [class^="attachButton-"],
|
||||
[class^="channelTextArea-"] > [class^="scrollableContainer-"],
|
||||
[class^="channelTextArea-"] [class^="inner-"] > [class^="textArea-"] {
|
||||
min-height: 40px !important;
|
||||
}
|
||||
[class^="channelTextArea-"] [class^="buttons-"],
|
||||
[class^="channelTextArea-"] [class^="attachWrapper-"] {
|
||||
height: 40px;
|
||||
}
|
||||
[class^="channelTextArea-"] [class^="attachButton-"] ,
|
||||
[class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] {
|
||||
|
@ -3441,81 +3536,115 @@ button.hh2-spotify-controls-button {
|
|||
[class^="item-"]
|
||||
> [class^="labelContainer-"] {
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] {
|
||||
height: 36px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] > [class^="avatar-"],
|
||||
[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] > [class^="avatar-"] > [class^="wrapper-"] {
|
||||
height: 24px !important;
|
||||
width: 24px !important;
|
||||
}
|
||||
[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] > [class^="avatar-"] > [class^="wrapper-"] > svg[viewbox="0 0 40 40"] {
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
}
|
||||
[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] > [class^="avatar-"] > [class^="wrapper-"] > svg[viewbox="0 0 32 32"] {
|
||||
height: 24px !important;
|
||||
width: 24px !important;
|
||||
}
|
||||
[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] > [class^="avatar-"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class*="privateChannelsHeaderContainer-"] {
|
||||
padding: 9px 4px 2px 9px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
[class^="sidebar-"] > [class^="privateChannels-"] > [class^="searchBar-"] {
|
||||
height: 32px;
|
||||
}`,
|
||||
}
|
||||
|
||||
@var select xmc_collapsing_sidebar 'Collapsing Sidebar' {
|
||||
'Off*': "",
|
||||
'Simple': `[class^="sidebar-"] {
|
||||
overflow: hidden;
|
||||
'On': `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;
|
||||
}
|
||||
[class^="sidebar-"]:hover {
|
||||
width: 240px;
|
||||
}`,
|
||||
'Integrated': `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-"]
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav
|
||||
> [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-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="container-"][class*="clickable-"] {
|
||||
> [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-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="container-"][class*="clickable-"]
|
||||
> [class^="animatedContainer-"] {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="container-"][class*="clickable-"]
|
||||
> [class^="animatedContainer-"]
|
||||
> [class^="bannerImage-"] {
|
||||
height: 48px;
|
||||
}
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="container-"][class*="clickable-"]
|
||||
> [class^="animatedContainer-"]
|
||||
|
@ -3533,7 +3662,7 @@ div[class^="sidebar-"]:has(> nav[class^="container-"])
|
|||
);
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="container-"][class*="clickable-"]
|
||||
> [class^="animatedContainer-"]
|
||||
|
@ -3542,7 +3671,7 @@ div[class^="sidebar-"]:has(> nav[class^="container-"])
|
|||
position: relative;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="scroller-"]
|
||||
> ul
|
||||
|
@ -3550,16 +3679,7 @@ div[class^="sidebar-"]:has(> nav[class^="container-"])
|
|||
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
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
|
||||
~ [class^="chat-"]
|
||||
[class^="chatContent-"]
|
||||
> form
|
||||
|
@ -3567,42 +3687,48 @@ div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
|
||||
~ [class^="chat-"]
|
||||
[class^="title-"] {
|
||||
margin-left: 184px;
|
||||
width: calc(100% - 184px);
|
||||
}
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
|
||||
~ [class^="chat-"]
|
||||
[class^="title-"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
|
||||
[class^="channelInfo-"],
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
|
||||
[class^="containerDefault-"][class*="selected-"]
|
||||
[class^="iconVisibility-"]
|
||||
> [class^="content-"]
|
||||
> [class^="children-"],
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
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-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):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-"] {
|
||||
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-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
|
||||
[class^="containerDefault-"]
|
||||
[class^="iconVisibility-"][class*="typeThread-"]
|
||||
> [class^="content-"]
|
||||
|
@ -3611,73 +3737,93 @@ div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
|||
margin-left: 20px;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
~ [class^="chat-"] [class^="autocomplete-"] {
|
||||
left: -184px;
|
||||
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;
|
||||
}`,
|
||||
'Integrated - Compact-er support': `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-"] {
|
||||
'Compact-er Support': `div[class^="sidebar-"]:not(:has(> [class^="side-"])) > nav {
|
||||
width: unset;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
> nav[class^="container-"]
|
||||
> [class^="scroller-"] {
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])) {
|
||||
width: 56px;
|
||||
margin-top: 48px;
|
||||
margin-bottom: 53px;
|
||||
}
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
|
||||
> nav[class^="container-"]
|
||||
> [class^="scroller-"] {
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
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-"] {
|
||||
> [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-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="container-"][class*="clickable-"]
|
||||
> [class^="animatedContainer-"] {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="container-"][class*="clickable-"]
|
||||
> [class^="animatedContainer-"]
|
||||
> [class^="bannerImage-"] {
|
||||
height: 32px;
|
||||
}
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="container-"][class*="clickable-"]
|
||||
> [class^="animatedContainer-"]
|
||||
|
@ -3695,7 +3841,7 @@ div[class^="sidebar-"]:has(> nav[class^="container-"])
|
|||
);
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="container-"][class*="clickable-"]
|
||||
> [class^="animatedContainer-"]
|
||||
|
@ -3704,7 +3850,7 @@ div[class^="sidebar-"]:has(> nav[class^="container-"])
|
|||
position: relative;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"])
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
|
||||
> nav[class^="container-"]
|
||||
> [class^="scroller-"]
|
||||
> ul
|
||||
|
@ -3712,16 +3858,7 @@ div[class^="sidebar-"]:has(> nav[class^="container-"])
|
|||
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
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
|
||||
~ [class^="chat-"]
|
||||
[class^="chatContent-"]
|
||||
> form
|
||||
|
@ -3729,42 +3866,48 @@ div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
|
||||
~ [class^="chat-"]
|
||||
[class^="title-"] {
|
||||
margin-left: 184px;
|
||||
width: calc(100% - 184px);
|
||||
}
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):hover
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):hover
|
||||
~ [class^="chat-"]
|
||||
[class^="title-"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
|
||||
[class^="channelInfo-"],
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
|
||||
[class^="containerDefault-"][class*="selected-"]
|
||||
[class^="iconVisibility-"]
|
||||
> [class^="content-"]
|
||||
> [class^="children-"],
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
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-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):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-"] {
|
||||
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-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover)
|
||||
[class^="containerDefault-"]
|
||||
[class^="iconVisibility-"][class*="typeThread-"]
|
||||
> [class^="content-"]
|
||||
|
@ -3773,9 +3916,379 @@ div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
|||
margin-left: 20px;
|
||||
}
|
||||
|
||||
div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover)
|
||||
~ [class^="chat-"] [class^="autocomplete-"] {
|
||||
left: -184px;
|
||||
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;
|
||||
}`,
|
||||
'Dynamic': `@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;
|
||||
}
|
||||
}`,
|
||||
'Dynamic + Compact-er Support': `@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;
|
||||
}
|
||||
}`,
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue