@syncfusion/ej2-image-editor 28.2.3 → 29.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/README.md +1 -1
  2. package/dist/ej2-image-editor.umd.min.js +2 -2
  3. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-image-editor.es2015.js +220 -63
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +229 -72
  7. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  8. package/dist/global/ej2-image-editor.min.js +2 -2
  9. package/dist/global/ej2-image-editor.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +13 -13
  12. package/src/image-editor/action/draw.js +1 -1
  13. package/src/image-editor/action/filter.js +0 -15
  14. package/src/image-editor/action/selection.js +46 -3
  15. package/src/image-editor/action/transform.js +4 -1
  16. package/src/image-editor/base/image-editor.d.ts +3 -1
  17. package/src/image-editor/base/image-editor.js +110 -35
  18. package/src/image-editor/renderer/toolbar.js +68 -17
  19. package/styles/bds-lite.css +11 -0
  20. package/styles/bds.css +11 -0
  21. package/styles/bootstrap-dark-lite.css +11 -0
  22. package/styles/bootstrap-dark.css +11 -0
  23. package/styles/bootstrap-lite.css +11 -0
  24. package/styles/bootstrap.css +11 -0
  25. package/styles/bootstrap4-lite.css +17 -6
  26. package/styles/bootstrap4.css +17 -6
  27. package/styles/bootstrap5-dark-lite.css +23 -12
  28. package/styles/bootstrap5-dark.css +23 -12
  29. package/styles/bootstrap5-lite.css +20 -9
  30. package/styles/bootstrap5.3-lite.css +11 -0
  31. package/styles/bootstrap5.3.css +11 -0
  32. package/styles/bootstrap5.css +20 -9
  33. package/styles/fabric-dark-lite.css +11 -0
  34. package/styles/fabric-dark.css +11 -0
  35. package/styles/fabric-lite.css +11 -0
  36. package/styles/fabric.css +11 -0
  37. package/styles/fluent-dark-lite.css +11 -0
  38. package/styles/fluent-dark.css +11 -0
  39. package/styles/fluent-lite.css +11 -0
  40. package/styles/fluent.css +11 -0
  41. package/styles/fluent2-lite.css +11 -0
  42. package/styles/fluent2.css +11 -0
  43. package/styles/highcontrast-light-lite.css +11 -0
  44. package/styles/highcontrast-light.css +11 -0
  45. package/styles/highcontrast-lite.css +11 -0
  46. package/styles/highcontrast.css +11 -0
  47. package/styles/image-editor/_layout.scss +11 -0
  48. package/styles/image-editor/_material-dark-definition.scss +3 -1
  49. package/styles/image-editor/_theme.scss +4 -2
  50. package/styles/image-editor/bds.css +11 -0
  51. package/styles/image-editor/bootstrap-dark.css +11 -0
  52. package/styles/image-editor/bootstrap.css +11 -0
  53. package/styles/image-editor/bootstrap4.css +17 -6
  54. package/styles/image-editor/bootstrap5-dark.css +23 -12
  55. package/styles/image-editor/bootstrap5.3.css +11 -0
  56. package/styles/image-editor/bootstrap5.css +20 -9
  57. package/styles/image-editor/fabric-dark.css +11 -0
  58. package/styles/image-editor/fabric.css +11 -0
  59. package/styles/image-editor/fluent-dark.css +11 -0
  60. package/styles/image-editor/fluent.css +11 -0
  61. package/styles/image-editor/fluent2.css +11 -0
  62. package/styles/image-editor/highcontrast-light.css +11 -0
  63. package/styles/image-editor/highcontrast.css +11 -0
  64. package/styles/image-editor/material-dark.css +16 -5
  65. package/styles/image-editor/material.css +14 -3
  66. package/styles/image-editor/material3-dark.css +11 -0
  67. package/styles/image-editor/material3.css +11 -0
  68. package/styles/image-editor/tailwind-dark.css +11 -0
  69. package/styles/image-editor/tailwind.css +11 -0
  70. package/styles/image-editor/tailwind3.css +11 -0
  71. package/styles/material-dark-lite.css +16 -5
  72. package/styles/material-dark.css +16 -5
  73. package/styles/material-lite.css +14 -3
  74. package/styles/material.css +14 -3
  75. package/styles/material3-dark-lite.css +11 -0
  76. package/styles/material3-dark.css +11 -0
  77. package/styles/material3-lite.css +11 -0
  78. package/styles/material3.css +11 -0
  79. package/styles/tailwind-dark-lite.css +11 -0
  80. package/styles/tailwind-dark.css +11 -0
  81. package/styles/tailwind-lite.css +11 -0
  82. package/styles/tailwind.css +11 -0
  83. package/styles/tailwind3-lite.css +11 -0
  84. package/styles/tailwind3.css +11 -0
package/styles/image-editor/tailwind3.css CHANGED
@@ -402,6 +402,13 @@
402
402
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
403
403
  height: auto !important; /* stylelint-disable-line declaration-no-important */
404
404
  }
405
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
406
+ -webkit-box-sizing: content-box;
407
+ box-sizing: content-box;
408
+ }
409
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
410
+ text-align: center;
411
+ }
405
412
  .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 {
406
413
  border: 2px solid transparent;
407
414
  height: 100px;
@@ -684,6 +691,10 @@
684
691
  top: calc(50% + 60px);
685
692
  }
686
693
 
694
+ .e-image-editor.e-control.e-readonly {
695
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
696
+ }
697
+
687
698
  .e-image-editor {
688
699
  background: var(--color-sf-content-bg-color);
689
700
  }
package/styles/material-dark-lite.css CHANGED
@@ -419,6 +419,13 @@
419
419
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
420
420
  height: auto !important; /* stylelint-disable-line declaration-no-important */
421
421
  }
422
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
423
+ -webkit-box-sizing: content-box;
424
+ box-sizing: content-box;
425
+ }
426
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
427
+ text-align: center;
428
+ }
422
429
  .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 {
423
430
  border: 2px solid transparent;
424
431
  height: 100px;
@@ -698,17 +705,21 @@
698
705
  top: calc(50% + 60px);
699
706
  }
700
707
 
708
+ .e-image-editor.e-control.e-readonly {
709
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
710
+ }
711
+
701
712
  .e-image-editor {
702
- background: #292929;
713
+ background: rgb(40.8, 40.8, 40.8);
703
714
  }
704
715
  .e-image-editor .e-contextual-toolbar-wrapper {
705
716
  background: #212121;
706
717
  }
707
718
  .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 {
708
- border-color: #7d7d7d !important; /* stylelint-disable-line declaration-no-important */
719
+ border-color: rgb(125.44, 125.44, 125.44) !important; /* stylelint-disable-line declaration-no-important */
709
720
  }
710
721
  .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 {
711
- border-color: #7d7d7d !important; /* stylelint-disable-line declaration-no-important */
722
+ border-color: rgb(125.44, 125.44, 125.44) !important; /* stylelint-disable-line declaration-no-important */
712
723
  }
713
724
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
714
725
  color: #fff;
@@ -731,13 +742,13 @@
731
742
  color: #fff;
732
743
  }
733
744
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
734
- background: #878787;
745
+ background: rgb(134.92, 134.92, 134.92);
735
746
  -webkit-box-shadow: none;
736
747
  box-shadow: none;
737
748
  color: #fff;
738
749
  }
739
750
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
740
- background: #7d7d7d;
751
+ background: rgb(125.44, 125.44, 125.44);
741
752
  -webkit-box-shadow: none;
742
753
  box-shadow: none;
743
754
  color: #fff;
package/styles/material-dark.css CHANGED
@@ -419,6 +419,13 @@
419
419
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
420
420
  height: auto !important; /* stylelint-disable-line declaration-no-important */
421
421
  }
422
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
423
+ -webkit-box-sizing: content-box;
424
+ box-sizing: content-box;
425
+ }
426
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
427
+ text-align: center;
428
+ }
422
429
  .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 {
423
430
  border: 2px solid transparent;
424
431
  height: 100px;
@@ -698,17 +705,21 @@
698
705
  top: calc(50% + 60px);
699
706
  }
700
707
 
708
+ .e-image-editor.e-control.e-readonly {
709
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
710
+ }
711
+
701
712
  .e-image-editor {
702
- background: #292929;
713
+ background: rgb(40.8, 40.8, 40.8);
703
714
  }
704
715
  .e-image-editor .e-contextual-toolbar-wrapper {
705
716
  background: #212121;
706
717
  }
707
718
  .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 {
708
- border-color: #7d7d7d !important; /* stylelint-disable-line declaration-no-important */
719
+ border-color: rgb(125.44, 125.44, 125.44) !important; /* stylelint-disable-line declaration-no-important */
709
720
  }
710
721
  .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 {
711
- border-color: #7d7d7d !important; /* stylelint-disable-line declaration-no-important */
722
+ border-color: rgb(125.44, 125.44, 125.44) !important; /* stylelint-disable-line declaration-no-important */
712
723
  }
713
724
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
714
725
  color: #fff;
@@ -731,13 +742,13 @@
731
742
  color: #fff;
732
743
  }
733
744
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:focus {
734
- background: #878787;
745
+ background: rgb(134.92, 134.92, 134.92);
735
746
  -webkit-box-shadow: none;
736
747
  box-shadow: none;
737
748
  color: #fff;
738
749
  }
739
750
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
740
- background: #7d7d7d;
751
+ background: rgb(125.44, 125.44, 125.44);
741
752
  -webkit-box-shadow: none;
742
753
  box-shadow: none;
743
754
  color: #fff;
package/styles/material-lite.css CHANGED
@@ -419,6 +419,13 @@
419
419
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
420
420
  height: auto !important; /* stylelint-disable-line declaration-no-important */
421
421
  }
422
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
423
+ -webkit-box-sizing: content-box;
424
+ box-sizing: content-box;
425
+ }
426
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
427
+ text-align: center;
428
+ }
422
429
  .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 {
423
430
  border: 2px solid transparent;
424
431
  height: 100px;
@@ -700,6 +707,10 @@
700
707
  top: calc(50% + 60px);
701
708
  }
702
709
 
710
+ .e-image-editor.e-control.e-readonly {
711
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
712
+ }
713
+
703
714
  .e-image-editor {
704
715
  background: #eee;
705
716
  }
@@ -707,10 +718,10 @@
707
718
  background: #fafafa;
708
719
  }
709
720
  .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 {
710
- border-color: rgba(184, 184, 184, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
721
+ border-color: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
711
722
  }
712
723
  .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 {
713
- border-color: rgba(184, 184, 184, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
724
+ border-color: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
714
725
  }
715
726
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
716
727
  color: #757575;
@@ -739,7 +750,7 @@
739
750
  color: rgba(0, 0, 0, 0.87);
740
751
  }
741
752
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
742
- background: rgba(184, 184, 184, 0.9584);
753
+ background: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584);
743
754
  -webkit-box-shadow: none;
744
755
  box-shadow: none;
745
756
  color: rgba(0, 0, 0, 0.87);
package/styles/material.css CHANGED
@@ -419,6 +419,13 @@
419
419
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
420
420
  height: auto !important; /* stylelint-disable-line declaration-no-important */
421
421
  }
422
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
423
+ -webkit-box-sizing: content-box;
424
+ box-sizing: content-box;
425
+ }
426
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
427
+ text-align: center;
428
+ }
422
429
  .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 {
423
430
  border: 2px solid transparent;
424
431
  height: 100px;
@@ -700,6 +707,10 @@
700
707
  top: calc(50% + 60px);
701
708
  }
702
709
 
710
+ .e-image-editor.e-control.e-readonly {
711
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
712
+ }
713
+
703
714
  .e-image-editor {
704
715
  background: #eee;
705
716
  }
@@ -707,10 +718,10 @@
707
718
  background: #fafafa;
708
719
  }
709
720
  .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 {
710
- border-color: rgba(184, 184, 184, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
721
+ border-color: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
711
722
  }
712
723
  .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 {
713
- border-color: rgba(184, 184, 184, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
724
+ border-color: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584) !important; /* stylelint-disable-line declaration-no-important */
714
725
  }
715
726
  .e-image-editor .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-icons {
716
727
  color: #757575;
@@ -739,7 +750,7 @@
739
750
  color: rgba(0, 0, 0, 0.87);
740
751
  }
741
752
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn:active {
742
- background: rgba(184, 184, 184, 0.9584);
753
+ background: rgba(183.5116545663, 183.5116545663, 183.5116545663, 0.9584);
743
754
  -webkit-box-shadow: none;
744
755
  box-shadow: none;
745
756
  color: rgba(0, 0, 0, 0.87);
package/styles/material3-dark-lite.css CHANGED
@@ -404,6 +404,13 @@
404
404
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
405
405
  height: auto !important; /* stylelint-disable-line declaration-no-important */
406
406
  }
407
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
408
+ -webkit-box-sizing: content-box;
409
+ box-sizing: content-box;
410
+ }
411
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
412
+ text-align: center;
413
+ }
407
414
  .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 {
408
415
  border: 2px solid transparent;
409
416
  height: 100px;
@@ -720,6 +727,10 @@
720
727
  top: calc(50% + 60px);
721
728
  }
722
729
 
730
+ .e-image-editor.e-control.e-readonly {
731
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
732
+ }
733
+
723
734
  .e-image-editor {
724
735
  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));
725
736
  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/material3-dark.css CHANGED
@@ -404,6 +404,13 @@
404
404
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
405
405
  height: auto !important; /* stylelint-disable-line declaration-no-important */
406
406
  }
407
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
408
+ -webkit-box-sizing: content-box;
409
+ box-sizing: content-box;
410
+ }
411
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
412
+ text-align: center;
413
+ }
407
414
  .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 {
408
415
  border: 2px solid transparent;
409
416
  height: 100px;
@@ -720,6 +727,10 @@
720
727
  top: calc(50% + 60px);
721
728
  }
722
729
 
730
+ .e-image-editor.e-control.e-readonly {
731
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
732
+ }
733
+
723
734
  .e-image-editor {
724
735
  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));
725
736
  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/material3-lite.css CHANGED
@@ -406,6 +406,13 @@
406
406
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
407
407
  height: auto !important; /* stylelint-disable-line declaration-no-important */
408
408
  }
409
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
410
+ -webkit-box-sizing: content-box;
411
+ box-sizing: content-box;
412
+ }
413
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
414
+ text-align: center;
415
+ }
409
416
  .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 {
410
417
  border: 2px solid transparent;
411
418
  height: 100px;
@@ -722,6 +729,10 @@
722
729
  top: calc(50% + 60px);
723
730
  }
724
731
 
732
+ .e-image-editor.e-control.e-readonly {
733
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
734
+ }
735
+
725
736
  .e-image-editor {
726
737
  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));
727
738
  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/material3.css CHANGED
@@ -406,6 +406,13 @@
406
406
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
407
407
  height: auto !important; /* stylelint-disable-line declaration-no-important */
408
408
  }
409
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
410
+ -webkit-box-sizing: content-box;
411
+ box-sizing: content-box;
412
+ }
413
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
414
+ text-align: center;
415
+ }
409
416
  .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 {
410
417
  border: 2px solid transparent;
411
418
  height: 100px;
@@ -722,6 +729,10 @@
722
729
  top: calc(50% + 60px);
723
730
  }
724
731
 
732
+ .e-image-editor.e-control.e-readonly {
733
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
734
+ }
735
+
725
736
  .e-image-editor {
726
737
  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));
727
738
  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/tailwind-dark-lite.css CHANGED
@@ -397,6 +397,13 @@
397
397
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
398
398
  height: auto !important; /* stylelint-disable-line declaration-no-important */
399
399
  }
400
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
401
+ -webkit-box-sizing: content-box;
402
+ box-sizing: content-box;
403
+ }
404
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
405
+ text-align: center;
406
+ }
400
407
  .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 {
401
408
  border: 2px solid transparent;
402
409
  height: 100px;
@@ -680,6 +687,10 @@
680
687
  top: calc(50% + 60px);
681
688
  }
682
689
 
690
+ .e-image-editor.e-control.e-readonly {
691
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
692
+ }
693
+
683
694
  .e-image-editor {
684
695
  background: #4b5563;
685
696
  }
package/styles/tailwind-dark.css CHANGED
@@ -397,6 +397,13 @@
397
397
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
398
398
  height: auto !important; /* stylelint-disable-line declaration-no-important */
399
399
  }
400
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
401
+ -webkit-box-sizing: content-box;
402
+ box-sizing: content-box;
403
+ }
404
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
405
+ text-align: center;
406
+ }
400
407
  .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 {
401
408
  border: 2px solid transparent;
402
409
  height: 100px;
@@ -680,6 +687,10 @@
680
687
  top: calc(50% + 60px);
681
688
  }
682
689
 
690
+ .e-image-editor.e-control.e-readonly {
691
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
692
+ }
693
+
683
694
  .e-image-editor {
684
695
  background: #4b5563;
685
696
  }
package/styles/tailwind-lite.css CHANGED
@@ -397,6 +397,13 @@
397
397
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
398
398
  height: auto !important; /* stylelint-disable-line declaration-no-important */
399
399
  }
400
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
401
+ -webkit-box-sizing: content-box;
402
+ box-sizing: content-box;
403
+ }
404
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
405
+ text-align: center;
406
+ }
400
407
  .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 {
401
408
  border: 2px solid transparent;
402
409
  height: 100px;
@@ -680,6 +687,10 @@
680
687
  top: calc(50% + 60px);
681
688
  }
682
689
 
690
+ .e-image-editor.e-control.e-readonly {
691
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
692
+ }
693
+
683
694
  .e-image-editor {
684
695
  background: #e5e7eb;
685
696
  }
package/styles/tailwind.css CHANGED
@@ -397,6 +397,13 @@
397
397
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
398
398
  height: auto !important; /* stylelint-disable-line declaration-no-important */
399
399
  }
400
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
401
+ -webkit-box-sizing: content-box;
402
+ box-sizing: content-box;
403
+ }
404
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
405
+ text-align: center;
406
+ }
400
407
  .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 {
401
408
  border: 2px solid transparent;
402
409
  height: 100px;
@@ -680,6 +687,10 @@
680
687
  top: calc(50% + 60px);
681
688
  }
682
689
 
690
+ .e-image-editor.e-control.e-readonly {
691
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
692
+ }
693
+
683
694
  .e-image-editor {
684
695
  background: #e5e7eb;
685
696
  }
package/styles/tailwind3-lite.css CHANGED
@@ -402,6 +402,13 @@
402
402
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
403
403
  height: auto !important; /* stylelint-disable-line declaration-no-important */
404
404
  }
405
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
406
+ -webkit-box-sizing: content-box;
407
+ box-sizing: content-box;
408
+ }
409
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
410
+ text-align: center;
411
+ }
405
412
  .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 {
406
413
  border: 2px solid transparent;
407
414
  height: 100px;
@@ -684,6 +691,10 @@
684
691
  top: calc(50% + 60px);
685
692
  }
686
693
 
694
+ .e-image-editor.e-control.e-readonly {
695
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
696
+ }
697
+
687
698
  .e-image-editor {
688
699
  background: var(--color-sf-content-bg-color);
689
700
  }
package/styles/tailwind3.css CHANGED
@@ -402,6 +402,13 @@
402
402
  .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item {
403
403
  height: auto !important; /* stylelint-disable-line declaration-no-important */
404
404
  }
405
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper {
406
+ -webkit-box-sizing: content-box;
407
+ box-sizing: content-box;
408
+ }
409
+ .e-image-editor .e-contextual-toolbar-wrapper .e-toolbar-item .filter-wrapper div {
410
+ text-align: center;
411
+ }
405
412
  .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 {
406
413
  border: 2px solid transparent;
407
414
  height: 100px;
@@ -684,6 +691,10 @@
684
691
  top: calc(50% + 60px);
685
692
  }
686
693
 
694
+ .e-image-editor.e-control.e-readonly {
695
+ opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
696
+ }
697
+
687
698
  .e-image-editor {
688
699
  background: var(--color-sf-content-bg-color);
689
700
  }