public/assets/css/src/_forms.scss

@@ -11,19 +11,25 @@ input[type="number"] {
   // min-width: var(--input-w);
   // width: 100%;
   // padding: 0 1ch;
+  
 }
 
 .field {
   display: flex;
 
+
   label {
     font-weight: 600;
     color: var(--color-800);
   }
 
+
+
   .input-with-unit {
     display: flex;
     gap: 0.3rem;
+
+    
   }
 
   .unit-toggle {
@@ -38,42 +44,43 @@ input[type="number"] {
     .clr-field {
       width: 100%;
       display: grid;
-      grid-template-columns: var(--input-h) 1fr;
+      grid-template-columns: var(--input-h);
       grid-gap: 1ch;
-      button {
+      button{
         grid-column: 1;
         position: relative;
         border-radius: var(--border-radius);
-        cursor: pointer;
-        pointer-events: auto;
+
       }
-      input {
+      input{
         grid-column: 2;
       }
+
     }
   }
 }
 
-.field {
+
+.field{
   display: grid;
   grid-template-columns: var(--label-w) 1fr;
-  label {
+  label{
     align-self: center;
   }
 }
 
-.field-font {
+.field-font{
   display: grid;
   grid-template-columns: var(--label-w) 1fr;
   grid-template-rows: var(--input-h) var(--input-h);
 
-  select {
+  select{
     width: 100%;
   }
-  .field-checkbox {
+  .field-checkbox{
     grid-column: 2;
     padding-top: var(--space-xs);
-    label {
+    label{
       font-weight: 400;
       margin-left: 0.75ch;
       color: var(--color-txt);
@@ -81,41 +88,45 @@ input[type="number"] {
   }
 }
 
-.field-text-size {
-  input[type="number"] {
+.field-text-size{
+  input[type="number"]{ 
     width: var(--input-w-small);
     padding-left: 0.75ch;
   }
-  input[type="range"] {
+  input[type="range"]{
     flex-grow: 2;
     flex-shrink: 2;
   }
 }
 
-.field-margin,
-.field-size {
+.field-margin, .field-size{
   display: inline-grid;
   width: calc(50% - 1ch);
   grid-template-columns: 6.5ch var(--input-w-small) 1fr;
   margin-bottom: var(--space-xs);
-  input {
+  input{ 
     width: var(--input-w-small);
     padding-left: 0.75ch;
   }
-  &:nth-of-type(odd) {
+  &:nth-of-type(odd){
     margin-right: 2ch;
+
   }
+
 }
 
-.checkbox-field {
-  margin: calc(var(--space-xs) * 2) 0;
+.checkbox-field{
+  margin: calc(var(--space-xs)*2) 0;
   grid-template-columns: 3ch 1fr;
-  input {
+  input{
     justify-self: left;
     margin: 0;
   }
 }
 
+
+
+
 .field--view-only {
   opacity: 0.3;
 }
@@ -154,6 +165,12 @@ input[type="number"] {
   }
 }
 
+
+
+
+
+
+
 // INPUT NUMBER ===============================================
 
 // Masquer les spinners natifs partout
@@ -168,46 +185,51 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
-.number-input {
+
+.number-input{
   position: relative;
   // padding: 0 1ch!important;
-  input {
+  input{
     padding-top: 0;
     padding-bottom: 0;
   }
-  .spinner-buttons {
+  .spinner-buttons{
     height: var(--input-h);
-    width: var(--input-h);
+    width:  var(--input-h);
     display: flex;
     flex-direction: column;
     position: absolute;
     right: 0;
     top: 0;
 
-    button {
-      height: calc(var(--input-h) * 0.5);
+    button{
+      height: calc(var(--input-h)*0.5);
       cursor: pointer;
       padding: 0;
-      svg {
+      svg{
         width: 10px;
         height: auto;
       }
-      svg path {
-        fill: var(--color-interface-600);
+      svg path{
+          fill: var(--color-interface-600);
       }
-      &:hover {
-        svg path {
+      &:hover{
+        svg path{
           fill: var(--color-interface-900);
-        }
+      }
       }
     }
-    .spinner-down {
-      svg {
+    .spinner-down{
+      svg{
+      
         // position: relative;
         // top: -2px;
       }
     }
+    
+
   }
+
 }
 // Composant NumberInput avec boutons personnalisés
 // .number-input {

public/assets/css/style.css

@@ -304,15 +304,13 @@ input[type=number] {
 .field .input-with-color .clr-field {
   width: 100%;
   display: grid;
-  grid-template-columns: var(--input-h) 1fr;
+  grid-template-columns: var(--input-h);
   grid-gap: 1ch;
 }
 .field .input-with-color .clr-field button {
   grid-column: 1;
   position: relative;
   border-radius: var(--border-radius);
-  cursor: pointer;
-  pointer-events: auto;
 }
 .field .input-with-color .clr-field input {
   grid-column: 2;
@@ -353,20 +351,17 @@ input[type=number] {
   flex-shrink: 2;
 }
 
-.field-margin,
-.field-size {
+.field-margin, .field-size {
   display: inline-grid;
   width: calc(50% - 1ch);
   grid-template-columns: 6.5ch var(--input-w-small) 1fr;
   margin-bottom: var(--space-xs);
 }
-.field-margin input,
-.field-size input {
+.field-margin input, .field-size input {
   width: var(--input-w-small);
   padding-left: 0.75ch;
 }
-.field-margin:nth-of-type(odd),
-.field-size:nth-of-type(odd) {
+.field-margin:nth-of-type(odd), .field-size:nth-of-type(odd) {
   margin-right: 2ch;
 }
 

src/App.vue

@@ -675,19 +675,6 @@ onMounted(async () => {
   height: 1.5rem;
 }
 
-/* Coloris color picker - ensure it's always on top */
-:deep(.clr-picker) {
-  z-index: 10000 !important;
-}
-
-/* Coloris button - ensure it's clickable and visible */
-:deep(.clr-field button) {
-  pointer-events: auto !important;
-  cursor: pointer !important;
-  position: relative;
-  z-index: 1;
-}
-
 /* Hide UI elements when printing */
 @media print {
   #editor-panel,

src/components/SaveButton.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 
 const stylesheetStore = useStylesheetStore();
@@ -51,10 +51,6 @@ const lastSavedFormatted = computed(() => stylesheetStore.lastSavedFormatted);
 const hasError = computed(() => !!saveError.value);
 const showSuccess = ref(false);
 
-// Detect platform for keyboard shortcut display
-const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-const shortcutKey = isMac ? '⌘' : 'Ctrl';
-
 const handleSave = async () => {
   const result = await stylesheetStore.saveCustomCss();
 
@@ -68,34 +64,12 @@ const handleSave = async () => {
   // Errors are handled in the store and reflected in hasError
 };
 
-const handleKeyDown = (event) => {
-  // Check for Cmd+S (Mac) or Ctrl+S (Windows/Linux)
-  if ((event.metaKey || event.ctrlKey) && event.key === 's') {
-    event.preventDefault();
-
-    // Only save if there are changes and not currently saving
-    if (isDirty.value && !isSaving.value) {
-      handleSave();
-    }
-  }
-};
-
 const getTooltip = () => {
-  if (!isDirty.value) return 'Aucune modification à enregistrer';
-  if (isSaving.value) return 'Enregistrement...';
+  if (!isDirty.value) return 'No changes to save';
+  if (isSaving.value) return 'Saving...';
   if (hasError.value) return saveError.value;
-  return `Enregistrer le CSS personnalisé (${shortcutKey}+S)`;
+  return 'Save custom CSS';
 };
-
-// Add keyboard listener on mount
-onMounted(() => {
-  window.addEventListener('keydown', handleKeyDown);
-});
-
-// Remove keyboard listener on unmount
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyDown);
-});
 </script>
 
 <style scoped>