@syncfusion/ej2-image-editor 28.2.3 → 29.1.33

package/styles/bootstrap5-lite.css

@@ -403,6 +403,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -683,6 +690,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #dee2e6;
 }
@@ -690,13 +701,13 @@
   background: #f8f9fa;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper canvas {
-  border-color: #565e64 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(86.4, 93.6, 100) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper:focus canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper:focus canvas {
-  border-color: #565e64 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(86.4, 93.6, 100) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
-  background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
+  background: rgb(91.8, 99.45, 106.25) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn .e-icons {
   color: #fff;
@@ -712,21 +723,21 @@
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
-  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
-          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background: #565e64;
+  background: rgb(86.4, 93.6, 100);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
@@ -752,7 +763,7 @@
 }
 
 .e-dropdown-popup .e-selected-btn {
-  background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
+  background: rgb(91.8, 99.45, 106.25) !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-filter-canvas:focus,

package/styles/bootstrap5.3-lite.css

@@ -407,6 +407,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -687,6 +694,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-border-light);
 }

package/styles/bootstrap5.3.css

@@ -407,6 +407,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -687,6 +694,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-border-light);
 }

package/styles/bootstrap5.css

@@ -403,6 +403,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -683,6 +690,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #dee2e6;
 }
@@ -690,13 +701,13 @@
   background: #f8f9fa;
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item:hover .filter-wrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper canvas {
-  border-color: #565e64 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(86.4, 93.6, 100) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filterwrapper:focus canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item.e-selected .filter-wrapper:focus canvas {
-  border-color: #565e64 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(86.4, 93.6, 100) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
-  background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
+  background: rgb(91.8, 99.45, 106.25) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn .e-icons {
   color: #fff;
@@ -712,21 +723,21 @@
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:hover {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background: #5c636a;
+  background: rgb(91.8, 99.45, 106.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
-  -webkit-box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important;
-          box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5) !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5) !important;
+          box-shadow: 0 0 0 4px rgba(130.05, 137.7, 144.5, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background: #565e64;
+  background: rgb(86.4, 93.6, 100);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
@@ -752,7 +763,7 @@
 }
 
 .e-dropdown-popup .e-selected-btn {
-  background: #5c636a !important; /* stylelint-disable-line declaration-no-important */
+  background: rgb(91.8, 99.45, 106.25) !important; /* stylelint-disable-line declaration-no-important */
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-filter-canvas:focus,

package/styles/fabric-dark-lite.css

@@ -398,6 +398,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -679,6 +686,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1f;
 }

package/styles/fabric-dark.css

@@ -398,6 +398,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -679,6 +686,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1f;
 }

package/styles/fabric-lite.css

@@ -398,6 +398,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -681,6 +688,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #fff;
 }

package/styles/fabric.css

@@ -398,6 +398,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -681,6 +688,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #fff;
 }

package/styles/fluent-dark-lite.css

@@ -403,6 +403,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -686,6 +693,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1e;
 }

package/styles/fluent-dark.css

@@ -403,6 +403,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -686,6 +693,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #201f1e;
 }

package/styles/fluent-lite.css

@@ -403,6 +403,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -686,6 +693,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #faf9f8;
 }

package/styles/fluent.css

@@ -403,6 +403,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -686,6 +693,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #faf9f8;
 }

package/styles/fluent2-lite.css

@@ -410,6 +410,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -709,6 +716,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-content-bg-color-alt1);
 }

package/styles/fluent2.css

@@ -410,6 +410,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -709,6 +716,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-content-bg-color-alt1);
 }

package/styles/highcontrast-light-lite.css

@@ -397,6 +397,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -676,6 +683,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #fff;
 }

package/styles/highcontrast-light.css

@@ -397,6 +397,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -676,6 +683,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #fff;
 }

package/styles/highcontrast-lite.css

@@ -401,6 +401,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -684,6 +691,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #000;
 }

package/styles/highcontrast.css

@@ -401,6 +401,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -684,6 +691,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #000;
 }

package/styles/image-editor/_layout.scss

@@ -335,6 +335,13 @@
       & .e-toolbar-item {
         height: auto !important; /* stylelint-disable-line declaration-no-important */
 
+        & .filter-wrapper {
+          box-sizing: content-box;
+          & div {
+            text-align: center;
+          }
+        }
+
         & .filterwrapper canvas,
         & .filter-wrapper canvas {
           border: 2px solid transparent;
@@ -813,4 +820,8 @@
   .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
     top: calc(50% + 60px);
   }
+   
+  .e-image-editor.e-control.e-readonly {
+    opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+  }
 }

package/styles/image-editor/_material-dark-definition.scss

@@ -1,4 +1,6 @@
-$image-editor-background: lighten($grey-black, 16%) !default;
+@use 'sass:color';
+
+$image-editor-background: color.adjust($grey-black, $lightness: 16%) !default;
 $image-editor-border: 1px solid $grey-600 !default;
 $image-editor-toolbar-icon-color: $grey-dark-font !default;
 $img-editor-cp-preview-border-bottom-color: $grey-black !default;

package/styles/image-editor/_theme.scss

@@ -1,4 +1,6 @@
-@include export-module('image-editor-theme') {
+@use 'sass:color';
+
+@include export-module('image-editor-theme') {
   .e-image-editor {
     background: $image-editor-background;
 
@@ -83,7 +85,7 @@
               border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
             }
             @else if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-focus-bgcolor, 50%), $btn-focus-border-color, 15%), .5);
+              $color-rgba: rgba(color.mix(color.adjust($btn-focus-bgcolor, $lightness: 50%), $btn-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba !important; /* stylelint-disable-line declaration-no-important */
             }
             @else if $skin-name == 'bootstrap5' {

package/styles/image-editor/bds.css

@@ -507,6 +507,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -790,6 +797,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: var(--color-sf-border-secondary);
 }

package/styles/image-editor/bootstrap-dark.css

@@ -398,6 +398,13 @@
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
   height: auto !important; /* stylelint-disable-line declaration-no-important */
 }
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+.e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
+  text-align: center;
+}
 .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filterwrapper canvas, .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper canvas {
   border: 2px solid transparent;
   height: 100px;
@@ -677,6 +684,10 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
   background: #959595;
 }