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;

src/components/editor/PageSettings.vue

@@ -271,25 +271,65 @@
     </div>
 
     <div class="settings-subsection">
-      <div class="field checkbox-field">
+
+      <div class="field field-generated-content">
+      <div class="checkbox-field">
         <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
         <label
           for="page-numbers"
           class="label-with-tooltip"
-          data-css="@bottom-left/right"
+          data-css="content: counter(page)"
-          >Numéro de page</label
+          >
-        >
+          Numéro de page
+        </label>
+      </div>
+        <div class="positions">
+          <div class="group-position">
+            <button data-css="@top/bottom-left">Gauche</button>
+            <button data-css="@top/bottom-center">Centre</button>
+            <button data-css="@top/bottom-right">Droite</button>
+          </div>
+          <div class="group-position">
+            <button  data-css="@top-left/center/right">Haut</button>
+            <button  data-css="@bottom-left/center/right">Bas</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="settings-subsection">
+
+      <div class="field field-generated-content">
+        <div class="checkbox-field">
+          <input id="running-title" type="checkbox" v-model="runningTitle" />
+          <label
+            for="running-title"
+            class="label-with-tooltip"
+            data-css="string-set"
+            >Titre courant</label
+          >
+        </div>
+        <div class="positions">
+          <div class="group-position">
+            <button data-css="@top/bottom-left">Gauche</button>
+            <button data-css="@top/bottom-center">Centre</button>
+            <button data-css="@top/bottom-right">Droite</button>
+          </div>
+          <div class="group-position">
+            <button  data-css="@top-left/center/right">Haut</button>
+            <button  data-css="@bottom-left/center/right">Bas</button>
+          </div>
+        </div>
       </div>
 
-      <div class="field checkbox-field">
+      
-        <input id="running-title" type="checkbox" v-model="runningTitle" />
+
-        <label
+      
-          for="running-title"
+  
-          class="label-with-tooltip"
+
-          data-css="string-set"
+
-          >Titre courant</label
+
-        >
+
-      </div>
     </div>
   </div>
   </section>