PluginProbe ʕ •ᴥ•ʔ
Booking for Appointments and Events Calendar – Amelia / 1.2.31
Booking for Appointments and Events Calendar – Amelia v1.2.31
2.4.9 2.4.8 2.4.7 2.4.6 2.4.5 2.4.4 2.4.3 2.4.2 2.4.1 2.4 trunk 1.2.1 1.2.10 1.2.11 1.2.12 1.2.13 1.2.14 1.2.15 1.2.16 1.2.17 1.2.18 1.2.19 1.2.2 1.2.20 1.2.21 1.2.22 1.2.23 1.2.24 1.2.25 1.2.26 1.2.27 1.2.28 1.2.29 1.2.3 1.2.30 1.2.31 1.2.32 1.2.33 1.2.34 1.2.35 1.2.36 1.2.37 1.2.38 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 2.0 2.0.1 2.0.2 2.1 2.1.1 2.1.2 2.1.3 2.2 2.2.1 2.3
ameliabooking / assets / less / backend / email-notifications.less
ameliabooking / assets / less / backend Last commit date
amelia-booking.less 2 years ago appointments.less 1 year ago calendar.less 2 years ago customers.less 1 year ago customize.less 1 year ago dashboard.less 2 years ago dialogs.less 1 year ago elementor.less 2 years ago email-notifications.less 1 year ago employees.less 1 year ago events.less 1 year ago finance.less 1 year ago import.less 4 years ago licence.less 2 years ago lite-vs-premium.less 2 years ago locations.less 6 years ago recurring.less 6 years ago services.less 1 year ago settings.less 1 year ago whats-new.less 2 years ago
email-notifications.less
953 lines
1 @import "../common/_variables";
2 @import '~quill/dist/quill.core.css';
3 @import '~quill/dist/quill.snow.css';
4 @import '~quill/dist/quill.bubble.css';
5
6 #am-notifications {
7
8 .el-tabs__header {
9 margin: @margin-small @margin-big 0 @margin-big;
10
11 .el-tabs__item {
12 font-size: @regular-fs;
13 }
14 }
15
16 .am-notifications {
17 padding: @padding-small 0 0;
18 }
19
20 .am-dialog-scrollable {
21 margin-bottom: 40px;
22 }
23
24 .languages-list {
25 margin-top: @margin-medium;
26 }
27 .am-languages-delete {
28 padding: @padding-small + 1px;
29 border: 1px solid #E2E6EC;
30 border-radius: 4px;
31 display: block;
32 text-align: center;
33
34 &:hover {
35 cursor: pointer;
36 }
37 }
38
39 .am-add-language-svg {
40 vertical-align: middle;
41 }
42
43 .am-add-language {
44 display: inline-block;
45 color: #1A84EE;
46
47 &:hover {
48 cursor: pointer;
49 }
50 }
51
52 #am-email-notifications, #am-sms-notifications, #am-whatsapp-notifications {
53
54 .am-sub-header {
55 background-color: @color-blue;
56 padding: @padding-medium @padding-small;
57
58 a {
59 color: @color-white;
60 font-size: @regular-fs;
61 padding: @padding-medium - 1px @padding-medium;
62 border-bottom: 1px solid transparent;
63 margin-right: @margin-big;
64 opacity: 0.6;
65 @media @less-then-small {
66 font-size: @small-fs;
67 }
68
69 &:hover {
70 opacity: 1;
71 }
72
73 &.active {
74 border-color: @color-white;
75 opacity: 1;
76 }
77 }
78 }
79
80 .am-whatsapp-notifications-header {
81 margin: @margin-medium !important;
82 }
83
84 .am-whatsapp {
85 &-placeholders {
86 .el-row {
87 p {
88 font-size: 13px;
89 font-weight: 550;
90 margin-bottom: 4px;
91 margin-top: 4px;
92 }
93 }
94 padding-bottom: 20px;
95 &-notice-warn {
96 border: 1px solid #F7E4A2;
97 }
98 .el-alert {
99 margin-bottom: 16px;
100 .el-alert__description {
101 margin:0;
102 font-weight: 500;
103 font-size: 14px;
104 line-height: 24px;
105 }
106 }
107 }
108 &-ph-header {
109 border-bottom: 1px solid #D1D5D7;
110 margin-bottom: 20px;
111 }
112 &-settings {
113 &-button{
114 text-align:right;
115 .el-button {
116 position: relative;
117 font-size: 16px;
118 img {
119 margin-right:10px;
120 }
121 }
122 }
123 margin-top: 40px;
124 margin-left: 24px;
125 img {
126 margin-right: 20px
127 }
128 p {
129 font-weight: 500;
130 font-size: 15px;
131 line-height: 20px;
132 margin-bottom: 4px;
133 margin-top:0;
134 color: #1A2C37;
135 }
136 .el-row {
137 //width: 400px;
138 padding-bottom: 32px;
139 }
140 .el-input {
141 margin-bottom:0;
142 }
143 &-buttons {
144 display: flex;
145 justify-content: right;
146 margin-right: 30px;
147 gap: 20px;
148 margin-bottom: 56px;
149 padding-top: 16px;
150 border-top: 1px solid #D1D5D7;
151 }
152 .el-form-item__error {
153 bottom: unset;
154 }
155 .select-languages {
156 width: 100%;
157 }
158 textarea {
159 color: @color-text-prime;
160 padding: @padding-small;
161 }
162 &-auto-reply {
163 .am-placeholder-wrapper {
164 justify-content: right;
165 }
166 .el-row {
167 margin-right: 18px
168 }
169 .el-alert--warning {
170 .el-alert__description {
171 margin-bottom: 0;
172 }
173 }
174 }
175 }
176 &-feature {
177 display: none;
178 font-size: @regular-fs;
179 font-weight: @medium;
180 color: #354052;
181 background-color: #FEF5A3;
182 border: 1px solid #EDE38D;
183 border-radius: @padding-small/2;
184 padding: @padding-small;
185 margin: 20px;
186 }
187 }
188
189 .am-gray-section {
190 background-color: @color-highlight;
191 height: 100%;
192 }
193
194 .am-email-form-settings {
195 h2 {
196 margin-bottom: @margin-medium;
197 }
198
199 .am-divider {
200 height: 2px;
201 }
202
203 p.am-blue-link {
204 color: @color-blue;
205 text-align: right;
206 cursor: pointer;
207 margin: 0;
208
209 &:hover {
210 color: darken(@color-blue, 10%);
211 }
212 }
213
214 .el-textarea__inner {
215 margin-bottom: @margin-medium;
216 }
217
218 .select-languages {
219 max-width: 208px;
220 width: 41%;
221 margin-top: @margin-small;
222 }
223
224 .el-input, .el-select {
225 width: 100%;
226 }
227
228 .quill-editor {
229 display: inline-block;
230 width: 100%;
231 margin-bottom: @margin-big;
232
233 .ql-toolbar.ql-snow {
234 border-radius: 4px 4px 0 0;
235 }
236
237 .ql-container {
238 border-radius: 0 0 4px 4px;
239
240 .ql-tooltip {
241 margin-left: 115px;
242 }
243
244 .ql-editor p {
245 font-size: @small-fs;
246 }
247 }
248
249 .ql-toolbar.ql-snow, .ql-container {
250 border-color: @color-divider-gray;
251 }
252 }
253
254 &__cancel-save {
255 padding-top: @padding-medium;
256 }
257
258 .duplicate {
259 max-width: 8em;
260 margin-bottom: 0px;
261 margin-right: @margin-medium;
262 .el-input > .el-input__inner {
263 text-align: center;
264 height: 38px;
265 font-weight: @bold;
266 color: #7F8FA4;
267 font-size: 12px
268 }
269 }
270
271 .red {
272 color: @color-red;
273 }
274
275 .deleteModal {
276 position: absolute;
277 right:0; top: 50px;
278 border: 1px solid @color-light-gray;
279 padding: 16px;
280 border-radius: 6px;
281 background-color: white;
282 z-index:10;
283 box-shadow: 2px 2px 7px @color-light-gray;
284 p {
285 font-size: 13px;
286 }
287 }
288
289 .el-radio {
290 border: 1px solid #E2E6EC;
291 padding: 10px;
292 border-radius: 10px;
293 margin-bottom: @margin-medium;
294 &.is-checked {
295 background-color: fade(@color-blue, 20%);
296 }
297 }
298
299 .am-sms-warning {
300 a:link, a:visited {
301 color: #2271b1;
302 text-decoration: underline;
303 }
304 }
305
306 }
307
308 .am-email-notification-labels {
309 height: 21px;
310 color: #354052;
311 font-size: 18px;
312 font-weight: 500;
313 line-height: 21px;
314 margin-top: 30px;
315 }
316
317 .am-email-notification-buttons {
318 .am-button-checkbox {
319 position: relative;
320 margin: @margin-big 0 0;
321
322 .el-checkbox {
323 position: absolute;
324 top: 50%;
325 transform: translateY(-50%);
326 left: 16px;
327 z-index: 2;
328 }
329
330 .am-cron-icon {
331 cursor: pointer;
332 position: absolute;
333 top: 50%;
334 transform: translateY(-50%);
335 right: 16px;
336 z-index: 2;
337 height: 16px;
338 width: 16px;
339 display: block;
340 opacity: 0.2;
341
342 svg, img {
343 path {
344 }
345 }
346
347 &.active {
348 opacity: 0.6;
349 }
350
351 &.right {
352 right: 40px
353 }
354 }
355
356 .el-button {
357 width: 100%;
358 color: @color-text-prime;
359 padding: @padding-medium 40px;
360 white-space: normal;
361 line-height: 1.4;
362
363 &.am-active {
364 background-color: fade(@color-blue, 10%);
365 border-color: @color-blue;
366 &-create {
367 color: @color-white;
368 background-color: @color-blue;
369 &:hover {
370 background-color: fade(@color-blue, 90%);
371 }
372 }
373 }
374 &:hover {
375 background-color: fade(@color-blue, 10%);
376 border-color: fade(@color-blue, 30%);
377 }
378 &.text-margin span {
379 margin-right: @margin-big;
380 display: inline-block;
381 }
382 }
383 }
384 }
385
386 .am-customize-notifications-combined {
387 margin-bottom: @margin-big;
388 border: 1px solid @color-divider-gray;
389 padding: @padding-small;
390 background-color: @color-light-gray;
391 border-radius: 2%;
392
393 .am-customize-notifications-combined-tooltip {
394 font-size: 16px;
395 margin: 0;
396 line-height: 1.5;
397 }
398
399 p {
400 margin: 0;
401 }
402 }
403
404 .am-notifications-placeholders {
405 margin-top: @margin-medium;
406 }
407
408 .am-placeholder-wrapper {
409 display: flex;
410 align-items: center;
411 justify-content: flex-start;
412 flex-wrap: wrap;
413 margin-bottom: @margin-medium;
414
415 &__dropdown {
416 margin: 0 @margin-small @margin-small 0;
417 }
418
419 &__button {
420 color: #606266;
421 }
422 }
423
424 .el-form-item {
425 margin-bottom: 0;
426 }
427
428 .el-dialog {
429 .el-select {
430 width: 100%;
431 }
432 }
433
434 .am-pop-modal {
435 .el-dialog__body {
436 padding: 15px 20px;
437
438 .el-alert {
439 color: @color-orange;
440 margin-bottom: 10px;
441
442 .el-alert__title {
443 color: @color-orange;
444 }
445 }
446 }
447 }
448 }
449
450 //SMS Notifications
451 #am-sms-notifications {
452 .am-sms-auth-wrapper {
453 padding: @padding-big*3 @padding-medium;
454 }
455
456 .am-sms-auth {
457 max-width: 420px;
458 margin: 0 auto;
459
460 .am-sms-logo {
461 text-align: center;
462 line-height: @h3-lh;
463 font-size: @medium-fs;
464 font-weight: 500;
465 margin-bottom: @margin-big;
466
467 img {
468 vertical-align: middle;
469 margin-right: @margin-small;
470 }
471 }
472
473 h4 {
474 text-align: center;
475 margin-top: 0;
476 }
477
478 .am-sms-login, .am-sms-signup {
479 padding: @padding-big @margin-big*2;
480 border: 1px solid @color-divider-gray;
481 }
482
483 .el-button {
484 width: 100%;
485 }
486
487 p {
488 text-align: center;
489 margin-bottom: 0;
490 }
491
492 .am-forgot-pass {
493 position: absolute;
494 top: -21px;
495 right: 0;
496
497 }
498 }
499
500 .am-sms-dashboard {
501 margin: 0 @margin-big 0 @margin-big;
502
503 .am-sms-dashboard-header {
504 display: flex;
505 align-items: center;
506 border-bottom: 1px solid @color-divider-gray;
507 @media @less-then-large {
508 display: block;
509 }
510
511 > * {
512 padding: @padding-medium @padding-big;
513 }
514
515 .am-sms-logo {
516 flex-grow: 1;
517 line-height: @h3-lh;
518 font-size: @regular-fs;
519 font-weight: 500;
520
521 img {
522 vertical-align: middle;
523 max-width: 40px;
524 margin-right: @margin-small;
525 }
526 }
527
528 .am-sms-loggedin-user, .am-sms-balance {
529 display: flex;
530 align-items: center;
531 @media @less-then-medium {
532 border: none;
533 }
534 @media @less-then-small {
535 display: block;
536 }
537
538 > * {
539 margin-right: @margin-medium;
540
541 &:last-child {
542 margin-right: 0;
543 }
544 }
545
546 > div {
547 display: inline-block;
548 vertical-align: middle;
549 }
550
551 img {
552 width: 32px;
553 height: 32px;
554 display: inline-block;
555 vertical-align: middle;
556 }
557
558 .am-sms-user-email, p {
559 margin: 0;
560 font-weight: 500;
561 }
562
563 .el-button {
564 @media @less-then-small {
565 display: block;
566 margin-top: @padding-small;
567 }
568 }
569 }
570
571 .am-sms-loggedin-user {
572 border-right: 1px solid @color-divider-gray;
573 @media @less-then-small, @less-then-medium {
574 border: 0
575 }
576 }
577 }
578
579 .am-sms-dashboard-body {
580 display: flex;
581 @media @less-then-medium {
582 display: block;
583 }
584
585 .am-sms-dashboard-nav {
586 padding: @padding-big;
587 min-width: 160px;
588
589 .am-sms-dashboard-nav-item {
590 font-size: @regular-fs;
591 font-weight: 500;
592 margin-bottom: @margin-small;
593 padding: @padding-small @padding-medium;
594 cursor: pointer;
595 border-radius: @btn-border-radius;
596 transition: all 0.3s;
597
598 &:hover, &.active {
599 color: @color-blue;
600 background-color: fade(@color-blue, 10%);
601 }
602 }
603 }
604
605 .am-sms-dashboard-content {
606 min-height: 550px;
607 padding: @padding-big;
608 border-left: 1px solid @color-divider-gray;
609 flex-grow: 1;
610 @media @less-then-medium {
611 border-top: 1px solid @color-divider-gray;
612 border-left: none;
613 }
614
615 h2 {
616 margin-bottom: @margin-medium;
617 }
618
619 //History, Purchase Log
620 .am-sms-history, .am-sms-purchase-log {
621 .popover-container {
622 max-width: 320px;
623 }
624
625 .am-sms-history-list, .am-sms-purchase-log-list {
626 margin-top: @margin-big;
627
628 .am-sms-history-list-head, .am-sms-purchase-log-list-head {
629 @media @less-then-large {
630 display: none;
631 }
632 padding: @padding-medium;
633 border-bottom: 1px solid @color-divider-gray;
634 font-size: @small-fs;
635 font-weight: 500;
636
637 span {
638 opacity: 0.6;
639 }
640
641 p {
642 margin: 0;
643 color: @color-text-second;
644 text-transform: uppercase;
645 font-size: @mini-fs;
646 font-weight: @regular;
647 }
648 }
649
650 .am-sms-history-list-body, .am-sms-purchase-log-list-body {
651 .am-sms-history-data {
652 width: 100%;
653 }
654
655 .am-sms-message, .am-sms-purchase-log-item {
656 padding: @padding-medium;
657 border-bottom: 1px solid @color-divider-gray;
658 font-size: @small-fs;
659 font-weight: 500;
660
661 &:hover, &.is-active {
662 background-color: @color-highlight;
663 }
664
665 &.is-active {
666 .am-link {
667 &:after {
668 transform: rotate(180deg);
669 }
670 }
671 }
672
673 .el-col {
674 @media @less-then-large {
675 margin-bottom: @margin-small;
676 }
677
678 img {
679 @media @less-then-medium {
680 width: 13px;
681 }
682 }
683
684 p.am-col-title {
685 display: none;
686 @media @less-then-large {
687 display: block;
688 }
689 }
690
691 span {
692 img {
693 margin-right: @margin-small/2;
694 vertical-align: middle;
695 }
696 }
697 }
698
699 .am-link {
700 position: relative;
701
702 &:hover {
703 text-decoration: none;
704 }
705
706 &:after {
707 transition: all 0.3s;
708 font-family: element-icons !important;
709 top: 0;
710 right: -16px;
711 font-size: 12px;
712 font-weight: 600;
713 position: absolute;
714 content: "\e6df";
715 }
716
717 img {
718 vertical-align: middle;
719 margin-right: @margin-small/2;
720 }
721 }
722
723 .el-collapse-item__arrow {
724 display: none;
725 }
726
727 .el-collapse-item__header {
728 cursor: default;
729 }
730
731 .am-sms-message-text {
732 margin-top: @margin-medium;
733 }
734
735 &.am-sms-message-failed {
736 background: fade(@color-red, 10%);
737 }
738
739 &.am-sms-message-queued {
740 background: fade(@color-yellow, 10%);
741 }
742
743 .el-icon-refresh {
744 font-weight: @bold;
745 cursor: pointer;
746 }
747 }
748 }
749 }
750
751 .am-pagination {
752 padding-left: 0;
753 padding-right: 0;
754 }
755 }
756
757 //Pricelist
758 .am-sms-pricelist {
759 .am-selected-flag {
760 .el-input__inner {
761 background-color: unset;
762 padding-left: 46px;
763 }
764 }
765
766 .am-segment-tooltip-box-mobile {
767 display: flex;
768 align-items: baseline;
769 gap: 8px;
770
771 .el-tooltip {
772 display: none;
773 @media @less-then-large {
774 display: flex;
775 }
776 }
777 }
778
779 .am-sms-country-pricelist-head {
780 @media @less-then-large {
781 display: none;
782 }
783 padding: @padding-medium;
784 border-bottom: 1px solid @color-divider-gray;
785 font-size: @small-fs;
786 font-weight: 500;
787
788 span {
789 opacity: 0.6;
790 }
791
792 p {
793 margin: 0;
794 color: @color-text-second;
795 text-transform: uppercase;
796 font-size: @mini-fs;
797 font-weight: @regular;
798 }
799
800 .am-segment-tooltip-box {
801 display: flex;
802 flex-direction: row;
803 align-items: center;
804 gap: 8px;
805 }
806 }
807
808 .am-sms-country-pricelist-body {
809 .am-sms-country-price {
810 padding: @padding-medium;
811 border-bottom: 1px solid @color-divider-gray;
812 font-size: @small-fs;
813 font-weight: 500;
814 }
815 }
816 }
817
818 .am-sms-user {
819 .am-sms-user-info {
820 padding-bottom: @padding-medium*2;
821 border-bottom: 1px solid @color-divider-gray;
822 margin-bottom: @margin-medium*2;
823
824 p {
825 margin-top: 0;
826 margin-bottom: @margin-small;
827 }
828 }
829
830 .am-sms-user-security {
831 .am-change-password {
832 margin-top: @margin-medium;
833 }
834 }
835
836 .am-sms-warning {
837 a:link, a:visited {
838 color: #2271b1;;
839 text-decoration: underline;
840 }
841 }
842 }
843
844 .am-customize-notifications {
845 @media @less-then-small, @less-then-medium {
846 display: block;
847 }
848 }
849 }
850 }
851 }
852
853 .am-dialog-sms-money {
854 .am-sms-money {
855 margin-top: @margin-big;
856
857 .am-sms-money-card {
858 border-radius: @border-radius;
859 border: 2px solid @color-divider-gray;
860 line-height: 80px;
861 text-align: center;
862 font-size: 24px;
863 font-weight: 600;
864 cursor: pointer;
865 transition: all 0.3s;
866 margin-bottom: @margin-small;
867
868 &:hover {
869 border-color: @color-blue;
870 }
871
872 &.active {
873 background-color: @color-blue;
874 color: @color-white;
875 border-color: @color-blue;
876 }
877 }
878
879 p {
880 margin-top: 0;
881 margin-bottom: @margin-medium;
882 }
883
884 .el-checkbox {
885 margin: @margin-medium 0;
886 }
887
888 .el-button {
889 width: 100%;
890 margin-top: @margin-small;
891 }
892
893 .am-sms-money-recharge {
894 margin-top: 16px;
895 }
896
897 .am-sms-money-total-price {
898 color: #606266;
899 font-weight: 500;
900 }
901 }
902 }
903 }
904 }
905
906 .el-notification.no-title {
907 .el-notification__group {
908 display: flex;
909 align-items: center;
910
911 .el-notification__content {
912 margin: unset;
913 }
914 }
915 }
916
917 .amelia-dropdown {
918 &.el-dropdown-menu {
919 max-height: 400px;
920 overflow: auto;
921 }
922
923 &.el-dropdown-menu::-webkit-scrollbar {
924 width: 6px;
925 }
926
927 &.el-dropdown-menu::-webkit-scrollbar-thumb {
928 background-color: #dddddd;
929 border-radius: 10px;
930 }
931 }
932
933 .el-input {
934 .select-languages-flag {
935 position: absolute;
936 top: 35%;
937 left: 20%;
938 width: 20px;
939 height: 14px;
940 vertical-align: text-bottom;
941 padding: 0 5px 0 0;
942 }
943 }
944
945 .el-select-dropdown .el-select-dropdown__item {
946 .option-languages-flag {
947 width: 20px;
948 height: 14px;
949 vertical-align: text-bottom;
950 padding-right: 5px;
951 }
952 }
953