@syncfusion/ej2-inplace-editor 25.1.35 → 26.1.35

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

@@ -44,7 +44,7 @@
   --color-sf-on-warning: 99, 52, 0;
   --color-sf-on-warning-container: 255, 220, 193;
   --color-sf-spreadsheet-gridline: 231, 224, 236;
-  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
   --color-sf-success-text: 0, 0, 0;
   --color-sf-warning-text: 0, 0, 0;
   --color-sf-info-text: 0, 0, 0;
@@ -54,29 +54,58 @@
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 @keyframes e-input-ripple {
   100% {
     opacity: 0;
-    transform: scale(4);
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@-webkit-keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
 @keyframes slideTopUp {
   from {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
   to {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
-/* stylelint-disable-line no-empty-source */ /*! calendar material3 theme variables */
+/* stylelint-disable-line no-empty-source */
+/*! calendar material3 theme variables */
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
-  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -93,12 +122,14 @@
 }
 
 .e-input-group .e-ddl-icon:not(:active)::after {
-  animation: none;
+  -webkit-animation: none;
+          animation: none;
 }
 
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   margin-top: 2px;
 }
 
@@ -119,7 +150,8 @@
 .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
   background: rgba(0, 0, 0, 0.0001);
   border-width: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-bottom: 0;
 }
 
@@ -212,19 +244,43 @@
 
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -363,6 +419,7 @@
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -373,8 +430,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -384,6 +443,7 @@
 }
 .e-inplaceeditor .e-editable-value-wrapper.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -416,6 +476,7 @@
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -426,8 +487,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -437,6 +500,7 @@
 }
 .e-inplaceeditor .e-editable-value-container.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -461,6 +525,7 @@
 }
 .e-inplaceeditor.e-overlay {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -526,7 +591,8 @@
 .e-inplaceeditor-tip .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: auto;
   right: 5px;
-  transform: translateX(-30%) translateY(-50%);
+  -webkit-transform: translateX(-30%) translateY(-50%);
+          transform: translateX(-30%) translateY(-50%);
 }
 .e-inplaceeditor .e-editable-form,
 .e-inplaceeditor-tip .e-editable-form {
@@ -554,6 +620,7 @@
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   visibility: visible;
@@ -590,7 +657,8 @@
 .e-inplaceeditor-tip.e-rtl .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: 5px;
   right: auto;
-  transform: translateX(30%) translateY(-50%);
+  -webkit-transform: translateX(30%) translateY(-50%);
+          transform: translateX(30%) translateY(-50%);
 }
 
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
@@ -642,19 +710,24 @@
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title {
   -ms-flex-line-pack: center;
       align-content: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
   font-size: 16px;
   font-weight: 400;
   height: 24px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 20px 20px 12px 20px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -667,6 +740,7 @@
   top: auto;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -720,6 +794,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-wrapper:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -737,6 +812,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-container:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -768,13 +844,16 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
   border-radius: 0;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content {
   border-radius: 20px;
   color: rgba(var(--color-sf-on-surface));
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-inner {
@@ -791,6 +870,7 @@
   border-radius: 8px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   color: rgba(var(--color-sf-on-surface));

package/styles/inplace-editor/material3.css

@@ -100,7 +100,7 @@
   --color-sf-on-warning: 99, 52, 0;
   --color-sf-on-warning-container: 255, 220, 193;
   --color-sf-spreadsheet-gridline: 231, 224, 236;
-  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
   --color-sf-success-text: 0, 0, 0;
   --color-sf-warning-text: 0, 0, 0;
   --color-sf-info-text: 0, 0, 0;
@@ -110,29 +110,58 @@
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes e-input-ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
 @keyframes e-input-ripple {
   100% {
     opacity: 0;
-    transform: scale(4);
+    -webkit-transform: scale(4);
+            transform: scale(4);
+  }
+}
+@-webkit-keyframes slideTopUp {
+  from {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
 @keyframes slideTopUp {
   from {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
   to {
-    transform: translate3d(0, 0, 0) scale(1);
+    -webkit-transform: translate3d(0, 0, 0) scale(1);
+            transform: translate3d(0, 0, 0) scale(1);
   }
 }
-/* stylelint-disable-line no-empty-source */ /*! calendar material3 theme variables */
+/* stylelint-disable-line no-empty-source */
+/*! calendar material3 theme variables */
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
-  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
-  transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform 300ms ease;
+  transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
+  transition: transform 300ms ease, -webkit-transform 300ms ease;
 }
 
 .e-dropdownbase .e-list-item.e-active.e-hover {
@@ -149,12 +178,14 @@
 }
 
 .e-input-group .e-ddl-icon:not(:active)::after {
-  animation: none;
+  -webkit-animation: none;
+          animation: none;
 }
 
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   margin-top: 2px;
 }
 
@@ -175,7 +206,8 @@
 .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
   background: rgba(0, 0, 0, 0.0001);
   border-width: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-bottom: 0;
 }
 
@@ -268,19 +300,43 @@
 
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
@@ -419,6 +475,7 @@
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -429,8 +486,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -440,6 +499,7 @@
 }
 .e-inplaceeditor .e-editable-value-wrapper.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -472,6 +532,7 @@
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon {
   bottom: 0;
   cursor: pointer;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: inherit;
@@ -482,8 +543,10 @@
   width: 20px;
 }
 .e-inplaceeditor .e-editable-value-container .e-editable-overlay-icon::before {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 14px;
@@ -493,6 +556,7 @@
 }
 .e-inplaceeditor .e-editable-value-container.e-editable-open {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -517,6 +581,7 @@
 }
 .e-inplaceeditor.e-overlay {
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
@@ -582,7 +647,8 @@
 .e-inplaceeditor-tip .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: auto;
   right: 5px;
-  transform: translateX(-30%) translateY(-50%);
+  -webkit-transform: translateX(-30%) translateY(-50%);
+          transform: translateX(-30%) translateY(-50%);
 }
 .e-inplaceeditor .e-editable-form,
 .e-inplaceeditor-tip .e-editable-form {
@@ -610,6 +676,7 @@
   opacity: 0.5;
   pointer-events: none;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   visibility: visible;
@@ -646,7 +713,8 @@
 .e-inplaceeditor-tip.e-rtl .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
   left: 5px;
   right: auto;
-  transform: translateX(30%) translateY(-50%);
+  -webkit-transform: translateX(30%) translateY(-50%);
+          transform: translateX(30%) translateY(-50%);
 }
 
 .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content,
@@ -698,19 +766,24 @@
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title {
   -ms-flex-line-pack: center;
       align-content: center;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
   font-size: 16px;
   font-weight: 400;
   height: 24px;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   padding: 20px 20px 12px 20px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-wrapper {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -723,6 +796,7 @@
   top: auto;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-container {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   padding: 20px;
@@ -776,6 +850,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-wrapper:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -793,6 +868,7 @@
   border-bottom: 0;
 }
 .e-inplaceeditor .e-editable-value-container:hover {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.08)), to(rgba(var(--color-sf-primary), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
   border-radius: 4px;
 }
@@ -824,13 +900,16 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
   border-radius: 0;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-tip-content {
   border-radius: 20px;
   color: rgba(var(--color-sf-on-surface));
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-arrow-tip-inner {
@@ -847,6 +926,7 @@
   border-radius: 8px;
 }
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border-bottom: 0;
   color: rgba(var(--color-sf-on-surface));