|
93 | 93 | align-items: center; |
94 | 94 | gap: 6px; |
95 | 95 | padding: 7px 10px; |
96 | | - border-bottom: 1px solid var(--border); |
97 | 96 | } |
98 | 97 |
|
99 | 98 | .nav-icon { |
@@ -152,6 +151,56 @@ body { |
152 | 151 | color: var(--accent); |
153 | 152 | } |
154 | 153 |
|
| 154 | +/* --- Main tabs (Chat / Schedules) --- */ |
| 155 | + |
| 156 | +#main-tabs { |
| 157 | + display: flex; |
| 158 | +} |
| 159 | + |
| 160 | +.main-tab { |
| 161 | + display: inline-flex; |
| 162 | + align-items: center; |
| 163 | + justify-content: center; |
| 164 | + gap: 5px; |
| 165 | + flex: 1; |
| 166 | + padding: 7px 4px; |
| 167 | + border: none; |
| 168 | + background: none; |
| 169 | + color: var(--text-muted); |
| 170 | + font-size: 12px; |
| 171 | + font-weight: 500; |
| 172 | + cursor: pointer; |
| 173 | + border-bottom: 2px solid transparent; |
| 174 | + margin-bottom: -1px; |
| 175 | +} |
| 176 | + |
| 177 | +.main-tab:hover { |
| 178 | + color: var(--text-primary); |
| 179 | +} |
| 180 | + |
| 181 | +.main-tab.active { |
| 182 | + color: var(--accent); |
| 183 | + border-bottom-color: var(--accent); |
| 184 | +} |
| 185 | + |
| 186 | +/* --- Conversation panel --- */ |
| 187 | + |
| 188 | +#conversation-panel { |
| 189 | + display: flex; |
| 190 | + flex-direction: column; |
| 191 | + flex: 1; |
| 192 | + min-height: 0; |
| 193 | +} |
| 194 | + |
| 195 | +/* --- Schedules panel --- */ |
| 196 | + |
| 197 | +#schedules-panel { |
| 198 | + display: flex; |
| 199 | + flex-direction: column; |
| 200 | + flex: 1; |
| 201 | + min-height: 0; |
| 202 | +} |
| 203 | + |
155 | 204 | /* --- Messages wrapper --- */ |
156 | 205 |
|
157 | 206 | #messages-wrapper { |
@@ -673,6 +722,201 @@ body { |
673 | 722 | background: var(--accent-hover); |
674 | 723 | } |
675 | 724 |
|
| 725 | +/* --- Schedules panel --- */ |
| 726 | + |
| 727 | +.schedules-list { |
| 728 | + flex: 1; |
| 729 | + overflow-y: auto; |
| 730 | + padding: 4px 0; |
| 731 | +} |
| 732 | + |
| 733 | +.schedule-row { |
| 734 | + padding: 8px 16px; |
| 735 | + cursor: pointer; |
| 736 | +} |
| 737 | + |
| 738 | +.schedule-row:hover { |
| 739 | + background: var(--bg-secondary); |
| 740 | +} |
| 741 | + |
| 742 | +.schedule-header { |
| 743 | + display: flex; |
| 744 | + align-items: center; |
| 745 | + gap: 8px; |
| 746 | +} |
| 747 | + |
| 748 | +.schedule-timing { |
| 749 | + font-size: 11px; |
| 750 | + font-weight: 600; |
| 751 | + color: var(--accent); |
| 752 | + flex-shrink: 0; |
| 753 | +} |
| 754 | + |
| 755 | +.schedule-prompt { |
| 756 | + flex: 1; |
| 757 | + font-size: 13px; |
| 758 | + color: var(--text-primary); |
| 759 | + overflow: hidden; |
| 760 | + text-overflow: ellipsis; |
| 761 | + white-space: nowrap; |
| 762 | +} |
| 763 | + |
| 764 | +.schedule-delete { |
| 765 | + border: none; |
| 766 | + background: none; |
| 767 | + color: var(--text-muted); |
| 768 | + cursor: pointer; |
| 769 | + padding: 2px 6px; |
| 770 | + border-radius: 4px; |
| 771 | + font-size: 16px; |
| 772 | + line-height: 1; |
| 773 | + flex-shrink: 0; |
| 774 | +} |
| 775 | + |
| 776 | +.schedule-delete:hover { |
| 777 | + color: var(--status-err-text); |
| 778 | + background: var(--status-err-bg); |
| 779 | +} |
| 780 | + |
| 781 | +.schedule-detail { |
| 782 | + display: none; |
| 783 | + padding-top: 8px; |
| 784 | +} |
| 785 | + |
| 786 | +.schedule-row.expanded .schedule-detail { |
| 787 | + display: block; |
| 788 | +} |
| 789 | + |
| 790 | +.schedule-row.expanded .schedule-prompt { |
| 791 | + white-space: normal; |
| 792 | + overflow: visible; |
| 793 | +} |
| 794 | + |
| 795 | +.schedule-cron { |
| 796 | + font-size: 10px; |
| 797 | + font-family: monospace; |
| 798 | + color: var(--text-muted); |
| 799 | + margin-bottom: 6px; |
| 800 | +} |
| 801 | + |
| 802 | +.schedule-edit-input { |
| 803 | + width: 100%; |
| 804 | + padding: 6px 10px; |
| 805 | + border: 1px solid var(--bg-tertiary); |
| 806 | + border-radius: 6px; |
| 807 | + background: var(--bg-secondary); |
| 808 | + color: var(--text-primary); |
| 809 | + font-family: inherit; |
| 810 | + font-size: 13px; |
| 811 | + outline: none; |
| 812 | + resize: vertical; |
| 813 | + min-height: 32px; |
| 814 | +} |
| 815 | + |
| 816 | +.schedule-edit-input:focus { |
| 817 | + border-color: var(--accent); |
| 818 | +} |
| 819 | + |
| 820 | +.schedule-save { |
| 821 | + margin-top: 6px; |
| 822 | + padding: 4px 12px; |
| 823 | + border: none; |
| 824 | + border-radius: 6px; |
| 825 | + background: var(--accent); |
| 826 | + color: var(--accent-text); |
| 827 | + font-size: 12px; |
| 828 | + font-weight: 600; |
| 829 | + cursor: pointer; |
| 830 | +} |
| 831 | + |
| 832 | +.schedule-save:hover { |
| 833 | + background: var(--accent-hover); |
| 834 | +} |
| 835 | + |
| 836 | +.schedules-add { |
| 837 | + display: flex; |
| 838 | + gap: 8px; |
| 839 | + padding: 12px 16px; |
| 840 | + border-top: 1px solid var(--border); |
| 841 | +} |
| 842 | + |
| 843 | +.schedules-add input { |
| 844 | + flex: 1; |
| 845 | + padding: 8px 12px; |
| 846 | + border: 1px solid var(--bg-tertiary); |
| 847 | + border-radius: 8px; |
| 848 | + background: var(--bg-secondary); |
| 849 | + color: var(--text-primary); |
| 850 | + font-family: inherit; |
| 851 | + font-size: 13px; |
| 852 | + outline: none; |
| 853 | +} |
| 854 | + |
| 855 | +.schedules-add input:focus { |
| 856 | + border-color: var(--accent); |
| 857 | +} |
| 858 | + |
| 859 | +.schedules-add button { |
| 860 | + padding: 8px 12px; |
| 861 | + border: none; |
| 862 | + border-radius: 8px; |
| 863 | + background: var(--accent); |
| 864 | + color: var(--accent-text); |
| 865 | + font-size: 13px; |
| 866 | + cursor: pointer; |
| 867 | + flex-shrink: 0; |
| 868 | +} |
| 869 | + |
| 870 | +.schedules-add button:hover { |
| 871 | + background: var(--accent-hover); |
| 872 | +} |
| 873 | + |
| 874 | +.schedules-empty { |
| 875 | + padding: 32px 16px; |
| 876 | + text-align: center; |
| 877 | + color: var(--text-muted); |
| 878 | + font-size: 13px; |
| 879 | +} |
| 880 | + |
| 881 | +.schedule-error { |
| 882 | + padding: 8px 16px; |
| 883 | + color: var(--status-err-text); |
| 884 | + background: var(--status-err-bg); |
| 885 | + font-size: 12px; |
| 886 | + border-radius: 6px; |
| 887 | + margin: 8px 16px; |
| 888 | +} |
| 889 | + |
| 890 | +/* --- Skeleton loading --- */ |
| 891 | + |
| 892 | +.skeleton-block { |
| 893 | + display: block; |
| 894 | + height: 14px; |
| 895 | + border-radius: 4px; |
| 896 | + background: linear-gradient( |
| 897 | + 90deg, |
| 898 | + var(--bg-tertiary) 25%, |
| 899 | + var(--bg-secondary) 50%, |
| 900 | + var(--bg-tertiary) 75% |
| 901 | + ); |
| 902 | + background-size: 200% 100%; |
| 903 | + animation: skeleton-shimmer 1.5s ease-in-out infinite; |
| 904 | +} |
| 905 | + |
| 906 | +.skeleton-timing { |
| 907 | + width: 72px; |
| 908 | + flex-shrink: 0; |
| 909 | +} |
| 910 | + |
| 911 | +.skeleton-prompt { |
| 912 | + flex: 1; |
| 913 | +} |
| 914 | + |
| 915 | +@keyframes skeleton-shimmer { |
| 916 | + 0% { background-position: 200% 0; } |
| 917 | + 100% { background-position: -200% 0; } |
| 918 | +} |
| 919 | + |
676 | 920 | /* --- Domains panel --- */ |
677 | 921 |
|
678 | 922 | .domains-list { |
|
0 commit comments