From ea9efc3dc20b1b4964765dcfcb3186d0824975f2 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <117369+srcn@users.noreply.github.com>
Date: Tue, 24 May 2022 14:39:02 +0300
Subject: [PATCH] (global) Added custom scrollbar styling for platforms other
 than macOS and iOS

---
 src/@fuse/styles/tailwind.scss     | 40 ++++++++++++++++++++++++++++++
 src/app/layout/layout.component.ts |  7 +++++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/@fuse/styles/tailwind.scss b/src/@fuse/styles/tailwind.scss
index e4d823f9..d4386113 100644
--- a/src/@fuse/styles/tailwind.scss
+++ b/src/@fuse/styles/tailwind.scss
@@ -76,6 +76,46 @@
         }
     }
 
+    /* Style scrollbars on platforms other than MacOS and iOS */
+    @media only screen and (min-width: 960px) {
+
+        body:not(.os-mac) {
+
+            ::-webkit-scrollbar {
+                width: 8px;
+                height: 8px;
+                background-color: rgba(0, 0, 0, 0);
+            }
+
+            ::-webkit-scrollbar:hover {
+                width: 8px;
+                height: 8px;
+                background-color: rgba(0, 0, 0, 0.06);
+            }
+
+            ::-webkit-scrollbar-thumb {
+                border: 2px solid transparent;
+                border-radius: 20px;
+                box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.24);
+            }
+
+            ::-webkit-scrollbar-thumb:active {
+                border-radius: 20px;
+                box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.37);
+            }
+
+            &.dark {
+                ::-webkit-scrollbar-thumb {
+                    box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.24);
+                }
+
+                ::-webkit-scrollbar-thumb:active {
+                    box-shadow: inset 0 0 0 20px rgba(255, 255, 255, 0.37);
+                }
+            }
+        }
+    }
+
     [disabled] * {
         @apply text-disabled #{'!important'};
     }
diff --git a/src/app/layout/layout.component.ts b/src/app/layout/layout.component.ts
index 84d1c18b..ad9b62cd 100644
--- a/src/app/layout/layout.component.ts
+++ b/src/app/layout/layout.component.ts
@@ -4,6 +4,7 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { combineLatest, filter, map, Subject, takeUntil } from 'rxjs';
 import { FuseConfigService } from '@fuse/services/config';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+import { FusePlatformService } from '@fuse/services/platform';
 import { FUSE_VERSION } from '@fuse/version';
 import { Layout } from 'app/layout/layout.types';
 import { AppConfig } from 'app/core/config/app.config';
@@ -31,7 +32,8 @@ export class LayoutComponent implements OnInit, OnDestroy
         private _renderer2: Renderer2,
         private _router: Router,
         private _fuseConfigService: FuseConfigService,
-        private _fuseMediaWatcherService: FuseMediaWatcherService
+        private _fuseMediaWatcherService: FuseMediaWatcherService,
+        private _fusePlatformService: FusePlatformService
     )
     {
     }
@@ -102,6 +104,9 @@ export class LayoutComponent implements OnInit, OnDestroy
 
         // Set the app version
         this._renderer2.setAttribute(this._document.querySelector('[ng-version]'), 'fuse-version', FUSE_VERSION);
+
+        // Set the OS name
+        this._renderer2.addClass(this._document.body, this._fusePlatformService.osName);
     }
 
     /**