img popup base

public/assets/css/pagedjs-interface.css

@@ -192,6 +192,29 @@
   font-family: sans-serif;
 }
 
+.block-image.element-hovered {
+  outline: 2px solid #0d996050 !important;
+  cursor: pointer !important;
+}
+
+.block-image.element-selected {
+  outline: 2px dashed #0d9960 !important;
+}
+
+.image-hover-label {
+  position: absolute;
+  background: #0d9960;
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  opacity: 0.3;
+  pointer-events: none;
+  z-index: 9999;
+  font-family: sans-serif;
+}
+
 /* Marks (to delete when merge in paged.js) */
 
 .pagedjs_marks-crop {

public/assets/css/src/_colors.scss

@@ -102,4 +102,18 @@
   --color-700: #6930f5;
   --color-800: #5d28e6;
   --color-900: #5223d6;
+}
+
+
+[data-color-type="image"]{
+  --color-050: #f0faf5;
+  --color-100: #d9f2e6;
+  --color-200: #b3e5cd;
+  --color-300: #7dd4b0;
+  --color-400: #43c08e;
+  --color-500: #1aad74;
+  --color-600: #0d9960;
+  --color-700: #0a8452;
+  --color-800: #087043;
+  --color-900: #065c35;
 }

public/assets/css/src/_toggle-setting.scss

@@ -30,7 +30,7 @@
 }
 
 .toggle-setting:checked + label{
-  background: var(--color-purple);
+  background: var(--color-700);
 
   &::after {
     transform: translateX(10px);

public/assets/css/style.css

@@ -189,6 +189,19 @@
   --color-900: #5223d6;
 }
 
+[data-color-type=image] {
+  --color-050: #f0faf5;
+  --color-100: #d9f2e6;
+  --color-200: #b3e5cd;
+  --color-300: #7dd4b0;
+  --color-400: #43c08e;
+  --color-500: #1aad74;
+  --color-600: #0d9960;
+  --color-700: #0a8452;
+  --color-800: #087043;
+  --color-900: #065c35;
+}
+
 body,
 html {
   padding: 0;
@@ -647,7 +660,7 @@ input[type=number] {
 }
 
 .toggle-setting:checked + label {
-  background: var(--color-purple);
+  background: var(--color-700);
 }
 .toggle-setting:checked + label::after {
   transform: translateX(10px);

public/assets/svg/image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2.9918 21C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918ZM20 15V5H4V19L14 9L20 15ZM20 17.8284L14 11.8284L6.82843 19H20V17.8284ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"/></svg>