new system theme amalgamation

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_"]

src/ripcord.scss

@@ -576,7 +576,11 @@
   }
 }
 
-[class^="chat_"] [class^="messagesWrapper_"] [class^="scroller_"] [class^="scrollerContent_"] {
+[class^="chat_"] [class^="messagesWrapper_"] {
+  border-bottom: 1px solid colors.$c0;
+
+  [class^="scroller_"] [class^="scrollerContent_"] {
     padding: 0 !important;
     padding-bottom: 3px !important;
   }
+}

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;

src/w9x/guilds.scss

@@ -1,7 +1,7 @@
 .overlay [class^="widget_"] > [class^="base_"] > nav[class^="wrapper_"],
 [class*="guilds_"] {
-  background-color: var(--ThreeDFace) !important;
+  background-color: var(--Window) !important;
-  box-shadow: var(--RebarBorder);
+  /*box-shadow: var(--RebarBorder);*/
   width: 48px;
   padding: 2px;
 

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);
+      inset 0 50px 0 0 var(--ThreeDHighlight);*/
-    background-color: var(--ThreeDFace);
+    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,11 +480,16 @@ html:not(.overlay) [id^="popout_"] {
           padding: 2px;
           box-shadow: var(--WindowFrame) !important;
 
+          & > [class*="menuOverlay_"] {
+            border: none;
+            border-radius: 0;
+
             & > [class^="menu_"] {
               padding: 0 !important;
               box-shadow: none !important;
 
               & > [class^="scroller_"] {
+                margin-right: 0 !important;
                 padding-bottom: 0 !important;
 
                 & > [class^="separator"] {
@@ -492,6 +502,7 @@ html:not(.overlay) [id^="popout_"] {
       }
     }
   }
+}
 
 [class^="chat_"] > [class*="minimum_"] > [class^="callContainer_"] {
   overflow: visible;
@@ -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);

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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 14"><rect x="1" y="1" height="12" width="8" fill="black"></rect></svg>');
+
+  --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,27 +236,86 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"]))
   border: none !important;
   padding: 2px;
   box-shadow: var(--WindowFrame) !important;
-}
+  overflow: hidden auto !important;
-[class*="menu_"] > [class^="scroller_"] {
+
-  padding: 1px 1px 4px 1px !important;
+  & > [class^="scroller_"] {
-  margin-right: -4px;
+    padding: 1px !important;
-}
+    padding-bottom: 4px !important;
-[class*="menu_"] > [class^="scroller_"] [class^="item_"] {
+    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;
       }
-[class*="menu_"] > [class^="scroller_"] [class^="customItem_"][id^="message-quickreact_"] > [class^="button_"] {
+
+      &[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_"] {
   padding: 0;
   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);
+    /*box-shadow: var(--RebarBottom);*/
-    background-color: var(--ThreeDFace);
+    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;
+      }
+    }
+  }
+}