Cynosphere/pxvmc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

backlog

Browse source
This commit is contained in:
Cynthia Foxwell 2024-11-07 23:05:00 -07:00
parent 58287b2bd3
commit 82ff4a261c
6 changed files with 457 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
pxvmc.scss
View file

@ -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";

7
src/_colors.scss
View file

@ -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;

94
src/color_overrides.scss
View file

@ -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;
}

14
src/cozy_compact.scss
View file

@ -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;
}

27
src/font.scss
View file

@ -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;
}

328
src/guilds.scss Normal file
View file

@ -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;
}
}
}