This commit is contained in:
Cynthia Foxwell 2024-01-06 00:04:54 -07:00
parent 50eed1f91f
commit e34c41bb72
5 changed files with 365 additions and 12 deletions

View file

@ -1159,7 +1159,7 @@ code.inline,
.hljs-module {
color: #{colors.$c7} !important;
}
.hljs-ansi-foreground-black [class^="hljs-ansi-background_"],
.hljs-ansi-foreground-black [class^="hljs-ansi-background-"],
.hljs-ansi-foreground-black {
color: #{colors.$c0} !important;
}
@ -1181,7 +1181,7 @@ code.inline,
.hljs-ansi-foreground-cyan {
color: #{colors.$c6} !important;
}
.hljs-ansi-foreground-white [class^="hljs-ansi-background_"],
.hljs-ansi-foreground-white [class^="hljs-ansi-background-"],
.hljs-ansi-foreground-white {
color: #{colors.$c7} !important;
}

View file

@ -1,4 +1,4 @@
[class*="guilds_"] [class^="listItemWrapper_"] > [class^="wrapper_"],
/*[class*="guilds_"] [class^="listItemWrapper_"] > [class^="wrapper_"],
[class*="guilds_"] [class^="listItemWrapper_"] > [class^="wrapper_"] > svg,
[class*="guilds_"] [class^="listItem_"] [class^="wrapper_"]:has(> svg),
[class*="guilds_"] [class^="listItem_"] [class^="wrapper_"]:has(> svg) > svg,
@ -61,7 +61,7 @@
> [class^="listItem_"]
> [class^="pill_"] {
left: -8px;
}
}*/
section[class^="panels_"] > [class*="activityPanel_"] [class^="gameIcon_"],
section[class^="panels_"]

View file

@ -3,6 +3,7 @@
[class*="menu_"] {
padding: 2px;
background-color: var(--background-primary) !important;
& > [class^="scroller_"] {
padding: 1px 1px 4px 1px !important;
@ -14,8 +15,8 @@
[class^="separator_"] {
margin: 4px 1px;
border-bottom: 1px solid colors.$tertiary;
border-top: 1px solid colors.$c0;
border-top: 1px solid colors.$tertiary;
border-bottom: 1px solid colors.$c0;
}
[class^="item_"] {
border-radius: 0 !important;
@ -26,6 +27,8 @@
&:not(:has(> [class^="iconContainer_"] > [class^="icon_"])):not(
:has(> [class^="iconContainerLeft_"])
):not(:has(> [class^="statusItem_"])):not(
:has([class^="userMenuItem_"])
) {
padding-inline-start: 20px !important;
}
@ -55,7 +58,15 @@
}
& > [class^="hintContainer_"] {
margin-right: 18px;
&:not(:has(> #edit-custom-status)) {
margin-right: 18px;
}
& > #edit-custom-status > svg {
padding: 1px;
height: 16px !important;
width: 16px !important;
}
}
&[aria-haspopup="true"] > [class^="iconContainer_"] > [class^="caret_"] {
@ -130,6 +141,50 @@
margin: 0;
margin-right: 2px;
}
& > [class^="statusItem_"] {
padding: 0;
grid-template-rows: 18px 1fr;
grid-template-columns: 18px 1fr;
min-height: 18px !important;
& > svg {
padding: 4px;
}
& > [class^="description_"] {
display: none;
}
}
[class^="userMenuItem_"] {
& > [class^="wrapper_"] {
padding: 1px;
height: 16px !important;
width: 16px !important;
& > svg {
height: 16px !important;
width: 16px !important;
}
}
& > [class^="userMenuUsername_"] {
margin-left: 2px;
margin-right: 0;
& > [class*="userMenuText_"],
& > [class*="userMenuDiscriminator_"] {
font-size: 12px;
}
}
& > [class^="activeIcon_"] {
padding: 1px;
height: 16px !important;
width: 16px !important;
}
}
}
}
}

View file

@ -49,8 +49,8 @@
--font-display: "Terminus (TTF) for Windows", "Terminus (TTF)",
"Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace,
Twemoji !important;
--font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic",
"UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
--font-code: "tewi", "Terminus (TTF) for Windows", "Terminus (TTF)",
"Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
--_font-titlebars: var(--font-primary) !important;
}

View file

@ -1,4 +1,5 @@
@use "colors";
@use "images";
.theme-dark {
--wc-frame: inset -1px -1px 0 0 #{colors.$tertiary},
@ -13,6 +14,10 @@
inset 1px 1px 0 0 #{colors.$secondary},
inset -2px -2px 0 0 #{colors.$primary},
inset 2px 2px 0 0 #{colors.$tertiary};
--wc-rebar: inset 1px 1px 0 0 #{colors.$secondary},
inset 2px 2px 0 0 #{colors.$c8}, inset -1px -1px 0 0 #{colors.$c8},
inset -2px -2px 0 0 #{colors.$secondary};
}
.theme-light {
--wc-frame: inset -1px -1px 0 0 #{colors.$c8},
@ -28,6 +33,48 @@
--wc-inner-edge: inset -1px -1px 0 0 #{colors.$secondary},
inset 1px 1px 0 0 #{colors.$tertiary},
inset -2px -2px 0 0 #{colors.$primary}, inset 2px 2px 0 0 #{colors.$c8};
--wc-rebar: inset 1px 1px 0 0 #{colors.$secondary},
inset 2px 2px 0 0 #{colors.$c8}, inset -1px -1px 0 0 #{colors.$c8},
inset -2px -2px 0 0 #{colors.$secondary};
}
.theme-dark {
--ThreeDLightShadow: #1a1a1a;
--ThreeDHighlight: #383838;
--ThreeDFace: #1a1a1a;
--ThreeDShadow: #171717;
--ThreeDDarkShadow: #141414;
--Window: #1a1a1a;
--WindowText: #dedbeb;
--ActiveTitleStart: #2a2331;
--ActiveTitleEnd: #634e75;
--ActiveTitleText: #edebf7;
--InactiveTitleStart: #171717;
--InactiveTitleEnd: #171717;
--InactiveTitleText: #383838;
--Selection: #634e75;
--SelectionText: #edebf7;
--Tooltip: #1a1a1a;
--TooltipText: #dedbeb;
--Scrollbar: #383838;
}
:root {
--ImageFolderClosed: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE3SURBVFhH7VJBEoIwDOTIf/iTf+JPPMYjMx5qg42uS0KhFHFGO7OTzTZN1mDzdafvm5BD27Yhldc90nwcxxBCv4hDTKwdrqhqQpqF29UctIQqJqTJMFyKIe9LkMa/Vv9pxNEPE2rAWnExBodDLtubPt8uA9qcI99zHqMY6Lq4hUM2IMDhwslMfQPw60ydtHIDPMgawDDeHL8BjoqUbzfAjTwNgffCNY9x3wa4sacxh3y9AW6Qg9azCcrLP4EVWUOgBrV5A1azNdB3MOzJIS//BNDEjDmeUPYnxGaWrgNyPEbbABVt0hCiIwxt/waUa1PmWIdImm8AimYa516NcIVzNzeARQjj8ezOqsE7A8ufQIowWpxrUMOc7xP8DXD0NE8XzrpqkL8ZkOQMTAbkCDkD0/D/+fHTNHfV1QBuqTnkzQAAAABJRU5ErkJggg==");
--ImageFolderOpen: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFFSURBVFhH7ZJREoMwCEQ9bc/Ra3gnD+SflcrWDQKamtofmXkTRMKuid0dWfR9N+2hre1Dho/jmDIMj9+YgPg09bs0N1EjDpqZOCw+bHOYOIpKliEvar+ekb1HmeW2JnYNOF9e5BU1PYXSxNkT+MCitqZrnQEeuJdnNVoLA/JwBfKjvk2wAUnwY/waEYSRwsDnyM6CIw5yiJ43gOF2jd5r/r0BK5Dh9WpNhNucgIeIQJxXyl0DElUmPBF+b2smfz4X4ToDnohFehJhAOHcAG/OiPq4bnJcQ90JMBgYiTBSN/2uAYnURCRgYTHeY+r4D5QlCgO82cLDshU51xX6+sAAwwOw2pqXW6gH16AssTGATUfgXha0NUUM0DWs4Z4ChtnVy73nALqGNd4GpIGHY41q9lly7gsIDVzJLFka0MCLK7jj39F1L3Q+/18vALefAAAAAElFTkSuQmCC");
--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==");
}
.theme-light {
--ImageScrollbarUp: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAlSURBVDhPYxgFQwD8h9JkAZBmGCYZIGsm2RBsmmF4FAxCwMAAAOXFD/HsWbUtAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
--ImageScrollbarDown: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhSURBVDhPYxgFgxT8x4OJBhRphgGKNMMARZpHAX0AAwMA9PwP8Zz9lFEAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}
.theme-dark {
--ImageScrollbarUp: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAtSURBVDhPYxgFgx38BwIok3QA0gwDUCHiAVQfCoBKEQZQ9VgBVMkoGGSAgQEA6rE/waVrXDQAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
--ImageScrollbarDown: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAqSURBVDhPYxgFgxH8xwOgSggDqHoUAJUiHkD1gQFUiHRAkeZRQDfAwAAAJ5w/wWcDfNoAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}
[class*="button_"][class*="lookFilled_"],
@ -62,7 +109,7 @@ section[class^="panels_"]
max-height: calc(100% - 4px);
}
[class^="messagesWrapper_"],
[class*="guilds_"],
/*[class*="guilds_"],*/
[class^="sidebar_"] > nav > [class^="scroller_"] {
padding: 2px;
box-shadow: var(--wc-inner-edge);
@ -70,7 +117,7 @@ section[class^="panels_"]
[class^="chat_"] > [class^="content_"] > [class^="container_"],
[class^="chat_"] > [class^="content_"] > [class^="chatContent_"],
[class^="standardSidebarView_"] > [class^="contentRegion_"] {
margin-left: 2px;
margin-left: 4px;
}
[class^="channelTextArea_"] > [class^="scrollableContainer_"],
@ -113,7 +160,7 @@ section[class^="panels_"]
}
div[class^="sidebar_"] {
border-left: 2px solid #{colors.$primary};
border-left: 4px solid #{colors.$primary};
}
[class*="guilds_"] [class^="guildSeparator_"] {
@ -355,3 +402,254 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"]))
align-items: center;
}
}
[class*="guilds_"] {
background-color: var(--ThreeDFace) !important;
box-shadow: var(--wc-rebar);
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;
}
}
[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^="lowerBadge_"] {
top: 0;
z-index: 11;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
&:has(> [class^="numberBadge_"][style*="--status-danger"]) {
background-image: var(--ImagePing);
& > [class^="numberBadge_"] {
display: none;
}
}
}
& > [class^="guildSeparator_"] {
width: 48px;
border-radius: 0;
height: 1px;
border-top: solid 1px var(--ThreeDShadow);
background-color: var(--ThreeDHighlight);
margin: 3px 0;
}
[class^="pill_"] {
width: 16px;
height: 16px;
left: unset;
right: 4px;
z-index: 10;
pointer-events: none;
&:has(> [class^="item_"][style*="height: 8px;"]) {
background-image: var(--ImageUnread);
background-repeat: no-repeat;
background-position: center;
}
[class^="item_"] {
display: none;
}
}
[class*="selected_"] > [class^="wrapper_"]:has(> svg) {
box-shadow: inset -1px -1px 0 0 var(--ThreeDHighlight),
inset 1px 1px 0 0 var(--ThreeDShadow);
&:hover {
box-shadow: inset -1px -1px 0 0 var(--ThreeDHighlight),
inset 1px 1px 0 0 var(--ThreeDShadow);
}
}
[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-mode: luminance;
-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;
&:has(
[class^="expandedFolderIconWrapper_"]:not([style^="transform:"])
) {
background-image: none;
}
[class^="closedFolderIconWrapper_"] {
display: none;
}
[class^="expandedFolderIconWrapper_"] {
width: unset;
height: unset;
& > svg {
width: 38.41px;
height: 38.41px;
background-color: currentColor;
/*mask-image: var(--ImageFolderOpen);
mask-repeat: no-repeat;
mask-position: center;
mask-mode: luminance;
-webkit-mask-image: var(--ImageFolderOpen);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;*/
background-image: var(--ImageFolderOpen);
background-repeat: no-repeat;
background-position: center;
background-color: transparent !important;
& > path {
display: none;
}
}
&[style^="transform:"] > svg {
background-image: none;
}
}
}
}
[class^="childWrapper_"] {
background-color: transparent;
}
}
&:hover {
box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow),
inset 1px 1px 0 0 var(--ThreeDHighlight);
}
}
[class^="wrapperSimple_"] {
width: 40px;
height: 40px;
& > svg {
width: 40px;
height: 40px;
img[class^="icon_"] {
width: 38px;
height: 38px;
}
}
}
[data-list-item-id="guildsnav___home"] > [class^="childWrapper_"] > svg {
background-image: var(--ImageHome);
background-repeat: no-repeat;
background-position: center;
width: 38.41px;
height: 38.41px;
& > path {
display: none;
}
}
}
ul[id^="folder-items-"] {
height: unset !important;
box-shadow: var(--wc-frame);
padding: 4px;
& > [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: 62px;
&::after {
position: absolute;
content: "";
height: 23px;
width: 40px;
left: 0;
bottom: 0;
text-align: center;
background-image: var(--ImageScrollbarDown);
background-repeat: no-repeat;
background-position: center;
}
&:has([class^="folder_"][aria-expanded="true"]) {
box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow),
inset 1px 1px 0 0 var(--ThreeDHighlight);
}
&:hover::after {
box-shadow: inset 0 1px var(--ThreeDShadow),
inset -1px -1px 0 0 var(--ThreeDShadow),
inset 1px 2px 0 0 var(--ThreeDHighlight);
}
&:has([class^="folder_"][aria-expanded="true"])::after {
box-shadow: inset 0 1px var(--ThreeDShadow),
inset -1px -1px 0 0 var(--ThreeDHighlight),
inset 1px 2px 0 0 var(--ThreeDShadow);
}
}
}
}