Merge branch 'add_customl_scroll' into 'dev'

Custom scrollbar

See merge request discoursio/discoursio-webapp!70

src/renderer/_default.page.client.tsx

@@ -21,6 +21,13 @@ export const render = async (pageContext: PageContextBuiltInClient & PageContext
     load: 'languageOnly'
   })
 
+  const isIOSorMacOSorAndroid = /iphone|ipad|ipod|macintosh|android/i.test(navigator.userAgent)
+
+  if (!isIOSorMacOSorAndroid) {
+    const htmlEl = document.querySelector('html')
+    htmlEl.dataset.customScroll = 'on'
+  }
+
   const content = document.querySelector('#root')
 
   if (!layoutReady) {

src/styles/app.scss

@@ -853,6 +853,33 @@ details {
 
 .description {
   @include font-size(1.4rem);
-
   color: rgba(0 0 0 / 40%);
 }
+
+[data-custom-scroll='on'] {
+  /* Customize website's scrollbar like Mac OS
+  Not supports in Firefox and IE */
+
+  /* total width */
+  ::-webkit-scrollbar {
+    background-color: #fff;
+    width: 16px;
+  }
+
+  /* background of the scrollbar except button or resizer */
+  ::-webkit-scrollbar-track {
+    background-color: #fff;
+  }
+
+  /* scrollbar itself */
+  ::-webkit-scrollbar-thumb {
+    background-color: #babac0;
+    border-radius: 16px;
+    border: 4px solid #fff;
+  }
+
+  /* set button(top and bottom of the scrollbar) */
+  ::-webkit-scrollbar-button {
+    display: none;
+  }
+}