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);