@floegence/floe-webapp-core 0.35.39 → 0.35.41

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/dist/notes.css ADDED
@@ -0,0 +1,1014 @@
1
+ .notes-overlay {
2
+ position: absolute;
3
+ inset: 0;
4
+ z-index: 48;
5
+ overflow: hidden;
6
+ --notes-rail-width: 220px;
7
+ --notes-shell-line: color-mix(in srgb, var(--border) 80%, var(--foreground) 20%);
8
+ --notes-shell-line-strong: color-mix(in srgb, var(--border) 58%, var(--foreground) 42%);
9
+ --notes-shell-surface: color-mix(in srgb, var(--card) 90%, var(--background) 10%);
10
+ --notes-shell-elevated: color-mix(in srgb, var(--popover) 92%, var(--card) 8%);
11
+ --notes-shell-inset: color-mix(in srgb, var(--muted) 62%, var(--background) 38%);
12
+ --notes-shell-shadow:
13
+ 0 20px 60px rgba(15, 23, 42, 0.16),
14
+ 0 2px 8px rgba(15, 23, 42, 0.08);
15
+ --notes-note-shadow:
16
+ 0 14px 36px rgba(15, 23, 42, 0.14),
17
+ 0 2px 8px rgba(15, 23, 42, 0.06);
18
+ --notes-grid-major: color-mix(in srgb, var(--foreground) 9%, transparent);
19
+ --notes-grid-minor: color-mix(in srgb, var(--foreground) 4.5%, transparent);
20
+ }
21
+
22
+ .notes-overlay * {
23
+ box-sizing: border-box;
24
+ }
25
+
26
+ .notes-overlay button {
27
+ cursor: pointer;
28
+ }
29
+
30
+ .notes-overlay button:disabled {
31
+ cursor: default;
32
+ }
33
+
34
+ .notes-context-menu {
35
+ position: fixed;
36
+ z-index: 60;
37
+ min-width: 188px;
38
+ padding: 0.35rem 0;
39
+ border: 1px solid var(--notes-shell-line);
40
+ border-radius: 14px;
41
+ background: color-mix(in srgb, var(--notes-shell-elevated) 95%, transparent);
42
+ box-shadow:
43
+ 0 16px 40px rgba(15, 23, 42, 0.16),
44
+ 0 3px 10px rgba(15, 23, 42, 0.08);
45
+ backdrop-filter: blur(14px);
46
+ }
47
+
48
+ .notes-context-menu__separator {
49
+ margin: 0.28rem 0;
50
+ border-top: 1px solid color-mix(in srgb, var(--notes-shell-line) 82%, transparent);
51
+ }
52
+
53
+ .notes-context-menu__item {
54
+ display: flex;
55
+ width: 100%;
56
+ align-items: center;
57
+ gap: 0.62rem;
58
+ border: 0;
59
+ background: transparent;
60
+ color: var(--foreground);
61
+ padding: 0.55rem 0.78rem;
62
+ font-size: 0.79rem;
63
+ text-align: left;
64
+ transition:
65
+ background-color 140ms ease,
66
+ color 140ms ease;
67
+ }
68
+
69
+ .notes-context-menu__item:hover {
70
+ background: color-mix(in srgb, var(--accent) 72%, transparent);
71
+ }
72
+
73
+ .notes-context-menu__item:disabled {
74
+ color: color-mix(in srgb, var(--muted-foreground) 82%, transparent);
75
+ background: transparent;
76
+ }
77
+
78
+ .notes-context-menu__item.is-destructive {
79
+ color: color-mix(in srgb, var(--error) 82%, var(--foreground) 18%);
80
+ }
81
+
82
+ .notes-context-menu__item.is-destructive:hover {
83
+ background: color-mix(in srgb, var(--error) 10%, transparent);
84
+ }
85
+
86
+ .notes-context-menu__label {
87
+ flex: 1 1 auto;
88
+ }
89
+
90
+ .notes-overlay__scrim {
91
+ position: absolute;
92
+ inset: 0;
93
+ background: color-mix(in srgb, var(--background) 74%, transparent);
94
+ backdrop-filter: blur(14px);
95
+ }
96
+
97
+ .notes-overlay__rail {
98
+ position: absolute;
99
+ top: 14px;
100
+ bottom: 14px;
101
+ left: 14px;
102
+ z-index: 4;
103
+ width: var(--notes-rail-width);
104
+ display: flex;
105
+ flex-direction: column;
106
+ gap: 0.75rem;
107
+ border: 1px solid var(--notes-shell-line);
108
+ background: color-mix(in srgb, var(--notes-shell-surface) 92%, transparent);
109
+ box-shadow: var(--notes-shell-shadow);
110
+ border-radius: 14px;
111
+ padding: 0.875rem 0.75rem 0.8rem;
112
+ transition:
113
+ transform 180ms ease,
114
+ opacity 180ms ease;
115
+ }
116
+
117
+ .notes-overlay__rail.is-closed {
118
+ pointer-events: none;
119
+ opacity: 0;
120
+ }
121
+
122
+ .notes-overlay__rail-head {
123
+ display: flex;
124
+ align-items: center;
125
+ justify-content: space-between;
126
+ gap: 0.625rem;
127
+ }
128
+
129
+ .notes-overlay__brand {
130
+ display: inline-flex;
131
+ align-items: center;
132
+ gap: 0.5rem;
133
+ min-width: 0;
134
+ border: 0;
135
+ background: transparent;
136
+ color: var(--foreground);
137
+ padding: 0;
138
+ font-size: 0.72rem;
139
+ font-weight: 600;
140
+ letter-spacing: 0.08em;
141
+ text-transform: uppercase;
142
+ }
143
+
144
+ .notes-overlay__icon-button,
145
+ .notes-overlay__close,
146
+ .notes-overlay__inline-icon,
147
+ .notes-editor__color {
148
+ appearance: none;
149
+ border: 0;
150
+ background: transparent;
151
+ color: var(--muted-foreground);
152
+ transition:
153
+ color 150ms ease,
154
+ background-color 150ms ease,
155
+ border-color 150ms ease,
156
+ transform 150ms ease,
157
+ opacity 150ms ease;
158
+ }
159
+
160
+ .notes-overlay__icon-button,
161
+ .notes-overlay__close {
162
+ display: inline-flex;
163
+ align-items: center;
164
+ justify-content: center;
165
+ width: 1.95rem;
166
+ height: 1.95rem;
167
+ border: 1px solid var(--notes-shell-line);
168
+ border-radius: 10px;
169
+ background: color-mix(in srgb, var(--notes-shell-elevated) 88%, transparent);
170
+ }
171
+
172
+ .notes-overlay__icon-button:hover,
173
+ .notes-overlay__close:hover {
174
+ color: var(--foreground);
175
+ border-color: var(--notes-shell-line-strong);
176
+ background: color-mix(in srgb, var(--notes-shell-elevated) 76%, var(--background) 24%);
177
+ }
178
+
179
+ .notes-overlay__close--panel:hover {
180
+ color: white;
181
+ border-color: color-mix(in srgb, var(--error) 48%, transparent);
182
+ background: color-mix(in srgb, var(--error) 82%, transparent);
183
+ }
184
+
185
+ .notes-overlay__topic-create {
186
+ display: flex;
187
+ flex-direction: column;
188
+ gap: 0.625rem;
189
+ padding: 0.75rem 0;
190
+ border-top: 1px solid var(--notes-shell-line);
191
+ border-bottom: 1px solid var(--notes-shell-line);
192
+ }
193
+
194
+ .notes-overlay__topic-create-actions,
195
+ .notes-editor__actions {
196
+ display: flex;
197
+ align-items: center;
198
+ gap: 0.75rem;
199
+ }
200
+
201
+ .notes-overlay__text-action {
202
+ appearance: none;
203
+ border: 0;
204
+ background: transparent;
205
+ padding: 0;
206
+ color: var(--muted-foreground);
207
+ font-size: 0.73rem;
208
+ font-weight: 600;
209
+ letter-spacing: 0.05em;
210
+ text-transform: uppercase;
211
+ transition: color 150ms ease;
212
+ cursor: pointer;
213
+ }
214
+
215
+ .notes-overlay__text-action:hover {
216
+ color: var(--foreground);
217
+ }
218
+
219
+ .notes-overlay__text-action--danger:hover {
220
+ color: var(--error);
221
+ }
222
+
223
+ .notes-overlay__topic-input,
224
+ .notes-editor__textarea {
225
+ width: 100%;
226
+ border: 1px solid var(--notes-shell-line);
227
+ background: color-mix(in srgb, var(--notes-shell-inset) 88%, transparent);
228
+ color: var(--foreground);
229
+ border-radius: 10px;
230
+ outline: none;
231
+ transition:
232
+ border-color 150ms ease,
233
+ background-color 150ms ease,
234
+ box-shadow 150ms ease;
235
+ }
236
+
237
+ .notes-overlay__topic-input {
238
+ height: 2.2rem;
239
+ padding: 0 0.78rem;
240
+ font-size: 0.83rem;
241
+ }
242
+
243
+ .notes-overlay__topic-input:focus,
244
+ .notes-editor__textarea:focus {
245
+ border-color: var(--notes-shell-line-strong);
246
+ box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent);
247
+ }
248
+
249
+ .notes-overlay__topic-list {
250
+ display: flex;
251
+ min-height: 0;
252
+ flex: 1 1 auto;
253
+ flex-direction: column;
254
+ gap: 0.125rem;
255
+ overflow-y: auto;
256
+ padding-right: 0.125rem;
257
+ }
258
+
259
+ .notes-overlay__topic-list::-webkit-scrollbar,
260
+ .notes-trash__content::-webkit-scrollbar {
261
+ width: 9px;
262
+ height: 9px;
263
+ }
264
+
265
+ .notes-overlay__topic-list::-webkit-scrollbar-thumb,
266
+ .notes-trash__content::-webkit-scrollbar-thumb {
267
+ border: 2px solid transparent;
268
+ border-radius: 999px;
269
+ background: color-mix(in srgb, var(--muted-foreground) 26%, transparent);
270
+ background-clip: content-box;
271
+ }
272
+
273
+ .notes-overlay__topic-row {
274
+ display: grid;
275
+ grid-template-columns: auto 1fr auto;
276
+ align-items: center;
277
+ gap: 0.7rem;
278
+ width: 100%;
279
+ min-width: 0;
280
+ border: 1px solid transparent;
281
+ border-radius: 12px;
282
+ padding: 0.62rem 0.55rem;
283
+ background: transparent;
284
+ color: inherit;
285
+ text-align: left;
286
+ cursor: pointer;
287
+ transition:
288
+ background-color 150ms ease,
289
+ border-color 150ms ease,
290
+ transform 150ms ease;
291
+ }
292
+
293
+ .notes-overlay__topic-row:hover {
294
+ background: color-mix(in srgb, var(--notes-shell-inset) 86%, transparent);
295
+ }
296
+
297
+ .notes-overlay__topic-row.is-active {
298
+ border-color: var(--notes-shell-line-strong);
299
+ background: color-mix(in srgb, var(--notes-shell-elevated) 90%, transparent);
300
+ box-shadow: inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
301
+ }
302
+
303
+ .notes-overlay__topic-icon {
304
+ display: inline-flex;
305
+ align-items: center;
306
+ justify-content: center;
307
+ width: 1.9rem;
308
+ height: 1.9rem;
309
+ flex: 0 0 1.9rem;
310
+ border: 1px solid color-mix(in srgb, var(--notes-topic-accent) 22%, transparent);
311
+ border-radius: 999px;
312
+ color: color-mix(in srgb, var(--notes-topic-accent) 72%, var(--foreground) 28%);
313
+ background: color-mix(in srgb, var(--notes-topic-accent) 12%, transparent);
314
+ }
315
+
316
+ .notes-overlay__topic-icon[data-accent='ember'] {
317
+ --notes-topic-accent: #d06c40;
318
+ }
319
+
320
+ .notes-overlay__topic-icon[data-accent='sea'] {
321
+ --notes-topic-accent: #2f7d8d;
322
+ }
323
+
324
+ .notes-overlay__topic-icon[data-accent='moss'] {
325
+ --notes-topic-accent: #547a4f;
326
+ }
327
+
328
+ .notes-overlay__topic-icon[data-accent='ink'] {
329
+ --notes-topic-accent: #5d6e8a;
330
+ }
331
+
332
+ .notes-overlay__topic-icon[data-accent='gold'] {
333
+ --notes-topic-accent: #b48a2c;
334
+ }
335
+
336
+ .notes-overlay__topic-icon[data-accent='berry'] {
337
+ --notes-topic-accent: #8d4e7b;
338
+ }
339
+
340
+ .notes-overlay__topic-icon--hud {
341
+ width: 1.85rem;
342
+ height: 1.85rem;
343
+ }
344
+
345
+ .notes-overlay__topic-copy {
346
+ display: flex;
347
+ min-width: 0;
348
+ align-items: center;
349
+ justify-content: space-between;
350
+ gap: 0.5rem;
351
+ }
352
+
353
+ .notes-overlay__topic-name {
354
+ overflow: hidden;
355
+ text-overflow: ellipsis;
356
+ white-space: nowrap;
357
+ font-size: 0.84rem;
358
+ font-weight: 600;
359
+ }
360
+
361
+ .notes-overlay__topic-meta {
362
+ display: inline-flex;
363
+ align-items: center;
364
+ gap: 0.38rem;
365
+ color: var(--muted-foreground);
366
+ font-size: 0.69rem;
367
+ letter-spacing: 0.05em;
368
+ text-transform: uppercase;
369
+ }
370
+
371
+ .notes-overlay__topic-meta span:last-child {
372
+ color: color-mix(in srgb, var(--error) 72%, var(--muted-foreground));
373
+ }
374
+
375
+ .notes-overlay__topic-actions {
376
+ display: inline-flex;
377
+ align-items: center;
378
+ gap: 0.1rem;
379
+ opacity: 0;
380
+ transition: opacity 150ms ease;
381
+ }
382
+
383
+ .notes-overlay__topic-row:hover .notes-overlay__topic-actions,
384
+ .notes-overlay__topic-row.is-active .notes-overlay__topic-actions {
385
+ opacity: 1;
386
+ }
387
+
388
+ .notes-overlay__inline-icon {
389
+ display: inline-flex;
390
+ align-items: center;
391
+ justify-content: center;
392
+ width: 1.75rem;
393
+ height: 1.75rem;
394
+ border-radius: 9px;
395
+ opacity: 0.72;
396
+ }
397
+
398
+ .notes-overlay__inline-icon:hover {
399
+ opacity: 1;
400
+ color: var(--foreground);
401
+ background: color-mix(in srgb, var(--foreground) 8%, transparent);
402
+ }
403
+
404
+ .notes-overlay__inline-icon--danger:hover {
405
+ color: var(--error);
406
+ background: color-mix(in srgb, var(--error) 10%, transparent);
407
+ }
408
+
409
+ .notes-overlay__topic-input--row {
410
+ height: 1.9rem;
411
+ font-size: 0.78rem;
412
+ }
413
+
414
+ .notes-overlay__empty-rail,
415
+ .notes-trash__empty {
416
+ padding: 0.75rem 0.25rem;
417
+ color: var(--muted-foreground);
418
+ font-size: 0.78rem;
419
+ line-height: 1.55;
420
+ }
421
+
422
+ .notes-overlay__viewport {
423
+ position: absolute;
424
+ inset: 0;
425
+ overflow: hidden;
426
+ touch-action: none;
427
+ }
428
+
429
+ .notes-overlay__viewport::before,
430
+ .notes-overlay__viewport::after {
431
+ position: absolute;
432
+ inset: 0;
433
+ content: '';
434
+ }
435
+
436
+ .notes-overlay__viewport::before {
437
+ background-image:
438
+ linear-gradient(var(--notes-grid-major) 1px, transparent 1px),
439
+ linear-gradient(90deg, var(--notes-grid-major) 1px, transparent 1px);
440
+ background-size: 128px 128px;
441
+ opacity: 0.42;
442
+ }
443
+
444
+ .notes-overlay__viewport::after {
445
+ background-image:
446
+ linear-gradient(var(--notes-grid-minor) 1px, transparent 1px),
447
+ linear-gradient(90deg, var(--notes-grid-minor) 1px, transparent 1px);
448
+ background-size: 32px 32px;
449
+ opacity: 0.64;
450
+ }
451
+
452
+ .notes-overlay__hud {
453
+ position: absolute;
454
+ top: 16px;
455
+ left: 250px;
456
+ right: 18px;
457
+ z-index: 5;
458
+ display: flex;
459
+ align-items: flex-start;
460
+ justify-content: space-between;
461
+ gap: 1rem;
462
+ pointer-events: none;
463
+ }
464
+
465
+ .notes-overlay__hud-topic,
466
+ .notes-overlay__close {
467
+ pointer-events: auto;
468
+ }
469
+
470
+ .notes-overlay__hud-topic {
471
+ display: inline-flex;
472
+ align-items: center;
473
+ gap: 0.62rem;
474
+ min-width: 0;
475
+ max-width: min(360px, calc(100vw - 26rem));
476
+ border: 1px solid var(--notes-shell-line);
477
+ border-radius: 12px;
478
+ background: color-mix(in srgb, var(--notes-shell-surface) 92%, transparent);
479
+ box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
480
+ padding: 0.48rem 0.62rem 0.48rem 0.5rem;
481
+ color: inherit;
482
+ }
483
+
484
+ .notes-overlay__hud-topic:hover {
485
+ border-color: var(--notes-shell-line-strong);
486
+ }
487
+
488
+ .notes-overlay__hud-topic-copy {
489
+ display: flex;
490
+ min-width: 0;
491
+ align-items: center;
492
+ gap: 0.6rem;
493
+ }
494
+
495
+ .notes-overlay__hud-topic-name {
496
+ overflow: hidden;
497
+ text-overflow: ellipsis;
498
+ white-space: nowrap;
499
+ font-size: 0.85rem;
500
+ font-weight: 600;
501
+ }
502
+
503
+ .notes-overlay__hud-topic-state {
504
+ color: var(--muted-foreground);
505
+ font-size: 0.71rem;
506
+ letter-spacing: 0.06em;
507
+ text-transform: uppercase;
508
+ }
509
+
510
+ .notes-overlay__hud-topic-state[data-state='live'] {
511
+ color: color-mix(in srgb, var(--success) 72%, var(--foreground) 28%);
512
+ }
513
+
514
+ .notes-overlay__hud-topic-state[data-state='reconnecting'] {
515
+ color: color-mix(in srgb, var(--warning) 72%, var(--foreground) 28%);
516
+ }
517
+
518
+ .notes-overlay__loading,
519
+ .notes-overlay__empty-board {
520
+ position: absolute;
521
+ left: 50%;
522
+ top: 50%;
523
+ z-index: 2;
524
+ transform: translate(-50%, -50%);
525
+ border: 1px solid var(--notes-shell-line);
526
+ border-radius: 12px;
527
+ background: color-mix(in srgb, var(--notes-shell-surface) 92%, transparent);
528
+ box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
529
+ padding: 0.85rem 1rem;
530
+ color: var(--muted-foreground);
531
+ font-size: 0.82rem;
532
+ }
533
+
534
+ .notes-overlay__board {
535
+ position: absolute;
536
+ inset: 0;
537
+ transform-origin: 0 0;
538
+ pointer-events: none;
539
+ }
540
+
541
+ .notes-note {
542
+ position: absolute;
543
+ pointer-events: auto;
544
+ cursor: grab;
545
+ user-select: none;
546
+ }
547
+
548
+ .notes-note:active {
549
+ cursor: grabbing;
550
+ }
551
+
552
+ .notes-note__surface {
553
+ position: relative;
554
+ display: flex;
555
+ height: 100%;
556
+ flex-direction: column;
557
+ gap: 0.6rem;
558
+ overflow: hidden;
559
+ border: 1px solid var(--notes-note-border);
560
+ border-radius: 14px;
561
+ background: var(--notes-note-surface);
562
+ box-shadow: var(--notes-note-shadow, var(--notes-note-shadow-fallback, 0 10px 30px rgba(15, 23, 42, 0.12)));
563
+ padding: 0.82rem 0.82rem 0.78rem;
564
+ transition:
565
+ border-color 150ms ease,
566
+ background-color 150ms ease,
567
+ box-shadow 180ms ease,
568
+ transform 180ms ease;
569
+ }
570
+
571
+ .notes-note:hover .notes-note__surface {
572
+ transform: translateY(-1px);
573
+ border-color: var(--notes-note-border-strong);
574
+ box-shadow:
575
+ 0 18px 48px rgba(15, 23, 42, 0.16),
576
+ 0 3px 10px rgba(15, 23, 42, 0.08);
577
+ }
578
+
579
+ .notes-note[data-color='graphite'] {
580
+ --notes-note-surface: color-mix(in srgb, var(--notes-shell-elevated) 88%, #dde2ea 12%);
581
+ --notes-note-border: color-mix(in srgb, #8b97a7 28%, var(--notes-shell-line));
582
+ --notes-note-border-strong: color-mix(in srgb, #5b6a80 34%, var(--notes-shell-line-strong));
583
+ }
584
+
585
+ .notes-note[data-color='sage'] {
586
+ --notes-note-surface: color-mix(in srgb, var(--notes-shell-elevated) 86%, #d8e3d7 14%);
587
+ --notes-note-border: color-mix(in srgb, #7d9278 26%, var(--notes-shell-line));
588
+ --notes-note-border-strong: color-mix(in srgb, #597254 34%, var(--notes-shell-line-strong));
589
+ }
590
+
591
+ .notes-note[data-color='amber'] {
592
+ --notes-note-surface: color-mix(in srgb, var(--notes-shell-elevated) 86%, #eadcb8 14%);
593
+ --notes-note-border: color-mix(in srgb, #ae8a37 26%, var(--notes-shell-line));
594
+ --notes-note-border-strong: color-mix(in srgb, #8a6826 34%, var(--notes-shell-line-strong));
595
+ }
596
+
597
+ .notes-note[data-color='azure'] {
598
+ --notes-note-surface: color-mix(in srgb, var(--notes-shell-elevated) 85%, #d7e4ef 15%);
599
+ --notes-note-border: color-mix(in srgb, #6c87a4 28%, var(--notes-shell-line));
600
+ --notes-note-border-strong: color-mix(in srgb, #4d6887 36%, var(--notes-shell-line-strong));
601
+ }
602
+
603
+ .notes-note[data-color='coral'] {
604
+ --notes-note-surface: color-mix(in srgb, var(--notes-shell-elevated) 85%, #ecd6d0 15%);
605
+ --notes-note-border: color-mix(in srgb, #b47466 28%, var(--notes-shell-line));
606
+ --notes-note-border-strong: color-mix(in srgb, #96574a 36%, var(--notes-shell-line-strong));
607
+ }
608
+
609
+ .notes-note[data-color='rose'] {
610
+ --notes-note-surface: color-mix(in srgb, var(--notes-shell-elevated) 85%, #e8d7e2 15%);
611
+ --notes-note-border: color-mix(in srgb, #9c6f8f 28%, var(--notes-shell-line));
612
+ --notes-note-border-strong: color-mix(in srgb, #7c4e70 36%, var(--notes-shell-line-strong));
613
+ }
614
+
615
+ .notes-note.is-copied .notes-note__surface {
616
+ border-color: color-mix(in srgb, var(--success) 42%, var(--notes-note-border));
617
+ background: color-mix(in srgb, var(--notes-note-surface) 82%, var(--success) 18%);
618
+ }
619
+
620
+ .notes-note__toolbar {
621
+ display: flex;
622
+ align-items: center;
623
+ justify-content: space-between;
624
+ gap: 0.4rem;
625
+ }
626
+
627
+ .notes-note__toolbar-actions {
628
+ display: inline-flex;
629
+ align-items: center;
630
+ gap: 0.1rem;
631
+ opacity: 0;
632
+ transition: opacity 150ms ease;
633
+ }
634
+
635
+ .notes-note:hover .notes-note__toolbar-actions,
636
+ .notes-note.is-copied .notes-note__toolbar-actions {
637
+ opacity: 1;
638
+ }
639
+
640
+ .notes-note__eyebrow {
641
+ color: color-mix(in srgb, var(--muted-foreground) 82%, transparent);
642
+ font-size: 0.67rem;
643
+ font-weight: 700;
644
+ letter-spacing: 0.11em;
645
+ text-transform: uppercase;
646
+ }
647
+
648
+ .notes-note__body {
649
+ display: -webkit-box;
650
+ overflow: hidden;
651
+ color: color-mix(in srgb, var(--foreground) 94%, transparent);
652
+ font-size: 0.86rem;
653
+ line-height: 1.55;
654
+ white-space: pre-wrap;
655
+ word-break: break-word;
656
+ -webkit-line-clamp: var(--notes-preview-lines, 5);
657
+ -webkit-box-orient: vertical;
658
+ }
659
+
660
+ .notes-note__copied {
661
+ position: absolute;
662
+ inset: 0;
663
+ display: flex;
664
+ align-items: center;
665
+ justify-content: center;
666
+ gap: 0.5rem;
667
+ background: color-mix(in srgb, var(--success) 22%, transparent);
668
+ color: color-mix(in srgb, var(--success) 78%, var(--foreground) 22%);
669
+ font-size: 0.9rem;
670
+ font-weight: 700;
671
+ letter-spacing: 0.05em;
672
+ text-transform: uppercase;
673
+ backdrop-filter: blur(1px);
674
+ }
675
+
676
+ .notes-note--trash {
677
+ cursor: default;
678
+ }
679
+
680
+ .notes-note--trash .notes-note__surface {
681
+ box-shadow: none;
682
+ }
683
+
684
+ .notes-note__toolbar--trash .notes-overlay__inline-icon {
685
+ opacity: 1;
686
+ }
687
+
688
+ .notes-minimap {
689
+ position: absolute;
690
+ left: 250px;
691
+ bottom: 18px;
692
+ z-index: 5;
693
+ width: 184px;
694
+ padding: 0.35rem;
695
+ border: 1px solid var(--notes-shell-line);
696
+ border-radius: 12px;
697
+ background: color-mix(in srgb, var(--notes-shell-surface) 92%, transparent);
698
+ box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
699
+ cursor: pointer;
700
+ touch-action: none;
701
+ }
702
+
703
+ .notes-minimap__svg {
704
+ display: block;
705
+ width: 100%;
706
+ height: auto;
707
+ }
708
+
709
+ .notes-minimap__note {
710
+ fill: color-mix(in srgb, var(--foreground) 12%, transparent);
711
+ stroke: color-mix(in srgb, var(--foreground) 18%, transparent);
712
+ }
713
+
714
+ .notes-minimap__note[data-color='graphite'] {
715
+ fill: rgba(91, 106, 128, 0.24);
716
+ stroke: rgba(91, 106, 128, 0.34);
717
+ }
718
+
719
+ .notes-minimap__note[data-color='sage'] {
720
+ fill: rgba(89, 114, 84, 0.24);
721
+ stroke: rgba(89, 114, 84, 0.34);
722
+ }
723
+
724
+ .notes-minimap__note[data-color='amber'] {
725
+ fill: rgba(138, 104, 38, 0.24);
726
+ stroke: rgba(138, 104, 38, 0.34);
727
+ }
728
+
729
+ .notes-minimap__note[data-color='azure'] {
730
+ fill: rgba(77, 104, 135, 0.24);
731
+ stroke: rgba(77, 104, 135, 0.34);
732
+ }
733
+
734
+ .notes-minimap__note[data-color='coral'] {
735
+ fill: rgba(150, 87, 74, 0.24);
736
+ stroke: rgba(150, 87, 74, 0.34);
737
+ }
738
+
739
+ .notes-minimap__note[data-color='rose'] {
740
+ fill: rgba(124, 78, 112, 0.24);
741
+ stroke: rgba(124, 78, 112, 0.34);
742
+ }
743
+
744
+ .notes-minimap__viewport {
745
+ fill: rgba(0, 0, 0, 0.04);
746
+ stroke: color-mix(in srgb, var(--primary) 54%, var(--foreground) 46%);
747
+ stroke-width: 1.2;
748
+ }
749
+
750
+ .notes-overlay__trash-dock {
751
+ position: absolute;
752
+ right: 18px;
753
+ bottom: 18px;
754
+ z-index: 6;
755
+ display: inline-flex;
756
+ align-items: center;
757
+ justify-content: center;
758
+ width: 3.45rem;
759
+ height: 3.45rem;
760
+ border: 1px solid var(--notes-shell-line);
761
+ border-radius: 14px;
762
+ background: color-mix(in srgb, var(--notes-shell-surface) 94%, transparent);
763
+ box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
764
+ color: var(--foreground);
765
+ }
766
+
767
+ .notes-overlay__trash-dock:hover {
768
+ border-color: var(--notes-shell-line-strong);
769
+ transform: translateY(-1px);
770
+ }
771
+
772
+ .notes-overlay__trash-count {
773
+ position: absolute;
774
+ top: 0.42rem;
775
+ right: 0.42rem;
776
+ min-width: 1.1rem;
777
+ height: 1.1rem;
778
+ border-radius: 999px;
779
+ background: color-mix(in srgb, var(--error) 88%, transparent);
780
+ color: white;
781
+ font-size: 0.66rem;
782
+ font-weight: 700;
783
+ line-height: 1.1rem;
784
+ text-align: center;
785
+ }
786
+
787
+ .notes-trash {
788
+ position: absolute;
789
+ right: 18px;
790
+ bottom: 18px;
791
+ z-index: 7;
792
+ width: min(760px, calc(100vw - 2rem));
793
+ max-height: min(72dvh, 760px);
794
+ display: flex;
795
+ flex-direction: column;
796
+ overflow: hidden;
797
+ border: 1px solid var(--notes-shell-line);
798
+ border-radius: 16px;
799
+ background: color-mix(in srgb, var(--notes-shell-surface) 95%, transparent);
800
+ box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
801
+ }
802
+
803
+ .notes-trash__head {
804
+ display: flex;
805
+ align-items: center;
806
+ justify-content: space-between;
807
+ padding: 0.78rem 0.82rem 0.7rem;
808
+ border-bottom: 1px solid var(--notes-shell-line);
809
+ }
810
+
811
+ .notes-trash__title {
812
+ display: inline-flex;
813
+ align-items: center;
814
+ color: var(--foreground);
815
+ }
816
+
817
+ .notes-trash__content {
818
+ min-height: 0;
819
+ overflow: auto;
820
+ padding: 0.75rem 0.75rem 0.85rem;
821
+ }
822
+
823
+ .notes-trash__group {
824
+ display: flex;
825
+ flex-direction: column;
826
+ gap: 0.5rem;
827
+ }
828
+
829
+ .notes-trash__group + .notes-trash__group {
830
+ margin-top: 0.85rem;
831
+ padding-top: 0.85rem;
832
+ border-top: 1px solid var(--notes-shell-line);
833
+ }
834
+
835
+ .notes-trash__group-head {
836
+ display: flex;
837
+ align-items: center;
838
+ justify-content: space-between;
839
+ gap: 0.6rem;
840
+ }
841
+
842
+ .notes-trash__group-title {
843
+ display: inline-flex;
844
+ align-items: center;
845
+ gap: 0.55rem;
846
+ min-width: 0;
847
+ color: var(--foreground);
848
+ font-size: 0.8rem;
849
+ font-weight: 600;
850
+ }
851
+
852
+ .notes-trash__grid {
853
+ display: grid;
854
+ grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
855
+ gap: 0.5rem;
856
+ align-items: start;
857
+ }
858
+
859
+ .notes-editor {
860
+ position: fixed;
861
+ z-index: 8;
862
+ display: flex;
863
+ flex-direction: column;
864
+ gap: 0.8rem;
865
+ border: 1px solid var(--notes-shell-line);
866
+ border-radius: 14px;
867
+ background: color-mix(in srgb, var(--notes-shell-surface) 96%, transparent);
868
+ box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
869
+ padding: 0.78rem 0.82rem 0.82rem;
870
+ }
871
+
872
+ .notes-editor__head {
873
+ display: flex;
874
+ align-items: center;
875
+ justify-content: space-between;
876
+ gap: 0.75rem;
877
+ color: var(--foreground);
878
+ font-size: 0.78rem;
879
+ font-weight: 700;
880
+ letter-spacing: 0.06em;
881
+ text-transform: uppercase;
882
+ }
883
+
884
+ .notes-editor__colors {
885
+ display: grid;
886
+ grid-template-columns: repeat(6, minmax(0, 1fr));
887
+ gap: 0.45rem;
888
+ }
889
+
890
+ .notes-editor__color {
891
+ width: 100%;
892
+ height: 1.9rem;
893
+ border: 1px solid var(--notes-shell-line);
894
+ border-radius: 10px;
895
+ }
896
+
897
+ .notes-editor__color:hover,
898
+ .notes-editor__color.is-active {
899
+ border-color: var(--notes-shell-line-strong);
900
+ transform: translateY(-1px);
901
+ }
902
+
903
+ .notes-editor__color[data-color='graphite'] {
904
+ background: #d6dce5;
905
+ }
906
+
907
+ .notes-editor__color[data-color='sage'] {
908
+ background: #d9e7d9;
909
+ }
910
+
911
+ .notes-editor__color[data-color='amber'] {
912
+ background: #e9deba;
913
+ }
914
+
915
+ .notes-editor__color[data-color='azure'] {
916
+ background: #d9e7f0;
917
+ }
918
+
919
+ .notes-editor__color[data-color='coral'] {
920
+ background: #ecd7d1;
921
+ }
922
+
923
+ .notes-editor__color[data-color='rose'] {
924
+ background: #eadce7;
925
+ }
926
+
927
+ .notes-editor__textarea {
928
+ min-height: 11rem;
929
+ resize: vertical;
930
+ padding: 0.78rem 0.85rem;
931
+ font: inherit;
932
+ font-size: 0.88rem;
933
+ line-height: 1.6;
934
+ }
935
+
936
+ html.dark .notes-overlay {
937
+ --notes-shell-shadow:
938
+ 0 28px 72px rgba(2, 6, 23, 0.38),
939
+ 0 8px 20px rgba(2, 6, 23, 0.24);
940
+ --notes-note-shadow:
941
+ 0 18px 42px rgba(2, 6, 23, 0.34),
942
+ 0 4px 10px rgba(2, 6, 23, 0.2);
943
+ --notes-grid-major: rgba(255, 255, 255, 0.06);
944
+ --notes-grid-minor: rgba(255, 255, 255, 0.03);
945
+ }
946
+
947
+ @media (hover: none), (pointer: coarse) {
948
+ .notes-note__toolbar-actions,
949
+ .notes-overlay__topic-actions {
950
+ opacity: 1;
951
+ }
952
+ }
953
+
954
+ @media (max-width: 960px) {
955
+ .notes-overlay {
956
+ --notes-rail-width: min(320px, calc(100vw - 1.2rem));
957
+ }
958
+
959
+ .notes-overlay__rail {
960
+ top: 10px;
961
+ bottom: 10px;
962
+ left: 10px;
963
+ transform: translateX(-110%);
964
+ }
965
+
966
+ .notes-overlay__rail.is-open {
967
+ pointer-events: auto;
968
+ opacity: 1;
969
+ transform: translateX(0);
970
+ }
971
+
972
+ .notes-overlay__hud {
973
+ left: 12px;
974
+ right: 12px;
975
+ top: 12px;
976
+ }
977
+
978
+ .notes-overlay__hud-topic {
979
+ max-width: calc(100vw - 7rem);
980
+ }
981
+
982
+ .notes-minimap {
983
+ left: 12px;
984
+ bottom: 12px;
985
+ width: 144px;
986
+ }
987
+
988
+ .notes-overlay__trash-dock {
989
+ right: 12px;
990
+ bottom: 12px;
991
+ width: 3.2rem;
992
+ height: 3.2rem;
993
+ }
994
+
995
+ .notes-trash {
996
+ right: 10px;
997
+ left: 10px;
998
+ bottom: 10px;
999
+ width: auto;
1000
+ max-height: 72dvh;
1001
+ }
1002
+
1003
+ .notes-trash__grid {
1004
+ grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
1005
+ }
1006
+
1007
+ .notes-editor {
1008
+ left: 10px !important;
1009
+ right: 10px;
1010
+ width: auto !important;
1011
+ top: auto !important;
1012
+ bottom: 10px;
1013
+ }
1014
+ }