noteloom 0.1.2 → 0.1.4

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.
Files changed (7) hide show
  1. package/README.md +7 -0
  2. package/dist/noteloom.cjs +1905 -1887
  3. package/dist/noteloom.cjs.map +1 -1
  4. package/dist/noteloom.es.js +3232 -3214
  5. package/dist/noteloom.es.js.map +1 -1
  6. package/dist/style.css +1897 -1879
  7. package/package.json +4 -4
package/dist/style.css CHANGED
@@ -1,1879 +1,1897 @@
1
- /*
2
- * noteloom's default theme — minimal, clean, Notion/Linear-adjacent.
3
- *
4
- * Ships as plain CSS custom properties on :root (not scoped to a wrapper
5
- * element) deliberately: several of this package's own pieces — Select's
6
- * popover, SlashMenu, FloatingToolbar, the table header menu, the block
7
- * gutter/range menus, Modal — are portaled to document.body, so they are
8
- * NOT DOM descendants of whatever element renders the editor itself.
9
- * Scoping variables to a wrapper class would silently fail to reach any
10
- * of those. `--noteloom-*` is a distinctive enough prefix that defining
11
- * these on :root won't collide with a host app's own custom properties.
12
- *
13
- * This file is auto-injected at runtime by <EditorProvider> (see
14
- * react/injectDefaultStyles.js) — you do NOT need to import this
15
- * yourself. It's still published standalone at `noteloom/style.css` for:
16
- * - passing `theme="none"` to <EditorProvider> and importing this
17
- * explicitly instead (e.g. to control load order, or for SSR/CSP
18
- * setups where runtime <style> injection isn't allowed)
19
- * - copying as a starting point for your own from-scratch theme
20
- *
21
- * Retheme by overriding these variables in your own CSS (after the
22
- * default theme loads) — every rule below reads from them, nothing is
23
- * hardcoded. Override individual `.be-*` classes too, same as any other
24
- * library's default styles.
25
- */
26
-
27
- :root {
28
- --noteloom-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
29
- --noteloom-text: #0f172a;
30
- --noteloom-text-muted: #64748b;
31
- --noteloom-text-faint: #94a3b8;
32
- --noteloom-bg: #ffffff;
33
- --noteloom-bg-subtle: #f8fafc;
34
- --noteloom-bg-hover: #f1f5f9;
35
- --noteloom-border: #e2e8f0;
36
- --noteloom-accent: #6366f1;
37
- --noteloom-accent-text: #ffffff;
38
- --noteloom-accent-soft: rgba(99, 102, 241, 0.1);
39
- --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.16);
40
- --noteloom-danger: #dc2626;
41
- --noteloom-danger-soft: #fef2f2;
42
- --noteloom-radius-sm: 6px;
43
- --noteloom-radius-md: 8px;
44
- --noteloom-radius-lg: 12px;
45
- --noteloom-radius-xl: 16px;
46
- --noteloom-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
47
- --noteloom-code-bg: #0f172a;
48
- --noteloom-code-text: #e2e8f0;
49
- }
50
-
51
- @media (prefers-color-scheme: dark) {
52
- :root {
53
- --noteloom-text: #f1f5f9;
54
- --noteloom-text-muted: #94a3b8;
55
- --noteloom-text-faint: #64748b;
56
- --noteloom-bg: #1c1932;
57
- --noteloom-bg-subtle: rgba(255, 255, 255, 0.03);
58
- --noteloom-bg-hover: rgba(255, 255, 255, 0.06);
59
- --noteloom-border: rgba(255, 255, 255, 0.1);
60
- --noteloom-accent-soft: rgba(99, 102, 241, 0.18);
61
- --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.26);
62
- --noteloom-danger-soft: rgba(220, 38, 38, 0.15);
63
- --noteloom-code-bg: #13111f;
64
- }
65
- }
66
-
67
- /* Explicit overrides win either direction — a host toggling dark mode via
68
- a class rather than the OS setting can set [data-theme="dark"/"light"]
69
- on any ancestor (e.g. <html>), overriding the media query above. */
70
- [data-theme='dark'] {
71
- --noteloom-text: #f1f5f9;
72
- --noteloom-text-muted: #94a3b8;
73
- --noteloom-text-faint: #64748b;
74
- --noteloom-bg: #1c1932;
75
- --noteloom-bg-subtle: rgba(255, 255, 255, 0.03);
76
- --noteloom-bg-hover: rgba(255, 255, 255, 0.06);
77
- --noteloom-border: rgba(255, 255, 255, 0.1);
78
- --noteloom-accent-soft: rgba(99, 102, 241, 0.18);
79
- --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.26);
80
- --noteloom-danger-soft: rgba(220, 38, 38, 0.15);
81
- --noteloom-code-bg: #13111f;
82
- }
83
-
84
- [data-theme='light'] {
85
- --noteloom-text: #0f172a;
86
- --noteloom-text-muted: #64748b;
87
- --noteloom-text-faint: #94a3b8;
88
- --noteloom-bg: #ffffff;
89
- --noteloom-bg-subtle: #f8fafc;
90
- --noteloom-bg-hover: #f1f5f9;
91
- --noteloom-border: #e2e8f0;
92
- --noteloom-accent-soft: rgba(99, 102, 241, 0.1);
93
- --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.16);
94
- --noteloom-danger-soft: #fef2f2;
95
- --noteloom-code-bg: #0f172a;
96
- }
97
-
98
- .be-root {
99
- font-family: var(--noteloom-font);
100
- color: var(--noteloom-text);
101
- }
102
-
103
- .be-editable {
104
- outline: none;
105
- }
106
-
107
- /* --- basic leaf blocks --- */
108
-
109
- .be-paragraph {
110
- position: relative;
111
- margin: 0.25rem 0;
112
- line-height: 1.6;
113
- outline: none;
114
- }
115
-
116
- .be-heading {
117
- position: relative;
118
- font-weight: 600;
119
- margin: 1.25rem 0 0.25rem;
120
- outline: none;
121
- letter-spacing: -0.01em;
122
- }
123
-
124
- .be-divider {
125
- border: none;
126
- border-top: 1px solid var(--noteloom-border);
127
- margin: 1.5em 0;
128
- cursor: default;
129
- }
130
-
131
- .be-blockquote {
132
- position: relative;
133
- margin: 0.5em 0;
134
- padding-left: 0.9em;
135
- border-left: 3px solid var(--noteloom-border);
136
- color: var(--noteloom-text-muted);
137
- outline: none;
138
- }
139
-
140
- /* --- callout --- */
141
-
142
- .be-callout {
143
- position: relative;
144
- display: flex;
145
- gap: 0.7em;
146
- align-items: flex-start;
147
- background: var(--noteloom-bg-subtle);
148
- border-radius: var(--noteloom-radius-lg);
149
- padding: 0.9em 1em;
150
- margin: 0.5em 0;
151
- }
152
-
153
- .be-callout[data-color='gray'] { background: rgba(148, 163, 184, 0.16); }
154
- .be-callout[data-color='blue'] { background: rgba(99, 102, 241, 0.12); }
155
- .be-callout[data-color='green'] { background: rgba(34, 197, 94, 0.14); }
156
- .be-callout[data-color='yellow'] { background: rgba(234, 179, 8, 0.16); }
157
- .be-callout[data-color='orange'] { background: rgba(249, 115, 22, 0.14); }
158
- .be-callout[data-color='red'] { background: rgba(239, 68, 68, 0.13); }
159
- .be-callout[data-color='purple'] { background: rgba(168, 85, 247, 0.13); }
160
- .be-callout[data-color='pink'] { background: rgba(236, 72, 153, 0.13); }
161
-
162
- .be-callout-icon-wrap {
163
- flex: none;
164
- }
165
-
166
- .be-callout-icon-input,
167
- .be-callout-icon {
168
- width: 2em;
169
- height: 2em;
170
- border: none;
171
- background: var(--noteloom-bg);
172
- border-radius: var(--noteloom-radius-md);
173
- box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
174
- font-size: 1.15em;
175
- display: flex;
176
- align-items: center;
177
- justify-content: center;
178
- padding: 0;
179
- cursor: pointer;
180
- }
181
-
182
- .be-callout-icon-input {
183
- outline: none;
184
- text-align: center;
185
- cursor: text;
186
- }
187
-
188
- .be-callout-content {
189
- flex: 1;
190
- min-width: 0;
191
- padding-right: 1.6em; /* keeps text from running under the color-swatch trigger */
192
- }
193
-
194
- /* First child reads as the card's title; every child after it is the
195
- description — see CalloutBlock.jsx's comment for why this is a CSS
196
- convention over the content, not a separate title/description field. */
197
- .be-callout-content > :first-child {
198
- font-weight: 600;
199
- }
200
-
201
- .be-callout-content > :not(:first-child) {
202
- color: var(--noteloom-text-muted);
203
- font-size: 0.92em;
204
- }
205
-
206
- .be-callout-color-wrap {
207
- position: absolute;
208
- top: 0.6em;
209
- right: 0.6em;
210
- }
211
-
212
- .be-callout-color-trigger {
213
- border: none;
214
- background: none;
215
- padding: 3px;
216
- border-radius: var(--noteloom-radius-sm);
217
- cursor: pointer;
218
- display: flex;
219
- }
220
-
221
- .be-callout-color-trigger:hover {
222
- background: rgba(15, 23, 42, 0.06);
223
- }
224
-
225
- .be-callout-color-dot {
226
- width: 12px;
227
- height: 12px;
228
- border-radius: 50%;
229
- border: 1px solid rgba(15, 23, 42, 0.12);
230
- }
231
-
232
- .be-callout-color-dot-gray { background: #94a3b8; }
233
- .be-callout-color-dot-blue { background: #6366f1; }
234
- .be-callout-color-dot-green { background: #22c55e; }
235
- .be-callout-color-dot-yellow { background: #eab308; }
236
- .be-callout-color-dot-orange { background: #f97316; }
237
- .be-callout-color-dot-red { background: #ef4444; }
238
- .be-callout-color-dot-purple { background: #a855f7; }
239
- .be-callout-color-dot-pink { background: #ec4899; }
240
-
241
- .be-callout-color-picker {
242
- position: absolute;
243
- top: 100%;
244
- right: 0;
245
- margin-top: 4px;
246
- z-index: 1000;
247
- display: grid;
248
- grid-template-columns: repeat(4, 1fr);
249
- gap: 4px;
250
- padding: 6px;
251
- background: var(--noteloom-bg);
252
- border: 1px solid var(--noteloom-border);
253
- border-radius: var(--noteloom-radius-md);
254
- box-shadow: var(--noteloom-shadow);
255
- }
256
-
257
- .be-callout-color-option {
258
- width: 22px;
259
- height: 22px;
260
- border-radius: 50%;
261
- border: 2px solid transparent;
262
- cursor: pointer;
263
- padding: 0;
264
- }
265
-
266
- .be-callout-color-option-gray { background: #94a3b8; }
267
- .be-callout-color-option-blue { background: #6366f1; }
268
- .be-callout-color-option-green { background: #22c55e; }
269
- .be-callout-color-option-yellow { background: #eab308; }
270
- .be-callout-color-option-orange { background: #f97316; }
271
- .be-callout-color-option-red { background: #ef4444; }
272
- .be-callout-color-option-purple { background: #a855f7; }
273
- .be-callout-color-option-pink { background: #ec4899; }
274
-
275
- .be-callout-color-option-active {
276
- border-color: var(--noteloom-text);
277
- }
278
-
279
- /* --- code block --- */
280
-
281
- .be-code-block {
282
- margin: 0.6em 0;
283
- border-radius: var(--noteloom-radius-lg);
284
- overflow: hidden;
285
- background: var(--noteloom-code-bg);
286
- color: var(--noteloom-code-text);
287
- }
288
-
289
- .be-code-block-header {
290
- display: flex;
291
- align-items: center;
292
- justify-content: flex-end;
293
- gap: 4px;
294
- padding: 6px 10px;
295
- background: rgba(255, 255, 255, 0.04);
296
- }
297
-
298
- .be-code-block-delete {
299
- appearance: none;
300
- -webkit-appearance: none;
301
- border: none;
302
- outline: none;
303
- background: transparent;
304
- box-shadow: none;
305
- color: var(--noteloom-text-faint);
306
- width: 24px;
307
- height: 24px;
308
- margin: 0;
309
- padding: 0;
310
- display: flex;
311
- align-items: center;
312
- justify-content: center;
313
- border-radius: var(--noteloom-radius-sm);
314
- cursor: pointer;
315
- }
316
-
317
- .be-code-block-delete:hover {
318
- background: rgba(255, 255, 255, 0.1);
319
- color: #fca5a5;
320
- }
321
-
322
- .be-code-block-language {
323
- background: transparent;
324
- color: var(--noteloom-text-faint);
325
- border: none;
326
- font-size: 0.8rem;
327
- cursor: pointer;
328
- }
329
-
330
- .be-code-block-pre {
331
- margin: 0;
332
- padding: 0.9em 1em;
333
- overflow-x: auto;
334
- font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
335
- font-size: 0.88rem;
336
- outline: none;
337
- }
338
-
339
- .be-code-block-pre code {
340
- position: relative;
341
- display: block;
342
- }
343
-
344
- /* --- list items (bulleted / numbered / to-do / toggle) --- */
345
-
346
- .be-list-item {
347
- margin: 0.1rem 0;
348
- }
349
-
350
- .be-list-item-row {
351
- display: flex;
352
- align-items: flex-start;
353
- gap: 0.4em;
354
- }
355
-
356
- .be-list-checkbox {
357
- margin-top: 0.3em;
358
- width: 16px;
359
- height: 16px;
360
- flex: none;
361
- accent-color: var(--noteloom-accent);
362
- cursor: pointer;
363
- }
364
-
365
- .be-list-toggle-marker {
366
- border: none;
367
- background: none;
368
- cursor: pointer;
369
- padding: 2px;
370
- margin-top: 0.1em;
371
- color: var(--noteloom-text-faint);
372
- display: flex;
373
- align-items: center;
374
- justify-content: center;
375
- height: 30px;
376
- width: 30px;
377
- border-radius: var(--noteloom-radius-sm);
378
- }
379
-
380
- .be-list-toggle-marker:hover {
381
- background: var(--noteloom-bg-hover);
382
- color: var(--noteloom-text-muted);
383
- }
384
-
385
- .be-list-marker {
386
- min-width: 1.2em;
387
- margin-top: 0.1em;
388
- text-align: center;
389
- color: var(--noteloom-text-faint);
390
- user-select: none;
391
- flex: none;
392
- }
393
-
394
- .be-list-item-title {
395
- position: relative;
396
- flex: 1;
397
- min-width: 0;
398
- outline: none;
399
- line-height: 1.6;
400
- }
401
-
402
- .be-list-item-children {
403
- margin-left: 2.1em;
404
- }
405
-
406
- /* --- toggle heading --- */
407
-
408
- .be-toggle-heading {
409
- margin: 1.25rem 0 0.25rem;
410
- }
411
-
412
- .be-toggle-heading-row {
413
- display: flex;
414
- align-items: center;
415
- gap: 0.15em;
416
- }
417
-
418
- .be-toggle-heading-marker {
419
- border: none;
420
- background: none;
421
- cursor: pointer;
422
- color: var(--noteloom-text-faint);
423
- display: flex;
424
- align-items: center;
425
- justify-content: center;
426
- width: 30px;
427
- height: 30px;
428
- border-radius: var(--noteloom-radius-sm);
429
- }
430
-
431
- .be-toggle-heading-marker:hover {
432
- background: var(--noteloom-bg-hover);
433
- color: var(--noteloom-text-muted);
434
- }
435
-
436
- .be-toggle-heading-title {
437
- flex: 1;
438
- min-width: 0;
439
- }
440
-
441
- .be-toggle-heading-children {
442
- margin-left: 2.1em;
443
- }
444
-
445
- /* --- layout (multi-column) --- */
446
-
447
- .be-layout {
448
- margin: 0.6em 0;
449
- }
450
-
451
- .be-layout-column {
452
- flex: 1;
453
- min-width: 0;
454
- }
455
-
456
- /* --- button block --- */
457
-
458
- .be-button-block {
459
- margin: 0.6em 0;
460
- }
461
-
462
- .be-button-block-pill {
463
- display: inline-flex;
464
- align-items: center;
465
- gap: 0.4em;
466
- border-radius: var(--noteloom-radius-md);
467
- padding: 0.5em 1em;
468
- color: var(--noteloom-accent-text);
469
- }
470
-
471
- .be-button-block-label {
472
- position: relative;
473
- outline: none;
474
- min-width: 2em;
475
- }
476
-
477
- /* --- generic empty-state placeholder for editable leaf content ---
478
- Note: this can't use :empty — an "empty" run still holds a zero-width
479
- space text node (see EMPTY_RUN_PLACEHOLDER) inside its host span, so the
480
- wrapper element is never actually childless. data-empty (kept in sync by
481
- EditableBlockContent's syncEmptyAttr against the *logical* run content,
482
- not the DOM) is the real signal. */
483
-
484
- [data-placeholder][data-empty]:focus-within::before {
485
- content: attr(data-placeholder);
486
- position: absolute;
487
- color: var(--noteloom-text-faint);
488
- font-weight: 400;
489
- font-style: normal;
490
- opacity: 0.85;
491
- pointer-events: none;
492
- }
493
-
494
- .be-button-block-open,
495
- .be-button-block-settings {
496
- flex: none;
497
- border: none;
498
- background: rgba(255, 255, 255, 0.16);
499
- color: inherit;
500
- border-radius: var(--noteloom-radius-sm);
501
- width: 24px;
502
- height: 24px;
503
- display: flex;
504
- align-items: center;
505
- justify-content: center;
506
- cursor: pointer;
507
- }
508
-
509
- .be-button-block-open:disabled {
510
- opacity: 0.5;
511
- cursor: not-allowed;
512
- }
513
-
514
- .be-button-block-open:hover:not(:disabled),
515
- .be-button-block-settings:hover {
516
- background: rgba(255, 255, 255, 0.28);
517
- }
518
-
519
- /* --- embed (image/video/audio/file) --- */
520
-
521
- .be-embed {
522
- margin: 0.6em 0;
523
- }
524
-
525
- .be-embed-preview {
526
- position: relative;
527
- display: flex;
528
- }
529
-
530
- .be-embed-align-left {
531
- justify-content: flex-start;
532
- }
533
-
534
- .be-embed-align-center {
535
- justify-content: center;
536
- }
537
-
538
- .be-embed-align-right {
539
- justify-content: flex-end;
540
- }
541
-
542
- .be-embed-frame {
543
- position: relative;
544
- max-width: 100%;
545
- overflow: visible;
546
- border-radius: var(--noteloom-radius-lg);
547
- }
548
-
549
- .be-embed-image,
550
- .be-embed-video {
551
- border: 1px solid var(--noteloom-border);
552
- }
553
-
554
- .be-embed-image,
555
- .be-embed-video {
556
- max-width: 100%;
557
- display: block;
558
- border-radius: var(--noteloom-radius-lg);
559
- }
560
-
561
- .be-embed-audio {
562
- width: 100%;
563
- }
564
-
565
- .be-embed-file-link {
566
- display: flex;
567
- align-items: center;
568
- gap: 0.5em;
569
- padding: 0.75em 1em;
570
- border: 1px solid var(--noteloom-border);
571
- border-radius: var(--noteloom-radius-xl);
572
- text-decoration: none;
573
- color: var(--noteloom-accent);
574
- font-weight: 500;
575
- font-size: 0.9rem;
576
- }
577
-
578
- .be-embed-file-link:hover {
579
- background: var(--noteloom-bg-subtle);
580
- }
581
-
582
- .be-embed-toolbar {
583
- position: absolute;
584
- top: 8px;
585
- right: 8px;
586
- z-index: 2;
587
- display: flex;
588
- align-items: center;
589
- gap: 2px;
590
- padding: 3px;
591
- background: rgba(15, 23, 42, 0.72);
592
- border-radius: var(--noteloom-radius-md);
593
- opacity: 0;
594
- transition: opacity 0.12s ease;
595
- }
596
-
597
- .be-embed-preview:hover .be-embed-toolbar,
598
- .be-embed-toolbar:focus-within {
599
- opacity: 1;
600
- }
601
-
602
- .be-embed-toolbar-btn {
603
- border: none;
604
- background: transparent;
605
- width: 24px;
606
- height: 24px;
607
- display: flex;
608
- align-items: center;
609
- justify-content: center;
610
- color: rgba(255, 255, 255, 0.8);
611
- border-radius: var(--noteloom-radius-sm);
612
- cursor: pointer;
613
- }
614
-
615
- .be-embed-toolbar-btn:hover {
616
- background: rgba(255, 255, 255, 0.16);
617
- color: #fff;
618
- }
619
-
620
- .be-embed-toolbar-btn-active {
621
- background: var(--noteloom-accent);
622
- color: #fff;
623
- }
624
-
625
- .be-embed-remove {
626
- border: none;
627
- background: transparent;
628
- border-radius: var(--noteloom-radius-sm);
629
- padding: 0 8px;
630
- height: 24px;
631
- color: rgba(255, 255, 255, 0.8);
632
- font-size: 0.75rem;
633
- cursor: pointer;
634
- }
635
-
636
- .be-embed-remove:hover {
637
- background: rgba(255, 255, 255, 0.16);
638
- color: #fff;
639
- }
640
-
641
- .be-embed-resize-handle {
642
- position: absolute;
643
- bottom: 4px;
644
- right: 4px;
645
- width: 12px;
646
- height: 12px;
647
- cursor: nwse-resize;
648
- border-radius: 2px;
649
- border: 1px solid #fff;
650
- background: var(--noteloom-accent);
651
- }
652
-
653
- .be-embed-dropzone {
654
- border: 1.5px dashed var(--noteloom-border);
655
- border-radius: var(--noteloom-radius-xl);
656
- padding: 2.2em;
657
- display: flex;
658
- flex-direction: column;
659
- align-items: center;
660
- gap: 0.6em;
661
- text-align: center;
662
- color: var(--noteloom-text-muted);
663
- }
664
-
665
- .be-embed-dropzone-active {
666
- border-color: var(--noteloom-accent);
667
- background: var(--noteloom-accent-soft);
668
- color: var(--noteloom-accent);
669
- }
670
-
671
- .be-embed-upload-btn {
672
- background: var(--noteloom-accent);
673
- color: var(--noteloom-accent-text);
674
- border-radius: var(--noteloom-radius-md);
675
- padding: 0.5em 1.1em;
676
- cursor: pointer;
677
- font-size: 0.85rem;
678
- font-weight: 500;
679
- }
680
-
681
- .be-embed-upload-btn input {
682
- display: none;
683
- }
684
-
685
- .be-embed-dropzone-hint {
686
- font-size: 0.8rem;
687
- color: var(--noteloom-text-faint);
688
- }
689
-
690
- .be-embed-url-row {
691
- display: flex;
692
- gap: 6px;
693
- width: 100%;
694
- max-width: 360px;
695
- }
696
-
697
- .be-embed-url-input {
698
- flex: 1;
699
- min-width: 0;
700
- border: 1px solid var(--noteloom-border);
701
- border-radius: var(--noteloom-radius-md);
702
- padding: 0.45em 0.7em;
703
- background: transparent;
704
- color: inherit;
705
- font: inherit;
706
- font-size: 0.85rem;
707
- outline: none;
708
- }
709
-
710
- .be-embed-url-input:focus {
711
- border-color: var(--noteloom-accent);
712
- }
713
-
714
- .be-embed-url-commit {
715
- border: none;
716
- background: var(--noteloom-accent);
717
- color: var(--noteloom-accent-text);
718
- border-radius: var(--noteloom-radius-md);
719
- padding: 0.45em 0.9em;
720
- cursor: pointer;
721
- font-size: 0.85rem;
722
- font-weight: 500;
723
- }
724
-
725
- /* --- table --- */
726
-
727
- .be-table-scroll {
728
- max-width: 100%;
729
- overflow-x: auto;
730
- }
731
-
732
- .be-table-wrapper {
733
- margin: 0.9em 0;
734
- overflow-x: auto;
735
- border: 1px solid var(--noteloom-border);
736
- border-radius: var(--noteloom-radius-lg);
737
- width: max-content;
738
- }
739
-
740
- .be-table {
741
- border-collapse: collapse;
742
- table-layout: fixed;
743
- /* Deliberately no width:100% — combined with table-layout:fixed and each
744
- column's own <col> width, that would make the browser redistribute
745
- leftover space proportionally across columns, fighting individual
746
- column resize (see be-table-col-resize-handle). */
747
- }
748
-
749
- .be-table-header-row {
750
- background: var(--noteloom-bg-subtle);
751
- }
752
-
753
- .be-table-header-cell {
754
- position: relative;
755
- border-bottom: 1px solid var(--noteloom-border);
756
- border-right: 1px solid var(--noteloom-border);
757
- padding: 6px 10px;
758
- }
759
-
760
- .be-table-header-label {
761
- display: block;
762
- width: 100%;
763
- border: none;
764
- background: none;
765
- font: inherit;
766
- font-weight: 600;
767
- font-size: 0.78rem;
768
- color: var(--noteloom-text-muted);
769
- outline: none;
770
- overflow: hidden;
771
- text-overflow: ellipsis;
772
- white-space: nowrap;
773
- padding: 2px 0;
774
- }
775
-
776
- .be-table-header-menu-trigger {
777
- position: absolute;
778
- right: 4px;
779
- top: 50%;
780
- transform: translateY(-50%);
781
- visibility: hidden;
782
- border: none;
783
- background: transparent;
784
- border-radius: var(--noteloom-radius-sm);
785
- padding: 2px;
786
- color: var(--noteloom-text-faint);
787
- cursor: pointer;
788
- }
789
-
790
- .be-table-header-cell:hover .be-table-header-menu-trigger {
791
- visibility: visible;
792
- }
793
-
794
- .be-table-header-menu-trigger:hover {
795
- background: var(--noteloom-bg-hover);
796
- }
797
-
798
- .be-table-col-resize-handle {
799
- position: absolute;
800
- top: 0;
801
- right: -3px;
802
- width: 6px;
803
- height: 100%;
804
- cursor: col-resize;
805
- z-index: 1;
806
- }
807
-
808
- .be-table-col-resize-handle:hover,
809
- .be-table-col-resize-handle:active {
810
- background: var(--noteloom-accent-soft-hover);
811
- }
812
-
813
- .be-table-header-spacer {
814
- border-bottom: 1px solid var(--noteloom-border);
815
- }
816
-
817
- .be-table-header-spacer-col {
818
- width: 32px;
819
- }
820
-
821
- .be-table-header-menu {
822
- z-index: 1000;
823
- width: 224px;
824
- border-radius: var(--noteloom-radius-lg);
825
- border: 1px solid var(--noteloom-border);
826
- background: var(--noteloom-bg);
827
- padding: 4px;
828
- font-size: 0.88rem;
829
- box-shadow: var(--noteloom-shadow);
830
- }
831
-
832
- .be-table-header-menu-options {
833
- z-index: 1000;
834
- padding: 4px;
835
- font-size: 0.88rem;
836
- border-bottom: 1px solid var(--noteloom-border);
837
- margin-bottom: 4px;
838
- }
839
-
840
- .be-table-header-menu-type {
841
- display: flex;
842
- flex-direction: row;
843
- justify-content: space-between;
844
- padding: 6px;
845
- border-bottom: 1px solid var(--noteloom-border);
846
- margin-bottom: 4px;
847
- }
848
-
849
- .be-table-header-type-select {
850
- width: 100%;
851
- border: 1px solid var(--noteloom-border);
852
- border-radius: var(--noteloom-radius-sm);
853
- padding: 6px 8px;
854
- background: transparent;
855
- color: inherit;
856
- font: inherit;
857
- font-size: 0.85rem;
858
- }
859
-
860
- .be-table-header-menu-item {
861
- display: flex;
862
- align-items: center;
863
- gap: 8px;
864
- width: 100%;
865
- text-align: left;
866
- border: none;
867
- border-radius: var(--noteloom-radius-sm);
868
- background: transparent;
869
- padding: 6px 10px;
870
- font: inherit;
871
- font-size: 0.88rem;
872
- color: var(--noteloom-text);
873
- cursor: pointer;
874
- }
875
-
876
- .be-table-header-menu-item:hover {
877
- background: var(--noteloom-bg-hover);
878
- }
879
-
880
- .be-table-header-menu-item-danger {
881
- color: var(--noteloom-danger);
882
- }
883
-
884
- .be-table-header-menu-item-danger:hover {
885
- background: var(--noteloom-danger-soft);
886
- }
887
-
888
- .be-table-header-menu-options-label {
889
- font-size: 0.68rem;
890
- text-transform: uppercase;
891
- letter-spacing: 0.04em;
892
- font-weight: 600;
893
- color: var(--noteloom-text-faint);
894
- padding: 6px 8px 2px;
895
- }
896
-
897
- .be-table-header-menu-option-row {
898
- display: flex;
899
- align-items: center;
900
- gap: 6px;
901
- padding: 2px 4px;
902
- }
903
-
904
- .be-table-header-menu-option-swatch {
905
- width: 14px;
906
- height: 14px;
907
- border-radius: 50%;
908
- flex: none;
909
- }
910
-
911
- .be-table-header-menu-option-input {
912
- flex: 1;
913
- min-width: 0;
914
- border: none;
915
- background: transparent;
916
- color: inherit;
917
- font: inherit;
918
- font-size: 0.85rem;
919
- padding: 4px 6px;
920
- border-radius: var(--noteloom-radius-sm);
921
- outline: none;
922
- }
923
-
924
- .be-table-header-menu-option-input:focus {
925
- background: var(--noteloom-bg-hover);
926
- }
927
-
928
- .be-table-header-menu-option-remove,
929
- .be-table-header-menu-option-add {
930
- flex: none;
931
- border: none;
932
- background: transparent;
933
- color: var(--noteloom-text-faint);
934
- cursor: pointer;
935
- padding: 3px;
936
- display: flex;
937
- align-items: center;
938
- justify-content: center;
939
- border-radius: var(--noteloom-radius-sm);
940
- }
941
-
942
- .be-table-header-menu-option-remove:hover {
943
- background: var(--noteloom-danger-soft);
944
- color: var(--noteloom-danger);
945
- }
946
-
947
- .be-table-header-menu-option-add {
948
- color: var(--noteloom-text-muted);
949
- }
950
-
951
- .be-table-header-menu-option-add:hover {
952
- background: var(--noteloom-bg-hover);
953
- }
954
-
955
- .be-table-row:hover {
956
- background: var(--noteloom-bg-subtle);
957
- }
958
-
959
- .be-table-cell {
960
- border-bottom: 1px solid var(--noteloom-border);
961
- border-right: 1px solid var(--noteloom-border);
962
- padding: 6px 10px;
963
- vertical-align: top;
964
- outline: none;
965
- font-size: 0.92rem;
966
- /* table-layout: fixed already keeps the COLUMN width from growing to fit
967
- content — this is what stops a long unbroken string (a URL, one giant
968
- word) from visually overflowing past that fixed width instead of
969
- wrapping onto a new line within the cell. */
970
- max-width: 0;
971
- overflow-wrap: anywhere;
972
- word-break: break-word;
973
- }
974
-
975
- .be-table-cell:focus-within {
976
- box-shadow: inset 0 0 0 2px var(--noteloom-accent);
977
- border-radius: 2px;
978
- }
979
-
980
- .be-table-row-actions {
981
- width: 32px;
982
- text-align: center;
983
- vertical-align: middle;
984
- border: none;
985
- background: transparent;
986
- padding: 0;
987
- }
988
-
989
- .be-table-delete-row {
990
- visibility: hidden;
991
- border: none;
992
- background: transparent;
993
- color: var(--noteloom-text-faint);
994
- cursor: pointer;
995
- width: 24px;
996
- height: 24px;
997
- display: inline-flex;
998
- align-items: center;
999
- justify-content: center;
1000
- border-radius: var(--noteloom-radius-sm);
1001
- }
1002
-
1003
- tr.be-table-row:hover .be-table-delete-row {
1004
- visibility: visible;
1005
- }
1006
-
1007
- .be-table-delete-row:hover {
1008
- background: var(--noteloom-danger-soft);
1009
- color: var(--noteloom-danger);
1010
- }
1011
-
1012
- .be-table-add-row {
1013
- display: block;
1014
- width: 100%;
1015
- border: none;
1016
- background: transparent;
1017
- text-align: left;
1018
- padding: 8px 12px;
1019
- color: var(--noteloom-text-faint);
1020
- cursor: pointer;
1021
- font: inherit;
1022
- font-size: 0.85rem;
1023
- font-weight: 500;
1024
- }
1025
-
1026
- .be-table-add-row:hover {
1027
- background: var(--noteloom-bg-subtle);
1028
- color: var(--noteloom-accent);
1029
- }
1030
-
1031
- .be-inline-table-select {
1032
- display: block;
1033
- }
1034
-
1035
- .be-inline-table-select .be-select {
1036
- width: 100%;
1037
- }
1038
-
1039
- .be-inline-table-select .be-select .be-select-tag {
1040
- width: -webkit-fill-available;
1041
- }
1042
-
1043
- .be-inline-table-select .be-select-trigger {
1044
- display: flex;
1045
- width: 100%;
1046
- min-width: 0;
1047
- min-height: 0;
1048
- border: none;
1049
- border-radius: var(--noteloom-radius-sm);
1050
- background: transparent;
1051
- padding: 0;
1052
- font: inherit;
1053
- font-size: 0.92rem;
1054
- }
1055
-
1056
- .be-inline-table-select .be-select-trigger:hover,
1057
- .be-inline-table-select .be-select-trigger[aria-expanded='true'] {
1058
- background: var(--noteloom-bg-hover);
1059
- box-shadow: none;
1060
- }
1061
-
1062
- /* --- per-block hover gutter (+ / drag-handle / menu) --- */
1063
-
1064
- .be-block-row {
1065
- position: relative;
1066
- }
1067
-
1068
- .be-block-row-hidden {
1069
- opacity: 0.4;
1070
- }
1071
-
1072
- .be-block-gutter {
1073
- position: absolute;
1074
- left: -56px;
1075
- top: 0.15em;
1076
- display: flex;
1077
- gap: 2px;
1078
- opacity: 0;
1079
- transition: opacity 0.1s ease;
1080
- user-select: none; /* it's a drag handle (see useBlockRangeDrag) — never let its own space become selectable text */
1081
- }
1082
-
1083
- .be-block-row:hover .be-block-gutter,
1084
- .be-block-gutter-active {
1085
- opacity: 1;
1086
- }
1087
-
1088
- .be-block-gutter-btn {
1089
- display: flex;
1090
- align-items: center;
1091
- justify-content: center;
1092
- width: 24px;
1093
- height: 24px;
1094
- border: none;
1095
- border-radius: var(--noteloom-radius-sm);
1096
- background: transparent;
1097
- color: var(--noteloom-text-faint);
1098
- cursor: pointer;
1099
- transition: background-color 0.12s ease, color 0.12s ease;
1100
- }
1101
-
1102
- .be-block-gutter-btn:hover,
1103
- .be-block-gutter-btn[aria-expanded='true'] {
1104
- background: var(--noteloom-bg-hover);
1105
- color: var(--noteloom-text);
1106
- }
1107
-
1108
- .be-block-gutter-menu,
1109
- .be-block-range-menu {
1110
- z-index: 1000;
1111
- min-width: 200px;
1112
- background: var(--noteloom-bg);
1113
- border: 1px solid var(--noteloom-border);
1114
- border-radius: var(--noteloom-radius-lg);
1115
- box-shadow: var(--noteloom-shadow);
1116
- padding: 4px;
1117
- }
1118
-
1119
- .be-block-gutter-menu-item,
1120
- .be-block-range-menu-item {
1121
- display: flex;
1122
- align-items: center;
1123
- gap: 8px;
1124
- width: 100%;
1125
- text-align: left;
1126
- border: none;
1127
- border-radius: var(--noteloom-radius-sm);
1128
- background: transparent;
1129
- padding: 7px 10px;
1130
- font: inherit;
1131
- font-size: 0.88rem;
1132
- color: var(--noteloom-text);
1133
- cursor: pointer;
1134
- }
1135
-
1136
- .be-block-gutter-menu-item:hover,
1137
- .be-block-range-menu-item:hover {
1138
- background: var(--noteloom-bg-hover);
1139
- }
1140
-
1141
- .be-block-gutter-menu-item-danger,
1142
- .be-block-range-menu-item-danger {
1143
- color: var(--noteloom-danger);
1144
- }
1145
-
1146
- .be-block-gutter-menu-item-danger:hover,
1147
- .be-block-range-menu-item-danger:hover {
1148
- background: var(--noteloom-danger-soft);
1149
- }
1150
-
1151
- /* --- drag-in-the-margin block range selection --- */
1152
-
1153
- .be-block-row-range-selected {
1154
- background: var(--noteloom-accent-soft);
1155
- border-radius: var(--noteloom-radius-md);
1156
- margin: 0 -8px;
1157
- padding: 0 8px;
1158
- }
1159
-
1160
- .be-block-range-dragging,
1161
- .be-block-range-dragging * {
1162
- user-select: none !important;
1163
- }
1164
-
1165
- /* --- whole-document select-all / single non-editable block selected --- */
1166
-
1167
- .be-surface--all-selected .be-block-row-content > [data-block-id] {
1168
- background: var(--noteloom-accent-soft);
1169
- border-radius: var(--noteloom-radius-sm);
1170
- }
1171
-
1172
- .be-block-selected {
1173
- outline: 2px solid var(--noteloom-accent);
1174
- outline-offset: 2px;
1175
- border-radius: var(--noteloom-radius-sm);
1176
- }
1177
-
1178
- /* --- document export (view source) --- */
1179
-
1180
- .be-export-trigger {
1181
- display: inline-flex;
1182
- align-items: center;
1183
- gap: 6px;
1184
- border: 1px solid var(--noteloom-border);
1185
- background: var(--noteloom-bg);
1186
- color: var(--noteloom-text-muted);
1187
- border-radius: var(--noteloom-radius-sm);
1188
- padding: 5px 10px;
1189
- font-size: 0.85rem;
1190
- cursor: pointer;
1191
- }
1192
-
1193
- .be-export-trigger:hover {
1194
- background: var(--noteloom-bg-hover);
1195
- color: var(--noteloom-text);
1196
- }
1197
-
1198
- .be-export-tabs {
1199
- display: flex;
1200
- gap: 4px;
1201
- margin-bottom: 10px;
1202
- border-bottom: 1px solid var(--noteloom-border);
1203
- }
1204
-
1205
- .be-export-tab {
1206
- border: none;
1207
- background: transparent;
1208
- color: var(--noteloom-text-muted);
1209
- padding: 6px 10px;
1210
- margin-bottom: -1px;
1211
- border-bottom: 2px solid transparent;
1212
- font-size: 0.85rem;
1213
- font-weight: 500;
1214
- cursor: pointer;
1215
- }
1216
-
1217
- .be-export-tab:hover {
1218
- color: var(--noteloom-text);
1219
- }
1220
-
1221
- .be-export-tab-active {
1222
- color: var(--noteloom-accent);
1223
- border-bottom-color: var(--noteloom-accent);
1224
- }
1225
-
1226
- .be-export-pre {
1227
- max-height: 50vh;
1228
- overflow: auto;
1229
- margin: 0;
1230
- padding: 0.9em 1em;
1231
- border-radius: var(--noteloom-radius-md);
1232
- background: var(--noteloom-code-bg);
1233
- color: var(--noteloom-code-text);
1234
- font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
1235
- font-size: 0.8rem;
1236
- line-height: 1.5;
1237
- white-space: pre-wrap;
1238
- overflow-wrap: anywhere;
1239
- }
1240
-
1241
- /* --- trailing click-to-continue space --- */
1242
-
1243
- .be-trailing-space {
1244
- cursor: text;
1245
- width: 100%;
1246
- min-height: 180px;
1247
- }
1248
-
1249
- /* --- modal (button editor, field type editor) --- */
1250
-
1251
- .be-modal-overlay {
1252
- position: fixed;
1253
- inset: 0;
1254
- background: rgba(15, 23, 42, 0.45);
1255
- display: flex;
1256
- align-items: center;
1257
- justify-content: center;
1258
- z-index: 2000;
1259
- padding: 1em;
1260
- }
1261
-
1262
- .be-modal {
1263
- background: var(--noteloom-bg);
1264
- color: var(--noteloom-text);
1265
- border-radius: var(--noteloom-radius-xl);
1266
- border: 1px solid var(--noteloom-border);
1267
- padding: 1.4em;
1268
- width: 100%;
1269
- max-width: 380px;
1270
- max-height: 85vh;
1271
- overflow-y: auto;
1272
- box-shadow: var(--noteloom-shadow);
1273
- }
1274
-
1275
- .be-modal-large {
1276
- max-width: 640px;
1277
- }
1278
-
1279
- .be-modal-title {
1280
- font-weight: 600;
1281
- font-size: 1.05rem;
1282
- margin-bottom: 1em;
1283
- }
1284
-
1285
- .be-modal-field {
1286
- display: block;
1287
- margin-bottom: 1em;
1288
- }
1289
-
1290
- .be-modal-field > span {
1291
- display: block;
1292
- font-size: 0.8rem;
1293
- color: var(--noteloom-text-muted);
1294
- margin-bottom: 5px;
1295
- }
1296
-
1297
- .be-modal-field input[type='text'],
1298
- .be-modal-field input[type='url'] {
1299
- width: 100%;
1300
- box-sizing: border-box;
1301
- border: 1px solid var(--noteloom-border);
1302
- border-radius: var(--noteloom-radius-md);
1303
- padding: 0.55em 0.75em;
1304
- background: transparent;
1305
- color: inherit;
1306
- font: inherit;
1307
- outline: none;
1308
- }
1309
-
1310
- .be-modal-field input[type='text']:focus,
1311
- .be-modal-field input[type='url']:focus {
1312
- border-color: var(--noteloom-accent);
1313
- }
1314
-
1315
- .be-modal-field select {
1316
- width: 100%;
1317
- box-sizing: border-box;
1318
- border: 1px solid var(--noteloom-border);
1319
- border-radius: var(--noteloom-radius-md);
1320
- padding: 0.55em 0.75em;
1321
- background: transparent;
1322
- color: inherit;
1323
- font: inherit;
1324
- font-size: 0.9rem;
1325
- }
1326
-
1327
- .be-modal-field select:focus {
1328
- border-color: var(--noteloom-accent);
1329
- }
1330
-
1331
- .be-modal-color-row {
1332
- display: flex;
1333
- gap: 8px;
1334
- flex-wrap: wrap;
1335
- }
1336
-
1337
- .be-modal-color-swatch {
1338
- width: 26px;
1339
- height: 26px;
1340
- border-radius: 50%;
1341
- border: 2px solid transparent;
1342
- cursor: pointer;
1343
- }
1344
-
1345
- .be-modal-color-swatch-active {
1346
- border-color: var(--noteloom-accent);
1347
- box-shadow: 0 0 0 2px var(--noteloom-bg), 0 0 0 4px var(--noteloom-accent-soft);
1348
- }
1349
-
1350
- .be-modal-attr-row {
1351
- display: flex;
1352
- gap: 6px;
1353
- margin-bottom: 6px;
1354
- align-items: center;
1355
- }
1356
-
1357
- .be-modal-attr-row input {
1358
- flex: 1;
1359
- min-width: 0;
1360
- border: 1px solid var(--noteloom-border);
1361
- border-radius: var(--noteloom-radius-sm);
1362
- padding: 0.4em 0.6em;
1363
- background: transparent;
1364
- color: inherit;
1365
- font: inherit;
1366
- font-size: 0.85rem;
1367
- }
1368
-
1369
- .be-modal-attr-remove {
1370
- flex: none;
1371
- border: none;
1372
- background: none;
1373
- color: var(--noteloom-text-faint);
1374
- cursor: pointer;
1375
- padding: 2px;
1376
- border-radius: var(--noteloom-radius-sm);
1377
- }
1378
-
1379
- .be-modal-attr-remove:hover {
1380
- color: var(--noteloom-danger);
1381
- }
1382
-
1383
- .be-modal-actions {
1384
- display: flex;
1385
- justify-content: flex-end;
1386
- gap: 8px;
1387
- margin-top: 20px;
1388
- }
1389
-
1390
- .be-modal-delete {
1391
- margin-right: auto; /* pushes Cancel/Save to the right, Delete stays on its own at the left */
1392
- }
1393
-
1394
- .be-modal-cancel,
1395
- .be-modal-save,
1396
- .be-modal-delete {
1397
- border: none;
1398
- border-radius: var(--noteloom-radius-md);
1399
- padding: 7px 16px;
1400
- font-size: 0.85rem;
1401
- font-weight: 500;
1402
- cursor: pointer;
1403
- }
1404
-
1405
- .be-modal-delete {
1406
- background: var(--noteloom-danger-soft);
1407
- color: var(--noteloom-danger);
1408
- }
1409
-
1410
- .be-modal-cancel {
1411
- background: var(--noteloom-bg-subtle);
1412
- color: var(--noteloom-text);
1413
- }
1414
-
1415
- .be-modal-cancel:hover {
1416
- background: var(--noteloom-bg-hover);
1417
- }
1418
-
1419
- .be-modal-save {
1420
- background: var(--noteloom-accent);
1421
- color: var(--noteloom-accent-text);
1422
- }
1423
-
1424
- .be-modal-save:hover {
1425
- opacity: 0.9;
1426
- }
1427
-
1428
- .be-modal-save:disabled {
1429
- opacity: 0.5;
1430
- cursor: not-allowed;
1431
- }
1432
-
1433
- /* --- slash ("/") / emoji (":") / mention ("@") command menu --- */
1434
-
1435
- .be-slash-menu {
1436
- z-index: 1000;
1437
- width: 260px;
1438
- max-height: 320px;
1439
- overflow-y: auto;
1440
- background: var(--noteloom-bg);
1441
- border: 1px solid var(--noteloom-border);
1442
- border-radius: var(--noteloom-radius-lg);
1443
- box-shadow: var(--noteloom-shadow);
1444
- padding: 6px;
1445
- }
1446
-
1447
- .be-slash-menu-item {
1448
- display: flex;
1449
- align-items: center;
1450
- gap: 10px;
1451
- padding: 7px 8px;
1452
- border-radius: var(--noteloom-radius-md);
1453
- cursor: pointer;
1454
- font-size: 0.9rem;
1455
- color: var(--noteloom-text);
1456
- }
1457
-
1458
- .be-slash-menu-item-active,
1459
- .be-slash-menu-item:hover {
1460
- background: var(--noteloom-accent-soft);
1461
- }
1462
-
1463
- .be-slash-menu-item-icon {
1464
- flex: none;
1465
- display: flex;
1466
- align-items: center;
1467
- justify-content: center;
1468
- width: 28px;
1469
- height: 28px;
1470
- border-radius: var(--noteloom-radius-sm);
1471
- border: 1px solid var(--noteloom-border);
1472
- color: var(--noteloom-text-muted);
1473
- }
1474
-
1475
- .be-slash-menu-item-label {
1476
- flex: 1;
1477
- overflow: hidden;
1478
- text-overflow: ellipsis;
1479
- white-space: nowrap;
1480
- }
1481
-
1482
- /* --- searchable Select (inline select/date/checkbox widgets, custom field types, table column type) --- */
1483
-
1484
- .be-select {
1485
- display: inline-flex;
1486
- }
1487
-
1488
- .be-select-trigger {
1489
- display: inline-flex;
1490
- align-items: center;
1491
- gap: 6px;
1492
- min-height: 28px;
1493
- min-width: 6em;
1494
- border: 1px solid var(--noteloom-border);
1495
- border-radius: var(--noteloom-radius-md);
1496
- background: var(--noteloom-bg);
1497
- color: var(--noteloom-text);
1498
- font: inherit;
1499
- font-size: 0.88rem;
1500
- padding: 4px 8px;
1501
- cursor: pointer;
1502
- }
1503
-
1504
- .be-select-trigger:hover {
1505
- border-color: var(--noteloom-accent);
1506
- }
1507
-
1508
- .be-select-trigger[aria-expanded='true'] {
1509
- border-color: var(--noteloom-accent);
1510
- box-shadow: 0 0 0 2px var(--noteloom-accent-soft);
1511
- }
1512
-
1513
- .be-select-trigger-tag {
1514
- min-width: 0;
1515
- min-height: 0;
1516
- border: none;
1517
- background: transparent;
1518
- padding: 2px;
1519
- border-radius: var(--noteloom-radius-sm);
1520
- outline: none;
1521
- border: none;
1522
- }
1523
-
1524
- .be-select-trigger-tag:hover {
1525
- background: var(--noteloom-bg-hover);
1526
- }
1527
-
1528
- .be-select-trigger-tag[aria-expanded='true'] {
1529
- background: var(--noteloom-bg-hover);
1530
- box-shadow: none;
1531
- }
1532
-
1533
- .be-select-value-placeholder {
1534
- color: var(--noteloom-text-faint);
1535
- }
1536
-
1537
- .be-select-tag {
1538
- display: inline-flex;
1539
- flex: none;
1540
- max-width: 100%;
1541
- padding: 2px 9px;
1542
- border-radius: var(--noteloom-radius-sm);
1543
- font-size: 0.82em;
1544
- font-weight: 500;
1545
- line-height: 1.4;
1546
- /* Wraps rather than truncates — a fixed-width popover (see
1547
- .be-select-popover) or table cell (see .be-table-cell) combined with
1548
- nowrap+ellipsis let long option text silently overflow its box
1549
- instead of actually being clipped; wrapping sidesteps that entirely. */
1550
- white-space: normal;
1551
- overflow-wrap: anywhere;
1552
- word-break: break-word;
1553
- }
1554
-
1555
- .be-select-value {
1556
- flex: 1;
1557
- text-align: left;
1558
- overflow: hidden;
1559
- text-overflow: ellipsis;
1560
- white-space: nowrap;
1561
- }
1562
-
1563
- .be-select-chevron {
1564
- flex: none;
1565
- color: var(--noteloom-text-faint);
1566
- }
1567
-
1568
- .be-select-popover {
1569
- z-index: 1000;
1570
- width: 224px;
1571
- background: var(--noteloom-bg);
1572
- border: 1px solid var(--noteloom-border);
1573
- border-radius: var(--noteloom-radius-lg);
1574
- box-shadow: var(--noteloom-shadow);
1575
- overflow: hidden;
1576
- }
1577
-
1578
- .be-select-search {
1579
- display: block;
1580
- width: 100%;
1581
- box-sizing: border-box;
1582
- border: none;
1583
- border-bottom: 1px solid var(--noteloom-border);
1584
- background: transparent;
1585
- color: inherit;
1586
- padding: 10px 12px;
1587
- font: inherit;
1588
- font-size: 0.88rem;
1589
- outline: none;
1590
- }
1591
-
1592
- .be-select-options {
1593
- max-height: 220px;
1594
- overflow-y: auto;
1595
- overflow-x: hidden;
1596
- padding: 4px;
1597
- }
1598
-
1599
- .be-select-option {
1600
- display: flex;
1601
- align-items: center;
1602
- min-width: 0;
1603
- padding: 7px 8px;
1604
- border-radius: var(--noteloom-radius-sm);
1605
- cursor: pointer;
1606
- font-size: 0.88rem;
1607
- color: var(--noteloom-text);
1608
- }
1609
-
1610
- /* A tag-variant option list (colored pills — e.g. Priority/Assignee) must
1611
- read at the exact same size/weight as a plain default-variant list
1612
- (Diagnosis) — only the colored-chip background should differ between
1613
- them, not the typography. .be-select-tag's own font-size/weight (sized
1614
- down for when it's squeezed into a trigger button) would otherwise make
1615
- tag-variant options look smaller/bolder than plain ones for no reason. */
1616
- .be-select-option .be-select-tag {
1617
- font-size: inherit;
1618
- font-weight: inherit;
1619
- line-height: inherit;
1620
- width: -webkit-fill-available;
1621
- }
1622
-
1623
- .be-select-option-active {
1624
- background: var(--noteloom-accent-soft);
1625
- }
1626
-
1627
- .be-select-option-selected {
1628
- font-weight: 600;
1629
- }
1630
-
1631
- .be-select-option-selected:not(.be-select-option-active) {
1632
- background: var(--noteloom-bg-subtle);
1633
- }
1634
-
1635
- .be-select-option-selected .be-select-tag {
1636
- font-weight: 500;
1637
- box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.2);
1638
- }
1639
-
1640
- .be-select-empty {
1641
- padding: 10px 12px;
1642
- color: var(--noteloom-text-faint);
1643
- font-size: 0.85rem;
1644
- text-align: center;
1645
- }
1646
-
1647
- .be-select-error {
1648
- color: var(--noteloom-danger);
1649
- }
1650
-
1651
- .be-select-manage-options {
1652
- display: block;
1653
- width: 100%;
1654
- box-sizing: border-box;
1655
- border: none;
1656
- border-top: 1px solid var(--noteloom-border);
1657
- background: transparent;
1658
- padding: 9px 12px;
1659
- font: inherit;
1660
- font-size: 0.82rem;
1661
- font-weight: 500;
1662
- color: var(--noteloom-accent);
1663
- text-align: left;
1664
- cursor: pointer;
1665
- }
1666
-
1667
- .be-select-manage-options:hover {
1668
- background: var(--noteloom-accent-soft);
1669
- }
1670
-
1671
- .be-inline-select,
1672
- .be-inline-date,
1673
- .be-inline-checkbox {
1674
- display: inline-flex;
1675
- align-items: center;
1676
- vertical-align: middle;
1677
- }
1678
-
1679
- /* Inline chips sit in running text — match the surrounding line's own font
1680
- size instead of the smaller size used for the Select component elsewhere
1681
- (menus, table column type dropdown), where a compact UI size is right. */
1682
- .be-inline-select .be-select-trigger {
1683
- min-height: 0;
1684
- font-size: 1em;
1685
- padding: 1px 8px;
1686
- }
1687
-
1688
- .be-inline-select .be-select-tag {
1689
- font-size: 0.92em;
1690
- }
1691
-
1692
- /* A mention reads as highlighted text sitting inline in the paragraph, not
1693
- a bulky standalone pill/button — minimal padding, small radius, no extra
1694
- chrome from the trigger button wrapping it. */
1695
- .be-inline-select .be-select-trigger-mention {
1696
- padding: 0 !important;
1697
- border-radius: 3px;
1698
- }
1699
-
1700
- /* A mention chip always uses this one fixed color, not each option's own
1701
- tag color — matches Notion/Slack/GitHub's "@mentions are one consistent
1702
- color" convention rather than a per-person palette. */
1703
- .be-select-tag-mention {
1704
- background: var(--noteloom-accent-soft);
1705
- color: var(--noteloom-accent);
1706
- font-weight: 500;
1707
- padding: 0 3px;
1708
- border-radius: 3px;
1709
- line-height: inherit;
1710
- }
1711
-
1712
- .be-inline-date input[type='date'] {
1713
- border: 1px solid var(--noteloom-border);
1714
- border-radius: var(--noteloom-radius-md);
1715
- background: var(--noteloom-bg);
1716
- color: inherit;
1717
- padding: 4px 8px;
1718
- font: inherit;
1719
- font-size: 0.88rem;
1720
- }
1721
-
1722
- .be-inline-checkbox {
1723
- gap: 6px;
1724
- }
1725
-
1726
- .be-inline-checkbox-input {
1727
- flex: none;
1728
- width: 16px;
1729
- height: 16px;
1730
- margin: 0;
1731
- accent-color: var(--noteloom-accent);
1732
- cursor: pointer;
1733
- }
1734
-
1735
- .be-inline-checkbox-label {
1736
- min-width: 0;
1737
- flex: 1;
1738
- border: 1px solid var(--noteloom-border);
1739
- border-radius: var(--noteloom-radius-sm);
1740
- background: transparent;
1741
- color: inherit;
1742
- font: inherit;
1743
- padding: 2px 8px;
1744
- outline: none;
1745
- }
1746
-
1747
- .be-inline-checkbox-label:focus {
1748
- border-color: var(--noteloom-accent);
1749
- }
1750
-
1751
- /* In a table cell (checkbox column), the browser's default text-input
1752
- width (~170px+) is wider than most columns, forcing the input — and with
1753
- it, the whole table — past the cell's own bounds. Constraining the
1754
- inline-flex row to the cell's actual width lets the label's flex:1 +
1755
- min-width:0 (above) do their job and shrink the input to fit instead. */
1756
- .be-table-cell .be-inline-checkbox {
1757
- display: flex;
1758
- width: 100%;
1759
- }
1760
-
1761
- .be-inline-checkbox-label::placeholder {
1762
- color: var(--noteloom-text-faint);
1763
- }
1764
-
1765
- /* --- floating (selection) format toolbar --- */
1766
-
1767
- .be-floating-toolbar {
1768
- display: flex;
1769
- align-items: center;
1770
- gap: 2px;
1771
- background: var(--noteloom-text);
1772
- border-radius: var(--noteloom-radius-md);
1773
- padding: 4px;
1774
- box-shadow: var(--noteloom-shadow);
1775
- z-index: 1000;
1776
- }
1777
-
1778
- .be-floating-toolbar-btn {
1779
- border: none;
1780
- background: transparent;
1781
- color: rgba(255, 255, 255, 0.85);
1782
- width: 30px;
1783
- height: 30px;
1784
- display: flex;
1785
- align-items: center;
1786
- justify-content: center;
1787
- border-radius: var(--noteloom-radius-sm);
1788
- cursor: pointer;
1789
- }
1790
-
1791
- .be-floating-toolbar-btn:hover {
1792
- background: rgba(255, 255, 255, 0.14);
1793
- }
1794
-
1795
- .be-floating-toolbar-btn-active {
1796
- background: var(--noteloom-accent);
1797
- color: #fff;
1798
- }
1799
-
1800
- .be-floating-toolbar-divider {
1801
- width: 1px;
1802
- height: 20px;
1803
- background: rgba(255, 255, 255, 0.2);
1804
- margin: 0 4px;
1805
- }
1806
-
1807
- .be-floating-toolbar-picker-wrap {
1808
- position: relative;
1809
- }
1810
-
1811
- .be-floating-toolbar-picker {
1812
- position: absolute;
1813
- top: 100%;
1814
- left: 0;
1815
- margin-top: 8px;
1816
- display: flex;
1817
- gap: 4px;
1818
- background: var(--noteloom-bg);
1819
- border-radius: var(--noteloom-radius-md);
1820
- padding: 6px;
1821
- box-shadow: var(--noteloom-shadow);
1822
- }
1823
-
1824
- .be-floating-toolbar-swatch {
1825
- width: 22px;
1826
- height: 22px;
1827
- border-radius: 50%;
1828
- border: 1px solid rgba(0, 0, 0, 0.1);
1829
- cursor: pointer;
1830
- }
1831
-
1832
- /* --- link hover card (edit/remove an existing link mark) --- */
1833
-
1834
- .be-link-hover-card {
1835
- z-index: 1000;
1836
- display: flex;
1837
- align-items: center;
1838
- gap: 2px;
1839
- max-width: 320px;
1840
- background: var(--noteloom-bg);
1841
- border: 1px solid var(--noteloom-border);
1842
- border-radius: var(--noteloom-radius-md);
1843
- padding: 5px 6px 5px 10px;
1844
- box-shadow: var(--noteloom-shadow);
1845
- font-size: 0.85rem;
1846
- }
1847
-
1848
- .be-link-hover-card-url {
1849
- flex: 1;
1850
- min-width: 0;
1851
- overflow: hidden;
1852
- text-overflow: ellipsis;
1853
- white-space: nowrap;
1854
- color: var(--noteloom-accent);
1855
- text-decoration: none;
1856
- }
1857
-
1858
- .be-link-hover-card-url:hover {
1859
- text-decoration: underline;
1860
- }
1861
-
1862
- .be-link-hover-card-btn {
1863
- flex: none;
1864
- width: 24px;
1865
- height: 24px;
1866
- border: none;
1867
- background: transparent;
1868
- color: var(--noteloom-text-muted);
1869
- display: flex;
1870
- align-items: center;
1871
- justify-content: center;
1872
- border-radius: var(--noteloom-radius-sm);
1873
- cursor: pointer;
1874
- }
1875
-
1876
- .be-link-hover-card-btn:hover {
1877
- background: var(--noteloom-bg-hover);
1878
- color: var(--noteloom-text);
1879
- }
1
+ /*
2
+ * noteloom's default theme — minimal, clean, Notion/Linear-adjacent.
3
+ *
4
+ * Ships as plain CSS custom properties on :root (not scoped to a wrapper
5
+ * element) deliberately: several of this package's own pieces — Select's
6
+ * popover, SlashMenu, FloatingToolbar, the table header menu, the block
7
+ * gutter/range menus, Modal — are portaled to document.body, so they are
8
+ * NOT DOM descendants of whatever element renders the editor itself.
9
+ * Scoping variables to a wrapper class would silently fail to reach any
10
+ * of those. `--noteloom-*` is a distinctive enough prefix that defining
11
+ * these on :root won't collide with a host app's own custom properties.
12
+ *
13
+ * This file is auto-injected at runtime by <EditorProvider> (see
14
+ * react/injectDefaultStyles.js) — you do NOT need to import this
15
+ * yourself. It's still published standalone at `noteloom/style.css` for:
16
+ * - passing `theme="none"` to <EditorProvider> and importing this
17
+ * explicitly instead (e.g. to control load order, or for SSR/CSP
18
+ * setups where runtime <style> injection isn't allowed)
19
+ * - copying as a starting point for your own from-scratch theme
20
+ *
21
+ * Retheme by overriding these variables in your own CSS (after the
22
+ * default theme loads) — every rule below reads from them, nothing is
23
+ * hardcoded. Override individual `.be-*` classes too, same as any other
24
+ * library's default styles.
25
+ */
26
+
27
+ :root {
28
+ --noteloom-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
29
+ --noteloom-text: #0f172a;
30
+ --noteloom-text-muted: #64748b;
31
+ --noteloom-text-faint: #94a3b8;
32
+ --noteloom-bg: #ffffff;
33
+ --noteloom-bg-subtle: #f8fafc;
34
+ --noteloom-bg-hover: #f1f5f9;
35
+ --noteloom-border: #e2e8f0;
36
+ --noteloom-accent: #6366f1;
37
+ --noteloom-accent-text: #ffffff;
38
+ --noteloom-accent-soft: rgba(99, 102, 241, 0.1);
39
+ --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.16);
40
+ --noteloom-danger: #dc2626;
41
+ --noteloom-danger-soft: #fef2f2;
42
+ --noteloom-radius-sm: 6px;
43
+ --noteloom-radius-md: 8px;
44
+ --noteloom-radius-lg: 12px;
45
+ --noteloom-radius-xl: 16px;
46
+ --noteloom-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
47
+ --noteloom-code-bg: #0f172a;
48
+ --noteloom-code-text: #e2e8f0;
49
+ }
50
+
51
+ @media (prefers-color-scheme: dark) {
52
+ :root {
53
+ --noteloom-text: #f1f5f9;
54
+ --noteloom-text-muted: #94a3b8;
55
+ --noteloom-text-faint: #64748b;
56
+ --noteloom-bg: #1c1932;
57
+ --noteloom-bg-subtle: rgba(255, 255, 255, 0.03);
58
+ --noteloom-bg-hover: rgba(255, 255, 255, 0.06);
59
+ --noteloom-border: rgba(255, 255, 255, 0.1);
60
+ --noteloom-accent-soft: rgba(99, 102, 241, 0.18);
61
+ --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.26);
62
+ --noteloom-danger-soft: rgba(220, 38, 38, 0.15);
63
+ --noteloom-code-bg: #13111f;
64
+ }
65
+ }
66
+
67
+ /* Explicit overrides win either direction — a host toggling dark mode via
68
+ a class rather than the OS setting can set [data-theme="dark"/"light"]
69
+ on any ancestor (e.g. <html>), overriding the media query above. */
70
+ [data-theme='dark'] {
71
+ --noteloom-text: #f1f5f9;
72
+ --noteloom-text-muted: #94a3b8;
73
+ --noteloom-text-faint: #64748b;
74
+ --noteloom-bg: #1c1932;
75
+ --noteloom-bg-subtle: rgba(255, 255, 255, 0.03);
76
+ --noteloom-bg-hover: rgba(255, 255, 255, 0.06);
77
+ --noteloom-border: rgba(255, 255, 255, 0.1);
78
+ --noteloom-accent-soft: rgba(99, 102, 241, 0.18);
79
+ --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.26);
80
+ --noteloom-danger-soft: rgba(220, 38, 38, 0.15);
81
+ --noteloom-code-bg: #13111f;
82
+ }
83
+
84
+ [data-theme='light'] {
85
+ --noteloom-text: #0f172a;
86
+ --noteloom-text-muted: #64748b;
87
+ --noteloom-text-faint: #94a3b8;
88
+ --noteloom-bg: #ffffff;
89
+ --noteloom-bg-subtle: #f8fafc;
90
+ --noteloom-bg-hover: #f1f5f9;
91
+ --noteloom-border: #e2e8f0;
92
+ --noteloom-accent-soft: rgba(99, 102, 241, 0.1);
93
+ --noteloom-accent-soft-hover: rgba(99, 102, 241, 0.16);
94
+ --noteloom-danger-soft: #fef2f2;
95
+ --noteloom-code-bg: #0f172a;
96
+ }
97
+
98
+ .be-root {
99
+ font-family: var(--noteloom-font);
100
+ color: var(--noteloom-text);
101
+ }
102
+
103
+ .be-editable {
104
+ outline: none;
105
+ }
106
+
107
+ /* --- basic leaf blocks --- */
108
+
109
+ .be-paragraph {
110
+ position: relative;
111
+ margin: 0.25rem 0;
112
+ line-height: 1.6;
113
+ outline: none;
114
+ }
115
+
116
+ .be-heading {
117
+ position: relative;
118
+ font-weight: 600;
119
+ margin: 1.25rem 0 0.25rem;
120
+ outline: none;
121
+ letter-spacing: -0.01em;
122
+ }
123
+
124
+ /* Explicit per-level sizing, each in its own overridable class — without
125
+ this, h1/h2/h3 only differ via the browser's own UA-stylesheet defaults
126
+ (inconsistent across browsers, and not something a host can target
127
+ independently without fighting tag-selector specificity). Override just
128
+ one level with `.be-heading-1 { font-size: ...; }` in your own CSS, same
129
+ as any other .be-* class. */
130
+ .be-heading-1 {
131
+ font-size: 1.9em;
132
+ }
133
+
134
+ .be-heading-2 {
135
+ font-size: 1.5em;
136
+ }
137
+
138
+ .be-heading-3 {
139
+ font-size: 1.2em;
140
+ }
141
+
142
+ .be-divider {
143
+ border: none;
144
+ border-top: 1px solid var(--noteloom-border);
145
+ margin: 1.5em 0;
146
+ cursor: default;
147
+ }
148
+
149
+ .be-blockquote {
150
+ position: relative;
151
+ margin: 0.5em 0;
152
+ padding-left: 0.9em;
153
+ border-left: 3px solid var(--noteloom-border);
154
+ color: var(--noteloom-text-muted);
155
+ outline: none;
156
+ }
157
+
158
+ /* --- callout --- */
159
+
160
+ .be-callout {
161
+ position: relative;
162
+ display: flex;
163
+ gap: 0.7em;
164
+ align-items: flex-start;
165
+ background: var(--noteloom-bg-subtle);
166
+ border-radius: var(--noteloom-radius-lg);
167
+ padding: 0.9em 1em;
168
+ margin: 0.5em 0;
169
+ }
170
+
171
+ .be-callout[data-color='gray'] { background: rgba(148, 163, 184, 0.16); }
172
+ .be-callout[data-color='blue'] { background: rgba(99, 102, 241, 0.12); }
173
+ .be-callout[data-color='green'] { background: rgba(34, 197, 94, 0.14); }
174
+ .be-callout[data-color='yellow'] { background: rgba(234, 179, 8, 0.16); }
175
+ .be-callout[data-color='orange'] { background: rgba(249, 115, 22, 0.14); }
176
+ .be-callout[data-color='red'] { background: rgba(239, 68, 68, 0.13); }
177
+ .be-callout[data-color='purple'] { background: rgba(168, 85, 247, 0.13); }
178
+ .be-callout[data-color='pink'] { background: rgba(236, 72, 153, 0.13); }
179
+
180
+ .be-callout-icon-wrap {
181
+ flex: none;
182
+ }
183
+
184
+ .be-callout-icon-input,
185
+ .be-callout-icon {
186
+ width: 2em;
187
+ height: 2em;
188
+ border: none;
189
+ background: var(--noteloom-bg);
190
+ border-radius: var(--noteloom-radius-md);
191
+ box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
192
+ font-size: 1.15em;
193
+ display: flex;
194
+ align-items: center;
195
+ justify-content: center;
196
+ padding: 0;
197
+ cursor: pointer;
198
+ }
199
+
200
+ .be-callout-icon-input {
201
+ outline: none;
202
+ text-align: center;
203
+ cursor: text;
204
+ }
205
+
206
+ .be-callout-content {
207
+ flex: 1;
208
+ min-width: 0;
209
+ padding-right: 1.6em; /* keeps text from running under the color-swatch trigger */
210
+ }
211
+
212
+ /* First child reads as the card's title; every child after it is the
213
+ description — see CalloutBlock.jsx's comment for why this is a CSS
214
+ convention over the content, not a separate title/description field. */
215
+ .be-callout-content > :first-child {
216
+ font-weight: 600;
217
+ }
218
+
219
+ .be-callout-content > :not(:first-child) {
220
+ color: var(--noteloom-text-muted);
221
+ font-size: 0.92em;
222
+ }
223
+
224
+ .be-callout-color-wrap {
225
+ position: absolute;
226
+ top: 0.6em;
227
+ right: 0.6em;
228
+ }
229
+
230
+ .be-callout-color-trigger {
231
+ border: none;
232
+ background: none;
233
+ padding: 3px;
234
+ border-radius: var(--noteloom-radius-sm);
235
+ cursor: pointer;
236
+ display: flex;
237
+ }
238
+
239
+ .be-callout-color-trigger:hover {
240
+ background: rgba(15, 23, 42, 0.06);
241
+ }
242
+
243
+ .be-callout-color-dot {
244
+ width: 12px;
245
+ height: 12px;
246
+ border-radius: 50%;
247
+ border: 1px solid rgba(15, 23, 42, 0.12);
248
+ }
249
+
250
+ .be-callout-color-dot-gray { background: #94a3b8; }
251
+ .be-callout-color-dot-blue { background: #6366f1; }
252
+ .be-callout-color-dot-green { background: #22c55e; }
253
+ .be-callout-color-dot-yellow { background: #eab308; }
254
+ .be-callout-color-dot-orange { background: #f97316; }
255
+ .be-callout-color-dot-red { background: #ef4444; }
256
+ .be-callout-color-dot-purple { background: #a855f7; }
257
+ .be-callout-color-dot-pink { background: #ec4899; }
258
+
259
+ .be-callout-color-picker {
260
+ position: absolute;
261
+ top: 100%;
262
+ right: 0;
263
+ margin-top: 4px;
264
+ z-index: 1000;
265
+ display: grid;
266
+ grid-template-columns: repeat(4, 1fr);
267
+ gap: 4px;
268
+ padding: 6px;
269
+ background: var(--noteloom-bg);
270
+ border: 1px solid var(--noteloom-border);
271
+ border-radius: var(--noteloom-radius-md);
272
+ box-shadow: var(--noteloom-shadow);
273
+ }
274
+
275
+ .be-callout-color-option {
276
+ width: 22px;
277
+ height: 22px;
278
+ border-radius: 50%;
279
+ border: 2px solid transparent;
280
+ cursor: pointer;
281
+ padding: 0;
282
+ }
283
+
284
+ .be-callout-color-option-gray { background: #94a3b8; }
285
+ .be-callout-color-option-blue { background: #6366f1; }
286
+ .be-callout-color-option-green { background: #22c55e; }
287
+ .be-callout-color-option-yellow { background: #eab308; }
288
+ .be-callout-color-option-orange { background: #f97316; }
289
+ .be-callout-color-option-red { background: #ef4444; }
290
+ .be-callout-color-option-purple { background: #a855f7; }
291
+ .be-callout-color-option-pink { background: #ec4899; }
292
+
293
+ .be-callout-color-option-active {
294
+ border-color: var(--noteloom-text);
295
+ }
296
+
297
+ /* --- code block --- */
298
+
299
+ .be-code-block {
300
+ margin: 0.6em 0;
301
+ border-radius: var(--noteloom-radius-lg);
302
+ overflow: hidden;
303
+ background: var(--noteloom-code-bg);
304
+ color: var(--noteloom-code-text);
305
+ }
306
+
307
+ .be-code-block-header {
308
+ display: flex;
309
+ align-items: center;
310
+ justify-content: flex-end;
311
+ gap: 4px;
312
+ padding: 6px 10px;
313
+ background: rgba(255, 255, 255, 0.04);
314
+ }
315
+
316
+ .be-code-block-delete {
317
+ appearance: none;
318
+ -webkit-appearance: none;
319
+ border: none;
320
+ outline: none;
321
+ background: transparent;
322
+ box-shadow: none;
323
+ color: var(--noteloom-text-faint);
324
+ width: 24px;
325
+ height: 24px;
326
+ margin: 0;
327
+ padding: 0;
328
+ display: flex;
329
+ align-items: center;
330
+ justify-content: center;
331
+ border-radius: var(--noteloom-radius-sm);
332
+ cursor: pointer;
333
+ }
334
+
335
+ .be-code-block-delete:hover {
336
+ background: rgba(255, 255, 255, 0.1);
337
+ color: #fca5a5;
338
+ }
339
+
340
+ .be-code-block-language {
341
+ background: transparent;
342
+ color: var(--noteloom-text-faint);
343
+ border: none;
344
+ font-size: 0.8rem;
345
+ cursor: pointer;
346
+ }
347
+
348
+ .be-code-block-pre {
349
+ margin: 0;
350
+ padding: 0.9em 1em;
351
+ overflow-x: auto;
352
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
353
+ font-size: 0.88rem;
354
+ outline: none;
355
+ }
356
+
357
+ .be-code-block-pre code {
358
+ position: relative;
359
+ display: block;
360
+ }
361
+
362
+ /* --- list items (bulleted / numbered / to-do / toggle) --- */
363
+
364
+ .be-list-item {
365
+ margin: 0.1rem 0;
366
+ }
367
+
368
+ .be-list-item-row {
369
+ display: flex;
370
+ align-items: flex-start;
371
+ gap: 0.4em;
372
+ }
373
+
374
+ .be-list-checkbox {
375
+ margin-top: 0.3em;
376
+ width: 16px;
377
+ height: 16px;
378
+ flex: none;
379
+ accent-color: var(--noteloom-accent);
380
+ cursor: pointer;
381
+ }
382
+
383
+ .be-list-toggle-marker {
384
+ border: none;
385
+ background: none;
386
+ cursor: pointer;
387
+ padding: 2px;
388
+ margin-top: 0.1em;
389
+ color: var(--noteloom-text-faint);
390
+ display: flex;
391
+ align-items: center;
392
+ justify-content: center;
393
+ height: 30px;
394
+ width: 30px;
395
+ border-radius: var(--noteloom-radius-sm);
396
+ }
397
+
398
+ .be-list-toggle-marker:hover {
399
+ background: var(--noteloom-bg-hover);
400
+ color: var(--noteloom-text-muted);
401
+ }
402
+
403
+ .be-list-marker {
404
+ min-width: 1.2em;
405
+ margin-top: 0.1em;
406
+ text-align: center;
407
+ color: var(--noteloom-text-faint);
408
+ user-select: none;
409
+ flex: none;
410
+ }
411
+
412
+ .be-list-item-title {
413
+ position: relative;
414
+ flex: 1;
415
+ min-width: 0;
416
+ outline: none;
417
+ line-height: 1.6;
418
+ }
419
+
420
+ .be-list-item-children {
421
+ margin-left: 2.1em;
422
+ }
423
+
424
+ /* --- toggle heading --- */
425
+
426
+ .be-toggle-heading {
427
+ margin: 1.25rem 0 0.25rem;
428
+ }
429
+
430
+ .be-toggle-heading-row {
431
+ display: flex;
432
+ align-items: center;
433
+ gap: 0.15em;
434
+ }
435
+
436
+ .be-toggle-heading-marker {
437
+ border: none;
438
+ background: none;
439
+ cursor: pointer;
440
+ color: var(--noteloom-text-faint);
441
+ display: flex;
442
+ align-items: center;
443
+ justify-content: center;
444
+ width: 30px;
445
+ height: 30px;
446
+ border-radius: var(--noteloom-radius-sm);
447
+ }
448
+
449
+ .be-toggle-heading-marker:hover {
450
+ background: var(--noteloom-bg-hover);
451
+ color: var(--noteloom-text-muted);
452
+ }
453
+
454
+ .be-toggle-heading-title {
455
+ flex: 1;
456
+ min-width: 0;
457
+ }
458
+
459
+ .be-toggle-heading-children {
460
+ margin-left: 2.1em;
461
+ }
462
+
463
+ /* --- layout (multi-column) --- */
464
+
465
+ .be-layout {
466
+ margin: 0.6em 0;
467
+ }
468
+
469
+ .be-layout-column {
470
+ flex: 1;
471
+ min-width: 0;
472
+ }
473
+
474
+ /* --- button block --- */
475
+
476
+ .be-button-block {
477
+ margin: 0.6em 0;
478
+ }
479
+
480
+ .be-button-block-pill {
481
+ display: inline-flex;
482
+ align-items: center;
483
+ gap: 0.4em;
484
+ border-radius: var(--noteloom-radius-md);
485
+ padding: 0.5em 1em;
486
+ color: var(--noteloom-accent-text);
487
+ }
488
+
489
+ .be-button-block-label {
490
+ position: relative;
491
+ outline: none;
492
+ min-width: 2em;
493
+ }
494
+
495
+ /* --- generic empty-state placeholder for editable leaf content ---
496
+ Note: this can't use :empty — an "empty" run still holds a zero-width
497
+ space text node (see EMPTY_RUN_PLACEHOLDER) inside its host span, so the
498
+ wrapper element is never actually childless. data-empty (kept in sync by
499
+ EditableBlockContent's syncEmptyAttr against the *logical* run content,
500
+ not the DOM) is the real signal. */
501
+
502
+ [data-placeholder][data-empty]:focus-within::before {
503
+ content: attr(data-placeholder);
504
+ position: absolute;
505
+ color: var(--noteloom-text-faint);
506
+ font-weight: 400;
507
+ font-style: normal;
508
+ opacity: 0.85;
509
+ pointer-events: none;
510
+ }
511
+
512
+ .be-button-block-open,
513
+ .be-button-block-settings {
514
+ flex: none;
515
+ border: none;
516
+ background: rgba(255, 255, 255, 0.16);
517
+ color: inherit;
518
+ border-radius: var(--noteloom-radius-sm);
519
+ width: 24px;
520
+ height: 24px;
521
+ display: flex;
522
+ align-items: center;
523
+ justify-content: center;
524
+ cursor: pointer;
525
+ }
526
+
527
+ .be-button-block-open:disabled {
528
+ opacity: 0.5;
529
+ cursor: not-allowed;
530
+ }
531
+
532
+ .be-button-block-open:hover:not(:disabled),
533
+ .be-button-block-settings:hover {
534
+ background: rgba(255, 255, 255, 0.28);
535
+ }
536
+
537
+ /* --- embed (image/video/audio/file) --- */
538
+
539
+ .be-embed {
540
+ margin: 0.6em 0;
541
+ }
542
+
543
+ .be-embed-preview {
544
+ position: relative;
545
+ display: flex;
546
+ }
547
+
548
+ .be-embed-align-left {
549
+ justify-content: flex-start;
550
+ }
551
+
552
+ .be-embed-align-center {
553
+ justify-content: center;
554
+ }
555
+
556
+ .be-embed-align-right {
557
+ justify-content: flex-end;
558
+ }
559
+
560
+ .be-embed-frame {
561
+ position: relative;
562
+ max-width: 100%;
563
+ overflow: visible;
564
+ border-radius: var(--noteloom-radius-lg);
565
+ }
566
+
567
+ .be-embed-image,
568
+ .be-embed-video {
569
+ border: 1px solid var(--noteloom-border);
570
+ }
571
+
572
+ .be-embed-image,
573
+ .be-embed-video {
574
+ max-width: 100%;
575
+ display: block;
576
+ border-radius: var(--noteloom-radius-lg);
577
+ }
578
+
579
+ .be-embed-audio {
580
+ width: 100%;
581
+ }
582
+
583
+ .be-embed-file-link {
584
+ display: flex;
585
+ align-items: center;
586
+ gap: 0.5em;
587
+ padding: 0.75em 1em;
588
+ border: 1px solid var(--noteloom-border);
589
+ border-radius: var(--noteloom-radius-xl);
590
+ text-decoration: none;
591
+ color: var(--noteloom-accent);
592
+ font-weight: 500;
593
+ font-size: 0.9rem;
594
+ }
595
+
596
+ .be-embed-file-link:hover {
597
+ background: var(--noteloom-bg-subtle);
598
+ }
599
+
600
+ .be-embed-toolbar {
601
+ position: absolute;
602
+ top: 8px;
603
+ right: 8px;
604
+ z-index: 2;
605
+ display: flex;
606
+ align-items: center;
607
+ gap: 2px;
608
+ padding: 3px;
609
+ background: rgba(15, 23, 42, 0.72);
610
+ border-radius: var(--noteloom-radius-md);
611
+ opacity: 0;
612
+ transition: opacity 0.12s ease;
613
+ }
614
+
615
+ .be-embed-preview:hover .be-embed-toolbar,
616
+ .be-embed-toolbar:focus-within {
617
+ opacity: 1;
618
+ }
619
+
620
+ .be-embed-toolbar-btn {
621
+ border: none;
622
+ background: transparent;
623
+ width: 24px;
624
+ height: 24px;
625
+ display: flex;
626
+ align-items: center;
627
+ justify-content: center;
628
+ color: rgba(255, 255, 255, 0.8);
629
+ border-radius: var(--noteloom-radius-sm);
630
+ cursor: pointer;
631
+ }
632
+
633
+ .be-embed-toolbar-btn:hover {
634
+ background: rgba(255, 255, 255, 0.16);
635
+ color: #fff;
636
+ }
637
+
638
+ .be-embed-toolbar-btn-active {
639
+ background: var(--noteloom-accent);
640
+ color: #fff;
641
+ }
642
+
643
+ .be-embed-remove {
644
+ border: none;
645
+ background: transparent;
646
+ border-radius: var(--noteloom-radius-sm);
647
+ padding: 0 8px;
648
+ height: 24px;
649
+ color: rgba(255, 255, 255, 0.8);
650
+ font-size: 0.75rem;
651
+ cursor: pointer;
652
+ }
653
+
654
+ .be-embed-remove:hover {
655
+ background: rgba(255, 255, 255, 0.16);
656
+ color: #fff;
657
+ }
658
+
659
+ .be-embed-resize-handle {
660
+ position: absolute;
661
+ bottom: 4px;
662
+ right: 4px;
663
+ width: 12px;
664
+ height: 12px;
665
+ cursor: nwse-resize;
666
+ border-radius: 2px;
667
+ border: 1px solid #fff;
668
+ background: var(--noteloom-accent);
669
+ }
670
+
671
+ .be-embed-dropzone {
672
+ border: 1.5px dashed var(--noteloom-border);
673
+ border-radius: var(--noteloom-radius-xl);
674
+ padding: 2.2em;
675
+ display: flex;
676
+ flex-direction: column;
677
+ align-items: center;
678
+ gap: 0.6em;
679
+ text-align: center;
680
+ color: var(--noteloom-text-muted);
681
+ }
682
+
683
+ .be-embed-dropzone-active {
684
+ border-color: var(--noteloom-accent);
685
+ background: var(--noteloom-accent-soft);
686
+ color: var(--noteloom-accent);
687
+ }
688
+
689
+ .be-embed-upload-btn {
690
+ background: var(--noteloom-accent);
691
+ color: var(--noteloom-accent-text);
692
+ border-radius: var(--noteloom-radius-md);
693
+ padding: 0.5em 1.1em;
694
+ cursor: pointer;
695
+ font-size: 0.85rem;
696
+ font-weight: 500;
697
+ }
698
+
699
+ .be-embed-upload-btn input {
700
+ display: none;
701
+ }
702
+
703
+ .be-embed-dropzone-hint {
704
+ font-size: 0.8rem;
705
+ color: var(--noteloom-text-faint);
706
+ }
707
+
708
+ .be-embed-url-row {
709
+ display: flex;
710
+ gap: 6px;
711
+ width: 100%;
712
+ max-width: 360px;
713
+ }
714
+
715
+ .be-embed-url-input {
716
+ flex: 1;
717
+ min-width: 0;
718
+ border: 1px solid var(--noteloom-border);
719
+ border-radius: var(--noteloom-radius-md);
720
+ padding: 0.45em 0.7em;
721
+ background: transparent;
722
+ color: inherit;
723
+ font: inherit;
724
+ font-size: 0.85rem;
725
+ outline: none;
726
+ }
727
+
728
+ .be-embed-url-input:focus {
729
+ border-color: var(--noteloom-accent);
730
+ }
731
+
732
+ .be-embed-url-commit {
733
+ border: none;
734
+ background: var(--noteloom-accent);
735
+ color: var(--noteloom-accent-text);
736
+ border-radius: var(--noteloom-radius-md);
737
+ padding: 0.45em 0.9em;
738
+ cursor: pointer;
739
+ font-size: 0.85rem;
740
+ font-weight: 500;
741
+ }
742
+
743
+ /* --- table --- */
744
+
745
+ .be-table-scroll {
746
+ max-width: 100%;
747
+ overflow-x: auto;
748
+ }
749
+
750
+ .be-table-wrapper {
751
+ margin: 0.9em 0;
752
+ overflow-x: auto;
753
+ border: 1px solid var(--noteloom-border);
754
+ border-radius: var(--noteloom-radius-lg);
755
+ width: max-content;
756
+ }
757
+
758
+ .be-table {
759
+ border-collapse: collapse;
760
+ table-layout: fixed;
761
+ /* Deliberately no width:100% — combined with table-layout:fixed and each
762
+ column's own <col> width, that would make the browser redistribute
763
+ leftover space proportionally across columns, fighting individual
764
+ column resize (see be-table-col-resize-handle). */
765
+ }
766
+
767
+ .be-table-header-row {
768
+ background: var(--noteloom-bg-subtle);
769
+ }
770
+
771
+ .be-table-header-cell {
772
+ position: relative;
773
+ border-bottom: 1px solid var(--noteloom-border);
774
+ border-right: 1px solid var(--noteloom-border);
775
+ padding: 6px 10px;
776
+ }
777
+
778
+ .be-table-header-label {
779
+ display: block;
780
+ width: 100%;
781
+ border: none;
782
+ background: none;
783
+ font: inherit;
784
+ font-weight: 600;
785
+ font-size: 0.78rem;
786
+ color: var(--noteloom-text-muted);
787
+ outline: none;
788
+ overflow: hidden;
789
+ text-overflow: ellipsis;
790
+ white-space: nowrap;
791
+ padding: 2px 0;
792
+ }
793
+
794
+ .be-table-header-menu-trigger {
795
+ position: absolute;
796
+ right: 4px;
797
+ top: 50%;
798
+ transform: translateY(-50%);
799
+ visibility: hidden;
800
+ border: none;
801
+ background: transparent;
802
+ border-radius: var(--noteloom-radius-sm);
803
+ padding: 2px;
804
+ color: var(--noteloom-text-faint);
805
+ cursor: pointer;
806
+ }
807
+
808
+ .be-table-header-cell:hover .be-table-header-menu-trigger {
809
+ visibility: visible;
810
+ }
811
+
812
+ .be-table-header-menu-trigger:hover {
813
+ background: var(--noteloom-bg-hover);
814
+ }
815
+
816
+ .be-table-col-resize-handle {
817
+ position: absolute;
818
+ top: 0;
819
+ right: -3px;
820
+ width: 6px;
821
+ height: 100%;
822
+ cursor: col-resize;
823
+ z-index: 1;
824
+ }
825
+
826
+ .be-table-col-resize-handle:hover,
827
+ .be-table-col-resize-handle:active {
828
+ background: var(--noteloom-accent-soft-hover);
829
+ }
830
+
831
+ .be-table-header-spacer {
832
+ border-bottom: 1px solid var(--noteloom-border);
833
+ }
834
+
835
+ .be-table-header-spacer-col {
836
+ width: 32px;
837
+ }
838
+
839
+ .be-table-header-menu {
840
+ z-index: 1000;
841
+ width: 224px;
842
+ border-radius: var(--noteloom-radius-lg);
843
+ border: 1px solid var(--noteloom-border);
844
+ background: var(--noteloom-bg);
845
+ padding: 4px;
846
+ font-size: 0.88rem;
847
+ box-shadow: var(--noteloom-shadow);
848
+ }
849
+
850
+ .be-table-header-menu-options {
851
+ z-index: 1000;
852
+ padding: 4px;
853
+ font-size: 0.88rem;
854
+ border-bottom: 1px solid var(--noteloom-border);
855
+ margin-bottom: 4px;
856
+ }
857
+
858
+ .be-table-header-menu-type {
859
+ display: flex;
860
+ flex-direction: row;
861
+ justify-content: space-between;
862
+ padding: 6px;
863
+ border-bottom: 1px solid var(--noteloom-border);
864
+ margin-bottom: 4px;
865
+ }
866
+
867
+ .be-table-header-type-select {
868
+ width: 100%;
869
+ border: 1px solid var(--noteloom-border);
870
+ border-radius: var(--noteloom-radius-sm);
871
+ padding: 6px 8px;
872
+ background: transparent;
873
+ color: inherit;
874
+ font: inherit;
875
+ font-size: 0.85rem;
876
+ }
877
+
878
+ .be-table-header-menu-item {
879
+ display: flex;
880
+ align-items: center;
881
+ gap: 8px;
882
+ width: 100%;
883
+ text-align: left;
884
+ border: none;
885
+ border-radius: var(--noteloom-radius-sm);
886
+ background: transparent;
887
+ padding: 6px 10px;
888
+ font: inherit;
889
+ font-size: 0.88rem;
890
+ color: var(--noteloom-text);
891
+ cursor: pointer;
892
+ }
893
+
894
+ .be-table-header-menu-item:hover {
895
+ background: var(--noteloom-bg-hover);
896
+ }
897
+
898
+ .be-table-header-menu-item-danger {
899
+ color: var(--noteloom-danger);
900
+ }
901
+
902
+ .be-table-header-menu-item-danger:hover {
903
+ background: var(--noteloom-danger-soft);
904
+ }
905
+
906
+ .be-table-header-menu-options-label {
907
+ font-size: 0.68rem;
908
+ text-transform: uppercase;
909
+ letter-spacing: 0.04em;
910
+ font-weight: 600;
911
+ color: var(--noteloom-text-faint);
912
+ padding: 6px 8px 2px;
913
+ }
914
+
915
+ .be-table-header-menu-option-row {
916
+ display: flex;
917
+ align-items: center;
918
+ gap: 6px;
919
+ padding: 2px 4px;
920
+ }
921
+
922
+ .be-table-header-menu-option-swatch {
923
+ width: 14px;
924
+ height: 14px;
925
+ border-radius: 50%;
926
+ flex: none;
927
+ }
928
+
929
+ .be-table-header-menu-option-input {
930
+ flex: 1;
931
+ min-width: 0;
932
+ border: none;
933
+ background: transparent;
934
+ color: inherit;
935
+ font: inherit;
936
+ font-size: 0.85rem;
937
+ padding: 4px 6px;
938
+ border-radius: var(--noteloom-radius-sm);
939
+ outline: none;
940
+ }
941
+
942
+ .be-table-header-menu-option-input:focus {
943
+ background: var(--noteloom-bg-hover);
944
+ }
945
+
946
+ .be-table-header-menu-option-remove,
947
+ .be-table-header-menu-option-add {
948
+ flex: none;
949
+ border: none;
950
+ background: transparent;
951
+ color: var(--noteloom-text-faint);
952
+ cursor: pointer;
953
+ padding: 3px;
954
+ display: flex;
955
+ align-items: center;
956
+ justify-content: center;
957
+ border-radius: var(--noteloom-radius-sm);
958
+ }
959
+
960
+ .be-table-header-menu-option-remove:hover {
961
+ background: var(--noteloom-danger-soft);
962
+ color: var(--noteloom-danger);
963
+ }
964
+
965
+ .be-table-header-menu-option-add {
966
+ color: var(--noteloom-text-muted);
967
+ }
968
+
969
+ .be-table-header-menu-option-add:hover {
970
+ background: var(--noteloom-bg-hover);
971
+ }
972
+
973
+ .be-table-row:hover {
974
+ background: var(--noteloom-bg-subtle);
975
+ }
976
+
977
+ .be-table-cell {
978
+ border-bottom: 1px solid var(--noteloom-border);
979
+ border-right: 1px solid var(--noteloom-border);
980
+ padding: 6px 10px;
981
+ vertical-align: top;
982
+ outline: none;
983
+ font-size: 0.92rem;
984
+ /* table-layout: fixed already keeps the COLUMN width from growing to fit
985
+ content — this is what stops a long unbroken string (a URL, one giant
986
+ word) from visually overflowing past that fixed width instead of
987
+ wrapping onto a new line within the cell. */
988
+ max-width: 0;
989
+ overflow-wrap: anywhere;
990
+ word-break: break-word;
991
+ }
992
+
993
+ .be-table-cell:focus-within {
994
+ box-shadow: inset 0 0 0 2px var(--noteloom-accent);
995
+ border-radius: 2px;
996
+ }
997
+
998
+ .be-table-row-actions {
999
+ width: 32px;
1000
+ text-align: center;
1001
+ vertical-align: middle;
1002
+ border: none;
1003
+ background: transparent;
1004
+ padding: 0;
1005
+ }
1006
+
1007
+ .be-table-delete-row {
1008
+ visibility: hidden;
1009
+ border: none;
1010
+ background: transparent;
1011
+ color: var(--noteloom-text-faint);
1012
+ cursor: pointer;
1013
+ width: 24px;
1014
+ height: 24px;
1015
+ display: inline-flex;
1016
+ align-items: center;
1017
+ justify-content: center;
1018
+ border-radius: var(--noteloom-radius-sm);
1019
+ }
1020
+
1021
+ tr.be-table-row:hover .be-table-delete-row {
1022
+ visibility: visible;
1023
+ }
1024
+
1025
+ .be-table-delete-row:hover {
1026
+ background: var(--noteloom-danger-soft);
1027
+ color: var(--noteloom-danger);
1028
+ }
1029
+
1030
+ .be-table-add-row {
1031
+ display: block;
1032
+ width: 100%;
1033
+ border: none;
1034
+ background: transparent;
1035
+ text-align: left;
1036
+ padding: 8px 12px;
1037
+ color: var(--noteloom-text-faint);
1038
+ cursor: pointer;
1039
+ font: inherit;
1040
+ font-size: 0.85rem;
1041
+ font-weight: 500;
1042
+ }
1043
+
1044
+ .be-table-add-row:hover {
1045
+ background: var(--noteloom-bg-subtle);
1046
+ color: var(--noteloom-accent);
1047
+ }
1048
+
1049
+ .be-inline-table-select {
1050
+ display: block;
1051
+ }
1052
+
1053
+ .be-inline-table-select .be-select {
1054
+ width: 100%;
1055
+ }
1056
+
1057
+ .be-inline-table-select .be-select .be-select-tag {
1058
+ width: -webkit-fill-available;
1059
+ }
1060
+
1061
+ .be-inline-table-select .be-select-trigger {
1062
+ display: flex;
1063
+ width: 100%;
1064
+ min-width: 0;
1065
+ min-height: 0;
1066
+ border: none;
1067
+ border-radius: var(--noteloom-radius-sm);
1068
+ background: transparent;
1069
+ padding: 0;
1070
+ font: inherit;
1071
+ font-size: 0.92rem;
1072
+ }
1073
+
1074
+ .be-inline-table-select .be-select-trigger:hover,
1075
+ .be-inline-table-select .be-select-trigger[aria-expanded='true'] {
1076
+ background: var(--noteloom-bg-hover);
1077
+ box-shadow: none;
1078
+ }
1079
+
1080
+ /* --- per-block hover gutter (+ / drag-handle / menu) --- */
1081
+
1082
+ .be-block-row {
1083
+ position: relative;
1084
+ }
1085
+
1086
+ .be-block-row-hidden {
1087
+ opacity: 0.4;
1088
+ }
1089
+
1090
+ .be-block-gutter {
1091
+ position: absolute;
1092
+ left: -56px;
1093
+ top: 0.15em;
1094
+ display: flex;
1095
+ gap: 2px;
1096
+ opacity: 0;
1097
+ transition: opacity 0.1s ease;
1098
+ user-select: none; /* it's a drag handle (see useBlockRangeDrag) — never let its own space become selectable text */
1099
+ }
1100
+
1101
+ .be-block-row:hover .be-block-gutter,
1102
+ .be-block-gutter-active {
1103
+ opacity: 1;
1104
+ }
1105
+
1106
+ .be-block-gutter-btn {
1107
+ display: flex;
1108
+ align-items: center;
1109
+ justify-content: center;
1110
+ width: 24px;
1111
+ height: 24px;
1112
+ border: none;
1113
+ border-radius: var(--noteloom-radius-sm);
1114
+ background: transparent;
1115
+ color: var(--noteloom-text-faint);
1116
+ cursor: pointer;
1117
+ transition: background-color 0.12s ease, color 0.12s ease;
1118
+ }
1119
+
1120
+ .be-block-gutter-btn:hover,
1121
+ .be-block-gutter-btn[aria-expanded='true'] {
1122
+ background: var(--noteloom-bg-hover);
1123
+ color: var(--noteloom-text);
1124
+ }
1125
+
1126
+ .be-block-gutter-menu,
1127
+ .be-block-range-menu {
1128
+ z-index: 1000;
1129
+ min-width: 200px;
1130
+ background: var(--noteloom-bg);
1131
+ border: 1px solid var(--noteloom-border);
1132
+ border-radius: var(--noteloom-radius-lg);
1133
+ box-shadow: var(--noteloom-shadow);
1134
+ padding: 4px;
1135
+ }
1136
+
1137
+ .be-block-gutter-menu-item,
1138
+ .be-block-range-menu-item {
1139
+ display: flex;
1140
+ align-items: center;
1141
+ gap: 8px;
1142
+ width: 100%;
1143
+ text-align: left;
1144
+ border: none;
1145
+ border-radius: var(--noteloom-radius-sm);
1146
+ background: transparent;
1147
+ padding: 7px 10px;
1148
+ font: inherit;
1149
+ font-size: 0.88rem;
1150
+ color: var(--noteloom-text);
1151
+ cursor: pointer;
1152
+ }
1153
+
1154
+ .be-block-gutter-menu-item:hover,
1155
+ .be-block-range-menu-item:hover {
1156
+ background: var(--noteloom-bg-hover);
1157
+ }
1158
+
1159
+ .be-block-gutter-menu-item-danger,
1160
+ .be-block-range-menu-item-danger {
1161
+ color: var(--noteloom-danger);
1162
+ }
1163
+
1164
+ .be-block-gutter-menu-item-danger:hover,
1165
+ .be-block-range-menu-item-danger:hover {
1166
+ background: var(--noteloom-danger-soft);
1167
+ }
1168
+
1169
+ /* --- drag-in-the-margin block range selection --- */
1170
+
1171
+ .be-block-row-range-selected {
1172
+ background: var(--noteloom-accent-soft);
1173
+ border-radius: var(--noteloom-radius-md);
1174
+ margin: 0 -8px;
1175
+ padding: 0 8px;
1176
+ }
1177
+
1178
+ .be-block-range-dragging,
1179
+ .be-block-range-dragging * {
1180
+ user-select: none !important;
1181
+ }
1182
+
1183
+ /* --- whole-document select-all / single non-editable block selected --- */
1184
+
1185
+ .be-surface--all-selected .be-block-row-content > [data-block-id] {
1186
+ background: var(--noteloom-accent-soft);
1187
+ border-radius: var(--noteloom-radius-sm);
1188
+ }
1189
+
1190
+ .be-block-selected {
1191
+ outline: 2px solid var(--noteloom-accent);
1192
+ outline-offset: 2px;
1193
+ border-radius: var(--noteloom-radius-sm);
1194
+ }
1195
+
1196
+ /* --- document export (view source) --- */
1197
+
1198
+ .be-export-trigger {
1199
+ display: inline-flex;
1200
+ align-items: center;
1201
+ gap: 6px;
1202
+ border: 1px solid var(--noteloom-border);
1203
+ background: var(--noteloom-bg);
1204
+ color: var(--noteloom-text-muted);
1205
+ border-radius: var(--noteloom-radius-sm);
1206
+ padding: 5px 10px;
1207
+ font-size: 0.85rem;
1208
+ cursor: pointer;
1209
+ }
1210
+
1211
+ .be-export-trigger:hover {
1212
+ background: var(--noteloom-bg-hover);
1213
+ color: var(--noteloom-text);
1214
+ }
1215
+
1216
+ .be-export-tabs {
1217
+ display: flex;
1218
+ gap: 4px;
1219
+ margin-bottom: 10px;
1220
+ border-bottom: 1px solid var(--noteloom-border);
1221
+ }
1222
+
1223
+ .be-export-tab {
1224
+ border: none;
1225
+ background: transparent;
1226
+ color: var(--noteloom-text-muted);
1227
+ padding: 6px 10px;
1228
+ margin-bottom: -1px;
1229
+ border-bottom: 2px solid transparent;
1230
+ font-size: 0.85rem;
1231
+ font-weight: 500;
1232
+ cursor: pointer;
1233
+ }
1234
+
1235
+ .be-export-tab:hover {
1236
+ color: var(--noteloom-text);
1237
+ }
1238
+
1239
+ .be-export-tab-active {
1240
+ color: var(--noteloom-accent);
1241
+ border-bottom-color: var(--noteloom-accent);
1242
+ }
1243
+
1244
+ .be-export-pre {
1245
+ max-height: 50vh;
1246
+ overflow: auto;
1247
+ margin: 0;
1248
+ padding: 0.9em 1em;
1249
+ border-radius: var(--noteloom-radius-md);
1250
+ background: var(--noteloom-code-bg);
1251
+ color: var(--noteloom-code-text);
1252
+ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
1253
+ font-size: 0.8rem;
1254
+ line-height: 1.5;
1255
+ white-space: pre-wrap;
1256
+ overflow-wrap: anywhere;
1257
+ }
1258
+
1259
+ /* --- trailing click-to-continue space --- */
1260
+
1261
+ .be-trailing-space {
1262
+ cursor: text;
1263
+ width: 100%;
1264
+ min-height: 180px;
1265
+ }
1266
+
1267
+ /* --- modal (button editor, field type editor) --- */
1268
+
1269
+ .be-modal-overlay {
1270
+ position: fixed;
1271
+ inset: 0;
1272
+ background: rgba(15, 23, 42, 0.45);
1273
+ display: flex;
1274
+ align-items: center;
1275
+ justify-content: center;
1276
+ z-index: 2000;
1277
+ padding: 1em;
1278
+ }
1279
+
1280
+ .be-modal {
1281
+ background: var(--noteloom-bg);
1282
+ color: var(--noteloom-text);
1283
+ border-radius: var(--noteloom-radius-xl);
1284
+ border: 1px solid var(--noteloom-border);
1285
+ padding: 1.4em;
1286
+ width: 100%;
1287
+ max-width: 380px;
1288
+ max-height: 85vh;
1289
+ overflow-y: auto;
1290
+ box-shadow: var(--noteloom-shadow);
1291
+ }
1292
+
1293
+ .be-modal-large {
1294
+ max-width: 640px;
1295
+ }
1296
+
1297
+ .be-modal-title {
1298
+ font-weight: 600;
1299
+ font-size: 1.05rem;
1300
+ margin-bottom: 1em;
1301
+ }
1302
+
1303
+ .be-modal-field {
1304
+ display: block;
1305
+ margin-bottom: 1em;
1306
+ }
1307
+
1308
+ .be-modal-field > span {
1309
+ display: block;
1310
+ font-size: 0.8rem;
1311
+ color: var(--noteloom-text-muted);
1312
+ margin-bottom: 5px;
1313
+ }
1314
+
1315
+ .be-modal-field input[type='text'],
1316
+ .be-modal-field input[type='url'] {
1317
+ width: 100%;
1318
+ box-sizing: border-box;
1319
+ border: 1px solid var(--noteloom-border);
1320
+ border-radius: var(--noteloom-radius-md);
1321
+ padding: 0.55em 0.75em;
1322
+ background: transparent;
1323
+ color: inherit;
1324
+ font: inherit;
1325
+ outline: none;
1326
+ }
1327
+
1328
+ .be-modal-field input[type='text']:focus,
1329
+ .be-modal-field input[type='url']:focus {
1330
+ border-color: var(--noteloom-accent);
1331
+ }
1332
+
1333
+ .be-modal-field select {
1334
+ width: 100%;
1335
+ box-sizing: border-box;
1336
+ border: 1px solid var(--noteloom-border);
1337
+ border-radius: var(--noteloom-radius-md);
1338
+ padding: 0.55em 0.75em;
1339
+ background: transparent;
1340
+ color: inherit;
1341
+ font: inherit;
1342
+ font-size: 0.9rem;
1343
+ }
1344
+
1345
+ .be-modal-field select:focus {
1346
+ border-color: var(--noteloom-accent);
1347
+ }
1348
+
1349
+ .be-modal-color-row {
1350
+ display: flex;
1351
+ gap: 8px;
1352
+ flex-wrap: wrap;
1353
+ }
1354
+
1355
+ .be-modal-color-swatch {
1356
+ width: 26px;
1357
+ height: 26px;
1358
+ border-radius: 50%;
1359
+ border: 2px solid transparent;
1360
+ cursor: pointer;
1361
+ }
1362
+
1363
+ .be-modal-color-swatch-active {
1364
+ border-color: var(--noteloom-accent);
1365
+ box-shadow: 0 0 0 2px var(--noteloom-bg), 0 0 0 4px var(--noteloom-accent-soft);
1366
+ }
1367
+
1368
+ .be-modal-attr-row {
1369
+ display: flex;
1370
+ gap: 6px;
1371
+ margin-bottom: 6px;
1372
+ align-items: center;
1373
+ }
1374
+
1375
+ .be-modal-attr-row input {
1376
+ flex: 1;
1377
+ min-width: 0;
1378
+ border: 1px solid var(--noteloom-border);
1379
+ border-radius: var(--noteloom-radius-sm);
1380
+ padding: 0.4em 0.6em;
1381
+ background: transparent;
1382
+ color: inherit;
1383
+ font: inherit;
1384
+ font-size: 0.85rem;
1385
+ }
1386
+
1387
+ .be-modal-attr-remove {
1388
+ flex: none;
1389
+ border: none;
1390
+ background: none;
1391
+ color: var(--noteloom-text-faint);
1392
+ cursor: pointer;
1393
+ padding: 2px;
1394
+ border-radius: var(--noteloom-radius-sm);
1395
+ }
1396
+
1397
+ .be-modal-attr-remove:hover {
1398
+ color: var(--noteloom-danger);
1399
+ }
1400
+
1401
+ .be-modal-actions {
1402
+ display: flex;
1403
+ justify-content: flex-end;
1404
+ gap: 8px;
1405
+ margin-top: 20px;
1406
+ }
1407
+
1408
+ .be-modal-delete {
1409
+ margin-right: auto; /* pushes Cancel/Save to the right, Delete stays on its own at the left */
1410
+ }
1411
+
1412
+ .be-modal-cancel,
1413
+ .be-modal-save,
1414
+ .be-modal-delete {
1415
+ border: none;
1416
+ border-radius: var(--noteloom-radius-md);
1417
+ padding: 7px 16px;
1418
+ font-size: 0.85rem;
1419
+ font-weight: 500;
1420
+ cursor: pointer;
1421
+ }
1422
+
1423
+ .be-modal-delete {
1424
+ background: var(--noteloom-danger-soft);
1425
+ color: var(--noteloom-danger);
1426
+ }
1427
+
1428
+ .be-modal-cancel {
1429
+ background: var(--noteloom-bg-subtle);
1430
+ color: var(--noteloom-text);
1431
+ }
1432
+
1433
+ .be-modal-cancel:hover {
1434
+ background: var(--noteloom-bg-hover);
1435
+ }
1436
+
1437
+ .be-modal-save {
1438
+ background: var(--noteloom-accent);
1439
+ color: var(--noteloom-accent-text);
1440
+ }
1441
+
1442
+ .be-modal-save:hover {
1443
+ opacity: 0.9;
1444
+ }
1445
+
1446
+ .be-modal-save:disabled {
1447
+ opacity: 0.5;
1448
+ cursor: not-allowed;
1449
+ }
1450
+
1451
+ /* --- slash ("/") / emoji (":") / mention ("@") command menu --- */
1452
+
1453
+ .be-slash-menu {
1454
+ z-index: 1000;
1455
+ width: 260px;
1456
+ max-height: 320px;
1457
+ overflow-y: auto;
1458
+ background: var(--noteloom-bg);
1459
+ border: 1px solid var(--noteloom-border);
1460
+ border-radius: var(--noteloom-radius-lg);
1461
+ box-shadow: var(--noteloom-shadow);
1462
+ padding: 6px;
1463
+ }
1464
+
1465
+ .be-slash-menu-item {
1466
+ display: flex;
1467
+ align-items: center;
1468
+ gap: 10px;
1469
+ padding: 7px 8px;
1470
+ border-radius: var(--noteloom-radius-md);
1471
+ cursor: pointer;
1472
+ font-size: 0.9rem;
1473
+ color: var(--noteloom-text);
1474
+ }
1475
+
1476
+ .be-slash-menu-item-active,
1477
+ .be-slash-menu-item:hover {
1478
+ background: var(--noteloom-accent-soft);
1479
+ }
1480
+
1481
+ .be-slash-menu-item-icon {
1482
+ flex: none;
1483
+ display: flex;
1484
+ align-items: center;
1485
+ justify-content: center;
1486
+ width: 28px;
1487
+ height: 28px;
1488
+ border-radius: var(--noteloom-radius-sm);
1489
+ border: 1px solid var(--noteloom-border);
1490
+ color: var(--noteloom-text-muted);
1491
+ }
1492
+
1493
+ .be-slash-menu-item-label {
1494
+ flex: 1;
1495
+ overflow: hidden;
1496
+ text-overflow: ellipsis;
1497
+ white-space: nowrap;
1498
+ }
1499
+
1500
+ /* --- searchable Select (inline select/date/checkbox widgets, custom field types, table column type) --- */
1501
+
1502
+ .be-select {
1503
+ display: inline-flex;
1504
+ }
1505
+
1506
+ .be-select-trigger {
1507
+ display: inline-flex;
1508
+ align-items: center;
1509
+ gap: 6px;
1510
+ min-height: 28px;
1511
+ min-width: 6em;
1512
+ border: 1px solid var(--noteloom-border);
1513
+ border-radius: var(--noteloom-radius-md);
1514
+ background: var(--noteloom-bg);
1515
+ color: var(--noteloom-text);
1516
+ font: inherit;
1517
+ font-size: 0.88rem;
1518
+ padding: 4px 8px;
1519
+ cursor: pointer;
1520
+ }
1521
+
1522
+ .be-select-trigger:hover {
1523
+ border-color: var(--noteloom-accent);
1524
+ }
1525
+
1526
+ .be-select-trigger[aria-expanded='true'] {
1527
+ border-color: var(--noteloom-accent);
1528
+ box-shadow: 0 0 0 2px var(--noteloom-accent-soft);
1529
+ }
1530
+
1531
+ .be-select-trigger-tag {
1532
+ min-width: 0;
1533
+ min-height: 0;
1534
+ border: none;
1535
+ background: transparent;
1536
+ padding: 2px;
1537
+ border-radius: var(--noteloom-radius-sm);
1538
+ outline: none;
1539
+ border: none;
1540
+ }
1541
+
1542
+ .be-select-trigger-tag:hover {
1543
+ background: var(--noteloom-bg-hover);
1544
+ }
1545
+
1546
+ .be-select-trigger-tag[aria-expanded='true'] {
1547
+ background: var(--noteloom-bg-hover);
1548
+ box-shadow: none;
1549
+ }
1550
+
1551
+ .be-select-value-placeholder {
1552
+ color: var(--noteloom-text-faint);
1553
+ }
1554
+
1555
+ .be-select-tag {
1556
+ display: inline-flex;
1557
+ flex: none;
1558
+ max-width: 100%;
1559
+ padding: 2px 9px;
1560
+ border-radius: var(--noteloom-radius-sm);
1561
+ font-size: 0.82em;
1562
+ font-weight: 500;
1563
+ line-height: 1.4;
1564
+ /* Wraps rather than truncates — a fixed-width popover (see
1565
+ .be-select-popover) or table cell (see .be-table-cell) combined with
1566
+ nowrap+ellipsis let long option text silently overflow its box
1567
+ instead of actually being clipped; wrapping sidesteps that entirely. */
1568
+ white-space: normal;
1569
+ overflow-wrap: anywhere;
1570
+ word-break: break-word;
1571
+ }
1572
+
1573
+ .be-select-value {
1574
+ flex: 1;
1575
+ text-align: left;
1576
+ overflow: hidden;
1577
+ text-overflow: ellipsis;
1578
+ white-space: nowrap;
1579
+ }
1580
+
1581
+ .be-select-chevron {
1582
+ flex: none;
1583
+ color: var(--noteloom-text-faint);
1584
+ }
1585
+
1586
+ .be-select-popover {
1587
+ z-index: 1000;
1588
+ width: 224px;
1589
+ background: var(--noteloom-bg);
1590
+ border: 1px solid var(--noteloom-border);
1591
+ border-radius: var(--noteloom-radius-lg);
1592
+ box-shadow: var(--noteloom-shadow);
1593
+ overflow: hidden;
1594
+ }
1595
+
1596
+ .be-select-search {
1597
+ display: block;
1598
+ width: 100%;
1599
+ box-sizing: border-box;
1600
+ border: none;
1601
+ border-bottom: 1px solid var(--noteloom-border);
1602
+ background: transparent;
1603
+ color: inherit;
1604
+ padding: 10px 12px;
1605
+ font: inherit;
1606
+ font-size: 0.88rem;
1607
+ outline: none;
1608
+ }
1609
+
1610
+ .be-select-options {
1611
+ max-height: 220px;
1612
+ overflow-y: auto;
1613
+ overflow-x: hidden;
1614
+ padding: 4px;
1615
+ }
1616
+
1617
+ .be-select-option {
1618
+ display: flex;
1619
+ align-items: center;
1620
+ min-width: 0;
1621
+ padding: 7px 8px;
1622
+ border-radius: var(--noteloom-radius-sm);
1623
+ cursor: pointer;
1624
+ font-size: 0.88rem;
1625
+ color: var(--noteloom-text);
1626
+ }
1627
+
1628
+ /* A tag-variant option list (colored pills — e.g. Priority/Assignee) must
1629
+ read at the exact same size/weight as a plain default-variant list
1630
+ (Diagnosis) — only the colored-chip background should differ between
1631
+ them, not the typography. .be-select-tag's own font-size/weight (sized
1632
+ down for when it's squeezed into a trigger button) would otherwise make
1633
+ tag-variant options look smaller/bolder than plain ones for no reason. */
1634
+ .be-select-option .be-select-tag {
1635
+ font-size: inherit;
1636
+ font-weight: inherit;
1637
+ line-height: inherit;
1638
+ width: -webkit-fill-available;
1639
+ }
1640
+
1641
+ .be-select-option-active {
1642
+ background: var(--noteloom-accent-soft);
1643
+ }
1644
+
1645
+ .be-select-option-selected {
1646
+ font-weight: 600;
1647
+ }
1648
+
1649
+ .be-select-option-selected:not(.be-select-option-active) {
1650
+ background: var(--noteloom-bg-subtle);
1651
+ }
1652
+
1653
+ .be-select-option-selected .be-select-tag {
1654
+ font-weight: 500;
1655
+ box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.2);
1656
+ }
1657
+
1658
+ .be-select-empty {
1659
+ padding: 10px 12px;
1660
+ color: var(--noteloom-text-faint);
1661
+ font-size: 0.85rem;
1662
+ text-align: center;
1663
+ }
1664
+
1665
+ .be-select-error {
1666
+ color: var(--noteloom-danger);
1667
+ }
1668
+
1669
+ .be-select-manage-options {
1670
+ display: block;
1671
+ width: 100%;
1672
+ box-sizing: border-box;
1673
+ border: none;
1674
+ border-top: 1px solid var(--noteloom-border);
1675
+ background: transparent;
1676
+ padding: 9px 12px;
1677
+ font: inherit;
1678
+ font-size: 0.82rem;
1679
+ font-weight: 500;
1680
+ color: var(--noteloom-accent);
1681
+ text-align: left;
1682
+ cursor: pointer;
1683
+ }
1684
+
1685
+ .be-select-manage-options:hover {
1686
+ background: var(--noteloom-accent-soft);
1687
+ }
1688
+
1689
+ .be-inline-select,
1690
+ .be-inline-date,
1691
+ .be-inline-checkbox {
1692
+ display: inline-flex;
1693
+ align-items: center;
1694
+ vertical-align: middle;
1695
+ }
1696
+
1697
+ /* Inline chips sit in running text — match the surrounding line's own font
1698
+ size instead of the smaller size used for the Select component elsewhere
1699
+ (menus, table column type dropdown), where a compact UI size is right. */
1700
+ .be-inline-select .be-select-trigger {
1701
+ min-height: 0;
1702
+ font-size: 1em;
1703
+ padding: 1px 8px;
1704
+ }
1705
+
1706
+ .be-inline-select .be-select-tag {
1707
+ font-size: 0.92em;
1708
+ }
1709
+
1710
+ /* A mention reads as highlighted text sitting inline in the paragraph, not
1711
+ a bulky standalone pill/button — minimal padding, small radius, no extra
1712
+ chrome from the trigger button wrapping it. */
1713
+ .be-inline-select .be-select-trigger-mention {
1714
+ padding: 0 !important;
1715
+ border-radius: 3px;
1716
+ }
1717
+
1718
+ /* A mention chip always uses this one fixed color, not each option's own
1719
+ tag color — matches Notion/Slack/GitHub's "@mentions are one consistent
1720
+ color" convention rather than a per-person palette. */
1721
+ .be-select-tag-mention {
1722
+ background: var(--noteloom-accent-soft);
1723
+ color: var(--noteloom-accent);
1724
+ font-weight: 500;
1725
+ padding: 0 3px;
1726
+ border-radius: 3px;
1727
+ line-height: inherit;
1728
+ }
1729
+
1730
+ .be-inline-date input[type='date'] {
1731
+ border: 1px solid var(--noteloom-border);
1732
+ border-radius: var(--noteloom-radius-md);
1733
+ background: var(--noteloom-bg);
1734
+ color: inherit;
1735
+ padding: 4px 8px;
1736
+ font: inherit;
1737
+ font-size: 0.88rem;
1738
+ }
1739
+
1740
+ .be-inline-checkbox {
1741
+ gap: 6px;
1742
+ }
1743
+
1744
+ .be-inline-checkbox-input {
1745
+ flex: none;
1746
+ width: 16px;
1747
+ height: 16px;
1748
+ margin: 0;
1749
+ accent-color: var(--noteloom-accent);
1750
+ cursor: pointer;
1751
+ }
1752
+
1753
+ .be-inline-checkbox-label {
1754
+ min-width: 0;
1755
+ flex: 1;
1756
+ border: 1px solid var(--noteloom-border);
1757
+ border-radius: var(--noteloom-radius-sm);
1758
+ background: transparent;
1759
+ color: inherit;
1760
+ font: inherit;
1761
+ padding: 2px 8px;
1762
+ outline: none;
1763
+ }
1764
+
1765
+ .be-inline-checkbox-label:focus {
1766
+ border-color: var(--noteloom-accent);
1767
+ }
1768
+
1769
+ /* In a table cell (checkbox column), the browser's default text-input
1770
+ width (~170px+) is wider than most columns, forcing the input — and with
1771
+ it, the whole table — past the cell's own bounds. Constraining the
1772
+ inline-flex row to the cell's actual width lets the label's flex:1 +
1773
+ min-width:0 (above) do their job and shrink the input to fit instead. */
1774
+ .be-table-cell .be-inline-checkbox {
1775
+ display: flex;
1776
+ width: 100%;
1777
+ }
1778
+
1779
+ .be-inline-checkbox-label::placeholder {
1780
+ color: var(--noteloom-text-faint);
1781
+ }
1782
+
1783
+ /* --- floating (selection) format toolbar --- */
1784
+
1785
+ .be-floating-toolbar {
1786
+ display: flex;
1787
+ align-items: center;
1788
+ gap: 2px;
1789
+ background: var(--noteloom-text);
1790
+ border-radius: var(--noteloom-radius-md);
1791
+ padding: 4px;
1792
+ box-shadow: var(--noteloom-shadow);
1793
+ z-index: 1000;
1794
+ }
1795
+
1796
+ .be-floating-toolbar-btn {
1797
+ border: none;
1798
+ background: transparent;
1799
+ color: rgba(255, 255, 255, 0.85);
1800
+ width: 30px;
1801
+ height: 30px;
1802
+ display: flex;
1803
+ align-items: center;
1804
+ justify-content: center;
1805
+ border-radius: var(--noteloom-radius-sm);
1806
+ cursor: pointer;
1807
+ }
1808
+
1809
+ .be-floating-toolbar-btn:hover {
1810
+ background: rgba(255, 255, 255, 0.14);
1811
+ }
1812
+
1813
+ .be-floating-toolbar-btn-active {
1814
+ background: var(--noteloom-accent);
1815
+ color: #fff;
1816
+ }
1817
+
1818
+ .be-floating-toolbar-divider {
1819
+ width: 1px;
1820
+ height: 20px;
1821
+ background: rgba(255, 255, 255, 0.2);
1822
+ margin: 0 4px;
1823
+ }
1824
+
1825
+ .be-floating-toolbar-picker-wrap {
1826
+ position: relative;
1827
+ }
1828
+
1829
+ .be-floating-toolbar-picker {
1830
+ position: absolute;
1831
+ top: 100%;
1832
+ left: 0;
1833
+ margin-top: 8px;
1834
+ display: flex;
1835
+ gap: 4px;
1836
+ background: var(--noteloom-bg);
1837
+ border-radius: var(--noteloom-radius-md);
1838
+ padding: 6px;
1839
+ box-shadow: var(--noteloom-shadow);
1840
+ }
1841
+
1842
+ .be-floating-toolbar-swatch {
1843
+ width: 22px;
1844
+ height: 22px;
1845
+ border-radius: 50%;
1846
+ border: 1px solid rgba(0, 0, 0, 0.1);
1847
+ cursor: pointer;
1848
+ }
1849
+
1850
+ /* --- link hover card (edit/remove an existing link mark) --- */
1851
+
1852
+ .be-link-hover-card {
1853
+ z-index: 1000;
1854
+ display: flex;
1855
+ align-items: center;
1856
+ gap: 2px;
1857
+ max-width: 320px;
1858
+ background: var(--noteloom-bg);
1859
+ border: 1px solid var(--noteloom-border);
1860
+ border-radius: var(--noteloom-radius-md);
1861
+ padding: 5px 6px 5px 10px;
1862
+ box-shadow: var(--noteloom-shadow);
1863
+ font-size: 0.85rem;
1864
+ }
1865
+
1866
+ .be-link-hover-card-url {
1867
+ flex: 1;
1868
+ min-width: 0;
1869
+ overflow: hidden;
1870
+ text-overflow: ellipsis;
1871
+ white-space: nowrap;
1872
+ color: var(--noteloom-accent);
1873
+ text-decoration: none;
1874
+ }
1875
+
1876
+ .be-link-hover-card-url:hover {
1877
+ text-decoration: underline;
1878
+ }
1879
+
1880
+ .be-link-hover-card-btn {
1881
+ flex: none;
1882
+ width: 24px;
1883
+ height: 24px;
1884
+ border: none;
1885
+ background: transparent;
1886
+ color: var(--noteloom-text-muted);
1887
+ display: flex;
1888
+ align-items: center;
1889
+ justify-content: center;
1890
+ border-radius: var(--noteloom-radius-sm);
1891
+ cursor: pointer;
1892
+ }
1893
+
1894
+ .be-link-hover-card-btn:hover {
1895
+ background: var(--noteloom-bg-hover);
1896
+ color: var(--noteloom-text);
1897
+ }