add position num/running

public/assets/css/src/_buttons.scss

@@ -1,5 +1,5 @@
 
-.unit-toggle{
+.field{
   button:not(.spinner-btn) {
     cursor: pointer;
   

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

@@ -40,7 +40,7 @@
 
    
   
-.settings-subsection:not(:last-child) {
+.settings-subsection {
     border-bottom: 1px solid var(--color-interface-100);
   }
 

public/assets/css/src/_forms.scss

@@ -164,10 +164,7 @@ input[type="checkbox"]:checked + label::before{
 }
 
 
-.checkbox-field{
-  display: block;
-  margin: calc(var(--space-xs)*2) 0;
-}
+
 
 
 .field-font{
@@ -216,12 +213,27 @@ input[type="checkbox"]:checked + label::before{
   }
 }
 
+
 .margins label{
   color: var(--color-txt);
   font-weight: normal;
   text-decoration-color: var(--color-interface-300)!important;
 }
 
+.field-generated-content{
+  
+
+  .positions{
+    display: flex;
+    gap: 2em;
+  }
+
+  .group-position{
+    display: flex;
+    gap: 0.3em;
+  }
+}
+
 
 
 

public/assets/css/style.css

@@ -429,11 +429,6 @@ input[type=checkbox]:checked + label::before {
   grid-column: 2;
 }
 
-.checkbox-field {
-  display: block;
-  margin: calc(var(--space-xs) * 2) 0;
-}
-
 .field-font {
   display: grid;
   grid-template-columns: var(--label-w) 1fr;
@@ -482,6 +477,15 @@ input[type=checkbox]:checked + label::before {
   text-decoration-color: var(--color-interface-300) !important;
 }
 
+.field-generated-content .positions {
+  display: flex;
+  gap: 2em;
+}
+.field-generated-content .group-position {
+  display: flex;
+  gap: 0.3em;
+}
+
 .label-with-tooltip {
   -webkit-text-decoration: underline dotted 1px var(--color-400);
           text-decoration: underline dotted 1px var(--color-400);
@@ -585,7 +589,7 @@ input[type=number] {
   margin-top: var(--space-xs);
 }
 
-.settings-subsection:not(:last-child) {
+.settings-subsection {
   border-bottom: 1px solid var(--color-interface-100);
 }
 
@@ -600,7 +604,7 @@ input[type=number] {
   color: var(--color-800);
 }
 
-.unit-toggle button:not(.spinner-btn) {
+.field button:not(.spinner-btn) {
   cursor: pointer;
   border: 1px solid var(--color-interface-400);
   color: var(--color-interface-400);
@@ -609,10 +613,10 @@ input[type=number] {
   padding: 0.1rem 0.3rem;
   height: calc(var(--input-h) * 0.75);
 }
-.unit-toggle button:not(.spinner-btn):not(.active):hover {
+.field button:not(.spinner-btn):not(.active):hover {
   background-color: var(--color-interface-100);
 }
-.unit-toggle button:not(.spinner-btn).active {
+.field button:not(.spinner-btn).active {
   color: var(--color-interface-050);
   background-color: var(--color-interface-500);
   cursor: auto;