joplin-plugin-explorer 1.6.0 → 1.6.2

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 (6) hide show
  1. package/package.json +1 -1
  2. package/publish/index.js +1 -1
  3. package/publish/manifest.json +1 -1
  4. package/publish/plugin.jpl +0 -0
  5. package/publish/webview/panel.css +848 -846
  6. package/publish/webview/panel.js +1 -1
package/publish/webview/panel.css CHANGED
@@ -1,846 +1,848 @@
1
- html, body {
2
- height: 100%;
3
- margin: 0;
4
- padding: 0;
5
- overflow: hidden;
6
- }
7
-
8
- #notes-in-list-root {
9
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
10
- font-size: 13px;
11
- color: var(--joplin-color);
12
- background-color: var(--joplin-background-color);
13
- height: 100vh;
14
- display: flex;
15
- flex-direction: column;
16
- user-select: none;
17
- overflow: hidden;
18
- }
19
-
20
- /* Toolbar */
21
- .toolbar {
22
- display: flex;
23
- gap: 4px;
24
- padding: 6px 8px;
25
- border-bottom: 1px solid var(--joplin-divider-color, #ddd);
26
- align-items: center;
27
- flex-shrink: 0;
28
- }
29
-
30
- .toolbar button {
31
- background: var(--joplin-background-color3, #f0f0f0);
32
- border: 1px solid var(--joplin-divider-color, #ccc);
33
- border-radius: 4px;
34
- padding: 4px 8px;
35
- cursor: pointer;
36
- color: var(--joplin-color);
37
- font-size: 12px;
38
- white-space: nowrap;
39
- flex-shrink: 0;
40
- line-height: 1.2;
41
- }
42
-
43
- .toolbar button:hover {
44
- background: var(--joplin-background-color-hover3, #e0e0e0);
45
- }
46
-
47
- .toolbar button:active {
48
- opacity: 0.7;
49
- }
50
-
51
- #btn-sort {
52
- min-width: 76px;
53
- text-align: center;
54
- }
55
-
56
- /* Search bar */
57
- .search-bar {
58
- padding: 4px 8px;
59
- border-bottom: 1px solid var(--joplin-divider-color, #ddd);
60
- flex-shrink: 0;
61
- }
62
-
63
- #search-input {
64
- width: 100%;
65
- box-sizing: border-box;
66
- padding: 5px 8px;
67
- border: 1px solid var(--joplin-divider-color, #ccc);
68
- border-radius: 4px;
69
- background: var(--joplin-background-color, #fff);
70
- color: var(--joplin-color);
71
- font-size: 12px;
72
- outline: none;
73
- }
74
-
75
- #search-input:focus {
76
- border-color: var(--joplin-color2, #4a9cf5);
77
- }
78
-
79
- /* Tree container */
80
- #tree-container {
81
- flex: 1;
82
- overflow-y: scroll;
83
- padding: 4px 0;
84
- }
85
-
86
- #tree-container::-webkit-scrollbar {
87
- width: 8px;
88
- }
89
-
90
- #tree-container::-webkit-scrollbar-track {
91
- background: transparent;
92
- }
93
-
94
- #tree-container::-webkit-scrollbar-thumb {
95
- background: var(--joplin-color-faded, #888);
96
- border-radius: 4px;
97
- }
98
-
99
- #tree-container::-webkit-scrollbar-thumb:hover {
100
- background: var(--joplin-color, #555);
101
- }
102
-
103
- /* Tree items */
104
- .tree-item {
105
- display: flex;
106
- align-items: center;
107
- padding: 3px 8px;
108
- cursor: pointer;
109
- gap: 5px;
110
- border-radius: 3px;
111
- margin: 1px 4px;
112
- min-height: 24px;
113
- }
114
-
115
- .tree-item:hover {
116
- background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
117
- }
118
-
119
- .tree-item.note.selected {
120
- background: var(--joplin-selected-color, rgba(74, 156, 245, 0.2));
121
- }
122
-
123
- /* Toggle arrow */
124
- .toggle {
125
- width: 14px;
126
- text-align: center;
127
- font-size: 9px;
128
- flex-shrink: 0;
129
- color: var(--joplin-color-faded, #888);
130
- transition: transform 0.15s;
131
- }
132
-
133
- /* Icons */
134
- .icon {
135
- flex-shrink: 0;
136
- font-size: 14px;
137
- width: 18px;
138
- text-align: center;
139
- }
140
-
141
- .custom-icon {
142
- display: block;
143
- width: 16px;
144
- height: 16px;
145
- object-fit: contain;
146
- margin: 0 auto;
147
- }
148
-
149
- /* Label */
150
- .label {
151
- flex: 1;
152
- overflow: hidden;
153
- text-overflow: ellipsis;
154
- white-space: nowrap;
155
- }
156
-
157
- /* Note count badge */
158
- .count {
159
- color: var(--joplin-color-faded, #888);
160
- font-size: 10px;
161
- flex-shrink: 0;
162
- background: var(--joplin-background-color3, rgba(100,100,100,0.1));
163
- border-radius: 8px;
164
- padding: 0 5px;
165
- min-width: 16px;
166
- text-align: center;
167
- line-height: 16px;
168
- }
169
-
170
- /* Collapsed children */
171
- .children.collapsed {
172
- display: none;
173
- }
174
-
175
- /* Open/closed icon variants: both are in the DOM, the .collapsed class on
176
- the folder row / pinned header picks which one shows. This lets the
177
- webview toggle folders without a backend re-render. */
178
- .tree-item.folder.collapsed .icon-when-open { display: none; }
179
- .tree-item.folder:not(.collapsed) .icon-when-collapsed { display: none; }
180
- .pinned-section-header.collapsed .icon-when-open { display: none; }
181
- .pinned-section-header:not(.collapsed) .icon-when-collapsed { display: none; }
182
-
183
- /* Folder styling */
184
- .folder .label {
185
- font-weight: 600;
186
- }
187
-
188
- /* Note styling */
189
- .note .label {
190
- font-weight: normal;
191
- }
192
-
193
- .note .icon {
194
- font-size: 12px;
195
- }
196
-
197
- /* Bottom bar (sync) */
198
- .bottom-bar {
199
- display: flex;
200
- padding: 6px 8px;
201
- border-top: 1px solid var(--joplin-divider-color, #ddd);
202
- flex-shrink: 0;
203
- }
204
-
205
- .bottom-bar button {
206
- flex: 1;
207
- background: var(--joplin-background-color3, #f0f0f0);
208
- border: 1px solid var(--joplin-divider-color, #ccc);
209
- border-radius: 4px;
210
- padding: 5px 10px;
211
- cursor: pointer;
212
- color: var(--joplin-color);
213
- font-size: 12px;
214
- }
215
-
216
- .bottom-bar button:hover {
217
- background: var(--joplin-background-color-hover3, #e0e0e0);
218
- }
219
-
220
- .bottom-bar button:active {
221
- opacity: 0.7;
222
- }
223
-
224
- .bottom-bar button:disabled,
225
- .bottom-bar button.syncing {
226
- opacity: 0.5;
227
- cursor: not-allowed;
228
- }
229
-
230
- .bottom-bar button.sync-done {
231
- color: #27ae60;
232
- opacity: 1;
233
- cursor: default;
234
- }
235
-
236
- .bottom-bar button.sync-error {
237
- color: #e74c3c;
238
- opacity: 1;
239
- cursor: default;
240
- }
241
-
242
- /* Context menu */
243
- .context-menu {
244
- position: fixed;
245
- background: var(--joplin-background-color, #fff);
246
- border: 1px solid var(--joplin-divider-color, #ccc);
247
- border-radius: 6px;
248
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
249
- padding: 4px 0;
250
- min-width: 160px;
251
- z-index: 9999;
252
- font-size: 12px;
253
- }
254
-
255
- .ctx-item {
256
- padding: 6px 14px;
257
- cursor: pointer;
258
- color: var(--joplin-color);
259
- }
260
-
261
- /* Fixed-width icon slot so emoji of different widths don't skew the labels */
262
- .ctx-icon {
263
- display: inline-block;
264
- width: 20px;
265
- text-align: center;
266
- margin-right: 5px;
267
- }
268
-
269
- .ctx-item:hover {
270
- background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
271
- }
272
-
273
- .ctx-danger {
274
- color: #e74c3c;
275
- }
276
-
277
- .ctx-danger:hover {
278
- background: rgba(231, 76, 60, 0.1);
279
- }
280
-
281
- /* Drill-in submenu (the narrow panel webview clips flyouts) */
282
- /* Drill row is flex so the arrow can sit vertically centered at the right. */
283
- .ctx-drill {
284
- display: flex;
285
- align-items: center;
286
- }
287
- /* True geometric triangle: a zero-size box whose left border forms a solid
288
- right-pointing arrow. No font glyph involved, so flex centering is exact —
289
- the glyph-baseline guesswork of ▶/▸ goes away entirely. */
290
- .ctx-sub-arrow {
291
- margin-left: auto;
292
- width: 0;
293
- height: 0;
294
- font-size: 0; /* hide the ▶ text content itself */
295
- color: transparent;
296
- border-top: 4px solid transparent;
297
- border-bottom: 4px solid transparent;
298
- border-left: 5px solid var(--joplin-color, #ccc);
299
- opacity: 0.7;
300
- box-sizing: content-box;
301
- }
302
- .ctx-back {
303
- color: var(--joplin-color-faded, #888);
304
- font-weight: 600;
305
- }
306
-
307
- .ctx-sep {
308
- height: 1px;
309
- background: var(--joplin-divider-color, #ddd);
310
- margin: 4px 0;
311
- }
312
-
313
- /* Hover preview tooltip */
314
- #note-preview {
315
- position: fixed;
316
- max-width: 260px;
317
- z-index: 9998;
318
- background: var(--joplin-background-color, #fff);
319
- border: 1px solid var(--joplin-divider-color, #ccc);
320
- border-radius: 6px;
321
- box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
322
- padding: 8px 10px;
323
- font-size: 12px;
324
- pointer-events: none;
325
- }
326
- .note-preview-title {
327
- font-weight: 600;
328
- margin-bottom: 2px;
329
- }
330
- .note-preview-meta {
331
- color: var(--joplin-color-faded, #888);
332
- font-size: 10px;
333
- margin-bottom: 5px;
334
- }
335
- .note-preview-body {
336
- color: var(--joplin-color, #ddd);
337
- opacity: 0.85;
338
- line-height: 1.45;
339
- word-break: break-word;
340
- }
341
-
342
- /* ---- unified section chrome ----
343
- * One soft line ABOVE each section header plus breathing room; bodies draw
344
- * no borders at all, so no state combination can double up lines. */
345
- .pinned-section-header,
346
- .smart-section-header,
347
- .trash-section-header,
348
- .tags-section-header {
349
- display: flex;
350
- align-items: center;
351
- padding: 4px 8px;
352
- gap: 5px;
353
- /* --sec-gap: sectionSpacing setting, set inline on the root (#9) */
354
- margin: var(--sec-gap, 5px) 4px 1px;
355
- min-height: 24px;
356
- padding: 3px 8px;
357
- border-top: 1px solid rgba(127, 127, 127, 0.22);
358
- border-radius: 0 0 3px 3px;
359
- cursor: pointer;
360
- user-select: none;
361
- color: var(--joplin-color-faded, #888);
362
- font-weight: 600;
363
- font-size: 13px;
364
- letter-spacing: 0.4px;
365
- }
366
- /* Arrow position mode (toggleArrowPosition setting, root data-arrow-pos).
367
- * "right": chevrons sit right after the text everywhere - section headers,
368
- * section rows AND notebook tree folders - with counts on the right edge.
369
- * "left": no overrides, everything keeps the classic leading arrow. */
370
- [data-arrow-pos="right"] .pinned-section-header .label,
371
- [data-arrow-pos="right"] .smart-section-header .label,
372
- [data-arrow-pos="right"] .trash-section-header .label,
373
- [data-arrow-pos="right"] .tags-section-header .label,
374
- [data-arrow-pos="right"] .tree-item.folder .label {
375
- flex: 0 1 auto;
376
- }
377
- [data-arrow-pos="right"] .pinned-section-header .toggle,
378
- [data-arrow-pos="right"] .smart-section-header .toggle,
379
- [data-arrow-pos="right"] .trash-section-header .toggle,
380
- [data-arrow-pos="right"] .tags-section-header .toggle,
381
- [data-arrow-pos="right"] .tree-item.folder .toggle {
382
- order: 3;
383
- width: auto;
384
- margin-left: 2px;
385
- font-size: 8px;
386
- opacity: 0.75;
387
- }
388
- [data-arrow-pos="right"] .pinned-section-header .count,
389
- [data-arrow-pos="right"] .smart-section-header .count,
390
- [data-arrow-pos="right"] .trash-section-header .count,
391
- [data-arrow-pos="right"] .tags-section-header .count,
392
- [data-arrow-pos="right"] .tree-item.folder .count {
393
- order: 4; /* after the chevron (order 3): text › ......... count */
394
- margin-left: auto;
395
- }
396
- .pinned-section-header .icon,
397
- .smart-section-header .icon,
398
- .trash-section-header .icon,
399
- .tags-section-header .icon {
400
- font-size: 12px;
401
- opacity: 0.85;
402
- }
403
- .pinned-section-header:hover,
404
- .smart-section-header:hover,
405
- .trash-section-header:hover,
406
- .tags-section-header:hover {
407
- background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12));
408
- }
409
- /* The notebook tree has no header row - its wrapper draws the same
410
- * section-opening line as the headers do. */
411
- #main-tree {
412
- margin: var(--sec-gap, 5px) 4px 1px;
413
- padding-top: 4px;
414
- border-top: 1px solid rgba(127, 127, 127, 0.22);
415
- }
416
- /* #main-tree already carries the 4px side margins; zero the rows' own so
417
- * tree counts land on the same right edge as section header counts
418
- * (they were 4px further left - measured, not eyeballed). */
419
- #main-tree .tree-item {
420
- margin-left: 0;
421
- margin-right: 0;
422
- }
423
-
424
- /* Expand animation: children fade/slide in when the USER toggles a section
425
- * or folder (JS adds .anim-expand only on interactive expands, so panel
426
- * re-renders don't flash). */
427
- @keyframes sectionExpand {
428
- from { opacity: 0; transform: translateY(-4px); }
429
- to { opacity: 1; transform: none; }
430
- }
431
- .anim-expand { animation: sectionExpand 0.16s ease-out; }
432
-
433
- /* Whichever section comes first sits right under the search bar's own
434
- * border - no extra line there. */
435
- #tree-container > div:first-child {
436
- border-top: none;
437
- margin-top: 0;
438
- padding-top: 4px;
439
- }
440
-
441
- .pinned-section-body.collapsed {
442
- display: none;
443
- }
444
-
445
- .pinned-item {
446
- padding-left: 26px !important;
447
- }
448
-
449
- /* (Section rows are .tree-item.folder too - covered by the arrow-position
450
- * rules above.) */
451
-
452
- /* ---- tags section (tags as folders) ---- */
453
- .tags-section-body.collapsed { display: none; }
454
- /* Smart folders sit right under the pinned body, whose border-bottom
455
- * already draws the divider - a border-top here doubled the line. The
456
- * section closes with its own bottom divider before the tree instead. */
457
- .smart-section-body.collapsed { display: none; }
458
- /* Empty smart folder: keeps its folder shape (arrow included) but dimmed,
459
- * and clicking it does nothing (no children container exists). */
460
- .smart-folder.smart-empty { opacity: 0.45; }
461
- .smart-folder.smart-empty:hover { background: none; cursor: default; }
462
- .smart-children.collapsed { display: none; }
463
- .trash-children.collapsed { display: none; }
464
- /* Rows swept out of view when an ancestor trash folder is collapsed */
465
- .trash-hidden { display: none; }
466
- /* Rows carry inline padding (depth-based); containers only need hide/show */
467
- .trash-folder-children.collapsed { display: none; }
468
- .trash-note .label { opacity: 0.75; }
469
- .tag-folder { padding-left: 26px !important; }
470
- .tag-children { }
471
- .tag-children.collapsed { display: none; }
472
- .tag-children .tree-item.note { padding-left: 44px !important; }
473
- .tag-empty {
474
- padding: 2px 8px 2px 44px;
475
- color: var(--joplin-color-faded, #888);
476
- font-size: 11px;
477
- }
478
-
479
- /* Empty drop zone — sticky at bottom of scroll viewport */
480
- .drop-zone-empty {
481
- position: sticky;
482
- bottom: 0;
483
- height: 32px;
484
- flex-shrink: 0;
485
- opacity: 0;
486
- pointer-events: none;
487
- transition: opacity 0.15s;
488
- }
489
-
490
- /* Only show during drag (activated by JS class on tree-container) */
491
- #tree-container.dragging-active .drop-zone-empty {
492
- opacity: 1;
493
- pointer-events: auto;
494
- border: 2px dashed var(--joplin-color2, #4a9cf5);
495
- border-radius: 6px;
496
- margin: 4px 8px;
497
- text-align: center;
498
- line-height: 28px;
499
- font-size: 11px;
500
- color: var(--joplin-color2, #4a9cf5);
501
- /* Solid panel base under the blue tint - the zone floats (sticky) above
502
- * tree rows, so a translucent-only background let them bleed through. */
503
- background: linear-gradient(rgba(74, 156, 245, 0.15), rgba(74, 156, 245, 0.15)),
504
- var(--joplin-background-color, #1e1e1e);
505
- box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
506
- z-index: 10;
507
- }
508
-
509
- /* Temporary drop target when the pinned section is empty (#13): sticky so
510
- * it stays visible however far the tree is scrolled (same pattern as the
511
- * drop-zone-empty bar). */
512
- #pinned-drop-ph {
513
- position: sticky;
514
- top: 0;
515
- z-index: 10;
516
- justify-content: center;
517
- border: 2px dashed var(--joplin-color2, #4a9cf5);
518
- border-radius: 6px;
519
- margin: 4px 8px;
520
- padding: 6px 8px;
521
- color: var(--joplin-color2, #4a9cf5);
522
- font-size: 12px;
523
- background: linear-gradient(rgba(74, 156, 245, 0.15), rgba(74, 156, 245, 0.15)),
524
- var(--joplin-background-color, #1e1e1e);
525
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
526
- }
527
-
528
- /* Pinned section accepts drops during drag — outline doesn't affect layout */
529
- #tree-container.dragging-active .pinned-section-header {
530
- outline: 2px dashed var(--joplin-color2, #4a9cf5);
531
- outline-offset: -2px;
532
- }
533
-
534
- /* Drag & Drop */
535
- .tree-item.dragging {
536
- opacity: 0.35;
537
- filter: grayscale(30%);
538
- }
539
-
540
- .tree-item.drop-target {
541
- background: var(--joplin-selected-color, rgba(74, 156, 245, 0.28));
542
- outline: 2px solid var(--joplin-color2, #4a9cf5);
543
- outline-offset: -2px;
544
- border-radius: 4px;
545
- box-shadow: 0 0 0 2px rgba(74, 156, 245, 0.15);
546
- }
547
-
548
- /* Horizontal insertion bar (above/below) — position:relative only when active */
549
- .tree-item.drop-above,
550
- .tree-item.drop-below {
551
- position: relative;
552
- }
553
-
554
- .tree-item.drop-above::before,
555
- .tree-item.drop-below::before {
556
- content: '';
557
- position: absolute;
558
- left: 4px;
559
- right: 4px;
560
- height: 3px;
561
- background: var(--joplin-color2, #4a9cf5);
562
- border-radius: 2px;
563
- box-shadow: 0 0 4px rgba(74, 156, 245, 0.6);
564
- pointer-events: none;
565
- z-index: 5;
566
- }
567
-
568
- .tree-item.drop-above::before {
569
- top: -2px;
570
- }
571
-
572
- .tree-item.drop-below::before {
573
- bottom: -2px;
574
- }
575
-
576
- /* Dropping into empty area -> create new notebook */
577
- #tree-container.drop-empty {
578
- box-shadow: inset 0 0 0 2px var(--joplin-color2, #4a9cf5);
579
- background: rgba(74, 156, 245, 0.06);
580
- }
581
-
582
-
583
- #search-results {
584
- flex: 1;
585
- overflow-y: scroll;
586
- padding: 4px 0;
587
- }
588
-
589
- #search-results::-webkit-scrollbar {
590
- width: 8px;
591
- }
592
-
593
- #search-results::-webkit-scrollbar-track {
594
- background: transparent;
595
- }
596
-
597
- #search-results::-webkit-scrollbar-thumb {
598
- background: var(--joplin-color-faded, #888);
599
- border-radius: 4px;
600
- }
601
-
602
- /* Search results */
603
- .search-status {
604
- padding: 8px 12px;
605
- font-size: 11px;
606
- color: var(--joplin-color-faded, #888);
607
- border-bottom: 1px solid var(--joplin-divider-color, #eee);
608
- }
609
-
610
- .search-result-item {
611
- display: flex;
612
- align-items: flex-start;
613
- padding: 8px 10px;
614
- gap: 8px;
615
- min-height: auto;
616
- margin: 0; /* override .tree-item margin for note items in search results */
617
- border-radius: 0;
618
- }
619
-
620
- .search-result-item .icon {
621
- flex-shrink: 0;
622
- font-size: 12px;
623
- width: 18px;
624
- text-align: center;
625
- line-height: 16.8px; /* match .search-result-title 12px * 1.4 */
626
- }
627
-
628
- .search-result-content {
629
- flex: 1;
630
- min-width: 0;
631
- overflow: hidden;
632
- }
633
-
634
- .search-result-title {
635
- font-weight: 600;
636
- font-size: 12px;
637
- line-height: 1.4;
638
- white-space: nowrap;
639
- overflow: hidden;
640
- text-overflow: ellipsis;
641
- }
642
-
643
- .search-result-folder {
644
- font-size: 10px;
645
- color: var(--joplin-color-faded, #999);
646
- margin-top: 1px;
647
- }
648
-
649
- .search-result-snippet {
650
- font-size: 11px;
651
- color: var(--joplin-color-faded, #777);
652
- margin-top: 3px;
653
- line-height: 1.4;
654
- display: -webkit-box;
655
- -webkit-line-clamp: 2;
656
- -webkit-box-orient: vertical;
657
- overflow: hidden;
658
- word-break: break-all;
659
- }
660
-
661
- /* Search section headers */
662
- .search-section-header {
663
- padding: 6px 10px;
664
- font-size: 11px;
665
- font-weight: 700;
666
- color: var(--joplin-color-faded, #888);
667
- background: var(--joplin-background-color3, rgba(100, 100, 100, 0.06));
668
- border-bottom: 1px solid var(--joplin-divider-color, #eee);
669
- text-transform: uppercase;
670
- letter-spacing: 0.5px;
671
- cursor: pointer;
672
- user-select: none;
673
- }
674
-
675
- .search-section-header:hover {
676
- background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12));
677
- }
678
-
679
- .section-toggle {
680
- display: inline-block;
681
- font-size: 9px;
682
- width: 12px;
683
- text-align: center;
684
- transition: transform 0.15s;
685
- }
686
-
687
- .search-section-body.collapsed {
688
- display: none;
689
- }
690
-
691
- /* Tag items in search results */
692
- .search-tag-item {
693
- cursor: pointer;
694
- }
695
-
696
- .search-tag-item:hover {
697
- background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
698
- }
699
-
700
- .tag-expand-arrow {
701
- flex-shrink: 0;
702
- font-size: 9px;
703
- color: var(--joplin-color-faded, #888);
704
- transition: transform 0.15s;
705
- margin-right: 4px;
706
- }
707
-
708
- .tag-expand-arrow.expanded {
709
- transform: rotate(90deg);
710
- }
711
-
712
- .tag-notes-container {
713
- padding-left: 16px;
714
- border-left: 2px solid var(--joplin-divider-color, #eee);
715
- margin-left: 18px;
716
- }
717
-
718
- /* Folder items in search results */
719
- .search-folder-item {
720
- cursor: pointer;
721
- }
722
-
723
- .search-folder-item:hover {
724
- background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
725
- }
726
-
727
- /* Flash highlight when locating a folder from search */
728
- @keyframes locate-pulse {
729
- 0% { background: rgba(74, 156, 245, 0.5); }
730
- 100% { background: transparent; }
731
- }
732
-
733
- .tree-item.locate-flash {
734
- animation: locate-pulse 1.5s ease-out;
735
- border-radius: 4px;
736
- }
737
-
738
- /* Inline input dialog */
739
- .inline-input-overlay {
740
- position: fixed;
741
- top: 0; left: 0; right: 0; bottom: 0;
742
- background: rgba(0, 0, 0, 0.3);
743
- display: flex;
744
- align-items: center;
745
- justify-content: center;
746
- z-index: 10000;
747
- }
748
-
749
- .inline-input-dialog {
750
- background: var(--joplin-background-color, #fff);
751
- border: 1px solid var(--joplin-divider-color, #ccc);
752
- border-radius: 8px;
753
- padding: 16px;
754
- min-width: 240px;
755
- max-width: 90%;
756
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
757
- }
758
-
759
- .inline-input-label {
760
- font-size: 12px;
761
- margin-bottom: 8px;
762
- color: var(--joplin-color);
763
- }
764
-
765
- .inline-input-field {
766
- width: 100%;
767
- box-sizing: border-box;
768
- padding: 6px 8px;
769
- border: 1px solid var(--joplin-divider-color, #ccc);
770
- border-radius: 4px;
771
- background: var(--joplin-background-color, #fff);
772
- color: var(--joplin-color);
773
- font-size: 13px;
774
- outline: none;
775
- }
776
-
777
- .inline-input-field:focus {
778
- border-color: var(--joplin-color2, #4a9cf5);
779
- }
780
-
781
- .inline-input-buttons {
782
- display: flex;
783
- gap: 8px;
784
- margin-top: 12px;
785
- justify-content: flex-end;
786
- }
787
-
788
- .inline-input-buttons button {
789
- padding: 5px 16px;
790
- border: 1px solid var(--joplin-divider-color, #ccc);
791
- border-radius: 4px;
792
- cursor: pointer;
793
- font-size: 12px;
794
- color: var(--joplin-color);
795
- background: var(--joplin-background-color3, #f0f0f0);
796
- }
797
-
798
- .inline-input-ok {
799
- background: #1a73e8 !important;
800
- color: #fff !important;
801
- border-color: #1a73e8 !important;
802
- }
803
-
804
- .inline-input-buttons button:hover {
805
- opacity: 0.85;
806
- }
807
-
808
- mark.search-highlight {
809
- background: rgba(255, 213, 0, 0.4);
810
- color: inherit;
811
- padding: 0 1px;
812
- border-radius: 2px;
813
- }
814
-
815
- /* ---- Note-row badges: checkbox progress pie + published link ---- */
816
- /* Hug the badges to the title text instead of the row's right edge. */
817
- .tree-item.note .label { flex: 0 1 auto; }
818
- .todo-pie, .shared-badge {
819
- flex-shrink: 0;
820
- display: inline-flex;
821
- align-items: center;
822
- }
823
- .todo-pie svg, .shared-badge svg { display: block; }
824
- /* Same box metrics as .count (min-width 16 + 5px side padding) so the
825
- pie centers exactly where count digits center. */
826
- .todo-pie {
827
- color: var(--joplin-color-faded, #888);
828
- margin-left: auto;
829
- min-width: 16px;
830
- padding: 0 5px;
831
- justify-content: center;
832
- }
833
- .todo-pie .pie-ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.55; }
834
- .todo-pie .pie-fill { fill: currentColor; opacity: 0.8; }
835
- .shared-badge {
836
- color: var(--joplin-color-faded, #999);
837
- opacity: 0.75;
838
- cursor: pointer;
839
- padding: 2px;
840
- border-radius: 3px;
841
- }
842
- .shared-badge:hover {
843
- opacity: 1;
844
- color: inherit;
845
- background: rgba(127, 127, 127, 0.25);
846
- }
1
+ html, body {
2
+ height: 100%;
3
+ margin: 0;
4
+ padding: 0;
5
+ overflow: hidden;
6
+ }
7
+
8
+ #notes-in-list-root {
9
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
10
+ font-size: 13px;
11
+ color: var(--joplin-color);
12
+ background-color: var(--joplin-background-color);
13
+ height: 100vh;
14
+ display: flex;
15
+ flex-direction: column;
16
+ user-select: none;
17
+ overflow: hidden;
18
+ }
19
+
20
+ /* Toolbar */
21
+ .toolbar {
22
+ display: flex;
23
+ gap: 4px;
24
+ padding: 6px 8px;
25
+ border-bottom: 1px solid var(--joplin-divider-color, #ddd);
26
+ align-items: center;
27
+ flex-shrink: 0;
28
+ }
29
+
30
+ .toolbar button {
31
+ background: var(--joplin-background-color3, #f0f0f0);
32
+ border: 1px solid var(--joplin-divider-color, #ccc);
33
+ border-radius: 4px;
34
+ padding: 4px 8px;
35
+ cursor: pointer;
36
+ color: var(--joplin-color);
37
+ font-size: 12px;
38
+ white-space: nowrap;
39
+ flex-shrink: 0;
40
+ line-height: 1.2;
41
+ }
42
+
43
+ .toolbar button:hover {
44
+ background: var(--joplin-background-color-hover3, #e0e0e0);
45
+ }
46
+
47
+ .toolbar button:active {
48
+ opacity: 0.7;
49
+ }
50
+
51
+ #btn-sort {
52
+ min-width: 76px;
53
+ text-align: center;
54
+ }
55
+
56
+ /* Search bar */
57
+ .search-bar {
58
+ padding: 4px 8px;
59
+ border-bottom: 1px solid var(--joplin-divider-color, #ddd);
60
+ flex-shrink: 0;
61
+ }
62
+
63
+ #search-input {
64
+ width: 100%;
65
+ box-sizing: border-box;
66
+ padding: 5px 8px;
67
+ border: 1px solid var(--joplin-divider-color, #ccc);
68
+ border-radius: 4px;
69
+ background: var(--joplin-background-color, #fff);
70
+ color: var(--joplin-color);
71
+ font-size: 12px;
72
+ outline: none;
73
+ }
74
+
75
+ #search-input:focus {
76
+ border-color: var(--joplin-url-color, #4a9cf5);
77
+ box-shadow: 0 0 0 2px var(--joplin-selected-color, rgba(74, 156, 245, 0.2));
78
+ }
79
+
80
+ /* Tree container */
81
+ #tree-container {
82
+ flex: 1;
83
+ overflow-y: scroll;
84
+ padding: 4px 0;
85
+ }
86
+
87
+ #tree-container::-webkit-scrollbar {
88
+ width: 8px;
89
+ }
90
+
91
+ #tree-container::-webkit-scrollbar-track {
92
+ background: transparent;
93
+ }
94
+
95
+ #tree-container::-webkit-scrollbar-thumb {
96
+ background: var(--joplin-color-faded, #888);
97
+ border-radius: 4px;
98
+ }
99
+
100
+ #tree-container::-webkit-scrollbar-thumb:hover {
101
+ background: var(--joplin-color, #555);
102
+ }
103
+
104
+ /* Tree items */
105
+ .tree-item {
106
+ display: flex;
107
+ align-items: center;
108
+ padding: 3px 8px;
109
+ cursor: pointer;
110
+ gap: 5px;
111
+ border-radius: 3px;
112
+ margin: 1px 4px;
113
+ min-height: 24px;
114
+ }
115
+
116
+ .tree-item:hover {
117
+ background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
118
+ }
119
+
120
+ .tree-item.note.selected {
121
+ background: var(--joplin-selected-color, rgba(74, 156, 245, 0.2));
122
+ }
123
+
124
+ /* Toggle arrow */
125
+ .toggle {
126
+ width: 14px;
127
+ text-align: center;
128
+ font-size: 9px;
129
+ flex-shrink: 0;
130
+ color: var(--joplin-color-faded, #888);
131
+ transition: transform 0.15s;
132
+ }
133
+
134
+ /* Icons */
135
+ .icon {
136
+ flex-shrink: 0;
137
+ font-size: 14px;
138
+ width: 18px;
139
+ text-align: center;
140
+ }
141
+
142
+ .custom-icon {
143
+ display: block;
144
+ width: 16px;
145
+ height: 16px;
146
+ object-fit: contain;
147
+ margin: 0 auto;
148
+ }
149
+
150
+ /* Label */
151
+ .label {
152
+ flex: 1;
153
+ overflow: hidden;
154
+ text-overflow: ellipsis;
155
+ white-space: nowrap;
156
+ }
157
+
158
+ /* Note count badge */
159
+ .count {
160
+ color: var(--joplin-color-faded, #888);
161
+ font-size: 10px;
162
+ flex-shrink: 0;
163
+ background: var(--joplin-background-color3, rgba(100,100,100,0.1));
164
+ border-radius: 8px;
165
+ padding: 0 5px;
166
+ min-width: 16px;
167
+ text-align: center;
168
+ line-height: 16px;
169
+ }
170
+
171
+ /* Collapsed children */
172
+ .children.collapsed {
173
+ display: none;
174
+ }
175
+
176
+ /* Open/closed icon variants: both are in the DOM, the .collapsed class on
177
+ the folder row / pinned header picks which one shows. This lets the
178
+ webview toggle folders without a backend re-render. */
179
+ .tree-item.folder.collapsed .icon-when-open { display: none; }
180
+ .tree-item.folder:not(.collapsed) .icon-when-collapsed { display: none; }
181
+ .pinned-section-header.collapsed .icon-when-open { display: none; }
182
+ .pinned-section-header:not(.collapsed) .icon-when-collapsed { display: none; }
183
+
184
+ /* Folder styling */
185
+ .folder .label {
186
+ font-weight: 600;
187
+ }
188
+
189
+ /* Note styling */
190
+ .note .label {
191
+ font-weight: normal;
192
+ }
193
+
194
+ .note .icon {
195
+ font-size: 12px;
196
+ }
197
+
198
+ /* Bottom bar (sync) */
199
+ .bottom-bar {
200
+ display: flex;
201
+ padding: 6px 8px;
202
+ border-top: 1px solid var(--joplin-divider-color, #ddd);
203
+ flex-shrink: 0;
204
+ }
205
+
206
+ .bottom-bar button {
207
+ flex: 1;
208
+ background: var(--joplin-background-color3, #f0f0f0);
209
+ border: 1px solid var(--joplin-divider-color, #ccc);
210
+ border-radius: 4px;
211
+ padding: 5px 10px;
212
+ cursor: pointer;
213
+ color: var(--joplin-color);
214
+ font-size: 12px;
215
+ }
216
+
217
+ .bottom-bar button:hover {
218
+ background: var(--joplin-background-color-hover3, #e0e0e0);
219
+ }
220
+
221
+ .bottom-bar button:active {
222
+ opacity: 0.7;
223
+ }
224
+
225
+ .bottom-bar button:disabled,
226
+ .bottom-bar button.syncing {
227
+ opacity: 0.5;
228
+ cursor: not-allowed;
229
+ }
230
+
231
+ .bottom-bar button.sync-done {
232
+ color: #27ae60;
233
+ opacity: 1;
234
+ cursor: default;
235
+ }
236
+
237
+ .bottom-bar button.sync-error {
238
+ color: #e74c3c;
239
+ opacity: 1;
240
+ cursor: default;
241
+ }
242
+
243
+ /* Context menu */
244
+ .context-menu {
245
+ position: fixed;
246
+ background: var(--joplin-background-color, #fff);
247
+ border: 1px solid var(--joplin-divider-color, #ccc);
248
+ border-radius: 6px;
249
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
250
+ padding: 4px 0;
251
+ min-width: 160px;
252
+ z-index: 9999;
253
+ font-size: 12px;
254
+ }
255
+
256
+ .ctx-item {
257
+ padding: 6px 14px;
258
+ cursor: pointer;
259
+ color: var(--joplin-color);
260
+ }
261
+
262
+ /* Fixed-width icon slot so emoji of different widths don't skew the labels */
263
+ .ctx-icon {
264
+ display: inline-block;
265
+ width: 20px;
266
+ text-align: center;
267
+ margin-right: 5px;
268
+ }
269
+
270
+ .ctx-item:hover {
271
+ background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
272
+ }
273
+
274
+ .ctx-danger {
275
+ color: #e74c3c;
276
+ }
277
+
278
+ .ctx-danger:hover {
279
+ background: rgba(231, 76, 60, 0.1);
280
+ }
281
+
282
+ /* Drill-in submenu (the narrow panel webview clips flyouts) */
283
+ /* Drill row is flex so the arrow can sit vertically centered at the right. */
284
+ .ctx-drill {
285
+ display: flex;
286
+ align-items: center;
287
+ }
288
+ /* True geometric triangle: a zero-size box whose left border forms a solid
289
+ right-pointing arrow. No font glyph involved, so flex centering is exact —
290
+ the glyph-baseline guesswork of ▶/▸ goes away entirely. */
291
+ .ctx-sub-arrow {
292
+ margin-left: auto;
293
+ width: 0;
294
+ height: 0;
295
+ font-size: 0; /* hide the ▶ text content itself */
296
+ color: transparent;
297
+ border-top: 4px solid transparent;
298
+ border-bottom: 4px solid transparent;
299
+ border-left: 5px solid var(--joplin-color, #ccc);
300
+ opacity: 0.7;
301
+ box-sizing: content-box;
302
+ }
303
+ .ctx-back {
304
+ color: var(--joplin-color-faded, #888);
305
+ font-weight: 600;
306
+ }
307
+
308
+ .ctx-sep {
309
+ height: 1px;
310
+ background: var(--joplin-divider-color, #ddd);
311
+ margin: 4px 0;
312
+ }
313
+
314
+ /* Hover preview tooltip */
315
+ #note-preview {
316
+ position: fixed;
317
+ max-width: 260px;
318
+ z-index: 9998;
319
+ background: var(--joplin-background-color, #fff);
320
+ border: 1px solid var(--joplin-divider-color, #ccc);
321
+ border-radius: 6px;
322
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
323
+ padding: 8px 10px;
324
+ font-size: 12px;
325
+ pointer-events: none;
326
+ }
327
+ .note-preview-title {
328
+ font-weight: 600;
329
+ margin-bottom: 2px;
330
+ }
331
+ .note-preview-meta {
332
+ color: var(--joplin-color-faded, #888);
333
+ font-size: 10px;
334
+ margin-bottom: 5px;
335
+ }
336
+ .note-preview-body {
337
+ color: var(--joplin-color, #ddd);
338
+ opacity: 0.85;
339
+ line-height: 1.45;
340
+ word-break: break-word;
341
+ }
342
+
343
+ /* ---- unified section chrome ----
344
+ * One soft line ABOVE each section header plus breathing room; bodies draw
345
+ * no borders at all, so no state combination can double up lines. */
346
+ .pinned-section-header,
347
+ .smart-section-header,
348
+ .trash-section-header,
349
+ .tags-section-header {
350
+ display: flex;
351
+ align-items: center;
352
+ padding: 4px 8px;
353
+ gap: 5px;
354
+ /* --sec-gap: sectionSpacing setting, set inline on the root (#9) */
355
+ margin: var(--sec-gap, 5px) 4px 1px;
356
+ min-height: 24px;
357
+ padding: 3px 8px;
358
+ border-top: 1px solid rgba(127, 127, 127, 0.22);
359
+ border-radius: 0 0 3px 3px;
360
+ cursor: pointer;
361
+ user-select: none;
362
+ color: var(--joplin-color-faded, #888);
363
+ font-weight: 600;
364
+ font-size: 13px;
365
+ letter-spacing: 0.4px;
366
+ }
367
+ /* Arrow position mode (toggleArrowPosition setting, root data-arrow-pos).
368
+ * "right": chevrons sit right after the text everywhere - section headers,
369
+ * section rows AND notebook tree folders - with counts on the right edge.
370
+ * "left": no overrides, everything keeps the classic leading arrow. */
371
+ [data-arrow-pos="right"] .pinned-section-header .label,
372
+ [data-arrow-pos="right"] .smart-section-header .label,
373
+ [data-arrow-pos="right"] .trash-section-header .label,
374
+ [data-arrow-pos="right"] .tags-section-header .label,
375
+ [data-arrow-pos="right"] .tree-item.folder .label {
376
+ flex: 0 1 auto;
377
+ }
378
+ [data-arrow-pos="right"] .pinned-section-header .toggle,
379
+ [data-arrow-pos="right"] .smart-section-header .toggle,
380
+ [data-arrow-pos="right"] .trash-section-header .toggle,
381
+ [data-arrow-pos="right"] .tags-section-header .toggle,
382
+ [data-arrow-pos="right"] .tree-item.folder .toggle {
383
+ order: 3;
384
+ width: auto;
385
+ margin-left: 2px;
386
+ font-size: 8px;
387
+ opacity: 0.75;
388
+ }
389
+ [data-arrow-pos="right"] .pinned-section-header .count,
390
+ [data-arrow-pos="right"] .smart-section-header .count,
391
+ [data-arrow-pos="right"] .trash-section-header .count,
392
+ [data-arrow-pos="right"] .tags-section-header .count,
393
+ [data-arrow-pos="right"] .tree-item.folder .count {
394
+ order: 4; /* after the chevron (order 3): text › ......... count */
395
+ margin-left: auto;
396
+ }
397
+ .pinned-section-header .icon,
398
+ .smart-section-header .icon,
399
+ .trash-section-header .icon,
400
+ .tags-section-header .icon {
401
+ font-size: 12px;
402
+ opacity: 0.85;
403
+ }
404
+ .pinned-section-header:hover,
405
+ .smart-section-header:hover,
406
+ .trash-section-header:hover,
407
+ .tags-section-header:hover {
408
+ background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12));
409
+ }
410
+ /* The notebook tree has no header row - its wrapper draws the same
411
+ * section-opening line as the headers do. */
412
+ #main-tree {
413
+ margin: var(--sec-gap, 5px) 4px 1px;
414
+ padding-top: 4px;
415
+ border-top: 1px solid rgba(127, 127, 127, 0.22);
416
+ }
417
+ /* #main-tree already carries the 4px side margins; zero the rows' own so
418
+ * tree counts land on the same right edge as section header counts
419
+ * (they were 4px further left - measured, not eyeballed). */
420
+ #main-tree .tree-item {
421
+ margin-left: 0;
422
+ margin-right: 0;
423
+ }
424
+
425
+ /* Expand animation: children fade/slide in when the USER toggles a section
426
+ * or folder (JS adds .anim-expand only on interactive expands, so panel
427
+ * re-renders don't flash). */
428
+ @keyframes sectionExpand {
429
+ from { opacity: 0; transform: translateY(-4px); }
430
+ to { opacity: 1; transform: none; }
431
+ }
432
+ .anim-expand { animation: sectionExpand 0.16s ease-out; }
433
+
434
+ /* Whichever section comes first sits right under the search bar's own
435
+ * border - no extra line there. */
436
+ #tree-container > div:first-child {
437
+ border-top: none;
438
+ margin-top: 0;
439
+ padding-top: 4px;
440
+ }
441
+
442
+ .pinned-section-body.collapsed {
443
+ display: none;
444
+ }
445
+
446
+ .pinned-item {
447
+ padding-left: 26px !important;
448
+ }
449
+
450
+ /* (Section rows are .tree-item.folder too - covered by the arrow-position
451
+ * rules above.) */
452
+
453
+ /* ---- tags section (tags as folders) ---- */
454
+ .tags-section-body.collapsed { display: none; }
455
+ /* Smart folders sit right under the pinned body, whose border-bottom
456
+ * already draws the divider - a border-top here doubled the line. The
457
+ * section closes with its own bottom divider before the tree instead. */
458
+ .smart-section-body.collapsed { display: none; }
459
+ /* Empty smart folder: keeps its folder shape (arrow included) but dimmed,
460
+ * and clicking it does nothing (no children container exists). */
461
+ .smart-folder.smart-empty { opacity: 0.45; }
462
+ .smart-folder.smart-empty:hover { background: none; cursor: default; }
463
+ .smart-children.collapsed { display: none; }
464
+ .trash-children.collapsed { display: none; }
465
+ /* Rows swept out of view when an ancestor trash folder is collapsed */
466
+ .trash-hidden { display: none; }
467
+ /* Rows carry inline padding (depth-based); containers only need hide/show */
468
+ .trash-folder-children.collapsed { display: none; }
469
+ .trash-note .label { opacity: 0.75; }
470
+ .tag-folder { padding-left: 26px !important; }
471
+ .tag-children { }
472
+ .tag-children.collapsed { display: none; }
473
+ .tag-children .tree-item.note { padding-left: 44px !important; }
474
+ .tag-empty {
475
+ padding: 2px 8px 2px 44px;
476
+ color: var(--joplin-color-faded, #888);
477
+ font-size: 11px;
478
+ }
479
+
480
+ /* Empty drop zone — sticky at bottom of scroll viewport */
481
+ .drop-zone-empty {
482
+ position: sticky;
483
+ bottom: 0;
484
+ height: 32px;
485
+ flex-shrink: 0;
486
+ opacity: 0;
487
+ pointer-events: none;
488
+ transition: opacity 0.15s;
489
+ }
490
+
491
+ /* Only show during drag (activated by JS class on tree-container) */
492
+ #tree-container.dragging-active .drop-zone-empty {
493
+ opacity: 1;
494
+ pointer-events: auto;
495
+ border: 2px dashed var(--joplin-url-color, #4a9cf5);
496
+ border-radius: 6px;
497
+ margin: 4px 8px;
498
+ text-align: center;
499
+ line-height: 28px;
500
+ font-size: 11px;
501
+ color: var(--joplin-url-color, #4a9cf5);
502
+ /* Solid panel base under the blue tint - the zone floats (sticky) above
503
+ * tree rows, so a translucent-only background let them bleed through. */
504
+ background: linear-gradient(rgba(74, 156, 245, 0.15), rgba(74, 156, 245, 0.15)),
505
+ var(--joplin-background-color, #1e1e1e);
506
+ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
507
+ z-index: 10;
508
+ }
509
+
510
+ /* Temporary drop target when the pinned section is empty (#13): sticky so
511
+ * it stays visible however far the tree is scrolled (same pattern as the
512
+ * drop-zone-empty bar). */
513
+ #pinned-drop-ph {
514
+ position: sticky;
515
+ top: 0;
516
+ z-index: 10;
517
+ justify-content: center;
518
+ border: 2px dashed var(--joplin-url-color, #4a9cf5);
519
+ border-radius: 6px;
520
+ margin: 4px 8px;
521
+ padding: 6px 8px;
522
+ color: var(--joplin-url-color, #4a9cf5);
523
+ font-size: 12px;
524
+ background: linear-gradient(rgba(74, 156, 245, 0.15), rgba(74, 156, 245, 0.15)),
525
+ var(--joplin-background-color, #1e1e1e);
526
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
527
+ }
528
+
529
+ /* Pinned section accepts drops during drag — outline doesn't affect layout */
530
+ #tree-container.dragging-active .pinned-section-header {
531
+ outline: 2px dashed var(--joplin-url-color, #4a9cf5);
532
+ outline-offset: -2px;
533
+ }
534
+
535
+ /* Drag & Drop */
536
+ .tree-item.dragging {
537
+ opacity: 0.35;
538
+ filter: grayscale(30%);
539
+ }
540
+
541
+ .tree-item.drop-target {
542
+ background: var(--joplin-selected-color, rgba(74, 156, 245, 0.28));
543
+ outline: 2px solid var(--joplin-url-color, #4a9cf5);
544
+ outline-offset: -2px;
545
+ border-radius: 4px;
546
+ box-shadow: 0 0 0 2px rgba(74, 156, 245, 0.15);
547
+ }
548
+
549
+ /* Horizontal insertion bar (above/below) — position:relative only when active */
550
+ .tree-item.drop-above,
551
+ .tree-item.drop-below {
552
+ position: relative;
553
+ }
554
+
555
+ .tree-item.drop-above::before,
556
+ .tree-item.drop-below::before {
557
+ content: '';
558
+ position: absolute;
559
+ left: 4px;
560
+ right: 4px;
561
+ height: 3px;
562
+ background: var(--joplin-url-color, #4a9cf5);
563
+ border-radius: 2px;
564
+ box-shadow: 0 0 4px rgba(74, 156, 245, 0.6);
565
+ pointer-events: none;
566
+ z-index: 5;
567
+ }
568
+
569
+ .tree-item.drop-above::before {
570
+ top: -2px;
571
+ }
572
+
573
+ .tree-item.drop-below::before {
574
+ bottom: -2px;
575
+ }
576
+
577
+ /* Dropping into empty area -> create new notebook */
578
+ #tree-container.drop-empty {
579
+ box-shadow: inset 0 0 0 2px var(--joplin-url-color, #4a9cf5);
580
+ background: rgba(74, 156, 245, 0.06);
581
+ }
582
+
583
+
584
+ #search-results {
585
+ flex: 1;
586
+ overflow-y: scroll;
587
+ padding: 4px 0;
588
+ }
589
+
590
+ #search-results::-webkit-scrollbar {
591
+ width: 8px;
592
+ }
593
+
594
+ #search-results::-webkit-scrollbar-track {
595
+ background: transparent;
596
+ }
597
+
598
+ #search-results::-webkit-scrollbar-thumb {
599
+ background: var(--joplin-color-faded, #888);
600
+ border-radius: 4px;
601
+ }
602
+
603
+ /* Search results */
604
+ .search-status {
605
+ padding: 8px 12px;
606
+ font-size: 11px;
607
+ color: var(--joplin-color-faded, #888);
608
+ border-bottom: 1px solid var(--joplin-divider-color, #eee);
609
+ }
610
+
611
+ .search-result-item {
612
+ display: flex;
613
+ align-items: flex-start;
614
+ padding: 8px 10px;
615
+ gap: 8px;
616
+ min-height: auto;
617
+ margin: 0; /* override .tree-item margin for note items in search results */
618
+ border-radius: 0;
619
+ }
620
+
621
+ .search-result-item .icon {
622
+ flex-shrink: 0;
623
+ font-size: 12px;
624
+ width: 18px;
625
+ text-align: center;
626
+ line-height: 16.8px; /* match .search-result-title 12px * 1.4 */
627
+ }
628
+
629
+ .search-result-content {
630
+ flex: 1;
631
+ min-width: 0;
632
+ overflow: hidden;
633
+ }
634
+
635
+ .search-result-title {
636
+ font-weight: 600;
637
+ font-size: 12px;
638
+ line-height: 1.4;
639
+ white-space: nowrap;
640
+ overflow: hidden;
641
+ text-overflow: ellipsis;
642
+ }
643
+
644
+ .search-result-folder {
645
+ font-size: 10px;
646
+ color: var(--joplin-color-faded, #999);
647
+ margin-top: 1px;
648
+ }
649
+
650
+ .search-result-snippet {
651
+ font-size: 11px;
652
+ color: var(--joplin-color-faded, #777);
653
+ margin-top: 3px;
654
+ line-height: 1.4;
655
+ display: -webkit-box;
656
+ -webkit-line-clamp: 2;
657
+ -webkit-box-orient: vertical;
658
+ overflow: hidden;
659
+ word-break: break-all;
660
+ }
661
+
662
+ /* Search section headers */
663
+ .search-section-header {
664
+ padding: 6px 10px;
665
+ font-size: 11px;
666
+ font-weight: 700;
667
+ color: var(--joplin-color-faded, #888);
668
+ background: var(--joplin-background-color3, rgba(100, 100, 100, 0.06));
669
+ border-bottom: 1px solid var(--joplin-divider-color, #eee);
670
+ text-transform: uppercase;
671
+ letter-spacing: 0.5px;
672
+ cursor: pointer;
673
+ user-select: none;
674
+ }
675
+
676
+ .search-section-header:hover {
677
+ background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.12));
678
+ }
679
+
680
+ .section-toggle {
681
+ display: inline-block;
682
+ font-size: 9px;
683
+ width: 12px;
684
+ text-align: center;
685
+ transition: transform 0.15s;
686
+ }
687
+
688
+ .search-section-body.collapsed {
689
+ display: none;
690
+ }
691
+
692
+ /* Tag items in search results */
693
+ .search-tag-item {
694
+ cursor: pointer;
695
+ }
696
+
697
+ .search-tag-item:hover {
698
+ background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
699
+ }
700
+
701
+ .tag-expand-arrow {
702
+ flex-shrink: 0;
703
+ font-size: 9px;
704
+ color: var(--joplin-color-faded, #888);
705
+ transition: transform 0.15s;
706
+ margin-right: 4px;
707
+ }
708
+
709
+ .tag-expand-arrow.expanded {
710
+ transform: rotate(90deg);
711
+ }
712
+
713
+ .tag-notes-container {
714
+ padding-left: 16px;
715
+ border-left: 2px solid var(--joplin-divider-color, #eee);
716
+ margin-left: 18px;
717
+ }
718
+
719
+ /* Folder items in search results */
720
+ .search-folder-item {
721
+ cursor: pointer;
722
+ }
723
+
724
+ .search-folder-item:hover {
725
+ background: var(--joplin-background-color-hover3, rgba(100, 100, 100, 0.1));
726
+ }
727
+
728
+ /* Flash highlight when locating a folder from search */
729
+ @keyframes locate-pulse {
730
+ 0% { background: rgba(74, 156, 245, 0.5); }
731
+ 100% { background: transparent; }
732
+ }
733
+
734
+ .tree-item.locate-flash {
735
+ animation: locate-pulse 1.5s ease-out;
736
+ border-radius: 4px;
737
+ }
738
+
739
+ /* Inline input dialog */
740
+ .inline-input-overlay {
741
+ position: fixed;
742
+ top: 0; left: 0; right: 0; bottom: 0;
743
+ background: rgba(0, 0, 0, 0.3);
744
+ display: flex;
745
+ align-items: center;
746
+ justify-content: center;
747
+ z-index: 10000;
748
+ }
749
+
750
+ .inline-input-dialog {
751
+ background: var(--joplin-background-color, #fff);
752
+ border: 1px solid var(--joplin-divider-color, #ccc);
753
+ border-radius: 8px;
754
+ padding: 16px;
755
+ min-width: 240px;
756
+ max-width: 90%;
757
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
758
+ }
759
+
760
+ .inline-input-label {
761
+ font-size: 12px;
762
+ margin-bottom: 8px;
763
+ color: var(--joplin-color);
764
+ }
765
+
766
+ .inline-input-field {
767
+ width: 100%;
768
+ box-sizing: border-box;
769
+ padding: 6px 8px;
770
+ border: 1px solid var(--joplin-divider-color, #ccc);
771
+ border-radius: 4px;
772
+ background: var(--joplin-background-color, #fff);
773
+ color: var(--joplin-color);
774
+ font-size: 13px;
775
+ outline: none;
776
+ }
777
+
778
+ .inline-input-field:focus {
779
+ border-color: var(--joplin-url-color, #4a9cf5);
780
+ box-shadow: 0 0 0 2px var(--joplin-selected-color, rgba(74, 156, 245, 0.2));
781
+ }
782
+
783
+ .inline-input-buttons {
784
+ display: flex;
785
+ gap: 8px;
786
+ margin-top: 12px;
787
+ justify-content: flex-end;
788
+ }
789
+
790
+ .inline-input-buttons button {
791
+ padding: 5px 16px;
792
+ border: 1px solid var(--joplin-divider-color, #ccc);
793
+ border-radius: 4px;
794
+ cursor: pointer;
795
+ font-size: 12px;
796
+ color: var(--joplin-color);
797
+ background: var(--joplin-background-color3, #f0f0f0);
798
+ }
799
+
800
+ .inline-input-ok {
801
+ background: #1a73e8 !important;
802
+ color: #fff !important;
803
+ border-color: #1a73e8 !important;
804
+ }
805
+
806
+ .inline-input-buttons button:hover {
807
+ opacity: 0.85;
808
+ }
809
+
810
+ mark.search-highlight {
811
+ background: rgba(255, 213, 0, 0.4);
812
+ color: inherit;
813
+ padding: 0 1px;
814
+ border-radius: 2px;
815
+ }
816
+
817
+ /* ---- Note-row badges: checkbox progress pie + published link ---- */
818
+ /* Hug the badges to the title text instead of the row's right edge. */
819
+ .tree-item.note .label { flex: 0 1 auto; }
820
+ .todo-pie, .shared-badge {
821
+ flex-shrink: 0;
822
+ display: inline-flex;
823
+ align-items: center;
824
+ }
825
+ .todo-pie svg, .shared-badge svg { display: block; }
826
+ /* Same box metrics as .count (min-width 16 + 5px side padding) so the
827
+ pie centers exactly where count digits center. */
828
+ .todo-pie {
829
+ color: var(--joplin-color-faded, #888);
830
+ margin-left: auto;
831
+ min-width: 16px;
832
+ padding: 0 5px;
833
+ justify-content: center;
834
+ }
835
+ .todo-pie .pie-ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.55; }
836
+ .todo-pie .pie-fill { fill: currentColor; opacity: 0.8; }
837
+ .shared-badge {
838
+ color: var(--joplin-color-faded, #999);
839
+ opacity: 0.75;
840
+ cursor: pointer;
841
+ padding: 2px;
842
+ border-radius: 3px;
843
+ }
844
+ .shared-badge:hover {
845
+ opacity: 1;
846
+ color: inherit;
847
+ background: rgba(127, 127, 127, 0.25);
848
+ }