diff --git a/modular/9x_bot_tag.css b/modular/9x_bot_tag.css index 86d531c..98e16fe 100644 --- a/modular/9x_bot_tag.css +++ b/modular/9x_bot_tag.css @@ -1,37 +1,37 @@ -[class*="botTag_"] { +[class*="botTag-"] { font-size: 0%; padding: 0 !important; background: none !important; } -[class*="botTag_"]:not([class*="botTagCompact_"]) { +[class*="botTag-"]:not([class*="botTagCompact-"]) { margin-left: 6px; } -[class*="botTag_"] [class*="botText_"] { +[class*="botTag-"] [class*="botText-"] { font-size: 0; display: none; } -:not([class^="repliedMessage_"]) [class*="botTagCompact_"] { +:not([class^="repliedMessage-"]) [class*="botTagCompact-"] { margin-right: -6px !important; } -[class^="repliedMessage_"] [class*="botTagCompact_"] { +[class^="repliedMessage-"] [class*="botTagCompact-"] { margin-right: 4px !important; margin-left: 4px !important; } -[class*="botTag_"] svg[class^="botTagVerified_"] { +[class*="botTag-"] svg[class^="botTagVerified-"] { width: 16px; height: 16px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABlSURBVDhPzY5RCsAwCEM9+m6+TYsj2ujaj8EePGitCZXfchKXGMsHcaGIB7NNCQ/cOnYvCqYQ6jwzUhICqBPmnxY4+Rx8+0EG30xSoIQlB2dmEVbmZWZToIyFOtiGEQxsBTcRuQCANOfCY5uAHgAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); } -[class*="botTag_"] svg[class^="botTagVerified_"] > path { +[class*="botTag-"] svg[class^="botTagVerified-"] > path { display: none; } -[class*="botTag_"]:after { +[class*="botTag-"]:after { visibility: visible; content: ""; width: 16px; @@ -44,14 +44,14 @@ background-size: 16px 16px; } -[class*="message_"] [class*="botTag_"]:after { +[class*="message-"] [class*="botTag-"]:after { top: 4px !important; } -[class*="message_"][class*="compact_"] [class*="botTag_"]:after { +[class*="message-"][class*="compact-"] [class*="botTag-"]:after { top: 3px !important; } -[class^="repliedMessage_"] [class*="botTagCompact_"]:after { +[class^="repliedMessage-"] [class*="botTagCompact-"]:after { top: 1px !important; } diff --git a/modular/accessible_styles/italics_+_bold.css b/modular/accessible_styles/italics_+_bold.css index f34157d..ecf1261 100644 --- a/modular/accessible_styles/italics_+_bold.css +++ b/modular/accessible_styles/italics_+_bold.css @@ -1,4 +1,4 @@ -span[data-slate-leaf="true"][class*="italics_"], +span[data-slate-leaf="true"][class*="italics-"], em { font-style: normal; display: inline-block; @@ -6,10 +6,8 @@ em { color: #f80; } -span[data-slate-leaf="true"][class*="bold_"], +span[data-slate-leaf="true"][class*="bold-"], strong { font-weight: 400; - text-shadow: - 0.1px 0.1px, - -0.1px -0.1px; + text-shadow: 0.1px 0.1px, -0.1px -0.1px; } diff --git a/modular/accessible_styles/just_colored_italics.css b/modular/accessible_styles/just_colored_italics.css index ba7358d..418a5b7 100644 --- a/modular/accessible_styles/just_colored_italics.css +++ b/modular/accessible_styles/just_colored_italics.css @@ -1,4 +1,4 @@ -span[data-slate-leaf="true"][class*="italics_"], +span[data-slate-leaf="true"][class*="italics-"], em { color: #f80; } diff --git a/modular/accessible_styles/just_italics.css b/modular/accessible_styles/just_italics.css index 007fbfb..922479f 100644 --- a/modular/accessible_styles/just_italics.css +++ b/modular/accessible_styles/just_italics.css @@ -1,4 +1,4 @@ -span[data-slate-leaf="true"][class*="italics_"], +span[data-slate-leaf="true"][class*="italics-"], em { font-style: normal; display: inline-block; diff --git a/modular/base.css b/modular/base.css index b0c05a0..20a6277 100644 --- a/modular/base.css +++ b/modular/base.css @@ -16,59 +16,59 @@ /* most of them are probably now-redundant color fixes */ /* others are things i dont feel like need a toggle at the current moment */ -[class^="container_"] > [class^="slider_"] > svg { +[class^="container-"] > [class^="slider-"] > svg { display: none; } -[class*="unreadBar_"] { +[class*="unreadBar-"] { margin: 4px; border-radius: 4px !important; } -[class^="modalTextContainer_"] { +[class^="modalTextContainer-"] { overflow: scroll !important; } -[class^="content_"] > [class^="sidebar_"] { +[class^="content-"] > [class^="sidebar-"] { border-radius: 0; } -.platform-osx [class*="guilds_"] > ul > [class^="scroller_"] { +.platform-osx [class*="guilds-"] > ul > [class^="scroller-"] { padding-top: 4px; } -[class^="slider_"] { +[class^="slider-"] { padding-top: 0 !important; } .platform-win - nav[class*="guilds_"] - > ul[class^="tree_"] - > [class^="scroller_"] { + nav[class*="guilds-"] + > ul[class^="tree-"] + > [class^="scroller-"] { padding-top: 12px !important; } -[class*="timestampVisibleOnHover_"] { +[class*="timestampVisibleOnHover-"] { opacity: 1 !important; } -[class^="message_"][class*="compact_"] { +[class^="message-"][class*="compact-"] { padding-top: 0 !important; padding-bottom: 0 !important; } -[class*="progressBarHeader_"] > [class^="container_"], -[class^="control_"] > [class^="container_"] { +[class*="progressBarHeader-"] > [class^="container-"], +[class^="control-"] > [class^="container-"] { transition: background-color 0.75s linear; } -[class*="barBase_"] { +[class*="barBase-"] { padding-bottom: 0 !important; border-radius: 8px; margin: 0 4px; } -[class^="markdown_"] code { +[class^="markdown-"] code { border-radius: 5%; } .hljs { @@ -78,230 +78,229 @@ } [id^="message-username-"] - [class^="badge_"]:has(> [class^="badgeVerifiedIcon_"]) { + [class^="badge-"]:has(> [class^="badgeVerifiedIcon-"]) { display: none; } /* remove "dead space"/padding from vc users */ -[class*="containerDefault_"] [class*="listDefault_"] { +[class*="containerDefault-"] [class*="listDefault-"] { padding-left: 8px !important; } -[class*="containerDefault_"] - [class*="listDefault_"] - [class^="avatarContainer_"] { +[class*="containerDefault-"] + [class*="listDefault-"] + [class^="avatarContainer-"] { margin-left: 6px !important; } -[class*="containerDefault_"] [class*="listDefault_"] > [class^="clickable_"] { +[class*="containerDefault-"] [class*="listDefault-"] > [class^="clickable-"] { padding-left: 0 !important; } -[class*="containerDefault_"] - [class*="listDefault_"] - > [class^="clickable_"] - > [class^="content_"] { +[class*="containerDefault-"] + [class*="listDefault-"] + > [class^="clickable-"] + > [class^="content-"] { margin-left: 0 !important; } -[class*="containerDefault_"] [class*="listDefault_"] > [class^="separator_"] { +[class*="containerDefault-"] [class*="listDefault-"] > [class^="separator-"] { width: 100% !important; margin: 3px !important; } /* Change Nickname Modal */ -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"]:not([class*="carouselModal_"]) { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"]:not([class*="carouselModal-"]) { background-color: var(--background-primary); } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] > form - > [class^="flex_"]:nth-child(3), -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="flex_"]:nth-child(3) { + > [class^="flex-"]:nth-child(3), +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="flex-"]:nth-child(3) { background: var(--background-secondary); } /* Delete Modal */ -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="content_"] - > [class^="message_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="content-"] + > [class^="message-"] { background-color: var(--background-primary); } /* dropdown menus */ -[class^="css_"][class$="-menu"] { +[class^="css-"][class$="-menu"] { z-index: 9999; background-color: var(--background-secondary); border-color: var(--background-primary); } /* listen along */ -[id^="popout_"] [class^="userList_"] { +[id^="popout_"] [class^="userList-"] { border-color: var(--background-primary) !important; } -[id^="popout_"] [class^="userList_"] [class^="header_"] { +[id^="popout_"] [class^="userList-"] [class^="header-"] { background-color: var(--background-secondary) !important; color: var(--header-primary) !important; } -[id^="popout_"] [class^="userList_"] [class^="content_"] { +[id^="popout_"] [class^="userList-"] [class^="content-"] { background-color: var(--background-primary) !important; } -[class*="moreUsers_"] { +[class*="moreUsers-"] { background-color: var(--background-tertiary) !important; } /* autocomplete */ -[class^="autocomplete_"] { +[class^="autocomplete-"] { border: none !important; background-color: var(--background-floating) !important; box-shadow: 0 2px 5px 0 var(--background-secondary) !important; } -[class^="autocomplete_"] [class*="selectorSelected_"], -[class^="autocomplete_"] [class*="autocompleteRow_"] [class*="selected_"] { +[class^="autocomplete-"] [class*="selectorSelected-"], +[class^="autocomplete-"] [class*="autocompleteRow-"] [class*="selected-"] { background-color: var(--background-secondary) !important; } -[class^="autocomplete_"] [class*="categoryHeader_"] { +[class^="autocomplete-"] [class*="categoryHeader-"] { background-color: var(--background-floating) !important; } /* misc color fixes */ -[class^="peopleColumn_"] { +[class^="peopleColumn-"] { background: var(--background-primary); } -[class^="itemCard_"] [class*="inset_"] { +[class^="itemCard-"] [class*="inset-"] { background-color: var(--background-primary) !important; } -[class*="outer_"][class*="interactive_"]:hover { +[class*="outer-"][class*="interactive-"]:hover { background-color: var(--background-modifier-hover) !important; } -[class^="base_"] > [class^="content_"] > [class^="container_"] { +[class^="base-"] > [class^="content-"] > [class^="container-"] { background: var(--background-primary); } -[class*="modal_"][class*="root_"] { +[class*="modal-"][class*="root-"] { background-color: var(--background-primary); - box-shadow: - var(--deprecated-card-bg) 0px 0px 0px 1px, + box-shadow: var(--deprecated-card-bg) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 2px 10px 0px; } -[class^="perksModal_"] { +[class^="perksModal-"] { background-color: var(--background-primary) !important; } -[class^="directoryModal_"] { +[class^="directoryModal-"] { background-color: var(--background-primary) !important; } -[class^="layerContainer_"] > [class^="layer_"] > [class^="container_"] { +[class^="layerContainer-"] > [class^="layer-"] > [class^="container-"] { background: var(--background-floating); } -[class^="layerContainer_"] - > [class^="layer_"] - > [class^="container_"] - [class^="option_"]:after { +[class^="layerContainer-"] + > [class^="layer-"] + > [class^="container-"] + [class^="option-"]:after { background: transparent; } -[class^="layerContainer_"] - > [class^="layer_"] - > [class^="container_"] - [class^="option_"][class*="selected_"] { +[class^="layerContainer-"] + > [class^="layer-"] + > [class^="container-"] + [class^="option-"][class*="selected-"] { background: var(--background-modifier-hover); } -[class^="chat_"][class*="background_"], -[class^="title_"][class*="background_"], -[class^="chat_"] > [class^="content_"] > [class^="container_"] { +[class^="chat-"][class*="background-"], +[class^="title-"][class*="background-"], +[class^="chat-"] > [class^="content-"] > [class^="container-"] { background-color: var(--background-tertiary) !important; } -[class*="headerBarInner_"]:after { +[class*="headerBarInner-"]:after { background: transparent !important; } -[class^="streamPreview_"] { +[class^="streamPreview-"] { background-color: var(--background-secondary) !important; } -[class^="streamPreview_"] > [class^="previewContainer_"] { +[class^="streamPreview-"] > [class^="previewContainer-"] { background-color: var(--background-primary) !important; } -[class*="messageContent_"].deleted-message { +[class*="messageContent-"].deleted-message { color: var(--status-red-500) !important; } -[class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class^="container_"] - [class*="footer_"], -[class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class*="modalSize_"], -[class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class*="modalSize_"] - [class*="footer_"], -[class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class*="modalRoot_"], -[class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class*="modalRoot_"] - [class*="footer_"] { +[class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class^="container-"] + [class*="footer-"], +[class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalSize-"], +[class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalSize-"] + [class*="footer-"], +[class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalRoot-"], +[class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalRoot-"] + [class*="footer-"] { background-color: var(--background-primary) !important; } -[class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class^="container_"] - [class*="footer_"] { +[class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class^="container-"] + [class*="footer-"] { box-shadow: none; } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="scroller_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="scroller-"] { background: var(--background-secondary); } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - [class^="reactors_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + [class^="reactors-"] { background-color: var(--background-primary); } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="scroller_"] - > [class^="reactionSelected_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="scroller-"] + > [class^="reactionSelected-"] { background-color: var(--background-modifier-active); } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="scroller_"] - > [class^="reactionDefault_"]:hover { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="scroller-"] + > [class^="reactionDefault-"]:hover { background-color: var(--background-modifier-hover); } -[class^="contentWarningPopout_"] { +[class^="contentWarningPopout-"] { background: var(--background-primary) !important; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3) !important; } -[class^="customColorPicker_"] { +[class^="customColorPicker-"] { background: var(--background-primary) !important; } @@ -332,14 +331,14 @@ }*/ /* font fixes */ -[class^="markdown_"] [class^="codeInline_"], -[class^="codeLine_"], -[class^="codeBlockText_"], -[class^="durationTimeDisplay_"], -[class^="durationTimeSeparator_"], -[class*="after_inlineCode_"], -[class*="before_inlineCode_"], -[class^="inlineCode_"], +[class^="markdown-"] [class^="codeInline-"], +[class^="codeLine-"], +[class^="codeBlockText-"], +[class^="durationTimeDisplay-"], +[class^="durationTimeSeparator-"], +[class*="after_inlineCode-"], +[class*="before_inlineCode-"], +[class^="inlineCode-"], code.inline, code, .hljs { @@ -358,7 +357,7 @@ code, } /* unbreak resizing webms :^) */ -/*[class^="mediaAttachmentsContainer_"] [class^="imageWrapper_"] { +/*[class^="mediaAttachmentsContainer-"] [class^="imageWrapper-"] { min-width: 10px; min-height: 10px; max-width: unset; @@ -368,10 +367,10 @@ code, object-fit: none !important; aspect-ratio: unset !important; } - [class^="mediaAttachmentsContainer_"] [class^="messageAttachment_"] { + [class^="mediaAttachmentsContainer-"] [class^="messageAttachment-"] { height: unset; } - [class^="mediaAttachmentsContainer_"] [class^="oneByOneGrid_"], - [class^="mediaAttachmentsContainer_"] [class^="oneByTwoGrid_"] { + [class^="mediaAttachmentsContainer-"] [class^="oneByOneGrid-"], + [class^="mediaAttachmentsContainer-"] [class^="oneByTwoGrid-"] { max-height: unset !important; }*/ diff --git a/modular/collapsing_members/dynamic.css b/modular/collapsing_members/dynamic.css index 1f9734e..b37af61 100644 --- a/modular/collapsing_members/dynamic.css +++ b/modular/collapsing_members/dynamic.css @@ -1,91 +1,86 @@ @media (width < 1300px) { - [class^="chat_"] - > [class^="content_"] - > [class^="container_"]:nth-child(2) - > [class^="membersWrap_"], - [class^="chat_"] > [class^="content_"] > [class^="container_"]:nth-child(2), - [class^="chat_"] > [class^="content_"] > [class^="membersWrap_"] { + [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_"]:nth-child(2):hover, - [class^="chat_"] - > [class^="content_"] - > [class^="container_"]:hover - > [class^="membersWrap_"], - [class^="chat_"] > [class^="content_"] > [class^="membersWrap_"]:hover { + [class^="chat-"] + > [class^="content-"] + > [class^="container-"]:hover + > [class^="membersWrap-"], + [class^="chat-"] > [class^="content-"] > [class^="membersWrap-"]:hover { width: 240px !important; - min-width: 240px !important; } - [class^="chat_"] - > [class^="content_"] + [class^="chat-"] + > [class^="content-"] > [class^="container"] - > [class^="membersWrap_"], - [class^="chat_"] > [class^="content_"] > [class^="membersWrap_"] { + > [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_"] { + [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_"] { + [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 !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 !important; + [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; } } diff --git a/modular/collapsing_members/on.css b/modular/collapsing_members/on.css index 1738e8d..480a627 100644 --- a/modular/collapsing_members/on.css +++ b/modular/collapsing_members/on.css @@ -1,89 +1,84 @@ -[class^="chat_"] - > [class^="content_"] - > [class^="container_"]:nth-child(2) - > [class^="membersWrap_"], -[class^="chat_"] > [class^="content_"] > [class^="container_"]:nth-child(2), -[class^="chat_"] > [class^="content_"] > [class^="membersWrap_"] { +[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_"]:nth-child(2):hover, -[class^="chat_"] - > [class^="content_"] - > [class^="container_"]:hover - > [class^="membersWrap_"], -[class^="chat_"] > [class^="content_"] > [class^="membersWrap_"]:hover { +[class^="chat-"] + > [class^="content-"] + > [class^="container-"]:hover + > [class^="membersWrap-"], +[class^="chat-"] > [class^="content-"] > [class^="membersWrap-"]:hover { width: 240px !important; - min-width: 240px !important; } -[class^="chat_"] - > [class^="content_"] +[class^="chat-"] + > [class^="content-"] > [class^="container"] - > [class^="membersWrap_"], -[class^="chat_"] > [class^="content_"] > [class^="membersWrap_"] { + > [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_"] { +[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_"] { +[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 !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 !important; +[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; } diff --git a/modular/collapsing_sidebar/compact-er_support.css b/modular/collapsing_sidebar/compact-er_support.css index b21c539..f738315 100644 --- a/modular/collapsing_sidebar/compact-er_support.css +++ b/modular/collapsing_sidebar/compact-er_support.css @@ -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,124 @@ 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^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [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^="linkTop_"] - > [class^="name_"] { +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_"] { +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_"] { - width: 32px !important; -} - -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_"] - > 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) + [class*="unreadBar-"] + > span { 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; } diff --git a/modular/collapsing_sidebar/dynamic.css b/modular/collapsing_sidebar/dynamic.css index f23e0e6..e4626ae 100644 --- a/modular/collapsing_sidebar/dynamic.css +++ b/modular/collapsing_sidebar/dynamic.css @@ -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,125 @@ ); } - 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^="content-"] + > [class^="children-"], + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"] + > [class^="children-"], + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [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^="linkTop_"] - > [class^="name_"] { + 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_"] { + 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_"] { - width: 32px !important; - } - - 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_"] - > 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) + [class*="unreadBar-"] + > span { 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; } } diff --git a/modular/collapsing_sidebar/dynamic_+_compact-er_support.css b/modular/collapsing_sidebar/dynamic_+_compact-er_support.css index 3f7d7fb..2d93fe0 100644 --- a/modular/collapsing_sidebar/dynamic_+_compact-er_support.css +++ b/modular/collapsing_sidebar/dynamic_+_compact-er_support.css @@ -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,125 @@ ); } - 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^="content-"] + > [class^="children-"], + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"] + > [class^="children-"], + div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [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^="linkTop_"] - > [class^="name_"] { + 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_"] { + 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_"] { - width: 32px !important; - } - - 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_"] - > 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) + [class*="unreadBar-"] + > span { 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; } } diff --git a/modular/collapsing_sidebar/on.css b/modular/collapsing_sidebar/on.css index 0036ff1..3f56646 100644 --- a/modular/collapsing_sidebar/on.css +++ b/modular/collapsing_sidebar/on.css @@ -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,129 @@ 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^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [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^="linkTop_"] - > [class^="name_"] { +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_"] { +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_"] { - width: 32px !important; -} - -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_"] - > 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) + [class*="unreadBar-"] + > span { 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; } diff --git a/modular/compacter_mode.css b/modular/compacter_mode.css index c346026..8304d3d 100644 --- a/modular/compacter_mode.css +++ b/modular/compacter_mode.css @@ -1,105 +1,105 @@ -[class*="guilds_"] [class^="listItemWrapper_"] > [class^="wrapper_"], -[class*="guilds_"] [class^="listItemWrapper_"] > [class^="wrapper_"] > svg, -[class*="guilds_"] [class^="listItem_"] [class^="wrapper_"]:has(> svg), -[class*="guilds_"] [class^="listItem_"] [class^="wrapper_"]:has(> svg) > svg, -[class*="guilds_"] [class^="listItem_"] [class^="wrapperSimple_"], -[class*="guilds_"] [class^="listItem_"] [class^="wrapperSimple_"] > svg { +[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"], +[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"] > svg, +[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg), +[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg) > svg, +[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"], +[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"] > svg { width: 32px; height: 32px; } -[class*="guilds_"] [class^="listItem_"] > [class^="pill_"], -[class*="guilds_"] - [class^="listItem_"] - > [class^="pill_"] - > [class^="item_"][style*="height: 40px;"] { +[class*="guilds-"] [class^="listItem-"] > [class^="pill-"], +[class*="guilds-"] + [class^="listItem-"] + > [class^="pill-"] + > [class^="item-"][style*="height: 40px;"] { height: 32px !important; } -[class*="guilds_"], -[class*="guilds_"] [class^="listItem_"], -[class*="guilds_"] - [class^="wrapper_"]:has(> [class^="expandedFolderBackground_"]) { - width: 48px !important; +[class*="guilds-"], +[class*="guilds-"] [class^="listItem-"], +[class*="guilds-"] + [class^="wrapper-"]:has(> [class^="expandedFolderBackground-"]) { + width: 48px; } -[class*="guilds_"] [class^="unreadMentionsIndicator"] { +[class*="guilds-"] [class^="unreadMentionsIndicator"] { width: 48px; height: 16px; } -[class*="guilds_"] > ul > [class^="scroller_"] { +[class*="guilds-"] > ul > [class^="scroller-"] { padding-top: 8px !important; } -[class*="guilds_"] [class^="listItem_"] { +[class*="guilds-"] [class^="listItem-"] { margin-bottom: 4px; } -[class*="guilds_"] ul[id^="folder-items-"] > [class^="listItem_"] { +[class*="guilds-"] ul[id^="folder-items-"] > [class^="listItem-"] { width: 32px !important; height: 32px !important; margin-left: 8px; } -[class*="guilds_"] [class^="expandedFolderBackground_"] { +[class*="guilds-"] [class^="expandedFolderBackground-"] { width: 32px; left: 8px; } -[class*="guilds_"] ul[id^="folder-items-"] { +[class*="guilds-"] ul[id^="folder-items-"] { height: unset !important; } -[class*="guilds_"] - ul[class^="tree_"] - > [class^="scroller_"] +[class*="guilds-"] + ul[class^="tree-"] + > [class^="scroller-"] > div[style*="height: 56px;"] { height: unset !important; } -[class*="guilds_"] +[class*="guilds-"] ul[id^="folder-items-"] - > [class^="listItem_"] - > [class^="pill_"] { + > [class^="listItem-"] + > [class^="pill-"] { left: -8px; } -section[class^="panels_"] > [class*="activityPanel_"] [class^="gameIcon_"], -section[class^="panels_"] - > [class*="activityPanel_"] - [class^="actions_"] - > [class^="panelButtonContainer_"] +section[class^="panels-"] > [class*="activityPanel-"] [class^="gameIcon-"], +section[class^="panels-"] + > [class*="activityPanel-"] + [class^="actions-"] + > [class^="panelButtonContainer-"] > button, -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class*="directionRow_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class*="directionRow-"] > button, -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="actionButtons_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] button { width: 24px; height: 24px; min-height: 24px; } -section[class^="panels_"] > [class^="container_"]:last-child { +section[class^="panels-"] > [class^="container-"]:last-child { position: relative; } -section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { +section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { position: absolute; right: 0; padding-right: 8px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class*="directionRow_"] { +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class*="directionRow-"] { position: absolute; bottom: 8px; right: 8px; @@ -108,133 +108,133 @@ section[class^="panels_"] grid-auto-flow: column; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div { padding-left: 20px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] { + > [class^="rtcConnectionStatus-"] { position: absolute; left: 8px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"]:has(> :nth-child(2)) { + > [class^="rtcConnectionStatus-"]:has(> :nth-child(2)) { top: 12px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > svg[class^="ping_"] { + > [class^="rtcConnectionStatus-"] + > svg[class^="ping-"] { margin-right: 0; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > [class^="labelWrapper_"], -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"], +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > [class^="labelWrapper_"] + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] > button { width: 16px; height: 16px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > [class^="labelWrapper_"] { + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] { position: relative; left: -16px; z-index: 10; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > [class^="labelWrapper_"] + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] > button - > [class^="contents_"] { + > [class^="contents-"] { display: none; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="actionButtons_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] button { padding: 0; background: transparent; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="actionButtons_"] { +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] { grid-gap: 4px; padding-top: 0; grid-template-columns: repeat(auto-fill, minmax(0, 24px)); height: 24px; } -section[class^="panels_"] > [class^="container_"] { +section[class^="panels-"] > [class^="container-"] { height: 40px; padding: 0 4px; } -section[class^="panels_"] - > [class^="container_"] - > [class^="avatarWrapper_"] - > [class*="avatar_"] { +section[class^="panels-"] + > [class^="container-"] + > [class^="avatarWrapper-"] + > [class*="avatar-"] { width: 24px !important; height: 24px !important; } -section[class^="panels_"] - > [class^="container_"] - > [class^="avatarWrapper_"] - > [class*="avatar_"] +section[class^="panels-"] + > [class^="container-"] + > [class^="avatarWrapper-"] + > [class*="avatar-"] > svg { width: 32px !important; height: 32px !important; } -section[class^="panels_"] - > [class^="container_"] - > [class*="directionRow_"] +section[class^="panels-"] + > [class^="container-"] + > [class*="directionRow-"] > button { width: 24px; height: 24px; } -section[class^="panels_"] > [class^="container_"] > [class*="directionRow_"] { +section[class^="panels-"] > [class^="container-"] > [class*="directionRow-"] { display: grid; grid-auto-flow: column; grid-gap: 4px; @@ -270,73 +270,64 @@ button.hh2-spotify-controls-button { color: var(--text-muted) !important; } -[class^="members_"] [class^="member_"] > [class*="layout_"] { +[class^="members-"] [class^="member-"] > [class*="layout-"] { height: 32px; } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"], -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] - > [class^="wrapper_"] { +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"], +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] { width: 24px !important; height: 24px !important; } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] - > [class^="wrapper_"] +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] > svg[viewBox="0 0 40 40"] { width: 32px !important; height: 32px !important; } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] - > [class^="wrapper_"] - > [class^="avatarDecoration_"] { +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] + > [class^="avatarDecoration-"] { top: calc((0.4 - var(--decoration-to-avatar-ratio) / 2) * 32px); left: calc((0.475 - var(--decoration-to-avatar-ratio) / 2) * 32px); width: calc(32px * var(--decoration-to-avatar-ratio)); height: calc(32px * var(--decoration-to-avatar-ratio)); } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] - > [class^="wrapper_"] +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] > svg[viewBox="0 0 32 32"] { width: 24px !important; height: 24px !important; } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] { +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] { margin-right: 8px; } -[class^="members_"] [class^="membersGroup_"] { +[class^="members-"] [class^="membersGroup-"] { padding: 12px 8px 0 8px !important; - height: unset !important; + height: unset; } -[class^="chat_"] - > [class^="content_"] - > [class^="container_"] - > [class^="membersWrap_"]:hover - > [class^="members_"] - > [class^="content_"] - > [class^="membersGroup_"] { - height: unset !important; -} -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="children_"] +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="children-"] > .presence-icons-wrapper > span > img { @@ -344,77 +335,74 @@ button.hh2-spotify-controls-button { height: 20px; } -[class^="sidebar_"] [class^="containerDefault_"]:has(> [class*="clickable_"]) { +[class^="sidebar-"] [class^="containerDefault-"]:has(> [class*="clickable-"]) { padding-top: 8px; } -[class^="sidebar_"] ul[class^="content_"] > div[style="height: 12px;"] { +[class^="sidebar-"] ul[class^="content-"] > div[style="height: 12px;"] { height: 6px !important; } -[class^="sidebar_"] ul[class^="content_"] > div[style="height: 84px;"] { +[class^="sidebar-"] ul[class^="content-"] > div[style="height: 84px;"] { height: 0px !important; } -[class^="sidebar_"] ul[class^="content_"] > [class^="sectionDivider_"] { +[class^="sidebar-"] ul[class^="content-"] > [class^="sectionDivider-"] { margin-top: 6px; } -[class^="sidebar_"] [class^="containerDefault_"] [class^="link_"] { - padding: 4px; +[class^="sidebar-"] [class^="iconVisibility-"] > [class^="content-"] { + padding: 0 4px; } -[class^="sidebar_"] - [class^="iconVisibility_"] - > [class^="content_"] - > [class^="mainContent_"], -[class^="sidebar_"] - [class^="containerDefault_"] - [class^="iconVisibility_"] - > [class^="content_"] - > [class^="children_"] - > [class^="iconItem_"] { +[class^="sidebar-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="mainContent-"], +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"] + > [class^="iconItem-"] { padding: 3px 0; } -[class^="sidebar_"] - [class^="containerDefault_"] - [class^="iconVisibility_"] - > [class^="content_"] - > [class^="children_"] - > [class^="channelInfo_"] { +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"] + > [class^="channelInfo-"] { margin-top: 0 !important; } -[class^="sidebar_"] - [class^="containerDefault_"] - [class^="iconVisibility_"] - > [class^="content_"] - > [class^="children_"] { +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"] { margin-top: 2px; } -[class^="sidebar_"] - [class^="containerDefault_"] - [class^="voiceUser_"] - [class^="userAvatar_"] { +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="voiceUser-"] + [class^="userAvatar-"] { margin-left: 4px; margin-right: 4px; } -[class^="sidebar_"] [class^="containerDefault_"] [class^="spine_"] { - top: 2px; -} -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; @@ -428,815 +416,272 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) ); } -[class^="animatedBannerHoverLayer_"] { +[class^="animatedBannerHoverLayer-"] { top: -32px !important; height: 32px !important; } -[nop="nop"] [class^="members_"] > [class^="content_"], -[nop="nop"] [class^="sidebar_"] ul[class^="content_"] { +[nop="nop"] [class^="members-"] > [class^="content-"], +[nop="nop"] [class^="sidebar-"] ul[class^="content-"] { height: unset !important; padding-bottom: 8px; } -[class^="sidebar_"] header[class^="header_"] { +[class^="sidebar-"] header[class^="header-"] { padding: 4px 8px; } -[class^="chat_"] > [class^="title_"], -[class^="chat_"] > section[class*="container_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] { - height: 32px !important; - min-height: 32px !important; - padding: 0; -} -[class^="chat_"] > [class^="title_"][class^="libraryHeader_"]:before, -[class^="chat_"] > section[class*="container_"][class^="libraryHeader_"]:before, -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"][class^="libraryHeader_"]:before, -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"][class^="libraryHeader_"]:before { - top: 31px; -} -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] { +[class^="chat-"] > [class^="title-"] { height: 32px; } -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] { - display: grid; - grid-auto-flow: column; - grid-gap: 4px; - margin-right: 4px; -} -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="inviteToolbar_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="inviteToolbar_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="inviteToolbar_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="inviteToolbar_"] { - display: grid; - grid-auto-flow: column; - grid-gap: 4px; -} -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] { +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] { height: 24px !important; } -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > .DraftEditor-root - [class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"] { +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root, +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"] { margin-top: 0 !important; } -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - [class^="iconWrapper_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - [class^="iconWrapper_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - [class^="iconWrapper_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - [class^="iconWrapper_"] { +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + [class^="iconWrapper-"] { width: 24px !important; height: 24px !important; - margin: 0; } -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - [class^="iconWrapper_"] - > svg, -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - [class^="iconWrapper_"] - > svg, -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - [class^="iconWrapper_"] - > svg, -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - [class^="iconWrapper_"] +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + [class*="iconWrapper-"] > svg { margin: 0 !important; padding: 1px; } -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="icon_"]:has(> [class^="text-md-normal_"]), -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="icon_"]:has(> [class^="text-md-normal_"]), -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="icon_"]:has(> [class^="text-md-normal_"]), -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="toolbar_"] - > [class^="icon_"]:has(> [class^="text-md-normal_"]) { +[class^="chat-"] > [class^="title-"] [class^="toolbar-"] { + display: grid; + grid-auto-flow: column; + grid-gap: 4px; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="icon-"]:has(> [class^="text-md-normal-"]) { margin-left: 4px; margin-right: 0; } -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - [class^="topic_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - [class^="topic_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - [class^="topic_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - [class^="topic_"] { +[class^="chat-"] > [class^="title-"] [class^="topic-"] { margin-left: 4px; } -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - [class^="titleWrapper_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - [class^="titleWrapper_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - [class^="titleWrapper_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - [class^="titleWrapper_"] { +[class^="chat-"] > [class^="title-"] [class^="titleWrapper-"] { margin-right: 4px; } -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="children_"] - > [class^="iconWrapper_"], -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - [class^="divider_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="children_"] - > [class^="iconWrapper_"], -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - [class^="divider_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="children_"] - > [class^="iconWrapper_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - [class^="divider_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="children_"] - > [class^="iconWrapper_"], -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - [class^="divider_"] { +[class^="chat-"] + > [class^="title-"] + > [class^="children-"] + > [class^="iconWrapper-"], +[class^="chat-"] > [class^="title-"] [class^="divider-"] { margin: 0 4px; } -[class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class^="children_"] - > [class^="iconWrapper_"] - > svg, -[class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="children_"] - > [class^="iconWrapper_"] - > svg, -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class^="children_"] - > [class^="iconWrapper_"] - > svg, -[class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class^="children_"] - > [class^="iconWrapper_"] +[class^="chat-"] + > [class^="title-"] + > [class^="children-"] + > [class^="iconWrapper-"] > svg { padding: 2px; } -[class*="iconWrapper_"] - [class^="chat_"] - > [class^="title_"] - > [class^="upperContainer_"] - > [class*="search_"], -[class*="iconWrapper_"] - [class^="chat_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class*="search_"], -[class*="iconWrapper_"] - [class^="base_"] - > [class^="content_"] - > [class^="container_"] - > section[class*="container_"] - > [class^="upperContainer_"] - > [class*="search_"], -[class*="iconWrapper_"] - [class^="base_"] - > [class^="content_"] - > [class^="applicationStore_"] - section[class*="container_"] - > [class^="upperContainer_"] - > [class*="search_"] { + +[class^="chat-"] [class^="toolbar-"] [class*="iconWrapper-"], +[class^="chat-"] [class^="toolbar-"] > [class*="search-"] { margin: 0 !important; } -[class^="chatContent_"] +[class^="chatContent-"] > form [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] > div - > [class*="fontSize16Padding_"] { + > [class*="fontSize16Padding-"] { padding-top: 9px !important; padding-bottom: 9px !important; } -[class^="channelTextArea_"] [class^="inner_"] { +[class^="channelTextArea-"] [class^="inner-"] { padding-left: 0 !important; } -[class^="channelTextArea_"], -[class^="channelTextArea_"] [class^="inner_"], -[class^="channelTextArea_"] [class^="buttons_"], -[class^="channelTextArea_"] [class^="attachWrapper_"], -[class^="channelTextArea_"] [class^="attachButton_"], -[class^="channelTextArea_"] > [class^="scrollableContainer_"], -[class^="channelTextArea_"] [class^="inner_"] > [class^="textArea_"] { +[class^="channelTextArea-"], +[class^="channelTextArea-"] [class^="inner-"], +[class^="channelTextArea-"] [class^="buttons-"], +[class^="channelTextArea-"] [class^="attachWrapper-"], +[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_"], -[class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] { +[class^="channelTextArea-"] [class^="buttons-"], +[class^="channelTextArea-"] [class^="attachWrapper-"] { height: 40px; } -[class^="channelTextArea_"] [class^="attachWrapper_"] { +[class^="channelTextArea-"] [class^="attachWrapper-"] { min-width: 40px; } -[class^="channelTextArea_"] [class^="attachWrapper_"] [class^="attachButton_"] { +[class^="channelTextArea-"] [class^="attachWrapper-"] [class^="attachButton-"] { margin-left: 0; padding-top: 0; } -[class^="channelTextArea_"] [class^="attachButton_"], -[class^="channelTextArea_"] [class^="attachButton_"] > [class^="icon_"] { +[class^="channelTextArea-"] [class^="attachButton-"], +[class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] { padding: 5px 8px; } -[class^="channelTextArea_"] - [class^="buttons_"] - [class*="buttonContainer_"] - > button:not(:has(> [class*="innerButton_"])) { +[class^="channelTextArea-"] + [class^="buttons-"] + [class*="buttonContainer-"] + > button:not(:has(> [class*="innerButton-"])) { margin: 0; } -[class^="channelTextArea_"] [class^="buttons_"] > [class^="separator_"], -[class^="channelTextArea_"] - [class^="buttons_"] - > [class^="separator_"] - [class*="innerButton_"] { +[class^="channelTextArea-"] [class^="buttons-"] > [class^="separator-"], +[class^="channelTextArea-"] + [class^="buttons-"] + > [class^="separator-"] + [class*="innerButton-"] { margin-left: 4px; } -[class^="channelTextArea_"] - [class^="buttons_"] - > [class^="separator_"] - [class*="innerButton_"] { +[class^="channelTextArea-"] + [class^="buttons-"] + > [class^="separator-"] + [class*="innerButton-"] { margin-right: 0; } -[class*="menu_"] [class^="scroller_"] { +[class*="menu-"] [class^="scroller-"] { padding: 4px; } -[class*="menu_"] [class^="scroller_"]::-webkit-scrollbar { +[class*="menu-"] [class^="scroller-"]::-webkit-scrollbar { width: 4px; } -[class*="menu_"] [class^="scroller_"] [class^="item_"] { +[class*="menu-"] [class^="scroller-"] [class^="item-"] { margin: 1px 0; padding: 0 4px; min-height: 24px; } -[class*="menu_"] - [class^="scroller_"] - [class^="customItem_"][id^="message-quickreact-"] - > [class^="button_"] { +[class*="menu-"] + [class^="scroller-"] + [class^="customItem-"][id^="message-quickreact-"] + > [class^="button-"] { width: 24px; height: 24px; } -[class*="menu_"] - [class^="scroller_"] - [class^="wrapper_"]:has(> [class^="customItem_"][id^="message-quickreact-"]) { +[class*="menu-"] + [class^="scroller-"] + [class^="wrapper-"]:has(> [class^="customItem-"][id^="message-quickreact-"]) { padding: 0; margin-bottom: 4px; } -[class*="menu_"] - [class^="scroller_"] - [class^="item_"] - > [class^="labelContainer_"], -[class*="menu_"] - [class^="scroller_"] - [class^="item_"] - > [class^="sliderContainer_"] { +[class*="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="labelContainer-"], +[class*="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="sliderContainer-"] { padding: 0; } -[class*="menu_"] - [class^="scroller_"] - [class^="item_"] - > [class^="labelContainer_"] { +[class*="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="labelContainer-"] { min-height: 24px; } -[class^="sidebar_"] - > [class^="privateChannels_"] - ul[class^="content_"] - > [class^="channel_"] - [class*="layout_"] { +[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_"] { +[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_"] +[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_"] +[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_"] { +[class^="sidebar-"] + > [class^="privateChannels-"] + ul[class^="content-"] + > [class^="channel-"] + [class*="layout-"] + > [class^="avatar-"] { margin-right: 8px; } -[class^="sidebar_"] - > [class^="privateChannels_"] - ul[class^="content_"] - > [class^="channel_"] - [class*="layout_"] - > [class^="avatar_"] - > [class^="wrapper_"] - > [class^="avatarDecoration_"] { +[class^="sidebar-"] + > [class^="privateChannels-"] + ul[class^="content-"] + > [class^="channel-"] + [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] + > [class^="avatarDecoration-"] { top: calc((0.4 - var(--decoration-to-avatar-ratio) / 2) * 32px); left: calc((0.475 - var(--decoration-to-avatar-ratio) / 2) * 32px); width: calc(32px * var(--decoration-to-avatar-ratio)); height: calc(32px * var(--decoration-to-avatar-ratio)); } -[class^="sidebar_"] - > [class^="privateChannels_"] - ul[class^="content_"] - > [class*="privateChannelsHeaderContainer_"] { +[class^="sidebar-"] + > [class^="privateChannels-"] + ul[class^="content-"] + > [class*="privateChannelsHeaderContainer-"] { padding: 9px 4px 2px 9px; height: 24px; } -[class^="sidebar_"] > [class^="privateChannels_"] > [class^="searchBar_"] { +[class^="sidebar-"] > [class^="privateChannels-"] > [class^="searchBar-"] { height: 32px; } diff --git a/modular/cozy_compact.css b/modular/cozy_compact.css index c1bc17f..cf4e9ea 100644 --- a/modular/cozy_compact.css +++ b/modular/cozy_compact.css @@ -1,148 +1,148 @@ html:not(.a11y-font-scaled-down) - [class*="message_"]:not([class*="systemMessage_"]):not([class*="compact_"]), + [class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]), html:not(.a11y-font-scaled-down) - [class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"], + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"], html:not(.a11y-font-scaled-down) - [class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="container_"]:not([class*="systemMessage_"]):not( - [class*="compact_"] + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="container-"]:not([class*="systemMessage-"]):not( + [class*="compact-"] ) { padding: 0 !important; padding-left: 16px !important; } -[class*="message_"]:not([class*="systemMessage_"]):not([class*="compact_"]), -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"]:not([class*="systemMessage_"]):not([class*="compact_"]), -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="container_"]:not([class*="systemMessage_"]):not( - [class*="compact_"] +[class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]), +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"]:not([class*="systemMessage-"]):not([class*="compact-"]), +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="container-"]:not([class*="systemMessage-"]):not( + [class*="compact-"] ) { padding-left: 16px !important; } -[class*="message_"][class*="systemMessage_"] { +[class*="message-"][class*="systemMessage-"] { padding-left: 32px !important; } -[class*="message_"][class*="systemMessage_"] [class^="iconContainer_"] { +[class*="message-"][class*="systemMessage-"] [class^="iconContainer-"] { margin-right: 0; width: 24px; } html:not(.a11y-font-scaled-down) - [class*="message_"]:not([class*="compact_"]) - > [class^="contents_"] - > [class^="header_"], + [class*="message-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"], html:not(.a11y-font-scaled-down) - [class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"]:not([class*="compact_"]) - > [class^="contents_"] - > [class^="header_"], + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"], html:not(.a11y-font-scaled-down) - [class*="message_"]:not([class*="compact_"]) - > [class^="wrapper_"] - > [class^="contents_"] - > [class^="header_"] { + [class*="message-"]:not([class*="compact-"]) + > [class^="wrapper-"] + > [class^="contents-"] + > [class^="header-"] { padding-left: 0 !important; margin-left: 24px; padding-bottom: 0 !important; } .a11y-font-scaled-down - [class*="message_"]:not([class*="compact_"]) - > [class^="contents_"] - > [class^="header_"], + [class*="message-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"], .a11y-font-scaled-down - [class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"]:not([class*="compact_"]) - > [class^="contents_"] - > [class^="header_"] + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"] .a11y-font-scaled-down - [class*="message_"]:not([class*="compact_"]) - > [class^="wrapper_"] - > [class^="contents_"] - > [class^="header_"] { + [class*="message-"]:not([class*="compact-"]) + > [class^="wrapper-"] + > [class^="contents-"] + > [class^="header-"] { margin-left: calc(24px - 4.5rem); } -[class*="message_"] - > [class^="wrapper_"] - > [class^="contents_"] - [class^="avatar_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"] - > [class^="contents_"] - [class^="avatar_"], -[class*="message_"] > [class^="contents_"] [class^="avatar_"] { +[class*="message-"] + > [class^="wrapper-"] + > [class^="contents-"] + [class^="avatar-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"] + > [class^="contents-"] + [class^="avatar-"], +[class*="message-"] > [class^="contents-"] [class^="avatar-"] { width: 20px; height: 20px; left: 16px; } -[class*="message_"] - > [class^="wrapper_"] - > [class^="contents_"] - [class^="avatar_"] { +[class*="message-"] + > [class^="wrapper-"] + > [class^="contents-"] + [class^="avatar-"] { left: 0 !important; } -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"] - > [class^="contents_"], -[class*="message_"] > [class^="contents_"], -[class*="message_"] > [class^="wrapper_"] > [class^="contents_"] { +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"] + > [class^="contents-"], +[class*="message-"] > [class^="contents-"], +[class*="message-"] > [class^="wrapper-"] > [class^="contents-"] { margin-left: 0; padding: 0; } -[class*="message_"][class*="systemMessage_"] > [class^="container_"] { +[class*="message-"][class*="systemMessage-"] > [class^="container-"] { padding: 0; } -[class*="cozy_"][class*="hasThread_"]::after { +[class*="cozy-"][class*="hasThread-"]::after { display: none; } -[class*="message_"] > [class^="wrapper_"] { +[class*="message-"] > [class^="wrapper-"] { padding-left: 0; } -[class^="messagesWrapper_"] [class^="scrollerInner_"]:after { +[class^="messagesWrapper-"] [class^="scrollerInner-"]:after { height: 4px !important; } -[class*="message_"]:not([class*="compact_"]) - [class^="contents_"] - [class*="timestampVisibleOnHover_"] { +[class*="message-"]:not([class*="compact-"]) + [class^="contents-"] + [class*="timestampVisibleOnHover-"] { display: none; } -[class^="messagesWrapper_"] [class^="scrollerInner_"] [class^="divider_"] { +[class^="messagesWrapper-"] [class^="scrollerInner-"] [class^="divider-"] { margin: 4px; height: 8px; } -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class*="groupStart_"][class*="cozy_"] { +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class*="groupStart-"][class*="cozy-"] { margin-top: 8px; } -div[class*="cozyMessage_"] div[class^="repliedMessage_"] { +div[class*="cozyMessage-"] div[class^="repliedMessage-"] { margin-left: 33px; } -div[class*="cozyMessage_"] div[class^="repliedMessage_"]:before { +div[class*="cozyMessage-"] div[class^="repliedMessage-"]:before { --avatar-size: 20px; border-left: var(--spine-width) solid var(--interactive-active); border-bottom: 0 solid var(--interactive-active); @@ -150,7 +150,7 @@ div[class*="cozyMessage_"] div[class^="repliedMessage_"]:before { border-top: var(--spine-width) solid var(--interactive-active); } -[class*="cozyMessage_"] [class^="avatarDecoration_"] { +[class*="cozyMessage-"] [class^="avatarDecoration-"] { margin-top: calc(24px - 20px * var(--decoration-to-avatar-ratio)); left: calc(38px - 20px * var(--decoration-to-avatar-ratio)); width: calc(20px * var(--decoration-to-avatar-ratio)); diff --git a/modular/custom_bg.css b/modular/custom_bg.css index 07d6e44..aac5bae 100644 --- a/modular/custom_bg.css +++ b/modular/custom_bg.css @@ -18,151 +18,146 @@ ) !important; } -[class^="appMount_"] { +[class^="appMount-"] { background: var(--custom-background), var(--primary) !important; background-repeat: no-repeat !important; background-size: cover !important; } -[class^="chat_"] - > [class^="content_"] - > [class^="container"] - > [class^="chatContainer_"] - > [class^="chatContent_"], -[class^="chat_"] > [class^="title_"], -[class^="markup_"] code, -[class*="embedFull_"], -[class^="chat_"] > [class^="title_"] [class^="searchBar_"], -[class^="content_"] - > [class^="sidebar_"] - > [class^="privateChannels_"] - > [class^="searchBar_"] - > [class^="searchBarComponent_"], -[class^="standardSidebarView_"] > [class^="contentRegion_"], -[class^="accountProfileCard_"], -[class^="base_"] > [class^="content_"] > [class^="wrapper_"], -[class^="perksModal_"], -[class^="base_"] > [class^="content_"] > [class^="container_"], -[class^="gameUpdates_"], -[class^="applicationStore_"], -[class^="pageWrapper_"], +[class^="chat-"] > [class^="content-"] > [class^="chatContent-"], +[class^="chat-"] > [class^="title-"], +[class^="markup-"] code, +[class*="embedFull-"], +[class^="chat-"] > [class^="title-"] [class^="searchBar-"], +[class^="content-"] + > [class^="sidebar-"] + > [class^="privateChannels-"] + > [class^="searchBar-"] + > [class^="searchBarComponent-"], +[class^="standardSidebarView-"] > [class^="contentRegion-"], +[class^="accountProfileCard-"], +[class^="base-"] > [class^="content-"] > [class^="wrapper-"], +[class^="perksModal-"], +[class^="base-"] > [class^="content-"] > [class^="container-"], +[class^="gameUpdates-"], +[class^="applicationStore-"], +[class^="pageWrapper-"], .messageLinkPreview-container { background-color: var(--transparent_background-primary) !important; } -[class^="channelTextArea_"], -[class^="content_"] > [class^="sidebar_"], -[class^="chat_"] > [class^="content_"] > [class^="container_"], -[class^="chat_"] > [class^="content_"] > [class^="chatContent_"], -[class^="standardSidebarView_"] - > [class^="sidebarRegion_"] - [class^="sidebarRegionScroller_"] { +[class^="channelTextArea-"], +[class^="content-"] > [class^="sidebar-"], +[class^="chat-"] > [class^="content-"] > [class^="container-"], +[class^="standardSidebarView-"] + > [class^="sidebarRegion-"] + [class^="sidebarRegionScroller-"] { background: var(--transparent_background-secondary) !important; } -nav[class*="guilds_"], +nav[class*="guilds-"], body > #app-mount > .platform-web - > [class^="popout_"] - > [class^="content_"] - > [class^="wrapper_"] { + > [class^="popout-"] + > [class^="content-"] + > [class^="wrapper-"] { background: var(--transparent_background-tertiary) !important; } -[class^="chat_"], -[class^="content_"] > [class^="sidebar_"] > [class^="container_"], -[class^="content_"] > [class^="sidebar_"] > [class^="privateChannels_"], -[class^="content_"] - > [class^="sidebar_"] - > [class^="privateChannels_"] - > [class^="scroller_"], -nav[class*="guilds_"] > ul > [class^="scroller_"], -[class^="content_"] > [class^="sidebar_"] > [class^="panels_"], -[class^="chat_"] - > [class^="content_"] - > [class^="membersWrap_"] - > [class^="members_"] +[class^="chat-"], +[class^="content-"] > [class^="sidebar-"] > [class^="container-"], +[class^="content-"] > [class^="sidebar-"] > [class^="privateChannels-"], +[class^="content-"] + > [class^="sidebar-"] + > [class^="privateChannels-"] + > [class^="scroller-"], +nav[class*="guilds-"] > ul > [class^="scroller-"], +[class^="content-"] > [class^="sidebar-"] > [class^="panels-"], +[class^="chat-"] + > [class^="content-"] + > [class^="membersWrap-"] + > [class^="members-"] > div, -[class^="channelTextArea_"] > [class^="scrollableContainer_"], -[class^="chat_"] > [class^="title_"] [class^="children_"]:after, -[class^="chat_"] - > [class^="content_"] - > [class^="chatContent_"] - [class^="scrollerInner_"] - > [class^="wrapper_"], -[class^="chat_"] - > [class^="content_"] - > [class^="chatContent_"] - [class^="scrollerInner_"] - > [class^="wrapper_"] - > [class^="wrapper_"], -[class^="standardSidebarView_"], -[class^="standardSidebarView_"] - > [class^="contentRegion_"] - [class^="contentRegionScroller_"], -[class^="base_"] - > [class^="content_"] - > [class^="wrapper_"] - > [class^="navigationBar_"], -[class^="peopleColumn_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > [class*="container_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > [class^="scroller_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > [class*="container_"] - > [class^="table_"] - > [class*="header_"], -[class^="applicationStore_"] [class^="headerBar_"], -[class^="applicationStore_"] [class^="scroller_"], +[class^="channelTextArea-"] > [class^="scrollableContainer-"], +[class^="chat-"] > [class^="title-"] [class^="children-"]:after, +[class^="chat-"] + > [class^="content-"] + > [class^="chatContent-"] + [class^="scrollerInner-"] + > [class^="wrapper-"], +[class^="chat-"] + > [class^="content-"] + > [class^="chatContent-"] + [class^="scrollerInner-"] + > [class^="wrapper-"] + > [class^="wrapper-"], +[class^="standardSidebarView-"], +[class^="standardSidebarView-"] + > [class^="contentRegion-"] + [class^="contentRegionScroller-"], +[class^="base-"] + > [class^="content-"] + > [class^="wrapper-"] + > [class^="navigationBar-"], +[class^="peopleColumn-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class*="container-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class^="scroller-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class*="container-"] + > [class^="table-"] + > [class*="header-"], +[class^="applicationStore-"] [class^="headerBar-"], +[class^="applicationStore-"] [class^="scroller-"], #gm-settings-inject, -[class^="base_"] - > [class^="content_"] - > [class^="container_"] +[class^="base-"] + > [class^="content-"] + > [class^="container-"] > section - > section[class^="headerBarContainer_"], -[class^="chat_"] - > [class^="content_"] - > [class^="container_"] - > [class^="membersWrap_"] - > [class^="members_"], -[class^="chat_"] - > [class^="content_"] - > [class^="container_"] - > [class^="membersWrap_"], -[class^="chat_"] - > [class^="content_"] - > [class^="container_"] - > [class^="membersWrap_"] - > [class^="members_"] + > section[class^="headerBarContainer-"], +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"] + > [class^="members-"], +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"], +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"] + > [class^="members-"] > div, body > #app-mount > .platform-web - > [class^="popout_"] - > [class^="content_"] - > [class^="wrapper_"] - > [class^="callContainer_"] { + > [class^="popout-"] + > [class^="content-"] + > [class^="wrapper-"] + > [class^="callContainer-"] { background: transparent !important; } -#gm-settings-inject [class^="auto_"]::-webkit-scrollbar-track, -#gm-settings-inject[class^="auto_"]::-webkit-scrollbar-track { +#gm-settings-inject [class^="auto-"]::-webkit-scrollbar-track, +#gm-settings-inject[class^="auto-"]::-webkit-scrollbar-track { background: transparent !important; border: none; } -#gm-settings-inject [class^="auto_"]::-webkit-scrollbar-thumb, -#gm-settings-inject[class^="auto_"]::-webkit-scrollbar-thumb { +#gm-settings-inject [class^="auto-"]::-webkit-scrollbar-thumb, +#gm-settings-inject[class^="auto-"]::-webkit-scrollbar-thumb { background: var(--interactive-normal); border: none; } -#gm-settings-inject [class^="auto_"]::-webkit-scrollbar, -#gm-settings-inject[class^="auto_"]::-webkit-scrollbar { +#gm-settings-inject [class^="auto-"]::-webkit-scrollbar, +#gm-settings-inject[class^="auto-"]::-webkit-scrollbar { width: 12px !important; height: 12px !important; } diff --git a/modular/font/terminus.css b/modular/font/terminus.css index 4d7bed4..958b7d9 100644 --- a/modular/font/terminus.css +++ b/modular/font/terminus.css @@ -1,7 +1,6 @@ @font-face { font-family: "Unifont"; - src: - local("Unifont"), + src: local("Unifont"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) format("truetype"); font-weight: normal; @@ -10,8 +9,7 @@ @font-face { font-family: "Terminus (TTF)"; - src: - local("Terminus (TTF)"), + src: local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf) format("truetype"); font-weight: normal; @@ -19,8 +17,7 @@ } @font-face { font-family: "Terminus (TTF)"; - src: - local("Terminus (TTF)"), + src: local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold-4.47.0.ttf) format("truetype"); font-weight: bold; @@ -28,8 +25,7 @@ } @font-face { font-family: "Terminus (TTF)"; - src: - local("Terminus (TTF)"), + src: local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold%20Italic-4.47.0.ttf) format("truetype"); font-weight: bold; @@ -37,8 +33,7 @@ } @font-face { font-family: "Terminus (TTF)"; - src: - local("Terminus (TTF)"), + src: local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Italic-4.47.0.ttf) format("truetype"); font-weight: normal; @@ -60,27 +55,27 @@ --_font-titlebars: var(--font-primary) !important; } -[class*="menu_"] [class^="item_"], -[class^="containerDefault_"] - > [class^="iconVisibility_"] - > [class^="content_"] - [class^="name_"] { +[class*="menu-"] [class^="item-"], +[class^="containerDefault-"] + > [class^="iconVisibility-"] + > [class^="content-"] + [class^="name-"] { font-size: 16px; text-transform: none; font-weight: 500; } -[class^="containerDefault_"] - > [class^="iconVisibility_"] - > [class^="mainContent_"] - [class^="name_"], -[class^="membersGroup_"], -[class^="headerContent_"] > [class^="name_"] { +[class^="containerDefault-"] + > [class^="iconVisibility-"] + > [class^="mainContent-"] + [class^="name-"], +[class^="membersGroup-"], +[class^="headerContent-"] > [class^="name-"] { font-size: 16px; - text-transform: none !important; + text-transform: none; font-weight: 600; } -[class^="reaction_"] [class*="reactionCount_"] { +[class^="reaction-"] [class*="reactionCount-"] { font-size: 12px; } @@ -90,35 +85,35 @@ font-size: 12px !important; } -[class^="sidebar_"] - > [class^="container_"] - > [class^="container_"] - > [class^="header_"] - > [class^="name_"], -[class*="heading-md-medium_"], -[class*="heading-md-normal_"] { +[class^="sidebar-"] + > [class^="container-"] + > [class^="container-"] + > [class^="header-"] + > [class^="name-"], +[class*="heading-md-medium-"], +[class*="heading-md-normal-"] { font-size: 16px !important; } -[class*="edited_"], -[class*="botTag_"] [class*="botText_"], +[class*="edited-"], +[class*="botTag-"] [class*="botText-"], span[class="role-tag"], .antiDelete-deleted-suffix { font-size: 12px !important; } -[class^="latin12CompactTimeStamp_"], -[class^="latin24CompactTimeStamp_"], -[class^="asianCompactTimeStamp_"], -[class^="embedFooterText_"] { +[class^="latin12CompactTimeStamp-"], +[class^="latin24CompactTimeStamp-"], +[class^="asianCompactTimeStamp-"], +[class^="embedFooterText-"] { font-size: 0.75em !important; } -[class^="codeBlockText_"], -[class^="codeLine_"], -[class*="after_inlineCode_"], -[class*="before_inlineCode_"], -[class^="inlineCode_"] { +[class^="codeBlockText-"], +[class^="codeLine-"], +[class*="after_inlineCode-"], +[class*="before_inlineCode-"], +[class^="inlineCode-"] { font-size: 12px !important; } @@ -126,20 +121,20 @@ span[class="role-tag"], font-weight: 0; } -[class^="markdown_"] [class^="codeInline_"], +[class^="markdown-"] [class^="codeInline-"], code.inline, .hljs { font-size: 12px !important; } -[class^="markdown_"] code, -[class^="markdown_"] [class^="codeInline_"], +[class^="markdown-"] code, +[class^="markdown-"] [class^="codeInline-"], code.inline { line-height: 12px !important; } -[class^="markup_"] ol, -[class^="markup_"] ul { +[class^="markup-"] ol, +[class^="markup-"] ul { margin: 4px 0 0 24px !important; } diff --git a/modular/font/the_funny.css b/modular/font/the_funny.css index e661b80..8a70ba6 100644 --- a/modular/font/the_funny.css +++ b/modular/font/the_funny.css @@ -1,7 +1,6 @@ @font-face { font-family: "Pointfree"; - src: - local("Pointfree"), + src: local("Pointfree"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/pointfree.ttf) format("truetype"); font-weight: normal; @@ -10,8 +9,7 @@ @font-face { font-family: "Untyped"; - src: - local("Untyped"), + src: local("Untyped"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/untyped.ttf) format("truetype"); font-weight: normal; diff --git a/modular/font/the_funny_(alternate_monospace).css b/modular/font/the_funny_(alternate_monospace).css index 2f2ad9a..c2ef868 100644 --- a/modular/font/the_funny_(alternate_monospace).css +++ b/modular/font/the_funny_(alternate_monospace).css @@ -1,7 +1,6 @@ @font-face { font-family: "Untyped"; - src: - local("Untyped"), + src: local("Untyped"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/untyped.ttf) format("truetype"); font-weight: normal; @@ -10,8 +9,7 @@ @font-face { font-family: "Pointfree"; - src: - local("Pointfree"), + src: local("Pointfree"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/pointfree.ttf) format("truetype"); font-weight: normal; diff --git a/modular/font/unifont.css b/modular/font/unifont.css index 9c845b1..a0a857b 100644 --- a/modular/font/unifont.css +++ b/modular/font/unifont.css @@ -1,7 +1,6 @@ @font-face { font-family: "Unifont"; - src: - local("Unifont"), + src: local("Unifont"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) format("truetype"); font-weight: normal; @@ -10,8 +9,7 @@ @font-face { font-family: "Unifont"; - src: - local("Unifont"), + src: local("Unifont"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) format("truetype"); font-weight: normal; @@ -20,8 +18,7 @@ @font-face { font-family: "Terminus (TTF)"; - src: - local("Terminus (TTF)"), + src: local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf) format("truetype"); font-weight: normal; @@ -29,8 +26,7 @@ } @font-face { font-family: "Terminus (TTF)"; - src: - local("Terminus (TTF)"), + src: local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold-4.47.0.ttf) format("truetype"); font-weight: bold; @@ -38,8 +34,7 @@ } @font-face { font-family: "Terminus (TTF)"; - src: - local("Terminus (TTF)"), + src: local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Bold%20Italic-4.47.0.ttf) format("truetype"); font-weight: bold; @@ -47,8 +42,7 @@ } @font-face { font-family: "Terminus (TTF)"; - src: - local("Terminus (TTF)"), + src: local("Terminus (TTF)"), url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-Italic-4.47.0.ttf) format("truetype"); font-weight: normal; @@ -70,10 +64,10 @@ font-family: "Sazanami Gothic" !important; } -[class*="menu_"] [class^="item_"], -[class^="containerDefault_"] [class^="name_"], -[class^="membersGroup_"] { +[class*="menu-"] [class^="item-"], +[class^="containerDefault-"] [class^="name-"], +[class^="membersGroup-"] { font-size: 16px; - text-transform: none !important; + text-transform: none; font-weight: 500; } diff --git a/modular/help_button.css b/modular/help_button.css index 302570a..c4ba3de 100644 --- a/modular/help_button.css +++ b/modular/help_button.css @@ -1,4 +1,4 @@ a[href="https://support.discord.com"], -[class^="toolbar_"] > div:not([class]) > [class^="iconWrapper_"][aria-expanded] { +[class^="toolbar-"] > div:not([class]) > [class^="iconWrapper-"][aria-expanded] { display: none; } diff --git a/modular/hide_nowplaying.css b/modular/hide_nowplaying.css index f8c8ec7..50a9bbb 100644 --- a/modular/hide_nowplaying.css +++ b/modular/hide_nowplaying.css @@ -1,3 +1,3 @@ -[class^="nowPlayingColumn_"] { +[class^="nowPlayingColumn-"] { display: none; } diff --git a/modular/hide_tag.css b/modular/hide_tag.css index c9c4302..9f65dc2 100644 --- a/modular/hide_tag.css +++ b/modular/hide_tag.css @@ -1,14 +1,14 @@ -section[class^="panels_"] - > [class^="container_"]:last-child - [class*="nameTag_"] { +section[class^="panels-"] + > [class^="container-"]:last-child + [class*="nameTag-"] { display: none; } -section[class^="panels_"] > [class^="container_"]:last-child { +section[class^="panels-"] > [class^="container-"]:last-child { position: relative; } -section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { +section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { position: absolute; right: 0; padding-right: 8px; diff --git a/modular/left_reply.css b/modular/left_reply.css index 257e4d8..9431054 100644 --- a/modular/left_reply.css +++ b/modular/left_reply.css @@ -1,32 +1,32 @@ -[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"], -[class^="channelTextArea_"] - > [class^="attachedBars_"] - [class^="threadSuggestionBar_"] { +[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"], +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="threadSuggestionBar-"] { background: transparent; } -[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] { +[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"] { display: flex; flex-direction: row-reverse; align-self: flex-start; } -[class^="channelTextArea_"] - > [class^="attachedBars_"] - [class^="replyBar_"] - > [class^="actions_"] { +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="replyBar-"] + > [class^="actions-"] { flex-direction: row-reverse; } -[class^="channelTextArea_"] - > [class^="attachedBars_"] - [class^="replyBar_"] - [class*="replyLabel_"] { +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="replyBar-"] + [class*="replyLabel-"] { margin-left: 12px; } -[class^="channelTextArea_"] - > [class^="attachedBars_"] - [class^="replyBar_"] - > [class^="actions_"]::after { +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="replyBar-"] + > [class^="actions-"]::after { position: relative; content: ""; background-color: var(--background-modifier-accent); diff --git a/modular/nyantro.css b/modular/nyantro.css index 165a546..d92d38e 100644 --- a/modular/nyantro.css +++ b/modular/nyantro.css @@ -1,13 +1,13 @@ -[class^="progressBarContainer_"] { +[class^="progressBarContainer-"] { background: url("data:image/gif;base64,R0lGODlhMAAMAIAAAAxBd////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQECgAAACwAAAAAMAAMAAACJYSPqcvtD6MKstpLr24Z9A2GYvJ544mhXQmxoesElIyCcB3dRgEAIfkEBAoAAAAsAQACAC0ACgAAAiGEj6nLHG0enNQdWbPefOHYhSLydVhJoSYXPO04qrAmJwUAIfkEBAoAAAAsBQABACkACwAAAiGEj6nLwQ8jcC5ViW3evHt1GaE0flxpphn6BNTEqvI8dQUAIfkEBAoAAAAsAQABACoACwAAAiGEj6nLwQ+jcU5VidPNvPtvad0GfmSJeicUUECbxnK0RgUAIfkEBAoAAAAsAAAAACcADAAAAiCEj6mbwQ+ji5QGd6t+c/v2hZzYiVpXmuoKIikLm6hXAAAh+QQECgAAACwAAAAALQAMAAACI4SPqQvBD6NysloTXL480g4uX0iW1Wg21oem7ismLUy/LFwAACH5BAQKAAAALAkAAAAkAAwAAAIghI8Joe0Po0yBWTaz3g/z7UXhMX7kYmplmo0rC8cyUgAAIfkEBAoAAAAsBQAAACUACgAAAh2Ejwmh7Q+jbIFZNrPeEXPudU74IVa5kSiYqOtRAAAh+QQECgAAACwEAAAAIgAKAAACHISPELfpD6OcqTGKs4bWRp+B36YFi0mGaVmtWQEAIfkEBAoAAAAsAAAAACMACgAAAh2EjxC36Q+jnK8xirOW1kavgd+2BYtJhmnpiGtUAAAh+QQECgAAACwAAAAALgALAAACIYSPqcvtD+MKicqLn82c7e6BIhZQ5jem6oVKbfdqQLzKBQAh+QQECgAAACwCAAIALAAJAAACHQx+hsvtD2OStDplKc68r2CEm0eW5uSN6aqe1lgAADs="); } -[class^="progressBarContainer_"] [class^="progressBar_"] { +[class^="progressBarContainer-"] [class^="progressBar-"] { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAIAAAAs6UAAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUNCQzIyREQ0QjdEMTFFMzlEMDM4Qzc3MEY0NzdGMDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUNCQzIyREU0QjdEMTFFMzlEMDM4Qzc3MEY0NzdGMDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQ0JDMjJEQjRCN0QxMUUzOUQwMzhDNzcwRjQ3N0YwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQ0JDMjJEQzRCN0QxMUUzOUQwMzhDNzcwRjQ3N0YwOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PovDFgYAAAAmSURBVHjaYvjPwMAAxjMZmBhA9H8INv4P4TPM/A+m04zBNECAAQBCWQv9SUQpVgAAAABJRU5ErkJggg=="); background-size: contain; } -[class^="progressBarContainer_"] [class^="progressBar_"]:after { +[class^="progressBarContainer-"] [class^="progressBar-"]:after { content: ""; background: url("data:image/gif;base64,R0lGODlhIgAVAKIHAL3/9/+Zmf8zmf/MmZmZmf+Z/wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDMkJBNjY5RTU1NEJFMzExOUM4QUM2MDAwNDQzRERBQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCREIzOEIzMzRCN0IxMUUzODhEQjgwOTYzMTgyNTE0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCREIzOEIzMjRCN0IxMUUzODhEQjgwOTYzMTgyNTE0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM1QkE2NjlFNTU0QkUzMTE5QzhBQzYwMDA0NDNEREFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMyQkE2NjlFNTU0QkUzMTE5QzhBQzYwMDA0NDNEREFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkECQcABwAsAAAAACIAFQAAA6J4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93bqCA7f7TFaYoIFAMMwczB5EkTzJllEUttmIGoG5bfPBjDawD7CsJC67uWcv2CRov929C/q2ZpcBbYBmLGk6W1BRY4MUDnMvJEsBAXdlknk2fCeRk2iJliAijpBlEmigjR0plKSgpKWvEUheF4tUZqZID1RHjEe8PsDBBwkAIfkECQcABwAsAAAAACIAFQAAA6B4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93TqS40XiKSYgTLBgIBAMqE/zmQSaZEzns+jQ9pC/5dQJ0VIv5KMVWxqb36opxHrNvu9ptPfGbmsBbgSAeRdydCdjXWRPchQPh1hNAQF4TpM9NnwukpRyi5chGjqJEoSOIh0plaYsZBKvsCuNjY5ptElgDyFIuj6+vwcJACH5BAkHAAcALAAAAAAiABUAAAOfeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GKifWaddvNQAtszXYCxgR/Zy5jYTFeXmSDiIZGdQEBd06QSBQ5e4cEkE9nnZQaG2J4F4MSLx8rkqUSZBeurhlTUqsLsi60DpZxSWBJugcJACH5BAkHAAcALAAAAAAiABUAAAOgeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GuifWaddvNwMkZtmY7AWMEgGcKY2ExXl5khFMVc0Z1AQF3TpJShDl8iASST2efloV5JTyJFpgOch8dgW9KZxexshGNLqgLtbW0SXFwvaJfCQAh+QQJBwAHACwAAAAAIgAVAAADoXi63P7wmUmrnVGOzbvfRsYYXGGe6MmF4kEOaSGYMwq2LizHfDGwIlLPNKGZfi6gZmggEAy2iVPZEKZqzakq+1xUFFYe90lxTsHmim6HGpvf3eR7skYJ3PC5tyystc0AboFnVXQ9XFJTZIQOYUYFTQEBeWaSVF4bbCeRk1meBJYSL3WbaReMIxQfHXh6jaYXsbEQni6oaF21ERR7l0ksvA0JACH5BAkHAAcALAAAAAAiABUAAAOeeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMfFlA4hTITEMxkIBMOuADwmhzqeM6mashTCXKw2TVKQyKuTRSx2wegnNkyJ1ozpOFiMLqcEU8BZHx6NYW8nVlZefQ1tZgQBAXJIi1eHUTRwi0lhl48QL0sogxaGDhMlUo2gh14fHhcVmnOrrxNqrU9joX21Q0IUElm7DQkAIfkECQcABwAsAAAAACIAFQAAA6J4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93bqCA7f7TFaYoIFAMMwczB5EkTzJllEUttmIGoG5bfPBjDawD7CsJC67uWcv2CRov929C/q2ZpcBbYBmLGk6W1BRY4MUDnMvJEsBAXdlknk2fCeRk2iJliAijpBlEmigjR0plKSgpKWvEUheF4tUZqZID1RHjEe8PsDBBwkAIfkECQcABwAsAAAAACIAFQAAA6B4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93TqS40XiKSYgTLBgIBAMqE/zmQSaZEzns+jQ9pC/5dQJ0VIv5KMVWxqb36opxHrNvu9ptPfGbmsBbgSAeRdydCdjXWRPchQPh1hNAQF4TpM9NnwukpRyi5chGjqJEoSOIh0plaYsZBKvsCuNjY5ptElgDyFIuj6+vwcJACH5BAkHAAcALAAAAAAiABUAAAOfeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GKifWaddvNQAtszXYCxgR/Zy5jYTFeXmSDiIZGdQEBd06QSBQ5e4cEkE9nnZQaG2J4F4MSLx8rkqUSZBeurhlTUqsLsi60DpZxSWBJugcJACH5BAkHAAcALAAAAAAiABUAAAOgeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GuifWaddvNwMkZtmY7AWMEgGcKY2ExXl5khFMVc0Z1AQF3TpJShDl8iASST2efloV5JTyJFpgOch8dgW9KZxexshGNLqgLtbW0SXFwvaJfCQAh+QQJBwAHACwAAAAAIgAVAAADoXi63P7wmUmrnVGOzbvfRsYYXGGe6MmF4kEOaSGYMwq2LizHfDGwIlLPNKGZfi6gZmggEAy2iVPZEKZqzakq+1xUFFYe90lxTsHmim6HGpvf3eR7skYJ3PC5tyystc0AboFnVXQ9XFJTZIQOYUYFTQEBeWaSVF4bbCeRk1meBJYSL3WbaReMIxQfHXh6jaYXsbEQni6oaF21ERR7l0ksvA0JACH5BAkHAAcALAAAAAAiABUAAAOeeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMfFlA4hTITEMxkIBMOuADwmhzqeM6mashTCXKw2TVKQyKuTRSx2wegnNkyJ1ozpOFiMLqcEU8BZHx6NYW8nVlZefQ1tZgQBAXJIi1eHUTRwi0lhl48QL0sogxaGDhMlUo2gh14fHhcVmnOrrxNqrU9joX21Q0IUElm7DQkAOw=="); background-size: contain; @@ -18,6 +18,6 @@ top: -6px; } -[class^="progressBarContainer_"] [class^="tadaIcon_"] { +[class^="progressBarContainer-"] [class^="tadaIcon-"] { display: none; } diff --git a/modular/old_embeds.css b/modular/old_embeds.css index 72fd9b3..6270667 100644 --- a/modular/old_embeds.css +++ b/modular/old_embeds.css @@ -1,34 +1,34 @@ -[class*="embed_"] { +[class*="embed-"] { border-radius: 0 0 0 0; border-color: var(--interactive-active); } -[class*="embed_"] [class*="embedInner_"] { +[class*="embed-"] [class*="embedInner-"] { border-color: transparent; } -[class*="embed_"] [class*="embedAuthorIcon_"] { +[class*="embed-"] [class*="embedAuthorIcon-"] { border-radius: 0; } -[class*="embed_"] [class^="grid_"] { +[class*="embed-"] [class^="grid-"] { padding: 8px !important; } -[class*="embed_"] [class*="embedMargin_"] { +[class*="embed-"] [class*="embedMargin-"] { margin-top: 4px !important; } -[class*="embed_"] [class*="embedMedia_"] { +[class*="embed-"] [class*="embedMedia-"] { margin-top: 4px !important; } -[class*="embed_"] [class*="embedTitle_"] { +[class*="embed-"] [class*="embedTitle-"] { font-size: 16px !important; font-weight: 200 !important; } -[class*="embed_"] [class*="embedFieldName_"] { +[class*="embed-"] [class*="embedFieldName-"] { font-weight: 500 !important; } -[class*="embed_"] [class*="embedDescription_"], -[class*="embed_"] [class*="embedFieldName_"], -[class*="embed_"] [class*="embedFieldValue_"] { +[class*="embed-"] [class*="embedDescription-"], +[class*="embed-"] [class*="embedFieldName-"], +[class*="embed-"] [class*="embedFieldValue-"] { font-size: 16px !important; } -[class*="embed_"] [class*="embedFooterText_"] { +[class*="embed-"] [class*="embedFooterText-"] { font-size: 0.8em; } diff --git a/modular/old_roles.css b/modular/old_roles.css index 0774a7f..8bcfd9f 100644 --- a/modular/old_roles.css +++ b/modular/old_roles.css @@ -1,10 +1,10 @@ -[class^="role_"] { +[class^="role-"] { position: relative; border-radius: 5%; } -[class^="role_"] [class^="roleRemoveButton_"] [class^="roleCircle_"], -[class^="role_"] [class^="roleRemoveButton_"] [class^="roleFlowerStar_"] { +[class^="role-"] [class^="roleRemoveButton-"] [class^="roleCircle-"], +[class^="role-"] [class^="roleRemoveButton-"] [class^="roleFlowerStar-"] { margin: 0 !important; border-radius: 5% !important; width: 100% !important; @@ -16,7 +16,7 @@ opacity: 0.25; } -[class^="role_"] [class^="roleFlowerStar_"] > svg[class^="linkIcon_"] { +[class^="role-"] [class^="roleFlowerStar-"] > svg[class^="linkIcon-"] { z-index: 7; position: absolute; right: -2px; @@ -24,7 +24,7 @@ opacity: 5; } -[class^="role_"] [class^="roleRemoveButton_"] { +[class^="role-"] [class^="roleRemoveButton-"] { position: absolute; left: 0; width: 100%; @@ -33,16 +33,16 @@ overflow-y: visible; } -[class^="role_"] [class^="roleIcon_"] { +[class^="role-"] [class^="roleIcon-"] { z-index: 5; } -[class^="role_"] [class^="roleName_"] { +[class^="role-"] [class^="roleName-"] { z-index: 2; margin-right: 0; } -[class^="role_"] [class^="roleRemoveIcon_"] { +[class^="role-"] [class^="roleRemoveIcon-"] { display: block; position: absolute; top: 4px; @@ -50,7 +50,7 @@ z-index: 6; } -[class^="role_"] [class^="roleRemoveButton_"] [class*="roleDot_"] { +[class^="role-"] [class^="roleRemoveButton-"] [class*="roleDot-"] { width: 1em !important; height: 1em !important; margin-top: 0.25em; diff --git a/modular/overwrite_colors.css b/modular/overwrite_colors.css index 87bb77d..5d37364 100644 --- a/modular/overwrite_colors.css +++ b/modular/overwrite_colors.css @@ -218,10 +218,10 @@ html { --brand-experiment-95a: rgba(var(--accent-rgb), 0.95) !important; } -[class^="appMount_"], -[class^="bg_"], -[class^="layers_"] > [class^="layer_"], -[class^="app_"] { +[class^="appMount-"], +[class^="bg-"], +[class^="layers-"] > [class^="layer-"], +[class^="app-"] { background-color: transparent !important; } @@ -291,126 +291,126 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { fill: var(--status-streaming); } -[class^="containerDefault_"]:not(:hover):not([class*="selected_"]) - [class*="modeUnread_"] - svg[class^="icon_"], -[class^="containerDefault_"]:not(:hover):not([class*="selected_"]) - [class*="modeUnread_"] - [class^="name_"] { +[class^="containerDefault-"]:not(:hover):not([class*="selected-"]) + [class*="modeUnread-"] + svg[class^="icon-"], +[class^="containerDefault-"]:not(:hover):not([class*="selected-"]) + [class*="modeUnread-"] + [class^="name-"] { color: var(--accent, var(--brand-new-500)); } -[class^="containerDefault_"] [class*="modeUnread_"] [class^="unread_"] { +[class^="containerDefault-"] [class*="modeUnread-"] [class^="unread-"] { background-color: var(--accent, var(--brand-new-500)); } -[class^="containerDefault_"]:not(:hover) - [class*="modeSelected_"] - svg[class^="icon_"] { +[class^="containerDefault-"]:not(:hover) + [class*="modeSelected-"] + svg[class^="icon-"] { color: var(--interactive-active); } -[class^="containerDefault_"] - [class*="iconVisibility_"]:hover - svg[class^="icon_"], -[class^="containerDefault_"] [class*="iconVisibility_"]:hover [class^="name_"], -[class^="wrapper_"]:hover - > [class^="content_"] - > [class^="mainContent_"] - > [class^="iconContainer_"] - > svg[class^="icon_"] { +[class^="containerDefault-"] + [class*="iconVisibility-"]:hover + svg[class^="icon-"], +[class^="containerDefault-"] [class*="iconVisibility-"]:hover [class^="name-"], +[class^="wrapper-"]:hover + > [class^="content-"] + > [class^="mainContent-"] + > [class^="iconContainer-"] + > svg[class^="icon-"] { color: var(--interactive-hover) !important; } -[class*="menu_"] [class^="item_"]:active, -[class*="menu_"] [class^="item_"][class*="focused_"], -[class*="lookFilled_"][class*="colorBrand_"]:not([class*="buttonColor_"]), -[class*="lookFilled_"][class*="colorBrandNew_"]:not([class*="buttonColor_"]), -[style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch_"]), -[class^="slider_"] [class^="bar_"] [class^="barFill_"], -[class^="control_"] - [class^="container_"][style*="background-color: rgb(67, 181, 129);"] { +[class*="menu-"] [class^="item-"]:active, +[class*="menu-"] [class^="item-"][class*="focused-"], +[class*="lookFilled-"][class*="colorBrand-"]:not([class*="buttonColor-"]), +[class*="lookFilled-"][class*="colorBrandNew-"]:not([class*="buttonColor-"]), +[style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch-"]), +[class^="slider-"] [class^="bar-"] [class^="barFill-"], +[class^="control-"] + [class^="container-"][style*="background-color: rgb(67, 181, 129);"] { background-color: var(--accent, var(--brand-new-500)) !important; } [style*="border-color: rgb(114, 137, 218)"], -[class*="lookOutlined_"][class*="colorBrand_"] { +[class*="lookOutlined-"][class*="colorBrand-"] { border-color: var(--accent, var(--brand-new-500)) !important; } -[class*="lookOutlined_"][class*="colorBrand_"], -[class*="colorDefault_"]:not([class*="focused_"]) [class^="checkbox_"], -[class*="colorDefault_"]:not([class*="focused_"]) [class^="radioSelection_"], -[class*="colorDefault_"][class*="focused_"] [class^="check_"] { +[class*="lookOutlined-"][class*="colorBrand-"], +[class*="colorDefault-"]:not([class*="focused-"]) [class^="checkbox-"], +[class*="colorDefault-"]:not([class*="focused-"]) [class^="radioSelection-"], +[class*="colorDefault-"][class*="focused-"] [class^="check-"] { color: var(--accent, var(--brand-new-500)) !important; } -[class*="mentioned_"]:before { +[class*="mentioned-"]:before { background-color: var(--accent, var(--brand-new-500)); } -[class^="slider_"] [class^="bar_"], -[class^="control_"] - [class^="container_"][style*="background-color: rgb(114, 118, 125);"] { +[class^="slider-"] [class^="bar-"], +[class^="control-"] + [class^="container-"][style*="background-color: rgb(114, 118, 125);"] { background-color: var(--background-secondary) !important; } -.mention[class*="wrapper_"] { +.mention[class*="wrapper-"] { color: var(--accent, var(--brand-new-500)); background: rgba(var(--accent-rgb), 0.1); } -.mention[class*="wrapper_"]:hover { +.mention[class*="wrapper-"]:hover { color: #ffffff; background: var(--accent, var(--brand-new-500)); } -[class*="mentioned_"] .mention.interactive:hover { +[class*="mentioned-"] .mention.interactive:hover { color: var(--accent, var(--brand-new-500)) !important; } -[class^="mediaBarGrabber_"], -[class^="mediaBarProgress_"], -[class^="mediaBarProgress_"]:after, -[class^="mediaBarProgress_"]:before { +[class^="mediaBarGrabber-"], +[class^="mediaBarProgress-"], +[class^="mediaBarProgress-"]:after, +[class^="mediaBarProgress-"]:before { background-color: var(--accent, var(--brand-new-500)) !important; } -[class^="reaction_"] { +[class^="reaction-"] { background-color: var(--background-secondary); border: none; border-radius: 4px !important; } -[class^="reaction_"]:hover, -[class^="reaction_"][class*="reactionMe_"] { +[class^="reaction-"]:hover, +[class^="reaction-"][class*="reactionMe-"] { background-color: var(--highlight, var(--primary-dark-500)); } -[class^="reaction_"][class*="reactionMe_"] [class*="reactionCount_"], -[class^="reaction_"]:hover [class*="reactionCount_"] { +[class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"], +[class^="reaction-"]:hover [class*="reactionCount-"] { color: var(--white-500) !important; } -[class^="reaction_"] [class*="reactionCount_"] { +[class^="reaction-"] [class*="reactionCount-"] { color: var(--text, var(--text-normal)); } -[class*="progressBarHeader_"] > [class^="container_"]:not([class*="checked_"]), -[class^="control_"] > [class^="container_"]:not([class*="checked_"]) { +[class*="progressBarHeader-"] > [class^="container-"]:not([class*="checked-"]), +[class^="control-"] > [class^="container-"]:not([class*="checked-"]) { background-color: var(--highlight) !important; } -[class*="progressBarHeader_"] > [class^="container_"][class*="checked_"], -[class^="control_"] > [class^="container_"][class*="checked_"] { +[class*="progressBarHeader-"] > [class^="container-"][class*="checked-"], +[class^="control-"] > [class^="container-"][class*="checked-"] { background-color: var(--_color2) !important; } -[class^="radioBar_"][style*="--radio-bar-accent-color:hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { +[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { --radio-bar-accent-color: var(--_color2) !important; } -[class^="radioBar_"][style*="--radio-bar-accent-color:hsl(37, calc(var(--saturation-factor, 1) * 81.2%), 43.9%);"] { +[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(37, calc(var(--saturation-factor, 1) * 81.2%), 43.9%);"] { --radio-bar-accent-color: var(--_color3) !important; } -[class^="radioBar_"][style*="--radio-bar-accent-color:hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] { +[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] { --radio-bar-accent-color: var(--_color1) !important; } @@ -421,60 +421,60 @@ span[style*="background-color: hsl(359, calc(var(--saturation-factor, 1) * 82.6% background-color: var(--red, var(--status-red-500)) !important; } -[class^="updateIconForeground_"] { +[class^="updateIconForeground-"] { fill: var(--_color2); } -[class*="tierHeaderLocked_"], -[class*="tierHeaderUnlocked_"] { +[class*="tierHeaderLocked-"], +[class*="tierHeaderUnlocked-"] { background-color: var(--background-secondary) !important; } -[class*="tierAccomplished_"], -[class*="tierCurrent_"], -[class*="tierFirst_"] { +[class*="tierAccomplished-"], +[class*="tierCurrent-"], +[class*="tierFirst-"] { background: var(--_color13) !important; } -[class^="progressWithSubscriptions_"] > svg > g > rect[class^="background_"] { +[class^="progressWithSubscriptions-"] > svg > g > rect[class^="background-"] { color: var(--background-secondary); } -[class^="tierIcon_"], -[class^="unlockedIcon_"], -[class^="progressWithSubscriptions_"] > svg > g > rect[class^="foreground_"] { +[class^="tierIcon-"], +[class^="unlockedIcon-"], +[class^="progressWithSubscriptions-"] > svg > g > rect[class^="foreground-"] { color: var(--_color13) !important; } svg[fill="#FF73FA"] { fill: var(--_color13) !important; } -[class^="activeCircle_"] { +[class^="activeCircle-"] { background-color: var(--_color2) !important; } -[class*="allow_"][class*="selected_"] { +[class*="allow-"][class*="selected-"] { background-color: var(--status-positive) !important; } -[class^="item_"][style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { +[class^="item-"][style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { background-color: var(--_color2) !important; } -[class*="unreadBar_"][class*="mention_"], -[class^="numberBadge_"] { +[class*="unreadBar-"][class*="mention-"], +[class^="numberBadge-"] { background-color: var(--red, var(--status-red-500)) !important; } -[class*="bar_"][class*="mention_"] { +[class*="bar-"][class*="mention-"] { background-color: var(--red, var(--status-red-500)); } -a[class^="anchor_"]:not([aria-controls^="popout_"]) { +a[class^="anchor-"]:not([aria-controls^="popout_"]) { color: var(--text-link) !important; } -.theme-light [class*="button_"][class*="lookFilled_"][class*="colorPrimary_"] { +.theme-light [class*="button-"][class*="lookFilled-"][class*="colorPrimary-"] { color: var(--text) !important; } @@ -484,12 +484,12 @@ a[class^="anchor_"]:not([aria-controls^="popout_"]) { background: var(--deprecated-card-bg) !important; } -[class^="markdown_"] [class^="codeInline_"], +[class^="markdown-"] [class^="codeInline-"], code.inline, .hljs { color: var(--_colorFG) !important; } -[class^="markdown_"] code, +[class^="markdown-"] code, .hljs { background: var(--background-secondary) !important; } diff --git a/modular/pip.css b/modular/pip.css index 29162e1..aa7fbed 100644 --- a/modular/pip.css +++ b/modular/pip.css @@ -1,3 +1,3 @@ -[class*="pictureInPicture_"] { +[class*="pictureInPicture-"] { display: none; } diff --git a/modular/scheme/amoled.css b/modular/scheme/amoled.css index 9a19999..0d555b1 100644 --- a/modular/scheme/amoled.css +++ b/modular/scheme/amoled.css @@ -34,11 +34,11 @@ --highlight: #232323; --highlight-rgb: 35, 35, 35; - --status-online: #43b581 !important; - --status-idle: #faa61a !important; - --status-dnd: #f04747 !important; - --status-offline: #747f8d !important; - --status-streaming: #593695 !important; + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; --titlebar-color: #060606; } diff --git a/modular/scheme/amora.css b/modular/scheme/amora.css index 10ef839..0ce7987 100644 --- a/modular/scheme/amora.css +++ b/modular/scheme/amora.css @@ -34,13 +34,11 @@ --highlight: #634e75; --highlight-rgb: 99, 78, 117; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color5) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color4) !important; - - --status-warning-text: var(--primary) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color5); + --status-offline: var(--highlight); + --status-streaming: var(--_color4); } #splash { diff --git a/modular/scheme/amora_focus.css b/modular/scheme/amora_focus.css index 97218a4..ac362c9 100644 --- a/modular/scheme/amora_focus.css +++ b/modular/scheme/amora_focus.css @@ -36,13 +36,11 @@ --highlight: #5c5c5c; --highlight-rgb: 92, 92, 92; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color5) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color4) !important; - - --status-warning-text: var(--primary) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color5); + --status-offline: var(--highlight); + --status-streaming: var(--_color4); --titlebar-color: var(--accent); --wc-bright: #383838; diff --git a/modular/scheme/annie_dark.css b/modular/scheme/annie_dark.css index bca498b..355c2fe 100644 --- a/modular/scheme/annie_dark.css +++ b/modular/scheme/annie_dark.css @@ -34,11 +34,11 @@ --highlight: #747474; --highlight-rgb: 116, 116, 116; - --status-online: #43b581 !important; - --status-idle: #faa61a !important; - --status-dnd: #f04747 !important; - --status-offline: #747f8d !important; - --status-streaming: #593695 !important; + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; --titlebar-color: var(--tertiary); } diff --git a/modular/scheme/catppuccin_frappe.css b/modular/scheme/catppuccin_frappe.css index 75f327e..51c73ef 100644 --- a/modular/scheme/catppuccin_frappe.css +++ b/modular/scheme/catppuccin_frappe.css @@ -34,11 +34,11 @@ --highlight: #a5adce; --highlight-rgb: 165, 173, 206; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #414559; diff --git a/modular/scheme/catppuccin_macchiato.css b/modular/scheme/catppuccin_macchiato.css index 36c7cd2..1457c4e 100644 --- a/modular/scheme/catppuccin_macchiato.css +++ b/modular/scheme/catppuccin_macchiato.css @@ -34,11 +34,11 @@ --highlight: #a5adcb; --highlight-rgb: 165, 173, 203; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #363a4f; diff --git a/modular/scheme/catppuccin_mocha.css b/modular/scheme/catppuccin_mocha.css index 36937b3..d4c6b07 100644 --- a/modular/scheme/catppuccin_mocha.css +++ b/modular/scheme/catppuccin_mocha.css @@ -34,11 +34,11 @@ --highlight: #a6adc8; --highlight-rgb: 166, 173, 200; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #313244; diff --git a/modular/scheme/custom.css b/modular/scheme/custom.css index 2a0e610..b7a5944 100644 --- a/modular/scheme/custom.css +++ b/modular/scheme/custom.css @@ -35,11 +35,11 @@ --highlight: var(--xmc-custom-highlight); --highlight-rgb: var(--xmc-custom-highlight-rgb); - --status-online: var(--xmc-custom-status-online) !important; - --status-idle: var(--xmc-custom-status-idle) !important; - --status-dnd: var(--xmc-custom-status-dnd) !important; - --status-offline: var(--xmc-custom-status-offline) !important; - --status-streaming: var(--xmc-custom-status-streaming) !important; + --status-online: var(--xmc-custom-status-online); + --status-idle: var(--xmc-custom-status-idle); + --status-dnd: var(--xmc-custom-status-dnd); + --status-offline: var(--xmc-custom-status-offline); + --status-streaming: var(--xmc-custom-status-streaming); --interactive-hover: var(--xmc-custom-hover) !important; --interactive-active: var(--xmc-custom-active) !important; diff --git a/modular/scheme/everforest.css b/modular/scheme/everforest.css index 8494847..6f31a19 100644 --- a/modular/scheme/everforest.css +++ b/modular/scheme/everforest.css @@ -34,11 +34,11 @@ --highlight: var(--_color0); --highlight-rgb: 122, 132, 120; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --interactive-hover: var(--_color6) !important; --interactive-active: var(--_color15) !important; diff --git a/modular/scheme/gruvbox.css b/modular/scheme/gruvbox.css index 05e5c50..d21ab02 100644 --- a/modular/scheme/gruvbox.css +++ b/modular/scheme/gruvbox.css @@ -34,11 +34,11 @@ --highlight: #665c54; --highlight-rgb: 102, 92, 84; - --status-online: var(--_color10) !important; - --status-idle: var(--_color11) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color13) !important; + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color13); } #splash { diff --git a/modular/scheme/lovelace.css b/modular/scheme/lovelace.css index ce161f3..51d85e1 100644 --- a/modular/scheme/lovelace.css +++ b/modular/scheme/lovelace.css @@ -34,11 +34,11 @@ --highlight: var(--_color8); --highlight-rgb: 65, 68, 88; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color9) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color9); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --interactive-hover: var(--_color6) !important; --interactive-active: var(--_color7) !important; diff --git a/modular/scheme/nord.css b/modular/scheme/nord.css index c76a6ab..c3fdfd3 100644 --- a/modular/scheme/nord.css +++ b/modular/scheme/nord.css @@ -34,11 +34,11 @@ --highlight: #8fbcbb; --highlight-rgb: 143, 188, 187; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #4c566a; } diff --git a/modular/scheme/source_engine_-_tools.css b/modular/scheme/source_engine_-_tools.css index ee937ef..80e9e0c 100644 --- a/modular/scheme/source_engine_-_tools.css +++ b/modular/scheme/source_engine_-_tools.css @@ -34,11 +34,11 @@ --highlight: #b5b5b5; --highlight-rgb: 181, 181, 181; - --status-online: var(--_color10) !important; - --status-idle: var(--_color11) !important; - --status-dnd: var(--_color9) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color9); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --status-danger: var(--red) !important; --interactive-active: var(--white-500) !important; diff --git a/modular/scheme/stock.css b/modular/scheme/stock.css index cbaf862..8b00dcf 100644 --- a/modular/scheme/stock.css +++ b/modular/scheme/stock.css @@ -34,11 +34,11 @@ --highlight: #72767d; --highlight-rgb: 114, 118, 125; - --status-online: #43b581 !important; - --status-idle: #faa61a !important; - --status-dnd: #f04747 !important; - --status-offline: #747f8d !important; - --status-streaming: #593695 !important; + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; --titlebar-color: var(--highlight); } diff --git a/modular/scheme/tokyo_night.css b/modular/scheme/tokyo_night.css index f6425ae..0403b77 100644 --- a/modular/scheme/tokyo_night.css +++ b/modular/scheme/tokyo_night.css @@ -34,11 +34,11 @@ --highlight: #565f89; --highlight-rgb: 86, 95, 137; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --interactive-hover: var(--_color4) !important; --interactive-active: var(--_color15) !important; diff --git a/modular/scheme/valve.css b/modular/scheme/valve.css index a955cbd..f0c6c9a 100644 --- a/modular/scheme/valve.css +++ b/modular/scheme/valve.css @@ -34,11 +34,11 @@ --highlight: #889180; --highlight-rgb: 137, 145, 130; - --status-online: var(--_color10) !important; - --status-idle: var(--_color11) !important; - --status-dnd: var(--_color9) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color9); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --status-danger: var(--red) !important; --interactive-active: var(--white-500) !important; diff --git a/modular/scheme/xmc.css b/modular/scheme/xmc.css index 9841dd4..0224bfc 100644 --- a/modular/scheme/xmc.css +++ b/modular/scheme/xmc.css @@ -34,11 +34,11 @@ --highlight: #404040; --highlight-rgb: 64, 64, 64; - --status-online: var(--_color4) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color4); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: var(--accent); } diff --git a/modular/scheme_light/catppuccin_latte.css b/modular/scheme_light/catppuccin_latte.css index 2ef32e8..c92bb96 100644 --- a/modular/scheme_light/catppuccin_latte.css +++ b/modular/scheme_light/catppuccin_latte.css @@ -34,11 +34,11 @@ --highlight: #6c6f85; --highlight-rgb: 108, 111, 133; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #414559; diff --git a/modular/scheme_light/gruvbox.css b/modular/scheme_light/gruvbox.css index f1ef3fd..1a9709f 100644 --- a/modular/scheme_light/gruvbox.css +++ b/modular/scheme_light/gruvbox.css @@ -34,9 +34,9 @@ --highlight: #bdae93; --highlight-rgb: 189, 174, 147; - --status-online: var(--_color10) !important; - --status-idle: var(--_color11) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color13) !important; + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color13); } diff --git a/modular/scheme_light/nord.css b/modular/scheme_light/nord.css index 6812869..416d582 100644 --- a/modular/scheme_light/nord.css +++ b/modular/scheme_light/nord.css @@ -34,11 +34,11 @@ --highlight: #8fbcbb; --highlight-rgb: 143, 188, 187; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #4c566a; } diff --git a/modular/scheme_light/stock.css b/modular/scheme_light/stock.css index 16ccb1d..fec30ac 100644 --- a/modular/scheme_light/stock.css +++ b/modular/scheme_light/stock.css @@ -34,11 +34,11 @@ --highlight: #72767d; --highlight-rgb: 114, 118, 125; - --status-online: #43b581 !important; - --status-idle: #faa61a !important; - --status-dnd: #f04747 !important; - --status-offline: #747f8d !important; - --status-streaming: #593695 !important; + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; --titlebar-color: var(--highlight); diff --git a/modular/scheme_light/xmc.css b/modular/scheme_light/xmc.css index 421df19..82ad627 100644 --- a/modular/scheme_light/xmc.css +++ b/modular/scheme_light/xmc.css @@ -34,11 +34,11 @@ --highlight: #b0aca5; --highlight-rgb: 176, 172, 165; - --status-online: var(--_color4) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color4); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: var(--accent); --interactive-hover: #494949 !important; diff --git a/modular/square_avatars/off.css b/modular/square_avatars/off.css index b280ae6..f31f814 100644 --- a/modular/square_avatars/off.css +++ b/modular/square_avatars/off.css @@ -1,100 +1,100 @@ -[class*="avatar_"], -[class*="avatar_"] [class*="image_"], -[class*="callAvatar_"], -[class*="callAvatar_"] [class*="speaking_"], -[class*="avatarDefault_"], -[class*="avatarSpeaking_"], -[class*="avatar_"] [class*="inner_"], -[class*="callAvatarVoice_"], -[class*="callAvatarWrapper_"] [class*="speaking_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="header_"] - [class*="avatar_"] - [class*="large_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="header_"] - [class*="avatar_"] - [class*="wrapper_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="contents_"] - [class*="avatar_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="wrapper_"] - [class*="contents_"] - [class*="avatar_"], -[class^="messageGroupCozy_"] [class*="contents_"] [class*="avatar_"], -[class*="autocomplete_"] - [class*="autocompleteInner_"] - [class*="autocompleteRow_"] - [class*="content_"] - [class*="wrapper_"], -[class*="guildsWrapper_"] - [class*="guilds_"] - [class*="guild_"] - [class*="guildInner_"], -div[class^="listItem_"] foreignObject img, -div[class^="listItem_"] foreignObject a[class^="button_"], -div[class^="listItem_"] foreignObject [class^="childWrapper_"], -div[class^="listItem_"] foreignObject [class^="folder_"], -div[class^="listItem_"] div[class^="wrapperSimple_"], -[class^="circleIconButton_"], -[class^="avatarContainer_"], -[class^="executedCommandAvatar_"] { +[class*="avatar-"], +[class*="avatar-"] [class*="image-"], +[class*="callAvatar-"], +[class*="callAvatar-"] [class*="speaking-"], +[class*="avatarDefault-"], +[class*="avatarSpeaking-"], +[class*="avatar-"] [class*="inner-"], +[class*="callAvatarVoice-"], +[class*="callAvatarWrapper-"] [class*="speaking-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="large-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="wrapper-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="contents-"] + [class*="avatar-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="wrapper-"] + [class*="contents-"] + [class*="avatar-"], +[class^="messageGroupCozy-"] [class*="contents-"] [class*="avatar-"], +[class*="autocomplete-"] + [class*="autocompleteInner-"] + [class*="autocompleteRow-"] + [class*="content-"] + [class*="wrapper-"], +[class*="guildsWrapper-"] + [class*="guilds-"] + [class*="guild-"] + [class*="guildInner-"], +div[class^="listItem-"] foreignObject img, +div[class^="listItem-"] foreignObject a[class^="button-"], +div[class^="listItem-"] foreignObject [class^="childWrapper-"], +div[class^="listItem-"] foreignObject [class^="folder-"], +div[class^="listItem-"] div[class^="wrapperSimple-"], +[class^="circleIconButton-"], +[class^="avatarContainer-"], +[class^="executedCommandAvatar-"] { border-radius: 50% !important; } -div[class^="listItem_"] foreignObject img, -div[class^="listItem_"] foreignObject [class*="selected_"] > img, -div[class^="listItem_"] foreignObject [class^="childWrapper_"], -div[class^="listItem_"] +div[class^="listItem-"] foreignObject img, +div[class^="listItem-"] foreignObject [class*="selected-"] > img, +div[class^="listItem-"] foreignObject [class^="childWrapper-"], +div[class^="listItem-"] foreignObject - [class*="selected_"] - > [class^="childWrapper_"] { + [class*="selected-"] + > [class^="childWrapper-"] { transition: border-radius 0.35s ease; } -div[class^="listItem_"] foreignObject [class*="selected_"] > img, -div[class^="listItem_"] +div[class^="listItem-"] foreignObject [class*="selected-"] > img, +div[class^="listItem-"] foreignObject - [class*="selected_"] - > [class^="childWrapper_"] { + [class*="selected-"] + > [class^="childWrapper-"] { border-radius: 20% !important; } -[class^="folderIconWrapper_"] - > [class^="closedFolderIconWrapper_"] - > [class^="icon_"] { +[class^="folderIconWrapper-"] + > [class^="closedFolderIconWrapper-"] + > [class^="icon-"] { border-radius: 50% !important; } -[class*="avatarMasked_"], -[class*="maskProfile_"], -[class*="mask_"], -[class*="avatar_"] svg[class*="mask_"] > foreignObject, -[class*="avatarWrapper_"] svg[class*="mask_"] > foreignObject, -[class*="avatarHint_"] > foreignObject, -[class*="wrapper_"] svg[class*="mask_"] > foreignObject, -[class*="callAvatarWrapper_"] svg[class*="callAvatarMask_"] > foreignObject, -div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, -[class^="bannerSVGWrapper_"] > foreignObject, -[class^="avatarDecoration_"] > foreignObject { +[class*="avatarMasked-"], +[class*="maskProfile-"], +[class*="mask-"], +[class*="avatar-"] svg[class*="mask-"] > foreignObject, +[class*="avatarWrapper-"] svg[class*="mask-"] > foreignObject, +[class*="avatarHint-"] > foreignObject, +[class*="wrapper-"] svg[class*="mask-"] > foreignObject, +[class*="callAvatarWrapper-"] svg[class*="callAvatarMask-"] > foreignObject, +div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject, +[class^="bannerSVGWrapper-"] > foreignObject, +[class^="avatarDecoration-"] > foreignObject { mask: none !important; mask-image: none !important; -webkit-mask-image: none !important; } -[class*="avatarHint_"], -[class*="avatarNormal_"], -[class*="avatarWrapper_"] [class*="wrapper_"], -[class*="avatarWrapper_"] [class*="image_"], -[class*="replyAvatar_"] { +[class*="avatarHint-"], +[class*="avatarNormal-"], +[class*="avatarWrapper-"] [class*="wrapper-"], +[class*="avatarWrapper-"] [class*="image-"], +[class*="replyAvatar-"] { border: none; border-radius: 10% !important; } diff --git a/modular/square_avatars/on.css b/modular/square_avatars/on.css index f819874..7cc70c1 100644 --- a/modular/square_avatars/on.css +++ b/modular/square_avatars/on.css @@ -1,102 +1,102 @@ -[class*="avatar_"], -[class*="avatar_"] [class*="image_"], -[class*="callAvatar_"], -[class*="callAvatar_"] [class*="speaking_"], -[class*="avatarDefault_"], -[class*="avatarSpeaking_"], -[class*="avatar_"] [class*="inner_"], -[class*="callAvatarVoice_"], -[class*="callAvatarWrapper_"] [class*="speaking_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="header_"] - [class*="avatar_"] - [class*="large_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="header_"] - [class*="avatar_"] - [class*="wrapper_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="contents_"] - [class*="avatar_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="wrapper_"] - [class*="contents_"] - [class*="avatar_"], -[class^="messageGroupCozy_"] [class*="contents_"] [class*="avatar_"], -[class*="autocomplete_"] - [class*="autocompleteInner_"] - [class*="autocompleteRow_"] - [class*="content_"] - [class*="wrapper_"], -[class*="guildsWrapper_"] - [class*="guilds_"] - [class*="guild_"] - [class*="guildInner_"], -div[class^="listItem_"] foreignObject img, -div[class^="listItem_"] foreignObject a[class^="button_"], -div[class^="listItem_"] foreignObject [class^="childWrapper_"], -div[class^="listItem_"] foreignObject [class^="folder_"], -div[class^="listItem_"] div[class^="wrapperSimple_"], -[class^="circleIconButton_"], -[class^="folderIconWrapper_"], -[class^="avatarContainer_"], -[class^="executedCommandAvatar_"] { +[class*="avatar-"], +[class*="avatar-"] [class*="image-"], +[class*="callAvatar-"], +[class*="callAvatar-"] [class*="speaking-"], +[class*="avatarDefault-"], +[class*="avatarSpeaking-"], +[class*="avatar-"] [class*="inner-"], +[class*="callAvatarVoice-"], +[class*="callAvatarWrapper-"] [class*="speaking-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="large-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="wrapper-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="contents-"] + [class*="avatar-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="wrapper-"] + [class*="contents-"] + [class*="avatar-"], +[class^="messageGroupCozy-"] [class*="contents-"] [class*="avatar-"], +[class*="autocomplete-"] + [class*="autocompleteInner-"] + [class*="autocompleteRow-"] + [class*="content-"] + [class*="wrapper-"], +[class*="guildsWrapper-"] + [class*="guilds-"] + [class*="guild-"] + [class*="guildInner-"], +div[class^="listItem-"] foreignObject img, +div[class^="listItem-"] foreignObject a[class^="button-"], +div[class^="listItem-"] foreignObject [class^="childWrapper-"], +div[class^="listItem-"] foreignObject [class^="folder-"], +div[class^="listItem-"] div[class^="wrapperSimple-"], +[class^="circleIconButton-"], +[class^="folderIconWrapper-"], +[class^="avatarContainer-"], +[class^="executedCommandAvatar-"] { border-radius: 10% !important; } -[class^="folderIconWrapper_"] - > [class^="closedFolderIconWrapper_"] - > [class^="icon_"] { +[class^="folderIconWrapper-"] + > [class^="closedFolderIconWrapper-"] + > [class^="icon-"] { border-radius: 6px !important; } -[class*="avatarMasked_"], -[class*="maskProfile_"], -[class*="mask_"], -[class*="avatar_"] svg[class*="mask_"] > foreignObject, -[class*="avatarWrapper_"] svg[class*="mask_"] > foreignObject, -[class*="avatarHint_"] > foreignObject, -[class*="wrapper_"] svg[class*="mask_"] > foreignObject, -[class*="callAvatarWrapper_"] svg[class*="callAvatarMask_"] > foreignObject, -div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, -[class^="bannerSVGWrapper_"] > foreignObject, -[class^="avatarDecoration_"] > foreignObject { +[class*="avatarMasked-"], +[class*="maskProfile-"], +[class*="mask-"], +[class*="avatar-"] svg[class*="mask-"] > foreignObject, +[class*="avatarWrapper-"] svg[class*="mask-"] > foreignObject, +[class*="avatarHint-"] > foreignObject, +[class*="wrapper-"] svg[class*="mask-"] > foreignObject, +[class*="callAvatarWrapper-"] svg[class*="callAvatarMask-"] > foreignObject, +div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject, +[class^="bannerSVGWrapper-"] > foreignObject, +[class^="avatarDecoration-"] > foreignObject { mask: none !important; mask-image: none !important; -webkit-mask-image: none !important; } -[class*="avatarHint_"], -[class*="avatarNormal_"], -[class*="avatarWrapper_"] [class*="wrapper_"], -[class*="avatarWrapper_"] [class*="image_"], -[class*="replyAvatar_"] { +[class*="avatarHint-"], +[class*="avatarNormal-"], +[class*="avatarWrapper-"] [class*="wrapper-"], +[class*="avatarWrapper-"] [class*="image-"], +[class*="replyAvatar-"] { border: none; border-radius: 10% !important; } -[class^="userPopout_"] [class*="avatarWrapper_"] > [class^="avatarHint_"] { +[class^="userPopout-"] [class*="avatarWrapper-"] > [class^="avatarHint-"] { display: none; } -[class^="userPopout_"] - [class*="avatarWrapper_"] - > [class^="avatar_"] +[class^="userPopout-"] + [class*="avatarWrapper-"] + > [class^="avatar-"] > svg > foreignObject { x: 8px; } -[class^="userPopout_"] - [class*="avatarWrapper_"] - > [class^="avatar_"] +[class^="userPopout-"] + [class*="avatarWrapper-"] + > [class^="avatar-"] > svg > rect { x: 0; @@ -106,11 +106,11 @@ div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, mask: none !important; } -[class^="accountProfileCard_"] [class^="avatar_"] { +[class^="accountProfileCard-"] [class^="avatar-"] { border: 0; background-color: transparent; } -[class^="numberBadge_"] { +[class^="numberBadge-"] { border-radius: 4px !important; } diff --git a/modular/status_icons.css b/modular/status_icons.css index ce0ad4b..fbc65b2 100644 --- a/modular/status_icons.css +++ b/modular/status_icons.css @@ -1,145 +1,145 @@ -[class^="member_"] [class^="avatar_"] [class*="wrapper_"] > svg, -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] [class^="avatar-"] [class*="wrapper-"] > svg, +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"], -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] + > svg[class^="cursorDefault-"], +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"], -[class^="channel_"] [class^="avatar_"] [class*="wrapper_"] > svg, -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"], +[class^="channel-"] [class^="avatar-"] [class*="wrapper-"] > svg, +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"], -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] + > svg[class^="cursorDefault-"], +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"], -[class^="autocompleteRowIcon_"] > [class^="wrapper_"] > svg, -[class^="userInfo_"] [class^="avatar_"] > svg, -[class^="panels_"] [class*="avatar_"] > svg > svg, -[class^="modal_"] > [class^="inner_"] [class^="avatar_"] > svg, -[class^="focusLock_"][aria-modal="true"] - > [class^="root_"] - [class^="avatar_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"], +[class^="autocompleteRowIcon-"] > [class^="wrapper-"] > svg, +[class^="userInfo-"] [class^="avatar-"] > svg, +[class^="panels-"] [class*="avatar-"] > svg > svg, +[class^="modal-"] > [class^="inner-"] [class^="avatar-"] > svg, +[class^="focusLock-"][aria-modal="true"] + > [class^="root-"] + [class^="avatar-"] > svg, -[class^="userPopoutInner_"] - [class^="avatarHoverTarget_"] - > [class^="wrapper_"] +[class^="userPopoutInner-"] + [class^="avatarHoverTarget-"] + > [class^="wrapper-"] > svg { overflow: visible; contain: none !important; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect, -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect, -[class^="modal_"] - > [class^="inner_"] - [class^="avatar_"] +[class^="modal-"] + > [class^="inner-"] + [class^="avatar-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect { x: -18.5; y: -17; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle, -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle { cx: -20.1; r: 1.5; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(1), -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(1) { cy: -16; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(2), -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(2) { cy: -8; } -[class^="member_"] - [class^="avatar_"] - [class^="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class^="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(3), -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(3) { cy: 0; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect[fill^="var(--status-"], -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect[fill^="#"] { mask: none !important; x: -18.5; @@ -148,8 +148,8 @@ height: 32px; } -[class^="panels_"] - [class*="avatar_"] +[class^="panels-"] + [class*="avatar-"] > svg > rect[mask^="url(#svg-mask-status"] { mask: none !important; @@ -158,8 +158,8 @@ width: 4px; height: 32px; } -[class^="panels_"] [class*="avatar_"] > svg > svg > rect[fill^="var(--status-"], -[class^="panels_"] [class*="avatar_"] > svg > svg > rect[fill^="#"] { +[class^="panels-"] [class*="avatar-"] > svg > svg > rect[fill^="var(--status-"], +[class^="panels-"] [class*="avatar-"] > svg > svg > rect[fill^="#"] { mask: none !important; x: 17.5; y: -17; @@ -167,14 +167,14 @@ height: 32px; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg rect[mask^="url(#svg-mask-status-"], -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; @@ -184,8 +184,8 @@ y: 0; } -[class^="autocompleteRowIcon_"] - > [class^="wrapper_"] +[class^="autocompleteRowIcon-"] + > [class^="wrapper-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; @@ -195,8 +195,8 @@ y: 0; } -[class^="userInfo_"] - [class^="avatar_"] +[class^="userInfo-"] + [class^="avatar-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; @@ -206,9 +206,9 @@ y: 0; } -[class^="userProfileModalInner_"] - [class^="header_"] - [class*="avatar_"] +[class^="userProfileModalInner-"] + [class^="header-"] + [class*="avatar-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; @@ -218,36 +218,36 @@ y: 0; } -[class^="userPopoutInner_"] - [class^="avatarHoverTarget_"] - > [class^="wrapper_"] +[class^="userPopoutInner-"] + [class^="avatarHoverTarget-"] + > [class^="wrapper-"] > svg circle, -[class^="userPopoutInner_"] - [class^="avatarHoverTarget_"] - > [class^="wrapper_"] +[class^="userPopoutInner-"] + [class^="avatarHoverTarget-"] + > [class^="wrapper-"] > svg > rect[fill="black"], -[class^="userProfileModalInner_"] - [class^="header_"] - [class^="wrapper_"] +[class^="userProfileModalInner-"] + [class^="header-"] + [class^="wrapper-"] > svg circle, -[class^="userProfileModalInner_"] - [class^="header_"] - [class^="wrapper_"] +[class^="userProfileModalInner-"] + [class^="header-"] + [class^="wrapper-"] > svg > rect[fill="black"] { display: none; } -[class^="accountProfileCard_"] - [class*="avatar_"] +[class^="accountProfileCard-"] + [class*="avatar-"] > svg rect[mask^="url(#svg-mask-status-"], -[class^="userPopoutInner_"] - [class^="avatarHoverTarget_"] - > [class^="wrapper_"] +[class^="userPopoutInner-"] + [class^="avatarHoverTarget-"] + > [class^="wrapper-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; diff --git a/modular/stylings/windows_classic.css b/modular/stylings/windows_classic.css index d3b1dc0..e88c269 100644 --- a/modular/stylings/windows_classic.css +++ b/modular/stylings/windows_classic.css @@ -25,108 +25,111 @@ inset 2px 2px 0 0 var(--wc-bright, var(--highlight)); } -[class*="button_"][class*="lookFilled_"], -section[class^="panels_"] - [class^="container_"] - [class^="flex_"] - button[class^="button_"], -[class^="toolbar_"] [class*="iconWrapper_"] { +[class*="button-"][class*="lookFilled-"], +section[class^="panels-"] + [class^="container-"] + [class^="flex-"] + button[class^="button-"], +[class^="toolbar-"] [class*="iconWrapper-"] { border-radius: 0; box-shadow: var(--wc-outer-edge) !important; } -[class*="button_"][class*="lookFilled_"]:active, -section[class^="panels_"] - [class^="container_"] - [class^="flex_"] - button[class^="button_"]:active { +[class*="button-"][class*="lookFilled-"]:active, +section[class^="panels-"] + [class^="container-"] + [class^="flex-"] + button[class^="button-"]:active { box-shadow: var(--wc-inner-edge) !important; } -[class*="button_"][class*="lookFilled_"]:not([class*="color"]), -[class^="toolbar_"] [class*="iconWrapper_"] { +[class*="button-"][class*="lookFilled-"]:not([class*="color"]), +[class^="toolbar-"] [class*="iconWrapper-"] { background-color: var(--primary); } -[class^="chat_"] > [class^="content_"] [class^="membersWrap_"] { +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"] { padding: 2px; box-shadow: var(--wc-inner-edge); height: calc(100% - 4px); max-height: calc(100% - 4px); } -[class^="messagesWrapper_"], -[class*="guilds_"], -[class^="sidebar_"] > nav > [class^="scroller_"] { +[class^="messagesWrapper-"], +[class*="guilds-"], +[class^="sidebar-"] > nav > [class^="scroller-"] { padding: 2px; box-shadow: var(--wc-inner-edge); } -[class^="chat_"] > [class^="content_"] > [class^="container_"], -[class^="chat_"] > [class^="content_"] > [class^="chatContent_"], -[class^="standardSidebarView_"] > [class^="contentRegion_"] { +[class^="chat-"] > [class^="content-"] > [class^="container-"], +[class^="chat-"] > [class^="content-"] > [class^="chatContent-"], +[class^="standardSidebarView-"] > [class^="contentRegion-"] { margin-left: 2px; } -[class^="channelTextArea_"] > [class^="scrollableContainer_"], -[class^="chat_"] - [class^="toolbar_"] - > [class^="search_"] - > [class^="search_"] - > [class^="searchBar_"] { +[class^="channelTextArea-"] > [class^="scrollableContainer-"], +[class^="chat-"] + [class^="toolbar-"] + > [class^="search-"] + > [class^="search-"] + > [class^="searchBar-"] { box-shadow: var(--wc-inner-edge); border-radius: 0; } -[class^="chat_"] > [class^="content_"]:before { +[class^="chat-"] > [class^="content-"]:before { display: none !important; } -[class^="standardSidebarView_"] - > [class^="sidebarRegion_"] - > [class^="sidebarRegionScroller_"], -[class^="standardSidebarView_"] - > [class^="contentRegion_"] - [class^="contentTransitionWrap_"] { +[class^="standardSidebarView-"] + > [class^="sidebarRegion-"] + > [class^="sidebarRegionScroller-"], +[class^="standardSidebarView-"] + > [class^="contentRegion-"] + [class^="contentTransitionWrap-"] { padding: 2px; box-shadow: var(--wc-inner-edge); } -[class^="standardSidebarView_"] > [class^="contentRegion_"], -[class^="standardSidebarView_"] > [class^="sidebarRegion_"] { +[class^="standardSidebarView-"] > [class^="contentRegion-"], +[class^="standardSidebarView-"] > [class^="sidebarRegion-"] { margin-top: 2px; } -[class^="standardSidebarView_"] - > [class^="contentRegion_"] - [class^="contentTransitionWrap_"] { +[class^="standardSidebarView-"] + > [class^="contentRegion-"] + [class^="contentTransitionWrap-"] { height: calc(100% - 4px); } -div[class^="sidebar_"] { +div[class^="sidebar-"] { border-left: 2px solid var(--primary); } -[class*="guilds_"] [class^="guildSeparator_"] { +[class*="guilds-"] [class^="guildSeparator-"] { height: 0; border-bottom: 1px solid var(--wc-bright, var(--highlight)); border-top: 1px solid var(--secondary); border-radius: 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; @@ -140,114 +143,114 @@ 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; } -[class*="menu_"] { - border-radius: 0 !important; +[class*="menu-"] { + border-radius: 0; padding: 2px; - box-shadow: var(--wc-frame) !important; + box-shadow: var(--wc-frame); } -[class*="menu_"] > [class^="scroller_"] { +[class*="menu-"] > [class^="scroller-"] { padding: 1px 1px 4px 1px !important; margin-right: -4px; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"] { border-radius: 0 !important; margin: 1px 0; padding: 0 2px !important; } -[class*="menu_"] - > [class^="scroller_"] - [class^="customItem_"][id^="message-quickreact-"] - > [class^="button_"] { +[class*="menu-"] + > [class^="scroller-"] + [class^="customItem-"][id^="message-quickreact-"] + > [class^="button-"] { border-radius: 0 !important; box-shadow: var(--wc-outer-edge); } -[class*="menu_"] [class^="scroller_"] [class^="separator_"] { +[class*="menu-"] [class^="scroller-"] [class^="separator-"] { margin: 4px 1px; border-bottom: 1px solid var(--wc-bright, var(--highlight)); border-top: 1px solid var(--secondary); } -[class*="menu_"] > [class^="scroller_"] [class^="item_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"] { min-height: 16px !important; font-size: 12px; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"]:not( - :has(> [class^="iconContainer_"] > [class^="icon_"]) - ):not(:has(> [class^="iconContainerLeft_"])) { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"]:not( + :has(> [class^="iconContainer-"] > [class^="icon-"]) + ):not(:has(> [class^="iconContainerLeft-"])) { padding-inline-start: 20px !important; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"]:has(> [class^="iconContainer_"] > [class^="icon_"]) { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"]:has(> [class^="iconContainer-"] > [class^="icon-"]) { flex-direction: row-reverse; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"] - > [class^="iconContainer_"]:has(> [class^="icon_"]), -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"] - > [class^="iconContainerLeft_"] { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"] + > [class^="iconContainer-"]:has(> [class^="icon-"]), +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"] + > [class^="iconContainerLeft-"] { margin-left: 0; margin-right: 2px; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"] - > [class^="label_"] - > [class^="subtext_"] { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"] + > [class^="label-"] + > [class^="subtext-"] { line-height: 12px; margin-top: 0; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"] - > [class^="iconContainer_"], -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"] - > [class^="iconContainer_"] +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"] + > [class^="iconContainer-"], +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"] + > [class^="iconContainer-"] > svg { width: 16px; height: 16px; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"] - > [class^="hintContainer_"] { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"] + > [class^="hintContainer-"] { margin-right: 18px; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][aria-haspopup="true"] - > [class^="iconContainer_"] - > [class^="caret_"] { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][aria-haspopup="true"] + > [class^="iconContainer-"] + > [class^="caret-"] { display: none; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][aria-haspopup="true"] - > [class^="iconContainer_"]:before { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][aria-haspopup="true"] + > [class^="iconContainer-"]:before { content: ""; position: absolute; right: -2px; @@ -262,17 +265,17 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][role="menuitemcheckbox"] - > [class^="iconContainer_"] - > svg[class^="icon_"] { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][role="menuitemcheckbox"] + > [class^="iconContainer-"] + > svg[class^="icon-"] { display: none; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][role="menuitemcheckbox"][aria-checked="true"] - > [class^="iconContainer_"]:before { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][role="menuitemcheckbox"][aria-checked="true"] + > [class^="iconContainer-"]:before { content: ""; position: absolute; right: 0px; @@ -287,17 +290,17 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][role="menuitemradio"] - > [class^="iconContainer_"] - > svg[class^="icon_"] { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][role="menuitemradio"] + > [class^="iconContainer-"] + > svg[class^="icon-"] { display: none; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][role="menuitemradio"][aria-checked="true"] - > [class^="iconContainer_"]:before { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][role="menuitemradio"][aria-checked="true"] + > [class^="iconContainer-"]:before { content: ""; position: absolute; right: -1px; @@ -312,47 +315,47 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][aria-haspopup="true"]:hover - > [class^="iconContainer_"]:before, -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][role="menuitemcheckbox"][aria-checked="true"]:hover - > [class^="iconContainer_"]:before, -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][role="menuitemradio"][aria-checked="true"]:hover - > [class^="iconContainer_"]:before { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][aria-haspopup="true"]:hover + > [class^="iconContainer-"]:before, +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][role="menuitemcheckbox"][aria-checked="true"]:hover + > [class^="iconContainer-"]:before, +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][role="menuitemradio"][aria-checked="true"]:hover + > [class^="iconContainer-"]:before { background-color: white; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][aria-disabled="true"] - > [class^="label_"], -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"][aria-disabled="true"] - > [class^="label_"] - > [class^="subtext_"] { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][aria-disabled="true"] + > [class^="label-"], +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"][aria-disabled="true"] + > [class^="label-"] + > [class^="subtext-"] { color: var(--secondary); text-shadow: 1px 1px 0 var(--wc-bright, var(--highlight)); } -[class^="submenu_"] > [class^="scroller_"] > [class^="listHeight_"][a="a"] { +[class^="submenu-"] > [class^="scroller-"] > [class^="listHeight-"][a="a"] { height: unset !important; } -[class^="submenuPaddingContainer_"] { +[class^="submenuPaddingContainer-"] { padding: 0; margin: -4px; } -[class*="menu_"] - > [class^="scroller_"] - [class^="item_"] - > [class^="label_"] - > [class^="roleRow_"] - > [class^="roleCircle_"] { +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"] + > [class^="label-"] + > [class^="roleRow-"] + > [class^="roleCircle-"] { width: 12px; height: 12px; border-radius: 0; @@ -362,89 +365,87 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) margin-right: 2px; } -[class^="scroller_"]:not([class*="none_"]):not([class*="thin_"]):not( - :not(:hover)[class*="fade_"] +[class^="scroller-"]:not([class*="none-"]):not([class*="thin-"]):not( + :not(:hover)[class*="fade-"] )::-webkit-scrollbar, -[class*="scrollerBase_"]:not([class*="none_"]):not([class*="thin_"]):not( - :not(:hover)[class*="fade_"] +[class*="scrollerBase-"]:not([class*="none-"]):not([class*="thin-"]):not( + :not(:hover)[class*="fade-"] )::-webkit-scrollbar { min-width: 16px; width: 16px; } -[class^="scroller_"]:not([class*="thin_"])::-webkit-scrollbar-track, -[class*="scrollerBase_"]:not([class*="thin_"])::-webkit-scrollbar-track { +[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-track, +[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-track { background-color: var(--wc-bright, var(--highlight)); border: none; border-radius: 0; margin: 0; } -[class^="scroller_"]::-webkit-scrollbar-thumb, -[class*="scrollerBase_"]::-webkit-scrollbar-thumb, -[class^="scroller_"]:not( - [class*="thin_"] +[class^="scroller-"]::-webkit-scrollbar-thumb, +[class*="scrollerBase-"]::-webkit-scrollbar-thumb, +[class^="scroller-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button, -[class*="scrollerBase_"]:not( - [class*="thin_"] +[class*="scrollerBase-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button { - border-radius: 0 !important; - background: var(--primary) !important; + border-radius: 0; + background: var(--primary); box-shadow: var(--wc-frame); - border: none !important; + border: none; } -[class^="scroller_"][class*="fade_"]:not( - [class*="thin_"] +[class^="scroller-"][class*="fade-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button, -[class*="scrollerBase_"][class*="fade_"]:not( - [class*="thin_"] +[class*="scrollerBase-"][class*="fade-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button { visibility: hidden; } -[class^="scroller_"][class*="fade_"]:not( - [class*="thin_"] +[class^="scroller-"][class*="fade-"]:not( + [class*="thin-"] ):hover::-webkit-scrollbar-button:single-button, -[class*="scrollerBase_"][class*="fade_"]:not( - [class*="thin_"] +[class*="scrollerBase-"][class*="fade-"]:not( + [class*="thin-"] ):hover::-webkit-scrollbar-button:single-button { visibility: visible; } -[class^="scroller_"]::-webkit-scrollbar-button:single-button:active, -[class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:active { - box-shadow: - inset 1px 1px var(--secondary), - inset -1px -1px var(--secondary); +[class^="scroller-"]::-webkit-scrollbar-button:single-button:active, +[class*="scrollerBase-"]::-webkit-scrollbar-button:single-button:active { + box-shadow: inset 1px 1px var(--secondary), inset -1px -1px var(--secondary); } -[class^="scroller_"]:not( - [class*="thin_"] +[class^="scroller-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button:vertical:decrement, -[class*="scrollerBase_"]:not( - [class*="thin_"] +[class*="scrollerBase-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button:vertical:decrement { background-repeat: no-repeat !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4NCgk8cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSI3IiB5PSI4IiB4PSIzIiBmaWxsPSJtZW51dGV4dCIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjUiIHg9IjQiIHk9IjciIGZpbGw9Im1lbnV0ZXh0Ii8+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iMyIgeT0iNiIgeD0iNSIgZmlsbD0ibWVudXRleHQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB5PSI1IiB4PSI2IiBmaWxsPSJtZW51dGV4dCIvPg0KCQ0KCQ0KPC9zdmc+") !important; background-position: center center !important; } -[class^="scroller_"]:not( - [class*="thin_"] +[class^="scroller-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button:vertical:increment, -[class*="scrollerBase_"]:not( - [class*="thin_"] +[class*="scrollerBase-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button:vertical:increment { background-repeat: no-repeat !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTUiIHdpZHRoPSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4NCgk8cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSI3IiB4PSIzIiB5PSI1IiBmaWxsPSJtZW51dGV4dCIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjUiIHk9IjYiIHg9IjQiIGZpbGw9Im1lbnV0ZXh0Ii8+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iMyIgeD0iNSIgeT0iNyIgZmlsbD0ibWVudXRleHQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4PSI2IiB5PSI4IiBmaWxsPSJtZW51dGV4dCIvPg0KCQ0KCQ0KPC9zdmc+") !important; background-position: center center !important; } -[class^="scroller_"]::-webkit-scrollbar-button:single-button, -[class*="scrollerBase_"]::-webkit-scrollbar-button:single-button { +[class^="scroller-"]::-webkit-scrollbar-button:single-button, +[class*="scrollerBase-"]::-webkit-scrollbar-button:single-button { } -[class^="scroller_"]:not( - [class*="thin_"] +[class^="scroller-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button:vertical:decrement, -[class*="scrollerBase_"]:not( - [class*="thin_"] +[class*="scrollerBase-"]:not( + [class*="thin-"] )::-webkit-scrollbar-button:single-button:vertical:decrement { border-width: 0 8px 8px 8px; border-color: transparent transparent var(--text) transparent; @@ -452,332 +453,48 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) .postnet-expanded-category, .postnet-repo-wrapper, -[class^="inner_"]:has(> input), -[class^="inputWrapper_"] > [class*="input_"], -[class^="colorSwatch_"] > [class^="swatch_"][aria-expanded="true"] { +[class^="inner-"]:has(> input), +[class^="inputWrapper-"] > [class*="input-"], +[class^="colorSwatch-"] > [class^="swatch-"][aria-expanded="true"] { border: none !important; border-radius: 0 !important; box-shadow: var(--wc-inner-edge); } -[class^="colorSwatch_"] > [class^="swatch_"] { +[class^="colorSwatch-"] > [class^="swatch-"] { border: none !important; border-radius: 0 !important; box-shadow: var(--wc-outer-edge); } -[class^="inputWrapper_"] > [class*="input_"] { +[class^="inputWrapper-"] > [class*="input-"] { padding: 2px 2px 2px 4px; height: 22px; } -[class^="select_"][class*="lookFilled_"] { +[class^="select-"][class*="lookFilled-"] { border: none !important; border-radius: 0 !important; box-shadow: var(--wc-inner-edge); padding: 2px 2px 2px 4px; } -[class^="select_"][class*="lookFilled_"] > [class^="icons_"] { +[class^="select-"][class*="lookFilled-"] > [class^="icons-"] { margin: 2px; } -[class^="select_"][class*="lookFilled_"] > [class^="icons_"] > svg { +[class^="select-"][class*="lookFilled-"] > [class^="icons-"] > svg { background: var(--primary); box-shadow: var(--wc-outer-edge); width: 16px; height: 16px; } -[class^="select_"][class*="lookFilled_"][class*="open_"] - > [class^="icons_"] +[class^="select-"][class*="lookFilled-"][class*="open-"] + > [class^="icons-"] > svg { box-shadow: var(--wc-inner-edge); } -[class^="popout_"][role="listbox"] > [class^="option_"] { +[class^="popout-"][role="listbox"] > [class^="option-"] { padding: 2px 2px 2px 4px; margin: 2px 0; } -[class^="popout_"][role="listbox"] > [class^="option_"]:hover { +[class^="popout-"][role="listbox"] > [class^="option-"]:hover { background-color: var(--accent); } - -[class^="userPopoutOuter_"] { - padding: 2px !important; - background: var(--primary) !important; - border-radius: 0 !important; - box-shadow: var(--wc-outer-edge); -} -[class^="userPopoutOuter_"] > [class^="userPopoutInner_"], -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class^="userPopoutOverlayBackground_"] { - background: transparent; -} -[class^="userPopoutOuter_"] > [class^="userPopoutInner_"]:before { - display: none; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class*="avatarWrapper_"] { - top: 26px; - left: 8px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class*="avatarWrapper_"] - > [class^="avatarHoverTarget_"] - > [class^="wrapper_"] { - width: 56px !important; - height: 56px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class*="avatarWrapper_"] - [class*="avatarHint_"] { - width: 48px !important; - height: 48px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class*="avatarWrapper_"] - > [class^="avatarHoverTarget_"] - > [class^="wrapper_"] - > svg { - width: 55px !important; - height: 55px !important; -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"]:after { - position: absolute; - top: 2px; - left: 2px; - content: ""; - width: calc(100% - 4px); - height: 18px; - background: linear-gradient( - to right, - var(--profile-gradient-primary-color), - var(--profile-gradient-secondary-color) - ); -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - [class^="banner_"] { - height: 18px !important; -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - [class^="banner_"] { - margin-top: 19px; - border-radius: 0; -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - [class^="banner_"]:after { - content: ""; - background: linear-gradient(to bottom, transparent 32px, var(--primary) 64px); - width: 340px; - height: 120px; - position: absolute; - top: 19px; - left: 0; -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - [class^="banner_"] { - display: none; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class^="userPopoutOverlayBackground_"] { - margin: 0 !important; - overflow: visible; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - > [class^="userPopoutOverlayBackground_"] { - margin-top: -72px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - > [class^="userPopoutOverlayBackground_"] { - margin-top: -48px !important; -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - > [class^="userPopoutOverlayBackground_"] { - margin-top: -78px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - [class*="usernameSection_"] { - padding: 0 !important; - position: absolute; - top: -60px; - left: 64px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - [class*="usernameSection_"] { - padding: 0 !important; - position: absolute; - top: -56px; - left: 64px; -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] { - padding: 0 !important; - position: absolute; - top: -54px; - left: 64px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - > div { - display: flex; - flex-direction: row !important; - align-items: center; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - > div - > [class^="userText_"] - > h1 { - font-size: 16px !important; - line-height: 16px !important; - text-shadow: 1px 1px 0 var(--primary); -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div - > [class*="userTag_"] { - line-height: 16px; - width: max-content; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div - > [class*="userTag_"] - > span { - text-shadow: 1px 1px 0 var(--primary); - font-size: 12px; - padding-left: 2px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div { - position: absolute; - top: -26px; - left: -62px; - z-index: 10; - flex-direction: row-reverse !important; -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div { - position: absolute; - top: -26px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div { - position: absolute; - top: -24px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div - .platform-icons-wrapper { - margin-left: 0 !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - > div - > [class*="pronouns_"] { - font-size: 12px; - line-height: 12px; - padding-top: 0; - margin-left: 4px; - opacity: 0.75; - text-shadow: 1px 1px 0 var(--primary); -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - [class*="customStatusSection_"] { - padding: 0 !important; - position: absolute; - top: -38px; - left: 64px; -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - [class*="customStatusSection_"] { - padding: 0 !important; - position: absolute; - top: -30px; - left: 64px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - [class*="customStatusSection_"] { - padding: 0 !important; - position: absolute; - top: -32px; - left: 64px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="customStatusSection_"] - > [class^="customStatus_"] { - font-size: 12px; - line-height: 12px; - text-shadow: 1px 1px 0 var(--primary); - display: flex; - flex-direction: row !important; - align-items: center; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="customStatusSection_"] - > [class^="customStatus_"] - > [class*="customStatusEmoji_"] { - width: 16px; - height: 16px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="customStatusSection_"] - > [class^="customStatus_"] - > [class^="customStatusText_"] { - max-height: 24px; - overflow: hidden; - text-overflow: ellipsis; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class^="section_"]:has(> .mutual-guilds) { - padding-top: 0; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class^="profileBadges_"] { - visibility: hidden; - height: 30px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class^="bannerSVGWrapper_"][viewbox$=" 60"] { - margin-bottom: 60px; -} diff --git a/modular/stylings/xmc.css b/modular/stylings/xmc.css index 7cb522e..4a31a2b 100644 --- a/modular/stylings/xmc.css +++ b/modular/stylings/xmc.css @@ -56,70 +56,70 @@ inset 0 0 0 4px var(--secondary, var(--background-secondary)); } -[class*="button_"][class*="lookFilled_"], -section[class^="panels_"] - [class^="container_"] - [class^="flex_"] - button[class^="button_"], -[class^="toolbar_"] [class*="iconWrapper_"] { +[class*="button-"][class*="lookFilled-"], +section[class^="panels-"] + [class^="container-"] + [class^="flex-"] + button[class^="button-"], +[class^="toolbar-"] [class*="iconWrapper-"] { border-radius: 0; color: var(--text) !important; background: var(--button-bg) !important; box-shadow: var(--button-shadow) !important; } -[class^="containerDefault_"][class*="selected_"] - [class^="iconVisibility_"] - > [class^="content_"], -[class^="containerDefault_"] - [class^="iconVisibility_"][class*="modeSelected_"] - > [class^="content_"], -nav[class^="sidebar_"] div[class^="item_"][class*="selected_"], -[class^="member_"][aria-expanded="true"] > [class^="layout_"], -[class^="channel_"] [class^="interactive_"][class*="selected_"] { +[class^="containerDefault-"][class*="selected-"] + [class^="iconVisibility-"] + > [class^="content-"], +[class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"], +nav[class^="sidebar-"] div[class^="item-"][class*="selected-"], +[class^="member-"][aria-expanded="true"] > [class^="layout-"], +[class^="channel-"] [class^="interactive-"][class*="selected-"] { border-radius: 0; background: var(--button-bg) !important; box-shadow: var(--button-shadow) !important; } -[class^="containerDefault_"] - [class^="iconVisibility_"]:hover - [class^="content_"], -nav[class^="sidebar_"] div[class^="item_"]:not([class*="selected_"]):hover, -[class^="member_"]:not([aria-expanded="true"]):hover > [class^="layout_"], -[class^="channel_"] [class^="interactive_"]:not([class*="selected_"]):hover { +[class^="containerDefault-"] + [class^="iconVisibility-"]:hover + [class^="content-"], +nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, +[class^="member-"]:not([aria-expanded="true"]):hover > [class^="layout-"], +[class^="channel-"] [class^="interactive-"]:not([class*="selected-"]):hover { border-radius: 0; background: var(--hover-bg) !important; box-shadow: var(--hover-shadow) !important; } -[class^="scroller_"]::-webkit-scrollbar-thumb, -[class*="scrollerBase_"]::-webkit-scrollbar-thumb { +[class^="scroller-"]::-webkit-scrollbar-thumb, +[class*="scrollerBase-"]::-webkit-scrollbar-thumb { border-radius: 0; background: transparent; box-shadow: var(--scrollbar-shadow); } -[class^="channelTextArea_"] > [class^="scrollableContainer_"] { +[class^="channelTextArea-"] > [class^="scrollableContainer-"] { border: 1px solid var(--background-tertiary); border-radius: 0; } -[class^="toolbar_"] [class*="iconWrapper_"] { +[class^="toolbar-"] [class*="iconWrapper-"] { margin: 0; width: 32px; height: 32px; } -[class^="toolbar_"] [class*="iconWrapper_"] > svg { +[class^="toolbar-"] [class*="iconWrapper-"] > svg { margin: 4px; } -[class^="toolbar_"] > [class^="search_"] { +[class^="toolbar-"] > [class^="search-"] { margin: 0; } -[class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] { +[class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] { background-color: var(--background-primary); border: 1px solid var(--background-tertiary); border-radius: 0; @@ -127,22 +127,22 @@ nav[class^="sidebar_"] div[class^="item_"]:not([class*="selected_"]):hover, justify-content: center; } -[class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] +[class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] > .DraftEditor-root, -[class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"] { +[class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"] { height: 24px; margin-top: 2px; } -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="tabBar_"] - > [class^="tab_"] { +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="tabBar-"] + > [class^="tab-"] { margin: 0; border-radius: 0; background: var(--button-bg) !important; @@ -151,26 +151,26 @@ nav[class^="sidebar_"] div[class^="item_"]:not([class*="selected_"]):hover, font-size: 12px !important; } -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="tabBar_"] - > [class^="tab_"]:hover, -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="tabBar_"] - > [class^="tab_"][class*="active_"] { +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="tabBar-"] + > [class^="tab-"]:hover, +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="tabBar-"] + > [class^="tab-"][class*="active-"] { background: var(--hover-bg) !important; box-shadow: var(--hover-shadow) !important; } -[class^="reaction_"] { +[class^="reaction-"] { background-color: var(--button-bg); box-shadow: var(--button-shadow); border-radius: 0; } -[class^="reaction_"]:hover, -[class^="reaction_"][class*="reactionMe_"] { +[class^="reaction-"]:hover, +[class^="reaction-"][class*="reactionMe-"] { background-color: var(--hover-bg); box-shadow: var(--hover-shadow); } diff --git a/modular/textarea/fullwidth.css b/modular/textarea/fullwidth.css index 63d4d45..28d736c 100644 --- a/modular/textarea/fullwidth.css +++ b/modular/textarea/fullwidth.css @@ -1,107 +1,107 @@ -[class*="chat_"] [class*="chatContent_"] form { +[class*="chat-"] [class*="chatContent-"] form { position: relative; margin: 0; } -[class*="chat_"] form [class*="typing_"] { +[class*="chat-"] form [class*="typing-"] { position: absolute; top: -2px; left: 10px; } -[class*="channelTextArea_"] { +[class*="channelTextArea-"] { margin-bottom: 10px !important; margin-top: 24px !important; padding: 0 !important; } -[class*="channelTextArea_"] [class*="inner_"] { +[class*="channelTextArea-"] [class*="inner-"] { border-radius: 6px; } -[class*="sansAttachButton_"] { +[class*="sansAttachButton-"] { padding-left: 10px !important; } .typing .ellipsis, -[class*="typing_"] span[class*="ellipsis_"] { +[class*="typing-"] span[class*="ellipsis-"] { display: none; } -form [class*="typing_"] { +form [class*="typing-"] { background-color: transparent !important; } -[class^="scrollerSpacer_"] { +[class^="scrollerSpacer-"] { height: 4px !important; } -[class^="chatContent_"] > form:before { +[class^="chatContent-"] > form:before { display: none !important; } -[class^="chatContent_"] > form { +[class^="chatContent-"] > form { padding: 0 !important; bottom: 0; } -[class^="chatContent_"] > form [class^="channelTextArea"] { +[class^="chatContent-"] > form [class^="channelTextArea"] { margin-bottom: 0 !important; } -[class^="chatContent_"] +[class^="chatContent-"] > form [class^="channelTextArea"] - > [class^="scrollableContainer_"] { + > [class^="scrollableContainer-"] { border-radius: 0 !important; border: 0 !important; } -[class^="chatContent_"] +[class^="chatContent-"] > form [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"], -[class^="chatContent_"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"], +[class^="chatContent-"] > form [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"], -[class^="chatContent_"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"], +[class^="chatContent-"] > form [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"], -[class^="chatContent_"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"], +[class^="chatContent-"] > form [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"] - > [class^="attachButton_"] { + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] + > [class^="attachButton-"] { min-height: 53px; } -[class^="chatContent_"] +[class^="chatContent-"] > form [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] > div - > [class*="fontSize16Padding_"] { + > [class*="fontSize16Padding-"] { padding-top: 15px !important; padding-bottom: 15px !important; } -[class^="chatContent_"] +[class^="chatContent-"] > form [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - [class*="emojiButton_"] { + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + [class*="emojiButton-"] { max-height: unset; } -[class^="messagesWrapper_"] { +[class^="messagesWrapper-"] { margin-bottom: 8px; } diff --git a/modular/textarea/mobile.css b/modular/textarea/mobile.css index 651aa88..1440e38 100644 --- a/modular/textarea/mobile.css +++ b/modular/textarea/mobile.css @@ -1,258 +1,258 @@ -[class*="chat_"] [class*="chatContent_"] form { +[class*="chat-"] [class*="chatContent-"] form { position: relative; margin: 0; } -[class*="chat_"] form [class*="typing_"] { +[class*="chat-"] form [class*="typing-"] { position: absolute; top: -2px; left: 10px; } -[class*="channelTextArea_"] { +[class*="channelTextArea-"] { margin-bottom: 10px !important; margin-top: 24px !important; padding: 0 !important; } -[class*="channelTextArea_"] [class*="inner_"] { +[class*="channelTextArea-"] [class*="inner-"] { border-radius: 6px; } -[class*="sansAttachButton_"] { +[class*="sansAttachButton-"] { padding-left: 10px !important; } .typing .ellipsis, -[class*="typing_"] span[class*="ellipsis_"] { +[class*="typing-"] span[class*="ellipsis-"] { display: none; } -form [class*="typing_"] { +form [class*="typing-"] { background-color: transparent !important; } -[class^="scrollerSpacer_"] { +[class^="scrollerSpacer-"] { height: 4px !important; } -[class^="chatContent_"] > form:before { +[class^="chatContent-"] > form:before { display: none !important; } -[class^="channelTextArea_"], -[class^="channelTextArea_"] > [class^="scrollableContainer_"] { +[class^="channelTextArea-"], +[class^="channelTextArea-"] > [class^="scrollableContainer-"] { background-color: transparent !important; } -[class^="channelTextArea_"] > [class^="scrollableContainer_"] { +[class^="channelTextArea-"] > [class^="scrollableContainer-"] { overflow: hidden !important; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] { padding-left: 0 !important; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] { margin-right: 10px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"] - > [class^="attachButton_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] + > [class^="attachButton-"] { margin-left: 0 !important; padding: 10px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] { margin-right: 10px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] > div { padding-left: 10px; margin-left: 4px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] > * { width: 44px; margin-right: 10px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="buttonContainer-"] > button, -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] > .expression-picker-chat-input-button > * { width: 44px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"], -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"], -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"], +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"], +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] > * { background-color: var(--background-secondary); border-radius: 22px 22px 22px 22px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] { margin-left: 0; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"]:before { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"]:before { display: none; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] > button { width: 44px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] > button - > [class^="contents_"] { + > [class^="contents-"] { margin-left: 4px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] > button - > [class^="contents_"] - > [class*="activeButtonChild_"] { + > [class^="contents-"] + > [class*="activeButtonChild-"] { color: var(--interactive-active); } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] > button:not([disabled]) { background-color: var(--brand-experiment); border-radius: 22px 22px 22px 22px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] > div:not([class]) { background-color: var(--background-secondary); } -[class^="channelTextArea_"] > [class^="attachedBars_"] { +[class^="channelTextArea-"] > [class^="attachedBars-"] { background: var(--background-primary) !important; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] { max-height: 128px; overflow-y: scroll; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar { width: 16px; height: 16px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar-corner { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-corner { background-color: transparent; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar-thumb { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-auto-thumb); min-height: 40px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar-thumb, -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar-track { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-thumb, +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-track { border: 4px solid transparent; background-clip: padding-box; border-radius: 8px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] { max-height: 44px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] { align-items: center; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] > div - > [class^="placeholder_"] { + > [class^="placeholder-"] { left: 14px; } diff --git a/modular/textarea/typing_above.css b/modular/textarea/typing_above.css index 44b9ef3..f018a9b 100644 --- a/modular/textarea/typing_above.css +++ b/modular/textarea/typing_above.css @@ -1,41 +1,41 @@ -[class*="chat_"] [class*="chatContent_"] form { +[class*="chat-"] [class*="chatContent-"] form { position: relative; margin: 0; } -[class*="chat_"] form [class*="typing_"] { +[class*="chat-"] form [class*="typing-"] { position: absolute; top: -2px; left: 10px; } -[class*="channelTextArea_"] { +[class*="channelTextArea-"] { margin-bottom: 10px !important; margin-top: 24px !important; padding: 0 !important; } -[class*="channelTextArea_"] [class*="inner_"] { +[class*="channelTextArea-"] [class*="inner-"] { border-radius: 6px; } -[class*="sansAttachButton_"] { +[class*="sansAttachButton-"] { padding-left: 10px !important; } .typing .ellipsis, -[class*="typing_"] span[class*="ellipsis_"] { +[class*="typing-"] span[class*="ellipsis-"] { display: none; } -form [class*="typing_"] { +form [class*="typing-"] { background-color: transparent !important; } -[class^="scrollerSpacer_"] { +[class^="scrollerSpacer-"] { height: 8px !important; } -[class^="chatContent_"] > form:before { +[class^="chatContent-"] > form:before { display: none !important; } diff --git a/modular/titlebars/old_discord.css b/modular/titlebars/old_discord.css index d63ade0..f0f03b6 100644 --- a/modular/titlebars/old_discord.css +++ b/modular/titlebars/old_discord.css @@ -1,49 +1,49 @@ -[class*="wordmark_"] { +[class*="wordmark-"] { display: none !important; } -[class*="titleBar_"] { +[class*="titleBar-"] { margin-top: 0; } -[class*="typeWindows_"] { +[class*="typeWindows-"] { height: 0px !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } -[class*="winButton_"] { +[class*="winButton-"] { margin-top: 19px; margin-right: 5px; opacity: 0.3; } -[class*="winButton_"]:hover { +[class*="winButton-"]:hover { opacity: 1; } -.platform-win [class*="headerBar_"], -.platform-win [class^="chat_"] > [class^="title_"], -.platform-win [class*="activityFeed_"] > [class*="container_"], -.platform-win [class^="libraryHeader_"], +.platform-win [class*="headerBar-"], +.platform-win [class^="chat-"] > [class^="title-"], +.platform-win [class*="activityFeed-"] > [class*="container-"], +.platform-win [class^="libraryHeader-"], .platform-win - [class*="spacer_"] - > [class*="container_"] - > [class*="container_"], + [class*="spacer-"] + > [class*="container-"] + > [class*="container-"], .platform-win - [class^="base_"] - > [class^="content_"] - > [class^="container_"] - > [class^="container_"], -.platform-win [class^="videoControls_"] [class^="headerWrapper_"] { + [class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class^="container-"], +.platform-win [class^="videoControls-"] [class^="headerWrapper-"] { padding-right: 104px !important; } -.platform-win [class^="topControls_"] { +.platform-win [class^="topControls-"] { top: -4px; position: relative; } -[class*="winButtonClose_"], -[class*="winButtonMinMax_"] { +[class*="winButtonClose-"], +[class*="winButtonMinMax-"] { width: 24px !important; height: 24px !important; margin-left: 0 !important; @@ -53,41 +53,41 @@ background-color: var(--interactive-normal) !important; } -[class*="winButtonClose_"] { +[class*="winButtonClose-"] { margin-right: 12px; } -[class*="winButtonClose_"] svg, -[class*="winButtonMinMax_"] svg { +[class*="winButtonClose-"] svg, +[class*="winButtonMinMax-"] svg { display: none; } -[class*="winButtonClose_"] { +[class*="winButtonClose-"] { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjAgNy40MUwxOC41OSA2IDEzIDExLjU5IDcuNDEgNiA2IDcuNDEgMTEuNTkgMTMgNiAxOC41OSA3LjQxIDIwIDEzIDE0LjQxIDE4LjU5IDIwIDIwIDE4LjU5IDE0LjQxIDEzIDIwIDcuNDF6Ii8+PC9nPjwvc3ZnPg==") no-repeat; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjAgNy40MUwxOC41OSA2IDEzIDExLjU5IDcuNDEgNiA2IDcuNDEgMTEuNTkgMTMgNiAxOC41OSA3LjQxIDIwIDEzIDE0LjQxIDE4LjU5IDIwIDIwIDE4LjU5IDE0LjQxIDEzIDIwIDcuNDF6Ii8+PC9nPjwvc3ZnPg==") no-repeat; background-image: none !important; } -[class*="winButtonMinMax_"]:nth-child(3) { +[class*="winButtonMinMax-"]:nth-child(3) { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNOCAxM0g2djdoN3YtMkg4di01em0tMiAwaDJWOGg1VjZINnY3em03IDV2Mmg3di03aC0ydjVoLTV6bTAtMTJ2Mmg1djVoMlY2aC03eiIvPjwvZz48L3N2Zz4=") no-repeat; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNOCAxM0g2djdoN3YtMkg4di01em0tMiAwaDJWOGg1VjZINnY3em03IDV2Mmg3di03aC0ydjVoLTV6bTAtMTJ2Mmg1djVoMlY2aC03eiIvPjwvZz48L3N2Zz4=") no-repeat; background-image: none !important; } -[class*="winButtonMinMax_"]:nth-child(4) { +[class*="winButtonMinMax-"]:nth-child(4) { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTkgMTl2LTJIN3YyaDEyeiIvPjxwYXRoIGQ9Ik0xIDI1aDI0VjFIMXYyNHoiLz48L2c+PC9zdmc+") no-repeat; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTkgMTl2LTJIN3YyaDEyeiIvPjxwYXRoIGQ9Ik0xIDI1aDI0VjFIMXYyNHoiLz48L2c+PC9zdmc+") no-repeat; background-image: none !important; } -[class*="winButtonClose_"]:hover, -[class*="winButtonMinMax_"]:hover { +[class*="winButtonClose-"]:hover, +[class*="winButtonMinMax-"]:hover { background-color: var(--interactive-hover) !important; } -[class^="typeMacOS_"][class*="unfocused_"] [class*="macButton_"], -html.platform-win:not(.app-focused) [class*="winButton_"] { +[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"], +html.platform-win:not(.app-focused) [class*="winButton-"] { opacity: 1 !important; } diff --git a/modular/titlebars/windows_classic.css b/modular/titlebars/windows_classic.css index 616879e..9cfc837 100644 --- a/modular/titlebars/windows_classic.css +++ b/modular/titlebars/windows_classic.css @@ -28,13 +28,13 @@ border-color: var(--titlebar-border-active, var(--primary)) !important; } -[class^="typeWindows_"] { +[class^="typeWindows-"] { height: 18px !important; margin-top: 0; background: var(--titlebar-inactive, var(--secondary)); border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary)); } -.app-focused [class^="typeWindows_"] { +.app-focused [class^="typeWindows-"] { background: var( --titlebar-active, var(--titlebar-color, var(--accent)) @@ -42,13 +42,13 @@ border-color: var(--titlebar-border-active, var(--primary)) !important; } -[class^="winButtonClose_"] > svg, -[class^="winButtonMinMax_"] > svg, -[class^="wordmarkWindows_"] > svg { +[class^="winButtonClose-"] > svg, +[class^="winButtonMinMax-"] > svg, +[class^="wordmarkWindows-"] > svg { display: none; } -[class^="wordmarkWindows_"] { +[class^="wordmarkWindows-"] { width: 16px !important; height: 16px !important; top: 1px !important; @@ -57,7 +57,7 @@ background-image: var(--titlebar-icon); background-repeat: no-repeat; } -[class^="wordmarkWindows_"]::after { +[class^="wordmarkWindows-"]::after { font-family: var(--_font-titlebars) !important; font-size: 12px !important; color: var(--wc-bright, var(--highlight)) !important; @@ -69,11 +69,11 @@ height: 17px; opacity: 1; } -.app-focused [class^="wordmarkWindows_"]::after { +.app-focused [class^="wordmarkWindows-"]::after { color: var(--text) !important; } -[class*="winButton_"] { +[class*="winButton-"] { top: 2px; width: 12px !important; height: 10px !important; @@ -82,43 +82,43 @@ box-shadow: var(--wc-outer-edge); } -[class^="winButtonClose_"] { +[class^="winButtonClose-"] { right: 2px; } -[class^="winButtonMinMax_"]:nth-child(3), -[class^="winButtonMinMax_"]:nth-child(4) { +[class^="winButtonMinMax-"]:nth-child(3), +[class^="winButtonMinMax-"]:nth-child(4) { right: 4px; } -[class*="winButton_"]::before { +[class*="winButton-"]::before { width: 12px !important; height: 10px !important; background-color: var(--text); content: ""; } -[class^="winButtonClose_"]::before { +[class^="winButtonClose-"]::before { -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); } -[class^="winButtonMinMax_"]:nth-child(3)::before { +[class^="winButtonMinMax-"]:nth-child(3)::before { -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTY4CC/0RgFIBNATpGARgCaGBUAwiABAhhcgADAwD+Vybas8l0mAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTY4CC/0RgFIBNATpGARgCaGBUAwiABAhhcgADAwD+Vybas8l0mAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); } -[class^="winButtonMinMax_"]:nth-child(4)::before { +[class^="winButtonMinMax-"]:nth-child(4)::before { -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVChTYxgFtAb/cWCcAJtiEKYEMDAAALNwC/VcmzodAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVChTYxgFtAb/cWCcAJtiEKYEMDAAALNwC/VcmzodAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); } -[class*="recentMentionsPopout_"], -[class^="messagesPopoutWrap_"], -[class^="browser_"] { +[class*="recentMentionsPopout-"], +[class^="messagesPopoutWrap-"], +[class^="browser-"] { border-radius: 0; padding: 2px; box-shadow: var(--wc-frame); border: 1px solid var(--titlebar-border-active, var(--primary)); } -[class*="recentMentionsPopout_"] > [class^="header_"] { +[class*="recentMentionsPopout-"] > [class^="header-"] { padding: 0 4px; font-family: var(--_font-titlebars) !important; font-size: 12px !important; @@ -132,10 +132,10 @@ var(--titlebar-color, var(--accent)) ) !important; } -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="controls_"] - > [class^="button_"] { +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="controls-"] + > [class^="button-"] { padding: 0; border-radius: 0; width: 16px; @@ -144,7 +144,7 @@ min-height: 16px; background-color: transparent; } -[class*="recentMentionsPopout_"] > [class^="header_"] [class^="tab_"] { +[class*="recentMentionsPopout-"] > [class^="header-"] [class^="tab-"] { margin-top: 0 !important; padding: 0px 2px; height: 16px; @@ -152,10 +152,10 @@ font-size: 12px; } -[class^="messagesPopoutWrap_"] > [class^="header_"] { +[class^="messagesPopoutWrap-"] > [class^="header-"] { padding: 0; } -[class^="messagesPopoutWrap_"] > [class^="header_"] > h1 { +[class^="messagesPopoutWrap-"] > [class^="header-"] > h1 { padding: 0 4px; font-family: var(--_font-titlebars) !important; font-size: 12px !important; @@ -169,7 +169,7 @@ ) !important; } -[class^="browser_"] > [class^="header_"] { +[class^="browser-"] > [class^="header-"] { padding: 0 4px; font-family: var(--_font-titlebars) !important; font-size: 12px !important; @@ -183,33 +183,33 @@ var(--titlebar-color, var(--accent)) ) !important; } -[class^="browser_"] > [class^="header_"] > h1 { +[class^="browser-"] > [class^="header-"] > h1 { font-family: var(--_font-titlebars) !important; font-size: 12px !important; color: var(--text) !important; font-weight: bold !important; } -[class^="browser_"] > [class^="header_"] > [class^="threadIcon_"] { +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] { width: 16px; height: 16px; } -[class^="browser_"] > [class^="header_"] > [class^="threadIcon_"] { +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] { margin-right: 2px; } -[class^="browser_"] > [class^="header_"] > h1, -[class^="browser_"] > [class^="header_"] > [class^="divider_"], -[class^="browser_"] > [class^="header_"] > [class^="searchBox_"] { +[class^="browser-"] > [class^="header-"] > h1, +[class^="browser-"] > [class^="header-"] > [class^="divider-"], +[class^="browser-"] > [class^="header-"] > [class^="searchBox-"] { margin-right: 0; } -[class^="browser_"] > [class^="header_"] > [class^="divider_"] { +[class^="browser-"] > [class^="header-"] > [class^="divider-"] { flex-grow: 1; background-color: transparent; } -[class^="browser_"] > [class^="header_"] > [class^="closeIcon_"] > svg { +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] > svg { display: none; } -[class^="browser_"] > [class^="header_"] > [class^="closeIcon_"] { +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] { width: 12px !important; min-width: 12px !important; height: 10px !important; @@ -221,7 +221,7 @@ background: var(--primary) !important; box-shadow: var(--wc-outer-edge); } -[class^="browser_"] > [class^="header_"] > [class^="closeIcon_"]::before { +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"]::before { width: 12px !important; height: 10px !important; background-color: var(--text); diff --git a/modular/titlebars/xmc.css b/modular/titlebars/xmc.css index a668ca8..ed9fcc7 100644 --- a/modular/titlebars/xmc.css +++ b/modular/titlebars/xmc.css @@ -1,10 +1,10 @@ -[class*="recentMentionsPopout_"], -[class^="messagesPopoutWrap_"], -[class^="browser_"] { +[class*="recentMentionsPopout-"], +[class^="messagesPopoutWrap-"], +[class^="browser-"] { border-radius: 0; } -[class*="recentMentionsPopout_"] > [class^="header_"] { +[class*="recentMentionsPopout-"] > [class^="header-"] { color: var(--text) !important; padding: 0 4px; background-color: var(--titlebar-color); @@ -20,10 +20,10 @@ font-size: 12px !important; text-transform: none; } -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="controls_"] - > [class^="button_"] { +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="controls-"] + > [class^="button-"] { padding: 0; border-radius: 0; width: 16px; @@ -32,14 +32,14 @@ min-height: 16px; background-color: transparent; } -[class*="recentMentionsPopout_"] > [class^="header_"] [class^="tab_"] { +[class*="recentMentionsPopout-"] > [class^="header-"] [class^="tab-"] { margin-top: 0 !important; } -[class^="messagesPopoutWrap_"] > [class^="header_"] { +[class^="messagesPopoutWrap-"] > [class^="header-"] { padding: 0; } -[class^="messagesPopoutWrap_"] > [class^="header_"] > h1 { +[class^="messagesPopoutWrap-"] > [class^="header-"] > h1 { color: var(--text) !important; padding: 0 10px; background-color: var(--titlebar-color); @@ -55,7 +55,7 @@ text-transform: none; } -[class^="browser_"] > [class^="header_"] { +[class^="browser-"] > [class^="header-"] { color: var(--text) !important; padding: 0 4px; background-color: var(--titlebar-color); @@ -71,40 +71,40 @@ font-size: 12px !important; text-transform: none; } -[class^="browser_"] > [class^="header_"] > h1 { +[class^="browser-"] > [class^="header-"] > h1 { font-weight: 100; font-family: var(--_font-titlebars) !important; font-size: 12px !important; text-transform: none; } -[class^="browser_"] > [class^="header_"] > [class^="threadIcon_"], -[class^="browser_"] > [class^="header_"] > [class^="closeIcon_"] > svg { +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"], +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] > svg { width: 16px; height: 16px; } -[class^="browser_"] > [class^="header_"] > [class^="threadIcon_"] { +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] { margin-right: 2px; } -[class^="browser_"] > [class^="header_"] > h1, -[class^="browser_"] > [class^="header_"] > [class^="divider_"], -[class^="browser_"] > [class^="header_"] > [class^="searchBox_"] { +[class^="browser-"] > [class^="header-"] > h1, +[class^="browser-"] > [class^="header-"] > [class^="divider-"], +[class^="browser-"] > [class^="header-"] > [class^="searchBox-"] { margin-right: 0; } -[class^="browser_"] > [class^="header_"] > [class^="divider_"] { +[class^="browser-"] > [class^="header-"] > [class^="divider-"] { flex-grow: 1; background-color: transparent; } -.platform-win [class*="baseLayer_"] { +.platform-win [class*="baseLayer-"] { top: -32px; padding-top: 32px; } -.platform-win [class^="app_"] > [class^="app_"] > [class^="bg_"] { +.platform-win [class^="app-"] > [class^="app-"] > [class^="bg-"] { top: -32px; } -[class^="typeWindows_"] { +[class^="typeWindows-"] { margin: 3px; padding: 6px; height: 10px !important; @@ -112,16 +112,16 @@ box-shadow: var(--titlebar-shadow); } -[class^="typeMacOS_"] { +[class^="typeMacOS-"] { background-color: var(--background-tertiary); height: 32px !important; } -[class^="macButtons_"] { +[class^="macButtons-"] { padding: 8px !important; } -[class*="winButton_"] { +[class*="winButton-"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJVSURBVFhH1ZjtThQxFIa9j81ust+fV8ONIH6AiMgAAgr4A/SavAFioiJBshLxAvjLgXfI25TuTGm7pM00eZJOe872me3szJl9dtcWAoneFr6trokPyLlPjdty0aujY/l//NXK1dGX9KKX+4fy7+CzFcQkF/2790kuP+4LG/rmMWKSi15s78j0w67cXF/noG8eIya56PnGpvzJtnIoRziOmOSiZ+sbcv4+yzFFOY6Y5KKnb9/J2dq6kkPfPP59F5Nc9NfyGzldWVVi6JvHiEku+uPla/n5atkKYpKLniwuyffnL6wgJrmoD8i5T43bsGgIcdt0OpUQarVaVHLRou21QdHJZCLj8dgJxHLRkDwl6lM9UXQ0GslwOHQCsRQNyVOiPtWTLjoYDJwwRYtiipgR9ameKIoz7vf7TiCWoiF5StSneqIozrjX6z2gXq/nmOOIpWhRXhnMU6I+1RNFccbdbjcHHwrBLMtyKMt5xFJUz2s2m+rkCMbMPCXqUz3pop1OZ0bSlEWMKYoxUJbH+RlRn+qJopBot9uFixHMIQaxFGUeKPtGOc88JepTPVEUW9NqtaTRaFhBDGIpyjwXmKdEfaonimJrcPYuIJaiIXlK1Kd6SirqA0X1a+0xyq7Rx3hwjYbARWNRLdGi7bVB0ehbj8Ur82OqzO1pnhu+C092w5/nEUrwDfBphL4+Z7tGXfKU6DxFCcFCfMajr8+VFSXAJU+JzlvmAXNBfc4U1edc8pToUxTO5hbqc7bC2SVPiVbmVaQyL3eVeV32gaLR/4AIgYvGoSa368P/Q8a1fTUAAAAASUVORK5CYII="); background-size: 42px; background-repeat: no-repeat; @@ -133,7 +133,7 @@ margin-left: 30px; } -[class*="macButton_"] { +[class*="macButton-"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJVSURBVFhH1ZjtThQxFIa9j81ust+fV8ONIH6AiMgAAgr4A/SavAFioiJBshLxAvjLgXfI25TuTGm7pM00eZJOe872me3szJl9dtcWAoneFr6trokPyLlPjdty0aujY/l//NXK1dGX9KKX+4fy7+CzFcQkF/2790kuP+4LG/rmMWKSi15s78j0w67cXF/noG8eIya56PnGpvzJtnIoRziOmOSiZ+sbcv4+yzFFOY6Y5KKnb9/J2dq6kkPfPP59F5Nc9NfyGzldWVVi6JvHiEku+uPla/n5atkKYpKLniwuyffnL6wgJrmoD8i5T43bsGgIcdt0OpUQarVaVHLRou21QdHJZCLj8dgJxHLRkDwl6lM9UXQ0GslwOHQCsRQNyVOiPtWTLjoYDJwwRYtiipgR9ameKIoz7vf7TiCWoiF5StSneqIozrjX6z2gXq/nmOOIpWhRXhnMU6I+1RNFccbdbjcHHwrBLMtyKMt5xFJUz2s2m+rkCMbMPCXqUz3pop1OZ0bSlEWMKYoxUJbH+RlRn+qJopBot9uFixHMIQaxFGUeKPtGOc88JepTPVEUW9NqtaTRaFhBDGIpyjwXmKdEfaonimJrcPYuIJaiIXlK1Kd6SirqA0X1a+0xyq7Rx3hwjYbARWNRLdGi7bVB0ehbj8Ur82OqzO1pnhu+C092w5/nEUrwDfBphL4+Z7tGXfKU6DxFCcFCfMajr8+VFSXAJU+JzlvmAXNBfc4U1edc8pToUxTO5hbqc7bC2SVPiVbmVaQyL3eVeV32gaLR/4AIgYvGoSa368P/Q8a1fTUAAAAASUVORK5CYII="); background-size: 42px; background-repeat: no-repeat; @@ -143,66 +143,66 @@ border-radius: 0; } -[class^="typeMacOS_"][class*="unfocused_"] [class*="macButton_"], -html.platform-win:not(.app-focused) [class*="winButton_"] { +[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"], +html.platform-win:not(.app-focused) [class*="winButton-"] { opacity: 0.4; } -[class^="typeMacOS_"][class*="unfocused_"] [class*="macButton_"]:hover, -html.platform-win:not(.app-focused) [class*="winButton_"]:hover { +[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"]:hover, +html.platform-win:not(.app-focused) [class*="winButton-"]:hover { opacity: 1; } -[class*="macButton_"] > svg, -[class*="winButton_"] > svg, -[class^="wordmarkWindows_"] > svg { +[class*="macButton-"] > svg, +[class*="winButton-"] > svg, +[class^="wordmarkWindows-"] > svg { display: none; } -[class*="winButtonClose_"] { +[class*="winButtonClose-"] { margin-right: 3px; } -[class*="macButtonClose_"], -[class*="winButtonClose_"] { +[class*="macButtonClose-"], +[class*="winButtonClose-"] { background-position: 0px 0px; } -[class*="macButtonClose_"]:hover, -[class*="winButtonClose_"]:hover { +[class*="macButtonClose-"]:hover, +[class*="winButtonClose-"]:hover { background-position: 0px -14px; } -[class*="macButtonClose_"]:active, -[class*="winButtonClose_"]:active { +[class*="macButtonClose-"]:active, +[class*="winButtonClose-"]:active { background-position: 0px -28px; } -[class*="macButtonMaximize_"], -[class*="winButtonMinMax_"]:nth-child(3) { +[class*="macButtonMaximize-"], +[class*="winButtonMinMax-"]:nth-child(3) { background-position: -14px 0px; } -[class*="macButtonMaximize_"]:hover, -[class*="winButtonMinMax_"]:nth-child(3):hover { +[class*="macButtonMaximize-"]:hover, +[class*="winButtonMinMax-"]:nth-child(3):hover { background-position: -14px -14px; } -[class*="macButtonMaximize_"]:active, -[class*="winButtonMinMax_"]:nth-child(3):active { +[class*="macButtonMaximize-"]:active, +[class*="winButtonMinMax-"]:nth-child(3):active { background-position: -14px -28px; } -[class*="macButtonMinimize_"], -[class*="winButtonMinMax_"]:nth-child(4) { +[class*="macButtonMinimize-"], +[class*="winButtonMinMax-"]:nth-child(4) { background-position: -28px 0px; } -[class*="macButtonMinimize_"]:hover, -[class*="winButtonMinMax_"]:nth-child(4):hover { +[class*="macButtonMinimize-"]:hover, +[class*="winButtonMinMax-"]:nth-child(4):hover { background-position: -28px -14px; } -[class*="macButtonMinimize_"]:active, -[class*="winButtonMinMax_"]:nth-child(4):active { +[class*="macButtonMinimize-"]:active, +[class*="winButtonMinMax-"]:nth-child(4):active { background-position: -28px -28px; } -[class^="wordmarkWindows_"] { +[class^="wordmarkWindows-"] { width: 16px !important; height: 16px !important; top: 6px !important; @@ -211,7 +211,7 @@ html.platform-win:not(.app-focused) [class*="winButton_"]:hover { background-image: var(--titlebar-icon); background-repeat: no-repeat; } -[class^="wordmarkWindows_"]::after { +[class^="wordmarkWindows-"]::after { font-family: var(--_font-titlebars) !important; font-size: 12px !important; line-height: 250% !important; @@ -225,20 +225,20 @@ html.platform-win:not(.app-focused) [class*="winButton_"]:hover { opacity: 1; } -html.platform-win:not(.app-focused) [class^="wordmarkWindows_"]::after, +html.platform-win:not(.app-focused) [class^="wordmarkWindows-"]::after, html:not(.platform-win) #app-mount > div:not(.app-focused) - [class^="wordmarkWindows_"]::after { + [class^="wordmarkWindows-"]::after { opacity: 0.4; } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="body_"] - > [class^="infoScroller_"] - > [class^="userInfoSection_"] - > [class*="userInfoSectionHeader_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + > [class*="userInfoSectionHeader-"] { color: var(--text) !important; padding: 0 10px; background-color: var(--titlebar-color); @@ -254,11 +254,11 @@ html:not(.platform-win) text-transform: none; } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="body_"] - > [class^="infoScroller_"] - > [class^="connectedAccounts_"]::before { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"]::before { color: var(--text) !important; padding: 0 10px; background-color: var(--titlebar-color); @@ -277,21 +277,21 @@ html:not(.platform-win) position: absolute; } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="body_"] - > [class^="infoScroller_"] - > [class^="connectedAccounts_"] - > [class^="connectedAccountsColumn_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"] + > [class^="connectedAccountsColumn-"] { margin-top: 28px; } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="body_"] - > [class^="listScroller_"] - > [class^="activityProfile_"] - [class*="headerTextNormal_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"] + > [class^="activityProfile-"] + [class*="headerTextNormal-"] { color: var(--text) !important; padding: 0 10px; background-color: var(--titlebar-color); diff --git a/modular/unmirror.css b/modular/unmirror.css index d54cb42..7d33c44 100644 --- a/modular/unmirror.css +++ b/modular/unmirror.css @@ -1,3 +1,3 @@ -[class*="mirror_"] { +[class*="mirror-"] { transform: none !important; } diff --git a/modular/unread.css b/modular/unread.css index 80ca9cb..070d97b 100644 --- a/modular/unread.css +++ b/modular/unread.css @@ -1,17 +1,17 @@ -[class^="listItem_"]:hover [class^="pill_"] { +[class^="listItem-"]:hover [class^="pill-"] { display: none; } -[class^="listItem_"] [class^="pill_"] { +[class^="listItem-"] [class^="pill-"] { width: 52px !important; height: 56px !important; top: -4px !important; left: 11px; z-index: 100; } -[class^="listItem_"] [class^="pill_"] > span { +[class^="listItem-"] [class^="pill-"] > span { display: none; } -[class^="listItem_"] [class^="pill_"] > span[style*="height: 8px;"] { +[class^="listItem-"] [class^="pill-"] > span[style*="height: 8px;"] { display: block; left: 4px; bottom: 2px; @@ -22,7 +22,7 @@ z-index: 100; background: var(--red, var(--status-red-500)); } -[class^="listItem_"] [class^="pill_"] > span[style*="height: 40px;"] { +[class^="listItem-"] [class^="pill-"] > span[style*="height: 40px;"] { display: block; background: transparent; height: 46px !important; @@ -34,18 +34,18 @@ z-index: 100; } -[class^="listItem_"]:hover [class^="pill_"] span { +[class^="listItem-"]:hover [class^="pill-"] span { opacity: 0 !important; } -[class^="listItem_"]:not(:hover) [class^="pill_"] span { +[class^="listItem-"]:not(:hover) [class^="pill-"] span { opacity: 0 !important; } -[class^="listItem_"]:not(:hover) [class^="pill_"] span[style^="opacity: 0.7"], -[class^="listItem_"]:not(:hover) [class^="pill_"] span[style^="opacity: 1"] { +[class^="listItem-"]:not(:hover) [class^="pill-"] span[style^="opacity: 0.7"], +[class^="listItem-"]:not(:hover) [class^="pill-"] span[style^="opacity: 1"] { opacity: 1 !important; } -[class^="listItem_"] [class^="upperBadge_"] { +[class^="listItem-"] [class^="upperBadge-"] { z-index: 500; } diff --git a/modular/voice_rings.css b/modular/voice_rings.css index 1ee1ecc..6035965 100644 --- a/modular/voice_rings.css +++ b/modular/voice_rings.css @@ -1,10 +1,9 @@ -[class*="avatarSpeaking_"], -[class^="avatar_"][class*="speaking_"] { - box-shadow: - 0 0 0 2px var(--status-online, var(--status-green-600)), +[class*="avatarSpeaking-"], +[class^="avatar-"][class*="speaking-"] { + box-shadow: 0 0 0 2px var(--status-online, var(--status-green-600)), 0 0 0 3px var(--background-secondary) !important; } -[class^="voiceUsers_"] [class^="avatarContainer_"] { +[class^="voiceUsers-"] [class^="avatarContainer-"] { overflow: visible; } diff --git a/modular/wide_settings.css b/modular/wide_settings.css index 0d5d723..723fe89 100644 --- a/modular/wide_settings.css +++ b/modular/wide_settings.css @@ -1,12 +1,12 @@ -[class*="standardSidebarView_"] - [class*="contentColumn_"]:not([class*="contentColumnWide_"]) { +[class*="standardSidebarView-"] + [class*="contentColumn-"]:not([class*="contentColumnWide-"]) { max-width: 100%; } -[class*="standardSidebarView_"] [class*="sidebarRegion_"] { +[class*="standardSidebarView-"] [class*="sidebarRegion-"] { flex: 0; } -[class^="accountProfileCard_"] { +[class^="accountProfileCard-"] { max-width: 660px; } diff --git a/xmc.user.css b/xmc.user.css index 67ffb62..9a4096a 100644 --- a/xmc.user.css +++ b/xmc.user.css @@ -234,10 +234,10 @@ html { --brand-experiment-95a: rgba(var(--accent-rgb), 0.95) !important; } -[class^="appMount_"], -[class^="bg_"], -[class^="layers_"] > [class^="layer_"], -[class^="app_"] { +[class^="appMount-"], +[class^="bg-"], +[class^="layers-"] > [class^="layer-"], +[class^="app-"] { background-color: transparent !important; } @@ -307,125 +307,125 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { fill: var(--status-streaming); } -[class^="containerDefault_"]:not(:hover):not([class*="selected_"]) - [class*="modeUnread_"] svg[class^="icon_"], -[class^="containerDefault_"]:not(:hover):not([class*="selected_"]) - [class*="modeUnread_"] [class^="name_"] { +[class^="containerDefault-"]:not(:hover):not([class*="selected-"]) + [class*="modeUnread-"] svg[class^="icon-"], +[class^="containerDefault-"]:not(:hover):not([class*="selected-"]) + [class*="modeUnread-"] [class^="name-"] { color: var(--accent, var(--brand-new-500)); } -[class^="containerDefault_"] [class*="modeUnread_"] [class^="unread_"] { +[class^="containerDefault-"] [class*="modeUnread-"] [class^="unread-"] { background-color: var(--accent, var(--brand-new-500)); } -[class^="containerDefault_"]:not(:hover) [class*="modeSelected_"] svg[class^="icon_"] { +[class^="containerDefault-"]:not(:hover) [class*="modeSelected-"] svg[class^="icon-"] { color: var(--interactive-active); } -[class^="containerDefault_"] - [class*="iconVisibility_"]:hover - svg[class^="icon_"], -[class^="containerDefault_"] - [class*="iconVisibility_"]:hover - [class^="name_"], -[class^="wrapper_"]:hover - > [class^="content_"] - > [class^="mainContent_"] - > [class^="iconContainer_"] - > svg[class^="icon_"] { +[class^="containerDefault-"] + [class*="iconVisibility-"]:hover + svg[class^="icon-"], +[class^="containerDefault-"] + [class*="iconVisibility-"]:hover + [class^="name-"], +[class^="wrapper-"]:hover + > [class^="content-"] + > [class^="mainContent-"] + > [class^="iconContainer-"] + > svg[class^="icon-"] { color: var(--interactive-hover) !important; } -[class*="menu_"] [class^="item_"]:active, -[class*="menu_"] [class^="item_"][class*="focused_"], -[class*="lookFilled_"][class*="colorBrand_"]:not([class*="buttonColor_"]), -[class*="lookFilled_"][class*="colorBrandNew_"]:not([class*="buttonColor_"]), -[style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch_"]), -[class^="slider_"] [class^="bar_"] [class^="barFill_"], -[class^="control_"] - [class^="container_"][style*="background-color: rgb(67, 181, 129);"] { +[class*="menu-"] [class^="item-"]:active, +[class*="menu-"] [class^="item-"][class*="focused-"], +[class*="lookFilled-"][class*="colorBrand-"]:not([class*="buttonColor-"]), +[class*="lookFilled-"][class*="colorBrandNew-"]:not([class*="buttonColor-"]), +[style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch-"]), +[class^="slider-"] [class^="bar-"] [class^="barFill-"], +[class^="control-"] + [class^="container-"][style*="background-color: rgb(67, 181, 129);"] { background-color: var(--accent, var(--brand-new-500)) !important; } [style*="border-color: rgb(114, 137, 218)"], -[class*="lookOutlined_"][class*="colorBrand_"] { +[class*="lookOutlined-"][class*="colorBrand-"] { border-color: var(--accent, var(--brand-new-500)) !important; } -[class*="lookOutlined_"][class*="colorBrand_"], -[class*="colorDefault_"]:not([class*="focused_"]) [class^="checkbox_"], -[class*="colorDefault_"]:not([class*="focused_"]) [class^="radioSelection_"], -[class*="colorDefault_"][class*="focused_"] [class^="check_"] { +[class*="lookOutlined-"][class*="colorBrand-"], +[class*="colorDefault-"]:not([class*="focused-"]) [class^="checkbox-"], +[class*="colorDefault-"]:not([class*="focused-"]) [class^="radioSelection-"], +[class*="colorDefault-"][class*="focused-"] [class^="check-"] { color: var(--accent, var(--brand-new-500)) !important; } -[class*="mentioned_"]:before { +[class*="mentioned-"]:before { background-color: var(--accent, var(--brand-new-500)); } -[class^="slider_"] [class^="bar_"], -[class^="control_"] - [class^="container_"][style*="background-color: rgb(114, 118, 125);"] { +[class^="slider-"] [class^="bar-"], +[class^="control-"] + [class^="container-"][style*="background-color: rgb(114, 118, 125);"] { background-color: var(--background-secondary) !important; } -.mention[class*="wrapper_"] { +.mention[class*="wrapper-"] { color: var(--accent, var(--brand-new-500)); background: rgba(var(--accent-rgb), 0.1); } -.mention[class*="wrapper_"]:hover { +.mention[class*="wrapper-"]:hover { color: #ffffff; background: var(--accent, var(--brand-new-500)); } -[class*="mentioned_"] .mention.interactive:hover { +[class*="mentioned-"] .mention.interactive:hover { color: var(--accent, var(--brand-new-500)) !important; } -[class^="mediaBarGrabber_"], -[class^="mediaBarProgress_"], -[class^="mediaBarProgress_"]:after, -[class^="mediaBarProgress_"]:before { +[class^="mediaBarGrabber-"], +[class^="mediaBarProgress-"], +[class^="mediaBarProgress-"]:after, +[class^="mediaBarProgress-"]:before { background-color: var(--accent, var(--brand-new-500)) !important; } -[class^="reaction_"] { +[class^="reaction-"] { background-color: var(--background-secondary); border: none; border-radius: 4px !important; } -[class^="reaction_"]:hover, -[class^="reaction_"][class*="reactionMe_"] { +[class^="reaction-"]:hover, +[class^="reaction-"][class*="reactionMe-"] { background-color: var(--highlight, var(--primary-dark-500)); } -[class^="reaction_"][class*="reactionMe_"] [class*="reactionCount_"], -[class^="reaction_"]:hover [class*="reactionCount_"] { +[class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"], +[class^="reaction-"]:hover [class*="reactionCount-"] { color: var(--white-500) !important; } -[class^="reaction_"] [class*="reactionCount_"] { +[class^="reaction-"] [class*="reactionCount-"] { color: var(--text, var(--text-normal)); } -[class*="progressBarHeader_"] - > [class^="container_"]:not([class*="checked_"]), -[class^="control_"] > [class^="container_"]:not([class*="checked_"]) { +[class*="progressBarHeader-"] + > [class^="container-"]:not([class*="checked-"]), +[class^="control-"] > [class^="container-"]:not([class*="checked-"]) { background-color: var(--highlight) !important; } -[class*="progressBarHeader_"] > [class^="container_"][class*="checked_"], -[class^="control_"] > [class^="container_"][class*="checked_"] { +[class*="progressBarHeader-"] > [class^="container-"][class*="checked-"], +[class^="control-"] > [class^="container-"][class*="checked-"] { background-color: var(--_color2) !important; } -[class^="radioBar_"][style*="--radio-bar-accent-color:hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { +[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { --radio-bar-accent-color: var(--_color2) !important; } -[class^="radioBar_"][style*="--radio-bar-accent-color:hsl(37, calc(var(--saturation-factor, 1) * 81.2%), 43.9%);"] { +[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(37, calc(var(--saturation-factor, 1) * 81.2%), 43.9%);"] { --radio-bar-accent-color: var(--_color3) !important; } -[class^="radioBar_"][style*="--radio-bar-accent-color:hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] { +[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] { --radio-bar-accent-color: var(--_color1) !important; } @@ -436,60 +436,60 @@ span[style*="background-color: hsl(359, calc(var(--saturation-factor, 1) * 82.6% background-color: var(--red, var(--status-red-500)) !important; } -[class^="updateIconForeground_"] { +[class^="updateIconForeground-"] { fill: var(--_color2); } -[class*="tierHeaderLocked_"], -[class*="tierHeaderUnlocked_"] { +[class*="tierHeaderLocked-"], +[class*="tierHeaderUnlocked-"] { background-color: var(--background-secondary) !important; } -[class*="tierAccomplished_"], -[class*="tierCurrent_"], -[class*="tierFirst_"] { +[class*="tierAccomplished-"], +[class*="tierCurrent-"], +[class*="tierFirst-"] { background: var(--_color13) !important; } -[class^="progressWithSubscriptions_"] > svg > g > rect[class^="background_"] { +[class^="progressWithSubscriptions-"] > svg > g > rect[class^="background-"] { color: var(--background-secondary); } -[class^="tierIcon_"], -[class^="unlockedIcon_"], -[class^="progressWithSubscriptions_"] > svg > g > rect[class^="foreground_"] { +[class^="tierIcon-"], +[class^="unlockedIcon-"], +[class^="progressWithSubscriptions-"] > svg > g > rect[class^="foreground-"] { color: var(--_color13) !important; } svg[fill="#FF73FA"] { fill: var(--_color13) !important; } -[class^="activeCircle_"] { +[class^="activeCircle-"] { background-color: var(--_color2) !important; } -[class*="allow_"][class*="selected_"] { +[class*="allow-"][class*="selected-"] { background-color: var(--status-positive) !important; } -[class^="item_"][style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { +[class^="item-"][style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { background-color: var(--_color2) !important; } -[class*="unreadBar_"][class*="mention_"], -[class^="numberBadge_"] { +[class*="unreadBar-"][class*="mention-"], +[class^="numberBadge-"] { background-color: var(--red, var(--status-red-500)) !important; } -[class*="bar_"][class*="mention_"] { +[class*="bar-"][class*="mention-"] { background-color: var(--red, var(--status-red-500)); } -a[class^="anchor_"]:not([aria-controls^="popout_"]) { +a[class^="anchor-"]:not([aria-controls^="popout_"]) { color: var(--text-link) !important; } -.theme-light [class*="button_"][class*="lookFilled_"][class*="colorPrimary_"] { +.theme-light [class*="button-"][class*="lookFilled-"][class*="colorPrimary-"] { color: var(--text) !important; } @@ -499,12 +499,12 @@ a[class^="anchor_"]:not([aria-controls^="popout_"]) { background: var(--deprecated-card-bg) !important; } -[class^="markdown_"] [class^="codeInline_"], +[class^="markdown-"] [class^="codeInline-"], code.inline, .hljs { color: var(--_colorFG) !important; } -[class^="markdown_"] code, +[class^="markdown-"] code, .hljs { background: var(--background-secondary) !important; } @@ -772,11 +772,11 @@ code.inline, --highlight: #72767d; --highlight-rgb: 114, 118, 125; - --status-online: #43b581 !important; - --status-idle: #faa61a !important; - --status-dnd: #f04747 !important; - --status-offline: #747f8d !important; - --status-streaming: #593695 !important; + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; --titlebar-color: var(--highlight); } @@ -820,11 +820,11 @@ code.inline, --highlight: #404040; --highlight-rgb: 64, 64, 64; - --status-online: var(--_color4) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color4); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: var(--accent); } @@ -868,13 +868,11 @@ code.inline, --highlight: #634e75; --highlight-rgb: 99, 78, 117; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color5) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color4) !important; - - --status-warning-text: var(--primary) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color5); + --status-offline: var(--highlight); + --status-streaming: var(--_color4); } #splash { @@ -918,13 +916,11 @@ code.inline, --highlight: #5c5c5c; --highlight-rgb: 92, 92, 92; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color5) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color4) !important; - - --status-warning-text: var(--primary) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color5); + --status-offline: var(--highlight); + --status-streaming: var(--_color4); --titlebar-color: var(--accent); --wc-bright: #383838; @@ -969,11 +965,11 @@ code.inline, --highlight: #665c54; --highlight-rgb: 102, 92, 84; - --status-online: var(--_color10) !important; - --status-idle: var(--_color11) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color13) !important; + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color13); } #splash { @@ -1015,11 +1011,11 @@ code.inline, --highlight: #232323; --highlight-rgb: 35, 35, 35; - --status-online: #43b581 !important; - --status-idle: #faa61a !important; - --status-dnd: #f04747 !important; - --status-offline: #747f8d !important; - --status-streaming: #593695 !important; + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; --titlebar-color: #060606; } @@ -1063,11 +1059,11 @@ code.inline, --highlight: #8fbcbb; --highlight-rgb: 143, 188, 187; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #4c566a; } @@ -1111,11 +1107,11 @@ code.inline, --highlight: var(--_color8); --highlight-rgb: 65, 68, 88; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color9) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color9); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --interactive-hover: var(--_color6) !important; --interactive-active: var(--_color7) !important; @@ -1160,11 +1156,11 @@ code.inline, --highlight: #a5adce; --highlight-rgb: 165, 173, 206; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #414559; @@ -1211,11 +1207,11 @@ code.inline, --highlight: #a5adcb; --highlight-rgb: 165, 173, 203; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #363a4f; @@ -1263,11 +1259,11 @@ code.inline, --highlight: #a6adc8; --highlight-rgb: 166, 173, 200; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #313244; @@ -1318,11 +1314,11 @@ code.inline, --highlight: #747474; --highlight-rgb: 116, 116, 116; - --status-online: #43b581 !important; - --status-idle: #faa61a !important; - --status-dnd: #f04747 !important; - --status-offline: #747f8d !important; - --status-streaming: #593695 !important; + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; --titlebar-color: var(--tertiary); } @@ -1366,11 +1362,11 @@ code.inline, --highlight: var(--_color0); --highlight-rgb: 122, 132, 120; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --interactive-hover: var(--_color6) !important; --interactive-active: var(--_color15) !important; @@ -1415,11 +1411,11 @@ code.inline, --highlight: #565f89; --highlight-rgb: 86, 95, 137; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --interactive-hover: var(--_color4) !important; --interactive-active: var(--_color15) !important; @@ -1464,11 +1460,11 @@ code.inline, --highlight: #889180; --highlight-rgb: 137, 145, 130; - --status-online: var(--_color10) !important; - --status-idle: var(--_color11) !important; - --status-dnd: var(--_color9) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color9); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --status-danger: var(--red) !important; --interactive-active: var(--white-500) !important; @@ -1519,11 +1515,11 @@ code.inline, --highlight: #b5b5b5; --highlight-rgb: 181, 181, 181; - --status-online: var(--_color10) !important; - --status-idle: var(--_color11) !important; - --status-dnd: var(--_color9) !important; - --status-offline: var(--highlight) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color9); + --status-offline: var(--highlight); + --status-streaming: var(--_color5); --status-danger: var(--red) !important; --interactive-active: var(--white-500) !important; @@ -1569,11 +1565,11 @@ code.inline, --highlight: var(--xmc-custom-highlight); --highlight-rgb: var(--xmc-custom-highlight-rgb); - --status-online: var(--xmc-custom-status-online) !important; - --status-idle: var(--xmc-custom-status-idle) !important; - --status-dnd: var(--xmc-custom-status-dnd) !important; - --status-offline: var(--xmc-custom-status-offline) !important; - --status-streaming: var(--xmc-custom-status-streaming) !important; + --status-online: var(--xmc-custom-status-online); + --status-idle: var(--xmc-custom-status-idle); + --status-dnd: var(--xmc-custom-status-dnd); + --status-offline: var(--xmc-custom-status-offline); + --status-streaming: var(--xmc-custom-status-streaming); --interactive-hover: var(--xmc-custom-hover) !important; --interactive-active: var(--xmc-custom-active) !important; @@ -1621,11 +1617,11 @@ code.inline, --highlight: #72767d; --highlight-rgb: 114, 118, 125; - --status-online: #43b581 !important; - --status-idle: #faa61a !important; - --status-dnd: #f04747 !important; - --status-offline: #747f8d !important; - --status-streaming: #593695 !important; + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; --titlebar-color: var(--highlight); @@ -1667,11 +1663,11 @@ code.inline, --highlight: #b0aca5; --highlight-rgb: 176, 172, 165; - --status-online: var(--_color4) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color4); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: var(--accent); --interactive-hover: #494949 !important; @@ -1713,11 +1709,11 @@ code.inline, --highlight: #bdae93; --highlight-rgb: 189, 174, 147; - --status-online: var(--_color10) !important; - --status-idle: var(--_color11) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color13) !important; + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color13); }`, 'Nord': `.theme-light { --_color0: #e5e9f0; @@ -1755,11 +1751,11 @@ code.inline, --highlight: #8fbcbb; --highlight-rgb: 143, 188, 187; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #4c566a; }`, @@ -1799,11 +1795,11 @@ code.inline, --highlight: #6c6f85; --highlight-rgb: 108, 111, 133; - --status-online: var(--_color2) !important; - --status-idle: var(--_color3) !important; - --status-dnd: var(--_color1) !important; - --status-offline: var(--_color8) !important; - --status-streaming: var(--_color5) !important; + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); --titlebar-color: #414559; @@ -1883,11 +1879,11 @@ code.inline, font-family: "Sazanami Gothic" !important; } -[class*="menu_"] [class^="item_"], -[class^="containerDefault_"] [class^="name_"], -[class^="membersGroup_"] { +[class*="menu-"] [class^="item-"], +[class^="containerDefault-"] [class^="name-"], +[class^="membersGroup-"] { font-size: 16px; - text-transform: none !important; + text-transform: none; font-weight: 500; }`, 'Terminus': `@font-face { @@ -1945,27 +1941,27 @@ code.inline, --_font-titlebars: var(--font-primary) !important; } -[class*="menu_"] [class^="item_"], -[class^="containerDefault_"] - > [class^="iconVisibility_"] - > [class^="content_"] - [class^="name_"] { +[class*="menu-"] [class^="item-"], +[class^="containerDefault-"] + > [class^="iconVisibility-"] + > [class^="content-"] + [class^="name-"] { font-size: 16px; text-transform: none; font-weight: 500; } -[class^="containerDefault_"] - > [class^="iconVisibility_"] - > [class^="mainContent_"] - [class^="name_"], -[class^="membersGroup_"], -[class^="headerContent_"] > [class^="name_"] { +[class^="containerDefault-"] + > [class^="iconVisibility-"] + > [class^="mainContent-"] + [class^="name-"], +[class^="membersGroup-"], +[class^="headerContent-"] > [class^="name-"] { font-size: 16px; - text-transform: none !important; + text-transform: none; font-weight: 600; } -[class^="reaction_"] [class*="reactionCount_"] { +[class^="reaction-"] [class*="reactionCount-"] { font-size: 12px; } @@ -1975,35 +1971,35 @@ code.inline, font-size: 12px !important; } -[class^="sidebar_"] - > [class^="container_"] - > [class^="container_"] - > [class^="header_"] - > [class^="name_"], -[class*="heading-md-medium_"], -[class*="heading-md-normal_"] { +[class^="sidebar-"] + > [class^="container-"] + > [class^="container-"] + > [class^="header-"] + > [class^="name-"], +[class*="heading-md-medium-"], +[class*="heading-md-normal-"] { font-size: 16px !important; } -[class*="edited_"], -[class*="botTag_"] [class*="botText_"], +[class*="edited-"], +[class*="botTag-"] [class*="botText-"], span[class="role-tag"], .antiDelete-deleted-suffix { font-size: 12px !important; } -[class^="latin12CompactTimeStamp_"], -[class^="latin24CompactTimeStamp_"], -[class^="asianCompactTimeStamp_"], -[class^="embedFooterText_"] { +[class^="latin12CompactTimeStamp-"], +[class^="latin24CompactTimeStamp-"], +[class^="asianCompactTimeStamp-"], +[class^="embedFooterText-"] { font-size: 0.75em !important; } -[class^="codeBlockText_"], -[class^="codeLine_"], -[class*="after_inlineCode_"], -[class*="before_inlineCode_"], -[class^="inlineCode_"] { +[class^="codeBlockText-"], +[class^="codeLine-"], +[class*="after_inlineCode-"], +[class*="before_inlineCode-"], +[class^="inlineCode-"] { font-size: 12px !important; } @@ -2011,20 +2007,20 @@ span[class="role-tag"], font-weight: 0; } -[class^="markdown_"] [class^="codeInline_"], +[class^="markdown-"] [class^="codeInline-"], code.inline, .hljs { font-size: 12px !important; } -[class^="markdown_"] code, -[class^="markdown_"] [class^="codeInline_"], +[class^="markdown-"] code, +[class^="markdown-"] [class^="codeInline-"], code.inline { line-height: 12px !important; } -[class^="markup_"] ol, -[class^="markup_"] ul { +[class^="markup-"] ol, +[class^="markup-"] ul { margin: 4px 0 0 24px !important; } @@ -2132,68 +2128,68 @@ code.inline { inset 0 0 0 4px var(--secondary, var(--background-secondary)); } -[class*="button_"][class*="lookFilled_"], -section[class^="panels_"] - [class^="container_"] - [class^="flex_"] - button[class^="button_"], -[class^="toolbar_"] [class*="iconWrapper_"] { +[class*="button-"][class*="lookFilled-"], +section[class^="panels-"] + [class^="container-"] + [class^="flex-"] + button[class^="button-"], +[class^="toolbar-"] [class*="iconWrapper-"] { border-radius: 0; color: var(--text) !important; background: var(--button-bg) !important; box-shadow: var(--button-shadow) !important; } -[class^="containerDefault_"][class*="selected_"] - [class^="iconVisibility_"] - > [class^="content_"], -[class^="containerDefault_"] - [class^="iconVisibility_"][class*="modeSelected_"] - > [class^="content_"], -nav[class^="sidebar_"] div[class^="item_"][class*="selected_"], -[class^="member_"][aria-expanded="true"] > [class^="layout_"], -[class^="channel_"] [class^="interactive_"][class*="selected_"] { +[class^="containerDefault-"][class*="selected-"] + [class^="iconVisibility-"] + > [class^="content-"], +[class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"], +nav[class^="sidebar-"] div[class^="item-"][class*="selected-"], +[class^="member-"][aria-expanded="true"] > [class^="layout-"], +[class^="channel-"] [class^="interactive-"][class*="selected-"] { border-radius: 0; background: var(--button-bg) !important; box-shadow: var(--button-shadow) !important; } -[class^="containerDefault_"] [class^="iconVisibility_"]:hover [class^="content_"], -nav[class^="sidebar_"] div[class^="item_"]:not([class*="selected_"]):hover, -[class^="member_"]:not([aria-expanded="true"]):hover > [class^="layout_"], -[class^="channel_"] [class^="interactive_"]:not([class*="selected_"]):hover { +[class^="containerDefault-"] [class^="iconVisibility-"]:hover [class^="content-"], +nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, +[class^="member-"]:not([aria-expanded="true"]):hover > [class^="layout-"], +[class^="channel-"] [class^="interactive-"]:not([class*="selected-"]):hover { border-radius: 0; background: var(--hover-bg) !important; box-shadow: var(--hover-shadow) !important; } -[class^="scroller_"]::-webkit-scrollbar-thumb, -[class*="scrollerBase_"]::-webkit-scrollbar-thumb { +[class^="scroller-"]::-webkit-scrollbar-thumb, +[class*="scrollerBase-"]::-webkit-scrollbar-thumb { border-radius: 0; background: transparent; box-shadow: var(--scrollbar-shadow); } -[class^="channelTextArea_"] > [class^="scrollableContainer_"] { +[class^="channelTextArea-"] > [class^="scrollableContainer-"] { border: 1px solid var(--background-tertiary); border-radius: 0; } -[class^="toolbar_"] [class*="iconWrapper_"] { +[class^="toolbar-"] [class*="iconWrapper-"] { margin: 0; width: 32px; height: 32px; } -[class^="toolbar_"] [class*="iconWrapper_"] > svg { +[class^="toolbar-"] [class*="iconWrapper-"] > svg { margin: 4px; } -[class^="toolbar_"] > [class^="search_"] { +[class^="toolbar-"] > [class^="search-"] { margin: 0; } -[class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] { +[class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] { background-color: var(--background-primary); border: 1px solid var(--background-tertiary); border-radius: 0; @@ -2201,22 +2197,22 @@ nav[class^="sidebar_"] div[class^="item_"]:not([class*="selected_"]):hover, justify-content: center; } -[class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] +[class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] > .DraftEditor-root, -[class^="toolbar_"] - > [class^="search_"] - [class^="searchBar_"] - > [class^="icon_"] { +[class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"] { height: 24px; margin-top: 2px; } -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="tabBar_"] - > [class^="tab_"] { +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="tabBar-"] + > [class^="tab-"] { margin: 0; border-radius: 0; background: var(--button-bg) !important; @@ -2225,26 +2221,26 @@ nav[class^="sidebar_"] div[class^="item_"]:not([class*="selected_"]):hover, font-size: 12px !important; } -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="tabBar_"] - > [class^="tab_"]:hover, -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="tabBar_"] - > [class^="tab_"][class*="active_"] { +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="tabBar-"] + > [class^="tab-"]:hover, +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="tabBar-"] + > [class^="tab-"][class*="active-"] { background: var(--hover-bg) !important; box-shadow: var(--hover-shadow) !important; } -[class^="reaction_"] { +[class^="reaction-"] { background-color: var(--button-bg); box-shadow: var(--button-shadow); border-radius: 0; } -[class^="reaction_"]:hover, -[class^="reaction_"][class*="reactionMe_"] { +[class^="reaction-"]:hover, +[class^="reaction-"][class*="reactionMe-"] { background-color: var(--hover-bg); box-shadow: var(--hover-shadow); }`, @@ -2269,98 +2265,98 @@ nav[class^="sidebar_"] div[class^="item_"]:not([class*="selected_"]):hover, inset -2px -2px 0 0 var(--primary), inset 2px 2px 0 0 var(--wc-bright, var(--highlight)); } -[class*="button_"][class*="lookFilled_"], -section[class^="panels_"] - [class^="container_"] - [class^="flex_"] - button[class^="button_"], -[class^="toolbar_"] [class*="iconWrapper_"] { +[class*="button-"][class*="lookFilled-"], +section[class^="panels-"] + [class^="container-"] + [class^="flex-"] + button[class^="button-"], +[class^="toolbar-"] [class*="iconWrapper-"] { border-radius: 0; box-shadow: var(--wc-outer-edge) !important; } -[class*="button_"][class*="lookFilled_"]:active, -section[class^="panels_"] - [class^="container_"] - [class^="flex_"] - button[class^="button_"]:active { +[class*="button-"][class*="lookFilled-"]:active, +section[class^="panels-"] + [class^="container-"] + [class^="flex-"] + button[class^="button-"]:active { box-shadow: var(--wc-inner-edge) !important; } -[class*="button_"][class*="lookFilled_"]:not([class*="color"]), -[class^="toolbar_"] [class*="iconWrapper_"] { +[class*="button-"][class*="lookFilled-"]:not([class*="color"]), +[class^="toolbar-"] [class*="iconWrapper-"] { background-color: var(--primary); } -[class^="chat_"] > [class^="content_"] [class^="membersWrap_"] { +[class^="chat-"] > [class^="content-"] > [class^="container-"] > [class^="membersWrap-"] { padding: 2px; box-shadow: var(--wc-inner-edge); height: calc(100% - 4px); max-height: calc(100% - 4px); } -[class^="messagesWrapper_"], -[class*="guilds_"], -[class^="sidebar_"] > nav > [class^="scroller_"] { +[class^="messagesWrapper-"], +[class*="guilds-"], +[class^="sidebar-"] > nav > [class^="scroller-"] { padding: 2px; box-shadow: var(--wc-inner-edge); } -[class^="chat_"] > [class^="content_"] > [class^="container_"], -[class^="chat_"] > [class^="content_"] > [class^="chatContent_"], -[class^="standardSidebarView_"] > [class^="contentRegion_"] { +[class^="chat-"] > [class^="content-"] > [class^="container-"], +[class^="chat-"] > [class^="content-"] > [class^="chatContent-"], +[class^="standardSidebarView-"] > [class^="contentRegion-"] { margin-left: 2px; } -[class^="channelTextArea_"] > [class^="scrollableContainer_"], -[class^="chat_"] [class^="toolbar_"] > [class^="search_"] > [class^="search_"] > [class^="searchBar_"] { +[class^="channelTextArea-"] > [class^="scrollableContainer-"], +[class^="chat-"] [class^="toolbar-"] > [class^="search-"] > [class^="search-"] > [class^="searchBar-"] { box-shadow: var(--wc-inner-edge); border-radius: 0; } -[class^="chat_"] > [class^="content_"]:before { +[class^="chat-"] > [class^="content-"]:before { display: none !important; } -[class^="standardSidebarView_"] > [class^="sidebarRegion_"] > [class^="sidebarRegionScroller_"], -[class^="standardSidebarView_"] > [class^="contentRegion_"] [class^="contentTransitionWrap_"] { +[class^="standardSidebarView-"] > [class^="sidebarRegion-"] > [class^="sidebarRegionScroller-"], +[class^="standardSidebarView-"] > [class^="contentRegion-"] [class^="contentTransitionWrap-"] { padding: 2px; box-shadow: var(--wc-inner-edge); } -[class^="standardSidebarView_"] > [class^="contentRegion_"], -[class^="standardSidebarView_"] > [class^="sidebarRegion_"] { +[class^="standardSidebarView-"] > [class^="contentRegion-"], +[class^="standardSidebarView-"] > [class^="sidebarRegion-"] { margin-top: 2px; } -[class^="standardSidebarView_"] > [class^="contentRegion_"] [class^="contentTransitionWrap_"] { +[class^="standardSidebarView-"] > [class^="contentRegion-"] [class^="contentTransitionWrap-"] { height: calc(100% - 4px); } -div[class^="sidebar_"] { +div[class^="sidebar-"] { border-left: 2px solid var(--primary); } -[class*="guilds_"] [class^="guildSeparator_"] { +[class*="guilds-"] [class^="guildSeparator-"] { height: 0; border-bottom: 1px solid var(--wc-bright, var(--highlight)); border-top: 1px solid var(--secondary); border-radius: 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; @@ -2374,78 +2370,78 @@ 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; } -[class*="menu_"] { - border-radius: 0 !important; +[class*="menu-"] { + border-radius: 0; padding: 2px; - box-shadow: var(--wc-frame) !important; + box-shadow: var(--wc-frame); } -[class*="menu_"] > [class^="scroller_"] { +[class*="menu-"] > [class^="scroller-"] { padding: 1px 1px 4px 1px !important; margin-right: -4px } -[class*="menu_"] > [class^="scroller_"] [class^="item_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"] { border-radius: 0 !important; margin: 1px 0; padding: 0 2px !important; } -[class*="menu_"] > [class^="scroller_"] [class^="customItem_"][id^="message-quickreact-"] > [class^="button_"] { +[class*="menu-"] > [class^="scroller-"] [class^="customItem-"][id^="message-quickreact-"] > [class^="button-"] { border-radius: 0 !important; box-shadow: var(--wc-outer-edge); } -[class*="menu_"] [class^="scroller_"] [class^="separator_"] { +[class*="menu-"] [class^="scroller-"] [class^="separator-"] { margin: 4px 1px; border-bottom: 1px solid var(--wc-bright, var(--highlight)); border-top: 1px solid var(--secondary); } -[class*="menu_"] > [class^="scroller_"] [class^="item_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"] { min-height: 16px !important; font-size: 12px; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"]:not(:has(> [class^="iconContainer_"] > [class^="icon_"])):not(:has(> [class^="iconContainerLeft_"])) { +[class*="menu-"] > [class^="scroller-"] [class^="item-"]:not(:has(> [class^="iconContainer-"] > [class^="icon-"])):not(:has(> [class^="iconContainerLeft-"])) { padding-inline-start: 20px !important; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"]:has(> [class^="iconContainer_"] > [class^="icon_"]) { +[class*="menu-"] > [class^="scroller-"] [class^="item-"]:has(> [class^="iconContainer-"] > [class^="icon-"]) { flex-direction: row-reverse; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"] > [class^="iconContainer_"]:has(> [class^="icon_"]), -[class*="menu_"] > [class^="scroller_"] [class^="item_"] > [class^="iconContainerLeft_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"] > [class^="iconContainer-"]:has(> [class^="icon-"]), +[class*="menu-"] > [class^="scroller-"] [class^="item-"] > [class^="iconContainerLeft-"] { margin-left: 0; margin-right: 2px; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"] > [class^="label_"] > [class^="subtext_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"] > [class^="label-"] > [class^="subtext-"] { line-height: 12px; margin-top: 0; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"] > [class^="iconContainer_"], -[class*="menu_"] > [class^="scroller_"] [class^="item_"] > [class^="iconContainer_"] > svg { +[class*="menu-"] > [class^="scroller-"] [class^="item-"] > [class^="iconContainer-"], +[class*="menu-"] > [class^="scroller-"] [class^="item-"] > [class^="iconContainer-"] > svg { width: 16px; height: 16px; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"] > [class^="hintContainer_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"] > [class^="hintContainer-"] { margin-right: 18px; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"][aria-haspopup="true"] > [class^="iconContainer_"] > [class^="caret_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"][aria-haspopup="true"] > [class^="iconContainer-"] > [class^="caret-"] { display: none; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"][aria-haspopup="true"] > [class^="iconContainer_"]:before { +[class*="menu-"] > [class^="scroller-"] [class^="item-"][aria-haspopup="true"] > [class^="iconContainer-"]:before { content:""; position: absolute; right: -2px; @@ -2460,10 +2456,10 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"][role="menuitemcheckbox"] > [class^="iconContainer_"] > svg[class^="icon_"]{ +[class*="menu-"] > [class^="scroller-"] [class^="item-"][role="menuitemcheckbox"] > [class^="iconContainer-"] > svg[class^="icon-"]{ display: none; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"][role="menuitemcheckbox"][aria-checked="true"] > [class^="iconContainer_"]:before { +[class*="menu-"] > [class^="scroller-"] [class^="item-"][role="menuitemcheckbox"][aria-checked="true"] > [class^="iconContainer-"]:before { content:""; position: absolute; right: 0px; @@ -2478,10 +2474,10 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"][role="menuitemradio"] > [class^="iconContainer_"] > svg[class^="icon_"]{ +[class*="menu-"] > [class^="scroller-"] [class^="item-"][role="menuitemradio"] > [class^="iconContainer-"] > svg[class^="icon-"]{ display: none; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"][role="menuitemradio"][aria-checked="true"] > [class^="iconContainer_"]:before { +[class*="menu-"] > [class^="scroller-"] [class^="item-"][role="menuitemradio"][aria-checked="true"] > [class^="iconContainer-"]:before { content:""; position: absolute; right: -1px; @@ -2496,26 +2492,26 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"][aria-haspopup="true"]:hover > [class^="iconContainer_"]:before, -[class*="menu_"] > [class^="scroller_"] [class^="item_"][role="menuitemcheckbox"][aria-checked="true"]:hover > [class^="iconContainer_"]:before, -[class*="menu_"] > [class^="scroller_"] [class^="item_"][role="menuitemradio"][aria-checked="true"]:hover > [class^="iconContainer_"]:before { +[class*="menu-"] > [class^="scroller-"] [class^="item-"][aria-haspopup="true"]:hover > [class^="iconContainer-"]:before, +[class*="menu-"] > [class^="scroller-"] [class^="item-"][role="menuitemcheckbox"][aria-checked="true"]:hover > [class^="iconContainer-"]:before, +[class*="menu-"] > [class^="scroller-"] [class^="item-"][role="menuitemradio"][aria-checked="true"]:hover > [class^="iconContainer-"]:before { background-color: white; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"][aria-disabled="true"] > [class^="label_"], -[class*="menu_"] > [class^="scroller_"] [class^="item_"][aria-disabled="true"] > [class^="label_"] > [class^="subtext_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"][aria-disabled="true"] > [class^="label-"], +[class*="menu-"] > [class^="scroller-"] [class^="item-"][aria-disabled="true"] > [class^="label-"] > [class^="subtext-"] { color: var(--secondary); text-shadow: 1px 1px 0 var(--wc-bright, var(--highlight)); } -[class^="submenu_"] > [class^="scroller_"] > [class^="listHeight_"][a=a] { +[class^="submenu-"] > [class^="scroller-"] > [class^="listHeight-"][a=a] { height: unset !important; } -[class^="submenuPaddingContainer_"] { +[class^="submenuPaddingContainer-"] { padding: 0; margin: -4px; } -[class*="menu_"] > [class^="scroller_"] [class^="item_"] > [class^="label_"] > [class^="roleRow_"] > [class^="roleCircle_"] { +[class*="menu-"] > [class^="scroller-"] [class^="item-"] > [class^="label-"] > [class^="roleRow-"] > [class^="roleCircle-"] { width: 12px; height: 12px; border-radius: 0; @@ -2525,392 +2521,109 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) margin-right: 2px; } -[class^="scroller_"]:not([class*="none_"]):not([class*="thin_"]):not(:not(:hover)[class*="fade_"])::-webkit-scrollbar, -[class*="scrollerBase_"]:not([class*="none_"]):not([class*="thin_"]):not(:not(:hover)[class*="fade_"])::-webkit-scrollbar { +[class^="scroller-"]:not([class*="none-"]):not([class*="thin-"]):not(:not(:hover)[class*="fade-"])::-webkit-scrollbar, +[class*="scrollerBase-"]:not([class*="none-"]):not([class*="thin-"]):not(:not(:hover)[class*="fade-"])::-webkit-scrollbar { min-width: 16px; width: 16px; } -[class^="scroller_"]:not([class*="thin_"])::-webkit-scrollbar-track, -[class*="scrollerBase_"]:not([class*="thin_"])::-webkit-scrollbar-track { +[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-track, +[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-track { background-color: var(--wc-bright, var(--highlight)); border: none; border-radius: 0; margin: 0; } -[class^="scroller_"]::-webkit-scrollbar-thumb, -[class*="scrollerBase_"]::-webkit-scrollbar-thumb, -[class^="scroller_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button, -[class*="scrollerBase_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button { - border-radius: 0 !important; - background: var(--primary) !important; +[class^="scroller-"]::-webkit-scrollbar-thumb, +[class*="scrollerBase-"]::-webkit-scrollbar-thumb, +[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button, +[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button { + border-radius: 0; + background: var(--primary); box-shadow: var(--wc-frame); - border: none !important; + border: none; } -[class^="scroller_"][class*="fade_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button, -[class*="scrollerBase_"][class*="fade_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button { +[class^="scroller-"][class*="fade-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button, +[class*="scrollerBase-"][class*="fade-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button { visibility: hidden; } -[class^="scroller_"][class*="fade_"]:not([class*="thin_"]):hover::-webkit-scrollbar-button:single-button, -[class*="scrollerBase_"][class*="fade_"]:not([class*="thin_"]):hover::-webkit-scrollbar-button:single-button { +[class^="scroller-"][class*="fade-"]:not([class*="thin-"]):hover::-webkit-scrollbar-button:single-button, +[class*="scrollerBase-"][class*="fade-"]:not([class*="thin-"]):hover::-webkit-scrollbar-button:single-button { visibility: visible; } -[class^="scroller_"]::-webkit-scrollbar-button:single-button:active, -[class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:active { +[class^="scroller-"]::-webkit-scrollbar-button:single-button:active, +[class*="scrollerBase-"]::-webkit-scrollbar-button:single-button:active { box-shadow: inset 1px 1px var(--secondary), inset -1px -1px var(--secondary); } -[class^="scroller_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button:vertical:decrement, -[class*="scrollerBase_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button:vertical:decrement { +[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button:vertical:decrement, +[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button:vertical:decrement { background-repeat: no-repeat !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4NCgk8cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSI3IiB5PSI4IiB4PSIzIiBmaWxsPSJtZW51dGV4dCIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjUiIHg9IjQiIHk9IjciIGZpbGw9Im1lbnV0ZXh0Ii8+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iMyIgeT0iNiIgeD0iNSIgZmlsbD0ibWVudXRleHQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB5PSI1IiB4PSI2IiBmaWxsPSJtZW51dGV4dCIvPg0KCQ0KCQ0KPC9zdmc+") !important; background-position: center center !important; } -[class^="scroller_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button:vertical:increment, -[class*="scrollerBase_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button:vertical:increment { +[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button:vertical:increment, +[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button:vertical:increment { background-repeat: no-repeat !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTUiIHdpZHRoPSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4NCgk8cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSI3IiB4PSIzIiB5PSI1IiBmaWxsPSJtZW51dGV4dCIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjUiIHk9IjYiIHg9IjQiIGZpbGw9Im1lbnV0ZXh0Ii8+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iMyIgeD0iNSIgeT0iNyIgZmlsbD0ibWVudXRleHQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4PSI2IiB5PSI4IiBmaWxsPSJtZW51dGV4dCIvPg0KCQ0KCQ0KPC9zdmc+") !important; background-position: center center !important; } -[class^="scroller_"]::-webkit-scrollbar-button:single-button, -[class*="scrollerBase_"]::-webkit-scrollbar-button:single-button { +[class^="scroller-"]::-webkit-scrollbar-button:single-button, +[class*="scrollerBase-"]::-webkit-scrollbar-button:single-button { } -[class^="scroller_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button:vertical:decrement, -[class*="scrollerBase_"]:not([class*="thin_"])::-webkit-scrollbar-button:single-button:vertical:decrement { +[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button:vertical:decrement, +[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-button:single-button:vertical:decrement { border-width: 0 8px 8px 8px; border-color: transparent transparent var(--text) transparent; } .postnet-expanded-category, .postnet-repo-wrapper, -[class^="inner_"]:has(> input), -[class^="inputWrapper_"] > [class*="input_"], -[class^="colorSwatch_"] > [class^="swatch_"][aria-expanded=true] { +[class^="inner-"]:has(> input), +[class^="inputWrapper-"] > [class*="input-"], +[class^="colorSwatch-"] > [class^="swatch-"][aria-expanded=true] { border: none !important; border-radius: 0 !important; box-shadow: var(--wc-inner-edge); } -[class^="colorSwatch_"] > [class^="swatch_"] { +[class^="colorSwatch-"] > [class^="swatch-"] { border: none !important; border-radius: 0 !important; box-shadow: var(--wc-outer-edge); } -[class^="inputWrapper_"] > [class*="input_"] { +[class^="inputWrapper-"] > [class*="input-"] { padding: 2px 2px 2px 4px; height: 22px; } -[class^="select_"][class*="lookFilled_"] { +[class^="select-"][class*="lookFilled-"] { border: none !important; border-radius: 0 !important; box-shadow: var(--wc-inner-edge); padding: 2px 2px 2px 4px; } -[class^="select_"][class*="lookFilled_"] > [class^="icons_"] { +[class^="select-"][class*="lookFilled-"] > [class^="icons-"] { margin: 2px; } -[class^="select_"][class*="lookFilled_"] > [class^="icons_"] > svg { +[class^="select-"][class*="lookFilled-"] > [class^="icons-"] > svg { background: var(--primary); box-shadow: var(--wc-outer-edge); width: 16px; height: 16px; } -[class^="select_"][class*="lookFilled_"][class*="open_"] > [class^="icons_"] > svg { +[class^="select-"][class*="lookFilled-"][class*="open-"] > [class^="icons-"] > svg { box-shadow: var(--wc-inner-edge); } -[class^="popout_"][role="listbox"] > [class^="option_"] { +[class^="popout-"][role="listbox"] > [class^="option-"] { padding: 2px 2px 2px 4px; margin: 2px 0; } -[class^="popout_"][role="listbox"] > [class^="option_"]:hover { +[class^="popout-"][role="listbox"] > [class^="option-"]:hover { background-color: var(--accent); -} - -[class^="userPopoutOuter_"] { - padding: 2px !important; - background: var(--primary) !important; - border-radius: 0 !important; - box-shadow: var(--wc-outer-edge); -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"], -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class^="userPopoutOverlayBackground_"] { - background: transparent; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"]:before { - display: none; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class*="avatarWrapper_"] { - top: 26px; - left: 8px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class*="avatarWrapper_"] - > [class^="avatarHoverTarget_"] - > [class^="wrapper_"] { - width: 56px !important; - height: 56px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class*="avatarWrapper_"] - [class*="avatarHint_"] { - width: 48px !important; - height: 48px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class*="avatarWrapper_"] - > [class^="avatarHoverTarget_"] - > [class^="wrapper_"] - > svg { - width: 55px !important; - height: 55px !important; -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"]:after { - position: absolute; - top: 2px; - left: 2px; - content: ""; - width: calc(100% - 4px); - height: 18px; - background: linear-gradient(to right, var(--profile-gradient-primary-color), var(--profile-gradient-secondary-color)); -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - [class^="banner_"] { - height: 18px !important; -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - [class^="banner_"] { - margin-top: 19px; - border-radius: 0; -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - [class^="banner_"]:after { - content: ""; - background: linear-gradient(to bottom, transparent 32px, var(--primary) 64px); - width: 340px; - height: 120px; - position: absolute; - top: 19px; - left: 0; -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - [class^="banner_"] { - display: none; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class^="userPopoutOverlayBackground_"] { - margin: 0 !important; - overflow: visible; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - > [class^="userPopoutOverlayBackground_"] { - margin-top: -72px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - > [class^="userPopoutOverlayBackground_"] { - margin-top: -48px !important; -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - > [class^="userPopoutOverlayBackground_"] { - margin-top: -78px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - [class*="usernameSection_"] { - padding: 0 !important; - position: absolute; - top: -60px; - left: 64px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - [class*="usernameSection_"] { - padding: 0 !important; - position: absolute; - top: -56px; - left: 64px; -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] { - padding: 0 !important; - position: absolute; - top: -54px; - left: 64px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - > div { - display: flex; - flex-direction: row !important; - align-items: center; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - > div - > [class^="userText_"] - > h1 { - font-size: 16px !important; - line-height: 16px !important; - text-shadow: 1px 1px 0 var(--primary); -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div - > [class*="userTag_"] { - line-height: 16px; - width: max-content; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div - > [class*="userTag_"] - > span { - text-shadow: 1px 1px 0 var(--primary); - font-size: 12px; - padding-left: 2px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div { - position: absolute; - top: -26px; - left: -62px; - z-index: 10; - flex-direction: row-reverse !important; -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div { - position: absolute; - top: -26px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div { - position: absolute; - top: -24px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - [class^="userText_"] - > div - .platform-icons-wrapper { - margin-left: 0 !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="usernameSection_"] - > div - > [class*="pronouns_"] { - font-size: 12px; - line-height: 12px; - padding-top: 0; - margin-left: 4px; - opacity: 0.75; - text-shadow: 1px 1px 0 var(--primary); -} -[class^="userPopoutOuter_"][class*="userProfileOuterThemed_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedWithBanner_"] - [class*="customStatusSection_"] { - padding: 0 !important; - position: absolute; - top: -38px; - left: 64px; -} -[class^="userPopoutOuter_"][class*="userProfileOuterUnthemed_"] - > [class^="userPopoutInner_"] - [class*="customStatusSection_"] { - padding: 0 !important; - position: absolute; - top: -30px; - left: 64px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"][class*="userProfileInnerThemedPremiumWithoutBanner_"] - [class*="customStatusSection_"] { - padding: 0 !important; - position: absolute; - top: -32px; - left: 64px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="customStatusSection_"] - > [class^="customStatus_"] { - font-size: 12px; - line-height: 12px; - text-shadow: 1px 1px 0 var(--primary); - display: flex; - flex-direction: row !important; - align-items: center; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="customStatusSection_"] - > [class^="customStatus_"] - > [class*="customStatusEmoji_"] { - width: 16px; - height: 16px; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class*="customStatusSection_"] - > [class^="customStatus_"] - > [class^="customStatusText_"] { - max-height: 24px; - overflow: hidden; - text-overflow: ellipsis; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - [class^="section_"]:has(> .mutual-guilds) { - padding-top: 0; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class^="profileBadges_"] { - visibility: hidden; - height: 30px !important; -} -[class^="userPopoutOuter_"] - > [class^="userPopoutInner_"] - > [class^="bannerSVGWrapper_"][viewbox$=" 60"] { - margin-bottom: 60px; -} -`, +}`, } @var select xmc_custom_bg 'Transparency for custom background' { @@ -2935,136 +2648,135 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) ) !important; } -[class^="appMount_"] { +[class^="appMount-"] { background: var(--custom-background), var(--primary) !important; background-repeat: no-repeat !important; background-size: cover !important; } -[class^="chat_"] > [class^="content_"] > [class^="container"] > [class^="chatContainer_"] > [class^="chatContent_"], -[class^="chat_"] > [class^="title_"], -[class^="markup_"] code, -[class*="embedFull_"], -[class^="chat_"] > [class^="title_"] [class^="searchBar_"], -[class^="content_"] - > [class^="sidebar_"] - > [class^="privateChannels_"] - > [class^="searchBar_"] - > [class^="searchBarComponent_"], -[class^="standardSidebarView_"] > [class^="contentRegion_"], -[class^="accountProfileCard_"], -[class^="base_"] > [class^="content_"] > [class^="wrapper_"], -[class^="perksModal_"], -[class^="base_"] > [class^="content_"] > [class^="container_"], -[class^="gameUpdates_"], -[class^="applicationStore_"], -[class^="pageWrapper_"], +[class^="chat-"] > [class^="content-"] > [class^="chatContent-"], +[class^="chat-"] > [class^="title-"], +[class^="markup-"] code, +[class*="embedFull-"], +[class^="chat-"] > [class^="title-"] [class^="searchBar-"], +[class^="content-"] + > [class^="sidebar-"] + > [class^="privateChannels-"] + > [class^="searchBar-"] + > [class^="searchBarComponent-"], +[class^="standardSidebarView-"] > [class^="contentRegion-"], +[class^="accountProfileCard-"], +[class^="base-"] > [class^="content-"] > [class^="wrapper-"], +[class^="perksModal-"], +[class^="base-"] > [class^="content-"] > [class^="container-"], +[class^="gameUpdates-"], +[class^="applicationStore-"], +[class^="pageWrapper-"], .messageLinkPreview-container { background-color: var(--transparent_background-primary) !important; } -[class^="channelTextArea_"], -[class^="content_"] > [class^="sidebar_"], -[class^="chat_"] > [class^="content_"] > [class^="container_"], -[class^="chat_"] > [class^="content_"] > [class^="chatContent_"], -[class^="standardSidebarView_"] - > [class^="sidebarRegion_"] - [class^="sidebarRegionScroller_"] { +[class^="channelTextArea-"], +[class^="content-"] > [class^="sidebar-"], +[class^="chat-"] > [class^="content-"] > [class^="container-"], +[class^="standardSidebarView-"] + > [class^="sidebarRegion-"] + [class^="sidebarRegionScroller-"] { background: var(--transparent_background-secondary) !important; } -nav[class*="guilds_"], -body > #app-mount > .platform-web > [class^="popout_"] > [class^="content_"] > [class^="wrapper_"] { +nav[class*="guilds-"], +body > #app-mount > .platform-web > [class^="popout-"] > [class^="content-"] > [class^="wrapper-"] { background: var(--transparent_background-tertiary) !important; } -[class^="chat_"], -[class^="content_"] > [class^="sidebar_"] > [class^="container_"], -[class^="content_"] > [class^="sidebar_"] > [class^="privateChannels_"], -[class^="content_"] - > [class^="sidebar_"] - > [class^="privateChannels_"] - > [class^="scroller_"], -nav[class*="guilds_"] > ul > [class^="scroller_"], -[class^="content_"] > [class^="sidebar_"] > [class^="panels_"], -[class^="chat_"] - > [class^="content_"] - > [class^="membersWrap_"] - > [class^="members_"] +[class^="chat-"], +[class^="content-"] > [class^="sidebar-"] > [class^="container-"], +[class^="content-"] > [class^="sidebar-"] > [class^="privateChannels-"], +[class^="content-"] + > [class^="sidebar-"] + > [class^="privateChannels-"] + > [class^="scroller-"], +nav[class*="guilds-"] > ul > [class^="scroller-"], +[class^="content-"] > [class^="sidebar-"] > [class^="panels-"], +[class^="chat-"] + > [class^="content-"] + > [class^="membersWrap-"] + > [class^="members-"] > div, -[class^="channelTextArea_"] > [class^="scrollableContainer_"], -[class^="chat_"] > [class^="title_"] [class^="children_"]:after, -[class^="chat_"] - > [class^="content_"] - > [class^="chatContent_"] - [class^="scrollerInner_"] - > [class^="wrapper_"], -[class^="chat_"] - > [class^="content_"] - > [class^="chatContent_"] - [class^="scrollerInner_"] - > [class^="wrapper_"] - > [class^="wrapper_"], -[class^="standardSidebarView_"], -[class^="standardSidebarView_"] - > [class^="contentRegion_"] - [class^="contentRegionScroller_"], -[class^="base_"] - > [class^="content_"] - > [class^="wrapper_"] - > [class^="navigationBar_"], -[class^="peopleColumn_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > [class*="container_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > [class^="scroller_"], -[class^="base_"] - > [class^="content_"] - > [class^="container_"] - > [class*="container_"] - > [class^="table_"] - > [class*="header_"], -[class^="applicationStore_"] [class^="headerBar_"], -[class^="applicationStore_"] [class^="scroller_"], +[class^="channelTextArea-"] > [class^="scrollableContainer-"], +[class^="chat-"] > [class^="title-"] [class^="children-"]:after, +[class^="chat-"] + > [class^="content-"] + > [class^="chatContent-"] + [class^="scrollerInner-"] + > [class^="wrapper-"], +[class^="chat-"] + > [class^="content-"] + > [class^="chatContent-"] + [class^="scrollerInner-"] + > [class^="wrapper-"] + > [class^="wrapper-"], +[class^="standardSidebarView-"], +[class^="standardSidebarView-"] + > [class^="contentRegion-"] + [class^="contentRegionScroller-"], +[class^="base-"] + > [class^="content-"] + > [class^="wrapper-"] + > [class^="navigationBar-"], +[class^="peopleColumn-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class*="container-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class^="scroller-"], +[class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class*="container-"] + > [class^="table-"] + > [class*="header-"], +[class^="applicationStore-"] [class^="headerBar-"], +[class^="applicationStore-"] [class^="scroller-"], #gm-settings-inject, -[class^="base_"] - > [class^="content_"] - > [class^="container_"] +[class^="base-"] + > [class^="content-"] + > [class^="container-"] > section - > section[class^="headerBarContainer_"], -[class^="chat_"] - > [class^="content_"] - > [class^="container_"] - > [class^="membersWrap_"] - > [class^="members_"], -[class^="chat_"] - > [class^="content_"] - > [class^="container_"] - > [class^="membersWrap_"], -[class^="chat_"] - > [class^="content_"] - > [class^="container_"] - > [class^="membersWrap_"] - > [class^="members_"] + > section[class^="headerBarContainer-"], +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"] + > [class^="members-"], +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"], +[class^="chat-"] + > [class^="content-"] + > [class^="container-"] + > [class^="membersWrap-"] + > [class^="members-"] > div, -body > #app-mount > .platform-web > [class^="popout_"] > [class^="content_"] > [class^="wrapper_"] > [class^="callContainer_"] { +body > #app-mount > .platform-web > [class^="popout-"] > [class^="content-"] > [class^="wrapper-"] > [class^="callContainer-"] { background: transparent !important; } -#gm-settings-inject [class^="auto_"]::-webkit-scrollbar-track, -#gm-settings-inject[class^="auto_"]::-webkit-scrollbar-track { +#gm-settings-inject [class^="auto-"]::-webkit-scrollbar-track, +#gm-settings-inject[class^="auto-"]::-webkit-scrollbar-track { background: transparent !important; border: none; } -#gm-settings-inject [class^="auto_"]::-webkit-scrollbar-thumb, -#gm-settings-inject[class^="auto_"]::-webkit-scrollbar-thumb { +#gm-settings-inject [class^="auto-"]::-webkit-scrollbar-thumb, +#gm-settings-inject[class^="auto-"]::-webkit-scrollbar-thumb { background: var(--interactive-normal); border: none; } -#gm-settings-inject [class^="auto_"]::-webkit-scrollbar, -#gm-settings-inject[class^="auto_"]::-webkit-scrollbar { +#gm-settings-inject [class^="auto-"]::-webkit-scrollbar, +#gm-settings-inject[class^="auto-"]::-webkit-scrollbar { width: 12px !important; height: 12px !important; }`, @@ -3075,199 +2787,199 @@ body > #app-mount > .platform-web > [class^="popout_"] > [class^="content_"] > [ @var text xmc_cbg_background 'Custom Background (full access to background, use url() for URLs)' "" @var select xmc_square_avatars 'Square Avatars' { - 'Off': `[class*="avatar_"], -[class*="avatar_"] [class*="image_"], -[class*="callAvatar_"], -[class*="callAvatar_"] [class*="speaking_"], -[class*="avatarDefault_"], -[class*="avatarSpeaking_"], -[class*="avatar_"] [class*="inner_"], -[class*="callAvatarVoice_"], -[class*="callAvatarWrapper_"] [class*="speaking_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="header_"] - [class*="avatar_"] - [class*="large_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="header_"] - [class*="avatar_"] - [class*="wrapper_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="contents_"] - [class*="avatar_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="wrapper_"] - [class*="contents_"] - [class*="avatar_"], -[class^="messageGroupCozy_"] [class*="contents_"] [class*="avatar_"], -[class*="autocomplete_"] - [class*="autocompleteInner_"] - [class*="autocompleteRow_"] - [class*="content_"] - [class*="wrapper_"], -[class*="guildsWrapper_"] - [class*="guilds_"] - [class*="guild_"] - [class*="guildInner_"], -div[class^="listItem_"] foreignObject img, -div[class^="listItem_"] foreignObject a[class^="button_"], -div[class^="listItem_"] foreignObject [class^="childWrapper_"], -div[class^="listItem_"] foreignObject [class^="folder_"], -div[class^="listItem_"] div[class^="wrapperSimple_"], -[class^="circleIconButton_"], -[class^="avatarContainer_"], -[class^="executedCommandAvatar_"] { + 'Off': `[class*="avatar-"], +[class*="avatar-"] [class*="image-"], +[class*="callAvatar-"], +[class*="callAvatar-"] [class*="speaking-"], +[class*="avatarDefault-"], +[class*="avatarSpeaking-"], +[class*="avatar-"] [class*="inner-"], +[class*="callAvatarVoice-"], +[class*="callAvatarWrapper-"] [class*="speaking-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="large-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="wrapper-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="contents-"] + [class*="avatar-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="wrapper-"] + [class*="contents-"] + [class*="avatar-"], +[class^="messageGroupCozy-"] [class*="contents-"] [class*="avatar-"], +[class*="autocomplete-"] + [class*="autocompleteInner-"] + [class*="autocompleteRow-"] + [class*="content-"] + [class*="wrapper-"], +[class*="guildsWrapper-"] + [class*="guilds-"] + [class*="guild-"] + [class*="guildInner-"], +div[class^="listItem-"] foreignObject img, +div[class^="listItem-"] foreignObject a[class^="button-"], +div[class^="listItem-"] foreignObject [class^="childWrapper-"], +div[class^="listItem-"] foreignObject [class^="folder-"], +div[class^="listItem-"] div[class^="wrapperSimple-"], +[class^="circleIconButton-"], +[class^="avatarContainer-"], +[class^="executedCommandAvatar-"] { border-radius: 50% !important; } -div[class^="listItem_"] foreignObject img, -div[class^="listItem_"] foreignObject [class*="selected_"] > img, -div[class^="listItem_"] foreignObject [class^="childWrapper_"], -div[class^="listItem_"] foreignObject [class*="selected_"] > [class^="childWrapper_"] { +div[class^="listItem-"] foreignObject img, +div[class^="listItem-"] foreignObject [class*="selected-"] > img, +div[class^="listItem-"] foreignObject [class^="childWrapper-"], +div[class^="listItem-"] foreignObject [class*="selected-"] > [class^="childWrapper-"] { transition: border-radius 0.35s ease; } -div[class^="listItem_"] foreignObject [class*="selected_"] > img, -div[class^="listItem_"] foreignObject [class*="selected_"] > [class^="childWrapper_"] { +div[class^="listItem-"] foreignObject [class*="selected-"] > img, +div[class^="listItem-"] foreignObject [class*="selected-"] > [class^="childWrapper-"] { border-radius: 20% !important; } -[class^="folderIconWrapper_"] - > [class^="closedFolderIconWrapper_"] - > [class^="icon_"] { +[class^="folderIconWrapper-"] + > [class^="closedFolderIconWrapper-"] + > [class^="icon-"] { border-radius: 50% !important; } -[class*="avatarMasked_"], -[class*="maskProfile_"], -[class*="mask_"], -[class*="avatar_"] svg[class*="mask_"] > foreignObject, -[class*="avatarWrapper_"] svg[class*="mask_"] > foreignObject, -[class*="avatarHint_"] > foreignObject, -[class*="wrapper_"] svg[class*="mask_"] > foreignObject, -[class*="callAvatarWrapper_"] svg[class*="callAvatarMask_"] > foreignObject, -div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, -[class^="bannerSVGWrapper_"] > foreignObject, -[class^="avatarDecoration_"] > foreignObject { +[class*="avatarMasked-"], +[class*="maskProfile-"], +[class*="mask-"], +[class*="avatar-"] svg[class*="mask-"] > foreignObject, +[class*="avatarWrapper-"] svg[class*="mask-"] > foreignObject, +[class*="avatarHint-"] > foreignObject, +[class*="wrapper-"] svg[class*="mask-"] > foreignObject, +[class*="callAvatarWrapper-"] svg[class*="callAvatarMask-"] > foreignObject, +div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject, +[class^="bannerSVGWrapper-"] > foreignObject, +[class^="avatarDecoration-"] > foreignObject { mask: none !important; mask-image: none !important; -webkit-mask-image: none !important; } -[class*="avatarHint_"], -[class*="avatarNormal_"], -[class*="avatarWrapper_"] [class*="wrapper_"], -[class*="avatarWrapper_"] [class*="image_"], -[class*="replyAvatar_"] { +[class*="avatarHint-"], +[class*="avatarNormal-"], +[class*="avatarWrapper-"] [class*="wrapper-"], +[class*="avatarWrapper-"] [class*="image-"], +[class*="replyAvatar-"] { border: none; border-radius: 10% !important; }`, - 'On*': `[class*="avatar_"], -[class*="avatar_"] [class*="image_"], -[class*="callAvatar_"], -[class*="callAvatar_"] [class*="speaking_"], -[class*="avatarDefault_"], -[class*="avatarSpeaking_"], -[class*="avatar_"] [class*="inner_"], -[class*="callAvatarVoice_"], -[class*="callAvatarWrapper_"] [class*="speaking_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="header_"] - [class*="avatar_"] - [class*="large_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="header_"] - [class*="avatar_"] - [class*="wrapper_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="message_"] - [class*="contents_"] - [class*="avatar_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - [class^="wrapper_"] - [class*="contents_"] - [class*="avatar_"], -[class^="messageGroupCozy_"] [class*="contents_"] [class*="avatar_"], -[class*="autocomplete_"] - [class*="autocompleteInner_"] - [class*="autocompleteRow_"] - [class*="content_"] - [class*="wrapper_"], -[class*="guildsWrapper_"] - [class*="guilds_"] - [class*="guild_"] - [class*="guildInner_"], -div[class^="listItem_"] foreignObject img, -div[class^="listItem_"] foreignObject a[class^="button_"], -div[class^="listItem_"] foreignObject [class^="childWrapper_"], -div[class^="listItem_"] foreignObject [class^="folder_"], -div[class^="listItem_"] div[class^="wrapperSimple_"], -[class^="circleIconButton_"], -[class^="folderIconWrapper_"], -[class^="avatarContainer_"], -[class^="executedCommandAvatar_"] { + 'On*': `[class*="avatar-"], +[class*="avatar-"] [class*="image-"], +[class*="callAvatar-"], +[class*="callAvatar-"] [class*="speaking-"], +[class*="avatarDefault-"], +[class*="avatarSpeaking-"], +[class*="avatar-"] [class*="inner-"], +[class*="callAvatarVoice-"], +[class*="callAvatarWrapper-"] [class*="speaking-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="large-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="header-"] + [class*="avatar-"] + [class*="wrapper-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="message-"] + [class*="contents-"] + [class*="avatar-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + [class^="wrapper-"] + [class*="contents-"] + [class*="avatar-"], +[class^="messageGroupCozy-"] [class*="contents-"] [class*="avatar-"], +[class*="autocomplete-"] + [class*="autocompleteInner-"] + [class*="autocompleteRow-"] + [class*="content-"] + [class*="wrapper-"], +[class*="guildsWrapper-"] + [class*="guilds-"] + [class*="guild-"] + [class*="guildInner-"], +div[class^="listItem-"] foreignObject img, +div[class^="listItem-"] foreignObject a[class^="button-"], +div[class^="listItem-"] foreignObject [class^="childWrapper-"], +div[class^="listItem-"] foreignObject [class^="folder-"], +div[class^="listItem-"] div[class^="wrapperSimple-"], +[class^="circleIconButton-"], +[class^="folderIconWrapper-"], +[class^="avatarContainer-"], +[class^="executedCommandAvatar-"] { border-radius: 10% !important; } -[class^="folderIconWrapper_"] - > [class^="closedFolderIconWrapper_"] - > [class^="icon_"] { +[class^="folderIconWrapper-"] + > [class^="closedFolderIconWrapper-"] + > [class^="icon-"] { border-radius: 6px !important; } -[class*="avatarMasked_"], -[class*="maskProfile_"], -[class*="mask_"], -[class*="avatar_"] svg[class*="mask_"] > foreignObject, -[class*="avatarWrapper_"] svg[class*="mask_"] > foreignObject, -[class*="avatarHint_"] > foreignObject, -[class*="wrapper_"] svg[class*="mask_"] > foreignObject, -[class*="callAvatarWrapper_"] svg[class*="callAvatarMask_"] > foreignObject, -div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, -[class^="bannerSVGWrapper_"] > foreignObject, -[class^="avatarDecoration_"] > foreignObject { +[class*="avatarMasked-"], +[class*="maskProfile-"], +[class*="mask-"], +[class*="avatar-"] svg[class*="mask-"] > foreignObject, +[class*="avatarWrapper-"] svg[class*="mask-"] > foreignObject, +[class*="avatarHint-"] > foreignObject, +[class*="wrapper-"] svg[class*="mask-"] > foreignObject, +[class*="callAvatarWrapper-"] svg[class*="callAvatarMask-"] > foreignObject, +div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject, +[class^="bannerSVGWrapper-"] > foreignObject, +[class^="avatarDecoration-"] > foreignObject { mask: none !important; mask-image: none !important; -webkit-mask-image: none !important; } -[class*="avatarHint_"], -[class*="avatarNormal_"], -[class*="avatarWrapper_"] [class*="wrapper_"], -[class*="avatarWrapper_"] [class*="image_"], -[class*="replyAvatar_"] { +[class*="avatarHint-"], +[class*="avatarNormal-"], +[class*="avatarWrapper-"] [class*="wrapper-"], +[class*="avatarWrapper-"] [class*="image-"], +[class*="replyAvatar-"] { border: none; border-radius: 10% !important; } -[class^="userPopout_"] [class*="avatarWrapper_"] > [class^="avatarHint_"] { +[class^="userPopout-"] [class*="avatarWrapper-"] > [class^="avatarHint-"] { display: none; } -[class^="userPopout_"] - [class*="avatarWrapper_"] - > [class^="avatar_"] +[class^="userPopout-"] + [class*="avatarWrapper-"] + > [class^="avatar-"] > svg > foreignObject { x: 8px; } -[class^="userPopout_"] - [class*="avatarWrapper_"] - > [class^="avatar_"] +[class^="userPopout-"] + [class*="avatarWrapper-"] + > [class^="avatar-"] > svg > rect { x: 0; @@ -3277,52 +2989,52 @@ div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, mask: none !important; } -[class^="accountProfileCard_"] [class^="avatar_"] { +[class^="accountProfileCard-"] [class^="avatar-"] { border: 0; background-color: transparent; } -[class^="numberBadge_"] { +[class^="numberBadge-"] { border-radius: 4px !important; }` } @var select xmc_9x_bot_tag '9x Bot Tag' { 'Off*': "", - 'On': `[class*="botTag_"] { + 'On': `[class*="botTag-"] { font-size: 0%; padding: 0 !important; background: none !important; } -[class*="botTag_"]:not([class*="botTagCompact_"]) { +[class*="botTag-"]:not([class*="botTagCompact-"]) { margin-left: 6px; } -[class*="botTag_"] [class*="botText_"] { +[class*="botTag-"] [class*="botText-"] { font-size: 0; display: none; } -:not([class^="repliedMessage_"]) [class*="botTagCompact_"] { +:not([class^="repliedMessage-"]) [class*="botTagCompact-"] { margin-right: -6px !important; } -[class^="repliedMessage_"] [class*="botTagCompact_"] { +[class^="repliedMessage-"] [class*="botTagCompact-"] { margin-right: 4px !important; margin-left: 4px !important; } -[class*="botTag_"] svg[class^="botTagVerified_"] { +[class*="botTag-"] svg[class^="botTagVerified-"] { width: 16px; height: 16px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABlSURBVDhPzY5RCsAwCEM9+m6+TYsj2ujaj8EePGitCZXfchKXGMsHcaGIB7NNCQ/cOnYvCqYQ6jwzUhICqBPmnxY4+Rx8+0EG30xSoIQlB2dmEVbmZWZToIyFOtiGEQxsBTcRuQCANOfCY5uAHgAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); } -[class*="botTag_"] svg[class^="botTagVerified_"] > path { +[class*="botTag-"] svg[class^="botTagVerified-"] > path { display: none; } -[class*="botTag_"]:after { +[class*="botTag-"]:after { visibility: visible; content: ""; width: 16px; @@ -3335,30 +3047,30 @@ div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, background-size: 16px 16px; } -[class*="message_"] [class*="botTag_"]:after { +[class*="message-"] [class*="botTag-"]:after { top: 4px !important; } -[class*="message_"][class*="compact_"] [class*="botTag_"]:after { +[class*="message-"][class*="compact-"] [class*="botTag-"]:after { top: 3px !important; } -[class^="repliedMessage_"] [class*="botTagCompact_"]:after { +[class^="repliedMessage-"] [class*="botTagCompact-"]:after { top: 1px !important; }`, } @var select xmc_nyantro 'Nyantro Progress Bar' { 'Off*': "", - 'On': `[class^="progressBarContainer_"] { + 'On': `[class^="progressBarContainer-"] { background: url("data:image/gif;base64,R0lGODlhMAAMAIAAAAxBd////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQECgAAACwAAAAAMAAMAAACJYSPqcvtD6MKstpLr24Z9A2GYvJ544mhXQmxoesElIyCcB3dRgEAIfkEBAoAAAAsAQACAC0ACgAAAiGEj6nLHG0enNQdWbPefOHYhSLydVhJoSYXPO04qrAmJwUAIfkEBAoAAAAsBQABACkACwAAAiGEj6nLwQ8jcC5ViW3evHt1GaE0flxpphn6BNTEqvI8dQUAIfkEBAoAAAAsAQABACoACwAAAiGEj6nLwQ+jcU5VidPNvPtvad0GfmSJeicUUECbxnK0RgUAIfkEBAoAAAAsAAAAACcADAAAAiCEj6mbwQ+ji5QGd6t+c/v2hZzYiVpXmuoKIikLm6hXAAAh+QQECgAAACwAAAAALQAMAAACI4SPqQvBD6NysloTXL480g4uX0iW1Wg21oem7ismLUy/LFwAACH5BAQKAAAALAkAAAAkAAwAAAIghI8Joe0Po0yBWTaz3g/z7UXhMX7kYmplmo0rC8cyUgAAIfkEBAoAAAAsBQAAACUACgAAAh2Ejwmh7Q+jbIFZNrPeEXPudU74IVa5kSiYqOtRAAAh+QQECgAAACwEAAAAIgAKAAACHISPELfpD6OcqTGKs4bWRp+B36YFi0mGaVmtWQEAIfkEBAoAAAAsAAAAACMACgAAAh2EjxC36Q+jnK8xirOW1kavgd+2BYtJhmnpiGtUAAAh+QQECgAAACwAAAAALgALAAACIYSPqcvtD+MKicqLn82c7e6BIhZQ5jem6oVKbfdqQLzKBQAh+QQECgAAACwCAAIALAAJAAACHQx+hsvtD2OStDplKc68r2CEm0eW5uSN6aqe1lgAADs="); } -[class^="progressBarContainer_"] [class^="progressBar_"] { +[class^="progressBarContainer-"] [class^="progressBar-"] { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAMCAIAAAAs6UAAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUNCQzIyREQ0QjdEMTFFMzlEMDM4Qzc3MEY0NzdGMDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUNCQzIyREU0QjdEMTFFMzlEMDM4Qzc3MEY0NzdGMDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQ0JDMjJEQjRCN0QxMUUzOUQwMzhDNzcwRjQ3N0YwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQ0JDMjJEQzRCN0QxMUUzOUQwMzhDNzcwRjQ3N0YwOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PovDFgYAAAAmSURBVHjaYvjPwMAAxjMZmBhA9H8INv4P4TPM/A+m04zBNECAAQBCWQv9SUQpVgAAAABJRU5ErkJggg=="); background-size: contain; } -[class^="progressBarContainer_"] [class^="progressBar_"]:after { +[class^="progressBarContainer-"] [class^="progressBar-"]:after { content: ""; background: url("data:image/gif;base64,R0lGODlhIgAVAKIHAL3/9/+Zmf8zmf/MmZmZmf+Z/wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpDMkJBNjY5RTU1NEJFMzExOUM4QUM2MDAwNDQzRERBQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCREIzOEIzMzRCN0IxMUUzODhEQjgwOTYzMTgyNTE0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCREIzOEIzMjRCN0IxMUUzODhEQjgwOTYzMTgyNTE0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM1QkE2NjlFNTU0QkUzMTE5QzhBQzYwMDA0NDNEREFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMyQkE2NjlFNTU0QkUzMTE5QzhBQzYwMDA0NDNEREFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkECQcABwAsAAAAACIAFQAAA6J4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93bqCA7f7TFaYoIFAMMwczB5EkTzJllEUttmIGoG5bfPBjDawD7CsJC67uWcv2CRov929C/q2ZpcBbYBmLGk6W1BRY4MUDnMvJEsBAXdlknk2fCeRk2iJliAijpBlEmigjR0plKSgpKWvEUheF4tUZqZID1RHjEe8PsDBBwkAIfkECQcABwAsAAAAACIAFQAAA6B4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93TqS40XiKSYgTLBgIBAMqE/zmQSaZEzns+jQ9pC/5dQJ0VIv5KMVWxqb36opxHrNvu9ptPfGbmsBbgSAeRdydCdjXWRPchQPh1hNAQF4TpM9NnwukpRyi5chGjqJEoSOIh0plaYsZBKvsCuNjY5ptElgDyFIuj6+vwcJACH5BAkHAAcALAAAAAAiABUAAAOfeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GKifWaddvNQAtszXYCxgR/Zy5jYTFeXmSDiIZGdQEBd06QSBQ5e4cEkE9nnZQaG2J4F4MSLx8rkqUSZBeurhlTUqsLsi60DpZxSWBJugcJACH5BAkHAAcALAAAAAAiABUAAAOgeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GuifWaddvNwMkZtmY7AWMEgGcKY2ExXl5khFMVc0Z1AQF3TpJShDl8iASST2efloV5JTyJFpgOch8dgW9KZxexshGNLqgLtbW0SXFwvaJfCQAh+QQJBwAHACwAAAAAIgAVAAADoXi63P7wmUmrnVGOzbvfRsYYXGGe6MmF4kEOaSGYMwq2LizHfDGwIlLPNKGZfi6gZmggEAy2iVPZEKZqzakq+1xUFFYe90lxTsHmim6HGpvf3eR7skYJ3PC5tyystc0AboFnVXQ9XFJTZIQOYUYFTQEBeWaSVF4bbCeRk1meBJYSL3WbaReMIxQfHXh6jaYXsbEQni6oaF21ERR7l0ksvA0JACH5BAkHAAcALAAAAAAiABUAAAOeeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMfFlA4hTITEMxkIBMOuADwmhzqeM6mashTCXKw2TVKQyKuTRSx2wegnNkyJ1ozpOFiMLqcEU8BZHx6NYW8nVlZefQ1tZgQBAXJIi1eHUTRwi0lhl48QL0sogxaGDhMlUo2gh14fHhcVmnOrrxNqrU9joX21Q0IUElm7DQkAIfkECQcABwAsAAAAACIAFQAAA6J4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93bqCA7f7TFaYoIFAMMwczB5EkTzJllEUttmIGoG5bfPBjDawD7CsJC67uWcv2CRov929C/q2ZpcBbYBmLGk6W1BRY4MUDnMvJEsBAXdlknk2fCeRk2iJliAijpBlEmigjR0plKSgpKWvEUheF4tUZqZID1RHjEe8PsDBBwkAIfkECQcABwAsAAAAACIAFQAAA6B4umv+MDpG6zEj682zsRaWFWRpltoHMuJZCCRseis7xG5eDGp93TqS40XiKSYgTLBgIBAMqE/zmQSaZEzns+jQ9pC/5dQJ0VIv5KMVWxqb36opxHrNvu9ptPfGbmsBbgSAeRdydCdjXWRPchQPh1hNAQF4TpM9NnwukpRyi5chGjqJEoSOIh0plaYsZBKvsCuNjY5ptElgDyFIuj6+vwcJACH5BAkHAAcALAAAAAAiABUAAAOfeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GKifWaddvNQAtszXYCxgR/Zy5jYTFeXmSDiIZGdQEBd06QSBQ5e4cEkE9nnZQaG2J4F4MSLx8rkqUSZBeurhlTUqsLsi60DpZxSWBJugcJACH5BAkHAAcALAAAAAAiABUAAAOgeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMd8MbAiUu802flYGIhwaCAQDKpQ86nUoWqF6dP00wIby572SXE6vyMrlmhuu9GuifWaddvNwMkZtmY7AWMEgGcKY2ExXl5khFMVc0Z1AQF3TpJShDl8iASST2efloV5JTyJFpgOch8dgW9KZxexshGNLqgLtbW0SXFwvaJfCQAh+QQJBwAHACwAAAAAIgAVAAADoXi63P7wmUmrnVGOzbvfRsYYXGGe6MmF4kEOaSGYMwq2LizHfDGwIlLPNKGZfi6gZmggEAy2iVPZEKZqzakq+1xUFFYe90lxTsHmim6HGpvf3eR7skYJ3PC5tyystc0AboFnVXQ9XFJTZIQOYUYFTQEBeWaSVF4bbCeRk1meBJYSL3WbaReMIxQfHXh6jaYXsbEQni6oaF21ERR7l0ksvA0JACH5BAkHAAcALAAAAAAiABUAAAOeeLrc/vCZSaudUY7Nu99GxhhcYZ7oyYXiQQ5pIZgzCrYuLMfFlA4hTITEMxkIBMOuADwmhzqeM6mashTCXKw2TVKQyKuTRSx2wegnNkyJ1ozpOFiMLqcEU8BZHx6NYW8nVlZefQ1tZgQBAXJIi1eHUTRwi0lhl48QL0sogxaGDhMlUo2gh14fHhcVmnOrrxNqrU9joX21Q0IUElm7DQkAOw=="); background-size: contain; @@ -3369,527 +3081,527 @@ div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, top: -6px; } -[class^="progressBarContainer_"] [class^="tadaIcon_"] { +[class^="progressBarContainer-"] [class^="tadaIcon-"] { display: none; }`, } @var select xmc_textarea 'Text area style' { 'Default': "", - 'Typing Above*': `[class*="chat_"] [class*="chatContent_"] form { + 'Typing Above*': `[class*="chat-"] [class*="chatContent-"] form { position: relative; margin: 0; } -[class*="chat_"] form [class*="typing_"] { +[class*="chat-"] form [class*="typing-"] { position: absolute; top: -2px; left: 10px; } -[class*="channelTextArea_"] { +[class*="channelTextArea-"] { margin-bottom: 10px !important; margin-top: 24px !important; padding: 0 !important; } -[class*="channelTextArea_"] [class*="inner_"] { +[class*="channelTextArea-"] [class*="inner-"] { border-radius: 6px; } -[class*="sansAttachButton_"] { +[class*="sansAttachButton-"] { padding-left: 10px !important; } .typing .ellipsis, -[class*="typing_"] span[class*="ellipsis_"] { +[class*="typing-"] span[class*="ellipsis-"] { display: none; } -form [class*="typing_"] { +form [class*="typing-"] { background-color: transparent !important; } -[class^="scrollerSpacer_"] { +[class^="scrollerSpacer-"] { height: 8px !important; } -[class^="chatContent_"] > form:before { +[class^="chatContent-"] > form:before { display: none !important; }`, - 'Mobile': `[class*="chat_"] [class*="chatContent_"] form { + 'Mobile': `[class*="chat-"] [class*="chatContent-"] form { position: relative; margin: 0; } -[class*="chat_"] form [class*="typing_"] { +[class*="chat-"] form [class*="typing-"] { position: absolute; top: -2px; left: 10px; } -[class*="channelTextArea_"] { +[class*="channelTextArea-"] { margin-bottom: 10px !important; margin-top: 24px !important; padding: 0 !important; } -[class*="channelTextArea_"] [class*="inner_"] { +[class*="channelTextArea-"] [class*="inner-"] { border-radius: 6px; } -[class*="sansAttachButton_"] { +[class*="sansAttachButton-"] { padding-left: 10px !important; } .typing .ellipsis, -[class*="typing_"] span[class*="ellipsis_"] { +[class*="typing-"] span[class*="ellipsis-"] { display: none; } -form [class*="typing_"] { +form [class*="typing-"] { background-color: transparent !important; } -[class^="scrollerSpacer_"] { +[class^="scrollerSpacer-"] { height: 4px !important; } -[class^="chatContent_"] > form:before { +[class^="chatContent-"] > form:before { display: none !important; } -[class^="channelTextArea_"], -[class^="channelTextArea_"] > [class^="scrollableContainer_"] { +[class^="channelTextArea-"], +[class^="channelTextArea-"] > [class^="scrollableContainer-"] { background-color: transparent !important; } -[class^="channelTextArea_"] > [class^="scrollableContainer_"] { +[class^="channelTextArea-"] > [class^="scrollableContainer-"] { overflow: hidden !important; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] { padding-left: 0 !important; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] { margin-right: 10px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"] - > [class^="attachButton_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] + > [class^="attachButton-"] { margin-left: 0 !important; padding: 10px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] { margin-right: 10px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] > div { padding-left: 10px; margin-left: 4px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] > * { width: 44px; margin-right: 10px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="buttonContainer-"] > button, -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] > .expression-picker-chat-input-button > * { width: 44px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"], -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"], -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"], +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"], +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] > * { background-color: var(--background-secondary); border-radius: 22px 22px 22px 22px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] { margin-left: 0; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"]:before { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"]:before { display: none; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] > button { width: 44px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] > button - > [class^="contents_"] { + > [class^="contents-"] { margin-left: 4px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] > button - > [class^="contents_"] - > [class*="activeButtonChild_"] { + > [class^="contents-"] + > [class*="activeButtonChild-"] { color: var(--interactive-active); } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - > [class^="separator_"] - > [class^="buttonContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="buttons-"] + > [class^="separator-"] + > [class^="buttonContainer-"] > button:not([disabled]) { background-color: var(--brand-experiment); border-radius: 22px 22px 22px 22px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] > div:not([class]) { background-color: var(--background-secondary); } -[class^="channelTextArea_"] > [class^="attachedBars_"] { +[class^="channelTextArea-"] > [class^="attachedBars-"] { background: var(--background-primary) !important; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] { max-height: 128px; overflow-y: scroll; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar { width: 16px; height: 16px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar-corner { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-corner { background-color: transparent; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar-thumb { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-thumb { background-color: var(--scrollbar-auto-thumb); min-height: 40px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar-thumb, -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"]::-webkit-scrollbar-track { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-thumb, +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"]::-webkit-scrollbar-track { border: 4px solid transparent; background-clip: padding-box; border-radius: 8px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="attachWrapper-"] { max-height: 44px; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] { +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] { align-items: center; } -[class^="channelTextArea_"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] +[class^="channelTextArea-"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] > div - > [class^="placeholder_"] { + > [class^="placeholder-"] { left: 14px; }`, - 'Fullwidth': `[class*="chat_"] [class*="chatContent_"] form { + 'Fullwidth': `[class*="chat-"] [class*="chatContent-"] form { position: relative; margin: 0; } -[class*="chat_"] form [class*="typing_"] { +[class*="chat-"] form [class*="typing-"] { position: absolute; top: -2px; left: 10px; } -[class*="channelTextArea_"] { +[class*="channelTextArea-"] { margin-bottom: 10px !important; margin-top: 24px !important; padding: 0 !important; } -[class*="channelTextArea_"] [class*="inner_"] { +[class*="channelTextArea-"] [class*="inner-"] { border-radius: 6px; } -[class*="sansAttachButton_"] { +[class*="sansAttachButton-"] { padding-left: 10px !important; } .typing .ellipsis, -[class*="typing_"] span[class*="ellipsis_"] { +[class*="typing-"] span[class*="ellipsis-"] { display: none; } -form [class*="typing_"] { +form [class*="typing-"] { background-color: transparent !important; } -[class^="scrollerSpacer_"] { +[class^="scrollerSpacer-"] { height: 4px !important; } -[class^="chatContent_"] > form:before { +[class^="chatContent-"] > form:before { display: none !important; } -[class^="chatContent_"] > form { +[class^="chatContent-"] > form { padding: 0 !important; bottom: 0; } -[class^="chatContent_"] > form [class^="channelTextArea"] { +[class^="chatContent-"] > form [class^="channelTextArea"] { margin-bottom: 0 !important; } -[class^="chatContent_"] > form [class^="channelTextArea"] > [class^="scrollableContainer_"] { +[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] { border-radius: 0 !important; border: 0 !important; } -[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_"] { +[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-"] { min-height: 53px; } -[class^="chatContent_"] > form [class^="channelTextArea"] > [class^="scrollableContainer_"] > [class^="inner_"] > [class^="textArea_"] > div > [class*="fontSize16Padding_"] { +[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="textArea-"] > div > [class*="fontSize16Padding-"] { padding-top: 15px !important; padding-bottom: 15px !important; } -[class^="chatContent_"] > form [class^="channelTextArea"] > [class^="scrollableContainer_"] > [class^="inner_"] > [class^="buttons_"] [class*="emojiButton_"] { +[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="buttons-"] [class*="emojiButton-"] { max-height: unset; } -[class^="messagesWrapper_"] { +[class^="messagesWrapper-"] { margin-bottom: 8px; }`, } @var select xmc_status_icons 'EndPwn style status icons' { 'Off': "", - 'On*': `[class^="member_"] [class^="avatar_"] [class*="wrapper_"] > svg, -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] + 'On*': `[class^="member-"] [class^="avatar-"] [class*="wrapper-"] > svg, +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"], -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] + > svg[class^="cursorDefault-"], +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"], -[class^="channel_"] [class^="avatar_"] [class*="wrapper_"] > svg, -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"], +[class^="channel-"] [class^="avatar-"] [class*="wrapper-"] > svg, +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"], -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] + > svg[class^="cursorDefault-"], +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"], -[class^="autocompleteRowIcon_"] > [class^="wrapper_"] > svg, -[class^="userInfo_"] [class^="avatar_"] > svg, -[class^="panels_"] [class*="avatar_"] > svg > svg, -[class^="modal_"] > [class^="inner_"] [class^="avatar_"] > svg, -[class^="focusLock_"][aria-modal="true"] - > [class^="root_"] - [class^="avatar_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"], +[class^="autocompleteRowIcon-"] > [class^="wrapper-"] > svg, +[class^="userInfo-"] [class^="avatar-"] > svg, +[class^="panels-"] [class*="avatar-"] > svg > svg, +[class^="modal-"] > [class^="inner-"] [class^="avatar-"] > svg, +[class^="focusLock-"][aria-modal="true"] + > [class^="root-"] + [class^="avatar-"] > svg, -[class^="userPopoutInner_"] - [class^="avatarHoverTarget_"] - > [class^="wrapper_"] +[class^="userPopoutInner-"] + [class^="avatarHoverTarget-"] + > [class^="wrapper-"] > svg { overflow: visible; contain: none !important; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect, -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect, -[class^="modal_"] - > [class^="inner_"] - [class^="avatar_"] +[class^="modal-"] + > [class^="inner-"] + [class^="avatar-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect { x: -18.5; y: -17; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle, -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle { cx: -20.1; r: 1.5; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(1), -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(1) { cy: -16; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(2), -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(2) { cy: -8; } -[class^="member_"] - [class^="avatar_"] - [class^="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class^="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(3), -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] - > svg[class^="dots_"] + > svg[class^="cursorDefault-"] + > svg[class^="dots-"] circle:nth-child(3) { cy: 0; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect[fill^="var(--status-"], -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg - > svg[class^="cursorDefault_"] + > svg[class^="cursorDefault-"] > rect[fill^="#"] { mask: none !important; x: -18.5; @@ -3898,8 +3610,8 @@ form [class*="typing_"] { height: 32px; } -[class^="panels_"] - [class*="avatar_"] +[class^="panels-"] + [class*="avatar-"] > svg > rect[mask^="url(#svg-mask-status"] { mask: none !important; @@ -3908,8 +3620,8 @@ form [class*="typing_"] { width: 4px; height: 32px; } -[class^="panels_"] [class*="avatar_"] > svg > svg > rect[fill^="var(--status-"], -[class^="panels_"] [class*="avatar_"] > svg > svg > rect[fill^="#"] { +[class^="panels-"] [class*="avatar-"] > svg > svg > rect[fill^="var(--status-"], +[class^="panels-"] [class*="avatar-"] > svg > svg > rect[fill^="#"] { mask: none !important; x: 17.5; y: -17; @@ -3917,14 +3629,14 @@ form [class*="typing_"] { height: 32px; } -[class^="member_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="member-"] + [class^="avatar-"] + [class*="wrapper-"] > svg rect[mask^="url(#svg-mask-status-"], -[class^="channel_"] - [class^="avatar_"] - [class*="wrapper_"] +[class^="channel-"] + [class^="avatar-"] + [class*="wrapper-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; @@ -3934,8 +3646,8 @@ form [class*="typing_"] { y: 0; } -[class^="autocompleteRowIcon_"] - > [class^="wrapper_"] +[class^="autocompleteRowIcon-"] + > [class^="wrapper-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; @@ -3945,8 +3657,8 @@ form [class*="typing_"] { y: 0; } -[class^="userInfo_"] - [class^="avatar_"] +[class^="userInfo-"] + [class^="avatar-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; @@ -3956,9 +3668,9 @@ form [class*="typing_"] { y: 0; } -[class^="userProfileModalInner_"] - [class^="header_"] - [class*="avatar_"] +[class^="userProfileModalInner-"] + [class^="header-"] + [class*="avatar-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; @@ -3968,36 +3680,36 @@ form [class*="typing_"] { y: 0; } -[class^="userPopoutInner_"] - [class^="avatarHoverTarget_"] - > [class^="wrapper_"] +[class^="userPopoutInner-"] + [class^="avatarHoverTarget-"] + > [class^="wrapper-"] > svg circle, -[class^="userPopoutInner_"] - [class^="avatarHoverTarget_"] - > [class^="wrapper_"] +[class^="userPopoutInner-"] + [class^="avatarHoverTarget-"] + > [class^="wrapper-"] > svg > rect[fill="black"], -[class^="userProfileModalInner_"] - [class^="header_"] - [class^="wrapper_"] +[class^="userProfileModalInner-"] + [class^="header-"] + [class^="wrapper-"] > svg circle, -[class^="userProfileModalInner_"] - [class^="header_"] - [class^="wrapper_"] +[class^="userProfileModalInner-"] + [class^="header-"] + [class^="wrapper-"] > svg > rect[fill="black"] { display: none; } -[class^="accountProfileCard_"] - [class*="avatar_"] +[class^="accountProfileCard-"] + [class*="avatar-"] > svg rect[mask^="url(#svg-mask-status-"], -[class^="userPopoutInner_"] - [class^="avatarHoverTarget_"] - > [class^="wrapper_"] +[class^="userPopoutInner-"] + [class^="avatarHoverTarget-"] + > [class^="wrapper-"] > svg rect[mask^="url(#svg-mask-status-"] { mask: none !important; @@ -4010,144 +3722,144 @@ form [class*="typing_"] { @var select xmc_cozy_compact 'Cozy Compact Hybrid' { 'Off': "", 'On*': `html:not(.a11y-font-scaled-down) - [class*="message_"]:not([class*="systemMessage_"]):not([class*="compact_"]), + [class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]), html:not(.a11y-font-scaled-down) - [class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"], + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"], html:not(.a11y-font-scaled-down) - [class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="container_"]:not([class*="systemMessage_"]):not([class*="compact_"]) { + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="container-"]:not([class*="systemMessage-"]):not([class*="compact-"]) { padding: 0 !important; padding-left: 16px !important; } -[class*="message_"]:not([class*="systemMessage_"]):not([class*="compact_"]), -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"]:not([class*="systemMessage_"]):not([class*="compact_"]), -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="container_"]:not([class*="systemMessage_"]):not([class*="compact_"]) { +[class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]), +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"]:not([class*="systemMessage-"]):not([class*="compact-"]), +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="container-"]:not([class*="systemMessage-"]):not([class*="compact-"]) { padding-left: 16px !important; } -[class*="message_"][class*="systemMessage_"] { +[class*="message-"][class*="systemMessage-"] { padding-left: 32px !important; } -[class*="message_"][class*="systemMessage_"] [class^="iconContainer_"] { +[class*="message-"][class*="systemMessage-"] [class^="iconContainer-"] { margin-right: 0; width: 24px; } html:not(.a11y-font-scaled-down) - [class*="message_"]:not([class*="compact_"]) - > [class^="contents_"] - > [class^="header_"], + [class*="message-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"], html:not(.a11y-font-scaled-down) - [class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"]:not([class*="compact_"]) - > [class^="contents_"] - > [class^="header_"], + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"], html:not(.a11y-font-scaled-down) - [class*="message_"]:not([class*="compact_"]) - > [class^="wrapper_"] - > [class^="contents_"] - > [class^="header_"] { + [class*="message-"]:not([class*="compact-"]) + > [class^="wrapper-"] + > [class^="contents-"] + > [class^="header-"] { padding-left: 0 !important; margin-left: 24px; padding-bottom: 0 !important; } .a11y-font-scaled-down - [class*="message_"]:not([class*="compact_"]) - > [class^="contents_"] - > [class^="header_"], + [class*="message-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"], .a11y-font-scaled-down - [class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"]:not([class*="compact_"]) - > [class^="contents_"] - > [class^="header_"] + [class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"]:not([class*="compact-"]) + > [class^="contents-"] + > [class^="header-"] .a11y-font-scaled-down - [class*="message_"]:not([class*="compact_"]) - > [class^="wrapper_"] - > [class^="contents_"] - > [class^="header_"] { + [class*="message-"]:not([class*="compact-"]) + > [class^="wrapper-"] + > [class^="contents-"] + > [class^="header-"] { margin-left: calc(24px - 4.5rem); } -[class*="message_"] - > [class^="wrapper_"] - > [class^="contents_"] - [class^="avatar_"], -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"] - > [class^="contents_"] - [class^="avatar_"], -[class*="message_"] > [class^="contents_"] [class^="avatar_"] { +[class*="message-"] + > [class^="wrapper-"] + > [class^="contents-"] + [class^="avatar-"], +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"] + > [class^="contents-"] + [class^="avatar-"], +[class*="message-"] > [class^="contents-"] [class^="avatar-"] { width: 20px; height: 20px; left: 16px; } -[class*="message_"] - > [class^="wrapper_"] - > [class^="contents_"] - [class^="avatar_"] { +[class*="message-"] + > [class^="wrapper-"] + > [class^="contents-"] + [class^="avatar-"] { left: 0 !important; } -[class^="messagesWrapper_"] - [class^="scrollerInner_"] - > [class^="wrapper_"] - > [class^="contents_"], -[class*="message_"] > [class^="contents_"], -[class*="message_"] > [class^="wrapper_"] > [class^="contents_"] { +[class^="messagesWrapper-"] + [class^="scrollerInner-"] + > [class^="wrapper-"] + > [class^="contents-"], +[class*="message-"] > [class^="contents-"], +[class*="message-"] > [class^="wrapper-"] > [class^="contents-"] { margin-left: 0; padding: 0; } -[class*="message_"][class*="systemMessage_"] > [class^="container_"] { +[class*="message-"][class*="systemMessage-"] > [class^="container-"] { padding: 0; } -[class*="cozy_"][class*="hasThread_"]::after { +[class*="cozy-"][class*="hasThread-"]::after { display: none; } -[class*="message_"] > [class^="wrapper_"] { +[class*="message-"] > [class^="wrapper-"] { padding-left: 0; } -[class^="messagesWrapper_"] [class^="scrollerInner_"]:after { +[class^="messagesWrapper-"] [class^="scrollerInner-"]:after { height: 4px !important; } -[class*="message_"]:not([class*="compact_"]) - [class^="contents_"] - [class*="timestampVisibleOnHover_"] { +[class*="message-"]:not([class*="compact-"]) + [class^="contents-"] + [class*="timestampVisibleOnHover-"] { display: none; } -[class^="messagesWrapper_"] [class^="scrollerInner_"] [class^="divider_"] { +[class^="messagesWrapper-"] [class^="scrollerInner-"] [class^="divider-"] { margin: 4px; height: 8px; } -[class^="messagesWrapper_"] [class^="scrollerInner_"] [class*="groupStart_"][class*="cozy_"] { +[class^="messagesWrapper-"] [class^="scrollerInner-"] [class*="groupStart-"][class*="cozy-"] { margin-top: 8px; } -div[class*="cozyMessage_"] div[class^="repliedMessage_"] { +div[class*="cozyMessage-"] div[class^="repliedMessage-"] { margin-left: 33px; } -div[class*="cozyMessage_"] div[class^="repliedMessage_"]:before { +div[class*="cozyMessage-"] div[class^="repliedMessage-"]:before { --avatar-size: 20px; border-left: var(--spine-width) solid var(--interactive-active); border-bottom: 0 solid var(--interactive-active); @@ -4155,7 +3867,7 @@ div[class*="cozyMessage_"] div[class^="repliedMessage_"]:before { border-top: var(--spine-width) solid var(--interactive-active); } -[class*="cozyMessage_"] [class^="avatarDecoration_"] { +[class*="cozyMessage-"] [class^="avatarDecoration-"] { margin-top: calc(24px - 20px * var(--decoration-to-avatar-ratio)); left: calc(38px - 20px * var(--decoration-to-avatar-ratio)); width: calc(20px * var(--decoration-to-avatar-ratio)); @@ -4164,20 +3876,20 @@ div[class*="cozyMessage_"] div[class^="repliedMessage_"]:before { } @var select xmc_unread 'Unread Indicators' { 'Stock': "", - 'Circles*': `[class^="listItem_"]:hover [class^="pill_"] { + 'Circles*': `[class^="listItem-"]:hover [class^="pill-"] { display: none; } -[class^="listItem_"] [class^="pill_"] { +[class^="listItem-"] [class^="pill-"] { width: 52px !important; height: 56px !important; top: -4px !important; left: 11px; z-index: 100; } -[class^="listItem_"] [class^="pill_"] > span { +[class^="listItem-"] [class^="pill-"] > span { display: none; } -[class^="listItem_"] [class^="pill_"] > span[style*="height: 8px;"] { +[class^="listItem-"] [class^="pill-"] > span[style*="height: 8px;"] { display: block; left: 4px; bottom: 2px; @@ -4188,7 +3900,7 @@ div[class*="cozyMessage_"] div[class^="repliedMessage_"]:before { z-index: 100; background: var(--red, var(--status-red-500)); } -[class^="listItem_"] [class^="pill_"] > span[style*="height: 40px;"] { +[class^="listItem-"] [class^="pill-"] > span[style*="height: 40px;"] { display: block; background: transparent; height: 46px !important; @@ -4200,35 +3912,35 @@ div[class*="cozyMessage_"] div[class^="repliedMessage_"]:before { z-index: 100; } -[class^="listItem_"]:hover [class^="pill_"] span { +[class^="listItem-"]:hover [class^="pill-"] span { opacity: 0 !important; } -[class^="listItem_"]:not(:hover) [class^="pill_"] span { +[class^="listItem-"]:not(:hover) [class^="pill-"] span { opacity: 0 !important; } -[class^="listItem_"]:not(:hover) [class^="pill_"] span[style^="opacity: 0.7"], -[class^="listItem_"]:not(:hover) [class^="pill_"] span[style^="opacity: 1"] { +[class^="listItem-"]:not(:hover) [class^="pill-"] span[style^="opacity: 0.7"], +[class^="listItem-"]:not(:hover) [class^="pill-"] span[style^="opacity: 1"] { opacity: 1 !important; } -[class^="listItem_"] [class^="upperBadge_"] { +[class^="listItem-"] [class^="upperBadge-"] { z-index: 500; }`, } @var select xmc_hide_tag 'Hide account details in sidebar' { 'Off': "", - 'On': `section[class^="panels_"] - > [class^="container_"]:last-child - [class*="nameTag_"] { + 'On': `section[class^="panels-"] + > [class^="container-"]:last-child + [class*="nameTag-"] { display: none; } -section[class^="panels_"] > [class^="container_"]:last-child { +section[class^="panels-"] > [class^="container-"]:last-child { position: relative; } -section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { +section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { position: absolute; right: 0; padding-right: 8px; @@ -4237,13 +3949,13 @@ section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { @var select xmc_titlebars 'Titlebars' { 'Off': "", - 'XMC*': `[class*="recentMentionsPopout_"], -[class^="messagesPopoutWrap_"], -[class^="browser_"] { + 'XMC*': `[class*="recentMentionsPopout-"], +[class^="messagesPopoutWrap-"], +[class^="browser-"] { border-radius: 0; } -[class*="recentMentionsPopout_"] > [class^="header_"] { +[class*="recentMentionsPopout-"] > [class^="header-"] { color: var(--text) !important; padding: 0 4px; background-color: var(--titlebar-color); @@ -4259,10 +3971,10 @@ section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { font-size: 12px !important; text-transform: none; } -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="controls_"] - > [class^="button_"] { +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="controls-"] + > [class^="button-"] { padding: 0; border-radius: 0; width: 16px; @@ -4271,14 +3983,14 @@ section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { min-height: 16px; background-color: transparent; } -[class*="recentMentionsPopout_"] > [class^="header_"] [class^="tab_"] { +[class*="recentMentionsPopout-"] > [class^="header-"] [class^="tab-"] { margin-top: 0 !important; } -[class^="messagesPopoutWrap_"] > [class^="header_"] { +[class^="messagesPopoutWrap-"] > [class^="header-"] { padding: 0; } -[class^="messagesPopoutWrap_"] > [class^="header_"] > h1 { +[class^="messagesPopoutWrap-"] > [class^="header-"] > h1 { color: var(--text) !important; padding: 0 10px; background-color: var(--titlebar-color); @@ -4294,7 +4006,7 @@ section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { text-transform: none; } -[class^="browser_"] > [class^="header_"] { +[class^="browser-"] > [class^="header-"] { color: var(--text) !important; padding: 0 4px; background-color: var(--titlebar-color); @@ -4310,40 +4022,40 @@ section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { font-size: 12px !important; text-transform: none; } -[class^="browser_"] > [class^="header_"] > h1 { +[class^="browser-"] > [class^="header-"] > h1 { font-weight: 100; font-family: var(--_font-titlebars) !important; font-size: 12px !important; text-transform: none; } -[class^="browser_"] > [class^="header_"] > [class^="threadIcon_"], -[class^="browser_"] > [class^="header_"] > [class^="closeIcon_"] > svg { +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"], +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] > svg { width: 16px; height: 16px; } -[class^="browser_"] > [class^="header_"] > [class^="threadIcon_"] { +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] { margin-right: 2px; } -[class^="browser_"] > [class^="header_"] > h1, -[class^="browser_"] > [class^="header_"] > [class^="divider_"], -[class^="browser_"] > [class^="header_"] > [class^="searchBox_"] { +[class^="browser-"] > [class^="header-"] > h1, +[class^="browser-"] > [class^="header-"] > [class^="divider-"], +[class^="browser-"] > [class^="header-"] > [class^="searchBox-"] { margin-right: 0; } -[class^="browser_"] > [class^="header_"] > [class^="divider_"] { +[class^="browser-"] > [class^="header-"] > [class^="divider-"] { flex-grow: 1; background-color: transparent; } -.platform-win [class*="baseLayer_"] { +.platform-win [class*="baseLayer-"] { top: -32px; padding-top: 32px; } -.platform-win [class^="app_"] > [class^="app_"] > [class^="bg_"] { +.platform-win [class^="app-"] > [class^="app-"] > [class^="bg-"] { top: -32px; } -[class^="typeWindows_"] { +[class^="typeWindows-"] { margin: 3px; padding: 6px; height: 10px !important; @@ -4351,16 +4063,16 @@ section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { box-shadow: var(--titlebar-shadow); } -[class^="typeMacOS_"] { +[class^="typeMacOS-"] { background-color: var(--background-tertiary); height: 32px !important; } -[class^="macButtons_"] { +[class^="macButtons-"] { padding: 8px !important; } -[class*="winButton_"] { +[class*="winButton-"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJVSURBVFhH1ZjtThQxFIa9j81ust+fV8ONIH6AiMgAAgr4A/SavAFioiJBshLxAvjLgXfI25TuTGm7pM00eZJOe872me3szJl9dtcWAoneFr6trokPyLlPjdty0aujY/l//NXK1dGX9KKX+4fy7+CzFcQkF/2790kuP+4LG/rmMWKSi15s78j0w67cXF/noG8eIya56PnGpvzJtnIoRziOmOSiZ+sbcv4+yzFFOY6Y5KKnb9/J2dq6kkPfPP59F5Nc9NfyGzldWVVi6JvHiEku+uPla/n5atkKYpKLniwuyffnL6wgJrmoD8i5T43bsGgIcdt0OpUQarVaVHLRou21QdHJZCLj8dgJxHLRkDwl6lM9UXQ0GslwOHQCsRQNyVOiPtWTLjoYDJwwRYtiipgR9ameKIoz7vf7TiCWoiF5StSneqIozrjX6z2gXq/nmOOIpWhRXhnMU6I+1RNFccbdbjcHHwrBLMtyKMt5xFJUz2s2m+rkCMbMPCXqUz3pop1OZ0bSlEWMKYoxUJbH+RlRn+qJopBot9uFixHMIQaxFGUeKPtGOc88JepTPVEUW9NqtaTRaFhBDGIpyjwXmKdEfaonimJrcPYuIJaiIXlK1Kd6SirqA0X1a+0xyq7Rx3hwjYbARWNRLdGi7bVB0ehbj8Ur82OqzO1pnhu+C092w5/nEUrwDfBphL4+Z7tGXfKU6DxFCcFCfMajr8+VFSXAJU+JzlvmAXNBfc4U1edc8pToUxTO5hbqc7bC2SVPiVbmVaQyL3eVeV32gaLR/4AIgYvGoSa368P/Q8a1fTUAAAAASUVORK5CYII="); background-size: 42px; background-repeat: no-repeat; @@ -4372,7 +4084,7 @@ section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { margin-left: 30px; } -[class*="macButton_"] { +[class*="macButton-"] { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJVSURBVFhH1ZjtThQxFIa9j81ust+fV8ONIH6AiMgAAgr4A/SavAFioiJBshLxAvjLgXfI25TuTGm7pM00eZJOe872me3szJl9dtcWAoneFr6trokPyLlPjdty0aujY/l//NXK1dGX9KKX+4fy7+CzFcQkF/2790kuP+4LG/rmMWKSi15s78j0w67cXF/noG8eIya56PnGpvzJtnIoRziOmOSiZ+sbcv4+yzFFOY6Y5KKnb9/J2dq6kkPfPP59F5Nc9NfyGzldWVVi6JvHiEku+uPla/n5atkKYpKLniwuyffnL6wgJrmoD8i5T43bsGgIcdt0OpUQarVaVHLRou21QdHJZCLj8dgJxHLRkDwl6lM9UXQ0GslwOHQCsRQNyVOiPtWTLjoYDJwwRYtiipgR9ameKIoz7vf7TiCWoiF5StSneqIozrjX6z2gXq/nmOOIpWhRXhnMU6I+1RNFccbdbjcHHwrBLMtyKMt5xFJUz2s2m+rkCMbMPCXqUz3pop1OZ0bSlEWMKYoxUJbH+RlRn+qJopBot9uFixHMIQaxFGUeKPtGOc88JepTPVEUW9NqtaTRaFhBDGIpyjwXmKdEfaonimJrcPYuIJaiIXlK1Kd6SirqA0X1a+0xyq7Rx3hwjYbARWNRLdGi7bVB0ehbj8Ur82OqzO1pnhu+C092w5/nEUrwDfBphL4+Z7tGXfKU6DxFCcFCfMajr8+VFSXAJU+JzlvmAXNBfc4U1edc8pToUxTO5hbqc7bC2SVPiVbmVaQyL3eVeV32gaLR/4AIgYvGoSa368P/Q8a1fTUAAAAASUVORK5CYII="); background-size: 42px; background-repeat: no-repeat; @@ -4382,66 +4094,66 @@ section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { border-radius: 0; } -[class^="typeMacOS_"][class*="unfocused_"] [class*="macButton_"], -html.platform-win:not(.app-focused) [class*="winButton_"] { +[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"], +html.platform-win:not(.app-focused) [class*="winButton-"] { opacity: 0.4; } -[class^="typeMacOS_"][class*="unfocused_"] [class*="macButton_"]:hover, -html.platform-win:not(.app-focused) [class*="winButton_"]:hover { +[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"]:hover, +html.platform-win:not(.app-focused) [class*="winButton-"]:hover { opacity: 1; } -[class*="macButton_"] > svg, -[class*="winButton_"] > svg, -[class^="wordmarkWindows_"] > svg { +[class*="macButton-"] > svg, +[class*="winButton-"] > svg, +[class^="wordmarkWindows-"] > svg { display: none; } -[class*="winButtonClose_"] { +[class*="winButtonClose-"] { margin-right: 3px; } -[class*="macButtonClose_"], -[class*="winButtonClose_"] { +[class*="macButtonClose-"], +[class*="winButtonClose-"] { background-position: 0px 0px; } -[class*="macButtonClose_"]:hover, -[class*="winButtonClose_"]:hover { +[class*="macButtonClose-"]:hover, +[class*="winButtonClose-"]:hover { background-position: 0px -14px; } -[class*="macButtonClose_"]:active, -[class*="winButtonClose_"]:active { +[class*="macButtonClose-"]:active, +[class*="winButtonClose-"]:active { background-position: 0px -28px; } -[class*="macButtonMaximize_"], -[class*="winButtonMinMax_"]:nth-child(3) { +[class*="macButtonMaximize-"], +[class*="winButtonMinMax-"]:nth-child(3) { background-position: -14px 0px; } -[class*="macButtonMaximize_"]:hover, -[class*="winButtonMinMax_"]:nth-child(3):hover { +[class*="macButtonMaximize-"]:hover, +[class*="winButtonMinMax-"]:nth-child(3):hover { background-position: -14px -14px; } -[class*="macButtonMaximize_"]:active, -[class*="winButtonMinMax_"]:nth-child(3):active { +[class*="macButtonMaximize-"]:active, +[class*="winButtonMinMax-"]:nth-child(3):active { background-position: -14px -28px; } -[class*="macButtonMinimize_"], -[class*="winButtonMinMax_"]:nth-child(4) { +[class*="macButtonMinimize-"], +[class*="winButtonMinMax-"]:nth-child(4) { background-position: -28px 0px; } -[class*="macButtonMinimize_"]:hover, -[class*="winButtonMinMax_"]:nth-child(4):hover { +[class*="macButtonMinimize-"]:hover, +[class*="winButtonMinMax-"]:nth-child(4):hover { background-position: -28px -14px; } -[class*="macButtonMinimize_"]:active, -[class*="winButtonMinMax_"]:nth-child(4):active { +[class*="macButtonMinimize-"]:active, +[class*="winButtonMinMax-"]:nth-child(4):active { background-position: -28px -28px; } -[class^="wordmarkWindows_"] { +[class^="wordmarkWindows-"] { width: 16px !important; height: 16px !important; top: 6px !important; @@ -4450,7 +4162,7 @@ html.platform-win:not(.app-focused) [class*="winButton_"]:hover { background-image: var(--titlebar-icon); background-repeat: no-repeat; } -[class^="wordmarkWindows_"]::after { +[class^="wordmarkWindows-"]::after { font-family: var(--_font-titlebars) !important; font-size: 12px !important; line-height: 250% !important; @@ -4464,20 +4176,20 @@ html.platform-win:not(.app-focused) [class*="winButton_"]:hover { opacity: 1; } -html.platform-win:not(.app-focused) [class^="wordmarkWindows_"]::after, +html.platform-win:not(.app-focused) [class^="wordmarkWindows-"]::after, html:not(.platform-win) #app-mount > div:not(.app-focused) - [class^="wordmarkWindows_"]::after { + [class^="wordmarkWindows-"]::after { opacity: 0.4; } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="body_"] - > [class^="infoScroller_"] - > [class^="userInfoSection_"] - > [class*="userInfoSectionHeader_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="userInfoSection-"] + > [class*="userInfoSectionHeader-"] { color: var(--text) !important; padding: 0 10px; background-color: var(--titlebar-color); @@ -4493,11 +4205,11 @@ html:not(.platform-win) text-transform: none; } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="body_"] - > [class^="infoScroller_"] - > [class^="connectedAccounts_"]::before { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"]::before { color: var(--text) !important; padding: 0 10px; background-color: var(--titlebar-color); @@ -4516,20 +4228,20 @@ html:not(.platform-win) position: absolute; } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="body_"] - > [class^="infoScroller_"] - > [class^="connectedAccounts_"] > [class^="connectedAccountsColumn_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="infoScroller-"] + > [class^="connectedAccounts-"] > [class^="connectedAccountsColumn-"] { margin-top: 28px; } -[class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="body_"] - > [class^="listScroller_"] - > [class^="activityProfile_"] - [class*="headerTextNormal_"] { +[class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="body-"] + > [class^="listScroller-"] + > [class^="activityProfile-"] + [class*="headerTextNormal-"] { color: var(--text) !important; padding: 0 10px; background-color: var(--titlebar-color); @@ -4571,24 +4283,24 @@ html:not(.platform-win) border-color: var(--titlebar-border-active, var(--primary)) !important; } -[class^="typeWindows_"] { +[class^="typeWindows-"] { height: 18px !important; margin-top: 0; background: var(--titlebar-inactive, var(--secondary)); border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary)); } -.app-focused [class^="typeWindows_"] { +.app-focused [class^="typeWindows-"] { background: var(--titlebar-active, var(--titlebar-color, var(--accent))) !important; border-color: var(--titlebar-border-active, var(--primary)) !important; } -[class^="winButtonClose_"] > svg, -[class^="winButtonMinMax_"] > svg, -[class^="wordmarkWindows_"] > svg { +[class^="winButtonClose-"] > svg, +[class^="winButtonMinMax-"] > svg, +[class^="wordmarkWindows-"] > svg { display: none; } -[class^="wordmarkWindows_"] { +[class^="wordmarkWindows-"] { width: 16px !important; height: 16px !important; top: 1px !important; @@ -4597,7 +4309,7 @@ html:not(.platform-win) background-image: var(--titlebar-icon); background-repeat: no-repeat; } -[class^="wordmarkWindows_"]::after { +[class^="wordmarkWindows-"]::after { font-family: var(--_font-titlebars) !important; font-size: 12px !important; color: var(--wc-bright, var(--highlight)) !important; @@ -4609,11 +4321,11 @@ html:not(.platform-win) height: 17px; opacity: 1; } -.app-focused [class^="wordmarkWindows_"]::after { +.app-focused [class^="wordmarkWindows-"]::after { color: var(--text) !important; } -[class*="winButton_"] { +[class*="winButton-"] { top: 2px; width: 12px !important; height: 10px !important; @@ -4622,43 +4334,43 @@ html:not(.platform-win) box-shadow: var(--wc-outer-edge); } -[class^="winButtonClose_"] { +[class^="winButtonClose-"] { right: 2px; } -[class^="winButtonMinMax_"]:nth-child(3), -[class^="winButtonMinMax_"]:nth-child(4) { +[class^="winButtonMinMax-"]:nth-child(3), +[class^="winButtonMinMax-"]:nth-child(4) { right: 4px; } -[class*="winButton_"]::before { +[class*="winButton-"]::before { width: 12px !important; height: 10px !important; background-color: var(--text); content: ""; } -[class^="winButtonClose_"]::before { +[class^="winButtonClose-"]::before { -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); } -[class^="winButtonMinMax_"]:nth-child(3)::before { +[class^="winButtonMinMax-"]:nth-child(3)::before { -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTY4CC/0RgFIBNATpGARgCaGBUAwiABAhhcgADAwD+Vybas8l0mAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAjSURBVChTY4CC/0RgFIBNATpGARgCaGBUAwiABAhhcgADAwD+Vybas8l0mAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); } -[class^="winButtonMinMax_"]:nth-child(4)::before { +[class^="winButtonMinMax-"]:nth-child(4)::before { -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVChTYxgFtAb/cWCcAJtiEKYEMDAAALNwC/VcmzodAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVChTYxgFtAb/cWCcAJtiEKYEMDAAALNwC/VcmzodAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); } -[class*="recentMentionsPopout_"], -[class^="messagesPopoutWrap_"], -[class^="browser_"] { +[class*="recentMentionsPopout-"], +[class^="messagesPopoutWrap-"], +[class^="browser-"] { border-radius: 0; padding: 2px; box-shadow: var(--wc-frame); border: 1px solid var(--titlebar-border-active, var(--primary)); } -[class*="recentMentionsPopout_"] > [class^="header_"] { +[class*="recentMentionsPopout-"] > [class^="header-"] { padding: 0 4px; font-family: var(--_font-titlebars) !important; font-size: 12px !important; @@ -4669,10 +4381,10 @@ html:not(.platform-win) border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary)); background: var(--titlebar-active, var(--titlebar-color, var(--accent))) !important; } -[class*="recentMentionsPopout_"] - > [class^="header_"] - > [class^="controls_"] - > [class^="button_"] { +[class*="recentMentionsPopout-"] + > [class^="header-"] + > [class^="controls-"] + > [class^="button-"] { padding: 0; border-radius: 0; width: 16px; @@ -4681,7 +4393,7 @@ html:not(.platform-win) min-height: 16px; background-color: transparent; } -[class*="recentMentionsPopout_"] > [class^="header_"] [class^="tab_"] { +[class*="recentMentionsPopout-"] > [class^="header-"] [class^="tab-"] { margin-top: 0 !important; padding: 0px 2px; height: 16px; @@ -4689,10 +4401,10 @@ html:not(.platform-win) font-size: 12px; } -[class^="messagesPopoutWrap_"] > [class^="header_"] { +[class^="messagesPopoutWrap-"] > [class^="header-"] { padding: 0; } -[class^="messagesPopoutWrap_"] > [class^="header_"] > h1 { +[class^="messagesPopoutWrap-"] > [class^="header-"] > h1 { padding: 0 4px; font-family: var(--_font-titlebars) !important; font-size: 12px !important; @@ -4703,7 +4415,7 @@ html:not(.platform-win) background: var(--titlebar-active, var(--titlebar-color, var(--accent))) !important; } -[class^="browser_"] > [class^="header_"] { +[class^="browser-"] > [class^="header-"] { padding: 0 4px; font-family: var(--_font-titlebars) !important; font-size: 12px !important; @@ -4714,33 +4426,33 @@ html:not(.platform-win) border-bottom: 1px solid var(--titlebar-border-inactive, var(--secondary)); background: var(--titlebar-active, var(--titlebar-color, var(--accent))) !important; } -[class^="browser_"] > [class^="header_"] > h1 { +[class^="browser-"] > [class^="header-"] > h1 { font-family: var(--_font-titlebars) !important; font-size: 12px !important; color: var(--text) !important; font-weight: bold !important; } -[class^="browser_"] > [class^="header_"] > [class^="threadIcon_"] { +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] { width: 16px; height: 16px; } -[class^="browser_"] > [class^="header_"] > [class^="threadIcon_"] { +[class^="browser-"] > [class^="header-"] > [class^="threadIcon-"] { margin-right: 2px; } -[class^="browser_"] > [class^="header_"] > h1, -[class^="browser_"] > [class^="header_"] > [class^="divider_"], -[class^="browser_"] > [class^="header_"] > [class^="searchBox_"] { +[class^="browser-"] > [class^="header-"] > h1, +[class^="browser-"] > [class^="header-"] > [class^="divider-"], +[class^="browser-"] > [class^="header-"] > [class^="searchBox-"] { margin-right: 0; } -[class^="browser_"] > [class^="header_"] > [class^="divider_"] { +[class^="browser-"] > [class^="header-"] > [class^="divider-"] { flex-grow: 1; background-color: transparent; } -[class^="browser_"] > [class^="header_"] > [class^="closeIcon_"] > svg { +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] > svg { display: none; } -[class^="browser_"] > [class^="header_"] > [class^="closeIcon_"] { +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"] { width: 12px !important; min-width: 12px !important; height: 10px !important; @@ -4752,7 +4464,7 @@ html:not(.platform-win) background: var(--primary) !important; box-shadow: var(--wc-outer-edge); } -[class^="browser_"] > [class^="header_"] > [class^="closeIcon_"]::before { +[class^="browser-"] > [class^="header-"] > [class^="closeIcon-"]::before { width: 12px !important; height: 10px !important; background-color: var(--text); @@ -4762,52 +4474,52 @@ html:not(.platform-win) mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAwSURBVChTY6AE/IdidIBLHAzQJfEqhgGYIqIUwwBZionShK4IryZckng1URswMAAAIEcZ541Sy3oAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); } `, - 'Old Discord': `[class*="wordmark_"] { + 'Old Discord': `[class*="wordmark-"] { display: none !important; } -[class*="titleBar_"] { +[class*="titleBar-"] { margin-top: 0; } -[class*="typeWindows_"] { +[class*="typeWindows-"] { height: 0px !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } -[class*="winButton_"] { +[class*="winButton-"] { margin-top: 19px; margin-right: 5px; opacity: 0.3; } -[class*="winButton_"]:hover { +[class*="winButton-"]:hover { opacity: 1; } -.platform-win [class*="headerBar_"], -.platform-win [class^="chat_"] > [class^="title_"], -.platform-win [class*="activityFeed_"] > [class*="container_"], -.platform-win [class^="libraryHeader_"], +.platform-win [class*="headerBar-"], +.platform-win [class^="chat-"] > [class^="title-"], +.platform-win [class*="activityFeed-"] > [class*="container-"], +.platform-win [class^="libraryHeader-"], .platform-win - [class*="spacer_"] - > [class*="container_"] - > [class*="container_"], + [class*="spacer-"] + > [class*="container-"] + > [class*="container-"], .platform-win - [class^="base_"] - > [class^="content_"] - > [class^="container_"] - > [class^="container_"], -.platform-win [class^="videoControls_"] [class^="headerWrapper_"] { + [class^="base-"] + > [class^="content-"] + > [class^="container-"] + > [class^="container-"], +.platform-win [class^="videoControls-"] [class^="headerWrapper-"] { padding-right: 104px !important; } -.platform-win [class^="topControls_"] { +.platform-win [class^="topControls-"] { top: -4px; position: relative; } -[class*="winButtonClose_"], -[class*="winButtonMinMax_"] { +[class*="winButtonClose-"], +[class*="winButtonMinMax-"] { width: 24px !important; height: 24px !important; margin-left: 0 !important; @@ -4817,42 +4529,42 @@ html:not(.platform-win) background-color: var(--interactive-normal) !important; } -[class*="winButtonClose_"] { +[class*="winButtonClose-"] { margin-right: 12px; } -[class*="winButtonClose_"] svg, -[class*="winButtonMinMax_"] svg { +[class*="winButtonClose-"] svg, +[class*="winButtonMinMax-"] svg { display: none; } -[class*="winButtonClose_"] { +[class*="winButtonClose-"] { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjAgNy40MUwxOC41OSA2IDEzIDExLjU5IDcuNDEgNiA2IDcuNDEgMTEuNTkgMTMgNiAxOC41OSA3LjQxIDIwIDEzIDE0LjQxIDE4LjU5IDIwIDIwIDE4LjU5IDE0LjQxIDEzIDIwIDcuNDF6Ii8+PC9nPjwvc3ZnPg==") no-repeat; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjAgNy40MUwxOC41OSA2IDEzIDExLjU5IDcuNDEgNiA2IDcuNDEgMTEuNTkgMTMgNiAxOC41OSA3LjQxIDIwIDEzIDE0LjQxIDE4LjU5IDIwIDIwIDE4LjU5IDE0LjQxIDEzIDIwIDcuNDF6Ii8+PC9nPjwvc3ZnPg==") no-repeat; background-image: none !important; } -[class*="winButtonMinMax_"]:nth-child(3) { +[class*="winButtonMinMax-"]:nth-child(3) { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNOCAxM0g2djdoN3YtMkg4di01em0tMiAwaDJWOGg1VjZINnY3em03IDV2Mmg3di03aC0ydjVoLTV6bTAtMTJ2Mmg1djVoMlY2aC03eiIvPjwvZz48L3N2Zz4=") no-repeat; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMSAxaDI0djI0SDFWMXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNOCAxM0g2djdoN3YtMkg4di01em0tMiAwaDJWOGg1VjZINnY3em03IDV2Mmg3di03aC0ydjVoLTV6bTAtMTJ2Mmg1djVoMlY2aC03eiIvPjwvZz48L3N2Zz4=") no-repeat; background-image: none !important; } -[class*="winButtonMinMax_"]:nth-child(4) { +[class*="winButtonMinMax-"]:nth-child(4) { mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTkgMTl2LTJIN3YyaDEyeiIvPjxwYXRoIGQ9Ik0xIDI1aDI0VjFIMXYyNHoiLz48L2c+PC9zdmc+") no-repeat; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTkgMTl2LTJIN3YyaDEyeiIvPjxwYXRoIGQ9Ik0xIDI1aDI0VjFIMXYyNHoiLz48L2c+PC9zdmc+") no-repeat; background-image: none !important; } -[class*="winButtonClose_"]:hover, -[class*="winButtonMinMax_"]:hover { +[class*="winButtonClose-"]:hover, +[class*="winButtonMinMax-"]:hover { background-color: var(--interactive-hover) !important; } -[class^="typeMacOS_"][class*="unfocused_"] [class*="macButton_"], -html.platform-win:not(.app-focused) [class*="winButton_"] { +[class^="typeMacOS-"][class*="unfocused-"] [class*="macButton-"], +html.platform-win:not(.app-focused) [class*="winButton-"] { opacity: 1 !important; }`, } @@ -4895,13 +4607,13 @@ html.platform-win:not(.app-focused) [class*="winButton_"] { @var select xmc_old_roles 'Old Roles' { 'Off': "", - 'On*': `[class^="role_"] { + 'On*': `[class^="role-"] { position: relative; border-radius: 5%; } -[class^="role_"] [class^="roleRemoveButton_"] [class^="roleCircle_"], -[class^="role_"] [class^="roleRemoveButton_"] [class^="roleFlowerStar_"] { +[class^="role-"] [class^="roleRemoveButton-"] [class^="roleCircle-"], +[class^="role-"] [class^="roleRemoveButton-"] [class^="roleFlowerStar-"] { margin: 0 !important; border-radius: 5% !important; width: 100% !important; @@ -4913,7 +4625,7 @@ html.platform-win:not(.app-focused) [class*="winButton_"] { opacity: 0.25; } -[class^="role_"] [class^="roleFlowerStar_"] > svg[class^="linkIcon_"] { +[class^="role-"] [class^="roleFlowerStar-"] > svg[class^="linkIcon-"] { z-index: 7; position: absolute; right: -2px; @@ -4921,7 +4633,7 @@ html.platform-win:not(.app-focused) [class*="winButton_"] { opacity: 5; } -[class^="role_"] [class^="roleRemoveButton_"] { +[class^="role-"] [class^="roleRemoveButton-"] { position: absolute; left: 0; width: 100%; @@ -4930,16 +4642,16 @@ html.platform-win:not(.app-focused) [class*="winButton_"] { overflow-y: visible; } -[class^="role_"] [class^="roleIcon_"] { +[class^="role-"] [class^="roleIcon-"] { z-index: 5; } -[class^="role_"] [class^="roleName_"] { +[class^="role-"] [class^="roleName-"] { z-index: 2; margin-right: 0; } -[class^="role_"] [class^="roleRemoveIcon_"] { +[class^="role-"] [class^="roleRemoveIcon-"] { display: block; position: absolute; top: 4px; @@ -4947,7 +4659,7 @@ html.platform-win:not(.app-focused) [class*="winButton_"] { z-index: 6; } -[class^="role_"] [class^="roleRemoveButton_"] [class*="roleDot_"] { +[class^="role-"] [class^="roleRemoveButton-"] [class*="roleDot-"] { width: 1em !important; height: 1em !important; margin-top: 0.25em; @@ -4956,73 +4668,73 @@ html.platform-win:not(.app-focused) [class*="winButton_"] { @var select xmc_old_embeds 'Old Embeds' { 'Off': "", - 'On*': `[class*="embed_"] { + 'On*': `[class*="embed-"] { border-radius: 0 0 0 0; border-color: var(--interactive-active); } -[class*="embed_"] [class*="embedInner_"] { +[class*="embed-"] [class*="embedInner-"] { border-color: transparent; } -[class*="embed_"] [class*="embedAuthorIcon_"] { +[class*="embed-"] [class*="embedAuthorIcon-"] { border-radius: 0; } -[class*="embed_"] [class^="grid_"] { +[class*="embed-"] [class^="grid-"] { padding: 8px !important; } -[class*="embed_"] [class*="embedMargin_"] { +[class*="embed-"] [class*="embedMargin-"] { margin-top: 4px !important; } -[class*="embed_"] [class*="embedMedia_"] { +[class*="embed-"] [class*="embedMedia-"] { margin-top: 4px !important; } -[class*="embed_"] [class*="embedTitle_"] { +[class*="embed-"] [class*="embedTitle-"] { font-size: 16px !important; font-weight: 200 !important; } -[class*="embed_"] [class*="embedFieldName_"] { +[class*="embed-"] [class*="embedFieldName-"] { font-weight: 500 !important; } -[class*="embed_"] [class*="embedDescription_"], -[class*="embed_"] [class*="embedFieldName_"], -[class*="embed_"] [class*="embedFieldValue_"] { +[class*="embed-"] [class*="embedDescription-"], +[class*="embed-"] [class*="embedFieldName-"], +[class*="embed-"] [class*="embedFieldValue-"] { font-size: 16px !important; } -[class*="embed_"] [class*="embedFooterText_"] { +[class*="embed-"] [class*="embedFooterText-"] { font-size: 0.8em; }`, } @var select xmc_left_reply 'Left Side Reply Controls' { 'Off': "", - 'On*': `[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"], -[class^="channelTextArea_"] - > [class^="attachedBars_"] - [class^="threadSuggestionBar_"] { + 'On*': `[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"], +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="threadSuggestionBar-"] { background: transparent; } -[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] { +[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"] { display: flex; flex-direction: row-reverse; align-self: flex-start; } -[class^="channelTextArea_"] - > [class^="attachedBars_"] - [class^="replyBar_"] - > [class^="actions_"] { +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="replyBar-"] + > [class^="actions-"] { flex-direction: row-reverse; } -[class^="channelTextArea_"] - > [class^="attachedBars_"] - [class^="replyBar_"] - [class*="replyLabel_"] { +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="replyBar-"] + [class*="replyLabel-"] { margin-left: 12px; } -[class^="channelTextArea_"] - > [class^="attachedBars_"] - [class^="replyBar_"] - > [class^="actions_"]::after { +[class^="channelTextArea-"] + > [class^="attachedBars-"] + [class^="replyBar-"] + > [class^="actions-"]::after { position: relative; content: ""; background-color: var(--background-modifier-accent); @@ -5034,167 +4746,153 @@ html.platform-win:not(.app-focused) [class*="winButton_"] { @var select xmc_collapsing_members 'Collapsing Member List' { 'Off*': "", - 'On': `[class^="chat_"] -> [class^="content_"] -> [class^="container_"]:nth-child(2) > [class^="membersWrap_"], -[class^="chat_"] -> [class^="content_"] -> [class^="container_"]:nth-child(2), -[class^="chat_"] > [class^="content_"] > [class^="membersWrap_"] { + 'On': `[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_"]:nth-child(2):hover, -[class^="chat_"] - > [class^="content_"] - > [class^="container_"]:hover > [class^="membersWrap_"], -[class^="chat_"] > [class^="content_"] > [class^="membersWrap_"]:hover { +[class^="chat-"] + > [class^="content-"] + > [class^="container-"]:hover > [class^="membersWrap-"], +[class^="chat-"] > [class^="content-"] > [class^="membersWrap-"]:hover { width: 240px !important; - min-width: 240px !important; } -[class^="chat_"] > [class^="content_"] > [class^="container"] > [class^="membersWrap_"], -[class^="chat_"] > [class^="content_"] > [class^="membersWrap_"] { +[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_"] { +[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_"]{ +[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 !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 !important; +[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; }`, 'Dynamic': `@media (width < 1300px) { -[class^="chat_"] -> [class^="content_"] -> [class^="container_"]:nth-child(2) > [class^="membersWrap_"], -[class^="chat_"] -> [class^="content_"] -> [class^="container_"]:nth-child(2), -[class^="chat_"] > [class^="content_"] > [class^="membersWrap_"] { +[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_"]:nth-child(2):hover, -[class^="chat_"] - > [class^="content_"] - > [class^="container_"]:hover > [class^="membersWrap_"], -[class^="chat_"] > [class^="content_"] > [class^="membersWrap_"]:hover { +[class^="chat-"] + > [class^="content-"] + > [class^="container-"]:hover > [class^="membersWrap-"], +[class^="chat-"] > [class^="content-"] > [class^="membersWrap-"]:hover { width: 240px !important; - min-width: 240px !important; } -[class^="chat_"] > [class^="content_"] > [class^="container"] > [class^="membersWrap_"], -[class^="chat_"] > [class^="content_"] > [class^="membersWrap_"] { +[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_"] { +[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_"]{ +[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 !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 !important; +[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; } }`, @@ -5202,7 +4900,7 @@ html.platform-win:not(.app-focused) [class*="winButton_"] { @var select xmc_accessible_styles 'Accessible Font Styles' { 'Off*': "", - 'Italics + Bold': `span[data-slate-leaf="true"][class*="italics_"], + 'Italics + Bold': `span[data-slate-leaf="true"][class*="italics-"], em { font-style: normal; display: inline-block; @@ -5210,19 +4908,19 @@ em { color: #f80; } -span[data-slate-leaf="true"][class*="bold_"], +span[data-slate-leaf="true"][class*="bold-"], strong { font-weight: 400; text-shadow: 0.1px 0.1px, -0.1px -0.1px; }`, - 'Just Italics': `span[data-slate-leaf="true"][class*="italics_"], + 'Just Italics': `span[data-slate-leaf="true"][class*="italics-"], em { font-style: normal; display: inline-block; transform: skewX(-8deg); color: #f80; }`, - 'Just Colored Italics': `span[data-slate-leaf="true"][class*="italics_"], + 'Just Colored Italics': `span[data-slate-leaf="true"][class*="italics-"], em { color: #f80; }` @@ -5230,102 +4928,102 @@ em { @var select xmc_compacter_mode 'Compact-er Mode' { 'Off*': "", - 'On': `[class*="guilds_"] [class^="listItemWrapper_"] > [class^="wrapper_"], -[class*="guilds_"] [class^="listItemWrapper_"] > [class^="wrapper_"] > svg, -[class*="guilds_"] [class^="listItem_"] [class^="wrapper_"]:has(> svg), -[class*="guilds_"] [class^="listItem_"] [class^="wrapper_"]:has(> svg) > svg, -[class*="guilds_"] [class^="listItem_"] [class^="wrapperSimple_"], -[class*="guilds_"] [class^="listItem_"] [class^="wrapperSimple_"] > svg { + 'On': `[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"], +[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"] > svg, +[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg), +[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg) > svg, +[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"], +[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"] > svg { width: 32px; height: 32px; } -[class*="guilds_"] [class^="listItem_"] > [class^="pill_"], -[class*="guilds_"] - [class^="listItem_"] - > [class^="pill_"] - > [class^="item_"][style*="height: 40px;"] { +[class*="guilds-"] [class^="listItem-"] > [class^="pill-"], +[class*="guilds-"] + [class^="listItem-"] + > [class^="pill-"] + > [class^="item-"][style*="height: 40px;"] { height: 32px !important; } -[class*="guilds_"], -[class*="guilds_"] [class^="listItem_"], -[class*="guilds_"] - [class^="wrapper_"]:has(> [class^="expandedFolderBackground_"]) { - width: 48px !important; +[class*="guilds-"], +[class*="guilds-"] [class^="listItem-"], +[class*="guilds-"] + [class^="wrapper-"]:has(> [class^="expandedFolderBackground-"]) { + width: 48px; } -[class*="guilds_"] [class^="unreadMentionsIndicator"] { +[class*="guilds-"] [class^="unreadMentionsIndicator"] { width: 48px; height: 16px; } -[class*="guilds_"] > ul > [class^="scroller_"] { +[class*="guilds-"] > ul > [class^="scroller-"] { padding-top: 8px !important; } -[class*="guilds_"] [class^="listItem_"] { +[class*="guilds-"] [class^="listItem-"] { margin-bottom: 4px; } -[class*="guilds_"] ul[id^="folder-items-"] > [class^="listItem_"] { +[class*="guilds-"] ul[id^="folder-items-"] > [class^="listItem-"] { width: 32px !important; height: 32px !important; margin-left: 8px; } -[class*="guilds_"] [class^="expandedFolderBackground_"] { +[class*="guilds-"] [class^="expandedFolderBackground-"] { width: 32px; left: 8px; } -[class*="guilds_"] ul[id^="folder-items-"] { +[class*="guilds-"] ul[id^="folder-items-"] { height: unset !important; } -[class*="guilds_"] ul[class^="tree_"] > [class^="scroller_"] > div[style*="height: 56px;"] { +[class*="guilds-"] ul[class^="tree-"] > [class^="scroller-"] > div[style*="height: 56px;"] { height: unset !important; } -[class*="guilds_"] ul[id^="folder-items-"] > [class^="listItem_"] > [class^="pill_"] { +[class*="guilds-"] ul[id^="folder-items-"] > [class^="listItem-"] > [class^="pill-"] { left: -8px; } -section[class^="panels_"] > [class*="activityPanel_"] [class^="gameIcon_"], -section[class^="panels_"] - > [class*="activityPanel_"] - [class^="actions_"] - > [class^="panelButtonContainer_"] +section[class^="panels-"] > [class*="activityPanel-"] [class^="gameIcon-"], +section[class^="panels-"] + > [class*="activityPanel-"] + [class^="actions-"] + > [class^="panelButtonContainer-"] > button, -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class*="directionRow_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class*="directionRow-"] > button, -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="actionButtons_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] button { width: 24px; height: 24px; min-height: 24px; } -section[class^="panels_"] > [class^="container_"]:last-child { +section[class^="panels-"] > [class^="container-"]:last-child { position: relative; } -section[class^="panels_"] > [class^="container_"]:last-child > div:last-child { +section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { position: absolute; right: 0; padding-right: 8px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class*="directionRow_"] { +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class*="directionRow-"] { position: absolute; bottom: 8px; right: 8px; @@ -5334,133 +5032,133 @@ section[class^="panels_"] grid-auto-flow: column; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div { padding-left: 20px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] { + > [class^="rtcConnectionStatus-"] { position: absolute; left: 8px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"]:has(> :nth-child(2)) { + > [class^="rtcConnectionStatus-"]:has(> :nth-child(2)) { top: 12px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > svg[class^="ping_"] { + > [class^="rtcConnectionStatus-"] + > svg[class^="ping-"] { margin-right: 0; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > [class^="labelWrapper_"], -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"], +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > [class^="labelWrapper_"] + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] > button { width: 16px; height: 16px; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > [class^="labelWrapper_"] { + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] { position: relative; left: -16px; z-index: 10; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="connection_"] - > [class^="inner_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] > div - > [class^="rtcConnectionStatus_"] - > [class^="labelWrapper_"] + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] > button - > [class^="contents_"] { + > [class^="contents-"] { display: none; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="actionButtons_"] +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] button { padding: 0; background: transparent; } -section[class^="panels_"] - > [class^="wrapper_"] - > [class^="container_"] - > [class*="actionButtons_"] { +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] { grid-gap: 4px; padding-top: 0; grid-template-columns: repeat(auto-fill, minmax(0, 24px)); height: 24px; } -section[class^="panels_"] > [class^="container_"] { +section[class^="panels-"] > [class^="container-"] { height: 40px; padding: 0 4px; } -section[class^="panels_"] - > [class^="container_"] - > [class^="avatarWrapper_"] - > [class*="avatar_"] { +section[class^="panels-"] + > [class^="container-"] + > [class^="avatarWrapper-"] + > [class*="avatar-"] { width: 24px !important; height: 24px !important; } -section[class^="panels_"] - > [class^="container_"] - > [class^="avatarWrapper_"] - > [class*="avatar_"] +section[class^="panels-"] + > [class^="container-"] + > [class^="avatarWrapper-"] + > [class*="avatar-"] > svg { width: 32px !important; height: 32px !important; } -section[class^="panels_"] - > [class^="container_"] - > [class*="directionRow_"] +section[class^="panels-"] + > [class^="container-"] + > [class*="directionRow-"] > button { width: 24px; height: 24px; } -section[class^="panels_"] > [class^="container_"] > [class*="directionRow_"] { +section[class^="panels-"] > [class^="container-"] > [class*="directionRow-"] { display: grid; grid-auto-flow: column; grid-gap: 4px; @@ -5496,73 +5194,64 @@ button.hh2-spotify-controls-button { color: var(--text-muted) !important; } -[class^="members_"] [class^="member_"] > [class*="layout_"] { +[class^="members-"] [class^="member-"] > [class*="layout-"] { height: 32px; } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"], -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] - > [class^="wrapper_"] { +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"], +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] { width: 24px !important; height: 24px !important; } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] - > [class^="wrapper_"] +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] > svg[viewBox="0 0 40 40"] { width: 32px !important; height: 32px !important; } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] - > [class^="wrapper_"] - > [class^="avatarDecoration_"] { +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] + > [class^="avatarDecoration-"] { top: calc((.4 - var(--decoration-to-avatar-ratio)/2)*32px); left: calc((.475 - var(--decoration-to-avatar-ratio)/2)*32px); width: calc(32px * var(--decoration-to-avatar-ratio)); height: calc(32px * var(--decoration-to-avatar-ratio)); } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] - > [class^="wrapper_"] +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] > svg[viewBox="0 0 32 32"] { width: 24px !important; height: 24px !important; } -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="avatar_"] { +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="avatar-"] { margin-right: 8px; } -[class^="members_"] [class^="membersGroup_"] { +[class^="members-"] [class^="membersGroup-"] { padding: 12px 8px 0 8px !important; - height: unset !important; + height: unset; } -[class^="chat_"] - > [class^="content_"] - > [class^="container_"] - > [class^="membersWrap_"]:hover - > [class^="members_"] - > [class^="content_"] - > [class^="membersGroup_"] { - height: unset !important; -} -[class^="members_"] - [class^="member_"] - > [class*="layout_"] - > [class^="children_"] +[class^="members-"] + [class^="member-"] + > [class*="layout-"] + > [class^="children-"] > .presence-icons-wrapper > span > img { @@ -5570,79 +5259,74 @@ button.hh2-spotify-controls-button { height: 20px; } -[class^="sidebar_"] - [class^="containerDefault_"]:has(> [class*="clickable_"]) { +[class^="sidebar-"] + [class^="containerDefault-"]:has(> [class*="clickable-"]) { padding-top: 8px; } -[class^="sidebar_"] ul[class^="content_"] > div[style="height: 12px;"] { +[class^="sidebar-"] ul[class^="content-"] > div[style="height: 12px;"] { height: 6px !important; } -[class^="sidebar_"] ul[class^="content_"] > div[style="height: 84px;"] { +[class^="sidebar-"] ul[class^="content-"] > div[style="height: 84px;"] { height: 0px !important; } -[class^="sidebar_"] ul[class^="content_"] > [class^="sectionDivider_"] { +[class^="sidebar-"] ul[class^="content-"] > [class^="sectionDivider-"] { margin-top: 6px; } -[class^="sidebar_"] - [class^="containerDefault_"] - [class^="link_"] { - padding: 4px; +[class^="sidebar-"] + [class^="iconVisibility-"] + > [class^="content-"] { + padding: 0 4px; } -[class^="sidebar_"] - [class^="iconVisibility_"] - > [class^="content_"] - > [class^="mainContent_"], -[class^="sidebar_"] - [class^="containerDefault_"] - [class^="iconVisibility_"] - > [class^="content_"] - > [class^="children_"] - > [class^="iconItem_"] { +[class^="sidebar-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="mainContent-"], +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"] + > [class^="iconItem-"] { padding: 3px 0; } -[class^="sidebar_"] - [class^="containerDefault_"] - [class^="iconVisibility_"] - > [class^="content_"] - > [class^="children_"] - > [class^="channelInfo_"] { +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"] + > [class^="channelInfo-"] { margin-top: 0 !important; } -[class^="sidebar_"] - [class^="containerDefault_"] - [class^="iconVisibility_"] - > [class^="content_"] - > [class^="children_"] { +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"] { margin-top: 2px; } -[class^="sidebar_"] [class^="containerDefault_"] [class^="voiceUser_"] [class^="userAvatar_"] { +[class^="sidebar-"] [class^="containerDefault-"] [class^="voiceUser-"] [class^="userAvatar-"] { margin-left: 4px; margin-right: 4px; } -[class^="sidebar_"] - [class^="containerDefault_"] - [class^="spine_"] { - top: 2px; -} -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; @@ -5656,268 +5340,221 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) ); } -[class^="animatedBannerHoverLayer_"] { +[class^="animatedBannerHoverLayer-"] { top: -32px !important; height: 32px !important; } -[nop=nop] [class^="members_"] > [class^="content_"], -[nop=nop] [class^="sidebar_"] ul[class^="content_"] { +[nop=nop] [class^="members-"] > [class^="content-"], +[nop=nop] [class^="sidebar-"] ul[class^="content-"] { height: unset !important; padding-bottom: 8px; } -[class^="sidebar_"] header[class^="header_"] { +[class^="sidebar-"] header[class^="header-"] { padding: 4px 8px; } -[class^="chat_"] > [class^="title_"], -[class^="chat_"] > section[class*="container_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] { - height: 32px !important; - min-height: 32px !important; - padding: 0; -} -[class^="chat_"] > [class^="title_"][class^="libraryHeader_"]:before, -[class^="chat_"] > section[class*="container_"][class^="libraryHeader_"]:before, -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"][class^="libraryHeader_"]:before, -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"][class^="libraryHeader_"]:before { - top: 31px; -} -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] { +[class^="chat-"] > [class^="title-"] { height: 32px; } -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] { - display: grid; - grid-auto-flow: column; - grid-gap: 4px; - margin-right: 4px; -} -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="inviteToolbar_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="inviteToolbar_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="inviteToolbar_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="inviteToolbar_"] { - display: grid; - grid-auto-flow: column; - grid-gap: 4px; -} -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] { +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] { height: 24px !important; } -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > .DraftEditor-root [class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="search_"] [class^="searchBar_"] > [class^="icon_"] { +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root, +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"] { margin-top: 0 !important; } -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] [class^="iconWrapper_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] [class^="iconWrapper_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] [class^="iconWrapper_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] [class^="iconWrapper_"] { +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + [class^="iconWrapper-"] { width: 24px !important; height: 24px !important; - margin: 0; } -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] [class^="iconWrapper_"] > svg, -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] [class^="iconWrapper_"] > svg, -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] [class^="iconWrapper_"] > svg, -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] [class^="iconWrapper_"] > svg { +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + [class*="iconWrapper-"] + > svg { margin: 0 !important; padding: 1px; } -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="icon_"]:has(> [class^="text-md-normal_"]), -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="icon_"]:has(> [class^="text-md-normal_"]), -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="icon_"]:has(> [class^="text-md-normal_"]), -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="toolbar_"] > [class^="icon_"]:has(> [class^="text-md-normal_"]) { +[class^="chat-"] > [class^="title-"] [class^="toolbar-"] { + display: grid; + grid-auto-flow: column; + grid-gap: 4px; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="icon-"]:has(> [class^="text-md-normal-"]) { margin-left: 4px; margin-right: 0; } -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] [class^="topic_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] [class^="topic_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] [class^="topic_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] [class^="topic_"] { +[class^="chat-"] > [class^="title-"] [class^="topic-"] { margin-left: 4px; } -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] [class^="titleWrapper_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] [class^="titleWrapper_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] [class^="titleWrapper_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] [class^="titleWrapper_"] { +[class^="chat-"] > [class^="title-"] [class^="titleWrapper-"] { margin-right: 4px; } -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="children_"] > [class^="iconWrapper_"], -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] [class^="divider_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="children_"] > [class^="iconWrapper_"], -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] [class^="divider_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="children_"] > [class^="iconWrapper_"], -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] [class^="divider_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="children_"] > [class^="iconWrapper_"], -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] [class^="divider_"] { +[class^="chat-"] + > [class^="title-"] + > [class^="children-"] + > [class^="iconWrapper-"], +[class^="chat-"] > [class^="title-"] [class^="divider-"] { margin: 0 4px; } -[class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class^="children_"] > [class^="iconWrapper_"] > svg, -[class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="children_"] > [class^="iconWrapper_"] > svg, -[class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class^="children_"] > [class^="iconWrapper_"] > svg, -[class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class^="children_"] > [class^="iconWrapper_"] > svg { +[class^="chat-"] + > [class^="title-"] + > [class^="children-"] + > [class^="iconWrapper-"] + > svg { padding: 2px; } -[class*="iconWrapper_"] [class^="chat_"] > [class^="title_"] > [class^="upperContainer_"] > [class*="search_"], -[class*="iconWrapper_"] [class^="chat_"] > section[class*="container_"] > [class^="upperContainer_"] > [class*="search_"], -[class*="iconWrapper_"] [class^="base_"] > [class^="content_"] > [class^="container_"] > section[class*="container_"] > [class^="upperContainer_"] > [class*="search_"], -[class*="iconWrapper_"] [class^="base_"] > [class^="content_"] > [class^="applicationStore_"] section[class*="container_"] > [class^="upperContainer_"] > [class*="search_"] { + +[class^="chat-"] [class^="toolbar-"] [class*="iconWrapper-"], +[class^="chat-"] [class^="toolbar-"] > [class*="search-"] { margin: 0 !important; } -[class^="chatContent_"] +[class^="chatContent-"] > form [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] > div - > [class*="fontSize16Padding_"] { + > [class*="fontSize16Padding-"] { padding-top: 9px !important; padding-bottom: 9px !important; } -[class^="channelTextArea_"] [class^="inner_"] { +[class^="channelTextArea-"] [class^="inner-"] { padding-left: 0 !important; } -[class^="channelTextArea_"], -[class^="channelTextArea_"] [class^="inner_"], -[class^="channelTextArea_"] [class^="buttons_"], -[class^="channelTextArea_"] [class^="attachWrapper_"], -[class^="channelTextArea_"] [class^="attachButton_"], -[class^="channelTextArea_"] > [class^="scrollableContainer_"], -[class^="channelTextArea_"] [class^="inner_"] > [class^="textArea_"] { +[class^="channelTextArea-"], +[class^="channelTextArea-"] [class^="inner-"], +[class^="channelTextArea-"] [class^="buttons-"], +[class^="channelTextArea-"] [class^="attachWrapper-"], +[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_"], -[class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] { +[class^="channelTextArea-"] [class^="buttons-"], +[class^="channelTextArea-"] [class^="attachWrapper-"] { height: 40px; } -[class^="channelTextArea_"] [class^="attachWrapper_"] { +[class^="channelTextArea-"] [class^="attachWrapper-"] { min-width: 40px; } -[class^="channelTextArea_"] [class^="attachWrapper_"] [class^="attachButton_"] { +[class^="channelTextArea-"] [class^="attachWrapper-"] [class^="attachButton-"] { margin-left: 0; padding-top: 0; } -[class^="channelTextArea_"] [class^="attachButton_"] , -[class^="channelTextArea_"] [class^="attachButton_"] > [class^="icon_"] { +[class^="channelTextArea-"] [class^="attachButton-"] , +[class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] { padding: 5px 8px; } -[class^="channelTextArea_"] - [class^="buttons_"] - [class*="buttonContainer_"] - > button:not(:has(> [class*="innerButton_"])) { +[class^="channelTextArea-"] + [class^="buttons-"] + [class*="buttonContainer-"] + > button:not(:has(> [class*="innerButton-"])) { margin: 0; } -[class^="channelTextArea_"] [class^="buttons_"] > [class^="separator_"], -[class^="channelTextArea_"] - [class^="buttons_"] - > [class^="separator_"] - [class*="innerButton_"] { +[class^="channelTextArea-"] [class^="buttons-"] > [class^="separator-"], +[class^="channelTextArea-"] + [class^="buttons-"] + > [class^="separator-"] + [class*="innerButton-"] { margin-left: 4px; } -[class^="channelTextArea_"] - [class^="buttons_"] - > [class^="separator_"] - [class*="innerButton_"] { +[class^="channelTextArea-"] + [class^="buttons-"] + > [class^="separator-"] + [class*="innerButton-"] { margin-right: 0; } -[class*="menu_"] [class^="scroller_"] { +[class*="menu-"] [class^="scroller-"] { padding: 4px; } -[class*="menu_"] [class^="scroller_"]::-webkit-scrollbar { +[class*="menu-"] [class^="scroller-"]::-webkit-scrollbar { width: 4px; } -[class*="menu_"] [class^="scroller_"] [class^="item_"] { +[class*="menu-"] [class^="scroller-"] [class^="item-"] { margin: 1px 0; padding: 0 4px; min-height: 24px; } -[class*="menu_"] - [class^="scroller_"] - [class^="customItem_"][id^="message-quickreact-"] - > [class^="button_"] { +[class*="menu-"] + [class^="scroller-"] + [class^="customItem-"][id^="message-quickreact-"] + > [class^="button-"] { width: 24px; height: 24px; } -[class*="menu_"] - [class^="scroller_"] - [class^="wrapper_"]:has( - > [class^="customItem_"][id^="message-quickreact-"] +[class*="menu-"] + [class^="scroller-"] + [class^="wrapper-"]:has( + > [class^="customItem-"][id^="message-quickreact-"] ) { padding: 0; margin-bottom: 4px; } -[class*="menu_"] - [class^="scroller_"] - [class^="item_"] - > [class^="labelContainer_"], -[class*="menu_"] - [class^="scroller_"] - [class^="item_"] - > [class^="sliderContainer_"] { +[class*="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="labelContainer-"], +[class*="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="sliderContainer-"] { padding: 0; } -[class*="menu_"] - [class^="scroller_"] - [class^="item_"] - > [class^="labelContainer_"] { +[class*="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="labelContainer-"] { min-height: 24px; } -[class^="sidebar_"] > [class^="privateChannels_"] ul[class^="content_"] > [class^="channel_"] [class*="layout_"] { +[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_"] { +[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"] { +[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"] { +[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_"] { +[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] > [class^="avatar-"] { margin-right: 8px; } -[class^="sidebar_"] > [class^="privateChannels_"] ul[class^="content_"] > [class^="channel_"] [class*="layout_"] > [class^="avatar_"] - > [class^="wrapper_"] - > [class^="avatarDecoration_"] { +[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class^="channel-"] [class*="layout-"] > [class^="avatar-"] + > [class^="wrapper-"] + > [class^="avatarDecoration-"] { top: calc((.4 - var(--decoration-to-avatar-ratio)/2)*32px); left: calc((.475 - var(--decoration-to-avatar-ratio)/2)*32px); width: calc(32px * var(--decoration-to-avatar-ratio)); @@ -5925,70 +5562,70 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) } -[class^="sidebar_"] > [class^="privateChannels_"] ul[class^="content_"] > [class*="privateChannelsHeaderContainer_"] { +[class^="sidebar-"] > [class^="privateChannels-"] ul[class^="content-"] > [class*="privateChannelsHeaderContainer-"] { padding: 9px 4px 2px 9px; height: 24px; } -[class^="sidebar_"] > [class^="privateChannels_"] > [class^="searchBar_"] { +[class^="sidebar-"] > [class^="privateChannels-"] > [class^="searchBar-"] { height: 32px; }`, } @var select xmc_collapsing_sidebar 'Collapsing Sidebar' { 'Off*': "", - 'On': `div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav { + 'On': `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; @@ -5997,25 +5634,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; @@ -6029,201 +5666,180 @@ 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^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [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^="linkTop_"] - > [class^="name_"] { +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_"] { +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) .channel-typing-indicator, -div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) [class^="devBanner_"] { +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) .channel-typing-indicator, +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_"] { - width: 32px !important; -} - -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_"] > 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) + [class*="unreadBar-"] > span { 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; } `, - 'Compact-er Support': `div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav { + 'Compact-er Support': `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; @@ -6232,25 +5848,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; @@ -6264,197 +5880,176 @@ 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^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [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^="linkTop_"] - > [class^="name_"] { +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_"] { +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) .channel-typing-indicator, -div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) [class^="devBanner_"] { +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) .channel-typing-indicator, +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_"] { - width: 32px !important; -} - -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_"] > 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) + [class*="unreadBar-"] > span { 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; } `, 'Dynamic': `@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_"])) +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; @@ -6463,25 +6058,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; @@ -6495,197 +6090,176 @@ 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^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [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^="linkTop_"] - > [class^="name_"] { +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_"] { +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) .channel-typing-indicator, -div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) [class^="devBanner_"] { +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) .channel-typing-indicator, +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_"] { - width: 32px !important; -} - -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_"] > 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) + [class*="unreadBar-"] > span { 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; } }`, 'Dynamic + Compact-er Support': `@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_"])) +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; @@ -6694,25 +6268,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 !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; @@ -6726,142 +6300,121 @@ 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^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="modeSelected-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) + [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^="linkTop_"] - > [class^="name_"] { +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_"] { +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) .channel-typing-indicator, -div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) [class^="devBanner_"] { +div[class^="sidebar-"]:not(:has(> [class^="side-"])):not(:hover) .channel-typing-indicator, +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_"] { - width: 32px !important; -} - -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_"] > 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) + [class*="unreadBar-"] > span { 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; } }`, @@ -6869,7 +6422,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) @var select xmc_pip 'Disable Picture-in-picture' { 'Off*': "", - 'On': `[class*="pictureInPicture_"] { + 'On': `[class*="pictureInPicture-"] { display: none; }` } @@ -6877,49 +6430,49 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) @var select xmc_help_button 'Disable Help Button' { 'Off': "", 'On*': `a[href="https://support.discord.com"], -[class^="toolbar_"] > div:not([class]) > [class^="iconWrapper_"][aria-expanded] { +[class^="toolbar-"] > div:not([class]) > [class^="iconWrapper-"][aria-expanded] { display: none; }` } @var select xmc_unmirror 'Unmirror Own Camera' { 'Off': "", - 'On*': `[class*="mirror_"] { + 'On*': `[class*="mirror-"] { transform: none !important; }` } @var select xmc_wide_settings 'Full-width Settings' { 'Off': "", - 'On*': `[class*="standardSidebarView_"] - [class*="contentColumn_"]:not([class*="contentColumnWide_"]) { + 'On*': `[class*="standardSidebarView-"] + [class*="contentColumn-"]:not([class*="contentColumnWide-"]) { max-width: 100%; } -[class*="standardSidebarView_"] [class*="sidebarRegion_"] { +[class*="standardSidebarView-"] [class*="sidebarRegion-"] { flex: 0; } -[class^="accountProfileCard_"] { +[class^="accountProfileCard-"] { max-width: 660px; }`, } @var select xmc_hide_nowplaying 'Hide Friends Activity Sidebar' { 'Off': "", - 'On*': `[class^="nowPlayingColumn_"] { + 'On*': `[class^="nowPlayingColumn-"] { display: none; }`, } @var select xmc_voice_rings 'Outset Voice Rings' { 'Off': "", - 'On*': `[class*="avatarSpeaking_"], -[class^="avatar_"][class*="speaking_"] { + 'On*': `[class*="avatarSpeaking-"], +[class^="avatar-"][class*="speaking-"] { box-shadow: 0 0 0 2px var(--status-online, var(--status-green-600)), 0 0 0 3px var(--background-secondary) !important; } -[class^="voiceUsers_"] [class^="avatarContainer_"] { +[class^="voiceUsers-"] [class^="avatarContainer-"] { overflow: visible; }`, } @@ -6994,59 +6547,59 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) /* most of them are probably now-redundant color fixes */ /* others are things i dont feel like need a toggle at the current moment */ - [class^="container_"] > [class^="slider_"] > svg { + [class^="container-"] > [class^="slider-"] > svg { display: none; } - [class*="unreadBar_"] { + [class*="unreadBar-"] { margin: 4px; border-radius: 4px !important; } - [class^="modalTextContainer_"] { + [class^="modalTextContainer-"] { overflow: scroll !important; } - [class^="content_"] > [class^="sidebar_"] { + [class^="content-"] > [class^="sidebar-"] { border-radius: 0; } - .platform-osx [class*="guilds_"] > ul > [class^="scroller_"] { + .platform-osx [class*="guilds-"] > ul > [class^="scroller-"] { padding-top: 4px; } - [class^="slider_"] { + [class^="slider-"] { padding-top: 0 !important; } .platform-win - nav[class*="guilds_"] - > ul[class^="tree_"] - > [class^="scroller_"] { + nav[class*="guilds-"] + > ul[class^="tree-"] + > [class^="scroller-"] { padding-top: 12px !important; } - [class*="timestampVisibleOnHover_"] { + [class*="timestampVisibleOnHover-"] { opacity: 1 !important; } - [class^="message_"][class*="compact_"] { + [class^="message-"][class*="compact-"] { padding-top: 0 !important; padding-bottom: 0 !important; } - [class*="progressBarHeader_"] > [class^="container_"], - [class^="control_"] > [class^="container_"] { + [class*="progressBarHeader-"] > [class^="container-"], + [class^="control-"] > [class^="container-"] { transition: background-color 0.75s linear; } - [class*="barBase_"] { + [class*="barBase-"] { padding-bottom: 0 !important; border-radius: 8px; margin: 0 4px; } - [class^="markdown_"] code { + [class^="markdown-"] code { border-radius: 5%; } .hljs { @@ -7056,229 +6609,229 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) } [id^="message-username-"] - [class^="badge_"]:has(> [class^="badgeVerifiedIcon_"]) { + [class^="badge-"]:has(> [class^="badgeVerifiedIcon-"]) { display: none; } /* remove "dead space"/padding from vc users */ - [class*="containerDefault_"] [class*="listDefault_"] { + [class*="containerDefault-"] [class*="listDefault-"] { padding-left: 8px !important; } - [class*="containerDefault_"] - [class*="listDefault_"] - [class^="avatarContainer_"] { + [class*="containerDefault-"] + [class*="listDefault-"] + [class^="avatarContainer-"] { margin-left: 6px !important; } - [class*="containerDefault_"] [class*="listDefault_"] > [class^="clickable_"] { + [class*="containerDefault-"] [class*="listDefault-"] > [class^="clickable-"] { padding-left: 0 !important; } - [class*="containerDefault_"] - [class*="listDefault_"] - > [class^="clickable_"] - > [class^="content_"] { + [class*="containerDefault-"] + [class*="listDefault-"] + > [class^="clickable-"] + > [class^="content-"] { margin-left: 0 !important; } - [class*="containerDefault_"] [class*="listDefault_"] > [class^="separator_"] { + [class*="containerDefault-"] [class*="listDefault-"] > [class^="separator-"] { width: 100% !important; margin: 3px !important; } /* Change Nickname Modal */ - [class^="focusLock_"][aria-modal="true"] - > [class*="root_"]:not([class*="carouselModal_"]) { + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"]:not([class*="carouselModal-"]) { background-color: var(--background-primary); } - [class^="focusLock_"][aria-modal="true"] - > [class*="root_"] + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] > form - > [class^="flex_"]:nth-child(3), - [class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="flex_"]:nth-child(3) { + > [class^="flex-"]:nth-child(3), + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="flex-"]:nth-child(3) { background: var(--background-secondary); } /* Delete Modal */ - [class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="content_"] - > [class^="message_"] { + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="content-"] + > [class^="message-"] { background-color: var(--background-primary); } /* dropdown menus */ - [class^="css_"][class$="-menu"] { + [class^="css-"][class$="-menu"] { z-index: 9999; background-color: var(--background-secondary); border-color: var(--background-primary); } /* listen along */ - [id^="popout_"] [class^="userList_"] { + [id^="popout_"] [class^="userList-"] { border-color: var(--background-primary) !important; } - [id^="popout_"] [class^="userList_"] [class^="header_"] { + [id^="popout_"] [class^="userList-"] [class^="header-"] { background-color: var(--background-secondary) !important; color: var(--header-primary) !important; } - [id^="popout_"] [class^="userList_"] [class^="content_"] { + [id^="popout_"] [class^="userList-"] [class^="content-"] { background-color: var(--background-primary) !important; } - [class*="moreUsers_"] { + [class*="moreUsers-"] { background-color: var(--background-tertiary) !important; } /* autocomplete */ - [class^="autocomplete_"] { + [class^="autocomplete-"] { border: none !important; background-color: var(--background-floating) !important; box-shadow: 0 2px 5px 0 var(--background-secondary) !important; } - [class^="autocomplete_"] [class*="selectorSelected_"], - [class^="autocomplete_"] [class*="autocompleteRow_"] [class*="selected_"] { + [class^="autocomplete-"] [class*="selectorSelected-"], + [class^="autocomplete-"] [class*="autocompleteRow-"] [class*="selected-"] { background-color: var(--background-secondary) !important; } - [class^="autocomplete_"] [class*="categoryHeader_"] { + [class^="autocomplete-"] [class*="categoryHeader-"] { background-color: var(--background-floating) !important; } /* misc color fixes */ - [class^="peopleColumn_"] { + [class^="peopleColumn-"] { background: var(--background-primary); } - [class^="itemCard_"] [class*="inset_"] { + [class^="itemCard-"] [class*="inset-"] { background-color: var(--background-primary) !important; } - [class*="outer_"][class*="interactive_"]:hover { + [class*="outer-"][class*="interactive-"]:hover { background-color: var(--background-modifier-hover) !important; } - [class^="base_"] > [class^="content_"] > [class^="container_"] { + [class^="base-"] > [class^="content-"] > [class^="container-"] { background: var(--background-primary); } - [class*="modal_"][class*="root_"] { + [class*="modal-"][class*="root-"] { background-color: var(--background-primary); box-shadow: var(--deprecated-card-bg) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 2px 10px 0px; } - [class^="perksModal_"] { + [class^="perksModal-"] { background-color: var(--background-primary) !important; } - [class^="directoryModal_"] { + [class^="directoryModal-"] { background-color: var(--background-primary) !important; } - [class^="layerContainer_"] > [class^="layer_"] > [class^="container_"] { + [class^="layerContainer-"] > [class^="layer-"] > [class^="container-"] { background: var(--background-floating); } - [class^="layerContainer_"] - > [class^="layer_"] - > [class^="container_"] - [class^="option_"]:after { + [class^="layerContainer-"] + > [class^="layer-"] + > [class^="container-"] + [class^="option-"]:after { background: transparent; } - [class^="layerContainer_"] - > [class^="layer_"] - > [class^="container_"] - [class^="option_"][class*="selected_"] { + [class^="layerContainer-"] + > [class^="layer-"] + > [class^="container-"] + [class^="option-"][class*="selected-"] { background: var(--background-modifier-hover); } - [class^="chat_"][class*="background_"], - [class^="title_"][class*="background_"], - [class^="chat_"] > [class^="content_"] > [class^="container_"] { + [class^="chat-"][class*="background-"], + [class^="title-"][class*="background-"], + [class^="chat-"] > [class^="content-"] > [class^="container-"] { background-color: var(--background-tertiary) !important; } - [class*="headerBarInner_"]:after { + [class*="headerBarInner-"]:after { background: transparent !important; } - [class^="streamPreview_"] { + [class^="streamPreview-"] { background-color: var(--background-secondary) !important; } - [class^="streamPreview_"] > [class^="previewContainer_"] { + [class^="streamPreview-"] > [class^="previewContainer-"] { background-color: var(--background-primary) !important; } - [class*="messageContent_"].deleted-message { + [class*="messageContent-"].deleted-message { color: var(--status-red-500) !important; } - [class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class^="container_"] - [class*="footer_"], - [class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class*="modalSize_"], - [class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class*="modalSize_"] - [class*="footer_"], - [class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class*="modalRoot_"], - [class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class*="modalRoot_"] - [class*="footer_"] { + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class^="container-"] + [class*="footer-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalSize-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalSize-"] + [class*="footer-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalRoot-"], + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class*="modalRoot-"] + [class*="footer-"] { background-color: var(--background-primary) !important; } - [class^="layerContainer_"] - [class^="layer_"] - [class^="focusLock_"] - [class^="container_"] - [class*="footer_"] { + [class^="layerContainer-"] + [class^="layer-"] + [class^="focusLock-"] + [class^="container-"] + [class*="footer-"] { box-shadow: none; } - [class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="scroller_"] { + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="scroller-"] { background: var(--background-secondary); } - [class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - [class^="reactors_"] { + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + [class^="reactors-"] { background-color: var(--background-primary); } - [class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="scroller_"] - > [class^="reactionSelected_"] { + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="scroller-"] + > [class^="reactionSelected-"] { background-color: var(--background-modifier-active); } - [class^="focusLock_"][aria-modal="true"] - > [class*="root_"] - > [class^="scroller_"] - > [class^="reactionDefault_"]:hover { + [class^="focusLock-"][aria-modal="true"] + > [class*="root-"] + > [class^="scroller-"] + > [class^="reactionDefault-"]:hover { background-color: var(--background-modifier-hover); } - [class^="contentWarningPopout_"] { + [class^="contentWarningPopout-"] { background: var(--background-primary) !important; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3) !important; } - [class^="customColorPicker_"] { + [class^="customColorPicker-"] { background: var(--background-primary) !important; } @@ -7309,14 +6862,14 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) }*/ /* font fixes */ - [class^="markdown_"] [class^="codeInline_"], - [class^="codeLine_"], - [class^="codeBlockText_"], - [class^="durationTimeDisplay_"], - [class^="durationTimeSeparator_"], - [class*="after_inlineCode_"], - [class*="before_inlineCode_"], - [class^="inlineCode_"], + [class^="markdown-"] [class^="codeInline-"], + [class^="codeLine-"], + [class^="codeBlockText-"], + [class^="durationTimeDisplay-"], + [class^="durationTimeSeparator-"], + [class*="after_inlineCode-"], + [class*="before_inlineCode-"], + [class^="inlineCode-"], code.inline, code, .hljs { @@ -7335,7 +6888,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) } /* unbreak resizing webms :^) */ - /*[class^="mediaAttachmentsContainer_"] [class^="imageWrapper_"] { + /*[class^="mediaAttachmentsContainer-"] [class^="imageWrapper-"] { min-width: 10px; min-height: 10px; max-width: unset; @@ -7345,11 +6898,11 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) object-fit: none !important; aspect-ratio: unset !important; } - [class^="mediaAttachmentsContainer_"] [class^="messageAttachment_"] { + [class^="mediaAttachmentsContainer-"] [class^="messageAttachment-"] { height: unset; } - [class^="mediaAttachmentsContainer_"] [class^="oneByOneGrid_"], - [class^="mediaAttachmentsContainer_"] [class^="oneByTwoGrid_"] { + [class^="mediaAttachmentsContainer-"] [class^="oneByOneGrid-"], + [class^="mediaAttachmentsContainer-"] [class^="oneByTwoGrid-"] { max-height: unset !important; }*/ @@ -7406,11 +6959,11 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])):not(:hover) --xmc-custom-highlight: /*[[xmc_custom_highlight]]*/ ; --xmc-custom-highlight-rgb: /*[[xmc_custom_highlight_rgb]]*/ ; - --xmc-custom-status-online: /*[[xmc_custom_status_online]]*/ !important; - --xmc-custom-status-idle: /*[[xmc_custom_status_idle]]*/ !important; - --xmc-custom-status-dnd: /*[[xmc_custom_status_dnd]]*/ !important; - --xmc-custom-status-offline: /*[[xmc_custom_status_offline]]*/ !important; - --xmc-custom-status-streaming: /*[[xmc_custom_status_streaming]]*/ !important; + --xmc-custom-status-online: /*[[xmc_custom_status_online]]*/ ; + --xmc-custom-status-idle: /*[[xmc_custom_status_idle]]*/ ; + --xmc-custom-status-dnd: /*[[xmc_custom_status_dnd]]*/ ; + --xmc-custom-status-offline: /*[[xmc_custom_status_offline]]*/ ; + --xmc-custom-status-streaming: /*[[xmc_custom_status_streaming]]*/ ; --xmc-custom-hover: /*[[xmc_custom_hover]]*/ ; --xmc-custom-active: /*[[xmc_custom_active]]*/ ;