improve styling

docs/src/components/LiveDemo/CustomLayout.vue

@@ -64,10 +64,6 @@ export default {
       overflow: auto;
       max-height: unquote("max(300px, 60vh)");
       padding: 1.5rem;
-
-      &::-webkit-scrollbar-thumb {
-        background-color: rgba($colorWhite, 0.25);
-      }
     }
 
     .prism-editor__container {

docs/src/layouts/App/prism.scss

@@ -47,10 +47,6 @@ pre[class*="language-"] {
   padding: 1.2rem 1.5rem !important;
   border-radius: 0.5rem;
   max-height: unquote("max(300px, 60vh)");
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba($colorWhite, 0.25);
-  }
 }
 
 pre[class*="language-"].language-css > code,

docs/src/templates/DocPage/style.scss

@@ -79,6 +79,7 @@
 
     > p code,
     > li code,
+    > table code,
     > .remark-container code {
       color: $colorPurple;
       background-color: rgba($colorPurple, 0.1);
@@ -86,6 +87,7 @@
 
     > p a,
     > li a,
+    > table a,
     > .remark-container a {
       text-decoration: underline;
     }
@@ -147,17 +149,27 @@
     > table {
       width: 100%;
       border-collapse: collapse;
+      font-size: 0.85rem;
+      text-align: left;
+      color: rgba($colorWhite, 0.8);
 
       th,
       td {
-        text-align: left;
-        font-size: 0.75rem;
         padding: 0.5rem;
+
+        &:first-child {
+          padding-left: 0;
+        }
+
+        &:last-child {
+          padding-right: 0;
+        }
       }
 
       th {
-        font-weight: 600;
+        color: $colorWhite;
-        background-color: rgba($colorWhite, 0.05);
+        font-weight: 500;
+        border-bottom: 1px solid rgba($colorWhite, 0.2);
 
         &:first-child {
           border-top-left-radius: 5px;
@@ -171,7 +183,7 @@
       }
 
       td {
-        border-bottom: 1px solid rgba($colorWhite, 0.05);
+        border-bottom: 1px solid rgba($colorWhite, 0.1);
       }
 
       tr:last-child td {