@samitouri / QOSami_Agents_Zero-2
Code Commits Issues Pulls Sessions CI/CD
main
main
css 127 lines 3.38 KB
Raw
1 /* Flatpickr Customization for Scheduler */
2
3 /* Custom styling wrapper */
4 .scheduler-flatpickr-wrapper {
5 position: relative;
6 width: 100%;
7 overflow: visible !important; /* Ensure dropdown can escape container */
8 }
9
10 /* Input styling */
11 .scheduler-flatpickr-input {
12 width: 100%;
13 padding: 8px 12px;
14 border: 1px solid var(--color-border, #ccc);
15 border-radius: 4px;
16 background-color: var(--color-input, #fff);
17 color: var(--color-text, #333);
18 font-size: 14px;
19 cursor: pointer;
20 }
21
22 /* Calendar container customization */
23 .flatpickr-calendar.scheduler-theme {
24 background: var(--color-panel, #fff);
25 border: 1px solid var(--color-border, #ccc);
26 border-radius: 4px;
27 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
28 color: var(--color-text, #333);
29 font-size: 14px;
30 max-width: 320px;
31 padding: 0;
32 z-index: 9999 !important; /* Ensure it's above other elements */
33 position: absolute !important;
34 visibility: visible !important;
35 opacity: 1 !important;
36 }
37
38 /* Month navigation */
39 .flatpickr-calendar.scheduler-theme .flatpickr-months {
40 background-color: var(--color-primary, #4a90e2);
41 border-radius: 4px 4px 0 0;
42 color: var(--color-text, #333);
43 padding: 8px 0;
44 }
45
46 .flatpickr-calendar.scheduler-theme .flatpickr-prev-month,
47 .flatpickr-calendar.scheduler-theme .flatpickr-next-month {
48 color: var(--color-text, #333);
49 }
50
51 .flatpickr-calendar.scheduler-theme .flatpickr-prev-month:hover,
52 .flatpickr-calendar.scheduler-theme .flatpickr-next-month:hover {
53 color: var(--color-text, #333);
54 }
55
56 /* Days of week */
57 .flatpickr-calendar.scheduler-theme .flatpickr-weekdays {
58 background-color: var(--color-panel, #fff);
59 border-bottom: 1px solid var(--color-border, #eee);
60 }
61
62 .flatpickr-calendar.scheduler-theme .flatpickr-weekday {
63 color: var(--color-text, #333);
64 font-weight: bold;
65 }
66
67 /* Day cells */
68 .flatpickr-calendar.scheduler-theme .flatpickr-day {
69 border-radius: 4px;
70 color: var(--color-text, #333);
71 transition: background-color 0.2s, color 0.2s;
72 }
73
74 .flatpickr-calendar.scheduler-theme .flatpickr-day:hover {
75 background-color: var(--color-panel, #f0f0f0);
76 }
77
78 .flatpickr-calendar.scheduler-theme .flatpickr-day.selected {
79 background-color: var(--color-primary, #4a90e2);
80 border-color: var(--color-border, #ccc);
81 color: var(--color-text, #333);
82 }
83
84 .flatpickr-calendar.scheduler-theme .flatpickr-day.today {
85 border-color: var(--color-border, #ccc);
86 color: var(--color-text, #333);
87 }
88
89 /* Time picker */
90 .flatpickr-calendar.scheduler-theme .flatpickr-time {
91 border-top: 1px solid var(--color-border, #eee);
92 background-color: var(--color-panel, #fff);
93 }
94
95 .flatpickr-calendar.scheduler-theme .numInputWrapper span {
96 border-color: var(--color-border, #eee);
97 }
98
99 .flatpickr-calendar.scheduler-theme .numInputWrapper span:hover {
100 background-color: var(--color-panel, #f0f0f0);
101 }
102
103 .flatpickr-calendar.scheduler-theme input.flatpickr-hour,
104 .flatpickr-calendar.scheduler-theme input.flatpickr-minute,
105 .flatpickr-calendar.scheduler-theme input.flatpickr-second {
106 color: var(--color-text, #333);
107 background-color: transparent;
108 }
109
110 /* Clear button in the input field */
111 .scheduler-flatpickr-clear {
112 position: absolute;
113 right: 8px;
114 top: 50%;
115 transform: translateY(-50%);
116 cursor: pointer;
117 padding: 4px;
118 display: none;
119 color: var(--color-text-light, #999);
120 background: transparent;
121 border: none;
122 z-index: 1;
123 }
124
125 .scheduler-flatpickr-wrapper:hover .scheduler-flatpickr-clear {
126 display: block;
127 }