diff --git a/xmc.user.css b/xmc.user.css index 9a1e995..497a305 100644 --- a/xmc.user.css +++ b/xmc.user.css @@ -2230,6 +2230,9 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, 2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary), -2px 2px 0 0 var(--tertiary); + --wc-frame-inset: inset -1px -1px 0 0 var(--tertiary), inset 1px 1px 0 0 var(--primary), + inset -2px -2px 0 0 var(--secondary), inset 2px 2px 0 0 var(--wc-bright, var(--highlight)); + --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary), 0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary), @@ -2238,13 +2241,8 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, 2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--wc-bright, var(--highlight)), -2px 2px 0 0 var(--tertiary); - --wc-outer-edge-inset: inset -1px -1px 0 0 var(--tertiary), - inset -1px 0px 0 0 var(--tertiary), inset 0px -1px 0 0 var(--tertiary), - inset -1px 1px 0 0 var(--wc-bright, var(--highlight)), inset 1px -1px 0 0 var(--wc-bright, var(--highlight)), - inset 1px 1px 0 0 var(--wc-bright, var(--highlight)), inset 2px 2px 0 0 var(--primary), - inset -2px -2px 0 0 var(--secondary), inset 1px -2px 0 0 var(--secondary), - inset 2px -2px 0 0 var(--primary), inset -2px 1px 0 0 var(--secondary), - inset -2px 2px 0 0 var(--primary); + --wc-outer-edge-inset: inset -1px -1px 0 0 var(--tertiary), inset 1px 1px 0 0 var(--wc-bright, var(--highlight)), + inset -2px 2px 0 0 var(--primary), inset 2px 2px 0 0 var(--primary); --wc-inner-edge: -1px -1px 0 0 var(--tertiary), -1px 0px 0 0 var(--tertiary), 0px -1px 0 0 var(--tertiary), @@ -2254,13 +2252,8 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, 2px -2px 0 0 var(--wc-bright, var(--highlight)), -2px 1px 0 0 var(--secondary), -2px 2px 0 0 var(--wc-bright, var(--highlight)); - --wc-inner-edge-inset: inset -1px -1px 0 0 var(--wc-bright, var(--highlight)), - inset -1px 0px 0 0 var(--wc-bright, var(--highlight)), inset 0px -1px 0 0 var(--wc-bright, var(--highlight)), - inset -1px 1px 0 0 var(--secondary), inset 1px -1px 0 0 var(--secondary), - inset 1px 1px 0 0 var(--secondary), inset 2px 2px 0 0 var(--tertiary), - inset -2px -2px 0 0 var(--primary), inset 1px -2px 0 0 var(--primary), - inset 2px -2px 0 0 var(--tertiary), inset -2px 1px 0 0 var(--primary), - inset -2px 2px 0 0 var(--tertiary); + --wc-inner-edge-inset: inset -1px -1px 0 0 var(--wc-bright, var(--highlight)), inset 1px 1px 0 0 var(--secondary), + inset -2px -2px 0 0 var(--primary), inset 2px 2px 0 0 var(--tertiary); } .theme-light { --wc-frame: -1px -1px 0 0 var(--wc-bright, var(--highlight)), @@ -2271,6 +2264,9 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, 2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--primary), -2px 2px 0 0 var(--tertiary); + --wc-frame-inset: inset -1px -1px 0 0 var(--tertiary), inset 1px 1px 0 0 var(--primary), + inset -2px -2px 0 0 var(--secondary), inset 2px 2px 0 0 var(--wc-bright, var(--highlight)); + --wc-outer-edge: -1px -1px 0 0 var(--primary), -1px 0px 0 0 var(--primary), 0px -1px 0 0 var(--primary), -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary), @@ -2279,21 +2275,19 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, 2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--wc-bright, var(--highlight)), -2px 2px 0 0 var(--tertiary); - --wc-outer-edge-inset: inset -1px -1px 0 0 var(--primary), - -1px 0px 0 0 var(--primary), 0px -1px 0 0 var(--primary), - -1px 1px 0 0 var(--secondary), 1px -1px 0 0 var(--secondary), - 1px 1px 0 0 var(--secondary), 2px 2px 0 0 var(--tertiary), - -2px -2px 0 0 var(--wc-bright, var(--highlight)), 1px -2px 0 0 var(--wc-bright, var(--highlight)), - 2px -2px 0 0 var(--tertiary), -2px 1px 0 0 var(--wc-bright, var(--highlight)), - -2px 2px 0 0 var(--tertiary); + --wc-outer-edge-inset: inset -1px -1px 0 0 var(--tertiary), inset 1px 1px 0 0 var(--wc-bright, var(--highlight)), + inset -2px 2px 0 0 var(--primary), inset 2px 2px 0 0 var(--primary); --wc-inner-edge: -1px -1px 0 0 var(--tertiary), -1px 0px 0 0 var(--tertiary), 0px -1px 0 0 var(--tertiary), - -1px 1px 0 0 var(--wc-bright, var(--highlight)), 1px -1px 0 0 var(--wc-bright, var(--highlight)), - 1px 1px 0 0 var(--wc-bright, var(--highlight)), 2px 2px 0 0 var(--primary), + -1px 1px 0 0 var(--primary), 1px -1px 0 0 var(--primary), + 1px 1px 0 0 var(--primary), 2px 2px 0 0 var(--wc-bright, var(--highlight)), -2px -2px 0 0 var(--secondary), 1px -2px 0 0 var(--secondary), - 2px -2px 0 0 var(--primary), -2px 1px 0 0 var(--secondary), - -2px 2px 0 0 var(--primary); + 2px -2px 0 0 var(--wc-bright, var(--highlight)), -2px 1px 0 0 var(--secondary), + -2px 2px 0 0 var(--wc-bright, var(--highlight)); + + --wc-inner-edge-inset: inset -1px -1px 0 0 var(--wc-bright, var(--highlight)), inset 1px 1px 0 0 var(--secondary), + inset -2px -2px 0 0 var(--primary), inset 2px 2px 0 0 var(--tertiary); } [class*="button-"][class*="lookFilled-"], @@ -2303,6 +2297,7 @@ section[class^="panels-"] button[class^="button-"], [class^="toolbar-"] [class*="iconWrapper-"] { border-radius: 0; + background-color: var(--primary); box-shadow: var(--wc-outer-edge-inset) !important; } [class*="button-"][class*="lookFilled-"]:active, @@ -2354,6 +2349,17 @@ section[class^="panels-"] height: calc(100% - 4px); } +div[class^="sidebar-"] { + border-left: 2px solid var(--primary); +} + +[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-"] @@ -2409,18 +2415,20 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) box-shadow: var(--wc-frame); } [class*="menu-"] > [class^="scroller-"] { - padding: 1px !important; + padding: 1px 1px 4px 1px !important; + margin-right: -4px } [class*="menu-"] > [class^="scroller-"] [class^="item-"] { border-radius: 0 !important; - margin: 2px 0; + margin: 1px 0; + padding: 0 2px !important; } [class*="menu-"] > [class^="scroller-"] [class^="customItem-"][id^="message-quickreact-"] > [class^="button-"] { border-radius: 0 !important; box-shadow: var(--wc-outer-edge-inset); } [class*="menu-"] [class^="scroller-"] [class^="separator-"] { - margin: 4px 2px; + margin: 4px 1px; border-bottom: 1px solid var(--wc-bright, var(--highlight)); border-top: 1px solid var(--secondary); } @@ -2429,7 +2437,7 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) font-size: 12px; } [class*="menu-"] > [class^="scroller-"] [class^="item-"]:not(:has(> [class^="iconContainer-"] > [class^="icon-"])):not(:has(> [class^="iconContainerLeft-"])) { - padding-inline-start: 24px; + padding-inline-start: 20px !important; } [class*="menu-"] > [class^="scroller-"] [class^="item-"]:has(> [class^="iconContainer-"] > [class^="icon-"]) { flex-direction: row-reverse; @@ -2443,9 +2451,72 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) line-height: 12px; margin-top: 0; } -[class*="menu-"] > [class^="scroller-"] [class^="item-"] > [class^="iconContainer-"] > [class^="caret-"] { - margin-left: 8px; + +[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-"][aria-haspopup="true"] > [class^="iconContainer-"] > [class^="caret-"] { + display: none; +} +[class*="menu-"] > [class^="scroller-"] [class^="item-"][aria-haspopup="true"] > [class^="iconContainer-"]:before { + content:""; + position: absolute; + right: -2px; + top: 0px; + width: 16px; + height: 16px; + background-color: var(--text); + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVBhXY4CC/1AaKwBJ4lQAk8SqAFkSQwFOCRDAKQECWCQYGACCnQ/xc1GbJAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVBhXY4CC/1AaKwBJ4lQAk8SqAFkSQwFOCRDAKQECWCQYGACCnQ/xc1GbJAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + mask-repeat: no-repeat; + mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; +} +[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 { + content:""; + position: absolute; + right: 0px; + top: 1px; + width: 16px; + height: 16px; + background-color: var(--text); + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAArSURBVBhXY8AD/kNpDACSAEuiq4BJwCVhClAkQABZAEUCBnBKwACaBAMDANZXFOzc7AnWAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAArSURBVBhXY8AD/kNpDACSAEuiq4BJwCVhClAkQABZAEUCBnBKwACaBAMDANZXFOzc7AnWAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + mask-repeat: no-repeat; + mask-position: center; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; +} +[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 { + content:""; + position: absolute; + right: -1px; + top: 0px; + width: 16px; + height: 16px; + background-color: var(--text); + mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAiSURBVBhXY4CC/2gYDNAFYRirIAhjFQRhrIIgDAZoggwMACftH+F43ykVAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAiSURBVBhXY4CC/2gYDNAFYRirIAhjFQRhrIIgDAZoggwMACftH+F43ykVAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + mask-repeat: no-repeat; + mask-position: center; + -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 { + background-color: white; +} + [class*="menu-"] > [class^="scroller-"] [class^="item-"][aria-disabled="true"] > [class^="label-"] { color: var(--secondary); text-shadow: 1px 1px 0 var(--wc-bright, var(--highlight)); @@ -2473,26 +2544,47 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) } [class^="scroller-"]::-webkit-scrollbar-thumb, [class*="scrollerBase-"]::-webkit-scrollbar-thumb, -[class^="scroller-"]:not([class*="thin-"])::-webkit-scrollbar-button, -[class*="scrollerBase-"]:not([class*="thin-"])::-webkit-scrollbar-button { +[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-outer-edge-inset); + box-shadow: var(--wc-frame-inset); border: none; } -[class^="scroller-"][class*="fade-"]:not([class*="thin-"])::-webkit-scrollbar-button, -[class*="scrollerBase-"][class*="fade-"]:not([class*="thin-"])::-webkit-scrollbar-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, -[class*="scrollerBase-"][class*="fade-"]:not([class*="thin-"]):hover::-webkit-scrollbar-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:active, -[class*="scrollerBase-"]::-webkit-scrollbar-button:active { - box-shadow: var(--wc-inner-edge-inset); +[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 { + 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 { + 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-"]: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, @@ -4821,6 +4913,14 @@ em { height: unset !important; } +[class*="guilds-"] ul[class^="tree-"] > [class^="scroller-"] > div[style*="height: 56px;"] { + height: unset !important; +} + +[class*="guilds-"] ul[id^="folder-items-"] > [class^="listItem-"] > [class^="pill-"] { + left: -8px; +} + section[class^="panels-"] > [class*="activityPanel-"] [class^="gameIcon-"], section[class^="panels-"] > [class*="activityPanel-"]