Style changes and scrollerwrap props

client/src/modules/ui/vue/components/generic/ScrollerWrap.vue

@@ -1,2 +1,2 @@
 <template src="./templates/ScrollerWrap.html"></template>
-<script>export default {}</script>
+<script>export default { props: ['dark'] }</script>

client/src/modules/ui/vue/components/generic/templates/ScrollerWrap.html

@@ -1,5 +1,3 @@
-<div class="bd-scroller-wrap">
-    <div class="bd-scroller">
+<div class="bd-scroller-wrap" :class="{'bd-dark': dark}">
     <slot/>
 </div>
-</div>

client/src/modules/ui/vue/components/sidebar/View.vue

@@ -6,6 +6,7 @@
     /*<= Imports*/
 
     export default {
-        components
+        components,
+        props: ['dark']
     }
 </script>

client/src/modules/ui/vue/components/sidebar/templates/Sidebar.html

@@ -1,3 +1,3 @@
-<div class="bd-sidebar">
+<div class="bd-sidebar bd-scroller">
     <slot/>
 </div>

client/src/modules/ui/vue/components/sidebar/templates/View.html

@@ -1,13 +1,13 @@
 <div class="bd-sidebar-view">
     <div class="bd-sidebar-region">
         <div class="bd-settingsWrap">
-            <ScrollerWrap>
+            <ScrollerWrap dark="dark">
                 <slot name="sidebar"/>
             </ScrollerWrap>
         </div>
     </div>
     <div class="bd-content-region">
-        <ScrollerWrap>
+        <ScrollerWrap dark="dark">
             <slot name="content"/>
         </ScrollerWrap>
     </div>

client/src/modules/ui/vue/components/templates/BdSettings.html

@@ -1,5 +1,5 @@
 <div class="bd-settings" :class="{active: active}">
-    <SidebarView>
+    <SidebarView dark="true">
         <Sidebar slot="sidebar">
             <div class="bd-settings-x" @click="close">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 12 12"><g fill="none" fill-rule="evenodd"><path d="M0 0h12v12H0"></path><path class="fill" fill="#dcddde" d="M9.5 3.205L8.795 2.5 6 5.295 3.205 2.5l-.705.705L5.295 6 2.5 8.795l.705.705L6 6.705 8.795 9.5l.705-.705L6.705 6"></path></g></svg>

client/src/styles/partials/generic.scss

@@ -0,0 +1,48 @@
+.bd-scroller-wrap {
+    display: flex;
+    width: 100%;
+
+    .bd-scroller {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        &::-webkit-scrollbar {
+            width: 14px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: #1e2124;
+            border-color: #36393e;
+        }
+
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-track-piece {
+            background-clip: padding-box;
+            border-width: 3px;
+            border-style: solid;
+            border-radius: 7px;
+        }
+
+        &::-webkit-scrollbar-track-piece {
+            background-color: #2f3136;
+            border-color: #36393e;
+        }
+    }
+
+    &.bd-dark {
+        .bd-scroller {
+            &::-webkit-scrollbar-thumb {
+                background-color: #36393e;
+                border-color: transparent;
+            }
+
+            &::-webkit-scrollbar-track-piece {
+                background-color: #2b2e31;
+                border-color: transparent;
+            }
+        }
+    }
+}

client/src/styles/partials/index.scss

@@ -3,5 +3,6 @@
 @import './animations.scss';
 @import './bdsettings.scss';
 @import './sidebarview.scss';
+@import './generic.scss';
 
 @import './discordoverrides.scss';

client/src/styles/partials/sidebarview.scss

@@ -26,13 +26,11 @@
             flex: 1;
             min-height: 1px;
             box-sizing: border-box;
-            padding: 50px 15px 15px 15px;
+            padding: 80px 15px 15px 15px;
 
-            .bd-scroller {
+            .bd-scroller.bd-sidebar {
                 width: 100%;
                 padding-right: 20px;
-
-                .bd-sidebar {
                 padding: 0;
 
                 .bd-header {
@@ -82,7 +80,6 @@
             }
         }
     }
-    }
 
     .bd-content-region {
         flex-grow: 1;