From 82ff4a261c9c6b010d93547ef2c7a8aef89d4735 Mon Sep 17 00:00:00 2001 From: Cynthia Foxwell Date: Thu, 7 Nov 2024 23:05:00 -0700 Subject: [PATCH] backlog --- pxvmc.scss | 7 +- src/_colors.scss | 7 +- src/color_overrides.scss | 94 ++++++++++- src/cozy_compact.scss | 14 ++ src/font.scss | 27 ++-- src/guilds.scss | 328 +++++++++++++++++++++++++++++++++++++++ 6 files changed, 457 insertions(+), 20 deletions(-) create mode 100644 src/guilds.scss diff --git a/pxvmc.scss b/pxvmc.scss index d7e9cb4..96b27f9 100644 --- a/pxvmc.scss +++ b/pxvmc.scss @@ -2,8 +2,8 @@ @use "src/font"; @use "src/italics"; @use "src/account_details"; -/*@use "src/cozy_compact";*/ -@use "src/ripcord"; +@use "src/cozy_compact"; +//@use "src/ripcord"; @use "src/textbox"; @use "src/avatars"; @use "src/channel_list"; @@ -14,6 +14,7 @@ @use "src/wide_settings"; @use "src/private_channels"; @use "src/embeds"; -@use "src/winclassic"; +//@use "src/winclassic"; +@use "src/guilds"; @use "src/misc"; @use "src/ansi_chain"; diff --git a/src/_colors.scss b/src/_colors.scss index 4cab342..7d9484b 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -16,9 +16,12 @@ $c13: #edabd2; $c14: #c4d1f5; $c15: #edebf7; -$primary: #1a1a1a; +/*$primary: #1a1a1a; $secondary: #171717; $tertiary: #141414; -//$accent: #634e75; +$accent: #634e75;*/ +$primary: #0a0a0a; +$secondary: #090909; +$tertiary: #080808; $accent: #287373; $highlight: #5c5c5c; diff --git a/src/color_overrides.scss b/src/color_overrides.scss index 3d76036..e66a17c 100644 --- a/src/color_overrides.scss +++ b/src/color_overrides.scss @@ -57,7 +57,7 @@ $brand-85a: color.adjust($brand-500, $alpha: -0.15); $brand-90a: color.adjust($brand-500, $alpha: -0.1); $brand-95a: color.adjust($brand-500, $alpha: -0.05); -$primary-500: #262626; +$primary-500: #0f0f0f; $primary-100: color.scale($primary-500, $lightness: 95%); $primary-130: color.scale($primary-500, $lightness: 91.2%); $primary-160: color.scale($primary-500, $lightness: 85.9%); @@ -314,9 +314,9 @@ $black-900: color.scale($black-500, $lightness: -95%); } .theme-dark { - --scrollbar-thin-thumb: #{colors.$c7} !important; - --scrollbar-auto-thumb: #{colors.$c7} !important; - --scrollbar-auto-scrollbar-color-thumb: #{colors.$c7} !important; + --scrollbar-thin-thumb: #282828 !important; + --scrollbar-auto-thumb: #282828 !important; + --scrollbar-auto-scrollbar-color-thumb: #282828 !important; --channel-text-area-placeholder: #{colors.$highlight} !important; --interactive-normal: #{colors.$c7} !important; @@ -906,6 +906,7 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { [class^="control_"] > [class^="container_"]:not([class*="checked_"]) { background-color: #{colors.$highlight} !important; } + [class*="progressBarHeader_"] > [class^="container_"][class*="checked_"], [class^="control_"] > [class^="container_"][class*="checked_"] { background-color: #{colors.$c2} !important; @@ -914,9 +915,11 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { [class^="radioBar_"][style*="--radio-bar-accent-color:hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] { --radio-bar-accent-color: #{colors.$c2} !important; } + [class^="radioBar_"][style*="--radio-bar-accent-color:hsl(37, calc(var(--saturation-factor, 1) * 81.2%), 43.9%);"] { --radio-bar-accent-color: #{colors.$c3} !important; } + [class^="radioBar_"][style*="--radio-bar-accent-color:hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] { --radio-bar-accent-color: #{colors.$c1} !important; } @@ -924,6 +927,7 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { span[style*="background-color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);"] { background-color: #{colors.$accent} !important; } + span[style*="background-color: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] { background-color: #{colors.$c1} !important; } @@ -952,6 +956,7 @@ span[style*="background-color: hsl(359, calc(var(--saturation-factor, 1) * 82.6% [class^="progressWithSubscriptions_"] > svg > g > rect[class^="foreground_"] { color: #{colors.$c13} !important; } + svg[fill="#FF73FA"] { fill: #{colors.$c13} !important; } @@ -988,6 +993,7 @@ a[class^="anchor_"]:not([aria-controls^="popout_"]) { [class^="memberInner_"] [class^="name_"] > [class^="username_"] > [class^="username_"] { color: var(--text-normal); } + [class^="memberInner_"] [class^="activityText_"] { color: var(--text-muted); } @@ -1008,264 +1014,344 @@ code.inline, .hljs { color: #{colors.$c7} !important; } + [class^="markdown_"] code, .hljs { background: var(--background-secondary) !important; } + .hljs-keyword { color: #{colors.$c5} !important; } + .hljs-built_in { color: #{colors.$c6} !important; } + .hljs-type { color: #{colors.$c3} !important; } + .hljs-literal { color: #{colors.$c3} !important; } + .hljs-number { color: #{colors.$c3} !important; } + .hljs-regexp { color: #{colors.$c6} !important; } + .hljs-string { color: #{colors.$c2} !important; } + .hljs-subst { color: #{colors.$c1} !important; } + .hljs-symbol { color: #{colors.$c5} !important; } + .hljs-class { color: #{colors.$c3} !important; } + .hljs-function { color: #{colors.$c4} !important; } + .hljs-title { color: #{colors.$c4} !important; } + .hljs-params { color: #{colors.$c1} !important; } + .hljs-comment { color: #{colors.$highlight} !important; } + .hljs-doctag { color: #{colors.$c7} !important; } + .hljs-meta { color: #{colors.$c1} !important; } + .hljs-meta-keyword { color: #{colors.$c3} !important; } + .hljs-meta-string { color: #{colors.$c2} !important; } + .hljs-section { color: #{colors.$c4} !important; } + .hljs-tag { color: #{colors.$c7} !important; } + .hljs-name { color: #{colors.$c1} !important; } + .hljs-builtin-name { color: #{colors.$c7} !important; } + .hljs-attr { color: #{colors.$c3} !important; } + .hljs-attribute { color: #{colors.$c7} !important; } + .hljs-variable { color: #{colors.$c1} !important; } + .hljs-bullet { color: #{colors.$c1} !important; } + .hljs-code { color: #{colors.$c2} !important; } + .hljs-emphasis { color: #{colors.$c5} !important; } + .hljs-strong { color: #{colors.$c3} !important; } + .hljs-formula { color: #{colors.$c7} !important; } + .hljs-link { color: #{colors.$c3} !important; } + .hljs-quote { color: #{colors.$c3} !important; } + .hljs-selector-tag { color: #{colors.$c1} !important; } + .hljs-selector-id { color: #{colors.$c4} !important; } + .hljs-selector-class { color: #{colors.$c3} !important; } + .hljs-selector-attr { color: #{colors.$c4} !important; } + .hljs-selector-pseudo { color: #{colors.$c3} !important; } + .hljs-template-tag { color: #{colors.$c7} !important; } + .hljs-template-variable { color: #{colors.$c7} !important; } + .hljs-addition { color: #a6e22e !important; background: #384c10 !important; } + .hljs-deletion { color: #f92672 !important; background: #4c0c23 !important; } + .hljs-operator { color: #{colors.$c7} !important; } + .hljs-pattern-match { color: #{colors.$c7} !important; } + .hljs-typing { color: #{colors.$c7} !important; } + .hljs-constructor { color: #{colors.$c7} !important; } + .hljs-module-access { color: #{colors.$c7} !important; } + .hljs-module { color: #{colors.$c7} !important; } + .hljs-ansi-foreground-black [class^="hljs-ansi-background-"], .hljs-ansi-foreground-black { color: #{colors.$c0} !important; } + .hljs-ansi-foreground-red { color: #{colors.$c1} !important; } + .hljs-ansi-foreground-green { color: #{colors.$c2} !important; } + .hljs-ansi-foreground-yellow { color: #{colors.$c3} !important; } + .hljs-ansi-foreground-blue { color: #{colors.$c4} !important; } + .hljs-ansi-foreground-magenta { color: #{colors.$c5} !important; } + .hljs-ansi-foreground-cyan { color: #{colors.$c6} !important; } + .hljs-ansi-foreground-white [class^="hljs-ansi-background-"], .hljs-ansi-foreground-white { color: #{colors.$c7} !important; } + .hljs-ansi-foreground-black .hljs-ansi-style-bold, .hljs-ansi-foreground-black.hljs-ansi-style-bold, .hljs-ansi-foreground-black-bright { color: #{colors.$c8} !important; } + .hljs-ansi-foreground-red .hljs-ansi-style-bold, .hljs-ansi-foreground-red.hljs-ansi-style-bold, .hljs-ansi-foreground-red-bright { color: #{colors.$c9} !important; } + .hljs-ansi-foreground-green .hljs-ansi-style-bold, .hljs-ansi-foreground-green.hljs-ansi-style-bold, .hljs-ansi-foreground-green-bright { color: #{colors.$c10} !important; } + .hljs-ansi-foreground-yellow .hljs-ansi-style-bold, .hljs-ansi-foreground-yellow.hljs-ansi-style-bold, .hljs-ansi-foreground-yellow-bright { color: #{colors.$c11} !important; } + .hljs-ansi-foreground-blue .hljs-ansi-style-bold, .hljs-ansi-foreground-blue.hljs-ansi-style-bold, .hljs-ansi-foreground-blue-bright { color: #{colors.$c12} !important; } + .hljs-ansi-foreground-magenta .hljs-ansi-style-bold, .hljs-ansi-foreground-magenta.hljs-ansi-style-bold, .hljs-ansi-foreground-magenta-bright { color: #{colors.$c13} !important; } + .hljs-ansi-foreground-cyan .hljs-ansi-style-bold, .hljs-ansi-foreground-cyan.hljs-ansi-style-bold, .hljs-ansi-foreground-cyan-bright { color: #{colors.$c14} !important; } + .hljs-ansi-foreground-white .hljs-ansi-style-bold, .hljs-ansi-foreground-white.hljs-ansi-style-bold, .hljs-ansi-foreground-white-bright { color: #{colors.$c15} !important; } + .hljs-ansi-background-black { background-color: #{colors.$c0} !important; } + .hljs-ansi-background-red { background-color: #{colors.$c1} !important; } + .hljs-ansi-background-green { background-color: #{colors.$c2} !important; } + .hljs-ansi-background-yellow { background-color: #{colors.$c3} !important; } + .hljs-ansi-background-blue { background-color: #{colors.$c4} !important; } + .hljs-ansi-background-magenta { background-color: #{colors.$c5} !important; } + .hljs-ansi-background-cyan { background-color: #{colors.$c6} !important; } + .hljs-ansi-background-white { background-color: #{colors.$c7} !important; } + .hljs-ansi-background-black-bright { background-color: #{colors.$c8} !important; } + .hljs-ansi-background-red-bright { background-color: #{colors.$c9} !important; } + .hljs-ansi-background-green-bright { background-color: #{colors.$c10} !important; } + .hljs-ansi-background-yellow-bright { background-color: #{colors.$c11} !important; } + .hljs-ansi-background-blue-bright { background-color: #{colors.$c12} !important; } + .hljs-ansi-background-magenta-bright { background-color: #{colors.$c13} !important; } + .hljs-ansi-background-cyan-bright { background-color: #{colors.$c14} !important; } + .hljs-ansi-background-white-bright { background-color: #{colors.$c15} !important; } diff --git a/src/cozy_compact.scss b/src/cozy_compact.scss index 96bb1d9..176db10 100644 --- a/src/cozy_compact.scss +++ b/src/cozy_compact.scss @@ -1,3 +1,5 @@ +@use "colors"; + html:not(.a11y-font-scaled-down) [class*="message_"]:not([class*="systemMessage_"]):not([class*="compact_"]), html:not(.a11y-font-scaled-down) [class^="messagesWrapper_"] [class^="scrollerInner_"] > [class^="wrapper_"], html:not(.a11y-font-scaled-down) @@ -128,3 +130,15 @@ div[class*="cozyMessage_"] div[class^="repliedMessage_"]:before { width: calc(20px * var(--decoration-to-avatar-ratio)); height: calc(20px * var(--decoration-to-avatar-ratio)); } + +[class^="chat_"] [class^="messagesWrapper_"] { + border-bottom: 1px solid colors.$c0; + + [class^="scroller_"] [class^="scrollerContent_"] { + padding: 0 !important; + } +} + +[class*="message_"][class*="cozy_"][class*="groupStart_"] { + border-top: 1px solid colors.$c0; +} diff --git a/src/font.scss b/src/font.scss index adb423f..3560e86 100644 --- a/src/font.scss +++ b/src/font.scss @@ -1,6 +1,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; font-style: normal; @@ -8,21 +9,24 @@ @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; font-style: normal; } @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; font-style: normal; } @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; @@ -30,7 +34,8 @@ } @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; font-style: italic; @@ -119,12 +124,12 @@ :root, .theme-dark, .theme-light { - --font-primary: "Twemoji Mozilla", "Tahoma", "MS PGothic", "Terminus (TTF) for Windows", "Terminus (TTF)", - "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; - --font-display: "Twemoji Mozilla", "Tahoma", "MS PGothic", "Terminus (TTF) for Windows", "Terminus (TTF)", - "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; - --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", - "Unifont", monospace !important; + --font-primary: "Tahoma", "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic", "UnifontExMono", + "Twemoji Mozilla", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; + --font-display: "Tahoma", "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic", "UnifontExMono", + "Twemoji Mozilla", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; + --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic", "UnifontExMono", "UnifontBitmap", + "Unifont Windows", "Unifont", monospace !important; --_font-titlebars: var(--font-primary) !important; } diff --git a/src/guilds.scss b/src/guilds.scss new file mode 100644 index 0000000..070f04c --- /dev/null +++ b/src/guilds.scss @@ -0,0 +1,328 @@ +:root { + --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"); + --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=="); +} + +.overlay [class^="widget_"] > [class^="base_"] > nav[class^="wrapper_"], +nav[class*="guilds_"] { + width: 48px; + padding: 2px; + + [class^="scroller_"] { + padding-top: 4px; + + &::-webkit-scrollbar, + &::-webkit-scrollbar-thumb, + &::-webkit-scrollbar-button, + &::-webkit-scrollbar-button:single-button, + &::-webkit-scrollbar-track { + visibility: hidden !important; + width: 0px !important; + min-width: 0px !important; + } + + & > div[style*="height: 56px;"]:has(> [class^="listItem_"]) { + height: unset !important; + } + } + + [class^="listItemWrapper_"] > [class^="wrapper_"] { + width: 40px; + height: 40px; + & > svg { + width: 40px; + height: 40px; + } + } + [class^="listItem_"] { + --custom-list-items-list-item-width: 48px; + margin: 0 !important; + + [class^="wrapperSimple_"] { + width: 40px; + height: 40px; + & > svg { + width: 40px; + height: 40px; + + img[class^="icon_"] { + width: 38px; + height: 38px; + } + } + } + + [class^="pill_"] { + height: 40px !important; + } + + [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; + } + } + } + + [class^="wrapper_"]:has(> svg) { + width: 40px; + height: 40px; + & > svg { + width: 40px; + height: 40px; + + img[class^="icon_"] { + width: 38.41px; + height: 38.41px; + } + + [class^="folder_"] { + background-color: transparent; + [class^="folderIconWrapper_"] { + width: 38.41px; + height: 38.41px; + padding: 4.8px; + 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-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:"])) { + background-image: none; + } + + [class^="closedFolderIconWrapper_"] { + 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-repeat: no-repeat; + mask-position: center; + mask-size: 38.41px; + -webkit-mask-image: var(--ImageFolderOpen); + -webkit-mask-repeat: no-repeat; + -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-size: 38.41px; + image-rendering: pixelated; + + & > path { + display: none; + } + } + &[style^="transform:"] > svg { + background-image: none; + } + } + } + } + + [class^="childWrapper_"] { + background-color: transparent; + } + } + + &:hover { + box-shadow: var(--HoverEdge); + background-color: var(--ThreeDFace); + } + } + [class^="wrapperSimple_"] { + width: 40px; + height: 40px; + & > svg { + width: 40px; + height: 40px; + + img[class^="icon_"] { + width: 38px; + height: 38px; + } + } + } + + ul[id^="folder-items-"] { + height: unset !important; + & > [class^="listItem_"] { + --custom-list-items-list-item-width: 40px; + + [class^="pill_"] { + right: 0px; + } + } + } + + [class^="wrapper_"]:has(> [class^="expandedFolderBackground_"]) { + width: unset !important; + } + + [class^="expandedFolderBackground_"] { + background-color: transparent; + width: unset; + + & + [class^="listItem_"] [class^="wrapper_"]:has(> svg) { + height: 40px; + } + } +}