@posiwise/core-styles 0.0.41 → 1.0.0

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.
Files changed (33) hide show
  1. package/css/google-fonts.css +1 -4
  2. package/css/hopscotch.css +1 -1
  3. package/package.json +4 -4
  4. package/scss/_dashboard.scss +1 -1
  5. package/scss/_dynamic-styles.scss +7 -873
  6. package/scss/common/landing-page-a/landing-page-style-1.scss +7 -7
  7. package/scss/common/landing-page-b/banner.scss +8 -8
  8. package/scss/common/landing-page-b/contact-us.scss +4 -4
  9. package/scss/common/landing-page-b/explainer.scss +6 -6
  10. package/scss/common/landing-page-b/explainer2.scss +1 -1
  11. package/scss/common/landing-page-b/landing-page-style-2.scss +3 -4
  12. package/scss/custom-bootstrap/_badge.scss +25 -35
  13. package/scss/custom-bootstrap/_type.scss +1 -7
  14. package/scss/dashboard/_bootstrap-social.scss +25 -25
  15. package/scss/dashboard/_coming-soon.scss +1 -1
  16. package/scss/dashboard/_components.scss +1 -1
  17. package/scss/dashboard/_email.scss +7 -7
  18. package/scss/dashboard/_helper.scss +7 -17
  19. package/scss/dashboard/_icons.scss +0 -7
  20. package/scss/dashboard/_misc.scss +1 -1
  21. package/scss/dashboard/_palette.scss +125 -284
  22. package/scss/dashboard/_profile.scss +1 -1
  23. package/scss/dashboard/_tabs.scss +0 -18
  24. package/scss/dashboard/mixins/_utilities.scss +1 -1
  25. package/scss/dashboard/mixins/_vendor-prefixes.scss +2 -2
  26. package/scss/plugins/perfect-scrollbar/_variables.scss +1 -1
  27. package/scss/public-pages/_layout.scss +1 -8
  28. package/scss/shared/_prime-ng.scss +180 -213
  29. package/scss/variables/_app-colors-variables.scss +1 -7
  30. package/scss/variables/_branding-variables.scss +7 -9
  31. package/scss/variables/_generic-variables.scss +5 -5
  32. package/scss/variables/_primeng-variables.scss +38 -38
  33. package/app.scss +0 -45
@@ -3,68 +3,12 @@
3
3
  :root {
4
4
  --titles: rgb(34 34 34);
5
5
  --tabs_bg: rgb(23, 105, 225);
6
- --tabs_sub_bg: rgb(70, 136, 236);
7
6
  --tabs_text: rgb(255, 255, 255);
8
7
  --sidebar_bg: rgb(0, 48, 63);
9
8
  --sidebar_text: rgb(255, 255, 255);
10
9
  --first: rgb(23 105 225);
11
10
  --second: rgb(54 194 131);
12
11
  --text: rgb(34 34 34);
13
-
14
- // PrimeNG Calendar icon CSS variables override
15
- --p-datepicker-dropdown-color: var(--first);
16
- --p-datepicker-trigger-color: var(--first);
17
- --p-button-text-color: var(--first);
18
-
19
- // PrimeNG Select option selected CSS variables override
20
- --p-select-option-selected-background: var(--first);
21
- --p-select-option-selected-color: #ffffff;
22
-
23
- // PrimeNG Autocomplete option selected CSS variables override
24
- --p-autocomplete-option-selected-background: var(--first);
25
- --p-autocomplete-option-selected-color: #ffffff;
26
-
27
- // PrimeNG Chip background CSS variables override
28
- --p-chip-background: var(--first);
29
- --p-chip-color: #ffffff;
30
-
31
- // PrimeNG Autocomplete dropdown button CSS variables override
32
- --p-autocomplete-dropdown-background: var(--first);
33
- --p-autocomplete-dropdown-color: #ffffff;
34
- --p-autocomplete-dropdown-border-color: var(--first);
35
-
36
- // PrimeNG Autocomplete input border CSS variables override
37
- --p-autocomplete-focus-border-color: var(--first);
38
- --p-autocomplete-hover-border-color: var(--first);
39
-
40
- // PrimeNG Checkbox checked CSS variables override
41
- --p-checkbox-checked-background: var(--first);
42
- --p-checkbox-checked-border-color: var(--first);
43
-
44
- // PrimeNG Multiselect option selected CSS variables override
45
- --p-multiselect-option-selected-background: var(--first);
46
- --p-multiselect-option-selected-color: #ffffff;
47
- --p-multiselect-option-selected-focus-background: var(--first);
48
- --p-multiselect-option-selected-focus-color: #ffffff;
49
-
50
- // PrimeNG Paginator selected page CSS variables override
51
- --p-paginator-nav-button-selected-background: var(--tabs_bg);
52
- --p-paginator-nav-button-selected-color: var(--tabs_text);
53
- --p-paginator-nav-button-selected-border-color: var(--tabs_bg);
54
-
55
- // PrimeNG Accordion toggle icon CSS variables override
56
- --p-accordion-header-toggle-icon-color: rgb(111 111 111);
57
- --p-accordion-header-toggle-icon-active-color: rgb(255 255 255);
58
- }
59
-
60
- .plot-container,
61
- .svg-container,
62
- .main-svg,
63
- .xy {
64
- width: 100% !important;
65
- height: 450px !important;
66
- min-height: 450px !important;
67
- max-height: 450px !important;
68
12
  }
69
13
 
70
14
  :root {
@@ -120,12 +64,8 @@
120
64
  }
121
65
 
122
66
  .p-menuitem-link.p-menuitem-link-active {
123
- background-color: var(--tabs_bg) !important;
67
+ background-color: var(--tabs_bg);
124
68
  color: var(--tabs_text);
125
- &:hover {
126
- background-color: var(--tabs_bg) !important;
127
- color: var(--tabs_text) !important;
128
- }
129
69
  }
130
70
 
131
71
  .p-menuitem-link {
@@ -144,30 +84,10 @@
144
84
  }
145
85
  }
146
86
  }
147
-
148
- .p-tabmenuitem-active {
149
- background-color: var(--tabs_bg) !important;
150
- color: var(--tabs_text) !important;
151
-
152
- a,
153
- .p-menuitem-link {
154
- background-color: var(--tabs_bg) !important;
155
- color: var(--tabs_text) !important;
156
- }
157
- }
158
87
  }
159
88
  }
160
89
  }
161
90
 
162
- .custom-tooltip .tooltip-inner {
163
- /* Provides space at the bottom */
164
- max-width: 500px !important; /* Width for readability */
165
- max-height: 900px !important; /* Limits height for long content */
166
- overflow-y: auto !important;
167
- padding: 10px !important;
168
- text-align: left !important;
169
- }
170
-
171
91
  h1,
172
92
  h2,
173
93
  h3,
@@ -199,10 +119,6 @@
199
119
  }
200
120
  }
201
121
 
202
- .btn-filter-primary {
203
- color: var(--first) !important;
204
- }
205
-
206
122
  .btn-primary {
207
123
  background-color: var(--first) !important;
208
124
  border-color: var(--first) !important;
@@ -218,43 +134,19 @@
218
134
  color: var(--tabs_text) !important;
219
135
  }
220
136
 
221
- .analytics {
222
- padding-bottom: 30px;
223
-
224
- .primeng-datatable-container table thead tr th {
225
- background-color: var(--tabs_bg) !important;
226
- position: relative;
227
- padding: 3px 10px;
228
- }
229
- .primeng-datatable-container table thead tr th::after {
230
- content: '';
231
- position: absolute;
232
- inset: 0;
233
- background-color: rgba(255, 255, 255, 0.2);
234
- pointer-events: none;
235
- }
236
- }
237
-
238
137
  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
239
138
  background-color: var(--tabs_bg) !important;
240
139
  border-color: var(--tabs_bg) !important;
241
140
  color: var(--tabs_text) !important;
242
141
  }
243
142
 
244
- .p-paginator-page.p-paginator-page-selected,
245
- .p-paginator-page.p-highlight {
246
- background-color: var(--tabs_bg) !important;
247
- border-color: var(--tabs_bg) !important;
248
- color: var(--tabs_text) !important;
249
- }
250
-
251
143
  pw-posts-list {
252
144
  ul.tags li {
253
145
  color: var(--titles);
254
146
  }
255
147
  }
256
148
 
257
- // sign in buttons
149
+ // signin buttons
258
150
  .sign-btn {
259
151
  background-color: var(--first);
260
152
  color: #fff;
@@ -332,19 +224,6 @@
332
224
  color: #fff !important;
333
225
  }
334
226
 
335
- .hopscotch-bubble-container {
336
- width: 400px !important; /* Adjust the width as needed */
337
- max-width: 100%; /* Ensure it does not exceed the viewport */
338
- }
339
-
340
- .hopscotch-bubble .hopscotch-bubble-content {
341
- padding: 10px; /* Optional: Adjust padding for better spacing */
342
- }
343
- .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
344
- color: #ffffff;
345
- background: var(--first) !important;
346
- }
347
-
348
227
  .p-autocomplete {
349
228
  .p-button,
350
229
  .p-button:enabled:active,
@@ -354,33 +233,7 @@
354
233
  }
355
234
  .p-autocomplete-multiple-container {
356
235
  .p-autocomplete-token {
357
- background: var(--first) !important;
358
- color: #ffffff !important;
359
- }
360
- }
361
- .p-autocomplete-dropdown {
362
- background-color: var(--first) !important;
363
- border-color: var(--first) !important;
364
- color: #ffffff !important;
365
-
366
- svg,
367
- .p-icon,
368
- i {
369
- color: #ffffff !important;
370
- fill: #ffffff !important;
371
- }
372
- }
373
-
374
- .p-autocomplete-input-multiple,
375
- .p-inputtext {
376
- &:hover {
377
- border-color: var(--first) !important;
378
- }
379
-
380
- &:focus,
381
- &.p-focus {
382
- border-color: var(--first) !important;
383
- box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
236
+ background: var(--first);
384
237
  }
385
238
  }
386
239
  }
@@ -554,21 +407,10 @@
554
407
  }
555
408
  }
556
409
  }
557
- .p-multiselect-header .p-checkbox .p-checkbox-box.p-highlight {
558
- background: var(--first) !important;
559
- border-color: var(--first);
560
- }
561
-
562
- .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
563
- box-shadow: 0 0 0 0.2rem var(--first) (255, 0, 0, 0.5); // Adjusted to red
564
- border-color: var(--first); // Red border
565
- }
566
-
567
410
  .p-multiselect-item {
568
411
  .p-checkbox {
569
412
  .p-checkbox-box.p-highlight {
570
413
  background: var(--first);
571
- border-color: var(--first);
572
414
  }
573
415
  }
574
416
  }
@@ -580,19 +422,11 @@
580
422
  }
581
423
  }
582
424
 
583
- // spinner color - PrimeNG 19 updated selectors
584
- p-progressspinner .p-progressspinner-circle,
585
- p-progressSpinner .p-progress-spinner-circle,
586
- .p-progressspinner .p-progressspinner-circle {
587
- animation:
588
- custom-progress-spinner-dash 1.5s ease-in-out infinite,
589
- custom-progress-spinner-color 6s ease-in-out infinite;
590
- }
425
+ // spinner color
591
426
 
592
- // Ensure spinner SVG uses custom colors
593
- p-progressspinner svg circle,
594
- p-progressSpinner svg circle {
595
- stroke: var(--first) !important;
427
+ p-progressSpinner .p-progress-spinner-circle {
428
+ animation: custom-progress-spinner-dash 1.5s ease-in-out infinite,
429
+ custom-progress-spinner-color 6s ease-in-out infinite;
596
430
  }
597
431
 
598
432
  @keyframes custom-progress-spinner-color {
@@ -697,704 +531,4 @@
697
531
  .toast-container {
698
532
  position: fixed !important;
699
533
  }
700
- i.fa-info-circle {
701
- font-size: 16px;
702
- }
703
-
704
- p-radiobutton .p-highlight .p-radiobutton-icon {
705
- background-color: var(--first) !important;
706
- }
707
-
708
- .badge.bg-light {
709
- &:not(.text-dark) {
710
- @extend .text-dark;
711
- }
712
- }
713
- .badge.bg-white {
714
- &:not(.text-dark) {
715
- @extend .text-dark;
716
- }
717
- }
718
- .btn.btn-primary {
719
- &:not(.text-light) {
720
- @extend .text-light;
721
- }
722
- }
723
- .btn.btn-primary {
724
- &:not(.text-light) {
725
- @extend .text-light;
726
- }
727
- }
728
- .btn.btn-secondary {
729
- &:not(.text-light) {
730
- @extend .text-light;
731
- }
732
- }
733
- .btn.btn-secondary {
734
- &:not(.text-light) {
735
- @extend .text-light;
736
- }
737
- }
738
- .btn.btn-primary:hover {
739
- background-color: transparent !important;
740
- color: var(--first) !important;
741
- }
742
- .btn.btn-secondary:hover {
743
- background-color: transparent !important;
744
- color: var(--first) !important;
745
- }
746
-
747
- // PrimeNG Datepicker - Selected date color (blue instead of green)
748
- .p-datepicker {
749
- table {
750
- td {
751
- span.p-highlight,
752
- span.p-datepicker-day-selected,
753
- &.p-highlight > span {
754
- background-color: var(--first) !important;
755
- color: #ffffff !important;
756
- }
757
-
758
- &.p-datepicker-today {
759
- > span.p-highlight {
760
- background-color: var(--first) !important;
761
- color: #ffffff !important;
762
- }
763
- }
764
-
765
- &.p-datepicker-current-day {
766
- > span {
767
- background-color: var(--first) !important;
768
- color: #ffffff !important;
769
- }
770
- }
771
- }
772
- }
773
- }
774
-
775
- // PrimeNG Calendar icon color
776
- .p-calendar {
777
- .p-datepicker-trigger,
778
- .p-datepicker-dropdown {
779
- background-color: transparent !important;
780
- border-color: var(--first) !important;
781
- color: var(--first) !important;
782
-
783
- &:hover {
784
- background-color: rgba(23, 105, 225, 0.1) !important;
785
- border-color: var(--first) !important;
786
- }
787
-
788
- // Icon/SVG color - target all possible icon elements
789
- svg,
790
- .p-icon,
791
- i,
792
- calendaricon {
793
- color: var(--first) !important;
794
- fill: var(--first) !important;
795
- }
796
-
797
- // Target SVG paths and elements specifically
798
- svg path,
799
- svg circle,
800
- svg rect,
801
- svg polygon,
802
- svg * {
803
- fill: var(--first) !important;
804
- stroke: var(--first) !important;
805
- }
806
- }
807
-
808
- .p-inputtext:enabled:hover {
809
- border-color: var(--first) !important;
810
- }
811
-
812
- .p-inputtext:enabled:focus {
813
- border-color: var(--first) !important;
814
- box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
815
- }
816
- }
817
-
818
- // PrimeNG Select option selected color
819
- .p-select-option-selected,
820
- .p-select-option.p-select-option-selected {
821
- background-color: var(--first) !important;
822
- color: #ffffff !important;
823
-
824
- &.p-focus {
825
- background-color: var(--first) !important;
826
- color: #ffffff !important;
827
- }
828
- }
829
-
830
- // PrimeNG Autocomplete option selected color
831
- .p-autocomplete-option-selected {
832
- background-color: var(--first) !important;
833
- color: #ffffff !important;
834
-
835
- &.p-focus {
836
- background-color: var(--first) !important;
837
- color: #ffffff !important;
838
- }
839
- }
840
-
841
- // PrimeNG Chip/Token color
842
- .p-chip,
843
- .p-autocomplete-token {
844
- background-color: var(--first) !important;
845
- color: #ffffff !important;
846
- }
847
-
848
- // PrimeNG Multiselect option selected color
849
- .p-multiselect-option-selected {
850
- background-color: transparent !important;
851
- color: black !important;
852
-
853
- &.p-focus {
854
- background: var(--p-multiselect-option-focus-background) !important;
855
- color: var(--p-multiselect-option-focus-color) !important;
856
- }
857
- }
858
-
859
- // PrimeNG Checkbox checked color
860
- .p-checkbox-checked .p-checkbox-box {
861
- background-color: var(--first) !important;
862
- border-color: var(--first) !important;
863
- }
864
- }
865
-
866
- // Global PrimeNG Calendar icon styles (outside :root for higher specificity)
867
- p-calendar,
868
- .p-calendar {
869
- .p-datepicker-trigger,
870
- .p-datepicker-dropdown,
871
- button[class*='datepicker'] {
872
- background-color: var(--first) !important;
873
- border-color: var(--first) !important;
874
- color: white !important;
875
-
876
- svg,
877
- .p-icon,
878
- i,
879
- calendaricon,
880
- * {
881
- color: white !important;
882
- fill: white !important;
883
- stroke: white !important;
884
- }
885
-
886
- svg path,
887
- svg circle,
888
- svg rect,
889
- svg polygon,
890
- svg * {
891
- fill: white !important;
892
- stroke: white !important;
893
- }
894
- }
895
- }
896
-
897
- button.p-datepicker-trigger,
898
- button.p-datepicker-dropdown {
899
- background-color: transparent !important;
900
- border-color: var(--first) !important;
901
- color: var(--first) !important;
902
-
903
- svg,
904
- .p-icon,
905
- i,
906
- calendaricon,
907
- * {
908
- color: var(--first) !important;
909
- fill: var(--first) !important;
910
- stroke: var(--first) !important;
911
- }
912
-
913
- svg path,
914
- svg * {
915
- fill: var(--first) !important;
916
- stroke: var(--first) !important;
917
- }
918
- }
919
-
920
- .body-quill {
921
- border-width: 0 !important;
922
- }
923
-
924
- .dropdown-menu .dropdown-item.active {
925
- background-color: var(--tabs_bg) !important;
926
- color: var(--tabs_text) !important;
927
- }
928
-
929
- .dropdown-menu .dropdown-item:focus {
930
- background-color: var(--tabs_bg) !important;
931
- color: var(--tabs_text) !important;
932
- }
933
-
934
- .p-dropdown-panel {
935
- .p-dropdown-items {
936
- .p-dropdown-item {
937
- &.p-highlight {
938
- background-color: var(--first) !important;
939
- color: #ffffff !important;
940
- }
941
-
942
- &.p-focus {
943
- background-color: var(--first) !important;
944
- color: #ffffff !important;
945
- }
946
- }
947
- }
948
- }
949
-
950
- // PrimeNG Select option selected (for p-select components)
951
- .p-select-option-selected,
952
- .p-select-option.p-select-option-selected {
953
- background-color: var(--first) !important;
954
- color: #ffffff !important;
955
-
956
- &.p-focus {
957
- background-color: var(--first) !important;
958
- color: #ffffff !important;
959
- }
960
- }
961
-
962
- // PrimeNG Autocomplete option selected (for p-autocomplete components)
963
- .p-autocomplete-option-selected {
964
- background-color: var(--first) !important;
965
- color: #ffffff !important;
966
-
967
- &.p-focus {
968
- background-color: var(--first) !important;
969
- color: #ffffff !important;
970
- }
971
- }
972
-
973
- // PrimeNG Chip/Token styles (for autocomplete chips)
974
- .p-chip,
975
- .p-autocomplete-token,
976
- p-chip {
977
- background-color: var(--first) !important;
978
- color: #ffffff !important;
979
-
980
- .p-chip-remove-icon {
981
- color: #ffffff !important;
982
- }
983
- }
984
-
985
- // PrimeNG Autocomplete dropdown button
986
- .p-autocomplete-dropdown,
987
- button.p-autocomplete-dropdown {
988
- background-color: var(--first) !important;
989
- border-color: var(--first) !important;
990
- color: #ffffff !important;
991
-
992
- svg,
993
- .p-icon,
994
- i {
995
- color: #ffffff !important;
996
- fill: #ffffff !important;
997
- }
998
-
999
- &:hover {
1000
- background-color: var(--first) !important;
1001
- border-color: var(--first) !important;
1002
- }
1003
- }
1004
-
1005
- // PrimeNG Autocomplete input border color
1006
- .p-autocomplete {
1007
- .p-autocomplete-input-multiple,
1008
- .p-inputtext {
1009
- &:hover {
1010
- border-color: var(--first) !important;
1011
- }
1012
-
1013
- &:focus,
1014
- &.p-focus {
1015
- border-color: var(--first) !important;
1016
- box-shadow: 0 0 0 0.2rem rgba(23, 105, 225, 0.25) !important;
1017
- }
1018
- }
1019
-
1020
- &:not(.p-disabled).p-focus .p-autocomplete-input-multiple,
1021
- &:not(.p-disabled):hover .p-autocomplete-input-multiple {
1022
- border-color: var(--first) !important;
1023
- }
1024
- }
1025
-
1026
- // PrimeNG Multiselect option selected (for p-multiselect components)
1027
- .p-multiselect-option-selected {
1028
- background-color: var(--first) !important;
1029
- color: #ffffff !important;
1030
-
1031
- &.p-focus {
1032
- background-color: var(--first) !important;
1033
- color: #ffffff !important;
1034
- }
1035
- }
1036
-
1037
- // PrimeNG Checkbox checked (for multiselect checkboxes)
1038
- .p-checkbox-checked .p-checkbox-box,
1039
- .p-checkbox.p-checkbox-checked .p-checkbox-box {
1040
- background-color: var(--first) !important;
1041
- border-color: var(--first) !important;
1042
- }
1043
-
1044
- // PrimeNG Tab menu item active
1045
- .p-tabmenuitem-active {
1046
- background-color: var(--tabs_bg) !important;
1047
- color: var(--tabs_text) !important;
1048
-
1049
- a,
1050
- .p-menuitem-link {
1051
- background-color: var(--tabs_bg) !important;
1052
- color: var(--tabs_text) !important;
1053
- }
1054
- }
1055
-
1056
- // PrimeNG Paginator page selected
1057
- .p-paginator-page.p-paginator-page-selected,
1058
- .p-paginator-page.p-highlight {
1059
- background-color: var(--tabs_bg) !important;
1060
- border-color: var(--tabs_bg) !important;
1061
- color: var(--tabs_text) !important;
1062
- }
1063
-
1064
- // PrimeNG Datepicker day selected - direct global style
1065
- .p-datepicker-day-selected {
1066
- background-color: var(--first) !important;
1067
- color: #ffffff !important;
1068
- }
1069
-
1070
- .p-datepicker {
1071
- table {
1072
- td {
1073
- span.p-datepicker-day-selected,
1074
- &.p-datepicker-day-selected > span {
1075
- background-color: var(--first) !important;
1076
- color: #ffffff !important;
1077
- }
1078
- }
1079
- }
1080
- }
1081
-
1082
- .list-action {
1083
- width: max-content !important;
1084
- @media (max-width: 425px) {
1085
- width: auto !important; // Override for mobile
1086
- }
1087
- }
1088
-
1089
- .p-multiselect-filter {
1090
- border-color: var(--tabs_bg) !important; /* Change to your custom color */
1091
- box-shadow: 0 0 0 0.1rem var(--tabs_bg) !important; /* Adjust as needed */
1092
- outline: none !important; /* Keep the outline removed */
1093
- }
1094
-
1095
- .p-multiselect:not(.p-disabled).p-focus {
1096
- border-color: var(--tabs_bg) !important;
1097
- box-shadow: 0 0 0 0.1rem var(--tabs_bg) !important;
1098
- outline: none !important;
1099
- }
1100
- .p-dropdown:not(.p-disabled).p-focus {
1101
- border-color: var(--tabs_bg) !important; /* Change to your custom color */
1102
- box-shadow: 0 0 0 0.1rem var(--tabs_bg) !important; /* Adjust as needed */
1103
- outline: none !important; /* Keep the outline removed */
1104
- }
1105
- .ql-editor li,
1106
- p {
1107
- font-size: 17px;
1108
- }
1109
- .ql-editor ol {
1110
- padding-left: 0.75em !important;
1111
- }
1112
-
1113
- .ql-editor ul,
1114
- .ql-editor ol {
1115
- margin-top: 1rem;
1116
- margin-bottom: 0.5rem;
1117
- }
1118
-
1119
- .ql-editor {
1120
- li > .ql-ui::before {
1121
- font-size: 2rem; /* you can adjust size here */
1122
- line-height: 1;
1123
- position: relative;
1124
- top: 0.1rem;
1125
- }
1126
- ul {
1127
- padding-left: 20px; /* instead of default 40px */
1128
- }
1129
- li.ql-indent-1 {
1130
- padding-left: 3.6rem !important;
1131
- .ql-ui::before {
1132
- font-size: 1.1rem;
1133
- list-style-type: circle;
1134
- top: -0.1rem;
1135
- position: relative;
1136
- content: '\25CB' !important;
1137
- right: 0.15rem;
1138
- }
1139
- }
1140
-
1141
- li.ql-indent-2 {
1142
- padding-left: 4.6rem !important;
1143
- top: -0.1rem;
1144
- .ql-ui::before {
1145
- font-size: 1.1rem;
1146
- list-style-type: circle;
1147
- top: -0.1rem;
1148
- position: relative;
1149
- content: '\25CB' !important;
1150
- right: 0.15rem;
1151
- }
1152
- }
1153
-
1154
- li.ql-indent-3 {
1155
- padding-left: 5.6rem !important;
1156
- top: -0.1rem;
1157
- .ql-ui::before {
1158
- font-size: 1.1rem;
1159
- list-style-type: circle;
1160
- top: -0.1rem;
1161
- position: relative;
1162
- content: '\25CB' !important;
1163
- right: 0.15rem;
1164
- }
1165
- }
1166
-
1167
- li.ql-indent-4 {
1168
- padding-left: 6.6rem !important;
1169
- top: -0.1rem;
1170
- .ql-ui::before {
1171
- font-size: 1.1rem;
1172
- list-style-type: circle;
1173
- top: -0.1rem;
1174
- position: relative;
1175
- content: '\25CB' !important;
1176
- right: 0.15rem;
1177
- }
1178
- }
1179
- }
1180
-
1181
- .ql-editor ul {
1182
- padding-left: 1.2rem; /* reduce from default ~2.5rem */
1183
- margin-left: 0;
1184
- }
1185
-
1186
- .ql-editor ul li {
1187
- padding-left: 0.3rem; /* optional: less gap between bullet and text */
1188
- }
1189
-
1190
- .ql-editor {
1191
- line-height: 1.7 !important;
1192
-
1193
- p,
1194
- li,
1195
- h1,
1196
- h2,
1197
- h3,
1198
- h4,
1199
- h5,
1200
- h6,
1201
- blockquote,
1202
- pre {
1203
- line-height: inherit; // ensures all block types follow 1.6
1204
- }
1205
- }
1206
-
1207
- .quill-container {
1208
- max-width: 1000px;
1209
- width: 100%;
1210
- }
1211
-
1212
- .content-quill-wrapper {
1213
- margin: 0 auto;
1214
- max-width: 1000px;
1215
- background: map-get($white-color, base);
1216
- border: 1px solid rgb(238, 238, 238);
1217
-
1218
- .content-quill-box {
1219
- padding: 3.5rem 3rem 3rem;
1220
- }
1221
- }
1222
-
1223
- @media only screen and (max-width: 1024px) {
1224
- .content-quill-wrapper {
1225
- padding: 1rem;
1226
- background: map-get($white-color, base);
1227
-
1228
- .content-quill-box {
1229
- padding: 1rem;
1230
- }
1231
- }
1232
- }
1233
-
1234
- @media only screen and (max-width: 767px) {
1235
- .content-quill-wrapper {
1236
- padding: 0.5rem;
1237
- background: map-get($white-color, base);
1238
-
1239
- .content-quill-box {
1240
- padding: 0.5rem;
1241
- }
1242
- }
1243
- }
1244
-
1245
- .expected-mrr,
1246
- .mrr-header {
1247
- filter: saturate(0.5);
1248
- }
1249
-
1250
- /* Specific styles for .expected-mrr */
1251
- .expected-mrr {
1252
- background-color: #d8e8f1 !important;
1253
- }
1254
-
1255
- .month-quarter-text {
1256
- color: green;
1257
- }
1258
-
1259
- .hopscotch-title {
1260
- text-align: center !important;
1261
- margin-bottom: 20px !important;
1262
- }
1263
-
1264
- .hopscotch-title h2 {
1265
- margin: 0;
1266
- }
1267
-
1268
- .hopscotch-content {
1269
- text-align: center;
1270
- padding: 20px;
1271
- margin: 0 !important;
1272
- }
1273
-
1274
- .hopscotch-content img {
1275
- width: 150px;
1276
- margin: 20px 0;
1277
- }
1278
-
1279
- .hopscotch-content p {
1280
- font-size: 16px;
1281
- color: #555;
1282
- }
1283
-
1284
- .hopscotch-step-title {
1285
- text-align: left;
1286
- margin-bottom: 15px;
1287
- }
1288
-
1289
- .hopscotch-step-content {
1290
- padding: 20px;
1291
- text-align: left !important;
1292
- }
1293
-
1294
- .hopscotch-step-content p {
1295
- font-size: 14px;
1296
- color: #555;
1297
- margin-bottom: 10px;
1298
- text-align: left !important;
1299
- }
1300
-
1301
- .left-field-tooltip {
1302
- right: -150px !important;
1303
- }
1304
-
1305
- .left-info-circle .tooltiptext::after {
1306
- left: 45px !important;
1307
- }
1308
-
1309
- .md-drppicker .btn {
1310
- background-color: var(--tabs_bg) !important;
1311
- }
1312
-
1313
- .md-drppicker .ranges ul li button.active {
1314
- background-color: var(--tabs_bg) !important;
1315
- }
1316
-
1317
- .md-drppicker td.active,
1318
- .md-drppicker td.active:hover {
1319
- background-color: var(--tabs_bg) !important;
1320
- }
1321
-
1322
- .sign-header-btn {
1323
- &:hover {
1324
- border: 1px solid;
1325
- box-shadow: none !important;
1326
- border-color: var(--first) !important;
1327
- }
1328
- }
1329
-
1330
- ::ng-deep .dropdown-item.active {
1331
- background-color: red !important;
1332
- color: white !important;
1333
- }
1334
-
1335
- .product-header-color {
1336
- color: rgb(24, 37, 39) !important;
1337
- }
1338
-
1339
- @media (min-width: 991px) {
1340
- .section-outer {
1341
- padding-top: 60px !important;
1342
- padding-bottom: 60px !important;
1343
- }
1344
- }
1345
-
1346
- .view-all {
1347
- font-size: 1.5rem;
1348
- font-weight: 600;
1349
- color: var(--titles) !important;
1350
- text-decoration: none;
1351
- margin-bottom: 2.5rem;
1352
-
1353
- &:hover {
1354
- color: var(--first) !important;
1355
- }
1356
- }
1357
-
1358
- .section-heading {
1359
- font-size: 3rem !important;
1360
- font-weight: 300 !important;
1361
- color: var(--text-color, black);
1362
- }
1363
-
1364
- .resource-header {
1365
- .navbar-nav {
1366
- .nav-item {
1367
- .nav-link {
1368
- color: white;
1369
- font-size: 18px;
1370
- font-weight: 500;
1371
- letter-spacing: 1px;
1372
- padding: 1.1em 1em !important;
1373
- }
1374
- }
1375
- }
1376
- }
1377
-
1378
- .domain-edit-icon {
1379
- bottom: 20px;
1380
- right: 20px;
1381
- cursor: pointer;
1382
- z-index: 5;
1383
- }
1384
-
1385
- .in-page-edit-icon {
1386
- font-family: 'Font Awesome 6 Pro', sans-serif !important;
1387
- font-size: 1.5rem;
1388
- vertical-align: middle;
1389
- color: black;
1390
- }
1391
-
1392
- .in-page-trash-icon,
1393
- .in-page-bars-icon {
1394
- font-family: 'Font Awesome 6 Pro', sans-serif !important;
1395
- font-size: 1.1rem;
1396
- }
1397
-
1398
- .trial-iframe-container {
1399
- min-height: 550px;
1400
534
  }