added page export and import

ui/src/scss/_mixins.scss

@@ -12,40 +12,46 @@
     box-shadow: 0px 2px 5px 0px var(--shadowColor), $value;
 }
 
-@mixin scrollbar($width: 8px) {
+@mixin scrollbar(
+    $width: 8px,
+    $thumbColor: var(--baseAlt2Color),
+    $thumbActiveColor: var(--baseAlt3Color)
+) {
     $trackColor: transparent;
 
+    $elem: if(&, '&', '');
+
     @media screen and (min-width: 550px) {
         // chrome scrollbar styles
-        ::-webkit-scrollbar {
+        #{$elem}::-webkit-scrollbar {
             width: $width;
             height: $width;
             border-radius: var(--baseRadius);
         }
-        ::-webkit-scrollbar-track {
+        #{$elem}::-webkit-scrollbar-track {
             background: $trackColor;
             border-radius: var(--baseRadius);
         }
-        ::-webkit-scrollbar-thumb {
-            background-color: var(--baseAlt2Color);
+        #{$elem}::-webkit-scrollbar-thumb {
+            background-color: $thumbColor;
             border-radius: 15px;
             border: 2px solid transparent;
             background-clip: padding-box;
             &:hover,
             &:active {
-                background-color: var(--baseAlt3Color);
+                background-color: $thumbActiveColor;
             }
         }
 
         @if & {
             // firefox scrollbar
-            scrollbar-color: var(--baseAlt2Color) $trackColor;
+            scrollbar-color: $thumbColor $trackColor;
             scrollbar-width: thin;
             scroll-behavior: smooth;
         } @else {
             html {
                 // firefox scrollbar
-                scrollbar-color: var(--baseAlt2Color) $trackColor;
+                scrollbar-color: $thumbColor $trackColor;
                 scrollbar-width: thin;
                 scroll-behavior: smooth;