@syncfusion/ej2-pdfviewer 17.3.57-4568 → 17.3.59-4568

package/styles/pdfviewer/_theme.scss

@@ -1,4 +1,46 @@
-@include export-module('pdfviewer-theme') {
+@use 'sass:math';
+$sm-mobile: 575.98;
+$mobile: 767.98;
+$tablet: 991.98;
+$desktop: 1199.98;
+$lg-desktop: 1399.98;
+
+// Small mobiles (landscape phones, less than 576px)
+@mixin sm-mobile() {
+  @media only screen and (max-width: ($sm-mobile * 1px)) {
+    @content;
+  }
+}
+
+// Small devices (landscape phones, less than 768px)
+@mixin mobile {
+  @media only screen and (max-width: ($mobile * 1px)) {
+    @content;
+  }
+}
+
+// Medium devices (tablets, less than 992px)
+@mixin tablet {
+  @media only screen and (max-width: ($tablet * 1px)) {
+    @content;
+  }
+}
+
+// Large devices (desktops, less than 1200px)
+@mixin desktop {
+  @media only screen and (max-width: ($desktop * 1px)) {
+    @content;
+  }
+}
+
+// X-Large devices (large desktops, less than 1400px)
+@mixin lg-desktop {
+  @media only screen and (max-width: ($lg-desktop * 1px)) {
+    @content;
+  }
+}
+
+@include export-module('pdfviewer-theme') {
   /* stylelint-disable value-no-vendor-prefix */
   /* stylelint-disable property-no-vendor-prefix */
   .e-pv-viewer-container {
@@ -98,6 +140,30 @@
     }
   }
 
+  .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;
@@ -126,6 +192,19 @@
     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;
@@ -167,6 +246,18 @@
     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;
@@ -249,6 +340,15 @@
     }
   }
 
+  .e-pv-image-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 3px;
+  }
+
   .e-pv-gotopage-apply-btn.e-btn.e-flat.e-primary:disabled {
     @if $skin-name != 'bootstrap4' {
       background-color: transparent;
@@ -345,12 +445,18 @@
     }
   }
 
+  .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 {
@@ -505,9 +611,18 @@
     @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;
@@ -535,6 +650,19 @@
     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),
@@ -634,14 +762,20 @@
   }
 
   .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;
     }
   }
@@ -704,6 +838,12 @@
     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;
@@ -731,6 +871,10 @@
     }
   }
 
+  .e-dialog .e-dlg-header {
+    width: auto;
+  }
+
   .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
     max-height: $pv-current-page-height;
     padding-bottom: $pv-current-page-padding-bottom;
@@ -906,6 +1050,9 @@
     @if $skin-name == 'FluentUI' {
       padding: 8px;
     }
+    @if $theme-name == 'fluent2' {
+      margin-top: 10px;
+    }
   }
 
   .e-bigger .e-pv-sidebar-title {
@@ -937,7 +1084,12 @@
   }
 
   .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;
@@ -1016,7 +1168,8 @@
     }
   }
 
-  .e-pv-thumbnail-view-button.e-btn {
+  .e-pv-thumbnail-view-button.e-btn,
+  .e-pv-organize-view-button.e-btn {
     background: $pv-thumbnail-view-button-background;
     border: $pv-thumbnail-view-button-border;
     border-radius: $pv-thumbnail-border-radius;
@@ -1040,7 +1193,247 @@
     }
   }
 
-  .e-bigger .e-pv-thumbnail-view-button.e-btn {
+  .e-pv-organize-tile.e-pv-thumbnail-column {
+    width: 100%;
+    height: 100%;
+  }
+
+  .e-pv-organize-content-apperance{
+    overflow: hidden;
+  }
+  .e-pv-organize-tile-view.e-pv-thumbnail-row {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+
+  .e-pv-organize-anchor-node {
+    border: $pv-organize-anchor-node-border;
+    margin: 24px;
+    width: 140px;
+    height: 140px;
+    
+    @include lg-desktop {
+      width: 140px;
+      height: 140px;
+    }
+
+    @include desktop {
+      width: 140px;
+      height: 140px;
+    }
+
+    @include tablet {
+      width: 140px;
+      height: 140px;
+    }
+
+    @include mobile {
+      width: 140px;
+      height: 140px;
+      min-width: 140px;
+      min-height: 140px;
+    }
+
+    @include sm-mobile {
+      width: 140px;
+      height: 140px;
+      min-width: 140px;
+      min-height: 140px;
+      margin: 24px 20px;
+    }
+  }
+
+  .e-pdfviewer .e-pv-organize-tile.e-pv-thumbnail-column .e-checkbox-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    top: -100%;
+    padding: 4px;
+  }
+
+  @media screen and (max-width: 480px) {
+    .e-pdfviewer .e-pv-organize-tile.e-pv-thumbnail-column .e-checkbox-wrapper {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      top: -100%;
+      padding: 4px;
+    }
+  }
+
+  .e-pv-organize-buttondiv {
+    justify-content: center;
+    flex-wrap: nowrap;
+    position: relative;
+    text-align: center;
+    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;
+  }
+
+  @media screen and (max-width: 480px) {
+    .e-pv-organize-anchor-node.e-pv-organize-node-selection-ring {
+      border: $pv-organize-page-select-border;
+      border-radius: 2px;
+    }
+  }
+
+  .e-pv-organize-window {
+    border: $pv-organize-image-border;
+    border-radius: 0;
+  }
+
+  .e-pdfviewer .e-pv-organize-window .e-footer-content {
+    border-top: $pv-organize-image-border;
+    padding: 15px;
+  }
+  
+  .e-pdfviewer .e-pv-organize-window .e-dlg-header-content {
+    padding: 15px;
+  }
+
+  .e-pv-tile-number {
+    text-align: center;
+    margin-top: calc(($pv-default-tile-icon-size / 2) + $pv-organize-anchor-node-border-width + 2px);
+  }
+
+  .e-pv-delete-button.e-btn,
+  .e-pv-rotate-left-button.e-btn,
+  .e-pv-rotate-right-button.e-btn {
+    width: $pv-default-tile-icon-size;
+    height: $pv-default-tile-icon-size;
+    justify-content: center;
+    align-items: center;
+    margin: 0 5px;
+    padding: 0;
+  }
+
+  .e-pv-insert-left-button.e-btn {
+    width: $pv-default-tile-icon-size;
+    height: $pv-default-tile-icon-size;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: calc(-1 * (#{$pv-default-tile-icon-size} / 2 + #{$pv-organize-anchor-node-border-width} / 2));
+    top: calc(-140px / 2);
+    padding: 0;
+    
+    @include lg-desktop {
+      top: calc(-140px / 2);
+    }
+
+    @include desktop {
+      top: calc(-140px / 2);
+    }
+
+    @include tablet {
+      top: calc(-140px / 2);
+    }
+
+    @include mobile {
+      top: calc(-140px / 2);
+    }
+
+    @include sm-mobile {
+      top: calc(-140px / 2);
+    }
+  }
+  
+  .e-pv-insert-right-button.e-btn {
+    width: $pv-default-tile-icon-size;
+    height: $pv-default-tile-icon-size;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    right: calc(-1 * (#{$pv-default-tile-icon-size} / 2 + #{$pv-organize-anchor-node-border-width} / 2));
+    top: calc(-140px / 2);
+    padding: 0;
+
+    @include lg-desktop {
+      top: calc(-140px / 2);
+    }
+
+    @include desktop {
+      top: calc(-140px / 2);
+    }
+
+    @include tablet {
+      top: calc(-140px / 2);
+    }
+
+    @include mobile {
+      top: calc(-140px / 2);
+    }
+
+    @include sm-mobile {
+      top: calc(-140px / 2);
+    }
+  }
+  
+  .e-pv-toolbar-rotate-left-button {
+    height: 32px;
+    width: 32px;
+    padding: 0;
+    top: 7px;
+    position: relative;
+    left: 436px;
+    box-shadow: none;
+  }
+
+  .e-pv-toolbar-rotate-right-button {
+    height: 32px;
+    width: 32px;
+    padding: 0;
+    top: 7px;
+    position: relative;
+    left: 445px;
+    box-shadow: none;
+  }
+
+  .e-pdfviewer .e-pv-organize-window .e-dlg-content {
+    padding: 0;
+    overflow: hidden;
+    border-radius: 0;
+  }
+
+  .e-pv-organize-toolbar-apperance.e-toolbar {
+    width: 1172px;
+    border: $pv-organize-image-border;
+    border-width: 1px 0;
+    background: transparent !important;/* stylelint-disable-line declaration-no-important */
+
+    .e-toolbar-items.e-tbar-pos {
+      background: transparent !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-pdfviewer .e-pv-organize-toolbar-apperance .e-checkbox-wrapper {
+    margin-left: 22px;
+    margin-right: 8px;
+    text-wrap: nowrap;
+  }
+
+  @media screen and (max-width: 480px) {
+    .e-pdfviewer .e-pv-organize-toolbar-apperance .e-checkbox-wrapper {
+      width: 35px;
+      margin-left: 22px;
+    }
+  }
+
+  .e-bigger .e-pv-thumbnail-view-button.e-btn,
+  .e-bigger .e-pv-organize-view-button.e-btn {
     @if $skin-name == 'bootstrap4' {
       height: $pv-thumbnail-view-button-height-big;
       margin: $pv-thumbnail-view-button-margin-big;
@@ -1236,9 +1629,8 @@
   .e-pv-thumbnail-number {
     color: $pv-sidebar-title-color;
     font-family: $pv-thumbnail-number-font-family;
-    padding-left: $pv-thumbnail-number-padding-left;
-    padding-right: $pv-thumbnail-number-padding-left;
     padding-top: $pv-thumbnail-number-padding-top;
+    text-align: center;
     @if $skin-name == 'Material3' {
       font-weight: 500;
     }
@@ -1672,6 +2064,9 @@
       padding: 16px;
       width: 368px;
     }
+    @if $theme-name == 'fluent2' {
+      width: 368px;
+    }
   }
 
   .e-pv-search-input {
@@ -1679,6 +2074,18 @@
     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;
@@ -1701,7 +2108,7 @@
 
   .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;
@@ -1709,7 +2116,7 @@
     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;
@@ -1745,6 +2152,13 @@
     }
   }
 
+  .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;
@@ -1758,7 +2172,7 @@
   .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;
   }
@@ -2005,6 +2419,25 @@
     }
   }
 
+  .e-pv-organize-total-page-button {
+    float: left;
+    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{
+    background-color: transparent;
+    background: transparent;
+    color: $pv-toolbar-total-page-number-color;
+    cursor: default;
+  }
+   
   .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
   .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
     @if $skin-name == 'FluentUI' {
@@ -2016,6 +2449,12 @@
     margin-top: -6px;
   }
 
+  .e-pv-organize-image {
+    width: calc(100% - (2 * $pv-organize-anchor-node-border-width));
+    height: calc(100% - (2 * $pv-organize-anchor-node-border-width));
+    border: $pv-organize-image-border;
+  }
+
   .e-pv-annotation-opacity-icon {
     padding-top: $pv-annotation-opacity-icon-padding-top;
   }
@@ -2198,6 +2637,26 @@
     }
   }
 
+  .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') {
@@ -2292,6 +2751,10 @@
     @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,
@@ -2383,7 +2846,9 @@
   .e-pv-scale-ratio-dest-unit .e-caret,
   .e-pv-depth-unit .e-caret {
     margin-left: $pv-scale-ratio-win-drop-down-caret-margin-left;
-    margin-top: $pv-scale-ratio-win-drop-down-caret-margin-top;
+    @if $theme-name != 'fluent2' {
+      margin-top: $pv-scale-ratio-win-drop-down-caret-margin-top;
+    }
   }
 
   .e-bigger .e-pv-scale-ratio-src-unit .e-caret,
@@ -2406,7 +2871,6 @@
   .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;
     }
@@ -2417,6 +2881,13 @@
     @else {
       font-size: 14px;
     }
+    @if ($theme-name == 'fluent2') {
+      margin-bottom: 4px;
+    }
+    @else
+    {
+      margin-bottom: 8px;
+    }
   }
 
   .e-pv-properties-line-end-container,
@@ -2434,6 +2905,10 @@
 
   .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 {
@@ -2477,6 +2952,9 @@
   .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,
@@ -2485,6 +2963,9 @@
     @if $skin-name == 'FluentUI' {
       max-width: 248px;
     }
+    @if $theme-name == 'fluent2' {
+      max-width: 200px;
+    }
   }
 
   .e-pv-properties-line-start,
@@ -2609,6 +3090,9 @@
     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,
@@ -2616,6 +3100,9 @@
     @if $skin-name == 'bootstrap4' {
       display: block;
     }
+    @else if $theme-name == 'fluent2' {
+      display: block;
+    }
     @else {
       display: inline;
     }
@@ -2642,6 +3129,9 @@
       width: 155px;
       padding-top: 6px;
     }
+    @else if ($theme-name == 'fluent2'){
+      width: 128px;
+    }
     @else {
       width: 138px;
     }
@@ -2711,13 +3201,18 @@
   .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 {
@@ -2842,6 +3337,31 @@
     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-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center{
+    @if $theme-name == 'fluent2' {
+      margin-left: 710px !important;/* stylelint-disable-line declaration-no-important */
+    }
+  }
+
+  .e-bigger .e-pv-organize-toolbar-apperance .e-toolbar-items .e-toolbar-center {
+    @if $theme-name == 'fluent2' {
+      margin-left: 109px !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' {
@@ -2977,6 +3497,7 @@
   .e-pdfviewer .e-checkbox-wrapper .e-frame + .e-label,
   .e-pdfviewer .e-css.e-checkbox-wrapper .e-frame + .e-label {
     margin-right: $pv-textsearch-textbox-margin-right;
+    font-size: 14px;
   }
 
   div > .e-pv-bookmark-icon.e-pv-icon.e-right {
@@ -3274,7 +3795,7 @@
       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' {
@@ -3391,9 +3912,21 @@
       font-size: 12px;
       font-weight: $pv-comment-tile-font-weight;
     }
+    @if $skin-name == 'fabric' {
+      color: $pv-comments-div-focus-border;
+    }
+    @if $skin-name == 'bootstrap4' {
+      font-size: $pv-input-active-color;
+    }
+    @if $skin-name == 'bootstrap' {
+      color: $pv-sidebar-title-color;
+    }
     @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;
@@ -3401,8 +3934,9 @@
       padding-bottom: 30px;
       height: 18px;
     }
-    max-width: 237px;
     position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .e-pv-reply-title {
@@ -3415,16 +3949,29 @@
       font-size: 12px;
       font-weight: $pv-comment-tile-font-weight;
     }
+    @if $skin-name == 'fabric' {
+      color: $pv-comments-div-focus-border;
+    }
+    @if $skin-name == 'bootstrap4' {
+      font-size: $pv-input-active-color;
+    }
+    @if $skin-name == 'bootstrap' {
+      color: $pv-sidebar-title-color;
+    }
     @if $skin-name == 'FluentUI' {
       font-weight: $pv-comment-tile-font-weight;
     }
     @if $skin-name == 'Material3' {
       font-size: $text-xs;
     }
-    max-width: 212px;
+    @if $theme-name == 'fluent2' {
+      font-weight: normal;
+    }
     padding-left: 8px;
     padding-top: $pv-comment-title-padding-top;
     position: absolute;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .e-pv-comments-hover {
@@ -3462,7 +4009,7 @@
 
   .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' {
@@ -3490,7 +4037,9 @@
 
   .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;
@@ -3500,6 +4049,24 @@
     }
   }
 
+  .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;
@@ -3563,7 +4130,7 @@
   .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' {
@@ -3603,11 +4170,16 @@
   }
 
   .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 {
@@ -3620,6 +4192,10 @@
       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' {
@@ -3629,7 +4205,11 @@
   }
 
   .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;
     }
@@ -3727,16 +4307,25 @@
     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;
@@ -3747,6 +4336,18 @@
     }
   }
 
+  .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;
@@ -3852,6 +4453,13 @@
     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' {
@@ -4156,6 +4764,10 @@
       padding: 0 11px;
       width: inherit;
     }
+    @if ($theme-name=='fluent2') {
+      width: 59px;
+      border-radius: 4px;
+    }
     @if ($skin-name == 'Material3') {
       align-content: center;
       align-items: center;
@@ -4206,6 +4818,13 @@
       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;
@@ -4296,6 +4915,10 @@
     @if ($skin-name == 'FluentUI') {
       height: auto;
     }
+    @if ($theme-name == 'fluent2') {
+      border-radius: 4px;
+      width: 65px;
+    }
   }
 
   .e-pv-properties-formfield-maxlength-text-label,
@@ -4343,6 +4966,19 @@
     }
   }
 
+  .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;
@@ -4510,18 +5146,23 @@
     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 {
@@ -4709,6 +5350,9 @@
       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 {
@@ -4798,10 +5442,52 @@
     }
   }
 
+  .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 {
@@ -4884,15 +5570,59 @@
 
   .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;
   }