added page export and import

ui/src/scss/_base.scss

@@ -64,11 +64,13 @@ em {
 }
 
 ins {
+    color: var(--txtPrimaryColor);
     background: var(--successAltColor);
     text-decoration: none;
 }
 
 del {
+    color: var(--txtPrimaryColor);
     background: var(--dangerAltColor);
     text-decoration: none;
 }
@@ -129,6 +131,14 @@ code {
     border-radius: var(--baseRadius);
 }
 
+.code-block {
+    @extend %block;
+    overflow: auto;
+    padding: var(--xsSpacing);
+    white-space: pre-wrap;
+    background: var(--baseAlt1Color);
+}
+
 ol,
 ul {
     margin: 10px 0;
@@ -650,3 +660,23 @@ a,
         }
     }
 }
+
+.list {
+    @extend %block;
+    position: relative;
+    border: 1px solid var(--baseAlt1Color);
+    border-radius: var(--baseRadius);
+    .list-item {
+        word-break: break-all;
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        gap: 10px;
+        padding: 10px;
+        border-bottom: 1px solid var(--baseAlt1Color);
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+}

ui/src/scss/_form.scss

@@ -353,6 +353,11 @@ button {
     &.txt-mono {
         line-height: var(--smLineHeight);
     }
+    &.code {
+        font-size: 15px;
+        line-height: 1.379rem;
+        font-family: var(--monospaceFontFamily);
+    }
 }
 
 input,
@@ -388,6 +393,13 @@ input[type=number]::-webkit-outer-spin-button {
 textarea {
     min-height: 80px;
     resize: vertical;
+    &:focus,
+    &:focus-within {
+        @include scrollbar(
+            $thumbColor: var(--baseAlt3Color),
+            $thumbActiveColor: var(--baseAlt4Color)
+        );
+    }
 }
 select {
     padding-left: 8px;
@@ -1025,5 +1037,8 @@ select {
             font-size: var(--baseFontSize);
             line-height: var(--baseLineHeight);
         }
+        .cm-selectionMatch {
+            background: var(--infoAltColor);
+        }
     }
 }

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;
 

ui/src/scss/_overlay_panel.scss

@@ -193,6 +193,9 @@
             row-gap: var(--smSpacing);
         }
     }
+    &.full-width-popup {
+        width: 100%;
+    }
     &.image-preview {
         width: auto;
         min-width: 300px;