diff --git a/src/channel_list.scss b/src/channel_list.scss index 6d3733c..0eaacd1 100644 --- a/src/channel_list.scss +++ b/src/channel_list.scss @@ -3,6 +3,10 @@ [class^="base_"] > [class^="content_"] > [class^="sidebar_"] { border-radius: 0; + + & > [class^="container_"] > [class^="scroller_"] { + overflow-y: auto !important; + } } [class^="base_"] diff --git a/src/ripcord.scss b/src/ripcord.scss index c204511..60a06d3 100644 --- a/src/ripcord.scss +++ b/src/ripcord.scss @@ -576,7 +576,11 @@ } } -[class^="chat_"] [class^="messagesWrapper_"] [class^="scroller_"] [class^="scrollerContent_"] { - padding: 0 !important; - padding-bottom: 3px !important; +[class^="chat_"] [class^="messagesWrapper_"] { + border-bottom: 1px solid colors.$c0; + + [class^="scroller_"] [class^="scrollerContent_"] { + padding: 0 !important; + padding-bottom: 3px !important; + } } diff --git a/src/w9x/channel_list.scss b/src/w9x/channel_list.scss index 2756b59..8fd88a4 100644 --- a/src/w9x/channel_list.scss +++ b/src/w9x/channel_list.scss @@ -72,6 +72,7 @@ & > [class^="scroller_"] { scrollbar-width: unset !important; scrollbar-color: unset !important; + overflow-y: auto !important; &::-webkit-scrollbar { min-width: 16px; diff --git a/src/w9x/guilds.scss b/src/w9x/guilds.scss index 5f8b1cc..87a9201 100644 --- a/src/w9x/guilds.scss +++ b/src/w9x/guilds.scss @@ -1,7 +1,7 @@ .overlay [class^="widget_"] > [class^="base_"] > nav[class^="wrapper_"], [class*="guilds_"] { - background-color: var(--ThreeDFace) !important; - box-shadow: var(--RebarBorder); + background-color: var(--Window) !important; + /*box-shadow: var(--RebarBorder);*/ width: 48px; padding: 2px; diff --git a/src/w9x/toolbar.scss b/src/w9x/toolbar.scss index ab8be31..63a2f1d 100644 --- a/src/w9x/toolbar.scss +++ b/src/w9x/toolbar.scss @@ -1,7 +1,7 @@ [class*="baseLayer_"] > [class^="container_"] { --ToolbarVerticalOffset: 0px; padding-top: calc(76px + var(--ToolbarVerticalOffset)); - background-color: var(--ThreeDFace); + background-color: var(--Window); &:has(> [class^="base_"] > [class^="notice_"]) { --ToolbarVerticalOffset: 24px; @@ -14,10 +14,10 @@ width: calc(100vw - var(--devtools-sidebar-width)); top: 0; left: 0; - box-shadow: var(--RebarBorder), inset 0 24px 0 0 var(--ThreeDFace), inset 0 25px 0 0 var(--ThreeDShadow), + /*box-shadow: var(--RebarBorder), inset 0 24px 0 0 var(--ThreeDFace), inset 0 25px 0 0 var(--ThreeDShadow), inset 0 26px 0 0 var(--ThreeDHighlight), inset 0 48px 0 0 var(--ThreeDFace), inset 0 49px 0 0 var(--ThreeDShadow), - inset 0 50px 0 0 var(--ThreeDHighlight); - background-color: var(--ThreeDFace); + inset 0 50px 0 0 var(--ThreeDHighlight);*/ + background-color: var(--Window); } & > [class^="base_"] { @@ -124,6 +124,7 @@ section[class^="panels_"] > [class^="container_"]:last-child { &:hover { box-shadow: var(--HoverEdge); + background-color: var(--ThreeDFace); } &[aria-expanded="true"] { box-shadow: var(--PressedEdge); @@ -153,7 +154,6 @@ section[class^="panels_"] > [class^="container_"]:last-child { height: 19px !important; margin: 0 !important; border-radius: 0; - background-color: transparent; width: unset !important; min-width: unset !important; min-height: unset !important; @@ -163,6 +163,7 @@ section[class^="panels_"] > [class^="container_"]:last-child { &:hover { box-shadow: var(--HoverEdge); + background-color: var(--ThreeDFace); } &::after { @@ -188,7 +189,7 @@ section[class^="panels_"] > [class^="container_"]:last-child { &:hover { box-shadow: var(--HoverEdge); - background-color: transparent; + background-color: var(--ThreeDFace); } & > [class^="contents"] { @@ -235,6 +236,7 @@ a[href="https://support.discord.com"]:has(> [class^="iconWrapper_"]) &:hover { box-shadow: var(--HoverEdge); + background-color: var(--ThreeDFace); } &[aria-expanded="true"] { box-shadow: var(--PressedEdge); @@ -281,6 +283,7 @@ a[href="https://support.discord.com"]:has(> [class^="iconWrapper_"]) &:hover { box-shadow: var(--HoverEdge); + background-color: var(--ThreeDFace); } &[aria-expanded="true"] { box-shadow: var(--PressedEdge); @@ -318,6 +321,7 @@ a[href="https://support.discord.com"]:has(> [class^="iconWrapper_"]) &:hover { box-shadow: var(--HoverEdge); + background-color: var(--ThreeDFace); } &[aria-expanded="true"] { box-shadow: var(--PressedEdge); @@ -465,6 +469,7 @@ html:not(.overlay) [id^="popout_"] { & > [class^="body_"] { padding: 0; + overflow: hidden !important; & > :not([class^="menus_"]) { display: none; @@ -475,15 +480,21 @@ html:not(.overlay) [id^="popout_"] { padding: 2px; box-shadow: var(--WindowFrame) !important; - & > [class^="menu_"] { - padding: 0 !important; - box-shadow: none !important; + & > [class*="menuOverlay_"] { + border: none; + border-radius: 0; - & > [class^="scroller_"] { - padding-bottom: 0 !important; + & > [class^="menu_"] { + padding: 0 !important; + box-shadow: none !important; - & > [class^="separator"] { - display: none; + & > [class^="scroller_"] { + margin-right: 0 !important; + padding-bottom: 0 !important; + + & > [class^="separator"] { + display: none; + } } } } @@ -520,6 +531,7 @@ html:not(.overlay) [id^="popout_"] { & > :is(h1, h2) { font-size: var(--FontSize); font-weight: normal; + color: var(--WindowText); } } @@ -562,7 +574,7 @@ html:not(.overlay) [id^="popout_"] { height: 22px; margin: 0; padding: 2px; - background-color: var(--Window); + background-color: var(--ThreeDFace); box-shadow: var(--InnerEdge); & > span:first-of-type { @@ -594,10 +606,11 @@ html:not(.overlay) [id^="popout_"] { &:hover { box-shadow: var(--HoverEdge); - background-color: transparent; + background-color: var(--ThreeDFace); } &[class*="selected_"] { box-shadow: var(--PressedEdge) !important; + background-color: var(--ThreeDPressed); &:not(:active):not(:hover)::before { content: ""; @@ -631,7 +644,7 @@ html:not(.overlay) [id^="popout_"] { height: 22px; width: 242px; border-radius: 0; - background-color: var(--Window); + background-color: var(--ThreeDFace); box-shadow: var(--InnerEdge); .public-DraftEditorPlaceholder-inner { @@ -698,6 +711,7 @@ html:not(.overlay) [id^="popout_"] { & > h1 { font-size: var(--FontSize); font-weight: normal; + color: var(--WindowText); } } @@ -717,7 +731,7 @@ html:not(.overlay) [id^="popout_"] { &:hover { box-shadow: var(--HoverEdge); - background-color: transparent; + background-color: var(--ThreeDFace); } &[class*="selected_"] { box-shadow: var(--PressedEdge) !important; @@ -768,7 +782,7 @@ html:not(.overlay) [id^="popout_"] { &:hover { box-shadow: var(--HoverEdge); - background-color: transparent; + background-color: var(--ThreeDFace); } &[class*="selected_"] { box-shadow: var(--PressedEdge); diff --git a/src/winclassic.scss b/src/winclassic.scss index 66f4c69..7a67033 100644 --- a/src/winclassic.scss +++ b/src/winclassic.scss @@ -6,7 +6,7 @@ @use "w9x/toolbar" as w9xtoolbar; /*@use "w9x/channel_list" as w9xchannels;*/ -.theme-dark { +/*.theme-dark { --ThreeDLightShadow: #1a1a1a; --ThreeDHighlight: #383838; --ThreeDFace: #1a1a1a; @@ -42,6 +42,53 @@ --FontSize: 8pt; --TitlebarOffset: 3px; + /* Toolbar offsets, these need to be hardcoded as theres no way to get another element's width in CSS */ +/* Padding included */ /* + --ToolbarAccountWidth: 51px; + --ToolbarSettingsWidth: 51px; + --ToolbarHelpWidth: 33px; + + --ToolbarAccountTextOffset: 1px; + --ToolbarHelpTextOffset: -8px; + --ToolbarUpdateTextOffset: -8px; +}*/ + +.theme-dark { + --ThreeDLightShadow: #1a1a1a; + --ThreeDHighlight: #3e3e3e; + --ThreeDFace: #202020; + --ThreeDShadow: #121212; + --ThreeDDarkShadow: #141414; + --ThreeDPressed: #282828; + --Window: #171717; + --WindowText: #979797; + --ActiveTitleStart: #287373; + --ActiveTitleEnd: #53a6a6; + --ActiveTitleText: #edebf7; + --InactiveTitleStart: #171717; + --InactiveTitleEnd: #171717; + --InactiveTitleText: #383838; + --Selection: #808080; + --SelectionText: #f7f7f7; + --Tooltip: #1a1a1a; + --TooltipText: #dedbeb; + --Scrollbar: #383838; + --WindowFrame: inset -1px -1px 0 0 #121212, inset 1px 1px 0 0 #121212; + --OuterEdge: inset -1px -1px 0 0 var(--ThreeDDarkShadow), inset 1px 1px 0 0 var(--ThreeDHighlight), + inset -2px -2px 0 0 var(--ThreeDShadow), inset 2px 2px 0 0 var(--ThreeDLightShadow); + --InnerEdge: inset -1px -1px 0 0 #3c3c3c, inset 1px 1px 0 0 #3c3c3c; + --RebarBorder: inset 0 -1px 0 0 var(--ThreeDHighlight), inset 0 -2px 0 0 var(--ThreeDShadow); + --RebarBottom: inset 0 -1px 0 0 var(--ThreeDHighlight), inset 0 -2px 0 0 var(--ThreeDShadow); + --RebarTop: inset 0 1px 0 0 var(--ThreeDShadow), inset 0 2px 0 0 var(--ThreeDHighlight); + --HoverEdge: inset -1px -1px 0 0 #282828, inset 1px 1px 0 0 #282828; + --PressedEdge: inset -1px -1px 0 0 #3a3a3a, inset 1px 1px 0 0 #3a3a3a; + --ProgressBar: url('data:image/svg+xml,'); + + --FontSize: 8pt; + --TitlebarOffset: 3px; + + --interactive-normal: #979797 !important; + /* Toolbar offsets, these need to be hardcoded as theres no way to get another element's width in CSS */ /* Padding included */ --ToolbarAccountWidth: 51px; @@ -76,14 +123,14 @@ [class^="chat_"] > [class^="content_"] [class^="membersWrap_"] { padding: 2px; - box-shadow: var(--InnerEdge); + /*box-shadow: var(--InnerEdge);*/ height: calc(100% - 4px); max-height: calc(100% - 4px); background-color: var(--Window); } [class^="messagesWrapper_"] { padding: 2px; - box-shadow: var(--InnerEdge); + /*box-shadow: var(--InnerEdge);*/ background-color: var(--Window); [class^="scroller_"] { @@ -98,6 +145,9 @@ } } } +[class^="chat_"] > [class^="content_"] { + background-color: var(--Window); +} [class^="chat_"] > [class^="content_"] > [class^="container_"], [class^="chat_"] > [class^="content_"] > [class^="chatContent_"], [class^="standardSidebarView_"] > [class^="contentRegion_"] { @@ -108,16 +158,19 @@ box-shadow: var(--InnerEdge); border-radius: 0; background-color: var(--ThreeDFace); -} -[class^="channelTextArea_"] > [class^="scrollableContainer_"] { min-height: 42px !important; + + &::-webkit-scrollbar-thumb { + background-color: transparent; + } } [class^="chat_"] > [class^="content_"]:before { display: none !important; } [class^="chatContent_"] > form { - background-color: transparent !important; + background-color: var(--Window) !important; + padding-bottom: 4px !important; } [class^="standardSidebarView_"] > [class^="sidebarRegion_"] > [class^="sidebarRegionScroller_"], @@ -183,19 +236,50 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) border: none !important; padding: 2px; box-shadow: var(--WindowFrame) !important; -} -[class*="menu_"] > [class^="scroller_"] { - padding: 1px 1px 4px 1px !important; - margin-right: -4px; -} -[class*="menu_"] > [class^="scroller_"] [class^="item_"] { - border-radius: 0 !important; - margin: 1px 0; - padding: 0 2px !important; -} -[class*="menu_"] > [class^="scroller_"] [class^="customItem_"][id^="message-quickreact_"] > [class^="button_"] { - border-radius: 0 !important; - box-shadow: var(--OuterEdge); + overflow: hidden auto !important; + + & > [class^="scroller_"] { + padding: 1px !important; + padding-bottom: 4px !important; + margin-right: -8px; + + [class^="item_"] { + border-radius: 0 !important; + margin: 1px 0; + padding: 0 2px !important; + + &:active, + &[class*="focused_"] { + background-color: var(--Selection) !important; + color: var(--SelectionText) !important; + } + + &[aria-haspopup="true"] > [class^="iconContainer_"]:before, + &[role="menuitemcheckbox"][aria-checked="true"] > [class^="iconContainer_"]:before, + &[role="menuitemradio"][aria-checked="true"] > [class^="iconContainer_"]:before { + background-color: var(--WindowText) !important; + } + & > [class^="label_"] > [class^="roleRow_"] > [class^="roleCircle_"] { + border-top: 1px solid var(--WindowText) !important; + border-left: 1px solid var(--WindowText) !important; + } + } + [class^="customItem_"][id^="message-quickreact_"] > [class^="button_"] { + border-radius: 0 !important; + box-shadow: var(--OuterEdge); + } + + [class^="separator_"] { + margin: 4px 1px; + border-top: 1px solid var(--ThreeDShadow); + border-bottom: 1px solid var(--ThreeDHighlight); + } + + & > div[aria-hidden="true"] { + visibility: none; + display: none; + } + } } [class^="submenuPaddingContainer_"] { @@ -203,7 +287,35 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) margin: -4px; } -*:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]:not([class*="none_"])::-webkit-scrollbar, +*:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]:not([class*="none_"]), +*:not([class*="menu_"]):not([class*="inGame_"]) > [class*="scrollerBase_"]:not([class*="none_"]) { + &::-webkit-scrollbar { + min-width: 16px; + width: 16px; + visibility: visible !important; + } + + &::-webkit-scrollbar-track { + background-color: #171717; + border: none; + border-radius: 0; + margin: 0; + } + + &::-webkit-scrollbar-thumb, + &::-webkit-scrollbar-button:single-button { + border-radius: 0 !important; + background: #2d2d2d !important; + border: 2px solid #171717 !important; + visibility: visible !important; + + &:hover { + background: #979797 !important; + } + } +} + +/**:not([class*="menu_"]):not([class*="inGame_"]) > [class^="scroller_"]:not([class*="none_"])::-webkit-scrollbar, *:not([class*="menu_"]):not([class*="inGame_"]) > [class*="scrollerBase_"]:not([class*="none_"])::-webkit-scrollbar { min-width: 16px; width: 16px; @@ -257,7 +369,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) > [class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:vertical:decrement { border-width: 0 8px 8px 8px; border-color: transparent transparent var(--text) transparent; -} +}*/ .postnet-expanded-category, .postnet-repo-wrapper, @@ -437,14 +549,14 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) } section[class^="panels_"] { - background-color: var(--ThreeDFace) !important; + background-color: var(--Window) !important; padding-top: 2px; - box-shadow: var(--RebarTop); + /*box-shadow: var(--RebarTop);*/ & > [class^="wrapper_"] > [class^="container_"] { - background-color: var(--ThreeDFace) !important; + background-color: var(--Window) !important; border-bottom: none; - box-shadow: var(--RebarBottom); + /*box-shadow: var(--RebarBottom);*/ } & > [class^="panel_"]:has(> [class^="body_"] > [class^="gameWrapper_"]) { @@ -454,9 +566,9 @@ section[class^="panels_"] { & > [class*="activityPanel_"], & > [class^="panel_"]:has(> [class^="body_"] > [class^="gameWrapper_"]) > [class^="body_"] { - background-color: var(--ThreeDFace) !important; + background-color: var(--Window) !important; border-bottom: none; - box-shadow: var(--RebarBottom); + /*box-shadow: var(--RebarBottom);*/ padding: 2px 4px; [class^="gameWrapper_"] { @@ -509,8 +621,8 @@ section[class^="panels_"] { padding: 4px; padding-bottom: 6px; margin: 0 !important; - box-shadow: var(--RebarBottom); - background-color: var(--ThreeDFace); + /*box-shadow: var(--RebarBottom);*/ + background-color: var(--Window); } } @@ -538,7 +650,7 @@ section[class^="panels_"] { } [class^="sidebar_"] { - border-left: 4px solid var(--ThreeDFace); + border-left: 4px solid var(--Window); } /*[class^="sidebar_"] > nav > [class^="scroller_"] { @@ -548,15 +660,15 @@ section[class^="panels_"] { [class^="base_"] > [class^="content_"] > [class^="sidebar_"] { border-radius: 0 !important; - border-left: 4px solid var(--ThreeDFace); + border-left: 4px solid var(--Window); padding: 2px; - box-shadow: var(--RebarBorder); + /*box-shadow: var(--RebarBorder);*/ & > [class^="container_"] { background: var(--Window) !important; & > [class^="container_"][class*="clickable_"] { - background: var(--ThreeDFace) !important; + background: var(--Window) !important; & > header[class^="header_"] { padding: 0px; padding-bottom: 2px; @@ -730,3 +842,17 @@ section[class^="panels_"] { width: 240px; } } + +[class^="base_"] > [class^="content_"] > [class^="sidebar_"] > [class^="container_"], +.overlay [class^="widget_"] > [class^="base_"] > [class^="sidebar_"] > [class^="children_"] > [class^="channelList_"] { + & > [class^="scroller_"] > [class^="content_"] { + [class^="containerDefault_"] [class^="iconVisibility_"][class*="modeSelected_"] [class^="link_"] { + background-color: var(--Selection) !important; + --channel-icon: var(var(--SelectionText)) !important; + + [class^="name_"] { + color: var(var(--SelectionText)) !important; + } + } + } +}