@nomideusz/svelte-calendar 0.6.4 → 0.6.5
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.
- package/README.md +9 -5
- package/dist/assets/favicon.svg +9 -1
- package/dist/calendar/Calendar.svelte +14 -14
- package/dist/primitives/DayHeader.svelte +6 -6
- package/dist/primitives/EmptySlot.svelte +3 -3
- package/dist/primitives/EventBlock.svelte +16 -16
- package/dist/primitives/NowIndicator.svelte +5 -5
- package/dist/views/agenda/AgendaDay.svelte +33 -28
- package/dist/views/agenda/AgendaWeek.svelte +18 -18
- package/dist/views/mobile/MobileDay.svelte +3 -6
- package/dist/views/mobile/MobileWeek.svelte +53 -18
- package/dist/views/planner/PlannerDay.svelte +30 -29
- package/dist/views/planner/PlannerWeek.svelte +124 -37
- package/package.json +78 -76
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ pnpm add @nomideusz/svelte-calendar
|
|
|
25
25
|
<Calendar {adapter} />
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
That's it — 6 views (Day/Week × Planner, Agenda, Mobile), auto-coloring, drag-and-drop, all out of the box. The default `auto` theme probes your page's background, accent color, and fonts, so the calendar adapts to any design.
|
|
28
|
+
That's it — 6 views (Day/Week × Planner, Agenda, Mobile), auto-coloring, drag-and-drop with live previews, all out of the box. The default `auto` theme probes your page's background, accent color, and fonts, so the calendar adapts to any design.
|
|
29
29
|
|
|
30
30
|
## Views
|
|
31
31
|
|
|
@@ -40,6 +40,8 @@ Switch between **Planner** (time grid) and **Agenda** (list) in Day or Week mode
|
|
|
40
40
|
|
|
41
41
|
Users can also switch via the built-in Day/Week pills.
|
|
42
42
|
|
|
43
|
+
Planner views are designed for direct manipulation: drag an event to another day or time and the calendar renders a ghost preview at the target position before committing the move.
|
|
44
|
+
|
|
43
45
|
Hide the pills when your app controls the view externally:
|
|
44
46
|
|
|
45
47
|
```svelte
|
|
@@ -62,8 +64,8 @@ On narrow screens (`< 768px`), the calendar automatically remaps Planner views t
|
|
|
62
64
|
```
|
|
63
65
|
|
|
64
66
|
Mobile views include:
|
|
65
|
-
- **MobileDay** — vertical time grid with hour labels, swipe left/right to change days, all-day event chips at the top, tap-to-create
|
|
66
|
-
- **MobileWeek** — vertical day list showing each day's events with relative labels (Today, Tomorrow, etc.)
|
|
67
|
+
- **MobileDay** — vertical time grid with hour labels, swipe left/right to change days, all-day event chips at the top, tap-to-create, and stable columns for overlapping events
|
|
68
|
+
- **MobileWeek** — vertical day list showing each day's events with relative labels (Today, Tomorrow, etc.) and accessible event buttons inside each row
|
|
67
69
|
|
|
68
70
|
Agenda views keep their list-based layout on mobile but hide desktop floating navigation in favor of the centralized header.
|
|
69
71
|
|
|
@@ -150,6 +152,8 @@ Disable specific dates:
|
|
|
150
152
|
/>
|
|
151
153
|
```
|
|
152
154
|
|
|
155
|
+
Disabled dates prevent creating or moving events into those days. Existing events remain visible and clickable, which is useful for holidays, fully booked days, or read-only imported schedules.
|
|
156
|
+
|
|
153
157
|
Custom day headers and hover previews:
|
|
154
158
|
|
|
155
159
|
```svelte
|
|
@@ -264,7 +268,7 @@ Or set them at the page level:
|
|
|
264
268
|
}
|
|
265
269
|
```
|
|
266
270
|
|
|
267
|
-
The auto-probe reads these first — if you set `--dt-bg` or `--accent` on `:root`, the calendar picks them up.
|
|
271
|
+
The auto-probe reads these first — if you set `--dt-bg` or `--accent` on `:root`, the calendar picks them up. Component fallbacks intentionally use system fonts and neutral blue accents so the package stays clean in apps that do not provide custom tokens.
|
|
268
272
|
|
|
269
273
|
### Extending Presets
|
|
270
274
|
|
|
@@ -706,7 +710,7 @@ Drop into any HTML page — no build tools needed. Registers a `<day-calendar>`
|
|
|
706
710
|
| `currentDate` | `Date` | — | Controlled focus date (drives which date the calendar shows) |
|
|
707
711
|
| `days` | `number` | `7` | Number of days shown in week views (e.g. `3` for a rolling 3-day view) |
|
|
708
712
|
| `blockedSlots` | `BlockedSlot[]` | — | Time ranges that cannot be booked (hatched overlay in planner views) |
|
|
709
|
-
| `disabledDates` | `Date[]` | — | Dates that
|
|
713
|
+
| `disabledDates` | `Date[]` | — | Dates that reject creation/moves while keeping existing events visible and clickable |
|
|
710
714
|
| `minDuration` | `number` | — | Minimum event duration in minutes (enforced on create & resize) |
|
|
711
715
|
| `maxDuration` | `number` | — | Maximum event duration in minutes (enforced on create & resize) |
|
|
712
716
|
| `compact` | `boolean` | `false` | Minimal text-row rendering in Agenda views (dot + time + title) |
|
package/dist/assets/favicon.svg
CHANGED
|
@@ -1 +1,9 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
2
|
+
<title>svelte-calendar</title>
|
|
3
|
+
<rect width="64" height="64" rx="16" fill="#2563eb"/>
|
|
4
|
+
<rect x="14" y="18" width="36" height="32" rx="6" fill="#fff"/>
|
|
5
|
+
<path d="M14 27h36" stroke="#2563eb" stroke-width="4"/>
|
|
6
|
+
<path d="M23 13v10M41 13v10" stroke="#fff" stroke-width="5" stroke-linecap="round"/>
|
|
7
|
+
<rect x="21" y="33" width="7" height="7" rx="2" fill="#2563eb" opacity=".9"/>
|
|
8
|
+
<rect x="36" y="33" width="7" height="7" rx="2" fill="#2563eb" opacity=".35"/>
|
|
9
|
+
</svg>
|
|
@@ -647,7 +647,7 @@
|
|
|
647
647
|
z-index: 20;
|
|
648
648
|
display: flex;
|
|
649
649
|
gap: 2px;
|
|
650
|
-
background: color-mix(in srgb, var(--dt-surface, #
|
|
650
|
+
background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
|
|
651
651
|
backdrop-filter: blur(6px);
|
|
652
652
|
-webkit-backdrop-filter: blur(6px);
|
|
653
653
|
border-radius: 8px;
|
|
@@ -660,7 +660,7 @@
|
|
|
660
660
|
background: transparent;
|
|
661
661
|
color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
|
|
662
662
|
cursor: pointer;
|
|
663
|
-
font: 600 11px / 1 var(--dt-sans,
|
|
663
|
+
font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
664
664
|
padding: 6px 12px;
|
|
665
665
|
border-radius: 6px;
|
|
666
666
|
letter-spacing: 0.04em;
|
|
@@ -673,12 +673,12 @@
|
|
|
673
673
|
}
|
|
674
674
|
|
|
675
675
|
.cal-pill--active {
|
|
676
|
-
background: var(--dt-accent, #
|
|
676
|
+
background: var(--dt-accent, #2563eb);
|
|
677
677
|
color: var(--dt-btn-text, #fff);
|
|
678
678
|
}
|
|
679
679
|
|
|
680
680
|
.cal-pill:focus-visible {
|
|
681
|
-
outline: 2px solid color-mix(in srgb, var(--dt-accent, #
|
|
681
|
+
outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
|
|
682
682
|
outline-offset: 2px;
|
|
683
683
|
}
|
|
684
684
|
|
|
@@ -697,7 +697,7 @@
|
|
|
697
697
|
align-items: center;
|
|
698
698
|
justify-content: center;
|
|
699
699
|
height: 100%;
|
|
700
|
-
font: 400 13px / 1 var(--dt-sans,
|
|
700
|
+
font: 400 13px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
701
701
|
color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
|
|
702
702
|
}
|
|
703
703
|
|
|
@@ -710,7 +710,7 @@
|
|
|
710
710
|
background: linear-gradient(
|
|
711
711
|
90deg,
|
|
712
712
|
transparent 0%,
|
|
713
|
-
var(--dt-accent, #
|
|
713
|
+
var(--dt-accent, #2563eb) 50%,
|
|
714
714
|
transparent 100%
|
|
715
715
|
);
|
|
716
716
|
animation: cal-slide 1.2s ease-in-out infinite;
|
|
@@ -767,14 +767,14 @@
|
|
|
767
767
|
background: var(--dt-accent-dim, rgba(239, 68, 68, 0.12));
|
|
768
768
|
}
|
|
769
769
|
.cal-m-nav:focus-visible {
|
|
770
|
-
outline: 2px solid color-mix(in srgb, var(--dt-accent, #
|
|
770
|
+
outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
|
|
771
771
|
outline-offset: 2px;
|
|
772
772
|
}
|
|
773
773
|
|
|
774
774
|
.cal-m-pills {
|
|
775
775
|
display: flex;
|
|
776
776
|
gap: 2px;
|
|
777
|
-
background: color-mix(in srgb, var(--dt-surface, #
|
|
777
|
+
background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
|
|
778
778
|
border-radius: 8px;
|
|
779
779
|
padding: 2px;
|
|
780
780
|
border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
|
|
@@ -797,7 +797,7 @@
|
|
|
797
797
|
color: var(--dt-text, rgba(226, 232, 240, 0.85));
|
|
798
798
|
}
|
|
799
799
|
.cal-m-pill--active {
|
|
800
|
-
background: var(--dt-accent, #
|
|
800
|
+
background: var(--dt-accent, #2563eb);
|
|
801
801
|
color: var(--dt-btn-text, #fff);
|
|
802
802
|
}
|
|
803
803
|
|
|
@@ -821,8 +821,8 @@
|
|
|
821
821
|
|
|
822
822
|
.cal-m-today {
|
|
823
823
|
font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
824
|
-
color: var(--dt-accent, #
|
|
825
|
-
background: color-mix(in srgb, var(--dt-accent, #
|
|
824
|
+
color: var(--dt-accent, #2563eb);
|
|
825
|
+
background: color-mix(in srgb, var(--dt-accent, #2563eb) 10%, transparent);
|
|
826
826
|
border: none;
|
|
827
827
|
padding: 5px 10px;
|
|
828
828
|
border-radius: 6px;
|
|
@@ -835,13 +835,13 @@
|
|
|
835
835
|
flex-shrink: 0;
|
|
836
836
|
}
|
|
837
837
|
.cal-m-today:hover {
|
|
838
|
-
background: color-mix(in srgb, var(--dt-accent, #
|
|
838
|
+
background: color-mix(in srgb, var(--dt-accent, #2563eb) 18%, transparent);
|
|
839
839
|
}
|
|
840
840
|
.cal-m-today:active {
|
|
841
|
-
background: color-mix(in srgb, var(--dt-accent, #
|
|
841
|
+
background: color-mix(in srgb, var(--dt-accent, #2563eb) 25%, transparent);
|
|
842
842
|
}
|
|
843
843
|
.cal-m-today:focus-visible {
|
|
844
|
-
outline: 2px solid color-mix(in srgb, var(--dt-accent, #
|
|
844
|
+
outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
|
|
845
845
|
outline-offset: 2px;
|
|
846
846
|
}
|
|
847
847
|
</style>
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.dh-name {
|
|
64
|
-
font: 500 10px / 1 var(--dt-sans,
|
|
64
|
+
font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
65
65
|
letter-spacing: 0.04em;
|
|
66
66
|
text-transform: uppercase;
|
|
67
67
|
color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.dh-num {
|
|
77
|
-
font: 600 14px / 1 var(--dt-sans,
|
|
77
|
+
font: 600 14px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
78
78
|
color: var(--dt-text, rgba(226, 232, 240, 0.85));
|
|
79
79
|
width: 28px;
|
|
80
80
|
height: 28px;
|
|
@@ -84,20 +84,20 @@
|
|
|
84
84
|
border-radius: 50%;
|
|
85
85
|
}
|
|
86
86
|
.dh-num-today {
|
|
87
|
-
background: var(--dt-accent, #
|
|
87
|
+
background: var(--dt-accent, #2563eb);
|
|
88
88
|
color: var(--dt-btn-text, #fff);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.dh-date {
|
|
92
|
-
font: 400 10px / 1 var(--dt-sans,
|
|
92
|
+
font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
93
93
|
color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
.dh-rel {
|
|
97
|
-
font: 500 12px / 1.3 var(--dt-sans,
|
|
97
|
+
font: 500 12px / 1.3 var(--dt-sans, system-ui, sans-serif);
|
|
98
98
|
color: var(--dt-text, rgba(226, 232, 240, 0.85));
|
|
99
99
|
}
|
|
100
100
|
.dh-today .dh-rel {
|
|
101
|
-
color: var(--dt-accent, #
|
|
101
|
+
color: var(--dt-accent, #2563eb);
|
|
102
102
|
}
|
|
103
103
|
</style>
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
background: var(--dt-accent-dim, rgba(239, 68, 68, 0.05));
|
|
69
69
|
}
|
|
70
70
|
.es:focus-visible {
|
|
71
|
-
outline: 2px solid var(--dt-accent, #
|
|
71
|
+
outline: 2px solid var(--dt-accent, #2563eb);
|
|
72
72
|
outline-offset: 2px;
|
|
73
73
|
border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
|
|
74
74
|
}
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.es-plus {
|
|
91
|
-
font: 500 14px / 1 var(--dt-sans,
|
|
92
|
-
color: var(--dt-accent, #
|
|
91
|
+
font: 500 14px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
92
|
+
color: var(--dt-accent, #2563eb);
|
|
93
93
|
}
|
|
94
94
|
.es-range {
|
|
95
95
|
font: 400 10px / 1 var(--dt-mono, 'SF Mono', monospace);
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
children,
|
|
48
48
|
}: Props = $props();
|
|
49
49
|
|
|
50
|
-
const accentColor = $derived(event.color || 'var(--dt-accent, #
|
|
50
|
+
const accentColor = $derived(event.color || 'var(--dt-accent, #2563eb)');
|
|
51
51
|
const isCancelled = $derived(event.status === 'cancelled');
|
|
52
52
|
const isTentative = $derived(event.status === 'tentative');
|
|
53
53
|
const isFull = $derived(event.status === 'full');
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
|
|
177
177
|
<style>
|
|
178
178
|
.eb {
|
|
179
|
-
--_color: var(--eb-color, var(--dt-accent, #
|
|
179
|
+
--_color: var(--eb-color, var(--dt-accent, #2563eb));
|
|
180
180
|
cursor: default;
|
|
181
181
|
transition: opacity 120ms, transform 80ms;
|
|
182
182
|
}
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
transform: translateY(-1px);
|
|
188
188
|
}
|
|
189
189
|
.eb:focus-visible {
|
|
190
|
-
outline: 2px solid var(--dt-accent, #
|
|
190
|
+
outline: 2px solid var(--dt-accent, #2563eb);
|
|
191
191
|
outline-offset: 2px;
|
|
192
192
|
border-radius: 4px;
|
|
193
193
|
}
|
|
@@ -225,7 +225,7 @@
|
|
|
225
225
|
display: inline-flex;
|
|
226
226
|
align-items: center;
|
|
227
227
|
gap: 5px;
|
|
228
|
-
font: 400 11px / 1 var(--dt-sans,
|
|
228
|
+
font: 400 11px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
229
229
|
color: var(--dt-text, rgba(226, 232, 240, 0.85));
|
|
230
230
|
white-space: nowrap;
|
|
231
231
|
overflow: hidden;
|
|
@@ -252,7 +252,7 @@
|
|
|
252
252
|
.eb-card {
|
|
253
253
|
display: flex;
|
|
254
254
|
border-radius: 8px;
|
|
255
|
-
background: var(--dt-surface, #
|
|
255
|
+
background: var(--dt-surface, var(--dt-bg, #ffffff));
|
|
256
256
|
border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
|
|
257
257
|
overflow: hidden;
|
|
258
258
|
}
|
|
@@ -269,7 +269,7 @@
|
|
|
269
269
|
min-width: 0;
|
|
270
270
|
}
|
|
271
271
|
.eb-card .eb-title {
|
|
272
|
-
font: 500 12px / 1.3 var(--dt-sans,
|
|
272
|
+
font: 500 12px / 1.3 var(--dt-sans, system-ui, sans-serif);
|
|
273
273
|
color: var(--dt-text, rgba(226, 232, 240, 0.85));
|
|
274
274
|
overflow: hidden;
|
|
275
275
|
text-overflow: ellipsis;
|
|
@@ -280,7 +280,7 @@
|
|
|
280
280
|
color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
|
|
281
281
|
}
|
|
282
282
|
.eb-card .eb-dur {
|
|
283
|
-
font: 300 10px / 1 var(--dt-sans,
|
|
283
|
+
font: 300 10px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
284
284
|
color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
|
|
285
285
|
}
|
|
286
286
|
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
width: 90px;
|
|
308
308
|
}
|
|
309
309
|
.eb-row .eb-title {
|
|
310
|
-
font: 400 12px / 1.3 var(--dt-sans,
|
|
310
|
+
font: 400 12px / 1.3 var(--dt-sans, system-ui, sans-serif);
|
|
311
311
|
color: var(--dt-text, rgba(226, 232, 240, 0.85));
|
|
312
312
|
flex: 1;
|
|
313
313
|
overflow: hidden;
|
|
@@ -315,14 +315,14 @@
|
|
|
315
315
|
white-space: nowrap;
|
|
316
316
|
}
|
|
317
317
|
.eb-row .eb-dur {
|
|
318
|
-
font: 300 10px / 1 var(--dt-sans,
|
|
318
|
+
font: 300 10px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
319
319
|
color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
|
|
320
320
|
flex-shrink: 0;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
323
|
/* ── Shared ── */
|
|
324
324
|
.eb-subtitle {
|
|
325
|
-
font: 400 10px / 1.2 var(--dt-sans,
|
|
325
|
+
font: 400 10px / 1.2 var(--dt-sans, system-ui, sans-serif);
|
|
326
326
|
color: var(--dt-text-2, rgba(148, 163, 184, 0.65));
|
|
327
327
|
overflow: hidden;
|
|
328
328
|
text-overflow: ellipsis;
|
|
@@ -335,7 +335,7 @@
|
|
|
335
335
|
}
|
|
336
336
|
.eb-tag {
|
|
337
337
|
display: inline-block;
|
|
338
|
-
font: 500 8px / 1 var(--dt-sans,
|
|
338
|
+
font: 500 8px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
339
339
|
letter-spacing: 0.04em;
|
|
340
340
|
text-transform: uppercase;
|
|
341
341
|
padding: 2px 5px;
|
|
@@ -344,7 +344,7 @@
|
|
|
344
344
|
color: var(--_color);
|
|
345
345
|
}
|
|
346
346
|
.eb-location {
|
|
347
|
-
font: 400 9px / 1.2 var(--dt-sans,
|
|
347
|
+
font: 400 9px / 1.2 var(--dt-sans, system-ui, sans-serif);
|
|
348
348
|
color: var(--dt-text-3, rgba(100, 116, 139, 0.55));
|
|
349
349
|
overflow: hidden;
|
|
350
350
|
text-overflow: ellipsis;
|
|
@@ -353,7 +353,7 @@
|
|
|
353
353
|
.eb-status-badge {
|
|
354
354
|
display: inline-flex;
|
|
355
355
|
align-items: center;
|
|
356
|
-
font: 700 8px / 1 var(--dt-sans,
|
|
356
|
+
font: 700 8px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
357
357
|
letter-spacing: 0.06em;
|
|
358
358
|
text-transform: uppercase;
|
|
359
359
|
padding: 2px 6px;
|
|
@@ -369,8 +369,8 @@
|
|
|
369
369
|
background: color-mix(in srgb, var(--_color) 12%, transparent);
|
|
370
370
|
}
|
|
371
371
|
.eb-full-badge {
|
|
372
|
-
color: #
|
|
373
|
-
background: color-mix(in srgb, #
|
|
372
|
+
color: #2563eb;
|
|
373
|
+
background: color-mix(in srgb, #2563eb 15%, transparent);
|
|
374
374
|
}
|
|
375
375
|
.eb-limited-badge {
|
|
376
376
|
color: var(--_color);
|
|
@@ -379,7 +379,7 @@
|
|
|
379
379
|
.eb-live-badge {
|
|
380
380
|
display: inline-flex;
|
|
381
381
|
align-items: center;
|
|
382
|
-
font: 700 8px / 1 var(--dt-sans,
|
|
382
|
+
font: 700 8px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
383
383
|
letter-spacing: 0.08em;
|
|
384
384
|
text-transform: uppercase;
|
|
385
385
|
color: var(--dt-btn-text, #fff);
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
height: 0;
|
|
105
105
|
}
|
|
106
106
|
.ni-line-bar {
|
|
107
|
-
background: var(--ni-color, var(--dt-accent, #
|
|
107
|
+
background: var(--ni-color, var(--dt-accent, #2563eb));
|
|
108
108
|
}
|
|
109
109
|
.ni-line.vertical .ni-line-bar {
|
|
110
110
|
width: 2px;
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
width: 10px;
|
|
123
123
|
height: 10px;
|
|
124
124
|
border-radius: 50%;
|
|
125
|
-
background: var(--ni-color, var(--dt-accent, #
|
|
125
|
+
background: var(--ni-color, var(--dt-accent, #2563eb));
|
|
126
126
|
box-shadow: 0 0 6px var(--ni-color, var(--dt-glow, rgba(239, 68, 68, 0.35)));
|
|
127
127
|
}
|
|
128
128
|
.ni-dot.vertical .ni-dot-circle {
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
white-space: nowrap;
|
|
139
139
|
font: 600 10px / 1 var(--dt-mono, 'SF Mono', 'Fira Code', monospace);
|
|
140
140
|
color: var(--dt-btn-text, #fff);
|
|
141
|
-
background: var(--ni-color, var(--dt-accent, #
|
|
141
|
+
background: var(--ni-color, var(--dt-accent, #2563eb));
|
|
142
142
|
padding: 3px 6px;
|
|
143
143
|
border-radius: 4px;
|
|
144
144
|
}
|
|
@@ -161,11 +161,11 @@
|
|
|
161
161
|
.ni-badge {
|
|
162
162
|
display: inline-flex;
|
|
163
163
|
align-items: center;
|
|
164
|
-
font: 700 9px / 1 var(--dt-sans,
|
|
164
|
+
font: 700 9px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
165
165
|
letter-spacing: 0.08em;
|
|
166
166
|
text-transform: uppercase;
|
|
167
167
|
color: var(--dt-btn-text, #fff);
|
|
168
|
-
background: var(--ni-color, var(--dt-accent, #
|
|
168
|
+
background: var(--ni-color, var(--dt-accent, #2563eb));
|
|
169
169
|
padding: 2px 7px;
|
|
170
170
|
border-radius: 3px;
|
|
171
171
|
animation: ni-pulse 2s ease-in-out infinite;
|
|
@@ -444,11 +444,11 @@
|
|
|
444
444
|
left: 50%;
|
|
445
445
|
transform: translateX(-50%);
|
|
446
446
|
z-index: 20;
|
|
447
|
-
font: 600 11px/1 var(--dt-sans,
|
|
447
|
+
font: 600 11px/1 var(--dt-sans, system-ui, sans-serif);
|
|
448
448
|
letter-spacing: 0.04em;
|
|
449
449
|
text-transform: uppercase;
|
|
450
450
|
color: var(--dt-text, rgba(226, 232, 240, 0.85));
|
|
451
|
-
background: color-mix(in srgb, var(--dt-surface, #
|
|
451
|
+
background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
|
|
452
452
|
backdrop-filter: blur(6px);
|
|
453
453
|
-webkit-backdrop-filter: blur(6px);
|
|
454
454
|
padding: 8px 16px;
|
|
@@ -466,7 +466,7 @@
|
|
|
466
466
|
z-index: 20;
|
|
467
467
|
display: flex;
|
|
468
468
|
gap: 2px;
|
|
469
|
-
background: color-mix(in srgb, var(--dt-surface, #
|
|
469
|
+
background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
|
|
470
470
|
backdrop-filter: blur(6px);
|
|
471
471
|
-webkit-backdrop-filter: blur(6px);
|
|
472
472
|
border-radius: 8px;
|
|
@@ -478,7 +478,7 @@
|
|
|
478
478
|
background: transparent;
|
|
479
479
|
color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
|
|
480
480
|
cursor: pointer;
|
|
481
|
-
font: 600 11px / 1 var(--dt-sans,
|
|
481
|
+
font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
|
|
482
482
|
padding: 6px 12px;
|
|
483
483
|
border-radius: 6px;
|
|
484
484
|
letter-spacing: 0.04em;
|
|
@@ -505,7 +505,7 @@
|
|
|
505
505
|
pointer-events: none;
|
|
506
506
|
}
|
|
507
507
|
.ag-nav-pill:focus-visible {
|
|
508
|
-
outline: 2px solid color-mix(in srgb, var(--dt-accent, #
|
|
508
|
+
outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
|
|
509
509
|
outline-offset: 2px;
|
|
510
510
|
}
|
|
511
511
|
|
|
@@ -527,8 +527,13 @@
|
|
|
527
527
|
.ag--auto { height: auto; overflow: visible; }
|
|
528
528
|
|
|
529
529
|
.ag--disabled {
|
|
530
|
-
|
|
531
|
-
|
|
530
|
+
background-image: repeating-linear-gradient(
|
|
531
|
+
135deg,
|
|
532
|
+
transparent,
|
|
533
|
+
transparent 6px,
|
|
534
|
+
color-mix(in srgb, var(--dt-text, rgba(255, 255, 255, 0.92)) 4%, transparent) 6px,
|
|
535
|
+
color-mix(in srgb, var(--dt-text, rgba(255, 255, 255, 0.92)) 4%, transparent) 12px
|
|
536
|
+
);
|
|
532
537
|
}
|
|
533
538
|
|
|
534
539
|
/* ═══ Body ═══ */
|
|
@@ -581,22 +586,22 @@
|
|
|
581
586
|
gap: 5px;
|
|
582
587
|
padding: 3px 10px;
|
|
583
588
|
border-radius: 6px;
|
|
584
|
-
background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, #
|
|
589
|
+
background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
585
590
|
border: 1px solid color-mix(in srgb, var(--ev-color) 20%, transparent);
|
|
586
591
|
cursor: pointer;
|
|
587
592
|
transition: background 0.15s, border-color 0.15s;
|
|
588
593
|
}
|
|
589
594
|
.ag-allday-chip:hover {
|
|
590
|
-
background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #
|
|
595
|
+
background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
591
596
|
border-color: color-mix(in srgb, var(--ev-color) 35%, transparent);
|
|
592
597
|
}
|
|
593
598
|
.ag-allday-chip:focus-visible {
|
|
594
|
-
outline: 2px solid var(--dt-accent, #
|
|
599
|
+
outline: 2px solid var(--dt-accent, #2563eb);
|
|
595
600
|
outline-offset: 2px;
|
|
596
601
|
}
|
|
597
602
|
.ag-allday-chip--selected {
|
|
598
603
|
border-color: var(--ev-color);
|
|
599
|
-
background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, #
|
|
604
|
+
background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
600
605
|
}
|
|
601
606
|
.ag-allday-dot {
|
|
602
607
|
width: 6px;
|
|
@@ -616,23 +621,23 @@
|
|
|
616
621
|
display: flex;
|
|
617
622
|
align-items: stretch;
|
|
618
623
|
border-radius: 10px;
|
|
619
|
-
background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, #
|
|
624
|
+
background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
620
625
|
border: 1px solid color-mix(in srgb, var(--ev-color) 10%, var(--dt-border, rgba(255, 255, 255, 0.06)));
|
|
621
626
|
overflow: hidden;
|
|
622
627
|
cursor: pointer;
|
|
623
628
|
transition: background 150ms, border-color 150ms;
|
|
624
629
|
}
|
|
625
630
|
.ag-card:hover {
|
|
626
|
-
background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, #
|
|
631
|
+
background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
627
632
|
border-color: color-mix(in srgb, var(--ev-color) 40%, transparent);
|
|
628
633
|
}
|
|
629
634
|
.ag-card:focus-visible {
|
|
630
|
-
outline: 2px solid var(--dt-accent, #
|
|
635
|
+
outline: 2px solid var(--dt-accent, #2563eb);
|
|
631
636
|
outline-offset: 2px;
|
|
632
637
|
}
|
|
633
638
|
.ag-card--selected {
|
|
634
639
|
border-color: var(--ev-color);
|
|
635
|
-
background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #
|
|
640
|
+
background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
636
641
|
}
|
|
637
642
|
.ag-card--cancelled {
|
|
638
643
|
opacity: 0.5;
|
|
@@ -724,12 +729,12 @@
|
|
|
724
729
|
font-size: 9px;
|
|
725
730
|
font-weight: 600;
|
|
726
731
|
letter-spacing: 0.04em;
|
|
727
|
-
color: var(--dt-accent, #
|
|
732
|
+
color: var(--dt-accent, #2563eb);
|
|
728
733
|
flex-shrink: 0;
|
|
729
734
|
white-space: nowrap;
|
|
730
735
|
}
|
|
731
736
|
.ag-card--hero {
|
|
732
|
-
background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #
|
|
737
|
+
background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
733
738
|
border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
|
|
734
739
|
}
|
|
735
740
|
.ag-card--hero .ag-card-title {
|
|
@@ -738,7 +743,7 @@
|
|
|
738
743
|
}
|
|
739
744
|
.ag-card--hero .ag-card-eta {
|
|
740
745
|
font-size: 11px;
|
|
741
|
-
background: color-mix(in srgb, var(--dt-accent, #
|
|
746
|
+
background: color-mix(in srgb, var(--dt-accent, #2563eb) 18%, transparent);
|
|
742
747
|
padding: 2px 7px;
|
|
743
748
|
border-radius: 4px;
|
|
744
749
|
}
|
|
@@ -766,7 +771,7 @@
|
|
|
766
771
|
font-size: 14px;
|
|
767
772
|
}
|
|
768
773
|
.ag-card--first {
|
|
769
|
-
background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, #
|
|
774
|
+
background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
770
775
|
border-color: color-mix(in srgb, var(--ev-color) 25%, transparent);
|
|
771
776
|
}
|
|
772
777
|
.ag-card--first .ag-card-title {
|
|
@@ -876,24 +881,24 @@
|
|
|
876
881
|
font-size: 10px;
|
|
877
882
|
font-weight: 600;
|
|
878
883
|
font-family: var(--dt-mono, monospace);
|
|
879
|
-
color: var(--dt-accent, #
|
|
884
|
+
color: var(--dt-accent, #2563eb);
|
|
880
885
|
margin-left: 4px;
|
|
881
886
|
}
|
|
882
887
|
.ag-q-now {
|
|
883
888
|
padding: 8px 10px;
|
|
884
889
|
border-radius: 8px;
|
|
885
|
-
background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, var(--dt-surface, #
|
|
890
|
+
background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
886
891
|
border: 1px solid color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
|
|
887
892
|
cursor: pointer;
|
|
888
893
|
transition: background 150ms, border-color 150ms;
|
|
889
894
|
margin-right: 10px;
|
|
890
895
|
}
|
|
891
896
|
.ag-q-now:hover {
|
|
892
|
-
background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 25%, var(--dt-surface, #
|
|
897
|
+
background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
|
|
893
898
|
border-color: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 35%, transparent);
|
|
894
899
|
}
|
|
895
900
|
.ag-q-now:focus-visible {
|
|
896
|
-
outline: 2px solid var(--dt-accent, #
|
|
901
|
+
outline: 2px solid var(--dt-accent, #2563eb);
|
|
897
902
|
outline-offset: 2px;
|
|
898
903
|
}
|
|
899
904
|
.ag-q-now--selected {
|
|
@@ -903,7 +908,7 @@
|
|
|
903
908
|
width: 6px;
|
|
904
909
|
height: 6px;
|
|
905
910
|
border-radius: 50%;
|
|
906
|
-
background: var(--ev-color, var(--dt-accent, #
|
|
911
|
+
background: var(--ev-color, var(--dt-accent, #2563eb));
|
|
907
912
|
margin-bottom: 6px;
|
|
908
913
|
animation: ag-pulse 2.5s ease-in-out infinite;
|
|
909
914
|
}
|
|
@@ -935,7 +940,7 @@
|
|
|
935
940
|
}
|
|
936
941
|
.ag-q-now-fill {
|
|
937
942
|
height: 100%;
|
|
938
|
-
background: var(--ev-color, var(--dt-accent, #
|
|
943
|
+
background: var(--ev-color, var(--dt-accent, #2563eb));
|
|
939
944
|
border-radius: 1px;
|
|
940
945
|
transition: width 1s linear;
|
|
941
946
|
}
|
|
@@ -975,7 +980,7 @@
|
|
|
975
980
|
opacity: 0.6;
|
|
976
981
|
}
|
|
977
982
|
.ag-q-done-item:focus-visible {
|
|
978
|
-
outline: 2px solid var(--dt-accent, #
|
|
983
|
+
outline: 2px solid var(--dt-accent, #2563eb);
|
|
979
984
|
outline-offset: 2px;
|
|
980
985
|
opacity: 0.6;
|
|
981
986
|
}
|
|
@@ -1025,7 +1030,7 @@
|
|
|
1025
1030
|
opacity: 1;
|
|
1026
1031
|
}
|
|
1027
1032
|
.ag-log-row:focus-visible {
|
|
1028
|
-
outline: 2px solid var(--dt-accent, #
|
|
1033
|
+
outline: 2px solid var(--dt-accent, #2563eb);
|
|
1029
1034
|
outline-offset: 2px;
|
|
1030
1035
|
}
|
|
1031
1036
|
.ag-log-row--selected {
|
|
@@ -1096,7 +1101,7 @@
|
|
|
1096
1101
|
}
|
|
1097
1102
|
.ag-compact-row:hover .ag-compact-row-title { color: var(--dt-text); }
|
|
1098
1103
|
.ag-compact-row:focus-visible {
|
|
1099
|
-
outline: 2px solid var(--dt-accent, #
|
|
1104
|
+
outline: 2px solid var(--dt-accent, #2563eb);
|
|
1100
1105
|
outline-offset: 2px;
|
|
1101
1106
|
}
|
|
1102
1107
|
.ag-compact-row-dot {
|