merge

public/assets/css/style.css

@@ -223,7 +223,7 @@ img {
 :root {
   --color-browngray-050: #f5f3f0;
   --color-browngray-200: #d0c4ba;
-  --color-txt: var(--color-interface-800);
+  --color-txt: var(--color-interface-900);
   --color-panel-bg: var(--color-interface-050);
   --color-page-highlight: #ff8a50;
   --color-purple: #7136ff;
@@ -231,6 +231,8 @@ img {
   --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);
   --sans-serif: "DM Sans", sans-serif;
   --mono: "Inconsolata", monospace;
@@ -240,6 +242,7 @@ img {
   --label-w: 18ch;
   font-size: 14px;
   --panel-w: 540px;
+  --panel-nav-h: 60px;
 }
 
 body {
@@ -273,7 +276,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;
 }
 
 .field {
@@ -333,6 +338,16 @@ input[type=number] {
 .field-font .field-checkbox 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;
+}
+.field-text-size input[type=range] {
+  flex-grow: 2;
+  flex-shrink: 2;
 }
 
 .field-margin, .field-size {
@@ -421,23 +436,22 @@ input[type=number] {
   top: 0;
 }
 .number-input .spinner-buttons button {
-  height: calc(var(--input-h) * 0.6);
+  height: calc(var(--input-h) * 0.5);
   cursor: pointer;
   padding: 0;
 }
+.number-input .spinner-buttons button svg {
+  width: 10px;
+  height: auto;
+}
 .number-input .spinner-buttons button svg path {
   fill: var(--color-interface-600);
 }
 .number-input .spinner-buttons button:hover svg path {
   fill: var(--color-interface-900);
 }
-.number-input .spinner-buttons .spinner-down svg {
-  position: relative;
-  top: -2px;
-}
-
 .settings-section {
-  margin-top: 3em;
+  margin: var(--space-m) 0;
 }
 .settings-section h2 {
   margin-bottom: var(--space);