| @@ -25,11 +25,16 @@ | ||
| 25 | 25 | flex-direction: column; |
| 26 | 26 | align-items: center; |
| 27 | 27 | } |
| 28 | 28 | |
| 29 | -.basalam-header { | |
| 29 | +.basalam-header, | |
| 30 | +.basalam-container > .basalam-setup-wizard { | |
| 30 | 31 | width: 90%; |
| 31 | 32 | max-width: 1080px; |
| 33 | + box-sizing: border-box; | |
| 34 | +} | |
| 35 | + | |
| 36 | +.basalam-header { | |
| 32 | 37 | margin: 0 auto 24px; |
| 33 | 38 | background: white; |
| 34 | 39 | border-radius: 12px; |
| 35 | 40 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| @@ -2593,9 +2598,10 @@ | ||
| 2593 | 2598 | max-width: 900px; |
| 2594 | 2599 | } |
| 2595 | 2600 | |
| 2596 | 2601 | .basalam-status-card, |
| 2597 | - .basalam-header { | |
| 2602 | + .basalam-header, | |
| 2603 | + .basalam-container > .basalam-setup-wizard { | |
| 2598 | 2604 | max-width: 810px !important; |
| 2599 | 2605 | } |
| 2600 | 2606 | |
| 2601 | 2607 | .basalam-action-cards { |
| @@ -4295,9 +4301,9 @@ | ||
| 4295 | 4301 | .basalam-form-margin-0 { |
| 4296 | 4302 | margin: 0; |
| 4297 | 4303 | } |
| 4298 | 4304 | |
| 4299 | -/* Scheduled full product updates beside the existing product sync control. */ | |
| 4305 | +/* Automatic product operations and scheduled full product updates. */ | |
| 4300 | 4306 | #sync-basalam-onboarding-status .basalam-sync-status { |
| 4301 | 4307 | display: grid; |
| 4302 | 4308 | grid-template-columns: minmax(0, 1fr) minmax(0, 400px); |
| 4303 | 4309 | align-items: center; |
| @@ -4330,9 +4336,9 @@ | ||
| 4330 | 4336 | #sync-basalam-onboarding-status .basalam-sync-controls { |
| 4331 | 4337 | display: grid; |
| 4332 | 4338 | grid-column: 2; |
| 4333 | 4339 | grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); |
| 4334 | - align-items: stretch; | |
| 4340 | + align-items: start; | |
| 4335 | 4341 | direction: rtl; |
| 4336 | 4342 | gap: 12px; |
| 4337 | 4343 | width: 100%; |
| 4338 | 4344 | } |
| @@ -4530,8 +4536,12 @@ | ||
| 4530 | 4536 | #sync-basalam-onboarding-status .basalam-sync-intro, |
| 4531 | 4537 | #sync-basalam-onboarding-status .basalam-sync-controls { |
| 4532 | 4538 | grid-column: 1; |
| 4533 | 4539 | } |
| 4540 | + | |
| 4541 | + #sync-basalam-onboarding-status .basalam-sync-controls { | |
| 4542 | + grid-template-columns: minmax(0, 1fr); | |
| 4543 | + } | |
| 4534 | 4544 | } |
| 4535 | 4545 | |
| 4536 | 4546 | @media (max-width: 900px) { |
| 4537 | 4547 | #sync-basalam-onboarding-status .basalam-sync-controls { |
| @@ -4579,9 +4589,9 @@ | ||
| 4579 | 4589 | } |
| 4580 | 4590 | |
| 4581 | 4591 | @media (max-width: 400px) { |
| 4582 | 4592 | #sync-basalam-onboarding-status .basalam-sync-controls { |
| 4583 | - grid-template-columns: minmax(0, 3fr) minmax(116px, 2fr); | |
| 4593 | + grid-template-columns: minmax(0, 1fr); | |
| 4584 | 4594 | } |
| 4585 | 4595 | |
| 4586 | 4596 | #sync-basalam-onboarding-status .basalam-sync-controls > form > button { |
| 4587 | 4597 | font-size: 9px !important; |
| @@ -4589,8 +4599,232 @@ | ||
| 4589 | 4599 | } |
| 4590 | 4600 | |
| 4591 | 4601 | .basalam-form-no-margin { |
| 4592 | 4602 | margin-bottom: 0px !important; |
| 4603 | +} | |
| 4604 | + | |
| 4605 | +#sync-basalam-onboarding-status .basalam-product-sync-form fieldset { | |
| 4606 | + min-width: 0; | |
| 4607 | + margin: 0 0 10px; | |
| 4608 | + padding: 0; | |
| 4609 | + border: 0; | |
| 4610 | +} | |
| 4611 | + | |
| 4612 | +#sync-basalam-onboarding-status .basalam-product-sync-wrapper { | |
| 4613 | + position: relative; | |
| 4614 | + width: 100%; | |
| 4615 | +} | |
| 4616 | + | |
| 4617 | +#sync-basalam-onboarding-status .basalam-product-sync-button-group { | |
| 4618 | + display: flex; | |
| 4619 | + width: 100%; | |
| 4620 | + min-height: 44px; | |
| 4621 | + overflow: hidden; | |
| 4622 | + border-radius: 8px; | |
| 4623 | + background: var(--basalam-primary-color); | |
| 4624 | +} | |
| 4625 | + | |
| 4626 | +#sync-basalam-onboarding-status .basalam-product-sync-button-group.basalam-product-sync-is-active { | |
| 4627 | + background: #fff5f5; | |
| 4628 | + border: 1px solid var(--basalam-danger-color); | |
| 4629 | +} | |
| 4630 | + | |
| 4631 | +#sync-basalam-onboarding-status .basalam-product-sync-button-group > button { | |
| 4632 | + min-height: 44px; | |
| 4633 | + height: 100%; | |
| 4634 | + margin: 0; | |
| 4635 | + border: 0; | |
| 4636 | + border-radius: 0; | |
| 4637 | + box-sizing: border-box; | |
| 4638 | + transform: none; | |
| 4639 | +} | |
| 4640 | + | |
| 4641 | +#sync-basalam-onboarding-status .basalam-product-sync-submit { | |
| 4642 | + position: relative; | |
| 4643 | + display: inline-flex; | |
| 4644 | + flex: 1 1 auto; | |
| 4645 | + width: auto; | |
| 4646 | + padding: 10px 16px; | |
| 4647 | + gap: 4px; | |
| 4648 | + line-height: 1.4; | |
| 4649 | + white-space: nowrap; | |
| 4650 | + background: var(--basalam-primary-color); | |
| 4651 | + color: #fff; | |
| 4652 | +} | |
| 4653 | + | |
| 4654 | +#sync-basalam-onboarding-status .basalam-product-sync-submit > span:not(.basalam-btn-separator) { | |
| 4655 | + white-space: nowrap; | |
| 4656 | +} | |
| 4657 | + | |
| 4658 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-submit, | |
| 4659 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-arrow-btn { | |
| 4660 | + background: #fff5f5; | |
| 4661 | + color: var(--basalam-danger-color); | |
| 4662 | +} | |
| 4663 | + | |
| 4664 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-submit img { | |
| 4665 | + filter: brightness(0) saturate(100%) invert(31%) sepia(79%) saturate(1902%) hue-rotate(326deg) brightness(91%) contrast(91%); | |
| 4666 | +} | |
| 4667 | + | |
| 4668 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-submit:hover, | |
| 4669 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-submit:focus, | |
| 4670 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-arrow-btn:hover, | |
| 4671 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-arrow-btn:focus, | |
| 4672 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-arrow-btn[aria-expanded="true"] { | |
| 4673 | + background: var(--basalam-danger-color); | |
| 4674 | + color: #fff; | |
| 4675 | +} | |
| 4676 | + | |
| 4677 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-submit:hover img, | |
| 4678 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-submit:focus img { | |
| 4679 | + filter: brightness(0) invert(1); | |
| 4680 | +} | |
| 4681 | + | |
| 4682 | +#sync-basalam-onboarding-status .basalam-product-sync-submit:hover, | |
| 4683 | +#sync-basalam-onboarding-status .basalam-product-sync-submit:focus { | |
| 4684 | + background: var(--basalam-primary-hover); | |
| 4685 | + color: #fff; | |
| 4686 | +} | |
| 4687 | + | |
| 4688 | +#sync-basalam-onboarding-status .basalam-product-sync-arrow-btn { | |
| 4689 | + display: inline-flex; | |
| 4690 | + flex: 0 0 46px; | |
| 4691 | + width: 46px; | |
| 4692 | + padding: 0 !important; | |
| 4693 | + background: var(--basalam-primary-color); | |
| 4694 | + color: #fff; | |
| 4695 | +} | |
| 4696 | + | |
| 4697 | +#sync-basalam-onboarding-status .basalam-product-sync-arrow-btn:hover, | |
| 4698 | +#sync-basalam-onboarding-status .basalam-product-sync-arrow-btn:focus, | |
| 4699 | +#sync-basalam-onboarding-status .basalam-product-sync-arrow-btn[aria-expanded="true"] { | |
| 4700 | + background: var(--basalam-primary-hover); | |
| 4701 | + color: #fff; | |
| 4702 | +} | |
| 4703 | + | |
| 4704 | +#sync-basalam-onboarding-status .basalam-product-sync-button-group .basalam-btn-separator { | |
| 4705 | + left: 0; | |
| 4706 | + height: 60%; | |
| 4707 | + background: rgba(255, 255, 255, 0.35); | |
| 4708 | +} | |
| 4709 | + | |
| 4710 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-btn-separator { | |
| 4711 | + background: rgba(220, 53, 69, 0.35); | |
| 4712 | +} | |
| 4713 | + | |
| 4714 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-submit:hover .basalam-btn-separator, | |
| 4715 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-submit:focus .basalam-btn-separator { | |
| 4716 | + background: rgba(255, 255, 255, 0.35); | |
| 4717 | +} | |
| 4718 | + | |
| 4719 | +#sync-basalam-onboarding-status .basalam-product-sync-arrow-btn .basalam-dropdown-arrow-img { | |
| 4720 | + width: 20px; | |
| 4721 | + height: 20px; | |
| 4722 | + transform: rotate(90deg); | |
| 4723 | + filter: brightness(0) invert(1); | |
| 4724 | +} | |
| 4725 | + | |
| 4726 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-arrow-btn .basalam-dropdown-arrow-img { | |
| 4727 | + filter: brightness(0) saturate(100%) invert(31%) sepia(79%) saturate(1902%) hue-rotate(326deg) brightness(91%) contrast(91%); | |
| 4728 | +} | |
| 4729 | + | |
| 4730 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-arrow-btn:hover .basalam-dropdown-arrow-img, | |
| 4731 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-arrow-btn:focus .basalam-dropdown-arrow-img, | |
| 4732 | +#sync-basalam-onboarding-status .basalam-product-sync-is-active .basalam-product-sync-arrow-btn[aria-expanded="true"] .basalam-dropdown-arrow-img { | |
| 4733 | + filter: brightness(0) invert(1); | |
| 4734 | +} | |
| 4735 | + | |
| 4736 | +#sync-basalam-onboarding-status .basalam-product-sync-dropdown { | |
| 4737 | + position: absolute; | |
| 4738 | + z-index: 120; | |
| 4739 | + top: calc(100% + 8px); | |
| 4740 | + right: 0; | |
| 4741 | + width: min(360px, 100%); | |
| 4742 | + padding: 18px; | |
| 4743 | + border: 1px solid #dbe3ec; | |
| 4744 | + border-radius: 12px; | |
| 4745 | + background: #fff; | |
| 4746 | + box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16); | |
| 4747 | + box-sizing: border-box; | |
| 4748 | + text-align: right; | |
| 4749 | +} | |
| 4750 | + | |
| 4751 | +#sync-basalam-onboarding-status .basalam-product-sync-dropdown fieldset { | |
| 4752 | + margin: 0; | |
| 4753 | +} | |
| 4754 | + | |
| 4755 | +#sync-basalam-onboarding-status .basalam-product-sync-dropdown, | |
| 4756 | +#sync-basalam-onboarding-status .basalam-product-sync-dropdown * { | |
| 4757 | + font-family: "PelakFA", Tahoma, sans-serif; | |
| 4758 | +} | |
| 4759 | + | |
| 4760 | +#sync-basalam-onboarding-status .basalam-product-sync-form legend { | |
| 4761 | + width: 100%; | |
| 4762 | + margin-bottom: 10px; | |
| 4763 | + font-size: 12px; | |
| 4764 | + font-weight: 600; | |
| 4765 | + text-align: right; | |
| 4766 | +} | |
| 4767 | + | |
| 4768 | +#sync-basalam-onboarding-status .basalam-product-sync-option { | |
| 4769 | + display: flex; | |
| 4770 | + align-items: flex-start; | |
| 4771 | + gap: 8px; | |
| 4772 | + margin-bottom: 8px; | |
| 4773 | + padding: 7px 9px; | |
| 4774 | + border: 1px solid #dbe3ec; | |
| 4775 | + border-radius: 8px; | |
| 4776 | + cursor: pointer; | |
| 4777 | +} | |
| 4778 | + | |
| 4779 | +#sync-basalam-onboarding-status .basalam-product-sync-option:has(input:checked) { | |
| 4780 | + border-color: var(--basalam-primary-color); | |
| 4781 | + background: #f0f7ff; | |
| 4782 | +} | |
| 4783 | + | |
| 4784 | +#sync-basalam-onboarding-status .basalam-product-sync-option input { | |
| 4785 | + flex: 0 0 auto; | |
| 4786 | + margin: 3px 0 0; | |
| 4787 | +} | |
| 4788 | + | |
| 4789 | +#sync-basalam-onboarding-status .basalam-product-sync-option span { | |
| 4790 | + display: flex; | |
| 4791 | + flex-direction: column; | |
| 4792 | + gap: 4px; | |
| 4793 | + text-align: right; | |
| 4794 | +} | |
| 4795 | + | |
| 4796 | +#sync-basalam-onboarding-status .basalam-product-sync-option strong { | |
| 4797 | + font-size: 11px; | |
| 4798 | + color: #1e293b; | |
| 4799 | +} | |
| 4800 | + | |
| 4801 | +#sync-basalam-onboarding-status .basalam-product-sync-option small { | |
| 4802 | + font-size: 10px; | |
| 4803 | + line-height: 1.6; | |
| 4804 | + color: #64748b; | |
| 4805 | +} | |
| 4806 | + | |
| 4807 | +#sync-basalam-onboarding-status .basalam-product-sync-save { | |
| 4808 | + display: inline-flex; | |
| 4809 | + align-items: center; | |
| 4810 | + justify-content: center; | |
| 4811 | + width: 100%; | |
| 4812 | + min-height: 36px; | |
| 4813 | + margin-top: 3px; | |
| 4814 | + padding: 7px 12px; | |
| 4815 | + border: 0; | |
| 4816 | + border-radius: 7px; | |
| 4817 | + background: var(--basalam-primary-color); | |
| 4818 | + color: #fff; | |
| 4819 | + cursor: pointer; | |
| 4820 | + font-size: 11px !important; | |
| 4821 | +} | |
| 4822 | + | |
| 4823 | +#sync-basalam-onboarding-status .basalam-product-sync-save:hover, | |
| 4824 | +#sync-basalam-onboarding-status .basalam-product-sync-save:focus { | |
| 4825 | + background: var(--basalam-primary-hover); | |
| 4826 | + color: #fff; | |
| 4593 | 4827 | } |
| 4594 | 4828 | |
| 4595 | 4829 | /* Badge styling */ |
| 4596 | 4830 | .basalam-badge-warning { |
