@syncfusion/ej2-pdfviewer 17.3.58-4568 → 17.3.60-4568

package/styles/pdfviewer/_theme.scss

@@ -140,6 +140,30 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-bigger .e-pv-mobile-annotation-toolbar .e-pv-tbar-btn {
+    @if $theme-name=='fluent2' {
+      margin-left: 8px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-bigger .e-pv-mobile-annotation-toolbar .e-toolbar-item {
+    @if $theme-name=='fluent2' {
+      padding: 4px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-dropdown-popup.e-lib.e-popup.e-control.e-pv-handwritten-popup.e-popup-open ul .e-primary{
+    @if $theme-name == 'fluent2' {
+      padding: 0 16px;
+    }
+  }
+
+  .e-pv-handwritten-popup ul .e-item {
+    @if $theme-name=='fluent2' {
+      padding: 2px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-pv-mobilescroll-container {
     @if $skin-name == 'Material3' {
       background: $pv-background;
@@ -168,6 +192,19 @@ $lg-desktop: 1399.98;
     box-shadow: $pv-page-div-focus-style;
   }
 
+  .e-pv-diagram-resize-handle{
+    @if $theme-name == 'fluent2' {
+      fill: $pv-selection-touch-element-background-color !important/* stylelint-disable-line declaration-no-important */
+    }
+  }
+  
+  .e-pv-diagram-border,
+  .e-pv-diagram-resize-handle {
+    @if $theme-name=='fluent2' {
+      stroke: $pv-selection-touch-element-background-color !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-pv-viewer-container.e-focused
   {
     box-shadow: $pv-page-div-focus-style inset;
@@ -209,6 +246,18 @@ $lg-desktop: 1399.98;
     width: $pv-zoom-dropdown-width;
   }
 
+  .e-pv-zoom-drop-down-container .e-control.e-combobox{
+    @if $theme-name == 'fluent2' {
+      padding-left: 11px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-toolbar.e-pv-toolbar .e-pv-zoom-drop-down-container .e-control-container {
+    @if $theme-name == 'fluent2' {
+      width: 86px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-toolbar.e-pv-toolbar .e-toolbar-pop .e-pv-zoom-drop-down-container {
     display: block;
     padding-left: 10px;
@@ -396,12 +445,18 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item {
+    @if $theme-name == 'fluent2'{
+      padding-top: 2px;
+    }
+  }
+
   .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
   .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
-    @if $skin-name == 'FluentUI' {
+    @if ($skin-name == 'FluentUI') {
       padding-bottom: 2px;
     }
-    @else if $skin-name == 'Material3' {
+    @else if $skin-name == 'Material3'{
       padding: 0 !important;/* stylelint-disable-line declaration-no-important */
     }
     @else {
@@ -556,9 +611,18 @@ $lg-desktop: 1399.98;
     @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
       padding-top: 0;
     }
+    @if $theme-name == 'fluent2'{
+      font-size: $pv-toolbar-total-page-number-font-size !important;/* stylelint-disable-line declaration-no-important */
+    }
     position: relative;
   }
 
+  .e-pv-match-case-container span:not(.e-label):not(.e-icons) {
+    @if $theme-name == 'fluent2' {
+      margin-top: -5px;
+    }
+  }
+
   .e-pv-total-page {
     color: $pv-toolbar-total-page-font-color;
     font-size: inherit;
@@ -586,6 +650,19 @@ $lg-desktop: 1399.98;
     padding: $pv-toolbar-zoom-drop-down-padding;
   }
 
+  .e-pv-fontfamily-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input{
+    width: $pv-thumbnail-width;
+    @if $theme-name == 'fluent2' {
+      height: $pv-annotation-drop-down-height;
+    }
+  }
+
+  .e-pv-fontsize-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input {
+    @if $theme-name == 'fluent2' {
+      height: $pv-annotation-drop-down-height;
+    }
+  }
+
   .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
@@ -685,14 +762,20 @@ $lg-desktop: 1399.98;
   }
 
   .e-input-group.e-control-wrapper.e-pv-current-page-box:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
-    @if $skin-name == 'Material3' {
+    @if $skin-name=='Material3' {
       border-bottom: $pv-current-page-border;
     }
+
+    @else if $theme-name=='fluent2' {
+      border: $pv-current-page-border;
+      border-bottom: $pv-current-page-border-bottom;
+    }
+
     @else {
       border: $pv-current-page-border;
     }
     border-radius: $pv-current-page-border-radius;
-    @if $skin-name == 'bootstrap5' {
+    @if $skin-name=='bootstrap5' {
       box-shadow: none;
     }
   }
@@ -755,6 +838,12 @@ $lg-desktop: 1399.98;
     border-top: $pv-corrupted-dialog-footer-border-top;
   }
 
+  .e-pv-notification-large-content.e-dialog .e-footer-content{
+    @if $theme-name == 'fluent2' {
+      padding-top: 8px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-pv-corrupted-popup.e-dialog .e-dlg-content {
     @if $skin-name != 'Material3' {
       padding-bottom: $pv-corrupted-dialog-pop-content-padding-bottom;
@@ -961,6 +1050,9 @@ $lg-desktop: 1399.98;
     @if $skin-name == 'FluentUI' {
       padding: 8px;
     }
+    @if $theme-name == 'fluent2' {
+      margin-top: 10px;
+    }
   }
 
   .e-bigger .e-pv-sidebar-title {
@@ -992,7 +1084,12 @@ $lg-desktop: 1399.98;
   }
 
   .e-pv-sidebar-toolbar {
-    background: $pv-sidebar-toolbar-background;
+    @if $theme-name == 'fluent2' {
+      background: $pv-sidebar-title-container-background;
+    }
+    @else{
+      background: $pv-sidebar-toolbar-background;
+    }
     border: $pv-sidebar-toolbar-border;
     border-width: $pv-sidebar-toolbar-border-width;
     bottom: $pv-sidebar-toolbar-bottom;
@@ -1175,6 +1272,12 @@ $lg-desktop: 1399.98;
     top: calc(-100% - 12px + ($pv-organize-anchor-node-border-width / 2));
   }
 
+  .e-pv-organize-buttondiv .e-pv-icon {
+    @if $theme-name=='fluent2' {
+      font-weight: normal;
+    }
+  }
+
   .e-pv-organize-anchor-node.e-pv-organize-node-selection-ring {
     border: $pv-organize-page-select-border;
     border-radius: 2px;
@@ -1961,6 +2064,9 @@ $lg-desktop: 1399.98;
       padding: 16px;
       width: 368px;
     }
+    @if $theme-name == 'fluent2' {
+      width: 368px;
+    }
   }
 
   .e-pv-search-input {
@@ -1968,6 +2074,18 @@ $lg-desktop: 1399.98;
     width: $pv-search-input-width;
   }
 
+  .e-bigger .e-input-group.e-pv-search-input-mobile .e-input {
+    @if $theme-name == 'fluent2' {
+      height: 28px;
+    }
+  }
+
+  .e-bigger .e-input-group.e-pv-search-input .e-input {
+    @if $theme-name == 'fluent2' {
+      height: 28px;
+    }
+  }
+
   .e-bigger .e-pv-search-input {
     @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
       height: $pv-search-input-height-big;
@@ -1990,7 +2108,7 @@ $lg-desktop: 1399.98;
 
   .e-pv-search-btn.e-btn {
     background-color: transparent;
-    @if $skin-name == 'bootstrap4' {
+    @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
       color: $pv-icon-color;
     }
     border: 0;
@@ -1998,7 +2116,7 @@ $lg-desktop: 1399.98;
     height: $pv-search-btn-height;
     margin-top: $pv-search-btn-margin-top;
     width: $pv-search-btn-width;
-    @if $skin-name == 'FluentUI' {
+    @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' or $theme-name == 'fluent2') {
       padding-bottom: 0;
       padding-left: 1px;
       padding-right: 1px;
@@ -2034,6 +2152,13 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-search-btn.e-btn:hover,
+  .e-pv-sidebar-toolbar .e-pv-tbar-btn:hover:not(:disabled) {
+    @if $theme-name == 'fluent2' {
+      background-color: var(--color-sf-secondary-bg-color-pressed);
+    }
+  }
+
   .e-pv-search-btn.e-btn:disabled {
     @if $skin-name == 'bootstrap4' {
       color: $pv-thumbnail-icon-disable-color;
@@ -2047,7 +2172,7 @@ $lg-desktop: 1399.98;
   .e-pv-search-bar:not(.e-rtl) .e-pv-next-search {
     margin-left: $pv-search-next-margin-left;
   }
-
+  
   .e-pv-search-bar.e-rtl .e-pv-prev-search {
     margin-right: $pv-search-prev-margin-left;
   }
@@ -2137,7 +2262,7 @@ $lg-desktop: 1399.98;
     border-bottom: 2px solid;
     margin-top: 0;
     padding-top: 5px;
-    @if $skin-name == 'bootstrap5' {
+    @if ($skin-name=='bootstrap5'or $theme-name=='fluent2') {
       margin-top: -4px;
       padding-top: 0;
     }
@@ -2164,7 +2289,7 @@ $lg-desktop: 1399.98;
   .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
     margin-top: 0;
     padding-top: 7px;
-    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $theme-name == 'fluent2' {
       padding-top: 0;
     }
     vertical-align: initial;
@@ -2183,7 +2308,9 @@ $lg-desktop: 1399.98;
     @if $skin-name != 'Material3' {
       background-color: $pv-annotation-opacity-popup-background-color;
     }
-    box-shadow: $pv-annotation-opacity-popup-box-shadow;
+    @if $theme-name != 'fluent2' {
+      box-shadow: $pv-annotation-opacity-popup-box-shadow;
+    }
     color: $pv-annotation-opacity-popup-color;
     height: auto;
     min-height: $pv-annotation-opacity-popup-min-height;
@@ -2296,9 +2423,14 @@ $lg-desktop: 1399.98;
 
   .e-pv-organize-total-page-button {
     float: left;
-    font-size: 12;
     font-weight: normal;
     color: $pv-toolbar-total-page-number-color;
+    @if $theme-name=='fluent2' {
+      font-size: 16;
+    }
+    @else {
+      font-size: 12;
+    }
   }
 
   .e-pdfviewer .e-pv-organize-window .e-footer-content .e-btn.e-flat:disabled{
@@ -2507,6 +2639,26 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item{
+    @if ($theme-name == 'fluent2') {
+      height: 32px;
+    }
+  }
+
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
+  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
+    @if ($theme-name == 'fluent2') {
+      margin-top: -4px;
+    }
+  }
+
+  .e-template.e-toolbar-item:not(.e-pv-shape-template-container) .e-pv-annotation-shapes-container,
+  .e-template.e-toolbar-item:not(.e-pv-calibrate-template-container) .e-pv-annotation-calibrate-container {
+    @if ($theme-name == 'fluent2') {
+      line-height: 28px;
+    }
+  }
+
   .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
   .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
     @if ($skin-name == 'bootstrap5') {
@@ -2601,6 +2753,10 @@ $lg-desktop: 1399.98;
     @if ($skin-name == 'Material3') {
       padding: 7px;
     }
+    @if ($theme-name == 'fluent2') {
+      width: 54px;
+      padding: 4px;
+    }
   }
 
   .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
@@ -2658,7 +2814,7 @@ $lg-desktop: 1399.98;
   .e-bigger .e-pv-scale-ratio-dest-unit-container,
   .e-bigger .e-pv-depth-input-container,
   .e-bigger .e-pv-depth-unit-container {
-    @if $skin-name == 'FluentUI' {
+    @if ($skin-name=='FluentUI'or $theme-name=='fluent2') {
       float: left;
       height: 40px;
     }
@@ -2681,11 +2837,20 @@ $lg-desktop: 1399.98;
   .e-pv-scale-ratio-dest-unit.e-btn,
   .e-pv-depth-unit.e-btn {
     padding: $pv-scale-ratio-win-drop-down-padding;
+    @if $theme-name == 'fluent2' {
+      height: $pv-toolbar-btn-height;
+    }
   }
 
   .e-pv-scale-unit-content {
     float: left;
     width: 33px;
+    @if $theme-name=='fluent2' {
+      width: 8px;
+      height: 20px;
+      font-weight: normal;
+      line-height: 20px;
+    }
   }
 
   .e-pv-scale-ratio-src-unit .e-caret,
@@ -2715,7 +2880,6 @@ $lg-desktop: 1399.98;
   .e-pv-properties-line-stroke-color-label,
   .e-pv-properties-line-opacity-label,
   .e-pv-properties-line-leader-length-label {
-    margin-bottom: 8px;
     @if ($skin-name == 'FluentUI') {
       font-weight: 600;
     }
@@ -2726,6 +2890,13 @@ $lg-desktop: 1399.98;
     @else {
       font-size: 14px;
     }
+    @if ($theme-name == 'fluent2') {
+      margin-bottom: 4px;
+    }
+    @else
+    {
+      margin-bottom: 8px;
+    }
   }
 
   .e-pv-properties-line-end-container,
@@ -2743,6 +2914,10 @@ $lg-desktop: 1399.98;
 
   .e-pv-properties-line-leader-length-container {
     margin-left: $pv-line-leader-length-margin-left;
+    @if ($theme-name == 'fluent2') {
+      margin-top: 10px;
+      width: $pv-scale-ratio-container-max-width;
+    }
   }
 
   .e-bigger .e-pv-properties-line-leader-length-container {
@@ -2786,6 +2961,9 @@ $lg-desktop: 1399.98;
   .e-pv-scale-ratio-dest-input,
   .e-pv-depth-input {
     max-width: $pv-scale-ratio-container-max-width;
+    @if $theme-name == 'fluent2' {
+      max-width: 176px;
+    }
   }
 
   .e-bigger .e-pv-scale-ratio-src-input,
@@ -2794,6 +2972,9 @@ $lg-desktop: 1399.98;
     @if $skin-name == 'FluentUI' {
       max-width: 248px;
     }
+    @if $theme-name == 'fluent2' {
+      max-width: 200px;
+    }
   }
 
   .e-pv-properties-line-start,
@@ -2831,6 +3012,9 @@ $lg-desktop: 1399.98;
       height: 40px;
       width: 248px;
     }
+    @if $theme-name == 'fluent2' {
+      height: 40px !important;/* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-pv-line-styles-container {
@@ -2918,6 +3102,9 @@ $lg-desktop: 1399.98;
     line-height: 0;
     padding: $pv-properties-line-style-padding;
     white-space: pre;
+    @if ($theme-name =='fluent2'){
+      padding-top: 11px;
+    }
   }
 
   .e-pv-properties-line-start.e-btn .e-caret,
@@ -2925,6 +3112,9 @@ $lg-desktop: 1399.98;
     @if $skin-name == 'bootstrap4' {
       display: block;
     }
+    @else if $theme-name == 'fluent2' {
+      display: block;
+    }
     @else {
       display: inline;
     }
@@ -2951,6 +3141,9 @@ $lg-desktop: 1399.98;
       width: 155px;
       padding-top: 6px;
     }
+    @else if ($theme-name == 'fluent2'){
+      width: 128px;
+    }
     @else {
       width: 138px;
     }
@@ -3020,13 +3213,18 @@ $lg-desktop: 1399.98;
   .e-pv-annotation-shape-icon,
   .e-pv-annotation-calibrate-icon,
   .e-pv-handwritten-icon {
-    margin-right: 4px;
+    @if $theme-name != 'fluent2' {
+      margin-right: 4px;
+    }
   }
 
   .e-pv-stamp-template-container .e-menu-item.e-menu-caret-icon {
-    @if $skin-name == 'bootstrap5' {
+    @if ($skin-name == 'bootstrap5') {
       padding: 0 26px 0 8px;
     }
+    @if $theme-name == 'fluent2'{
+      padding: 0 26px 0 6px !important;/* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-pv-properties-opacity-indicator {
@@ -3151,6 +3349,19 @@ $lg-desktop: 1399.98;
     padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
   }
 
+  .e-pv-properties-form-field-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
+  .e-pv-signature-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
+    @if $theme-name == 'fluent2' {
+      padding: 12px 8px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
+    @if $theme-name == 'fluent2' {
+      padding: 8px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-pv-zoom-drop-down-container .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
   .e-pv-zoom-drop-down-container .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
     @if $skin-name == 'bootstrap4' {
@@ -3584,7 +3795,7 @@ $lg-desktop: 1399.98;
       font-size: 16px;
       font-weight: 500;
     }
-    @if $skin-name == 'FluentUI' {
+    @if ($skin-name == 'FluentUI' or $theme-name == 'fluent2') {
       font-weight: $pv-comment-tile-font-weight;
     }
     @if $skin-name != 'Material3' {
@@ -3713,6 +3924,9 @@ $lg-desktop: 1399.98;
     @if $skin-name == 'FluentUI' {
       font-weight: $pv-comment-tile-font-weight;
     }
+    @if $theme-name == 'fluent2' {
+      font-weight: normal;
+    }
     @if $skin-name == 'Material3' {
       font-size: $text-xs;
       padding-left: 40px;
@@ -3750,6 +3964,9 @@ $lg-desktop: 1399.98;
     @if $skin-name == 'Material3' {
       font-size: $text-xs;
     }
+    @if $theme-name == 'fluent2' {
+      font-weight: normal;
+    }
     padding-left: 8px;
     padding-top: $pv-comment-title-padding-top;
     position: absolute;
@@ -3792,7 +4009,7 @@ $lg-desktop: 1399.98;
 
   .e-menu-wrapper.e-custom-scroll.e-lib.e-keyboard.e-pv-stamp {
     border: 0;
-    @if $skin-name == 'bootstrap5' {
+    @if ($skin-name == 'bootstrap5' or $theme-name == 'fluent2') {
       background-color: $transparent;
     }
     @if $skin-name != 'Material3' {
@@ -3820,7 +4037,9 @@ $lg-desktop: 1399.98;
 
   .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
     margin-top: $pv-stamp-icon-margin-top;
-    padding-left: 7px;
+    @if $theme-name != 'fluent2'{
+      padding-left: 7px;
+    }
     @if $skin-name == 'fabric' {
       margin-top: -7px;
       padding-left: 10px;
@@ -3830,6 +4049,24 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-bigger .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
+    @if $theme-name == 'fluent2'{
+      margin-right: 30px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-bigger .e-pv-stamp.e-menu-wrapper ul .e-menu-item{
+    @if $theme-name == 'fluent2'{
+      padding: 0 8px;
+    }
+  }
+
+  .e-bigger .e-pv-annotation-thickness-container{
+    @if $theme-name == 'fluent2'{
+      padding-top: 7px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-pv-annotation-stamp-container .e-rtl.e-menu-wrapper ul .e-menu-item .e-menu-icon {
     @if $skin-name == 'bootstrap5' {
       margin-left: 1px;
@@ -3893,7 +4130,7 @@ $lg-desktop: 1399.98;
   .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,
   .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
     background: $pv-comment-panel-bg;
-    @if $skin-name != 'FluentUI' {
+    @if ($skin-name != 'FluentUI' and $theme-name != 'fluent2') {
       border: 1px solid $pv-comment-panel-border-color;
     }
     @if $skin-name == 'Material3' {
@@ -3933,11 +4170,16 @@ $lg-desktop: 1399.98;
   }
 
   .e-pdfviewer .e-pv-signature-apperance .e-checkbox-wrapper {
-    margin-top: 10px;
     padding-bottom: $pv-signature-appearance-checkbox;
     @if $skin-name == 'Material3' {
       margin-top: 12px;
     }
+    @else if $theme-name == 'fluent2' {
+      margin-top: 26px;
+    }
+    @else{
+      margin-top: 10px;
+    }
   }
 
   .e-pdfviewer .e-pv-signature-window .e-footer-content {
@@ -3950,6 +4192,10 @@ $lg-desktop: 1399.98;
       height: 30px;
       min-height: 30px;
     }
+    @if $theme-name == 'fluent2' {
+      height: 32px;
+      min-height: 32px;
+    }
   }
   .e-pv-signature-dialog-height .e-pv-cancelbtn{
     @if $skin-name != 'Material3' {
@@ -3959,7 +4205,11 @@ $lg-desktop: 1399.98;
   }
 
   .e-pv-signature-dialog-height .e-pv-createbtn{
-    @if $skin-name != 'Material3' {
+    @if $theme-name == 'fluent2' {
+      height: 32px;
+      min-height: 32px;
+    }
+    @else if $skin-name != 'Material3' {
       height: 30px;
       min-height: 30px;
     }
@@ -4057,16 +4307,25 @@ $lg-desktop: 1399.98;
     border-radius: 5px;
     display: inline-block;
     font-size: 13px;
-    height: 88px;
-    margin: 15px;
     padding-top: 40px;
     text-align: center;
-    width: 311px;
     word-wrap: break-word;
     @if $skin-name == 'FluentUI' {
       max-width: 300px;
       padding-top: 36px;
     }
+    @if $theme-name=='fluent2' {
+      height: 98px;
+      width: 45% !important;/* stylelint-disable-line declaration-no-important */
+      border: $pv-sidebar-toolbar-border;
+      margin-left: 16px;
+      margin-top: 17px;
+    }
+    @else{
+      height: 88px;
+      width: 311px;
+      margin: 15px;
+    }
     @if $skin-name == 'Material3' {
       border: 1px dashed rgba($primary);
       border-radius: 4px;
@@ -4077,6 +4336,18 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-font-sign:active {
+    @if $theme-name=='fluent2' {
+      border: 1px solid rgba($primary) !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-bigger .e-pv-font-sign{
+    @if $theme-name=='fluent2' {
+      width: 40% !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
   .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused {
     @if $skin-name == 'bootstrap5' {
       color: $white;
@@ -4182,6 +4453,13 @@ $lg-desktop: 1399.98;
     border-color: $pv-annotation-dropdown-border-color;
   }
 
+  .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
+  .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
+    @if $theme-name == 'fluent2' {
+      margin-top: -10px;
+    }
+  }
+
   .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
   .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
     @if $skin-name == 'bootstrap4' {
@@ -4486,6 +4764,10 @@ $lg-desktop: 1399.98;
       padding: 0 11px;
       width: inherit;
     }
+    @if ($theme-name=='fluent2') {
+      width: 59px;
+      border-radius: 4px;
+    }
     @if ($skin-name == 'Material3') {
       align-content: center;
       align-items: center;
@@ -4515,7 +4797,9 @@ $lg-desktop: 1399.98;
   }
 
   .e-pv-properties-font-family-container {
-    margin-right: 15px;
+    @if $theme-name != 'fluent2' {
+      margin-right: 15px;
+    }
     @if $skin-name == 'FluentUI' {
       width: 122px;
     }
@@ -4536,6 +4820,13 @@ $lg-desktop: 1399.98;
       border-bottom: 1px solid $transparent;
       box-sizing: border-box;
     }
+    @else if $theme-name == 'fluent2' {
+      border-right-color: $transparent;
+      height: 32px;
+      border-bottom: 1px solid $transparent;
+      box-sizing: border-box;
+      padding: 0;
+    }
     @else {
       border-right-color: $pv-comment-panel-bottom-color;
       border-right-style: solid;
@@ -4556,6 +4847,9 @@ $lg-desktop: 1399.98;
     @if ($skin-name != 'bootstrap5') {
       padding-left: 6px;
     }
+    @if ($theme-name == 'fluent2') {
+      padding-left: 13px;
+    }
   }
 
   .e-pv-properties-font-color-container,
@@ -4626,6 +4920,11 @@ $lg-desktop: 1399.98;
     @if ($skin-name == 'FluentUI') {
       height: auto;
     }
+    @if ($theme-name == 'fluent2') {
+      border-radius: 4px;
+      width: 65px;
+      padding: 1px 11px !important;/* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-pv-properties-formfield-maxlength-text-label,
@@ -4673,6 +4972,19 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-properties-form-field-window .e-dlg-content .e-tab-header {
+    @if ($theme-name == 'fluent2') {
+      width: $pv-properties-form-field-win-max-width !important;/* stylelint-disable-line declaration-no-important */
+      margin-left: -20px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-pv-properties-form-field-window .e-dlg-content .e-tab-header .e-toolbar-items {
+    @if ($theme-name == 'fluent2') {
+      margin-left: 34px;
+    }
+  }
+
   .e-pv-properties-formfield-textarea {
     @if $skin-name == 'FluentUI' {
       min-width: 318px;
@@ -4840,18 +5152,23 @@ $lg-desktop: 1399.98;
     vertical-align: top;
     white-space: nowrap;
     width: $pv-form-field-property-header-width;
-    @if $skin-name == 'Material3' {
+    @if $skin-name=='Material3' {
       height: 20px;
       font-family: $font-family;
     }
+    @if $theme-name=='fluent2' {
+      height: 28px;
+      font-family: $font-family;
+    }
   }
 
   .e-pv-form-field-property-header-general {
-    @if $skin-name == 'FluentUI' {
+    @if $skin-name=='FluentUI' {
       font-family: 'Segoe UI';
       height: 24px;
     }
-    @if $skin-name == 'Material3' {
+
+    @if ($skin-name=='Material3'or $theme-name == 'fluent2') {
       font-family: $font-family;
     }
     @else {
@@ -4887,14 +5204,20 @@ $lg-desktop: 1399.98;
 
   .e-pv-properties-form-field-font-style {
     background: $pv-form-field-property-font-style-color;
-    @if ($skin-name == 'bootstrap5') {
+    @if ($skin-name == 'bootstrap5' or $theme-name == 'fluent2') {
       border-radius: 4px;
     }
     @else {
       border-radius: 2px;
     }
     display: flex;
-    height: 36px;
+    @if ($theme-name == 'fluent2') {
+      height: 32px;
+      border: $pv-current-page-border;
+    }
+    @else {
+      height: 36px;
+    }
     justify-content: space-evenly;
     width: 154px;
     @if ($skin-name == 'bootstrap5') {
@@ -4919,16 +5242,29 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-properties-form-field-font-style .e-control:not(.e-pv-strikeout-icon-div),
+  .e-pv-properties-form-field-font-align .e-control:not(.e-pv-right-align-icon-div) {
+    @if ($theme-name=='fluent2') {
+      border-right: $pv-current-page-border;
+    }
+  }
+
   .e-pv-properties-form-field-font-align {
     background: $pv-form-field-property-font-style-color;
-    @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3') {
+    @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3' or $theme-name == 'fluent2') {
       border-radius: 4px;
     }
     @else {
       border-radius: 2px;
     }
     display: flex;
-    height: 36px;
+    @if ($theme-name == 'fluent2') {
+      border: $pv-current-page-border;
+      height: 32px;
+    }
+    @else {
+      height: 36px;
+    }
     justify-content: space-evenly;
     margin-right: 15px;
     width: 120px;
@@ -5039,6 +5375,9 @@ $lg-desktop: 1399.98;
       height: 12px;
       font-family: $font-family;
     }
+    @if $theme-name == 'fluent2'{
+      font-family: $font-family;
+    }
   }
 
   .e-pv-formfield-maxlength .e-input-group.e-control-wrapper .e-input-group-icon {
@@ -5128,10 +5467,52 @@ $lg-desktop: 1399.98;
     }
   }
 
+  .e-pv-signature-window {
+    @if ($theme-name=='fluent2') {
+      width: 655px !important;/* stylelint-disable-line declaration-no-important */
+      height: 621px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-pv-signature-apperance .e-float-input.e-control-wrapper.e-input-group {
+    @if ($theme-name =='fluent2') {
+      margin-left: 5.4%;
+      width: 91.45%;
+    }
+  }
+
+  .e-bigger .e-pv-signature-apperance .e-float-input.e-control-wrapper.e-input-group {
+    @if ($theme-name=='fluent2') {
+      width: 93%;
+    }
+  }
+
+  .e-pv-signature-apperance .e-checkbox-wrapper{
+    @if ($theme-name == 'fluent2') {
+      margin-left: $pv-toolbar-btn-height;
+    }
+  }
+
   .e-pv-signature-window .e-dlg-content {
-    @if ($skin-name == 'highcontrast') {
+    @if ($skin-name=='highcontrast') {
       padding: 16px;
     }
+
+    @if ($theme-name=='fluent2') {
+      width: 100% !important;/* stylelint-disable-line declaration-no-important */
+      padding-left: 0 !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+  .e-pv-signature-window .e-dlg-content .e-tab-header{
+    @if ($theme-name == 'fluent2') {
+      width: 655px !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-pv-signature-window .e-dlg-content .e-tab-header .e-toolbar-items{
+    @if ($theme-name == 'fluent2') {
+      margin-left: 28px;
+    }
   }
 
   .e-pv-signatureimage {
@@ -5214,15 +5595,59 @@ $lg-desktop: 1399.98;
 
   .e-pv-canvas-signature {
     width: $pv-canvas-sign-width;
-    @if $skin-name == 'FluentUI' {
+
+    @if $skin-name=='FluentUI'{
       max-width: $pv-canvas-sign-width;
     }
-    @if $skin-name == 'Material3' {
+
+    @if $theme-name =='fluent2' {
+      width: 91.45%;
+      max-width: 91.45%;
+      height: 349px !important;/* stylelint-disable-line declaration-no-important */
+      margin-left: 5.5%;
+      margin-right: 5.5%;
+      border: 2px dotted var(--color-sf-border-dark) !important;/* stylelint-disable-line declaration-no-important */
+    }
+
+    @if $skin-name=='Material3' {
       width: 100%;
       max-width: $pv-canvas-sign-width;
     }
   }
 
+  .e-device .e-pv-canvas-signature {
+    @if $theme-name =='fluent2' {
+      margin-left: 7%;
+      margin-right: 7%;
+    }
+  }
+  .e-pv-font-appearance-style.e-pv-canvas-signature{
+    @if $theme-name =='fluent2' {
+      height: 270px !important;/* stylelint-disable-line declaration-no-important */
+      margin-top: 20px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-pv-sign-upload{
+    @if $theme-name =='fluent2' {
+      left: 43% !important;/* stylelint-disable-line declaration-no-important */
+      margin-top: 6px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-bigger .e-pv-sign-upload{
+    @if $theme-name =='fluent2' {
+      left: 39% !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-pv-notification-popup .e-dlg-content {
+    @if $theme-name == 'fluent2' {
+      overflow: hidden;
+      overflow-x: hidden;
+    }
+  }
+
   .e-pv-canvas-signature-blazor {
     width: $pv-canvas-sign-width-blazor;
   }