change colors

color darker
reverse colors
2025-12-10 15:18:12 +01:00 · 2025-12-10 15:16:15 +01:00 · 2025-12-10 15:15:43 +01:00 · 2025-12-10 13:38:34 +01:00 · 2025-12-10 13:37:55 +01:00 · 2025-12-10 13:28:35 +01:00
11 changed files with 85 additions and 84 deletions
--- a/public/assets/css/src/_buttons.scss
+++ b/public/assets/css/src/_buttons.scss
@ -37,6 +37,7 @@
    border: 1px solid currentColor;
    border-radius: calc(var(--input-h));
    font-weight: 500;
+    background-color: var(--color-panel-bg);

    &.active{
      background-color: var(--color-interface-400);
--- a/public/assets/css/src/_colors.scss
+++ b/public/assets/css/src/_colors.scss
@ -77,29 +77,29 @@



-[data-color-type="elem"]{
+[data-color-type="page"]{
  --color-050: #fff4ec;
  --color-100: #ffe6d6;
-    --color-200: #ffd1b5;
-    --color-300: #ffbc94;
-    --color-400: #ffa673;
-    --color-500: #ff945b;
-    --color-600: #ff8d54;
-    --color-700: #f97f46;
-    --color-800: #ff8a50; 
+  --color-200: #ffd7c2;
+  --color-300: #ffc7ac;
+  --color-400: #ffb38f;
+  --color-500: #ffa06f;
+  --color-600: #ff8a50; 
+  --color-700: #ff8a50; 
+  --color-800: #ea733c; 
  --color-900: #d96a30;
 }


-[data-color-type="page"]{
+[data-color-type="elem"]{
  --color-050: #f4f0ff;
  --color-100: #e7e1ff;
-    --color-200: #d4c8ff;
-    --color-300: #b9a8ff;
-    --color-400: #9f89ff;
-    --color-500: #866aff;
-    --color-600: #7a52ff;
-    --color-700: #7442ff;
-    --color-800: #7136ff; 
+  --color-200: #dacfff;
+  --color-300: #c7b8ff;
+  --color-400: #b19cff;
+  --color-500: #9a80ff;
+  --color-600: #7136ff; 
+  --color-700: #6930f5;
+  --color-800: #5d28e6;
  --color-900: #5223d6;
 }
--- a/public/assets/css/src/_forms-section.scss
+++ b/public/assets/css/src/_forms-section.scss
@ -7,7 +7,6 @@

    font-weight: 600;
    font-size: 1.4rem;
-
    border-bottom: 1px solid var(--color-200);
    color: var(--color-800);

@ -33,7 +32,6 @@
    h3 {
        margin-top: calc(var(--space-xs)*1.5);
        margin-bottom: calc(var(--space-xs)*2);
-    //   color: var(--color-600);
        font-size: 1rem;
        font-weight: 600;

--- a/public/assets/css/src/_forms.scss
+++ b/public/assets/css/src/_forms.scss
@ -17,11 +17,6 @@ input[type="number"] {
 .field {
  display: flex;

-  // label{
-  //   width: var(--label-w);
-  //   background-color: red;
-  //   flex-grow: 3;
-  // }

  label {
    font-weight: 600;
@ -123,9 +118,6 @@ input[type="number"] {
 .checkbox-field{
  margin: calc(var(--space-xs)*2) 0;
  grid-template-columns: 3ch 1fr;
-  label{
-    // font-weight: normal;
-  }
  input{
    justify-self: left;
    margin: 0;
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@ -163,29 +163,29 @@
  --color-900: #483c39;
 }

-[data-color-type=elem] {
+[data-color-type=page] {
  --color-050: #fff4ec;
  --color-100: #ffe6d6;
-  --color-200: #ffd1b5;
-  --color-300: #ffbc94;
-  --color-400: #ffa673;
-  --color-500: #ff945b;
-  --color-600: #ff8d54;
-  --color-700: #f97f46;
-  --color-800: #ff8a50;
+  --color-200: #ffd7c2;
+  --color-300: #ffc7ac;
+  --color-400: #ffb38f;
+  --color-500: #ffa06f;
+  --color-600: #ff8a50;
+  --color-700: #ff8a50;
+  --color-800: #ea733c;
  --color-900: #d96a30;
 }

-[data-color-type=page] {
+[data-color-type=elem] {
  --color-050: #f4f0ff;
  --color-100: #e7e1ff;
-  --color-200: #d4c8ff;
-  --color-300: #b9a8ff;
-  --color-400: #9f89ff;
-  --color-500: #866aff;
-  --color-600: #7a52ff;
-  --color-700: #7442ff;
-  --color-800: #7136ff;
+  --color-200: #dacfff;
+  --color-300: #c7b8ff;
+  --color-400: #b19cff;
+  --color-500: #9a80ff;
+  --color-600: #7136ff;
+  --color-700: #6930f5;
+  --color-800: #5d28e6;
  --color-900: #5223d6;
 }

@ -507,6 +507,7 @@ input[type=number] {
  border: 1px solid currentColor;
  border-radius: calc(var(--input-h));
  font-weight: 500;
+  background-color: var(--color-panel-bg);
 }
 #editor-panel .tabs .tab.active {
  background-color: var(--color-interface-400);
--- a/public/assets/css/style.css.map
+++ b/public/assets/css/style.css.map
--- a/public/assets/css/stylesheet.css
+++ b/public/assets/css/stylesheet.css
@ -10,6 +10,14 @@
  }
 }

+body {
+  font-family: "DM Sans", sans-serif;
+}
+
+h1 {
+  font-size: 3rem;
+}
+
 h2 {
  break-before: page;
 }
@ -24,13 +32,18 @@ h2 {

 p {
  font-size: 1rem;
-  margin: 0mm 0mm 10mm 0mm;
+  margin: 0mm 0mm 5mm 0mm;
+}
+
+li p {
+  margin-bottom: 0;
 }

 img {
  width: 100%;
 }

-li p {
-  margin-bottom: 0;
+a {
+  color: #7136ff;
+  text-decoration: none;
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -236,7 +236,7 @@ const clearSelectedPages = () => {
  selectedPages.value = [];
 };

-// Content elements that can trigger ElementPopup
+// Text elements that can trigger ElementPopup (excluding containers, images, etc.)
 const CONTENT_ELEMENTS = [
  'P',
  'H1',
@ -245,34 +245,17 @@ const CONTENT_ELEMENTS = [
  'H4',
  'H5',
  'H6',
-  'IMG',
-  'FIGURE',
-  'FIGCAPTION',
-  'UL',
-  'OL',
-  'LI',
  'BLOCKQUOTE',
-  'PRE',
-  'CODE',
-  'TABLE',
-  'THEAD',
-  'TBODY',
-  'TR',
-  'TH',
-  'TD',
+  'LI',
  'A',
-  'SPAN',
  'STRONG',
  'EM',
  'B',
  'I',
  'U',
-  'ARTICLE',
-  'SECTION',
-  'ASIDE',
-  'HEADER',
-  'FOOTER',
-  'NAV',
+  'CODE',
+  'PRE',
+  'FIGCAPTION',
 ];

 // Check if element is a content element (or find closest content parent)
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@ -375,6 +375,7 @@ const generatePreviewCss = () => {

  const properties = [];

+  // Include all properties with their current values
  if (fontFamily.value.value) {
    properties.push(`  font-family: ${fontFamily.value.value};`);
  }
@ -390,16 +391,16 @@ const generatePreviewCss = () => {
  if (textAlign.value.value) {
    properties.push(`  text-align: ${textAlign.value.value};`);
  }
-  if (color.value.value && color.value.value !== 'rgb(0, 0, 0)') {
+  if (color.value.value) {
    properties.push(`  color: ${color.value.value};`);
  }
-  if (background.value.value && background.value.value !== 'transparent') {
+  if (background.value.value) {
    properties.push(`  background: ${background.value.value};`);
  }
-  if (marginOuter.value.value) {
+  if (marginOuter.value.value !== undefined && marginOuter.value.value !== null) {
    properties.push(`  margin: ${marginOuter.value.value}${marginOuter.value.unit};`);
  }
-  if (paddingInner.value.value) {
+  if (paddingInner.value.value !== undefined && paddingInner.value.value !== null) {
    properties.push(`  padding: ${paddingInner.value.value}${paddingInner.value.unit};`);
  }

--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@ -622,9 +622,11 @@ const generatePreviewCss = () => {

  const properties = [];

+  // Always include margin with current values
  const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
  properties.push(`  margin: ${marginValue};`);

+  // Include background if it has a value
  if (background.value.value) {
    properties.push(`  background: ${background.value.value};`);
  }
--- a/src/components/editor/EditorPanel.vue
+++ b/src/components/editor/EditorPanel.vue
@ -34,8 +34,14 @@
      @click="activeTab = ''"
      title="Fermer le panneau"
    >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path
+          d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"
+        ></path>
      </svg>
    </button>

@ -75,6 +81,7 @@ const activeTab = inject('activeTab');
  display: flex;
  flex-direction: column;
  z-index: 2;
+  pointer-events: none;
 }

 nav {
@ -84,6 +91,7 @@ nav {
  display: flex;
  gap: 0.5rem;
  z-index: 2;
+  pointer-events: all;
 }

 .close-button {
@ -99,6 +107,7 @@ nav {
  background: transparent;
  border: none;
  cursor: pointer;
+  pointer-events: all;

  color: var(--color-interface-300);
  transition: color 0.2s ease;
@ -117,7 +126,7 @@ nav {
  flex: 1;
  overflow: hidden;
  position: relative;
-  left: calc(var(--panel-w)*-1);
+  left: calc(var(--panel-w) * -1);


  background-color: var(--color-panel-bg);
@ -125,6 +134,7 @@ nav {


  transition: left 0.3s var(--curve);
+  pointer-events: all;
 }

 .tab-content.open {
Author	SHA1	Message	Date
Julie Blanc	7f3aff948b	change colors	2025-12-10 15:18:12 +01:00
Julie Blanc	c6873ff7e0	color darker	2025-12-10 15:16:15 +01:00
Julie Blanc	8b5f1129f0	reverse colors	2025-12-10 15:15:43 +01:00
isUnknown	0eb4ed21e3	editor panel : pointer events all on close button	2025-12-10 13:38:34 +01:00
isUnknown	e4b3188aff	editor panel : pointer events none when closed	2025-12-10 13:37:55 +01:00
isUnknown	6b578012b7	feat: restrict element selection to text elements only - Remove containers (section, div, article, etc.) from selectable elements - Remove media elements (img, figure, ul, ol, table) from selection - Keep text elements: headings, paragraphs, links, formatting tags - Add figcaption as selectable, remove span 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2025-12-10 13:28:35 +01:00
isUnknown	0b511389da	style: update popup width and document styles - Change popup width from 800px to 71rem for better scaling - Add DM Sans as default body font - Set h1 font-size to 3rem - Reduce paragraph bottom margin from 10mm to 5mm - Add link styles (purple color, no underline) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2025-12-10 13:22:12 +01:00
isUnknown	d795c08ace	fix: show element-specific values in commented CSS preview - Preview now includes all field values, not filtering defaults - Commented CSS shows what would be applied with current field values - Applies to both ElementPopup and PagePopup 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2025-12-10 13:14:48 +01:00