From 9127520ff7820b29bdfcc1e8e2662c931e3f8f2a Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 9 Jan 2026 16:46:48 +0100
Subject: [PATCH 1/2] feat: add keyboard shortcut Cmd/Ctrl+S to SaveButton
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add Cmd+S (Mac) or Ctrl+S (Windows/Linux) keyboard shortcut to save CSS
- Detect platform to display correct shortcut symbol (⌘ or Ctrl)
- Prevent default browser save behavior
- Translate tooltips to French
- Show shortcut in button tooltip

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/SaveButton.vue | 38 +++++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/components/SaveButton.vue b/src/components/SaveButton.vue
index 2064de7..be546a2 100644
--- a/src/components/SaveButton.vue
+++ b/src/components/SaveButton.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 
 const stylesheetStore = useStylesheetStore();
@@ -51,6 +51,10 @@ 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();
 
@@ -64,12 +68,34 @@ const handleSave = async () => {
   // Errors are handled in the store and reflected in hasError
 };
 
-const getTooltip = () => {
-  if (!isDirty.value) return 'No changes to save';
-  if (isSaving.value) return 'Saving...';
-  if (hasError.value) return saveError.value;
-  return 'Save custom CSS';
+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 (hasError.value) return saveError.value;
+  return `Enregistrer le CSS personnalisé (${shortcutKey}+S)`;
+};
+
+// Add keyboard listener on mount
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown);
+});
+
+// Remove keyboard listener on unmount
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
 </script>
 
 <style scoped>

From 83455b7098817f1177de0abcea18ee8e19ddd5c6 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 9 Jan 2026 16:54:10 +0100
Subject: [PATCH 2/2] fix: improve Coloris color picker visibility and button
 clickability

- Fix grid layout: add second column for input (grid-template-columns: var(--input-h) 1fr)
- Ensure color picker button is clickable with cursor pointer and pointer-events auto
- Set color picker z-index to 10000 to display above all UI elements
- Add global styles to ensure Coloris button is always clickable

Fixes issues where:
- Color picker appeared behind ElementPopup
- Button was not consistently clickable
- Grid layout was missing second column definition

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 public/assets/css/src/_forms.scss | 92 ++++++++++++-------------------
 public/assets/css/style.css       | 13 +++--
 public/assets/css/style.css.map   |  2 +-
 src/App.vue                       | 13 +++++
 4 files changed, 58 insertions(+), 62 deletions(-)

diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss
index d80ad59..b472c84 100644
--- a/public/assets/css/src/_forms.scss
+++ b/public/assets/css/src/_forms.scss
@@ -11,25 +11,19 @@ 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 {
@@ -44,43 +38,42 @@ input[type="number"] {
     .clr-field {
       width: 100%;
       display: grid;
-      grid-template-columns: var(--input-h);
+      grid-template-columns: var(--input-h) 1fr;
       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);
@@ -88,45 +81,41 @@ 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;
 }
@@ -165,12 +154,6 @@ input[type="number"] {
   }
 }
 
-
-
-
-
-
-
 // INPUT NUMBER ===============================================
 
 // Masquer les spinners natifs partout
@@ -185,51 +168,46 @@ 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 {
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 05c319d..80d1c24 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -304,13 +304,15 @@ input[type=number] {
 .field .input-with-color .clr-field {
   width: 100%;
   display: grid;
-  grid-template-columns: var(--input-h);
+  grid-template-columns: var(--input-h) 1fr;
   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;
@@ -351,17 +353,20 @@ 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;
 }
 
diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map
index cd0000e..5b73052 100644
--- a/public/assets/css/style.css.map
+++ b/public/assets/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_forms-section.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_forms-section.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index ce66008..9952a3d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -675,6 +675,19 @@ 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,