@syncfusion/blazor-themes 24.1.41 → 24.1.44

package/SCSS-Themes/grids/grid/bootstrap.scss

@@ -6861,6 +6861,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/bootstrap4.scss

@@ -6866,6 +6866,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/bootstrap5-dark.scss

@@ -6859,6 +6859,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/bootstrap5.scss

@@ -6859,6 +6859,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/fabric-dark.scss

@@ -6856,6 +6856,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/fabric.scss

@@ -6856,6 +6856,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/fluent-dark.scss

@@ -6851,6 +6851,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/fluent.scss

@@ -6851,6 +6851,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/highcontrast.scss

@@ -6856,6 +6856,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/material-dark.scss

@@ -280,7 +280,7 @@ $grid-conent-font-opacity: .87 !default;
 $grid-row-selection-bg-color: rgb(122 108 108) !default;
 $grid-row-selection-color: $grey-dark-font !default;
 $grid-hover-bg-color: rgb(89 86 86) !default;
-$grid-cell-selection-bg-color: rgba($grey-white, .28) !default;
+$grid-cell-selection-bg-color: rgb(122 108 108) !default;
 $grid-cell-selection-color: $grey-dark-font !default;
 $grid-filterbar-input-border-width: 0 0 2px 0 !default;
 $grid-filterbarcell-border-width: 1px 0 0 !default;
@@ -6857,6 +6857,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/material.scss

@@ -6855,6 +6855,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/material3-dark.scss

@@ -6866,6 +6866,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/material3.scss

@@ -6866,6 +6866,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/tailwind-dark.scss

@@ -6866,6 +6866,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/grids/grid/tailwind.scss

@@ -6866,6 +6866,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;

package/SCSS-Themes/highcontrast.scss

@@ -19672,9 +19672,6 @@ $ddl-bigger-small-list-header-font-size: 14px !default;
       #{if(&, '&', '*')} .e-fixed-head {
         position: absolute;
         top: 0;
-        .e-rtl #{if(&, '&', '*')} {
-          left: 33px;
-        }
       }
     }
   }
@@ -24323,12 +24320,22 @@ $btn-focus-box-shadow: none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
 
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
+
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24379,12 +24386,22 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
+
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24442,12 +24459,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24505,12 +24530,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24568,12 +24601,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24631,12 +24672,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
 
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -58858,6 +58907,11 @@ $ddt-remains-count-padding-top: 6px !default;
       }
     }
 
+    &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
+    &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
+      display: flex;
+    }
+
     .e-chips-wrapper {
       width: 100%;
     }
@@ -82634,6 +82688,15 @@ margin: $grid-group-animator-cell-margin;
       color: $grid-cell-selection-color;
     }
 
+    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
+    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
+      @if $grid-skin == 'material3' {
+        background-color: rgba($primary-container, 1);
+      }
+    }
+
     .e-filterbarcell,
     .e-filterbarcelldisabled {
       background-color: $grid-header-bg-color;
@@ -88980,6 +89043,20 @@ $btn-flat-primary-path-arc: none;
   }
 }
 
+.e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
+  fill: $btn-outline-color;
+  stroke: $btn-outline-color;
+}
+
+.e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
+  fill: $btn-color;
+  stroke: $btn-color;
+}
+
+.e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
+  stroke: $btn-outline-color;
+}
+
 
 
 
@@ -121308,18 +121385,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
     }
   }
   .e-ie-straighten-value-span,
-  .e-ie-straighten-span {
-    font-size: 14px;
+  .e-ie-straighten-span,
+  .e-ie-toolbar-straighten {
+    font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
     padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
     height: auto;
-    @if $skin-name == 'Material3' {
-      margin-left: 8px;
-      padding-right: 2px;
-    }
+    margin-left: 8px;
+    padding-right: 2px;
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -121339,6 +121415,10 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
     }
   }
 
+  .e-ie-finetune-value-span {
+    top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
     @if $skin-name == 'Material3' {
       height: 22px !important; /* stylelint-disable-line declaration-no-important */

package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss

@@ -505,18 +505,17 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
     }
   }
   .e-ie-straighten-value-span,
-  .e-ie-straighten-span {
-    font-size: 14px;
+  .e-ie-straighten-span,
+  .e-ie-toolbar-straighten {
+    font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
     padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
     height: auto;
-    @if $skin-name == 'Material3' {
-      margin-left: 8px;
-      padding-right: 2px;
-    }
+    margin-left: 8px;
+    padding-right: 2px;
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -536,6 +535,10 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
     }
   }
 
+  .e-ie-finetune-value-span {
+    top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
     @if $skin-name == 'Material3' {
       height: 22px !important; /* stylelint-disable-line declaration-no-important */

package/SCSS-Themes/image-editor/image-editor/bootstrap.scss

@@ -505,18 +505,17 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
     }
   }
   .e-ie-straighten-value-span,
-  .e-ie-straighten-span {
-    font-size: 14px;
+  .e-ie-straighten-span,
+  .e-ie-toolbar-straighten {
+    font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
     padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
     height: auto;
-    @if $skin-name == 'Material3' {
-      margin-left: 8px;
-      padding-right: 2px;
-    }
+    margin-left: 8px;
+    padding-right: 2px;
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -536,6 +535,10 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
     }
   }
 
+  .e-ie-finetune-value-span {
+    top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
     @if $skin-name == 'Material3' {
       height: 22px !important; /* stylelint-disable-line declaration-no-important */

package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss

@@ -505,18 +505,17 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
     }
   }
   .e-ie-straighten-value-span,
-  .e-ie-straighten-span {
-    font-size: 14px;
+  .e-ie-straighten-span,
+  .e-ie-toolbar-straighten {
+    font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
     padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
     height: auto;
-    @if $skin-name == 'Material3' {
-      margin-left: 8px;
-      padding-right: 2px;
-    }
+    margin-left: 8px;
+    padding-right: 2px;
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -536,6 +535,10 @@ $image-editor-device-slider-handler: calc(50% - 7px) !default;
     }
   }
 
+  .e-ie-finetune-value-span {
+    top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
     @if $skin-name == 'Material3' {
       height: 22px !important; /* stylelint-disable-line declaration-no-important */

package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss

@@ -505,18 +505,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
     }
   }
   .e-ie-straighten-value-span,
-  .e-ie-straighten-span {
-    font-size: 14px;
+  .e-ie-straighten-span,
+  .e-ie-toolbar-straighten {
+    font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
     padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
     height: auto;
-    @if $skin-name == 'Material3' {
-      margin-left: 8px;
-      padding-right: 2px;
-    }
+    margin-left: 8px;
+    padding-right: 2px;
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -536,6 +535,10 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
     }
   }
 
+  .e-ie-finetune-value-span {
+    top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
     @if $skin-name == 'Material3' {
       height: 22px !important; /* stylelint-disable-line declaration-no-important */

package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss

@@ -505,18 +505,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
     }
   }
   .e-ie-straighten-value-span,
-  .e-ie-straighten-span {
-    font-size: 14px;
+  .e-ie-straighten-span,
+  .e-ie-toolbar-straighten {
+    font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
     padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
     height: auto;
-    @if $skin-name == 'Material3' {
-      margin-left: 8px;
-      padding-right: 2px;
-    }
+    margin-left: 8px;
+    padding-right: 2px;
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -536,6 +535,10 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
     }
   }
 
+  .e-ie-finetune-value-span {
+    top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
     @if $skin-name == 'Material3' {
       height: 22px !important; /* stylelint-disable-line declaration-no-important */