From 0bcf9855241e3ae3b62fce3802c321970cf1de90 Mon Sep 17 00:00:00 2001 From: CI Date: Thu, 23 Mar 2023 19:39:31 +0000 Subject: [PATCH] Make Modular --- modular/compacter_mode.css | 14 ++ modular/stylings/windows_classic.css | 231 ++++++++++++++++++++++----- 2 files changed, 201 insertions(+), 44 deletions(-) diff --git a/modular/compacter_mode.css b/modular/compacter_mode.css index 1a401d2..a8952b3 100644 --- a/modular/compacter_mode.css +++ b/modular/compacter_mode.css @@ -49,6 +49,20 @@ 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-"] diff --git a/modular/stylings/windows_classic.css b/modular/stylings/windows_classic.css index 35e60ad..c54fcfe 100644 --- a/modular/stylings/windows_classic.css +++ b/modular/stylings/windows_classic.css @@ -8,6 +8,10 @@ 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), 1px 1px 0 0 var(--secondary), @@ -19,13 +23,8 @@ -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); + 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(--primary), @@ -37,13 +36,8 @@ -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); + 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)), @@ -55,6 +49,10 @@ 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), 1px 1px 0 0 var(--secondary), @@ -65,24 +63,22 @@ -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), + 0px -1px 0 0 var(--tertiary), -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-"], @@ -92,6 +88,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, @@ -156,6 +153,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-"] @@ -211,11 +219,13 @@ 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-"] @@ -225,7 +235,7 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) 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); } @@ -238,7 +248,7 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) [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-"] @@ -264,13 +274,109 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"])) line-height: 12px; margin-top: 0; } + +[class*="menu-"] + > [class^="scroller-"] + [class^="item-"] + > [class^="iconContainer-"], [class*="menu-"] > [class^="scroller-"] [class^="item-"] > [class^="iconContainer-"] - > [class^="caret-"] { - margin-left: 8px; + > 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"] @@ -305,34 +411,71 @@ 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, + )::-webkit-scrollbar-button:single-button, [class*="scrollerBase-"][class*="fade-"]:not( [class*="thin-"] - )::-webkit-scrollbar-button { + )::-webkit-scrollbar-button:single-button { visibility: hidden; } [class^="scroller-"][class*="fade-"]:not( [class*="thin-"] - ):hover::-webkit-scrollbar-button, + ):hover::-webkit-scrollbar-button:single-button, [class*="scrollerBase-"][class*="fade-"]:not( [class*="thin-"] - ):hover::-webkit-scrollbar-button { + ):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,