@syncfusion/ej2-image-editor 28.2.3 → 29.1.33

package/styles/image-editor/bootstrap.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;
@@ -678,6 +685,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: #e6e6e6;
 }

package/styles/image-editor/bootstrap4.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: #e9ecef;
 }
@@ -683,10 +694,10 @@
   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: #545b62 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785) !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: #545b62 !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn.e-selected-btn {
   background: #495057 !important; /* stylelint-disable-line declaration-no-important */
@@ -708,15 +719,15 @@
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background: #5b636a;
+  background: rgb(91.452360515, 99.0733905579, 105.847639485);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
-  -webkit-box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important;
-          box-shadow: 0 0 0 0.25em rgba(115, 122, 129, 0.5) !important; /* stylelint-disable-line declaration-no-important */
+  -webkit-box-shadow: 0 0 0 0.25em rgba(115.3599785408, 122.5070600858, 128.8600214592, 0.5) !important;
+          box-shadow: 0 0 0 0.25em rgba(115.3599785408, 122.5070600858, 128.8600214592, 0.5) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background: #545b62;
+  background: rgb(84.3605150215, 91.3905579399, 97.6394849785);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;

package/styles/image-editor/bootstrap5-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;
@@ -683,20 +690,24 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
-  background: #444c54;
+  background: rgb(68.0034482759, 75.85, 83.6965517241);
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
 }
 .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;
@@ -705,28 +716,28 @@
   background: inherit;
   border: none;
   margin-top: -1px;
-  background: #282d31;
+  background: rgb(26.177027027, 29.35, 32.522972973);
   color: #adb5bd;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn .e-caret-hide {
   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/image-editor/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/image-editor/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/image-editor/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/image-editor/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/image-editor/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/image-editor/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/image-editor/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/image-editor/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/image-editor/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/material-dark.css

@@ -419,6 +419,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;
@@ -698,17 +705,21 @@
   top: calc(50% + 60px);
 }
 
+.e-image-editor.e-control.e-readonly {
+  opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-image-editor {
-  background: #292929;
+  background: rgb(40.8, 40.8, 40.8);
 }
 .e-image-editor .e-contextual-toolbar-wrapper {
   background: #212121;
 }
 .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: #7d7d7d !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(125.44, 125.44, 125.44) !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: #7d7d7d !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgb(125.44, 125.44, 125.44) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
   color: #fff;
@@ -731,13 +742,13 @@
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
-  background: #878787;
+  background: rgb(134.92, 134.92, 134.92);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background: #7d7d7d;
+  background: rgb(125.44, 125.44, 125.44);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: #fff;

package/styles/image-editor/material.css

@@ -419,6 +419,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;
@@ -700,6 +707,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: #eee;
 }
@@ -707,10 +718,10 @@
   background: #fafafa;
 }
 .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: rgba(184, 184, 184, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584) !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: rgba(184, 184, 184, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
+  border-color: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
   color: #757575;
@@ -739,7 +750,7 @@
   color: rgba(0, 0, 0, 0.87);
 }
 .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
-  background: rgba(184, 184, 184, 0.9584);
+  background: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: rgba(0, 0, 0, 0.87);

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

@@ -404,6 +404,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;
@@ -720,6 +727,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: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));

package/styles/image-editor/material3.css

@@ -406,6 +406,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;
@@ -722,6 +729,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: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.14)), to(rgba(var(--color-sf-primary), 0.14))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.14), rgba(var(--color-sf-primary), 0.14)), rgba(var(--color-sf-surface));

package/styles/image-editor/tailwind-dark.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;
@@ -680,6 +687,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: #4b5563;
 }

package/styles/image-editor/tailwind.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;
@@ -680,6 +687,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: #e5e7eb;
 }