From e34c41bb720209772459315deda9f9cfeadcd1f6 Mon Sep 17 00:00:00 2001 From: Cynthia Foxwell Date: Sat, 6 Jan 2024 00:04:54 -0700 Subject: [PATCH] backlog --- src/color_overrides.scss | 4 +- src/compact.scss | 4 +- src/context_menu.scss | 61 +++++++- src/font.css | 4 +- src/winclassic.scss | 304 ++++++++++++++++++++++++++++++++++++++- 5 files changed, 365 insertions(+), 12 deletions(-) diff --git a/src/color_overrides.scss b/src/color_overrides.scss index cf62f08..074c811 100644 --- a/src/color_overrides.scss +++ b/src/color_overrides.scss @@ -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; } diff --git a/src/compact.scss b/src/compact.scss index 5fde317..3e64c2f 100644 --- a/src/compact.scss +++ b/src/compact.scss @@ -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_"] diff --git a/src/context_menu.scss b/src/context_menu.scss index e55c0ea..0776d8e 100644 --- a/src/context_menu.scss +++ b/src/context_menu.scss @@ -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; + } + } } } } diff --git a/src/font.css b/src/font.css index fc8db5f..ad99059 100644 --- a/src/font.css +++ b/src/font.css @@ -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; } diff --git a/src/winclassic.scss b/src/winclassic.scss index d24bc4d..bdaaa84 100644 --- a/src/winclassic.scss +++ b/src/winclassic.scss @@ -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); + } + } + } +}