From aa12e91ce165f8a930fc9181954ce7db01fd0da3 Mon Sep 17 00:00:00 2001 From: Cynthia Foxwell Date: Fri, 26 Jan 2024 23:42:00 -0700 Subject: [PATCH] backlog --- pxvmc.scss | 1 + src/font.css | 138 ------------------------- src/winclassic.scss | 239 ++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 218 insertions(+), 160 deletions(-) delete mode 100644 src/font.css diff --git a/pxvmc.scss b/pxvmc.scss index a46304d..2dfafaf 100644 --- a/pxvmc.scss +++ b/pxvmc.scss @@ -14,3 +14,4 @@ @use "src/private_channels"; @use "src/embeds"; @use "src/winclassic"; +@use "src/misc"; diff --git a/src/font.css b/src/font.css deleted file mode 100644 index ad99059..0000000 --- a/src/font.css +++ /dev/null @@ -1,138 +0,0 @@ -@font-face { - font-family: "Unifont"; - src: local("Unifont"), - url(https://cynosphere.gitlab.io/Customizations/discord/assets/unifont-14.0.01.ttf) - format("truetype"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "Terminus (TTF)"; - src: local("Terminus (TTF)"), - url(https://cynosphere.gitlab.io/Customizations/discord/assets/TerminusTTF-4.47.0.ttf) - format("truetype"); - font-weight: normal; - font-style: normal; -} -@font-face { - font-family: "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; - font-style: normal; -} -@font-face { - font-family: "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; - font-style: italic; -} -@font-face { - font-family: "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; - font-style: italic; -} - -:root, -.theme-dark, -.theme-light { - --font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)", - "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace, - Twemoji !important; - --font-display: "Terminus (TTF) for Windows", "Terminus (TTF)", - "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace, - Twemoji !important; - --font-code: "tewi", "Terminus (TTF) for Windows", "Terminus (TTF)", - "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; - - --_font-titlebars: var(--font-primary) !important; -} - -[class*="menu_"] [class^="item_"], -[class^="containerDefault_"] - > [class^="iconVisibility_"] - > [class^="content_"] - [class^="name_"] { - font-size: 16px; - text-transform: none !important; - font-weight: 500; -} -[class^="containerDefault_"] - > [class^="iconVisibility_"] - > [class^="mainContent_"] - [class^="name_"], -[class^="membersGroup_"], -[class^="headerContent_"] > [class^="name_"] { - font-size: 16px; - text-transform: none !important; - font-weight: 600; -} - -[class^="reaction_"] [class*="reactionCount_"] { - font-size: 12px; -} - -.hh2-spotify-controls-album-name, -.showTag-username { - font-size: 12px !important; -} - -[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_"], -span[class="role-tag"], -.antiDelete-deleted-suffix { - font-size: 12px !important; -} - -[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_"] { - font-size: 12px !important; -} - -.hljs-ansi-style-bold { - font-weight: 0; -} - -[class^="markdown_"] [class^="codeInline_"], -code.inline, -.hljs { - font-size: 12px !important; -} - -[class^="markdown_"] code, -[class^="markdown_"] [class^="codeInline_"], -code.inline { - line-height: 12px !important; -} - -[class^="markup_"] ol, -[class^="markup_"] ul { - margin: 4px 0 0 24px !important; -} diff --git a/src/winclassic.scss b/src/winclassic.scss index bdaaa84..dc7a696 100644 --- a/src/winclassic.scss +++ b/src/winclassic.scss @@ -60,11 +60,19 @@ --Scrollbar: #383838; } :root { + --ImageDither: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAPSURBVBhXY4CC/1CCgQEADwMB/wK6BPYAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); --ImageFolderClosed: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE3SURBVFhH7VJBEoIwDOTIf/iTf+JPPMYjMx5qg42uS0KhFHFGO7OTzTZN1mDzdafvm5BD27Yhldc90nwcxxBCv4hDTKwdrqhqQpqF29UctIQqJqTJMFyKIe9LkMa/Vv9pxNEPE2rAWnExBodDLtubPt8uA9qcI99zHqMY6Lq4hUM2IMDhwslMfQPw60ydtHIDPMgawDDeHL8BjoqUbzfAjTwNgffCNY9x3wa4sacxh3y9AW6Qg9azCcrLP4EVWUOgBrV5A1azNdB3MOzJIS//BNDEjDmeUPYnxGaWrgNyPEbbABVt0hCiIwxt/waUa1PmWIdImm8AimYa516NcIVzNzeARQjj8ezOqsE7A8ufQIowWpxrUMOc7xP8DXD0NE8XzrpqkL8ZkOQMTAbkCDkD0/D/+fHTNHfV1QBuqTnkzQAAAABJRU5ErkJggg=="); + --ImageFolderClosedOverlay: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEZSURBVFhH7VKBDcIwDNsBXMITvMWdPATzJE/GJLRrV4YEkaw4bpqajOkb41qB+4whgeGIUwFDTNQ+TuxqYuvjxC4mMOTSAdxvwRpPxQdj3RwNRCtuxTnhWmN7i4keAxzm2c+9RoaB24whGwD0cXA3s7sB/XWR7lqzAX8oesAR3Rm+Ac8E680GfFCmKfQcnDVy1wZ8cKY517ragA8ogf1uwuvmTxBl1xSqaW/RQDSsBrynj5Fr3fwJdEiUS5xo+hPqsEjn8BJHDg140xZNAV0Rad0bIOdA59qnoJYa0CbXvM56wIns7MWANimiy34W9ehZhLefAA2aI+49qmnt50S6Ac+ZlungrlPT+skAiiOwGECAHIF//HxM0wMCXoMpXQz00wAAAABJRU5ErkJggg=="); --ImageFolderOpen: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFFSURBVFhH7ZJREoMwCEQ9bc/Ra3gnD+SflcrWDQKamtofmXkTRMKuid0dWfR9N+2hre1Dho/jmDIMj9+YgPg09bs0N1EjDpqZOCw+bHOYOIpKliEvar+ekb1HmeW2JnYNOF9e5BU1PYXSxNkT+MCitqZrnQEeuJdnNVoLA/JwBfKjvk2wAUnwY/waEYSRwsDnyM6CIw5yiJ43gOF2jd5r/r0BK5Dh9WpNhNucgIeIQJxXyl0DElUmPBF+b2smfz4X4ToDnohFehJhAOHcAG/OiPq4bnJcQ90JMBgYiTBSN/2uAYnURCRgYTHeY+r4D5QlCgO82cLDshU51xX6+sAAwwOw2pqXW6gH16AssTGATUfgXha0NUUM0DWs4Z4ChtnVy73nALqGNd4GpIGHY41q9lly7gsIDVzJLFka0MCLK7jj39F1L3Q+/18vALefAAAAAElFTkSuQmCC"); + --ImageFolderOpenOverlay: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEqSURBVFhH7VLbDcJADOsATMISrMUUrAy1hCWfm6R39MFPLVlJc2ns5jpdWMGzg4ehZ/hj5iEmOPTWwd1NjIiTu5noFb8HOU30MgQPOHyUI3h/Y4M1A9GXaz5Sg9bCxNYNkCrqNcYhAzpwLa9qGhsDeDiD+FEh3hhAchYgSCONAa5sK7niLKfoZgMc6DE7Z/6zAReoGPWyBuFdNhARIhTSqHloABgxEYnoudc8f82E8JCBSMSJnkqYpHBpQF+umPVp3XNew9AGlByYiShR9/7QAFCZyAScKqbveJ3/QWpAX3bqsCoy1zrJr+/agA5g9FqUO7WH11AaYHMPtVcFvUbCAK+hQbQFDvMY5dFzRl5DAxRxqMMZs5o/I9e+jKmBM7kwAKB4Fi/8G9P0AdexoBVUhbn6AAAAAElFTkSuQmCC"); --ImageHome: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE2SURBVFhH1ZaJDYMwDEUzbUdhB3bKTqnt5BdwXMjhSO2XLHOYvNdIoIa/zv4KqRxesoeQUHRqzkyH4SntJoDBKbyk6NRfAHCpWP/KpQIXeBHQEssENDzuGa4llghYcLqcz5WEu8A3eIzxq4SbwB2c8yTBnWosT3DkTqJUf1rhyINEX3rhiIvEKDzPT0rMwtGHJLzg6F0S3nD0Hglc/NQsHB0SRtXZtk0e8IKjY01C2GCEBZ7TBtXdSaANZnUHgXaY1ScFjsX4jbGKHpf7OXWfELguxjA5Pr1WeLVyajhnUKBeTAQUnP6BFAEbzn1AwF6sEiD4ISATZl+zAwWOL6c1j+6/Ayc4X6PH5b6eR/fdAQU/BGw4d98dUPBDQCbM3izAg3fFMA2HgDV/Lp4R0E0wtLJ+KSG8AZmedDr25ZPhAAAAAElFTkSuQmCC"); --ImageUnread: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACESURBVDhPtZBRCsAgDEM9vefyZpupBtpY9WPsQRjM5bWzZNRaH5/+CrnDgtJao2Qv0uIojSdxokg2FWXGk0r2a8cNSK/wbvLyjbDFaTqTAYFt8YsAeEnGJwHvwARAJfoLKmE5CFAiJ8Eynagkw5cXwcQ+UFhETmVjHi65FhUWfOaRo5QXtxdbQzKnh2UAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAA=="); --ImagePing: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACASURBVDhPzZBBCsAwCAR9ek95V3+WqmRhNWJoTx0YCprdhkjFJTJZHZlnENDTwVvVNaypglkqipRhhuZlyZsCUyNzjGHf5upM2oVbfCkwrcBv8eOCRrxB/5BM2iEcCqyVDwVovv0dlCVJDm8FCz+AAETQ7MLOWm4egxkE2LUiRB7pcKIEGXR8dgAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + --ImageMonitor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABgSURBVDhP7ZIxCsAwDAPzdD/NP2sRkVoXHOMM2XqgRaBzhoyImV074WyCwt1bARRMicZdwgteAWBRBvyCk4IuqWA3zzigspsaXAH4oauLKXqixop6ypZ8RlkoqCWNkDFu9ufFFlUhU60AAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + --ImageSpeaker: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACfSURBVDhPlZABDsQgCAR9uj+rP/M64Hqk0tObhCjKLmjZ0Ef8z3WVXms1g7Geg7h3795as/CbAySmK4EYsimWM4nhTqcYYrHMR+rCKI7jCwleuvZQ/J2AEItQqLMbrBOwwqEBuOC+ksjy+IQYnNn7SZ4TEELFb1hx/Ejy7BN3TBP2mcGJ0XwSIaJQdyNNMRNWpiAywbHJrvAXZuDbjFI+9M9SwlE3nTsAAAAASUVORK5CYII="); + --ImageCamera: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB0SURBVDhP7ZHZDYAwDEMzekbrZhDnADcgVPGJeJJxyNUi5EdEVbcM34EFtaTiJ/kQgySw0J0ZY3geDuWC6bD6hKmRxfnqhYOci0f6RbysFgC8Z0+AIjffiW9LceDXskQfstLhbYjjtT8AWes51Kjiir6DyA4C/PHAro/o3gAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + --ImageDiscovery: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAI1SURBVFhHrVQLdsQgEMrRc7S92RZw0NFoPpuOjxKdD8S03Z7Evu/fK0Tp/0YWcHw+n++GZd52/SxsvI0r0XNx3obxQ2Rhxi1RQ6LfgR/E8q05fCVqWBQzehPM3YiZuAbPhDWYYj5biZMJ9pzEb+KD6FTcTLB3EhT3Nb8WJ6su9lXcYG4Ivz3qSzPxRty9o7jOhBZ+ewfmHAepEecrUXPukSh74rzLCSXyt0c9CtAgjmJjFDPXHLgKRD7E/Vn9mSFLFPH++tHQsQfG2cjMcWlg7M/EuVQjFAO+/iYaPIoteav/qgmdywQQBjtxMwrRH2/PRrOSeL5hwqJFoPz5FhMhgjUVPxggIqEGFcxFzRZ2v7n0FxNLcc0ns5CNOPAwRyt+KG5WfczgqvMAnlcDOGjDyjiyVm3qTeSbM3fiZopwcYbZkAk8LMW5VBziAb99qS4xFQfXW+A6iBPYMPBYuVtdUzNQqlnfeGrCBro5ifngwHa90oDxBpbizF3eAAMHDGz7xcKRA3d+B+6JM3iolvsm9BmSiam4DUSP4P1ooDTGYsGKE2ziTFw1MxOdAQYTFrliNUNI/25jb1ELAjREA50J1x8CyXoLM1EzoQEcahNkn7dfUkY14XztnwWSpyYMDcjiR84meEgD1cRpWGQUJeqAc3H30wQPZQT83ESGmk5EKwOph4JMvjOh4gvRA9xTvj8egKefoxaNw++iicxMOHcnXAzMhDJybR/NxHMDOdy4wlWk2m37A2epol0QLuNCAAAAAElFTkSuQmCC"); + --ImageAdd: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC2SURBVFhH7ZBRCsQwCET9WPbcuXmbSTNFFhuTBUsLPngYiNFpJXkVpZTNsl7BeLDMol7dG+C7fU75B9TfiCMDZIDwABwy0gtwJXrakhFonEEHmGE5gF7gKUXOeiUDoPazzWoADGcdGRIAg1k9lwJ4AgzlcqvHso7XZxs2jgT6y2feUDeABx4DLtcBOHzGY9of4PHjAxydQWSADMAlv9YrfQ6lLbO8K0CDyyx7SyzWYtpbkrcgsgMiLydccAQrWQAAAABJRU5ErkJggg=="); } .theme-light { @@ -163,13 +171,6 @@ div[class^="sidebar_"] { border-left: 4px solid #{colors.$primary}; } -[class*="guilds_"] [class^="guildSeparator_"] { - height: 0; - border-bottom: 1px solid #{colors.$c8}; - border-top: 1px solid #{colors.$secondary}; - border-radius: 0; -} - div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav[class^="container_"] > [class^="container_"][class*="clickable_"] @@ -421,6 +422,10 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) width: 0px !important; min-width: 0px !important; } + + & > div[style*="height: 56px;"]:has(> [class^="listItem_"]) { + height: unset !important; + } } [class^="listItemWrapper_"] > [class^="wrapper_"] { @@ -442,6 +447,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) height: 16px; background-repeat: no-repeat; background-position: center; + image-rendering: pixelated; &:has(> [class^="numberBadge_"][style*="--status-danger"]) { background-image: var(--ImagePing); @@ -451,6 +457,52 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) } } } + [class^="upperBadge_"] { + left: 0; + right: unset; + z-index: 11; + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-position: center; + image-rendering: pixelated; + + &:has( + > [class^="iconBadge_"] + > svg + > path[d="M4 2.5C2.897 2.5 2 3.397 2 4.5V15.5C2 16.604 2.897 17.5 4 17.5H11V19.5H7V21.5H17V19.5H13V17.5H20C21.103 17.5 22 16.604 22 15.5V4.5C22 3.397 21.103 2.5 20 2.5H4ZM20 4.5V13.5H4V4.5H20Z"] + ) { + background-image: var(--ImageMonitor); + + & > [class^="iconBadge_"] { + display: none; + } + } + + &:has( + > [class^="iconBadge_"] + > svg + > path[d="M11.383 3.07904C11.009 2.92504 10.579 3.01004 10.293 3.29604L6 8.00204H3C2.45 8.00204 2 8.45304 2 9.00204V15.002C2 15.552 2.45 16.002 3 16.002H6L10.293 20.71C10.579 20.996 11.009 21.082 11.383 20.927C11.757 20.772 12 20.407 12 20.002V4.00204C12 3.59904 11.757 3.23204 11.383 3.07904ZM14 5.00195V7.00195C16.757 7.00195 19 9.24595 19 12.002C19 14.759 16.757 17.002 14 17.002V19.002C17.86 19.002 21 15.863 21 12.002C21 8.14295 17.86 5.00195 14 5.00195ZM14 9.00195C15.654 9.00195 17 10.349 17 12.002C17 13.657 15.654 15.002 14 15.002V13.002C14.551 13.002 15 12.553 15 12.002C15 11.451 14.551 11.002 14 11.002V9.00195Z"] + ) { + background-image: var(--ImageSpeaker); + + & > [class^="iconBadge_"] { + display: none; + } + } + + &:has( + > [class^="iconBadge_"] + > svg + > path[d="M21.526 8.149C21.231 7.966 20.862 7.951 20.553 8.105L18 9.382V7C18 5.897 17.103 5 16 5H4C2.897 5 2 5.897 2 7V17C2 18.104 2.897 19 4 19H16C17.103 19 18 18.104 18 17V14.618L20.553 15.894C20.694 15.965 20.847 16 21 16C21.183 16 21.365 15.949 21.526 15.851C21.82 15.668 22 15.347 22 15V9C22 8.653 21.82 8.332 21.526 8.149Z"] + ) { + background-image: var(--ImageCamera); + + & > [class^="iconBadge_"] { + display: none; + } + } + } & > [class^="guildSeparator_"] { width: 48px; @@ -458,7 +510,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) height: 1px; border-top: solid 1px var(--ThreeDShadow); background-color: var(--ThreeDHighlight); - margin: 3px 0; + margin: 3px 2px; } [class^="pill_"] { @@ -473,6 +525,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) background-image: var(--ImageUnread); background-repeat: no-repeat; background-position: center; + image-rendering: pixelated; } [class^="item_"] { @@ -507,18 +560,40 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) width: 38.41px; height: 38.41px; padding: 4.8px; - - /*mask-image: var(--ImageFolderClosed); + mask-image: var(--ImageFolderClosed); mask-repeat: no-repeat; mask-position: center; - mask-mode: luminance; + mask-size: 38.41px; -webkit-mask-image: var(--ImageFolderClosed); -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center;*/ - background-image: var(--ImageFolderClosed); - background-repeat: no-repeat; - background-position: center; - background-color: transparent !important; + -webkit-mask-position: center; + -webkit-mask-size: 38.41px; + background-size: 38.41px; + image-rendering: pixelated; + + &::before, + &::after { + position: absolute; + content: ""; + display: block; + width: 38.41px; + height: 38.41px; + + mask-image: var(--ImageFolderClosed); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 38.41px; + -webkit-mask-image: var(--ImageFolderClosed); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: 38.41px; + /*background-image: var(--ImageFolderClosed); + background-repeat: no-repeat; + background-position: center; + background-color: transparent !important;*/ + background-size: 38.41px; + background-color: inherit; + } &:has( [class^="expandedFolderIconWrapper_"]:not([style^="transform:"]) @@ -527,29 +602,110 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) } [class^="closedFolderIconWrapper_"] { - display: none; + width: 38.41px; + height: 38.41px; + padding: 0; + background-color: inherit; + display: block; + + &::before { + position: absolute; + content: ""; + display: block; + width: 38.41px; + height: 38.41px; + + mask-image: var(--ImageFolderClosed); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 38.41px; + -webkit-mask-image: var(--ImageFolderClosed); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: 38.41px; + /*background-image: var(--ImageFolderClosed); + background-repeat: no-repeat; + background-position: center; + background-color: transparent !important;*/ + background-size: 38.41px; + background-color: inherit; + } + &::after { + position: absolute; + content: ""; + display: block; + width: 38.41px; + height: 38.41px; + + background-image: var(--ImageFolderClosedOverlay); + background-size: 38.41px; + } + + & > [class^="icon_"] { + width: 38.41px; + height: 38.41px; + background-color: inherit; + background-image: none !important; + position: absolute; + + &::before { + position: absolute; + content: ""; + display: block; + width: 38.41px; + height: 38.41px; + + mask-image: var(--ImageFolderClosed); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 38.41px; + -webkit-mask-image: var(--ImageFolderClosed); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: 38.41px; + /*background-image: var(--ImageFolderClosed); + background-repeat: no-repeat; + background-position: center; + background-color: transparent !important;*/ + background-size: 38.41px; + background-color: inherit; + } + } } [class^="expandedFolderIconWrapper_"] { width: unset; height: unset; + + &::after { + content: ""; + position: absolute; + width: 38.41px; + height: 38.41px; + background-image: var(--ImageFolderOpenOverlay); + background-size: 38.41px; + } + & > svg { width: 38.41px; height: 38.41px; background-color: currentColor; - /*mask-image: var(--ImageFolderOpen); + mask-image: var(--ImageFolderOpen); mask-repeat: no-repeat; mask-position: center; - mask-mode: luminance; + mask-size: 38.41px; -webkit-mask-image: var(--ImageFolderOpen); -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center;*/ - background-image: var(--ImageFolderOpen); + -webkit-mask-position: center; + -webkit-mask-size: 38.41px; + /*background-image: var(--ImageFolderOpen); background-repeat: no-repeat; background-position: center; - background-color: transparent !important; + background-color: transparent !important;*/ + background-size: 38.41px; + image-rendering: pixelated; & > path { display: none; @@ -586,12 +742,50 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) } } + [class^="circleIconButton_"] { + background-color: transparent; + &:hover { + box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow), + inset 1px 1px 0 0 var(--ThreeDHighlight); + } + } + [data-list-item-id="guildsnav___home"] > [class^="childWrapper_"] > svg { background-image: var(--ImageHome); background-repeat: no-repeat; background-position: center; + image-rendering: pixelated; width: 38.41px; height: 38.41px; + background-size: 38.41px; + + & > path { + display: none; + } + } + + [data-list-item-id="guildsnav___guild-discover-button"] > svg { + background-image: var(--ImageDiscovery); + background-repeat: no-repeat; + background-position: center; + image-rendering: pixelated; + width: 38.41px; + height: 38.41px; + background-size: 38.41px; + + & > path { + display: none; + } + } + + [data-list-item-id="guildsnav___create-join-button"] > svg { + background-image: var(--ImageAdd); + background-repeat: no-repeat; + background-position: center; + image-rendering: pixelated; + width: 38.41px; + height: 38.41px; + background-size: 38.41px; & > path { display: none; @@ -634,6 +828,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) background-image: var(--ImageScrollbarDown); background-repeat: no-repeat; background-position: center; + image-rendering: pixelated; } &:has([class^="folder_"][aria-expanded="true"]) { box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow),