filed font-size

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

@@ -1,10 +1,8 @@
 .settings-section {
 
-  margin-top: 3em;
+  margin: var(--space-m) 0;
 
 
-  // .cons
-
 
 
   h2 {
@@ -12,21 +10,10 @@
 
     font-weight: 600;
     font-size: 1.4rem;
-    // border-radius: var(--border-radius);
-    // height: var(--input-h);
-    // padding: 0 1ch;
-    // display: flex;
-    // align-items: center;
-
-    // color: var(--color-interface-050);
-    // background-color: var(--color-800);
-    // display: inline-block;
 
     border-bottom: 1px solid var(--color-200);
     color: var(--color-800);
 
-//   border-bottom: 2px solid currentColor;
-//   margin-bottom: 2rem;
   }
 
   .infos{

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;
@@ -85,10 +87,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);
@@ -196,9 +210,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);
       }
@@ -210,8 +228,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;
 }