styles infos

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

@@ -3,13 +3,10 @@
   margin: var(--space-m) 0;
 
   h2 {
-    margin-bottom: var(--space);
-
     font-weight: 600;
     font-size: 1.4rem;
     border-bottom: 1px solid var(--color-200);
     color: var(--color-800);
-
   }
 
   .infos{
@@ -17,6 +14,10 @@
     color: var(--color-interface-400);
   }
 
+  .container{
+    margin-top: var(--space-xs);
+  }
+
 
 }
 

public/assets/css/src/_forms.scss

@@ -11,6 +11,9 @@ input[type="number"] {
   // min-width: var(--input-w);
   // width: 100%;
   // padding: 0 1ch;
+  &:focus{
+    border-color: var(--color-interface-400);
+  }
   
 }
 

public/assets/css/style.css

@@ -280,6 +280,11 @@ input[type=number] {
   font-size: 1rem;
   padding-left: 0.5ch;
 }
+select:focus,
+input[type=text]:focus,
+input[type=number]:focus {
+  border-color: var(--color-interface-400);
+}
 
 input[type=range] {
   -webkit-appearance: none;
@@ -524,7 +529,6 @@ input[type=number] {
   margin: var(--space-m) 0;
 }
 .settings-section h2 {
-  margin-bottom: var(--space);
   font-weight: 600;
   font-size: 1.4rem;
   border-bottom: 1px solid var(--color-200);
@@ -534,6 +538,9 @@ input[type=number] {
   font-size: 0.8rem;
   color: var(--color-interface-400);
 }
+.settings-section .container {
+  margin-top: var(--space-xs);
+}
 
 .settings-subsection:not(:last-child) {
   border-bottom: 1px solid var(--color-interface-100);

src/components/editor/PageSettings.vue

@@ -2,7 +2,10 @@
   <section class="settings-section" id="settings-section_page" data-color-type="page">
     <h2>Réglage des pages</h2>
     <div class="container"> 
-  
+      <p class="infos">
+      Ces réglages s'appliquent à l'ensemble des pages du document. Vous
+      pouvez modifier ensuite les pages des gabarits indépendamment.
+    </p>
 
     <div class="settings-subsection">
       <div class="field field-simple">

src/components/ui/NumberInput.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="number-input">
     <input
+      ref="inputRef"
       type="number"
       :value="displayValue"
       :min="min"
@@ -15,6 +16,7 @@
       <button
         type="button"
         class="spinner-btn spinner-up"
+        @mousedown.prevent
         @click="increment"
         :disabled="disabled || (max !== undefined && modelValue >= max)"
         tabindex="-1"
@@ -26,6 +28,7 @@
       <button
         type="button"
         class="spinner-btn spinner-down"
+        @mousedown.prevent
         @click="decrement"
         :disabled="disabled || (min !== undefined && modelValue <= min)"
         tabindex="-1"
@@ -39,7 +42,9 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+
+const inputRef = ref(null);
 
 const props = defineProps({
   modelValue: {
@@ -98,6 +103,10 @@ const increment = () => {
   if (props.max === undefined || newValue <= props.max) {
     emit('update:modelValue', newValue);
   }
+  // Give focus to input
+  if (inputRef.value) {
+    inputRef.value.focus();
+  }
 };
 
 const decrement = () => {
@@ -107,5 +116,9 @@ const decrement = () => {
   if (props.min === undefined || newValue >= props.min) {
     emit('update:modelValue', newValue);
   }
+  // Give focus to input
+  if (inputRef.value) {
+    inputRef.value.focus();
+  }
 };
 </script>