merge

public/assets/css/src/_forms-section.scss

@@ -1,11 +1,5 @@
 .settings-section {
-
-  margin-top: 3em;
-
-
-  // .cons
-
-
+  margin: var(--space-m) 0;
 
   h2 {
     margin-bottom: var(--space);
@@ -14,10 +8,9 @@
     font-size: 1.4rem;
     border-bottom: 1px solid var(--color-200);
     color: var(--color-800);
-
   }
 
-  .infos{
+  .infos {
     font-size: 0.8rem;
     color: var(--color-interface-400);
   }
@@ -30,14 +23,10 @@
     padding: var(--space-xs) 0;
 
     h3 {
-        margin-top: calc(var(--space-xs)*1.5);
-        margin-bottom: calc(var(--space-xs)*2);
-        font-size: 1rem;
-        font-weight: 600;
-
+      margin-top: calc(var(--space-xs) * 1.5);
+      margin-bottom: calc(var(--space-xs) * 2);
+      font-size: 1rem;
+      font-weight: 600;
     }
   }
 }
-
-   
-  

public/assets/css/src/_forms.scss

@@ -5,7 +5,9 @@ input[type="number"] {
   border: 1px solid var(--color-interface-200);
   background-color: var(--color-interface-100);
   font-family: var(--sans-serif);
+  color: var(--color-txt);
   font-size: 1rem;
+  padding-left: 0.5ch;
   // min-width: var(--input-w);
   // width: 100%;
   // padding: 0 1ch;
@@ -80,10 +82,22 @@ input[type="number"] {
     label{
       font-weight: 400;
       margin-left: 0.75ch;
+      color: var(--color-txt);
     }
   }
 }
 
+.field-text-size{
+  input[type="number"]{ 
+    width: var(--input-w-small);
+    padding-left: 0.75ch;
+  }
+  input[type="range"]{
+    flex-grow: 2;
+    flex-shrink: 2;
+  }
+}
+
 .field-margin, .field-size{
   display: inline-grid;
   width: calc(50% - 1ch);
@@ -188,9 +202,13 @@ input[type="number"] {
     top: 0;
 
     button{
-      height: calc(var(--input-h)*0.6);
+      height: calc(var(--input-h)*0.5);
       cursor: pointer;
       padding: 0;
+      svg{
+        width: 10px;
+        height: auto;
+      }
       svg path{
           fill: var(--color-interface-600);
       }
@@ -202,8 +220,9 @@ input[type="number"] {
     }
     .spinner-down{
       svg{
-        position: relative;
-        top: -2px;
+      
+        // position: relative;
+        // top: -2px;
       }
     }
     

public/assets/css/src/_variables.scss

@@ -9,7 +9,7 @@
 
 
 
-  --color-txt: var(--color-interface-800);
+  --color-txt: var(--color-interface-900);
   --color-panel-bg: var(--color-interface-050);
   
   --color-page-highlight: #ff8a50;
@@ -20,6 +20,8 @@
   --space-xs: 0.5rem;
   --space-s: 1rem;
   --space: 1.5rem;
+  --space-m: 2rem;
+  --space-big: 3em;
 
   --curve: cubic-bezier(0.86, 0, 0.07, 1);
 
@@ -34,4 +36,5 @@
   font-size: 14px;
 
   --panel-w: 540px;
+  --panel-nav-h: 60px;
 }