@wavemaker/foundation-css 12.0.0-next.45147 → 12.0.0-next.45148

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -501,6 +501,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
501
501
  --wm-shadow-addon-3: 0px 1px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
502
502
  --wm-shadow-addon-4: 0px 2px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
503
503
  --wm-shadow-addon-5: 0px 4px 4px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
504
+ --wm-elevation-shadow-none: none;
504
505
  --wm-elevation-shadow-1: var(--wm-shadow-1),var(--wm-shadow-addon-1);
505
506
  --wm-elevation-shadow-2: var(--wm-shadow-2),var(--wm-shadow-addon-2);
506
507
  --wm-elevation-shadow-3: var(--wm-shadow-3),var(--wm-shadow-addon-3);
@@ -759,6 +760,66 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
759
760
  --wm-card-footer-border-width: var(--wm-card-border-width);
760
761
  --wm-card-footer-border-style: var(--wm-card-border-style);
761
762
  --wm-card-footer-border-color: var(--wm-card-border-color);
763
+ --wm-calendar-view-shadow: var(--wm-elevation-shadow-1);
764
+ --wm-calendar-view-border: var(--wm-border-color-translucent);
765
+ --wm-calendar-view-border-style: var(--wm-border-style);
766
+ --wm-calendar-view-border-width: var(--wm-border-width);
767
+ --wm-calendar-view-radius: var(--wm-radius-md);
768
+ --wm-calendar-fc-header-vertical-padding: var(--wm-space-4);
769
+ --wm-calendar-fc-header-horizontal-padding: var(--wm-space-5);
770
+ --wm-calendar-fc-header-text-font-weight: var(--wm-font-weight-bold);
771
+ --wm-calendar-fc-time-text-font-weight: var(--wm-font-weight-bold);
772
+ --wm-calendar-fc-events-gap: var(--wm-space-1);
773
+ --wm-calendar-fc-daygrid-event-radius: var(--wm-radius-xs);
774
+ --wm-calendar-fc-v-event-main-color: var(--wm-color-primary);
775
+ --wm-calendar-fc-popover-radius: var(--wm-radius-sm);
776
+ --wm-calendar-fc-popover-heading-padding: var(--wm-space-2);
777
+ --wm-calendar-fc-popover-title-font-size: var(--wm-body-medium-font-size);
778
+ --wm-calendar-fc-popover-title-font-weight: var(--wm-font-weight-bold);
779
+ --wm-calendar-fc-popover-title-font-family: var(--wm-body-medium-font-family);
780
+ --wm-calendar-fc-popover-title-line-height: var(--wm-body-medium-line-height);
781
+ --wm-calendar-fc-event-background: var(--wm-color-primary-fixed);
782
+ --wm-calendar-fc-event-color: var(--wm-color-surface-tint);
783
+ --wm-calendar-fc-event-dot-color: var(--wm-color-surface-tint);
784
+ --wm-calendar-fc-event-primary-background: var(--wm-color-primary-container);
785
+ --wm-calendar-fc-event-primary-color: var(--wm-color-primary);
786
+ --wm-calendar-fc-event-dot-primary: var(--wm-color-primary);
787
+ --wm-calendar-fc-event-secondary-background: var(--wm-color-secondary-container);
788
+ --wm-calendar-fc-event-secondary-color: var(--wm-color-secondary);
789
+ --wm-calendar-fc-event-dot-secondary: var(--wm-color-secondary);
790
+ --wm-calendar-fc-event-tertiary-background: var(--wm-color-tertiary-container);
791
+ --wm-calendar-fc-event-tertiary-color: var(--wm-color-tertiary);
792
+ --wm-calendar-fc-event-dot-tertiary: var(--wm-color-tertiary);
793
+ --wm-calendar-fc-event-info-background: var(--wm-color-info-container);
794
+ --wm-calendar-fc-event-info-color: var(--wm-color-info);
795
+ --wm-calendar-fc-event-dot-info: var(--wm-color-info);
796
+ --wm-calendar-fc-event-success-background: var(--wm-color-success-container);
797
+ --wm-calendar-fc-event-success-color: var(--wm-color-success);
798
+ --wm-calendar-fc-event-dot-success: var(--wm-color-success);
799
+ --wm-calendar-fc-event-warning-background: var(--wm-color-warning-container);
800
+ --wm-calendar-fc-event-warning-color: var(--wm-color-warning);
801
+ --wm-calendar-fc-event-dot-warning: var(--wm-color-warning);
802
+ --wm-calendar-fc-event-danger-background: var(--wm-color-error-container);
803
+ --wm-calendar-fc-event-danger-color: var(--wm-color-error);
804
+ --wm-calendar-fc-event-dot-danger: var(--wm-color-error);
805
+ --wm-calendar-fc-anchor-color: var(--wm-color-on-background);
806
+ --wm-calendar-fc-event-future-background: var(--wm-color-tertiary-container);
807
+ --wm-calendar-fc-event-future-color: var(--wm-color-tertiary);
808
+ --wm-calendar-fc-event-future-dot: var(--wm-color-tertiary);
809
+ --wm-calendar-fc-event-past-background: var(--wm-color-secondary-container);
810
+ --wm-calendar-fc-event-past-color: var(--wm-color-secondary);
811
+ --wm-calendar-fc-event-past-dot: var(--wm-color-secondary);
812
+ --wm-calendar-fc-event-today-background: var(--wm-color-success-container);
813
+ --wm-calendar-fc-event-today-color: var(--wm-color-success);
814
+ --wm-calendar-fc-event-today-dot: var(--wm-color-success);
815
+ --wm-carousel-indicators-border: var(--wm-color-primary-container);
816
+ --wm-carousel-indicators-radius: var(--wm-radius-circle);
817
+ --wm-carousel-indicators-border-style: var(--wm-border-style);
818
+ --wm-carousel-indicators-border-width: var(--wm-border-width);
819
+ --wm-carousel-indicators-background: var(--wm-color-primary-container);
820
+ --wm-carousel-indicators-size: 10px;
821
+ --wm-carousel-indicators-gap: var(--wm-space-2);
822
+ --wm-carousel-control-icon-font-size: 48px;
762
823
  /*--checkbox--*/
763
824
  --wm-checkbox-gap: var(--wm-space-1);
764
825
  --wm-checkbox-caption-font-size: var(--wm-body-large-font-size);
@@ -824,6 +885,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
824
885
  --wm-chip-item-avatar-size: var(--wm-icon-size);
825
886
  --wm-chip-item-avatar-radius: var(--wm-radius-pill);
826
887
  /*--form field/composite--*/
888
+ --wm-form-group-gap: var(--wm-space-0);
827
889
  --wm-caption-font-family: var(--wm-body-large-font-family);
828
890
  --wm-caption-font-size: var(--wm-body-large-font-size);
829
891
  --wm-caption-font-weight: var(--wm-body-large-font-weight);
@@ -832,6 +894,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
832
894
  --wm-caption-color: var(--wm-color-on-surface-variant);
833
895
  --wm-caption-margin: var(--wm-space-0);
834
896
  --wm-caption-padding: var(--wm-space-0);
897
+ --wm-caption-gap: calc(var(--wm-space-1) * 0.5);
898
+ --wm-required-content: "*";
899
+ --wm-required-color: var(--wm-color-error);
900
+ --wm-required-font-size: inherit;
901
+ --wm-required-font-weight: var(--wm-font-weight-bold);
835
902
  --wm-form-control-color: var(--wm-color-on-surface);
836
903
  --wm-form-control-background: var(--wm-color-surface-container-lowest);
837
904
  --wm-form-control-border-width: var(--wm-border-width);
@@ -960,7 +1027,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
960
1027
  --wm-dropdown-menu-item-state-layer-opacity-focus: var(--wm-opacity-focus);
961
1028
  --wm-dropdown-menu-item-state-layer-opacity-active: var(--wm-opacity-active);
962
1029
  /*--file upload--*/
963
- --wm-file-upload-status-padding: var(--wm-space-2);
1030
+ --wm-file-upload-status-padding: var(--wm-space-4);
964
1031
  --wm-file-upload-status-border-color: var(--wm-border-color);
965
1032
  --wm-file-upload-status-border-width: var(--wm-border-width);
966
1033
  --wm-file-upload-status-border-style: var(--wm-border-style);
@@ -1120,15 +1187,25 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1120
1187
  --wm-nav-tabs-stacked-gap: var(--wm-space-0);
1121
1188
  --wm-nav-tabs-stacked-item-min-height: 48px;
1122
1189
  --wm-nav-tabs-stacked-indicator-width: 100%;
1190
+ --wm-app-font-family: var(--wm-body-medium-font-family), var(--wm-font-family-backup);
1191
+ --wm-app-font-size: var(--wm-body-medium-font-size);
1192
+ --wm-app-font-weight: var(--wm-body-medium-font-weight);
1193
+ --wm-app-line-height: var(--wm-body-medium-line-height);
1194
+ --wm-app-letter-spacing: var(--wm-body-medium-letter-spacing);
1195
+ --wm-app-background: var(--wm-color-surface-container-lowest);
1196
+ --wm-app-color: var(--wm-color-on-background);
1197
+ --wm-app-text-transform: none;
1198
+ --wm-app-margin: 0;
1199
+ --wm-app-padding: 0;
1123
1200
  /**--Page Layout--**/
1124
1201
  /*--app header--*/
1125
1202
  --wm-header-background: var(--wm-color-secondary);
1126
1203
  --wm-header-color: var(--wm-color-on-background);
1127
- --wm-header-height: 4.5rem;
1204
+ --wm-header-height: auto;
1128
1205
  --wm-header-zindex: 2;
1129
1206
  --wm-header-shadow: inset 0px 0px 0 0 var(--wm-color-secondary);
1130
1207
  --wm-header-padding: 0;
1131
- --wm-header-logo-height: 50px;
1208
+ --wm-header-logo-height: 32px;
1132
1209
  --wm-page-content: var(--wm-space-0);
1133
1210
  --wm-header-link-size: var(--wm-h4-font-size);
1134
1211
  --wm-header-link-color: var(--wm-color-secondary);
@@ -1161,6 +1238,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1161
1238
  --wm-aside-nav-item-letter-spacing: var(--wm-label-large-letter-spacing);
1162
1239
  --wm-aside-nav-item-radius: var(--wm-radius-pill);
1163
1240
  --wm-aside-nav-item-icon-size: var(--wm-icon-size);
1241
+ --wm-aside-nav-item-icon-width: var(--wm-icon-size);
1242
+ --wm-aside-nav-item-icon-height: var(--wm-icon-size);
1243
+ --wm-aside-nav-item-icon-radius: calc(var(--wm-radius-sm) * 0.75);
1244
+ --wm-aside-nav-item-icon-background: inherit;
1245
+ --wm-aside-nav-item-icon-color: inherit;
1246
+ --wm-aside-nav-item-icon-background-active: inherit;
1247
+ --wm-aside-nav-item-icon-color-active: inherit;
1164
1248
  --wm-aside-nav-item-gap: var(--wm-space-2);
1165
1249
  --wm-aside-nav-item-color: var(--wm-aside-nav-color);
1166
1250
  --wm-aside-nav-item-background: var(--wm-aside-nav-background);
@@ -1413,14 +1497,17 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1413
1497
  --wm-radiobutton-caption-font-weight: var(--wm-body-large-font-weight);
1414
1498
  --wm-radiobutton-caption-line-height: var(--wm-body-large-line-height);
1415
1499
  --wm-radiobutton-caption-letter-spacing: var(--wm-body-large-letter-spacing);
1500
+ --wm-radiobutton-caption-color: var(--wm-color-on-surface);
1416
1501
  --wm-radiobutton-size: 20px;
1502
+ --wm-radiobutton-indicator-size: 10px;
1417
1503
  --wm-radiobutton-background: transparent;
1418
1504
  --wm-radiobutton-border-width: 2px;
1419
1505
  --wm-radiobutton-border-color: var(--wm-color-on-surface-variant);
1420
1506
  --wm-radiobutton-border-radius: var(--wm-radius-circle);
1421
- --wm-radiobutton-background-selected: var(--wm-color-primary);
1422
- --wm-radiobutton-icon-color-selected: var(--wm-color-on-primary);
1423
- --wm-radiobutton-border-color-selected: var(--wm-color-primary);
1507
+ --wm-radiobutton-selected-background: transparent;
1508
+ --wm-radiobutton-selected-border-color: var(--wm-color-primary);
1509
+ --wm-radiobutton-selected-indicator-color: var(--wm-radiobutton-selected-border-color);
1510
+ --wm-radiobutton-selected-caption-color: var(--wm-color-on-surface);
1424
1511
  --wm-radiobutton-state-layer-size: 40px;
1425
1512
  --wm-radiobutton-state-hover: var(--wm-color-on-surface-hover);
1426
1513
  --wm-radiobutton-state-focus: var(--wm-color-on-surface-focus);
@@ -1628,6 +1715,32 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1628
1715
  --wm-toast-container-error-color: var(--wm-color-on-error);
1629
1716
  --wm-toast-container-error-border-color: var(--wm-color-error);
1630
1717
  --wm-toast-error-icon: "\f24d";
1718
+ --wm-toggle-track-background: var(--wm-color-surface-container-highest);
1719
+ --wm-toggle-track-border-color: var(--wm-color-outline);
1720
+ --wm-toggle-track-border-style: var(--wm-border-style);
1721
+ --wm-toggle-track-border-width: 2px;
1722
+ --wm-toggle-state-layer-size: 40px;
1723
+ --wm-toggle-state-checked-background: var(--wm-color-primary);
1724
+ --wm-toggle-state-hover: var(--wm-color-on-surface-hover);
1725
+ --wm-toggle-state-focus: var(--wm-color-on-surface-focus);
1726
+ --wm-toggle-state-active: var(--wm-color-on-surface-active);
1727
+ --wm-toggle-checked-state-hover: var(--wm-color-primary-hover);
1728
+ --wm-toggle-checked-state-active: var(--wm-color-primary-active);
1729
+ --wm-toggle-checked-state-focus: var(--wm-color-primary-focus);
1730
+ --wm-toggle-handle-checked-active-background: var(--wm-color-primary-container);
1731
+ --wm-toggle-handle-checked-focus-background: var(--wm-color-primary-container);
1732
+ --wm-toggle-handle-checked-hover-background: var(--wm-color-primary-container);
1733
+ --wm-toggle-handle-checked-background: var(--wm-color-white);
1734
+ --wm-toggle-handle-background: var(--wm-color-outline);
1735
+ --wm-toggle-handle-hover-background: var(--wm-color-on-surface-variant);
1736
+ --wm-toggle-handle-focus-background: var(--wm-color-on-surface-variant);
1737
+ --wm-toggle-handle-active-background: var(--wm-color-on-surface-variant);
1738
+ --wm-toggle-track-active-background: var(--wm-color-surface-tint);
1739
+ --wm-toggle-label-min-height: 32px;
1740
+ --wm-toggle-label-width: 52px;
1741
+ --wm-toggle-handle-width: 16px;
1742
+ --wm-toggle-handle-height: 16px;
1743
+ --wm-toggle-radius: var(--wm-radius-circle);
1631
1744
  /*-- popovers --*/
1632
1745
  --wm-popover-z-index: 1060;
1633
1746
  --wm-popover-gap: calc(var(--wm-space-1) * 2.5);
@@ -1656,7 +1769,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1656
1769
  --wm-wizard-background: var(--wm-color-surface-container-lowest);
1657
1770
  --wm-wizard-radius: var(--wm-radius-md);
1658
1771
  --wm-wizard-shadow: var(--wm-elevation-shadow-1);
1659
- --wm-wizard-heading-padding: var(--wm-space-6);
1772
+ --wm-wizard-heading-padding: var(--wm-space-6) var(--wm-space-0) var(--wm-space-0) var(--wm-space-0);
1773
+ --wm-wizard-heading-background: inherit;
1774
+ --wm-wizard-heading-radius: inherit inherit var(--wm-radius-0) var(--wm-radius-0);
1660
1775
  --wm-wizard-stepper-step-width: 32px;
1661
1776
  --wm-wizard-stepper-step-height: 32px;
1662
1777
  --wm-wizard-stepper-step-radius: var(--wm-radius-circle);
@@ -1691,6 +1806,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1691
1806
  --wm-wizard-stepper-body-letter-spacing: var(--wm-body-medium-letter-spacing);
1692
1807
  --wm-wizard-stepper-body-color: var(--wm-color-on-background);
1693
1808
  --wm-wizard-stepper-footer-padding: var(--wm-space-4);
1809
+ --wm-wizard-stepper-footer-background: inherit;
1810
+ --wm-wizard-stepper-footer-radius: var(--wm-radius-0) var(--wm-radius-0) inherit inherit;
1694
1811
  --wm-wizard-stepper-footer-border: var(--wm-color-outline-variant);
1695
1812
  --wm-wizard-stepper-footer-border-width: var(--wm-border-width);
1696
1813
  --wm-wizard-stepper-footer-border-style: var(--wm-border-style);
@@ -1763,6 +1880,125 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1763
1880
  --wm-wizard-classic-wizard-step-title-disabled-color: var(--wm-btn-disabled-opacity);
1764
1881
  --wm-wizard-classic-wizard-heading-padding: var(--wm-space-4);
1765
1882
  --wm-app-wizard-vertical-gap: 42px;
1883
+ /* rich text editor variables */
1884
+ --wm-note-editor-toolbar-border-style: var(--wm-border-style);
1885
+ --wm-note-editor-toolbar-border-width: var(--wm-border-width);
1886
+ --wm-note-editor-toolbar-border: var(--wm-border-color-translucent);
1887
+ --wm-note-editor-toolbar-background: var(--wm-color-white);
1888
+ --wm-note-editor-toolbar-padding: var(--wm-space-2);
1889
+ --wm-note-editor-toolbar-gap: var(--wm-space-3);
1890
+ --wm-note-editor-toolbar-border-gap: var(--wm-space-1);
1891
+ --wm-note-editor-radius: var(--wm-radius-sm);
1892
+ --wm-note-editor-border: var(--wm-border-color-translucent);
1893
+ --wm-note-editor-border-style: var(--wm-border-style);
1894
+ --wm-note-editor-border-width: var(--wm-border-width);
1895
+ --wm-note-editable-background: var(--wm-color-surface-container-low);
1896
+ --wm-note-editable-padding: var(--wm-space-3);
1897
+ --wm-note-editable-color: var(--wm-color-black);
1898
+ --wm-note-editable-hr-color: var(--wm-color-inverse-on-surface);
1899
+ --wm-note-editor-note-placeholder-pdding: var(--wm-space-3);
1900
+ /* note btn variables */
1901
+ --wm-note-editor-btn-group-gap: var(--wm-space-2);
1902
+ --wm-note-editor-btn-padding: var(--wm-space-1);
1903
+ --wm-note-editor-btn-min-height: 28px;
1904
+ --wm-note-editor-btn-width: 28px;
1905
+ --wm-note-editor-btn-radius: var(--wm-radius-xs);
1906
+ /* note dropdown variables */
1907
+ --wm-note-editor-dropdown-menu-background: var(--wm-color-surface);
1908
+ --wm-note-editor-dropdown-menu-border-radius: var(--wm-radius-xs);
1909
+ --wm-note-editor-dropdown-menu-box-shadow: var(--wm-elevation-shadow-2);
1910
+ --wm-note-editor-dropdown-menu-width: 200px;
1911
+ --wm-note-editor-dropdown-menu-max-height: 250px;
1912
+ --wm-note-editor-dropdown-menu-padding: var(--wm-space-2);
1913
+ --wm-note-editor-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
1914
+ --wm-note-editor-dropdown-menu-item-font-size: var(--wm-body-large-font-size);
1915
+ --wm-note-editor-dropdown-menu-item-line-height: var(--wm-body-large-line-height);
1916
+ --wm-note-editor-dropdown-menu-item-font-weight: var(--wm-body-large-font-weight);
1917
+ --wm-note-editor-dropdown-menu-item-letter-spacing: var(--wm-body-large-letter-spacing);
1918
+ --wm-note-editor-dropdown-menu-item-color: var(--wm-color-on-surface);
1919
+ --wm-note-editor-dropdown-menu-item-state-layer-opacity-focus: var(--wm-opacity-focus);
1920
+ --wm-note-editor-dropdown-menu-item-state-layer-opacity-hover: var(--wm-opacity-hover);
1921
+ --wm-note-editor-dropdown-menu-item-state-layer-opacity-active: var(--wm-opacity-active);
1922
+ --wm-note-editor-dropdown-menu-min-width: 180px;
1923
+ /* note code variables */
1924
+ --wm-note-editor-pre-border-color: var(--wm-color-secondary-fixed);
1925
+ --wm-note-editor-pre-border-width: var(--wm-border-width);
1926
+ --wm-note-editor-pre-background: var(--wm-color-surface);
1927
+ --wm-note-editor-pre-padding: var(--wm-space-2);
1928
+ --wm-note-editor-pre-radius: var(--wm-radius-xs);
1929
+ --wm-note-editor-pre-font-family: var(--wm-body-small-font-family);
1930
+ --wm-note-editor-pre-font-size: var(--wm-body-small-font-size);
1931
+ --wm-note-editor-pre-font-weight: var(--wm-body-small-font-weight);
1932
+ --wm-note-editor-pre-line-height: var(--wm-body-small-line-height);
1933
+ --wm-note-editor-pre-color: var(--wm-color-on-secondary-fixed-variant);
1934
+ /* note coding variables */
1935
+ --wm-note-editor-note-code-padding: var(--wm-space-3);
1936
+ --wm-note-editor-note-code-background: var(--wm-color-on-warning);
1937
+ --wm-note-editor-note-code-color: var(--wm-color-surface);
1938
+ --wm-note-editor-note-code-font-size: var(--wm-body-medium-font-size);
1939
+ --wm-note-editor-note-code-font-weight: var(--wm-note-editor-note-code-font-weight);
1940
+ --wm-note-editor-note-code-font-family: Menlo, Monaco, monospace, sans-serif;
1941
+ /* note blockquote variables */
1942
+ --wm-note-editor-blockquote-border-color: var(--wm-color-primary-container);
1943
+ --wm-note-editor-blockquote-border-width: 4px;
1944
+ --wm-note-editor-blockquote-margin: var(--wm-space-3);
1945
+ --wm-note-editor-blockquote-inline-padding: var(--wm-space-3);
1946
+ --wm-note-editor-blockquote-block-padding: var(--wm-space-2);
1947
+ --wm-note-editor-blockquote-border-hover-color: var(--wm-color-primary);
1948
+ /* para variables */
1949
+ --wm-note-editor-para-dropdown-padding: var(--wm-space-1);
1950
+ /* note tooltip variables */
1951
+ --wm-note-editor-tooltip-border-color: var(--wm-color-black);
1952
+ --wm-note-editor-tooltip-content-color: var(--wm-color-white);
1953
+ --wm-note-editor-tooltip-content-background: var(--wm-color-black);
1954
+ --wm-note-editor-tooltip-arrow-border-width: 5px;
1955
+ --wm-note-editor-tooltip-radius: var(--wm-radius-xs);
1956
+ --wm-note-editor-tooltip-font-size: var(--wm-body-medium-font-size);
1957
+ --wm-note-editor-tooltip-font-weight: var(--wm-body-medium-font-weight);
1958
+ --wm-note-editor-tooltip-font-family: var(--wm-body-medium-font-family);
1959
+ --wm-note-editor-tooltip-padding: var(--wm-space-1);
1960
+ --wm-note-editor-tooltip-arrow-margin-value: var(--wm-space-1);
1961
+ --wm-note-editor-tooltip-margin-value: var(--wm-space-1);
1962
+ --wm-note-editor-tooltip-content-padding: var(--wm-space-1) var(--wm-space-2);
1963
+ --wm-note-editor-tooltip-content-max-width: 200px;
1964
+ /* note color picker vaibales */
1965
+ --wm-note-editor-color-btn-size: 16px;
1966
+ --wm-note-editor-palette-width: 160px;
1967
+ --wm-note-editor-palette-gap: var(--wm-space-2);
1968
+ --wm-note-editor-color-reset-background: var(--wm-color-white);
1969
+ --wm-note-editor-color-select-background: var(--wm-color-white);
1970
+ --wm-note-editor-color-dropdown-gap: var(--wm-space-3);
1971
+ --wm-note-editor-color-dropdown-padding: var(--wm-space-3);
1972
+ --wm-note-editor-color-palette-gap-xs: var(--wm-space-1);
1973
+ --wm-note-editor-color-row-gap: var(--wm-space-1);
1974
+ --wm-note-editor-color-select-btn-width: 40px;
1975
+ --wm-note-editor-color-select-btn-height: 14px;
1976
+ --wm-note-editor-color-select-btn-min-height: 14px;
1977
+ /* note dropzone variables */
1978
+ --wm-note-editor-dropzone-color: var(--wm-color-primary);
1979
+ --wm-note-editor-dropzone-background: var(--wm-color-white);
1980
+ --wm-note-editor-dropzone-hover-color: var(--wm-color-primary-container);
1981
+ /* note table variables */
1982
+ --wm-note-editor-td-border-color: var(--wm-border-color-translucent);
1983
+ --wm-note-editor-td-border-width: var(--wm-border-width);
1984
+ --wm-note-editor-td-border-style: var(--wm-border-style);
1985
+ --wm-note-editor-td-padding: var(--wm-space-1);
1986
+ /* note popover styles */
1987
+ --wm-note-editor-popover-arrow-margin-value: var(--wm-space-2);
1988
+ --wm-note-editor-popover-margin-value: var(--wm-space-1);
1989
+ --wm-note-editor-popover-background: var(--wm-color-white);
1990
+ --wm-note-editor-popover-radius: var(--wm-radius-xs);
1991
+ --wm-note-editor-popover-padding: var(--wm-space-2);
1992
+ --wm-note-editor-popover-arrow-background: var(--wm-color-white);
1993
+ --wm-note-editor-popover-content-color: var(--wm-color-black);
1994
+ --wm-note-editor-popover-content-background: var(--wm-color-white);
1995
+ --wm-note-editor-popover-padding-value: var(--wm-space-1);
1996
+ --wm-note-editor-popover-padding-container: var(--wm-space-2);
1997
+ --wm-note-editor-popover-border: var(--wm-color-outline-variant);
1998
+ --wm-note-editor-popover-btn-group-gap: var(--wm-space-2);
1999
+ --wm-note-editor-popover-content-min-width: 100px;
2000
+ --wm-note-editor-popover-content-min-height: 30px;
2001
+ --wm-note-editor-popover-content-padding: var(--wm-space-1) var(--wm-space-2);
1766
2002
  /*headings*/
1767
2003
  --wm-headings-color: var(--wm-color-on-surface);
1768
2004
  /*page content*/
@@ -11925,20 +12161,20 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
11925
12161
  content: "\e956";
11926
12162
  }
11927
12163
  .wm-app {
11928
- font-family: var(--wm-body-medium-font-family), var(--wm-font-family-backup);
11929
- font-size: var(--wm-body-medium-font-size);
11930
- font-weight: var(--wm-body-medium-font-weight);
11931
- line-height: var(--wm-body-medium-line-height);
11932
- letter-spacing: var(--wm-body-medium-letter-spacing);
11933
- background: var(--wm-color-surface-container-lowest);
11934
- color: var(--wm-color-on-background);
11935
- text-transform: none;
11936
- -webkit-font-smoothing: antialiased;
11937
- margin: 0;
11938
- padding: 0;
11939
12164
  /** Reuasble style selectors with arguments */
11940
12165
  /* datepicker styles */
11941
12166
  /**--Layout--**/
12167
+ font-family: var(--wm-app-font-family);
12168
+ font-size: var(--wm-app-font-size);
12169
+ font-weight: var(--wm-app-font-weight);
12170
+ line-height: var(--wm-app-line-height);
12171
+ letter-spacing: var(--wm-app-letter-spacing);
12172
+ background: var(--wm-app-background);
12173
+ color: var(--wm-app-color);
12174
+ text-transform: var(--wm-app-text-transform);
12175
+ margin: var(--wm-app-margin);
12176
+ padding: var(--wm-app-padding);
12177
+ -webkit-font-smoothing: antialiased;
11942
12178
  /*--Layout styles--*/
11943
12179
  /* basic pagination styles */
11944
12180
  /* pager pagination styles */
@@ -15700,6 +15936,340 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15700
15936
  .wm-app .app-card.card-filled:active {
15701
15937
  --wm-card-shadow: var(--wm-card-filled-shadow-active);
15702
15938
  }
15939
+ .wm-app .app-calendar {
15940
+ border-radius: var(--wm-calendar-view-radius);
15941
+ box-shadow: var(--wm-calendar-view-shadow);
15942
+ overflow: hidden;
15943
+ }
15944
+ .wm-app .app-calendar .fc-toolbar-title {
15945
+ font-weight: var(--wm-font-weight-bold);
15946
+ }
15947
+ .wm-app .app-calendar .fc.fc-media-screen {
15948
+ flex: 1 1 auto;
15949
+ display: flex;
15950
+ flex-direction: column;
15951
+ font-size: 1em;
15952
+ }
15953
+ .wm-app .app-calendar .fc .fc-col-header {
15954
+ box-shadow: inset 0 -1px 0 var(--wm-calendar-view-border);
15955
+ }
15956
+ .wm-app .app-calendar .fc .fc-event {
15957
+ background: var(--wm-calendar-fc-event-background);
15958
+ width: 100%;
15959
+ border-radius: var(--wm-calendar-fc-daygrid-event-radius);
15960
+ border: unset;
15961
+ color: var(--wm-calendar-fc-event-color);
15962
+ }
15963
+ .wm-app .app-calendar .fc .fc-event.primary {
15964
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-primary-background);
15965
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-primary-color);
15966
+ }
15967
+ .wm-app .app-calendar .fc .fc-event.primary .fc-daygrid-event-dot {
15968
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-dot-primary);
15969
+ }
15970
+ .wm-app .app-calendar .fc .fc-event.secondary {
15971
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-secondary-background);
15972
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-secondary-color);
15973
+ }
15974
+ .wm-app .app-calendar .fc .fc-event.secondary .fc-daygrid-event-dot {
15975
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-dot-secondary);
15976
+ }
15977
+ .wm-app .app-calendar .fc .fc-event.tertiary {
15978
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-tertiary-background);
15979
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-tertiary-color);
15980
+ }
15981
+ .wm-app .app-calendar .fc .fc-event.tertiary .fc-daygrid-event-dot {
15982
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-dot-tertiary);
15983
+ }
15984
+ .wm-app .app-calendar .fc .fc-event.info {
15985
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-info-background);
15986
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-info-color);
15987
+ }
15988
+ .wm-app .app-calendar .fc .fc-event.info .fc-daygrid-event-dot {
15989
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-dot-info);
15990
+ }
15991
+ .wm-app .app-calendar .fc .fc-event.success {
15992
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-success-background);
15993
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-success-color);
15994
+ }
15995
+ .wm-app .app-calendar .fc .fc-event.success .fc-daygrid-event-dot {
15996
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-dot-success);
15997
+ }
15998
+ .wm-app .app-calendar .fc .fc-event.warning {
15999
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-warning-background);
16000
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-warning-color);
16001
+ }
16002
+ .wm-app .app-calendar .fc .fc-event.warning .fc-daygrid-event-dot {
16003
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-dot-warning);
16004
+ }
16005
+ .wm-app .app-calendar .fc .fc-event.danger {
16006
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-danger-background);
16007
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-danger-color);
16008
+ }
16009
+ .wm-app .app-calendar .fc .fc-event.danger .fc-daygrid-event-dot {
16010
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-dot-danger);
16011
+ }
16012
+ .wm-app .app-calendar .fc .fc-event.fc-event-future {
16013
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-future-background);
16014
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-future-dot);
16015
+ }
16016
+ .wm-app .app-calendar .fc .fc-event.fc-event-future .fc-daygrid-event-dot {
16017
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-future-dot);
16018
+ }
16019
+ .wm-app .app-calendar .fc .fc-event.fc-event-past {
16020
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-past-background);
16021
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-past-color);
16022
+ }
16023
+ .wm-app .app-calendar .fc .fc-event.fc-event-past .fc-daygrid-event-dot {
16024
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-past-dot);
16025
+ }
16026
+ .wm-app .app-calendar .fc .fc-event.fc-event-today {
16027
+ --wm-calendar-fc-event-background: var(--wm-calendar-fc-event-today-background);
16028
+ --wm-calendar-fc-event-color: var(--wm-calendar-fc-event-today-color);
16029
+ }
16030
+ .wm-app .app-calendar .fc .fc-event.fc-event-today .fc-daygrid-event-dot {
16031
+ --wm-calendar-fc-event-dot-color: var(--wm-calendar-fc-event-today-dot);
16032
+ }
16033
+ .wm-app .app-calendar .fc-header-toolbar.fc-toolbar {
16034
+ padding: var(--wm-calendar-fc-header-vertical-padding) var(--wm-calendar-fc-header-horizontal-padding);
16035
+ }
16036
+ .wm-app .app-calendar .fc-timegrid-event-harness .fc-event {
16037
+ padding-block: unset;
16038
+ justify-content: start;
16039
+ }
16040
+ .wm-app .fc-theme-standard .fc-scrollgrid {
16041
+ border: var(--wm-calendar-view-border-width) var(--wm-calendar-view-border-style) var(--wm-calendar-view-border);
16042
+ border-left-width: 0;
16043
+ border-bottom-width: 0;
16044
+ border-right-width: 0;
16045
+ }
16046
+ .wm-app .fc-theme-standard td,
16047
+ .wm-app .fc-theme-standard th {
16048
+ border: var(--wm-calendar-view-border-width) var(--wm-calendar-view-border-style) var(--wm-calendar-view-border);
16049
+ }
16050
+ .wm-app .fc-theme-standard a {
16051
+ color: var(--wm-calendar-fc-anchor-color);
16052
+ }
16053
+ .wm-app .fc .fc-scrollgrid-section-body table,
16054
+ .wm-app .fc .fc-scrollgrid-section-footer table {
16055
+ border-bottom-style: hidden;
16056
+ }
16057
+ .wm-app .fc .fc-scrollgrid-section > * {
16058
+ border: 0;
16059
+ }
16060
+ .wm-app .fc .fc-col-header th {
16061
+ border-color: transparent;
16062
+ }
16063
+ .wm-app .fc .fc-col-header-cell-cushion {
16064
+ font-weight: var(--wm-calendar-fc-header-text-font-weight);
16065
+ color: var(--wm-calendar-fc-anchor-color);
16066
+ }
16067
+ .wm-app .fc .fc-daygrid-event .fc-event-title {
16068
+ overflow: hidden;
16069
+ white-space: nowrap;
16070
+ text-overflow: ellipsis;
16071
+ max-width: 24ch;
16072
+ }
16073
+ .wm-app .fc .fc-event .fc-event-time {
16074
+ overflow: unset;
16075
+ }
16076
+ .wm-app .fc .fc-event .fc-event-main {
16077
+ color: var(--wm-calendar-fc-v-event-main-color);
16078
+ }
16079
+ .wm-app .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
16080
+ display: flex;
16081
+ flex-direction: column;
16082
+ align-items: center;
16083
+ width: 100%;
16084
+ padding: 0 var(--wm-space-1);
16085
+ gap: var(--wm-calendar-fc-events-gap);
16086
+ }
16087
+ .wm-app .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events .fc-daygrid-event-harness {
16088
+ width: 100%;
16089
+ }
16090
+ .wm-app .fc .fc-more-popover {
16091
+ border-radius: var(--wm-calendar-fc-popover-radius);
16092
+ }
16093
+ .wm-app .fc .fc-more-popover .fc-popover-header {
16094
+ padding: var(--wm-calendar-fc-popover-heading-padding);
16095
+ }
16096
+ .wm-app .fc .fc-more-popover .fc-popover-header .fc-popover-title {
16097
+ font-size: var(--wm-calendar-fc-popover-title-font-size);
16098
+ font-weight: var(--wm-calendar-fc-popover-title-font-weight);
16099
+ font-family: var(--wm-calendar-fc-popover-title-font-family);
16100
+ line-height: var(--wm-calendar-fc-popover-title-line-height);
16101
+ }
16102
+ .wm-app .fc .fc-more-popover .fc-popover-body {
16103
+ display: inline-flex;
16104
+ flex-direction: column;
16105
+ gap: var(--wm-calendar-fc-events-gap);
16106
+ padding: var(--wm-space-2);
16107
+ position: relative;
16108
+ top: calc(var(--wm-space-1) * -1);
16109
+ }
16110
+ .wm-app .fc .fc-daygrid-day-bottom {
16111
+ display: flex;
16112
+ align-self: flex-start;
16113
+ }
16114
+ .wm-app .fc .fc-daygrid-day .fc-daygrid-event.fc-daygrid-dot-event {
16115
+ justify-content: flex-start;
16116
+ }
16117
+ .wm-app .fc-daygrid-event-dot {
16118
+ border-color: var(--wm-calendar-fc-event-dot-color);
16119
+ }
16120
+ .wm-app .fc-direction-ltr .fc-daygrid-event.fc-event-end,
16121
+ .wm-app .fc-direction-rtl .fc-daygrid-event.fc-event-start {
16122
+ margin: unset;
16123
+ }
16124
+ .wm-app .fc-timegrid-event-harness .fc-timegrid-event,
16125
+ .wm-app .fc-timegrid-event.fc-event-mirror,
16126
+ .wm-app .fc-timegrid-more-link {
16127
+ box-shadow: 0 0 0 1px var(--wm-color-white);
16128
+ border-radius: var(--wm-radius-xs);
16129
+ }
16130
+ .wm-app .fc-timegrid-event.fc-event .fc-event-time {
16131
+ font-weight: var(--wm-calendar-fc-time-text-font-weight);
16132
+ }
16133
+ .wm-app .app-carousel {
16134
+ position: relative;
16135
+ overflow: hidden;
16136
+ }
16137
+ .wm-app .app-carousel .carousel {
16138
+ height: 100%;
16139
+ }
16140
+ .wm-app .app-carousel .carousel.slide {
16141
+ height: inherit;
16142
+ width: inherit;
16143
+ }
16144
+ .wm-app .app-carousel .carousel.slide .carousel-control .icon-next,
16145
+ .wm-app .app-carousel .carousel.slide .carousel-control .icon-prev {
16146
+ cursor: pointer;
16147
+ font-size: var(--wm-carousel-control-icon-font-size);
16148
+ }
16149
+ .wm-app .app-carousel .carousel-inner {
16150
+ height: 100%;
16151
+ white-space: nowrap;
16152
+ }
16153
+ .wm-app .app-carousel .carousel-inner .app-carousel-item {
16154
+ display: inline-block;
16155
+ position: absolute;
16156
+ width: 100%;
16157
+ }
16158
+ .wm-app .app-carousel .carousel-inner .app-carousel-item.item {
16159
+ height: inherit;
16160
+ overflow: hidden;
16161
+ display: inline-block;
16162
+ position: absolute;
16163
+ width: 100%;
16164
+ transition: none;
16165
+ }
16166
+ .wm-app .app-carousel .carousel-inner .app-carousel-item.item.left-item {
16167
+ left: -100%;
16168
+ }
16169
+ .wm-app .app-carousel .carousel-inner .app-carousel-item.item.right-item {
16170
+ left: 100%;
16171
+ }
16172
+ .wm-app .app-carousel .carousel-inner .app-carousel-item.item img {
16173
+ width: 100%;
16174
+ object-fit: cover;
16175
+ }
16176
+ .wm-app .app-carousel carousel.hide-both .carousel-control,
16177
+ .wm-app .app-carousel carousel.hide-both .carousel-indicators,
16178
+ .wm-app .app-carousel carousel.hide-indicators .carousel-indicators,
16179
+ .wm-app .app-carousel carousel.hide-navs .carousel-control {
16180
+ display: none;
16181
+ }
16182
+ .wm-app .app-carousel .carousel-control {
16183
+ position: absolute;
16184
+ inset: 0;
16185
+ right: unset;
16186
+ width: 5%;
16187
+ opacity: 0.5;
16188
+ transition: opacity 0.15s ease;
16189
+ }
16190
+ .wm-app .app-carousel .carousel-control:hover,
16191
+ .wm-app .app-carousel .carousel-control:focus {
16192
+ outline: 0;
16193
+ text-decoration: none;
16194
+ opacity: 1;
16195
+ }
16196
+ .wm-app .app-carousel .carousel-control.right {
16197
+ left: auto;
16198
+ right: 0;
16199
+ }
16200
+ .wm-app .app-carousel .carousel-control .icon-prev,
16201
+ .wm-app .app-carousel .carousel-control .icon-next,
16202
+ .wm-app .app-carousel .carousel-control .glyphicon-chevron-left,
16203
+ .wm-app .app-carousel .carousel-control .glyphicon-chevron-right {
16204
+ position: absolute;
16205
+ top: 50%;
16206
+ z-index: 5;
16207
+ display: inline-block;
16208
+ }
16209
+ .wm-app .app-carousel .carousel-control .icon-prev,
16210
+ .wm-app .app-carousel .carousel-control .icon-next {
16211
+ font: normal normal normal 40px / 1 wavicon;
16212
+ }
16213
+ .wm-app .app-carousel .carousel-control .icon-prev:before {
16214
+ content: "\f1d1";
16215
+ }
16216
+ .wm-app .app-carousel .carousel-control .icon-next:before {
16217
+ content: "\f1d2";
16218
+ }
16219
+ .wm-app .app-carousel .carousel-indicators {
16220
+ position: absolute;
16221
+ bottom: 20px;
16222
+ width: 100%;
16223
+ display: flex;
16224
+ justify-content: center;
16225
+ gap: var(--wm-carousel-indicators-gap);
16226
+ z-index: 3;
16227
+ text-align: center;
16228
+ }
16229
+ .wm-app .app-carousel .carousel-indicators li {
16230
+ display: inline-block;
16231
+ width: var(--wm-carousel-indicators-size);
16232
+ height: var(--wm-carousel-indicators-size);
16233
+ margin: 1px;
16234
+ text-indent: -999px;
16235
+ border: var(--wm-carousel-indicators-border-width) var(--wm-carousel-indicators-border-style) var(--wm-carousel-indicators-border) !important;
16236
+ border-radius: var(--wm-carousel-indicators-radius);
16237
+ cursor: pointer;
16238
+ }
16239
+ .wm-app .app-carousel .carousel-indicators li.active {
16240
+ margin: 0;
16241
+ width: calc(var(--wm-carousel-indicators-size) * 1.2);
16242
+ height: calc(var(--wm-carousel-indicators-size) * 1.2);
16243
+ background-color: var(--wm-carousel-indicators-background);
16244
+ }
16245
+ .wm-app .carousel-caption {
16246
+ position: absolute;
16247
+ left: 20%;
16248
+ right: 20%;
16249
+ bottom: 20px;
16250
+ z-index: 10;
16251
+ padding-top: 20px;
16252
+ padding-bottom: 30px;
16253
+ color: var(--wm-color-white);
16254
+ text-align: center;
16255
+ text-shadow: 0 1px 2px rgb a(0, 0, 0, 0.6);
16256
+ }
16257
+ .wm-app .carousel-caption .btn {
16258
+ text-shadow: none;
16259
+ }
16260
+ @media screen and (max-width: 768px) {
16261
+ .wm-app .carousel-indicators {
16262
+ bottom: 10px;
16263
+ }
16264
+ .wm-app .carousel-caption {
16265
+ left: 15%;
16266
+ right: 15%;
16267
+ padding-bottom: 20px;
16268
+ }
16269
+ .wm-app .carousel-inner > .item .item .app-picture {
16270
+ height: 100%;
16271
+ }
16272
+ }
15703
16273
  .wm-app .app-checkbox {
15704
16274
  position: relative;
15705
16275
  }
@@ -15928,12 +16498,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
15928
16498
  }
15929
16499
  .wm-app .app-chips .app-chip-search .app-chip-input.input-group .form-control {
15930
16500
  padding: var(--wm-chips-input-padding);
15931
- border: none;
15932
- box-shadow: none;
15933
- margin: calc(var(--wm-chips-list-padding) * -1) var(--wm-space-0);
15934
- }
15935
- .wm-app .app-chips .app-chip-search .form-control {
15936
- padding: var(--wm-chips-input-padding);
16501
+ background: none;
15937
16502
  border: none;
15938
16503
  box-shadow: none;
15939
16504
  margin: calc(var(--wm-chips-list-padding) * -1) var(--wm-space-0);
@@ -16010,6 +16575,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16010
16575
  display: flex;
16011
16576
  flex-direction: row;
16012
16577
  align-items: center;
16578
+ gap: var(--wm-form-group-gap);
16013
16579
  }
16014
16580
  .wm-app .app-composite-widget:has(.form-control:not(.ng-touched.ng-invalid):focus) .control-label {
16015
16581
  color: var(--wm-color-primary);
@@ -16137,11 +16703,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16137
16703
  padding: var(--wm-caption-padding);
16138
16704
  display: inline-block;
16139
16705
  transition: all 0.2s ease-in-out;
16706
+ gap: var(--wm-caption-gap);
16140
16707
  }
16141
16708
  .wm-app .control-label.required:after {
16142
- content: "*";
16143
- color: inherit;
16144
- margin-left: 2px;
16709
+ content: var(--wm-required-content);
16710
+ color: var(--wm-required-color);
16711
+ font-size: var(--wm-required-font-size);
16712
+ font-weight: var(--wm-required-font-weight);
16145
16713
  }
16146
16714
  .wm-app .form-control {
16147
16715
  width: 100%;
@@ -16882,15 +17450,16 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16882
17450
  }
16883
17451
  .wm-app .app-fileupload .app-multi-file-upload .drop-box {
16884
17452
  border: var(--wm-file-upload-status-border-width) dashed var(--wm-file-upload-status-border-color);
16885
- background-color: var(--wm-file-upload-drop-box-background);
17453
+ background: var(--wm-file-upload-drop-box-background);
16886
17454
  cursor: pointer;
16887
- height: 100px;
17455
+ height: auto;
16888
17456
  display: flex;
16889
17457
  flex-direction: column;
16890
17458
  justify-content: center;
16891
17459
  align-items: center;
16892
17460
  gap: var(--wm-file-upload-drop-box-gap);
16893
17461
  border-radius: var(--wm-file-upload-multi-file-radius);
17462
+ padding: var(--wm-file-upload-status-padding);
16894
17463
  }
16895
17464
  .wm-app .app-fileupload .app-multi-file-upload .drop-box .message {
16896
17465
  text-align: center;
@@ -16916,6 +17485,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16916
17485
  cursor: pointer;
16917
17486
  opacity: 0;
16918
17487
  }
17488
+ .wm-app .app-fileupload .app-multi-file-upload .drop-box .wi {
17489
+ font-size: var(--wm-icon-size);
17490
+ }
16919
17491
  .wm-app .app-form,
16920
17492
  .wm-app .app-liveform,
16921
17493
  .wm-app .app-livefilter {
@@ -16992,6 +17564,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
16992
17564
  align-items: center;
16993
17565
  padding: 0;
16994
17566
  gap: var(--wm-icon-gap);
17567
+ font-style: normal;
16995
17568
  }
16996
17569
  .wm-app .app-icon-wrapper {
16997
17570
  white-space: nowrap;
@@ -17343,11 +17916,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17343
17916
  }
17344
17917
  .wm-app .modal-dialog .modal-content .modal-header {
17345
17918
  padding: var(--wm-modal-header-padding);
17919
+ display: flex;
17920
+ flex-direction: row-reverse;
17346
17921
  }
17347
17922
  .wm-app .modal-dialog .modal-content .modal-header .app-dialog-close {
17348
17923
  position: absolute;
17349
17924
  right: 0;
17350
17925
  top: 0;
17926
+ z-index: 1;
17351
17927
  }
17352
17928
  .wm-app .modal-dialog .modal-content .modal-header .modal-title {
17353
17929
  width: 100%;
@@ -17367,6 +17943,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17367
17943
  .wm-app .modal-dialog .modal-content .modal-body {
17368
17944
  height: 100%;
17369
17945
  padding: var(--wm-modal-body-padding);
17946
+ overflow: auto;
17370
17947
  }
17371
17948
  .wm-app .modal-dialog .modal-content .modal-body > .app-grid-layout {
17372
17949
  padding: 0;
@@ -17407,9 +17984,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17407
17984
  --wm-modal-radius: var(--wm-modal-full-screen-radius);
17408
17985
  --wm-modal-margin: var(--wm-modal-full-screen-margin);
17409
17986
  }
17410
- .wm-app .modal-dialog:not(.modal-sheet).modal-full-screen .modal-body {
17411
- overflow: auto;
17412
- }
17413
17987
  .wm-app .modal-dialog.modal-sheet {
17414
17988
  --wm-modal-width: var(--wm-modal-sheet-width);
17415
17989
  --wm-modal-radius: var(--wm-modal-sheet-radius);
@@ -17793,10 +18367,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17793
18367
  .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon,
17794
18368
  .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon {
17795
18369
  font-size: var(--wm-aside-nav-item-icon-size);
17796
- min-width: var(--wm-aside-nav-item-icon-size);
17797
- width: var(--wm-aside-nav-item-icon-size);
17798
- height: var(--wm-aside-nav-item-icon-size);
18370
+ min-width: var(--wm-aside-nav-item-icon-width);
18371
+ width: var(--wm-aside-nav-item-icon-width);
18372
+ height: var(--wm-aside-nav-item-icon-height);
17799
18373
  margin-left: calc(calc(var(--wm-aside-nav-item-icon-size) / 3)* -1);
18374
+ border-radius: var(--wm-aside-nav-item-icon-radius);
18375
+ background: var(--wm-aside-nav-item-icon-background);
18376
+ color: var(--wm-aside-nav-item-icon-color);
17800
18377
  }
17801
18378
  .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor > .anchor-caption,
17802
18379
  .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor > .anchor-caption,
@@ -17918,6 +18495,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17918
18495
  --wm-aside-nav-item-background: var(--wm-aside-nav-item-background-active);
17919
18496
  --wm-aside-nav-item-color: var(--wm-aside-nav-item-color-active);
17920
18497
  }
18498
+ .wm-app .app-left-panel .app-nav .app-nav-item.active > .app-anchor .app-icon,
18499
+ .wm-app .app-right-panel .app-nav .app-nav-item.active > .app-anchor .app-icon,
18500
+ .wm-app .app-left-panel .app-nav .app-nav-item.active > .app-menu > .app-anchor .app-icon,
18501
+ .wm-app .app-right-panel .app-nav .app-nav-item.active > .app-menu > .app-anchor .app-icon,
18502
+ .wm-app .app-left-panel .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor .app-icon,
18503
+ .wm-app .app-right-panel .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor .app-icon {
18504
+ --wm-aside-nav-item-icon-background: var(--wm-aside-nav-item-icon-background-active);
18505
+ --wm-aside-nav-item-icon-color: var(--wm-aside-nav-item-icon-color-active);
18506
+ }
17921
18507
  .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu,
17922
18508
  .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu {
17923
18509
  flex-direction: column;
@@ -18033,6 +18619,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18033
18619
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor,
18034
18620
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
18035
18621
  flex-direction: column;
18622
+ justify-content: center;
18036
18623
  font-size: var(--wm-aside-nav-rail-item-font-size);
18037
18624
  font-family: var(--wm-aside-nav-rail-item-font-family);
18038
18625
  font-weight: var(--wm-aside-nav-rail-item-font-weight);
@@ -18669,6 +19256,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18669
19256
  font-weight: var(--wm-radiobutton-caption-font-weight);
18670
19257
  line-height: var(--wm-radiobutton-caption-line-height);
18671
19258
  letter-spacing: var(--wm-radiobutton-caption-letter-spacing);
19259
+ color: var(--wm-radiobutton-caption-color);
18672
19260
  cursor: pointer;
18673
19261
  }
18674
19262
  .wm-app .app-radio.radio > label > input[type="radio"] {
@@ -18694,8 +19282,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18694
19282
  .wm-app .app-radio.radio > label > input[type="radio"]:active {
18695
19283
  background: var(--wm-radiobutton-state-active);
18696
19284
  }
19285
+ .wm-app .app-radio.radio > label > input[type="radio"]:checked {
19286
+ --wm-radiobutton-caption-color: var(--wm-radiobutton-selected-caption-color);
19287
+ }
18697
19288
  .wm-app .app-radio.radio > label > input[type="radio"]:checked + .caption:before {
18698
- border-color: var(--wm-radiobutton-border-color-selected);
19289
+ border-color: var(--wm-radiobutton-selected-border-color);
18699
19290
  }
18700
19291
  .wm-app .app-radio.radio > label > input[type="radio"]:checked + .caption:after {
18701
19292
  transform: scale(1);
@@ -18731,57 +19322,51 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
18731
19322
  box-sizing: border-box;
18732
19323
  }
18733
19324
  .wm-app .app-radio.radio > label .caption:after {
18734
- top: calc(var(--wm-radiobutton-size) * 0.75);
18735
- left: calc(var(--wm-radiobutton-size) * 0.75);
18736
- width: calc(var(--wm-radiobutton-size) / 2);
18737
- height: calc(var(--wm-radiobutton-size) / 2);
19325
+ top: calc(calc(var(--wm-radiobutton-state-layer-size) * 0.5) - calc(var(--wm-radiobutton-indicator-size) * 0.5));
19326
+ left: calc(calc(var(--wm-radiobutton-state-layer-size) * 0.5) - calc(var(--wm-radiobutton-indicator-size) * 0.5));
19327
+ width: var(--wm-radiobutton-indicator-size);
19328
+ height: var(--wm-radiobutton-indicator-size);
18738
19329
  transform: scale(0);
18739
19330
  transition: all 0.2s ease-in-out;
18740
- background: var(--wm-radiobutton-border-color-selected);
19331
+ background: var(--wm-radiobutton-selected-border-color);
18741
19332
  border-radius: 50%;
18742
19333
  }
18743
19334
  .wm-app .app-radio.radio > label > img {
18744
19335
  display: none;
18745
19336
  }
18746
19337
  .wm-app .app-radio.radio.secondary {
18747
- --wm-radiobutton-background-selected: var(--wm-color-secondary);
18748
- --wm-radiobutton-border-color-selected: var(--wm-color-secondary);
18749
- --wm-radiobutton-icon-color-selected: var(--wm-color-on-secondary);
19338
+ --wm-radiobutton-selected-background: var(--wm-color-secondary);
19339
+ --wm-radiobutton-selected-border-color: var(--wm-color-secondary);
18750
19340
  --wm-radiobutton-selected-state-hover: var(--wm-color-secondary-hover);
18751
19341
  --wm-radiobutton-selected-state-focus: var(--wm-color-secondary-focus);
18752
19342
  }
18753
19343
  .wm-app .app-radio.radio.tertiary {
18754
- --wm-radiobutton-background-selected: var(--wm-color-tertiary);
18755
- --wm-radiobutton-border-color-selected: var(--wm-color-tertiary);
18756
- --wm-radiobutton-icon-color-selected: var(--wm-color-on-tertiary);
19344
+ --wm-radiobutton-selected-background: var(--wm-color-tertiary);
19345
+ --wm-radiobutton-selected-border-color: var(--wm-color-tertiary);
18757
19346
  --wm-radiobutton-selected-state-hover: var(--wm-color-tertiary-hover);
18758
19347
  --wm-radiobutton-selected-state-focus: var(--wm-color-tertiary-focus);
18759
19348
  }
18760
19349
  .wm-app .app-radio.radio.success {
18761
- --wm-radiobutton-background-selected: var(--wm-color-success);
18762
- --wm-radiobutton-border-color-selected: var(--wm-color-success);
18763
- --wm-radiobutton-icon-color-selected: var(--wm-color-on-success);
19350
+ --wm-radiobutton-selected-background: var(--wm-color-success);
19351
+ --wm-radiobutton-selected-border-color: var(--wm-color-success);
18764
19352
  --wm-radiobutton-selected-state-hover: var(--wm-color-success-hover);
18765
19353
  --wm-radiobutton-selected-state-focus: var(--wm-color-success-focus);
18766
19354
  }
18767
19355
  .wm-app .app-radio.radio.info {
18768
- --wm-radiobutton-background-selected: var(--wm-color-info);
18769
- --wm-radiobutton-border-color-selected: var(--wm-color-info);
18770
- --wm-radiobutton-icon-color-selected: var(--wm-color-on-info);
19356
+ --wm-radiobutton-selected-background: var(--wm-color-info);
19357
+ --wm-radiobutton-selected-border-color: var(--wm-color-info);
18771
19358
  --wm-radiobutton-selected-state-hover: var(--wm-color-info-hover);
18772
19359
  --wm-radiobutton-selected-state-focus: var(--wm-color-info-focus);
18773
19360
  }
18774
19361
  .wm-app .app-radio.radio.warning {
18775
- --wm-radiobutton-background-selected: var(--wm-color-warning);
18776
- --wm-radiobutton-border-color-selected: var(--wm-color-warning);
18777
- --wm-radiobutton-icon-color-selected: var(--wm-color-on-warning);
19362
+ --wm-radiobutton-selected-background: var(--wm-color-warning);
19363
+ --wm-radiobutton-selected-border-color: var(--wm-color-warning);
18778
19364
  --wm-radiobutton-selected-state-hover: var(--wm-color-warning-hover);
18779
19365
  --wm-radiobutton-selected-state-focus: var(--wm-color-warning-focus);
18780
19366
  }
18781
19367
  .wm-app .app-radio.radio.error {
18782
- --wm-radiobutton-background-selected: var(--wm-color-error);
18783
- --wm-radiobutton-border-color-selected: var(--wm-color-error);
18784
- --wm-radiobutton-icon-color-selected: var(--wm-color-on-error);
19368
+ --wm-radiobutton-selected-background: var(--wm-color-error);
19369
+ --wm-radiobutton-selected-border-color: var(--wm-color-error);
18785
19370
  --wm-radiobutton-selected-state-hover: var(--wm-color-error-hover);
18786
19371
  --wm-radiobutton-selected-state-focus: var(--wm-color-error-focus);
18787
19372
  }
@@ -19326,6 +19911,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
19326
19911
  background: var(--wm-timepicker-background);
19327
19912
  padding: var(--wm-timepicker-padding);
19328
19913
  border-radius: var(--wm-timepicker-border-radius);
19914
+ width: auto;
19329
19915
  }
19330
19916
  .wm-app .app-datetime tbody tr:first-child,
19331
19917
  .wm-app .app-datetime tbody tr:last-child,
@@ -19477,6 +20063,104 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
19477
20063
  width: auto;
19478
20064
  margin: 0 calc(50% - calc(var(--wm-toast-container-width)/2));
19479
20065
  }
20066
+ .wm-app .app-toggle.app-checkbox.checkbox label {
20067
+ align-items: center;
20068
+ display: inline-flex;
20069
+ flex-shrink: 0;
20070
+ position: relative;
20071
+ min-height: var(--wm-toggle-label-min-height);
20072
+ width: var(--wm-toggle-label-width);
20073
+ border-radius: 28px;
20074
+ user-select: none;
20075
+ -webkit-tap-highlight-color: transparent;
20076
+ }
20077
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"] {
20078
+ -webkit-appearance: none;
20079
+ z-index: 2;
20080
+ position: absolute;
20081
+ left: calc(-1 * var(--wm-space-1));
20082
+ top: calc(-1 * var(--wm-space-1));
20083
+ display: block;
20084
+ margin: 0;
20085
+ border-radius: var(--wm-radius-circle);
20086
+ width: var(--wm-toggle-state-layer-size);
20087
+ height: var(--wm-toggle-state-layer-size);
20088
+ cursor: pointer;
20089
+ }
20090
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:hover {
20091
+ background: var(--wm-toggle-state-hover);
20092
+ }
20093
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:active {
20094
+ background: var(--wm-toggle-state-active);
20095
+ }
20096
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:focus {
20097
+ background: var(--wm-toggle-state-focus);
20098
+ }
20099
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked {
20100
+ left: unset;
20101
+ right: calc(-1 * var(--wm-space-1));
20102
+ }
20103
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:hover {
20104
+ background: var(--wm-toggle-checked-state-hover);
20105
+ }
20106
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:hover + .caption:before {
20107
+ --wm-toggle-handle-checked-background: var(--wm-toggle-handle-checked-focus-background);
20108
+ }
20109
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:focus {
20110
+ background: var(--wm-toggle-checked-state-focus);
20111
+ }
20112
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:focus + .caption:before {
20113
+ --wm-toggle-handle-checked-background: var(--wm-toggle-handle-checked-focus-background);
20114
+ }
20115
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:active {
20116
+ background: var(--wm-toggle-checked-state-active);
20117
+ }
20118
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:active + .caption:before {
20119
+ --wm-toggle-handle-checked-background: var(--wm-toggle-handle-checked-active-background);
20120
+ }
20121
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked + .caption {
20122
+ background: var(--wm-toggle-track-active-background);
20123
+ border-color: var(--wm-toggle-track-active-background);
20124
+ }
20125
+ .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked + .caption:before {
20126
+ height: calc(var(--wm-toggle-handle-height) * 1.5);
20127
+ width: calc(var(--wm-toggle-handle-width) * 1.5);
20128
+ left: calc(100% - calc(var(--wm-toggle-handle-width) * 1.75));
20129
+ background: var(--wm-toggle-handle-checked-background);
20130
+ margin: 2px;
20131
+ border: unset;
20132
+ }
20133
+ .wm-app .app-toggle.app-checkbox.checkbox label .caption {
20134
+ position: absolute;
20135
+ inset: 0;
20136
+ background: var(--wm-toggle-track-background);
20137
+ border-radius: inherit;
20138
+ border: var(--wm-toggle-track-border-width) var(--wm-toggle-track-border-style) var(--wm-toggle-track-border-color);
20139
+ color: transparent;
20140
+ padding: unset;
20141
+ display: flex;
20142
+ place-items: center;
20143
+ }
20144
+ .wm-app .app-toggle.app-checkbox.checkbox label .caption:before {
20145
+ position: absolute;
20146
+ content: "";
20147
+ background: var(--wm-toggle-handle-background);
20148
+ border-radius: var(--wm-radius-circle);
20149
+ margin: 6px;
20150
+ transition: 0.25s ease-in;
20151
+ z-index: 1;
20152
+ left: 0;
20153
+ top: 0;
20154
+ border: unset;
20155
+ height: var(--wm-toggle-handle-height);
20156
+ width: var(--wm-toggle-handle-width);
20157
+ }
20158
+ .wm-app .app-toggle.app-checkbox.checkbox label .caption:after {
20159
+ display: none;
20160
+ }
20161
+ .wm-app .app-toggle.app-checkbox.checkbox label.unchecked:hover > input:hover + .caption:before {
20162
+ --wm-toggle-handle-background: var(--wm-toggle-handle-hover-background);
20163
+ }
19480
20164
  .wm-app .ui-widget {
19481
20165
  font-family: Verdana, Arial, sans-serif;
19482
20166
  font-size: 1.1em;
@@ -20351,6 +21035,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
20351
21035
  margin-left: - calc(var(--wm-popover-gap) * -1);
20352
21036
  }
20353
21037
  .wm-app .app-wizard {
21038
+ display: flex;
21039
+ flex-direction: column;
20354
21040
  position: relative;
20355
21041
  box-shadow: var(--wm-wizard-shadow);
20356
21042
  background: var(--wm-wizard-background);
@@ -20359,7 +21045,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
20359
21045
  .wm-app .app-wizard .app-wizard-heading {
20360
21046
  position: relative;
20361
21047
  width: 100%;
20362
- padding-top: var(--wm-wizard-heading-padding);
21048
+ padding: var(--wm-wizard-heading-padding);
21049
+ background: var(--wm-wizard-heading-background);
21050
+ border-radius: var(--wm-wizard-heading-radius);
20363
21051
  }
20364
21052
  .wm-app .app-wizard .app-wizard-heading .app-wizard-steps {
20365
21053
  display: flex;
@@ -20434,6 +21122,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
20434
21122
  }
20435
21123
  .wm-app .app-wizard .app-wizard-body {
20436
21124
  padding: var(--wm-wizard-stepper-body-padding);
21125
+ height: 100%;
20437
21126
  }
20438
21127
  .wm-app .app-wizard .app-wizard-body .app-wizard-step-content {
20439
21128
  font-family: var(--wm-wizard-stepper-body-font-family);
@@ -20457,6 +21146,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
20457
21146
  justify-content: space-between;
20458
21147
  padding: var(--wm-wizard-stepper-footer-padding);
20459
21148
  border-top: var(--wm-wizard-stepper-footer-border-width) var(--wm-wizard-stepper-footer-border-style) var(--wm-wizard-stepper-footer-border);
21149
+ background: var(--wm-wizard-stepper-footer-background);
21150
+ border-radius: var(--wm-wizard-stepper-footer-radius);
21151
+ }
21152
+ .wm-app .app-wizard .app-wizard-actions .app-wizard-skip {
21153
+ white-space: nowrap;
20460
21154
  }
20461
21155
  .wm-app .app-wizard .app-wizard-actions .app-wizard-actions-right {
20462
21156
  display: flex;
@@ -20697,9 +21391,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
20697
21391
  .wm-app .app-wizard.vertical .app-wizard-heading {
20698
21392
  border-right: var(--wm-wizard-vertical-heading-border-width) var(--wm-wizard-vertical-heading-border-style) var(--wm-wizard-vertical-heading-border);
20699
21393
  }
20700
- .wm-app .app-wizard.vertical .app-wizard-actions {
20701
- grid-column: 1 / -1;
20702
- }
20703
21394
  .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step {
20704
21395
  position: relative;
20705
21396
  }
@@ -20724,6 +21415,782 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
20724
21415
  flex-direction: row;
20725
21416
  justify-content: flex-start;
20726
21417
  }
21418
+ .wm-app .app-wizard.panel.clearfix.vertical::before {
21419
+ display: none;
21420
+ }
21421
+ .wm-app .app-wizard-steps.nav.nav-pills::before {
21422
+ display: none;
21423
+ }
21424
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number {
21425
+ min-width: var(--wm-wizard-stepper-step-width);
21426
+ }
21427
+ .wm-app .app-wizard.vertical .app-wizard-actions {
21428
+ grid-column: -1 / 1;
21429
+ }
21430
+ .wm-app .app-wizard.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:last-of-type)::before {
21431
+ top: 14px;
21432
+ }
21433
+ .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
21434
+ padding: 0;
21435
+ }
21436
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a:is(:hover, :focus) {
21437
+ background: transparent;
21438
+ }
21439
+ .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number {
21440
+ min-width: var(--wm-wizard-dotted-stepper-step-width);
21441
+ }
21442
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
21443
+ padding: 0;
21444
+ }
21445
+ .wm-app .app-richtexteditor {
21446
+ position: relative;
21447
+ overflow: inherit;
21448
+ }
21449
+ .wm-app .note-editor {
21450
+ position: relative;
21451
+ }
21452
+ .wm-app .note-editor.note-frame {
21453
+ border-radius: var(--wm-note-editor-radius);
21454
+ border: var(--wm-note-editor-border-width) var(--wm-note-editor-border-style) var(--wm-note-editor-border);
21455
+ }
21456
+ .wm-app .note-editor.note-frame .note-btn {
21457
+ padding: var(--wm-note-editor-btn-padding);
21458
+ min-height: var(--wm-note-editor-btn-min-height);
21459
+ min-width: var(--wm-note-editor-btn-width);
21460
+ height: fit-content;
21461
+ width: auto;
21462
+ border-radius: var(--wm-note-editor-btn-radius);
21463
+ white-space: nowrap;
21464
+ border: unset;
21465
+ }
21466
+ .wm-app .note-editor.note-frame .note-color-btn {
21467
+ white-space: unset;
21468
+ }
21469
+ .wm-app .note-editor.note-frame .note-toolbar {
21470
+ display: flex;
21471
+ gap: var(--wm-note-editor-toolbar-gap);
21472
+ flex-wrap: wrap;
21473
+ padding: var(--wm-note-editor-toolbar-padding);
21474
+ border-bottom: var(--wm-note-editor-toolbar-border-width) var(--wm-note-editor-toolbar-border-style) var(--wm-note-editor-toolbar-border);
21475
+ background: var(--wm-note-editor-toolbar-background);
21476
+ border-top-left-radius: inherit;
21477
+ border-top-right-radius: inherit;
21478
+ }
21479
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group {
21480
+ display: inline-flex;
21481
+ gap: var(--wm-note-editor-btn-group-gap);
21482
+ position: relative;
21483
+ }
21484
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group:not(:last-of-type, .note-align):before {
21485
+ position: absolute;
21486
+ width: 1px;
21487
+ height: 60%;
21488
+ content: "";
21489
+ background: var(--wm-note-editor-toolbar-border);
21490
+ right: calc(var(--wm-note-editor-toolbar-border-gap) * -1.5);
21491
+ top: 50%;
21492
+ opacity: 0.8;
21493
+ transform: translateY(-50%);
21494
+ }
21495
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-dropdown-menu {
21496
+ display: none;
21497
+ flex-direction: column;
21498
+ align-items: flex-start;
21499
+ width: auto;
21500
+ white-space: nowrap;
21501
+ border-radius: var(--wm-note-editor-dropdown-menu-border-radius);
21502
+ background: var(--wm-note-editor-dropdown-menu-background);
21503
+ box-shadow: var(--wm-note-editor-dropdown-menu-box-shadow);
21504
+ position: absolute;
21505
+ top: 100%;
21506
+ left: 0;
21507
+ z-index: 1000;
21508
+ overflow: auto;
21509
+ max-height: var(--wm-note-editor-dropdown-menu-max-height);
21510
+ }
21511
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item {
21512
+ padding-inline: var(--wm-note-editor-dropdown-menu-padding);
21513
+ padding-block: var(--wm-note-editor-dropdown-menu-padding);
21514
+ width: 100%;
21515
+ justify-content: unset;
21516
+ font-family: var(--wm-note-editor-dropdown-menu-item-font-family);
21517
+ font-size: var(--wm-note-editor-dropdown-menu-item-font-size);
21518
+ line-height: var(--wm-note-editor-dropdown-menu-item-line-height);
21519
+ font-weight: var(--wm-note-editor-dropdown-menu-item-font-weight);
21520
+ letter-spacing: var(--wm-note-editor-dropdown-menu-item-letter-spacing);
21521
+ color: var(--wm-note-editor-dropdown-menu-item-color);
21522
+ }
21523
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item blockquote {
21524
+ padding-block: var(--wm-note-editor-blockquote-block-padding);
21525
+ padding-inline: var(--wm-note-editor-blockquote-inline-padding);
21526
+ border-left: var(--wm-note-editor-blockquote-border-width) solid var(--wm-note-editor-blockquote-border-color);
21527
+ margin: 0;
21528
+ }
21529
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item :is(:hover, :active, :focus) blockquote {
21530
+ border-color: var(--wm-note-editor-blockquote-border-hover-color);
21531
+ }
21532
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item pre {
21533
+ color: var(--wm-note-editor-pre-color);
21534
+ background-color: var(--wm-note-editor-pre-background);
21535
+ border: var(--wm-note-editor-pre-border-width) solid var(--wm-note-editor-pre-border-color);
21536
+ border-radius: var(--wm-note-editor-pre-radius);
21537
+ padding: var(--wm-note-editor-pre-padding);
21538
+ font-size: var(--wm-note-editor-pre-font-size);
21539
+ font-family: var(--wm-note-editor-pre-font-family);
21540
+ font-weight: var(--wm-note-editor-pre-font-weight);
21541
+ line-height: var(--wm-note-editor-pre-line-height);
21542
+ width: 100%;
21543
+ margin: 0;
21544
+ }
21545
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item:before {
21546
+ content: "";
21547
+ position: absolute;
21548
+ inset: 0;
21549
+ width: 100%;
21550
+ height: 100%;
21551
+ opacity: 0;
21552
+ background: var(--wm-dropdown-menu-item-state-layer-color);
21553
+ border-radius: inherit;
21554
+ }
21555
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item:hover:before {
21556
+ opacity: var(--wm-note-editor-dropdown-menu-item-state-layer-opacity-hover);
21557
+ }
21558
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item:focus:before {
21559
+ opacity: var(--wm-note-editor-dropdown-menu-item-state-layer-opacity-focus);
21560
+ }
21561
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-dropdown-menu .note-dropdown-item:active:before {
21562
+ opacity: var(--wm-note-editor-dropdown-menu-item-state-layer-opacity-active);
21563
+ }
21564
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group.open .note-dropdown-menu {
21565
+ display: flex;
21566
+ }
21567
+ .wm-app .note-editor.note-frame .note-toolbar .note-dropdown-menu.note-table {
21568
+ min-width: unset;
21569
+ padding: var(--wm-space-2);
21570
+ }
21571
+ .wm-app .note-editor.note-frame .note-editing-area {
21572
+ position: relative;
21573
+ overflow: hidden;
21574
+ border-bottom-right-radius: inherit;
21575
+ border-bottom-left-radius: inherit;
21576
+ }
21577
+ .wm-app .note-editor.note-frame .note-editing-area .note-placeholder {
21578
+ z-index: 1;
21579
+ position: absolute;
21580
+ padding: var(--wm-note-editor-note-placeholder-pdding);
21581
+ }
21582
+ .wm-app .note-editor.note-frame .note-editing-area .note-editable {
21583
+ background: var(--wm-note-editable-background);
21584
+ padding: var(--wm-note-editable-padding);
21585
+ overflow: auto;
21586
+ color: var(--wm-note-editable-color);
21587
+ word-wrap: break-word;
21588
+ }
21589
+ .wm-app .note-editor.note-frame .note-editing-area .note-editable pre {
21590
+ display: block;
21591
+ padding: var(--wm-note-editor-pre-padding);
21592
+ margin: 0 0 9px;
21593
+ font-size: var(--wm-note-editor-pre-font-size);
21594
+ font-family: var(--wm-note-editor-pre-font-family);
21595
+ font-weight: var(--wm-note-editor-pre-font-weight);
21596
+ line-height: var(--wm-note-editor-pre-line-height);
21597
+ word-break: break-all;
21598
+ word-wrap: break-word;
21599
+ color: var(--wm-note-editor-pre-color);
21600
+ background-color: var(--wm-note-editor-pre-background);
21601
+ border: var(--wm-note-editor-pre-border-width) solid var(--wm-note-editor-pre-border-color);
21602
+ border-radius: var(--wm-note-editor-pre-radius);
21603
+ }
21604
+ .wm-app .note-editor.note-frame .note-editing-area .note-editable hr {
21605
+ border-color: var(--wm-note-editable-hr-color);
21606
+ border-bottom: 0;
21607
+ }
21608
+ .wm-app .note-editor.note-frame .note-editing-area .note-editable ul,
21609
+ .wm-app .note-editor.note-frame .note-editing-area .note-editable ol {
21610
+ padding-inline-start: calc(var(--wm-space-1) * 10);
21611
+ }
21612
+ .wm-app .note-editor.note-frame .note-editing-area .note-editable ul li {
21613
+ list-style-type: initial;
21614
+ }
21615
+ .wm-app .note-editor.note-frame .note-editing-area .note-editable ol li {
21616
+ list-style-type: decimal;
21617
+ }
21618
+ .wm-app .note-editor.note-frame .note-editing-area .note-codable {
21619
+ display: none;
21620
+ width: 100%;
21621
+ padding: var(--wm-note-editor-note-code-padding);
21622
+ margin-bottom: 0;
21623
+ font-size: var(--wm-note-editor-note-code-font-size);
21624
+ font-family: var(--wm-note-editor-note-code-font-family);
21625
+ font-weight: var(--wm-note-editor-note-code-font-weight);
21626
+ color: var(--wm-note-editor-note-code-color);
21627
+ background: var(--wm-note-editor-note-code-background);
21628
+ border: 0;
21629
+ border-radius: 0;
21630
+ box-shadow: none;
21631
+ resize: none;
21632
+ }
21633
+ .wm-app .note-editor.note-frame.fullscreen {
21634
+ position: fixed;
21635
+ top: 0;
21636
+ left: 0;
21637
+ z-index: 1050;
21638
+ width: 100% !important;
21639
+ }
21640
+ .wm-app .note-editor.note-frame.fullscreen .note-resizebar {
21641
+ display: none;
21642
+ }
21643
+ .wm-app .note-editor.note-frame .note-status-output {
21644
+ display: none;
21645
+ }
21646
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-btn-group .note-table .note-dimension-picker,
21647
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-table .note-dimension-picker {
21648
+ font-size: 18px;
21649
+ }
21650
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher,
21651
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher {
21652
+ position: absolute !important;
21653
+ z-index: 3;
21654
+ cursor: pointer;
21655
+ }
21656
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted,
21657
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted {
21658
+ position: relative !important;
21659
+ z-index: 1;
21660
+ width: 5em;
21661
+ height: 5em;
21662
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC);
21663
+ }
21664
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted,
21665
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted {
21666
+ position: absolute !important;
21667
+ z-index: 2;
21668
+ width: 1em;
21669
+ height: 1em;
21670
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC);
21671
+ }
21672
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-style blockquote,
21673
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-style h1,
21674
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-style h2,
21675
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-style h3,
21676
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-style h4,
21677
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-style h5,
21678
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-style h6,
21679
+ .wm-app .note-editor.note-frame .note-toolbar .note-style blockquote,
21680
+ .wm-app .note-editor.note-frame .note-toolbar .note-style h1,
21681
+ .wm-app .note-editor.note-frame .note-toolbar .note-style h2,
21682
+ .wm-app .note-editor.note-frame .note-toolbar .note-style h3,
21683
+ .wm-app .note-editor.note-frame .note-toolbar .note-style h4,
21684
+ .wm-app .note-editor.note-frame .note-toolbar .note-style h5,
21685
+ .wm-app .note-editor.note-frame .note-toolbar .note-style h6 {
21686
+ margin: 0;
21687
+ }
21688
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-dropdown-menu.note-check .note-dropdown-item.checked i,
21689
+ .wm-app .note-editor.note-frame .note-toolbar .note-dropdown-menu.note-check .note-dropdown-item i {
21690
+ visibility: hidden;
21691
+ }
21692
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-dropdown-menu.note-check .note-dropdown-item.checked i,
21693
+ .wm-app .note-editor.note-frame .note-toolbar .note-dropdown-menu.note-check .note-dropdown-item.checked i {
21694
+ visibility: visible;
21695
+ }
21696
+ .wm-app .note-editor.note-frame .note-toolbar .note-btn-group.open .note-dropdown-menu:has(.note-palette) {
21697
+ flex-direction: row;
21698
+ padding: var(--wm-note-editor-color-dropdown-padding);
21699
+ gap: var(--wm-note-editor-color-dropdown-gap);
21700
+ }
21701
+ .wm-app .note-editor.note-frame .note-toolbar .note-dropdown-menu .note-palette {
21702
+ width: var(--wm-note-editor-palette-width);
21703
+ display: flex;
21704
+ flex-direction: column;
21705
+ align-items: center;
21706
+ gap: var(--wm-note-editor-palette-gap);
21707
+ }
21708
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title,
21709
+ .wm-app .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title {
21710
+ font-weight: 700;
21711
+ }
21712
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset,
21713
+ .wm-app .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset {
21714
+ cursor: pointer;
21715
+ background-color: var(--wm-note-editor-color-reset-background);
21716
+ }
21717
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-color .note-dropdown-menu .note-color-palette,
21718
+ .wm-app .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-color-palette {
21719
+ display: flex;
21720
+ flex-direction: column;
21721
+ gap: var(--wm-note-editor-color-palette-gap-xs);
21722
+ }
21723
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-color .note-dropdown-menu .note-palette .note-color-row,
21724
+ .wm-app .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-row {
21725
+ display: flex;
21726
+ gap: var(--wm-note-editor-color-row-gap);
21727
+ }
21728
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-color .note-dropdown-menu .note-palette .note-color-row .note-color-btn,
21729
+ .wm-app .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-row .note-color-btn {
21730
+ min-width: var(--wm-note-editor-color-btn-size);
21731
+ min-height: var(--wm-note-editor-color-btn-size);
21732
+ border-radius: unset;
21733
+ }
21734
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-color .note-dropdown-menu .note-palette .note-color-select,
21735
+ .wm-app .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select {
21736
+ background: var(--wm-note-editor-color-select-background);
21737
+ }
21738
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-color .note-dropdown-menu .note-palette .note-color-select-btn,
21739
+ .wm-app .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select-btn {
21740
+ width: var(--wm-note-editor-color-select-btn-width);
21741
+ padding: unset;
21742
+ background: unset;
21743
+ height: var(--wm-note-editor-color-select-btn-height);
21744
+ min-height: var(--wm-note-editor-color-select-btn-min-height);
21745
+ }
21746
+ .wm-app .note-editor.note-frame .note-toolbar .note-color .note-dropdown-menu .note-palette .note-holder + div {
21747
+ display: flex;
21748
+ align-items: center;
21749
+ gap: var(--wm-space-2);
21750
+ }
21751
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-para .note-dropdown-menu,
21752
+ .wm-app .note-editor.note-frame .note-toolbar .note-para .note-dropdown-menu {
21753
+ padding: var(--wm-note-editor-para-dropdown-padding);
21754
+ }
21755
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-dropdown-menu,
21756
+ .wm-app .note-editor.note-frame .note-toolbar .note-dropdown-menu {
21757
+ min-width: var(--wm-note-editor-dropdown-menu-min-width);
21758
+ }
21759
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-dropdown-menu.right,
21760
+ .wm-app .note-editor.note-frame .note-toolbar .note-dropdown-menu.right {
21761
+ right: 0;
21762
+ left: auto;
21763
+ }
21764
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-dropdown-menu.right::before,
21765
+ .wm-app .note-editor.note-frame .note-toolbar .note-dropdown-menu.right::before {
21766
+ right: 9px;
21767
+ left: auto !important;
21768
+ }
21769
+ .wm-app .note-editor.note-frame .note-popover .note-popover-content .note-dropdown-menu.right::after,
21770
+ .wm-app .note-editor.note-frame .note-toolbar .note-dropdown-menu.right::after {
21771
+ right: 10px;
21772
+ left: auto !important;
21773
+ }
21774
+ .wm-app .note-editor.note-frame.codeview .note-editing-area .note-editable {
21775
+ display: none;
21776
+ }
21777
+ .wm-app .note-editor.note-frame.codeview .note-editing-area .note-codable {
21778
+ display: block;
21779
+ }
21780
+ .wm-app .note-editor .note-editing-area .note-editable blockquote {
21781
+ padding-block: var(--wm-note-editor-blockquote-block-padding);
21782
+ padding-inline: var(--wm-note-editor-blockquote-inline-padding);
21783
+ border-left: var(--wm-note-editor-blockquote-border-width) solid var(--wm-note-editor-blockquote-border-color);
21784
+ margin: 0;
21785
+ margin-bottom: var(--wm-note-editor-blockquote-margin);
21786
+ }
21787
+ .wm-app .note-editor .note-editing-area .note-editable table {
21788
+ width: 100%;
21789
+ border-collapse: collapse;
21790
+ }
21791
+ .wm-app .note-editor .note-editing-area .note-editable table td,
21792
+ .wm-app .note-editor .note-editing-area .note-editable table th {
21793
+ padding: var(--wm-note-editor-td-padding);
21794
+ border: var(--wm-note-editor-td-border-width) var(--wm-note-editor-td-border-style) var(--wm-note-editor-td-border-color);
21795
+ }
21796
+ .wm-app .note-editor .note-editing-area .note-editable sup {
21797
+ vertical-align: super;
21798
+ }
21799
+ .wm-app .note-editor .note-editing-area .note-editable sub {
21800
+ vertical-align: sub;
21801
+ }
21802
+ .wm-app .note-editor .note-editing-area .note-editable a {
21803
+ font-family: inherit;
21804
+ font-weight: inherit;
21805
+ text-decoration: inherit;
21806
+ background-color: inherit;
21807
+ }
21808
+ .wm-app .note-editor .note-editing-area .note-editable figure {
21809
+ margin: 0;
21810
+ }
21811
+ .wm-app .note-editor .note-dropzone {
21812
+ position: absolute;
21813
+ z-index: 1071;
21814
+ display: none;
21815
+ color: var(--wm-note-editor-dropzone-color);
21816
+ background: var(--wm-note-editor-dropzone-background);
21817
+ opacity: 0.95;
21818
+ }
21819
+ .wm-app .note-editor .note-dropzone .note-dropzone-message {
21820
+ font-size: var(--wm-h2-font-size);
21821
+ font-weight: var(--wm-font-weight-bold);
21822
+ display: flex;
21823
+ width: inherit;
21824
+ justify-content: center;
21825
+ align-items: center;
21826
+ }
21827
+ .wm-app .note-editor .note-dropzone.hover {
21828
+ color: var(--wm-note-editor-dropzone-hover-color);
21829
+ }
21830
+ .wm-app .note-editor .dragover .note-dropzone {
21831
+ display: flex;
21832
+ border-radius: inherit;
21833
+ }
21834
+ .wm-app .note-modal-backdrop {
21835
+ position: fixed;
21836
+ inset: 0;
21837
+ z-index: 1040;
21838
+ width: 100%;
21839
+ height: 100%;
21840
+ display: none;
21841
+ justify-content: center;
21842
+ align-items: center;
21843
+ background: var(--wm-modal-backdrop-background);
21844
+ padding: var(--wm-modal-margin);
21845
+ margin: var(--wm-space-0);
21846
+ pointer-events: none;
21847
+ }
21848
+ .wm-app .note-modal-backdrop.open {
21849
+ display: block;
21850
+ }
21851
+ .wm-app .note-modal {
21852
+ z-index: 1050;
21853
+ display: none;
21854
+ overflow: hidden;
21855
+ opacity: 1;
21856
+ position: fixed;
21857
+ inset: 0;
21858
+ width: 100%;
21859
+ height: 100%;
21860
+ justify-content: center;
21861
+ align-items: center;
21862
+ background: var(--wm-modal-backdrop-background);
21863
+ padding: var(--wm-modal-margin);
21864
+ margin: var(--wm-space-0);
21865
+ pointer-events: none;
21866
+ }
21867
+ .wm-app .note-modal.open {
21868
+ display: flex;
21869
+ }
21870
+ .wm-app .note-modal-content {
21871
+ display: flex;
21872
+ flex-direction: column;
21873
+ width: var(--wm-modal-width);
21874
+ height: var(--wm-modal-height);
21875
+ max-width: 100%;
21876
+ max-height: 100%;
21877
+ background: var(--wm-modal-background);
21878
+ border-radius: var(--wm-modal-radius);
21879
+ pointer-events: auto;
21880
+ overflow: auto;
21881
+ }
21882
+ .wm-app .note-modal-header {
21883
+ padding: var(--wm-modal-header-padding);
21884
+ }
21885
+ .wm-app .note-modal-header .close {
21886
+ width: var(--wm-btn-icon-md-width);
21887
+ height: var(--wm-btn-icon-md-height);
21888
+ min-height: var(--wm-btn-icon-md-height);
21889
+ margin: var(--wm-btn-icon-md-margin);
21890
+ --wm-btn-padding: var(--wm-btn-icon-md-padding);
21891
+ --wm-btn-radius: var(--wm-btn-icon-md-radius);
21892
+ --wm-btn-icon-size: var(--wm-btn-icon-md-size);
21893
+ position: absolute;
21894
+ right: 0;
21895
+ top: 0;
21896
+ }
21897
+ .wm-app .note-modal-header .close .note-icon-close {
21898
+ font-weight: 700;
21899
+ }
21900
+ .wm-app .note-modal-body {
21901
+ position: relative;
21902
+ height: 100%;
21903
+ padding: var(--wm-modal-body-padding);
21904
+ }
21905
+ .wm-app .note-modal-body:has(.help-list-item) label {
21906
+ margin-bottom: var(--wm-space-2);
21907
+ }
21908
+ .wm-app .note-modal-body .checkbox > label {
21909
+ padding: var(--wm-space-0);
21910
+ display: inline-flex;
21911
+ align-items: center;
21912
+ padding-left: var(--wm-space-11);
21913
+ width: auto;
21914
+ min-height: var(--wm-checkbox-state-layer-size);
21915
+ font-size: var(--wm-checkbox-caption-font-size);
21916
+ font-family: var(--wm-checkbox-caption-font-family);
21917
+ font-weight: var(--wm-checkbox-caption-font-weight);
21918
+ line-height: var(--wm-checkbox-caption-line-height);
21919
+ letter-spacing: var(--wm-checkbox-caption-letter-spacing);
21920
+ cursor: pointer;
21921
+ position: relative;
21922
+ }
21923
+ .wm-app .note-modal-body .checkbox > label:before {
21924
+ width: var(--wm-checkbox-size);
21925
+ height: var(--wm-checkbox-size);
21926
+ left: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size)) / 2);
21927
+ top: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size)) / 2);
21928
+ background: var(--wm-checkbox-background);
21929
+ border: var(--wm-checkbox-border-width) solid var(--wm-checkbox-border-color);
21930
+ border-radius: var(--wm-checkbox-border-radius);
21931
+ box-sizing: border-box;
21932
+ position: absolute;
21933
+ z-index: 1051;
21934
+ content: "";
21935
+ display: inline-flex;
21936
+ }
21937
+ .wm-app .note-modal-body .checkbox > label:after {
21938
+ top: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size)) / 2);
21939
+ left: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size)) / 2);
21940
+ width: var(--wm-checkbox-icon-size);
21941
+ height: calc(var(--wm-checkbox-icon-size)* 0.5);
21942
+ border: solid 2px var(--wm-checkbox-icon-color-selected);
21943
+ border-right: none;
21944
+ border-top: none;
21945
+ transform: translate(3px, 4px) rotate(-45deg) scale(0);
21946
+ transition: all 0.2s ease-in-out;
21947
+ position: absolute;
21948
+ z-index: 1051;
21949
+ content: "";
21950
+ display: inline-flex;
21951
+ }
21952
+ .wm-app .note-modal-body .checkbox > label > input[type="checkbox"] {
21953
+ appearance: none;
21954
+ -moz-appearance: none;
21955
+ -webkit-appearance: none;
21956
+ margin: 0;
21957
+ width: var(--wm-checkbox-state-layer-size);
21958
+ height: var(--wm-checkbox-state-layer-size);
21959
+ position: absolute;
21960
+ left: 0px;
21961
+ border-radius: var(--wm-radius-circle);
21962
+ z-index: 1052;
21963
+ cursor: pointer;
21964
+ }
21965
+ .wm-app .note-modal-body .checkbox > label > input[type="checkbox"]:hover {
21966
+ background: var(--wm-checkbox-state-hover);
21967
+ }
21968
+ .wm-app .note-modal-body .checkbox > label > input[type="checkbox"]:focus {
21969
+ background: var(--wm-checkbox-state-focus);
21970
+ outline: 0 !important;
21971
+ }
21972
+ .wm-app .note-modal-body .checkbox > label > input[type="checkbox"]:active {
21973
+ background: var(--wm-checkbox-state-active);
21974
+ }
21975
+ .wm-app .note-modal-body .checkbox > label > input[type="checkbox"]:checked:hover {
21976
+ background: var(--wm-checkbox-selected-state-hover);
21977
+ }
21978
+ .wm-app .note-modal-body .checkbox > label > input[type="checkbox"]:checked:focus {
21979
+ background: var(--wm-checkbox-selected-state-focus);
21980
+ }
21981
+ .wm-app .note-modal-body .checkbox > label > input[type="checkbox"]:checked:active {
21982
+ background: var(--wm-checkbox-selected-state-active);
21983
+ }
21984
+ .wm-app .note-modal-body .checkbox:has(input[type="checkbox"]:checked) > label:before {
21985
+ background: var(--wm-checkbox-background-selected);
21986
+ border-color: var(--wm-checkbox-border-color-selected);
21987
+ }
21988
+ .wm-app .note-modal-body .checkbox:has(input[type="checkbox"]:checked) > label:after {
21989
+ transform: translate(3px, 4px) rotate(-45deg) scale(1);
21990
+ }
21991
+ .wm-app .note-modal-footer {
21992
+ padding: var(--wm-modal-footer-padding);
21993
+ display: flex;
21994
+ flex-direction: row;
21995
+ justify-content: flex-end;
21996
+ gap: var(--wm-modal-footer-gap);
21997
+ }
21998
+ .wm-app .note-modal-title {
21999
+ width: 100%;
22000
+ display: flex;
22001
+ align-items: center;
22002
+ flex-wrap: wrap;
22003
+ gap: var(--wm-modal-title-gap);
22004
+ word-break: break-word;
22005
+ }
22006
+ .wm-app .note-popover {
22007
+ position: absolute;
22008
+ z-index: 1060;
22009
+ display: none;
22010
+ background: var(--wm-note-editor-popover-background);
22011
+ border-radius: var(--wm-note-editor-popover-radius);
22012
+ border: var(--wm-border-width) var(--wm-border-style) var(--wm-note-editor-popover-border);
22013
+ padding: var(--wm-note-editor-popover-padding);
22014
+ }
22015
+ .wm-app .note-popover.in {
22016
+ display: flex;
22017
+ }
22018
+ .wm-app .note-popover.top {
22019
+ padding: var(--wm-note-editor-popover-padding-value) 0;
22020
+ margin-top: calc(var(--wm-note-editor-popover-margin-value) * -1);
22021
+ }
22022
+ .wm-app .note-popover.top .note-popover-arrow {
22023
+ bottom: -11px;
22024
+ left: 50%;
22025
+ margin-left: calc(var(--wm-note-editor-popover-arrow-margin-value) * -1.25);
22026
+ border-bottom-width: 0;
22027
+ border-top-color: var(--wm-note-editor-popover-border);
22028
+ }
22029
+ .wm-app .note-popover.top .note-popover-arrow:after {
22030
+ bottom: 1px;
22031
+ margin-left: calc(var(--wm-note-editor-popover-arrow-margin-value) * -1.25);
22032
+ border-top-color: var(--wm-note-editor-popover-arrow-background);
22033
+ border-bottom-width: 0;
22034
+ content: " ";
22035
+ }
22036
+ .wm-app .note-popover.right {
22037
+ padding: 0 var(--wm-note-editor-popover-padding-value);
22038
+ margin-left: var(--wm-note-editor-popover-margin-value);
22039
+ }
22040
+ .wm-app .note-popover.right .note-popover-arrow {
22041
+ top: 50%;
22042
+ left: -11px;
22043
+ margin-top: calc(var(--wm-note-editor-popover-arrow-margin-value) * -1.25);
22044
+ border-left-width: 0;
22045
+ border-right-color: var(--wm-note-editor-popover-border);
22046
+ }
22047
+ .wm-app .note-popover.right .note-popover-arrow:after {
22048
+ left: 1px;
22049
+ margin-top: -10px;
22050
+ border-right-color: var(--wm-note-editor-popover-arrow-background);
22051
+ border-left-width: 0;
22052
+ content: " ";
22053
+ }
22054
+ .wm-app .note-popover.bottom {
22055
+ padding: var(--wm-note-editor-popover-padding-value) 0;
22056
+ margin-top: var(--wm-note-editor-popover-margin-value);
22057
+ }
22058
+ .wm-app .note-popover.bottom .note-popover-arrow {
22059
+ top: -11px;
22060
+ left: 50%;
22061
+ margin-left: calc(var(--wm-note-editor-popover-arrow-margin-value) * -1.25);
22062
+ border-top-width: 0;
22063
+ border-bottom-color: var(--wm-note-editor-popover-border);
22064
+ }
22065
+ .wm-app .note-popover.bottom .note-popover-arrow:after {
22066
+ top: 1px;
22067
+ margin-left: calc(var(--wm-note-editor-popover-arrow-margin-value) * -1.25);
22068
+ border-bottom-color: var(--wm-note-editor-popover-arrow-background);
22069
+ border-top-width: 0;
22070
+ content: " ";
22071
+ }
22072
+ .wm-app .note-popover.left {
22073
+ padding: 0 var(--wm-note-editor-popover-padding-value);
22074
+ margin-left: calc(var(--wm-note-editor-popover-margin-value) * -1);
22075
+ }
22076
+ .wm-app .note-popover.left .note-popover-arrow {
22077
+ top: 50%;
22078
+ right: -11px;
22079
+ margin-top: calc(var(--wm-note-editor-popover-arrow-margin-value) * -1.25);
22080
+ border-right-width: 0;
22081
+ border-left-color: var(--wm-note-editor-popover-border);
22082
+ }
22083
+ .wm-app .note-popover.left .note-popover-arrow:after {
22084
+ right: 1px;
22085
+ margin-top: -10px;
22086
+ border-left-color: var(--wm-note-editor-popover-arrow-background);
22087
+ border-right-width: 0;
22088
+ content: " ";
22089
+ }
22090
+ .wm-app .note-popover .note-children-container {
22091
+ padding: var(--wm-note-editor-popover-padding-container);
22092
+ }
22093
+ .wm-app .note-popover .note-children-container .note-add,
22094
+ .wm-app .note-popover .note-children-container .note-delete {
22095
+ gap: var(--wm-note-editor-popover-btn-group-gap);
22096
+ display: flex;
22097
+ }
22098
+ .wm-app .note-popover-arrow {
22099
+ position: absolute;
22100
+ width: 0;
22101
+ height: 0;
22102
+ border: 11px solid transparent;
22103
+ }
22104
+ .wm-app .note-popover-arrow:after {
22105
+ position: absolute;
22106
+ display: block;
22107
+ width: 0;
22108
+ height: 0;
22109
+ border-color: transparent;
22110
+ border-style: solid;
22111
+ border-width: 10px;
22112
+ content: " ";
22113
+ }
22114
+ .wm-app .note-popover-content {
22115
+ min-width: var(--wm-note-editor-popover-content-min-width);
22116
+ min-height: var(--wm-note-editor-popover-content-min-height);
22117
+ padding: var(--wm-note-editor-popover-content-padding);
22118
+ color: var(--wm-note-editor-popover-content-color);
22119
+ text-align: center;
22120
+ background-color: var(--wm-note-editor-popover-content-background);
22121
+ }
22122
+ .wm-app .note-tooltip {
22123
+ position: absolute;
22124
+ z-index: 1070;
22125
+ display: block;
22126
+ font-size: var(--wm-note-editor-tooltip-font-size);
22127
+ font-family: var(--wm-note-editor-tooltip-font-family);
22128
+ font-weight: var(--wm-note-editor-tooltip-font-weight);
22129
+ opacity: 0;
22130
+ padding: var(--wm-note-editor-tooltip-padding);
22131
+ border-radius: var(--wm-note-editor-tooltip-radius);
22132
+ }
22133
+ .wm-app .note-tooltip.in {
22134
+ opacity: 0.9;
22135
+ }
22136
+ .wm-app .note-tooltip.top {
22137
+ padding-inline: unset;
22138
+ margin-top: calc(var(--wm-note-editor-tooltip-margin-value) * -1);
22139
+ }
22140
+ .wm-app .note-tooltip.top .note-tooltip-arrow {
22141
+ bottom: 0;
22142
+ left: 50%;
22143
+ margin-left: calc(var(--wm-note-editor-tooltip-arrow-margin-value) * -1);
22144
+ border-top-color: var(--wm-note-editor-tooltip-border-color);
22145
+ border-width: var(--wm-note-editor-tooltip-arrow-border-width) var(--wm-note-editor-tooltip-arrow-border-width) 0;
22146
+ }
22147
+ .wm-app .note-tooltip.right {
22148
+ padding-block: unset;
22149
+ margin-left: var(--wm-note-editor-tooltip-margin-value);
22150
+ }
22151
+ .wm-app .note-tooltip.right .note-tooltip-arrow {
22152
+ top: 50%;
22153
+ left: 0;
22154
+ margin-top: calc(var(--wm-note-editor-tooltip-arrow-margin-value) * -1);
22155
+ border-right-color: var(--wm-note-editor-tooltip-border-color);
22156
+ border-width: var(--wm-note-editor-tooltip-arrow-border-width) var(--wm-note-editor-tooltip-arrow-border-width) var(--wm-note-editor-tooltip-arrow-border-width) 0;
22157
+ }
22158
+ .wm-app .note-tooltip.bottom {
22159
+ padding-inline: unset;
22160
+ margin-top: var(--wm-note-editor-tooltip-margin-value);
22161
+ }
22162
+ .wm-app .note-tooltip.bottom .note-tooltip-arrow {
22163
+ top: 0;
22164
+ left: 50%;
22165
+ margin-left: calc(var(--wm-note-editor-tooltip-arrow-margin-value) * -1);
22166
+ border-bottom-color: var(--wm-note-editor-tooltip-border-color);
22167
+ border-width: 0 var(--wm-note-editor-tooltip-arrow-border-width) var(--wm-note-editor-tooltip-arrow-border-width);
22168
+ }
22169
+ .wm-app .note-tooltip.left {
22170
+ padding-block: unset;
22171
+ margin-left: calc(var(--wm-note-editor-tooltip-margin-value) * -1);
22172
+ }
22173
+ .wm-app .note-tooltip.left .note-tooltip-arrow {
22174
+ top: 50%;
22175
+ right: 0;
22176
+ margin-top: calc(var(--wm-note-editor-tooltip-arrow-margin-value) * -1);
22177
+ border-left-color: var(--wm-note-editor-tooltip-border-color);
22178
+ border-width: var(--wm-note-editor-tooltip-arrow-border-width) 0 var(--wm-note-editor-tooltip-arrow-border-width) var(--wm-note-editor-tooltip-arrow-border-width);
22179
+ }
22180
+ .wm-app .note-tooltip-arrow {
22181
+ position: absolute;
22182
+ width: 0;
22183
+ height: 0;
22184
+ border-color: transparent;
22185
+ border-style: var(--wm-border-style);
22186
+ }
22187
+ .wm-app .note-tooltip-content {
22188
+ max-width: var(--wm-note-editor-tooltip-content-max-width);
22189
+ padding: var(--wm-note-editor-tooltip-content-padding);
22190
+ color: var(--wm-note-editor-tooltip-content-color);
22191
+ text-align: center;
22192
+ background: var(--wm-note-editor-tooltip-content-background);
22193
+ }
20727
22194
  .wm-app .animated {
20728
22195
  -webkit-animation-duration: 1s;
20729
22196
  animation-duration: 1s;