changed scroll bar colors and behavior

angular.json

@@ -21,10 +21,13 @@
               "src/favicon.ico"
             ],
             "styles": [
+              "./node_modules/simplebar/dist/simplebar.min.css",
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+              "./node_modules/simplebar/dist/simplebar.min.js"
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -1950,6 +1950,11 @@
         "map-obj": "^1.0.0"
       }
     },
+    "can-use-dom": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
+      "integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
+    },
     "caniuse-lite": {
       "version": "1.0.30000865",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
@@ -6664,6 +6669,11 @@
       "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "log-symbols": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
@@ -8992,6 +9002,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
+      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+    },
     "resolve": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz",
@@ -9152,6 +9167,11 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "scrollbarwidth": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/scrollbarwidth/-/scrollbarwidth-0.1.3.tgz",
+      "integrity": "sha1-Gw3mTiiMOMQn9KAf4ApGKgS5T98="
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -9402,6 +9422,17 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
       "dev": true
     },
+    "simplebar": {
+      "version": "3.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/simplebar/-/simplebar-3.0.0-beta.1.tgz",
+      "integrity": "sha1-ds6twWr3YtBAR+7MwXDh7D6U41c=",
+      "requires": {
+        "can-use-dom": "^0.1.0",
+        "lodash.throttle": "^4.1.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "scrollbarwidth": "^0.1.3"
+      }
+    },
     "single-line-log": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-1.1.2.tgz",

package.json

@@ -29,6 +29,7 @@
     "core-js": "^2.5.4",
     "ngx-electron": "^1.0.4",
     "rxjs": "^6.0.0",
+    "simplebar": "^3.0.0-beta.1",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {

src/app/components/left-side-bar/left-side-bar.component.css

@@ -15,7 +15,7 @@
 
   #mam-create-toot a {
     font-size: 0.8em;
-    color: white;
+    /* color: white; */
     text-decoration: none;
     margin: 0 0 0 10px;
   }
@@ -43,9 +43,13 @@
   /* background-color: black; */
 }
 
-#mam-account-add a {
+a {
   font-size: 2em;
-  color: white;
+  color: #595c67;
   text-decoration: none;
   margin: 10px 0 0 15px;
 }
+
+a:hover {
+  color: #8f93a2;
+}

src/app/components/stream/stream.component.html

@@ -2,7 +2,7 @@
   <div id="mam-stream-header">
     <a href title="return to top" (click)="goToTop()"><h1>{{ stream.streamName.toUpperCase() }}</h1></a>
   </div>
-  <div id="mam-stream-toots">
+  <div id="mam-stream-toots" data-simplebar>
     <div *ngFor="let toot of toots">
       <app-toot [toot]="toot"></app-toot>
     </div>

src/app/components/stream/stream.component.ts

@@ -26,7 +26,10 @@ export class StreamComponent implements OnInit {
 
   toots: TootWrapper[] = [];
 
-  constructor() { }
+  constructor(){
+    // var simplebar = new SimpleBar(document.querySelector('#mam-stream-toots'), { autoHide: true });
+  }
+
 
   ngOnInit() {
     //Stubs

src/app/pages/streams-main-display/streams-main-display.component.css

@@ -18,3 +18,36 @@
   white-space: normal;
   margin-left: 7px;
 }
+
+
+.flexcroll{
+  scrollbar-face-color: #08090d;
+  scrollbar-shadow-color: #08090d;
+  scrollbar-highlight-color: #08090d;
+  scrollbar-3dlight-color: #08090d;
+  scrollbar-darkshadow-color: #08090d;
+  scrollbar-track-color: #08090d;
+  scrollbar-arrow-color: #08090d; 
+}
+
+/* Let's get this party started */
+.flexcroll::-webkit-scrollbar {
+  /* width: 16px !important; */
+  height: 7px;
+}
+
+/* Track */
+/* .flexcroll::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+} */
+
+/* Handle */
+.flexcroll::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+  /* background: rgba(255,0,0,0.8);  */
+  background: #08090d; 
+  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); 
+}

src/app/pages/streams-main-display/streams-main-display.component.html

@@ -1,4 +1,4 @@
-<div id="mam-main-display">
+<div id="mam-main-display" class="flexcroll">
   <div *ngFor="let s of streams" class="mam-stream-column">
     <app-stream [stream]="s"></app-stream>
   </div>

src/index.html

@@ -9,6 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
 </head>
 
 <body>