Style server helper channels

scss/_main.scss

@@ -9,11 +9,14 @@
 @use "main/messages";
 
 @use "main/channels";
+@use "main/channelsandroles";
 @use "main/forums";
 @use "main/friends";
 @use "main/members";
 @use "main/publicservers";
 @use "main/searchresults";
+@use "main/serverguide";
+@use "main/serversubscriptions";
 @use "main/taskbar";
 @use "main/threads";
 @use "main/vc";
@@ -56,6 +59,8 @@
 .scroller-RfJjkV,
 // Buy Nitro page
 .applicationStore-2nk7Lo,
+// Server subscriptions
+.container-2_BXG-,
 // Main chat
 .chat-2ZfjoI:not(.container-2IKOsH > .chat-2ZfjoI) {
     @include boxes.mainWindow();

scss/main/_channelsandroles.scss

@@ -0,0 +1,82 @@
+@use "../top/vars-scss" as *;
+@use "../top/boxes" as boxes;
+
+// Tabs
+.tabBar-1_P75h {
+    margin: 0 16px;
+    border-bottom: 0;
+
+    .tabBarItem-onx_ng {
+        padding-bottom: 8px;
+    }
+}
+
+// Customise
+.appMount-2yBXZl .scrollerContainer-y16Rs9 {
+    background: var(--w9x-bg-color);
+    @include boxes.inset;
+}
+
+.pageBody-29jwEZ h2 {
+    color: var(--w9x-text-color) !important;
+}
+
+.prompt-1sE27N {
+    background: var(--w9x-bg-color);
+    border-color: unset !important;
+    padding: 0;
+}
+
+.promptOptions-3jDyZ4 {
+    gap: 0;
+}
+
+.optionButtonWrapper-2lbogO {
+    background: $grey;
+    @include boxes.clickable;
+
+    &:hover {
+        border-color: $white $black $black $white;
+    }
+
+    &:active {
+        border-color: $black $white $white $black;
+    }
+
+    &.pressed-2AiKRB {
+        transform: none;
+    }
+
+    &.selected-KQBgNS {
+        @include boxes.inset;
+
+        .checkIcon-3eAeN_ {
+            top: 4px;
+            right: 4px;
+        }
+    }
+}
+
+.helpText-2SCsDl {
+    .text-xs-medium-311pdh {
+        color: var(--w9x-text-color) !important;
+    }
+}
+
+// Browse channels
+.pageBody-23bo4p {
+    padding-left: 0;
+}
+
+.browser-2ea0yq {
+    background: var(--w9x-bg-color);
+    @include boxes.scroller;
+}
+
+.selectAll-1ZP46u .checkboxWrapper-3zdYym .checkbox-1LuCGM {
+    border-color: var(--text-muted) !important;
+
+    &.checked-22NTbO path {
+        fill: var(--text-muted);
+    }
+}

scss/main/_headerbar.scss

@@ -4,6 +4,7 @@
 // Header bars
 :is(
         .container-2cd8Mz .container-ZMc96U,
+        .container-2_BXG- .container-ZMc96U,
         .pageWrapper-2PwDoS .scroller-3j5xK2,
         .scroller-RfJjkV .viewWrapper-oqUsis,
         .applicationStore-2nk7Lo .homeWrapper-L4ors0,
@@ -18,6 +19,11 @@
     }
 }
 
+// End of description shadow
+.appMount-2yBXZl :is(.innerHeader-1cC3Fp, .headerBarInner-39Tej7)::after {
+    background: linear-gradient(180deg, transparent, $grey);
+}
+
 // Tools
 .toolbar-3_r2xA {
     .search-39IXmY {

scss/main/_serverguide.scss

@@ -0,0 +1,31 @@
+@use "../top/vars-scss" as *;
+@use "../top/boxes" as boxes;
+
+.homeContainer-1T8N7y {
+    @include boxes.scroller;
+    padding: 32px 16px;
+    background: var(--w9x-bg-color);
+}
+
+// Server name
+.headerName-z8Vr_4 {
+    color: var(--w9x-text-color);
+}
+
+// Main section headers
+.mainContent-2HlPBZ h2 {
+    color: var(--w9x-text-color) !important;
+}
+
+// Main section item
+.row--LCpto {
+    @include boxes.clickable;
+    &:hover {
+        background: $grey;
+    }
+}
+
+// Sidebar card
+.sidebarCardWrapper-34oCuK {
+    @include boxes.box;
+}

scss/main/_serversubscriptions.scss

@@ -0,0 +1,24 @@
+@use "../top/vars-scss" as *;
+@use "../top/boxes" as boxes;
+
+.container-2_BXG- {
+    background: $grey;
+
+    .scroller-38C5lh {
+        @include boxes.scroller;
+        background: var(--w9x-bg-color);
+    }
+}
+
+.ctaTitle-3zxXyr,
+.ctaTitle-3zxXyr strong {
+    color: var(--w9x-text-color);
+}
+
+.ctaSubtitle-2NP9L_ {
+    color: var(--w9x-text-color) !important;
+}
+
+.roleMessagePreview-NUi2Ri {
+    background: var(--w9x-bg-color);
+}

scss/top/_vars-css.scss

@@ -86,6 +86,9 @@
     // Input bg
     --input-background: var(--w9x-bg-color);
 
+    // Server guide bg
+    --home-background: #{$grey};
+
     // Black text always
     --interactive-normal: #{$black};
     --interactive-muted: #{$black};