@open-file-viewer/core 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/style.css ADDED
@@ -0,0 +1,2482 @@
1
+ .ofv-root {
2
+ --ofv-bg: #f3f4f6;
3
+ --ofv-surface: #ffffff;
4
+ --ofv-surface-muted: #f8fafc;
5
+ --ofv-text: #111827;
6
+ --ofv-text-muted: #475569;
7
+ --ofv-border: #d1d5db;
8
+ --ofv-button-hover: #eef2f7;
9
+ --ofv-highlight: #fde68a;
10
+ box-sizing: border-box;
11
+ display: block;
12
+ width: 100%;
13
+ max-width: 100%;
14
+ min-width: 0;
15
+ min-height: 0;
16
+ overflow: hidden;
17
+ background: var(--ofv-bg);
18
+ color: var(--ofv-text);
19
+ border: 1px solid var(--ofv-border);
20
+ font-family:
21
+ Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
22
+ }
23
+
24
+ .ofv-theme-dark {
25
+ --ofv-bg: #111827;
26
+ --ofv-surface: #1f2937;
27
+ --ofv-surface-muted: #273449;
28
+ --ofv-text: #f9fafb;
29
+ --ofv-text-muted: #cbd5e1;
30
+ --ofv-border: #374151;
31
+ --ofv-button-hover: #334155;
32
+ --ofv-highlight: #92400e;
33
+ }
34
+
35
+ .ofv-root *,
36
+ .ofv-root *::before,
37
+ .ofv-root *::after {
38
+ box-sizing: border-box;
39
+ }
40
+
41
+ .ofv-root [hidden] {
42
+ display: none !important;
43
+ }
44
+
45
+ .ofv-host {
46
+ position: relative;
47
+ display: flex;
48
+ flex-direction: column;
49
+ width: 100%;
50
+ max-width: 100%;
51
+ height: 100%;
52
+ min-width: 0;
53
+ min-height: 160px;
54
+ overflow: hidden;
55
+ }
56
+
57
+ .ofv-viewport {
58
+ flex: 1 1 auto;
59
+ min-width: 0;
60
+ min-height: 0;
61
+ width: 100%;
62
+ max-width: 100%;
63
+ overflow: auto;
64
+ background: var(--ofv-bg);
65
+ color: var(--ofv-text);
66
+ }
67
+
68
+ .ofv-toolbar {
69
+ display: flex;
70
+ flex: 0 0 auto;
71
+ flex-wrap: wrap;
72
+ align-items: center;
73
+ gap: 8px;
74
+ min-width: 0;
75
+ min-height: 42px;
76
+ padding: 6px 8px;
77
+ border-bottom: 1px solid var(--ofv-border);
78
+ background: var(--ofv-surface);
79
+ color: var(--ofv-text);
80
+ }
81
+
82
+ .ofv-toolbar button,
83
+ .ofv-toolbar input {
84
+ max-width: 100%;
85
+ min-height: 30px;
86
+ border: 1px solid var(--ofv-border);
87
+ border-radius: 6px;
88
+ padding: 0 10px;
89
+ background: var(--ofv-surface-muted);
90
+ color: var(--ofv-text);
91
+ font: inherit;
92
+ }
93
+
94
+ .ofv-toolbar button {
95
+ flex: 0 1 auto;
96
+ min-width: 0;
97
+ cursor: pointer;
98
+ overflow: hidden;
99
+ text-overflow: ellipsis;
100
+ white-space: nowrap;
101
+ }
102
+
103
+ .ofv-toolbar button:hover {
104
+ background: var(--ofv-button-hover);
105
+ }
106
+
107
+ .ofv-toolbar button:disabled {
108
+ cursor: not-allowed;
109
+ opacity: 0.5;
110
+ }
111
+
112
+ .ofv-toolbar button:focus-visible,
113
+ .ofv-image-controls button:focus-visible,
114
+ .ofv-tabs button:focus-visible,
115
+ .ofv-code-action:focus-visible {
116
+ outline: 2px solid #2563eb;
117
+ outline-offset: 2px;
118
+ }
119
+
120
+ .ofv-toolbar-queue {
121
+ flex: 0 0 auto;
122
+ min-width: 42px;
123
+ color: var(--ofv-text-muted);
124
+ font-size: 13px;
125
+ text-align: center;
126
+ }
127
+
128
+ .ofv-toolbar-search {
129
+ display: flex;
130
+ flex: 1 1 180px;
131
+ align-items: center;
132
+ gap: 6px;
133
+ margin-left: auto;
134
+ min-width: 0;
135
+ }
136
+
137
+ .ofv-toolbar-search input {
138
+ flex: 1 1 120px;
139
+ width: min(160px, 100%);
140
+ min-width: 0;
141
+ }
142
+
143
+ .ofv-toolbar-search-count {
144
+ flex: 0 0 auto;
145
+ min-width: 24px;
146
+ color: var(--ofv-text-muted);
147
+ font-size: 13px;
148
+ }
149
+
150
+ .ofv-search-match {
151
+ border-radius: 2px;
152
+ background: var(--ofv-highlight);
153
+ color: inherit;
154
+ }
155
+
156
+ .ofv-print-frame {
157
+ position: fixed;
158
+ right: 0;
159
+ bottom: 0;
160
+ width: 0;
161
+ height: 0;
162
+ border: 0;
163
+ visibility: hidden;
164
+ }
165
+
166
+ .ofv-center {
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ }
171
+
172
+ .ofv-status {
173
+ position: absolute;
174
+ z-index: 2;
175
+ inset: 12px auto auto 12px;
176
+ max-width: calc(100% - 24px);
177
+ padding: 8px 10px;
178
+ border-radius: 6px;
179
+ background: rgba(17, 24, 39, 0.82);
180
+ color: #fff;
181
+ font-size: 13px;
182
+ }
183
+
184
+ .ofv-media {
185
+ display: block;
186
+ width: 100%;
187
+ height: 100%;
188
+ max-width: 100%;
189
+ max-height: 100%;
190
+ }
191
+
192
+ .ofv-image-viewer {
193
+ display: flex;
194
+ flex-direction: column;
195
+ width: 100%;
196
+ max-width: 100%;
197
+ height: 100%;
198
+ min-width: 0;
199
+ min-height: 0;
200
+ background: var(--ofv-bg);
201
+ }
202
+
203
+ .ofv-image-controls {
204
+ display: flex;
205
+ flex: 0 0 auto;
206
+ flex-wrap: wrap;
207
+ align-items: center;
208
+ gap: 8px;
209
+ min-width: 0;
210
+ min-height: 40px;
211
+ padding: 6px 8px;
212
+ border-bottom: 1px solid var(--ofv-border);
213
+ background: var(--ofv-surface);
214
+ color: var(--ofv-text);
215
+ }
216
+
217
+ .ofv-image-controls button {
218
+ flex: 0 1 auto;
219
+ max-width: 100%;
220
+ min-width: 0;
221
+ min-height: 28px;
222
+ border: 1px solid var(--ofv-border);
223
+ border-radius: 6px;
224
+ padding: 0 10px;
225
+ background: var(--ofv-surface-muted);
226
+ color: var(--ofv-text);
227
+ font: inherit;
228
+ cursor: pointer;
229
+ overflow: hidden;
230
+ text-overflow: ellipsis;
231
+ white-space: nowrap;
232
+ }
233
+
234
+ .ofv-image-controls button:hover {
235
+ background: var(--ofv-button-hover);
236
+ }
237
+
238
+ .ofv-image-zoom {
239
+ flex: 0 0 auto;
240
+ min-width: 48px;
241
+ color: var(--ofv-text-muted);
242
+ font-size: 13px;
243
+ text-align: center;
244
+ }
245
+
246
+ .ofv-image-stage {
247
+ display: flex;
248
+ flex: 1 1 auto;
249
+ align-items: center;
250
+ justify-content: center;
251
+ min-height: 0;
252
+ min-width: 0;
253
+ overflow: hidden;
254
+ cursor: grab;
255
+ touch-action: none;
256
+ }
257
+
258
+ .ofv-image-stage.is-dragging {
259
+ cursor: grabbing;
260
+ }
261
+
262
+ .ofv-image-content {
263
+ transform-origin: center;
264
+ transition: transform 120ms ease;
265
+ will-change: transform;
266
+ user-select: none;
267
+ }
268
+
269
+ .ofv-image-stage.is-dragging .ofv-image-content {
270
+ transition: none;
271
+ }
272
+
273
+ .ofv-image-info {
274
+ display: flex;
275
+ flex: 0 0 auto;
276
+ flex-wrap: wrap;
277
+ gap: 8px 14px;
278
+ max-width: 100%;
279
+ min-width: 0;
280
+ padding: 8px 10px;
281
+ border-top: 1px solid var(--ofv-border);
282
+ background: var(--ofv-surface);
283
+ color: var(--ofv-text-muted);
284
+ font-size: 12px;
285
+ }
286
+
287
+ .ofv-image-info-item {
288
+ display: inline-flex;
289
+ gap: 5px;
290
+ max-width: 100%;
291
+ min-width: 0;
292
+ overflow-wrap: anywhere;
293
+ }
294
+
295
+ .ofv-image-info-item strong {
296
+ color: var(--ofv-text);
297
+ font-weight: 600;
298
+ overflow-wrap: anywhere;
299
+ }
300
+
301
+ .ofv-text {
302
+ min-height: 100%;
303
+ margin: 0;
304
+ padding: 16px;
305
+ overflow: auto;
306
+ white-space: pre-wrap;
307
+ word-break: break-word;
308
+ font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
309
+ background: var(--ofv-surface);
310
+ color: var(--ofv-text);
311
+ }
312
+
313
+ .ofv-pdf-viewer {
314
+ display: flex;
315
+ flex-direction: column;
316
+ width: 100%;
317
+ max-width: 100%;
318
+ height: 100%;
319
+ min-width: 0;
320
+ min-height: 0;
321
+ background: #6b7280;
322
+ }
323
+
324
+ .ofv-pdf-summary {
325
+ display: flex;
326
+ flex: 0 0 auto;
327
+ flex-wrap: wrap;
328
+ gap: 8px 14px;
329
+ min-width: 0;
330
+ padding: 8px 12px;
331
+ border-bottom: 1px solid rgba(255, 255, 255, 0.18);
332
+ background: var(--ofv-surface);
333
+ color: var(--ofv-text-muted);
334
+ font-size: 12px;
335
+ }
336
+
337
+ .ofv-pdf-summary > span {
338
+ display: inline-flex;
339
+ gap: 5px;
340
+ min-width: 0;
341
+ }
342
+
343
+ .ofv-pdf-summary strong {
344
+ color: var(--ofv-text);
345
+ font-weight: 600;
346
+ overflow-wrap: anywhere;
347
+ }
348
+
349
+ .ofv-pdf {
350
+ flex: 1 1 auto;
351
+ width: 100%;
352
+ max-width: 100%;
353
+ min-width: 0;
354
+ min-height: 100%;
355
+ padding: 16px;
356
+ overflow: auto;
357
+ background: #6b7280;
358
+ }
359
+
360
+ .ofv-pdf-page {
361
+ display: block;
362
+ max-width: 100%;
363
+ height: auto;
364
+ margin: 0 auto 16px;
365
+ background: #fff;
366
+ box-shadow: 0 8px 24px rgba(17, 24, 39, 0.28);
367
+ }
368
+
369
+ .ofv-audio {
370
+ width: min(520px, calc(100% - 32px));
371
+ padding: 20px;
372
+ border-radius: 8px;
373
+ background: var(--ofv-surface);
374
+ color: var(--ofv-text);
375
+ box-shadow: 0 8px 24px rgba(17, 24, 39, 0.16);
376
+ }
377
+
378
+ .ofv-audio-title {
379
+ margin-bottom: 12px;
380
+ overflow: hidden;
381
+ text-overflow: ellipsis;
382
+ white-space: nowrap;
383
+ font-weight: 600;
384
+ }
385
+
386
+ .ofv-audio audio {
387
+ width: 100%;
388
+ }
389
+
390
+ .ofv-media-info {
391
+ display: flex;
392
+ flex-wrap: wrap;
393
+ gap: 8px 12px;
394
+ min-width: 0;
395
+ margin-top: 12px;
396
+ padding-top: 12px;
397
+ border-top: 1px solid var(--ofv-border);
398
+ color: var(--ofv-text-muted);
399
+ font-size: 12px;
400
+ }
401
+
402
+ .ofv-media-info-item {
403
+ display: inline-flex;
404
+ gap: 5px;
405
+ min-width: 0;
406
+ }
407
+
408
+ .ofv-media-info-item strong {
409
+ color: var(--ofv-text);
410
+ font-weight: 600;
411
+ overflow-wrap: anywhere;
412
+ }
413
+
414
+ .ofv-video-container {
415
+ display: flex;
416
+ flex-direction: column;
417
+ width: 100%;
418
+ max-width: 100%;
419
+ height: 100%;
420
+ min-width: 0;
421
+ min-height: 0;
422
+ background: #000;
423
+ }
424
+
425
+ .ofv-video-stage {
426
+ display: flex;
427
+ flex: 1 1 auto;
428
+ align-items: center;
429
+ justify-content: center;
430
+ min-width: 0;
431
+ min-height: 0;
432
+ position: relative;
433
+ }
434
+
435
+ .ofv-video-container .ofv-media-info {
436
+ margin-top: 0;
437
+ border-top-color: rgba(255, 255, 255, 0.16);
438
+ background: var(--ofv-surface);
439
+ }
440
+
441
+ .ofv-fallback {
442
+ width: min(420px, calc(100% - 32px));
443
+ max-width: 100%;
444
+ display: flex;
445
+ flex-direction: column;
446
+ gap: 10px;
447
+ min-width: 0;
448
+ padding: 20px;
449
+ border-radius: 8px;
450
+ background: var(--ofv-surface);
451
+ color: var(--ofv-text);
452
+ text-align: center;
453
+ box-shadow: 0 8px 24px rgba(17, 24, 39, 0.16);
454
+ }
455
+
456
+ .ofv-fallback span {
457
+ min-width: 0;
458
+ overflow-wrap: anywhere;
459
+ color: var(--ofv-text-muted);
460
+ }
461
+
462
+ .ofv-fallback-meta {
463
+ display: grid;
464
+ grid-template-columns: auto minmax(0, 1fr);
465
+ gap: 6px 10px;
466
+ margin: 0;
467
+ color: var(--ofv-text);
468
+ font-size: 12px;
469
+ line-height: 1.4;
470
+ text-align: left;
471
+ }
472
+
473
+ .ofv-fallback-meta dt {
474
+ margin: 0;
475
+ color: var(--ofv-text-muted);
476
+ font-weight: 500;
477
+ }
478
+
479
+ .ofv-fallback-meta dd {
480
+ min-width: 0;
481
+ margin: 0;
482
+ overflow-wrap: anywhere;
483
+ }
484
+
485
+ .ofv-fallback a {
486
+ color: #2563eb;
487
+ text-decoration: none;
488
+ font-weight: 600;
489
+ }
490
+
491
+ .ofv-panel {
492
+ width: 100%;
493
+ max-width: 100%;
494
+ min-width: 0;
495
+ min-height: 100%;
496
+ padding: 16px;
497
+ overflow: auto;
498
+ background: var(--ofv-surface-muted);
499
+ color: var(--ofv-text);
500
+ }
501
+
502
+ .ofv-section {
503
+ min-width: 0;
504
+ overflow-wrap: anywhere;
505
+ margin: 0 0 16px;
506
+ padding: 14px;
507
+ border: 1px solid var(--ofv-border);
508
+ border-radius: 8px;
509
+ background: var(--ofv-surface);
510
+ }
511
+
512
+ .ofv-section h3 {
513
+ margin: 0 0 12px;
514
+ font-size: 15px;
515
+ }
516
+
517
+ .ofv-section p {
518
+ margin: 0 0 10px;
519
+ line-height: 1.6;
520
+ }
521
+
522
+ .ofv-meta-row {
523
+ display: grid;
524
+ grid-template-columns: 96px minmax(0, 1fr);
525
+ gap: 8px;
526
+ padding: 6px 0;
527
+ border-bottom: 1px solid var(--ofv-border);
528
+ font-size: 13px;
529
+ }
530
+
531
+ .ofv-meta-row span {
532
+ color: var(--ofv-text-muted);
533
+ }
534
+
535
+ .ofv-meta-row strong {
536
+ overflow-wrap: anywhere;
537
+ }
538
+
539
+ .ofv-document {
540
+ overflow-wrap: anywhere;
541
+ line-height: 1.7;
542
+ }
543
+
544
+ .ofv-document img {
545
+ max-width: 100%;
546
+ height: auto;
547
+ }
548
+
549
+ .ofv-document-extra {
550
+ white-space: pre-wrap;
551
+ overflow-wrap: anywhere;
552
+ line-height: 1.6;
553
+ }
554
+
555
+ .ofv-office-binary-meta {
556
+ display: grid;
557
+ grid-template-columns: max-content minmax(0, 1fr);
558
+ gap: 6px 12px;
559
+ margin: 12px 0;
560
+ padding: 12px;
561
+ border: 1px solid var(--ofv-border);
562
+ border-radius: 6px;
563
+ background: var(--ofv-surface-muted);
564
+ font-size: 13px;
565
+ }
566
+
567
+ .ofv-office-binary-meta dt {
568
+ color: var(--ofv-text-muted);
569
+ font-weight: 600;
570
+ }
571
+
572
+ .ofv-office-binary-meta dd {
573
+ min-width: 0;
574
+ margin: 0;
575
+ overflow-wrap: anywhere;
576
+ }
577
+
578
+ .ofv-docx-document {
579
+ width: 100%;
580
+ max-width: 100%;
581
+ min-width: 0;
582
+ overflow: auto;
583
+ color: #111827;
584
+ }
585
+
586
+ .ofv-docx-document .ofv-docx-wrapper {
587
+ align-items: center;
588
+ box-sizing: border-box;
589
+ width: 100%;
590
+ max-width: 100%;
591
+ min-width: 0;
592
+ padding: 24px;
593
+ overflow: auto;
594
+ background: #e5e7eb;
595
+ }
596
+
597
+ .ofv-docx-document section.ofv-docx {
598
+ box-sizing: border-box;
599
+ max-width: 100%;
600
+ min-width: 0;
601
+ color: #111827;
602
+ overflow: auto;
603
+ overflow-wrap: anywhere;
604
+ }
605
+
606
+ .ofv-docx-document section.ofv-docx img,
607
+ .ofv-docx-document section.ofv-docx svg,
608
+ .ofv-docx-document section.ofv-docx canvas,
609
+ .ofv-docx-document section.ofv-docx video {
610
+ max-width: 100%;
611
+ height: auto;
612
+ }
613
+
614
+ .ofv-docx-document section.ofv-docx table {
615
+ max-width: 100%;
616
+ overflow-wrap: anywhere;
617
+ }
618
+
619
+ .ofv-docx-fallback-note {
620
+ margin: 0 0 12px;
621
+ padding: 8px 10px;
622
+ border: 1px solid var(--ofv-border);
623
+ border-radius: 6px;
624
+ background: var(--ofv-surface-muted);
625
+ color: var(--ofv-text-muted);
626
+ font-size: 13px;
627
+ }
628
+
629
+ .ofv-root.ofv-theme-dark .ofv-docx-document {
630
+ color-scheme: light;
631
+ }
632
+
633
+ .ofv-details {
634
+ margin-top: 12px;
635
+ }
636
+
637
+ .ofv-tabs {
638
+ display: flex;
639
+ flex-wrap: wrap;
640
+ min-width: 0;
641
+ gap: 8px;
642
+ margin-bottom: 12px;
643
+ }
644
+
645
+ .ofv-tabs button {
646
+ max-width: 100%;
647
+ min-width: 0;
648
+ min-height: 32px;
649
+ border: 1px solid var(--ofv-border);
650
+ border-radius: 6px;
651
+ padding: 0 10px;
652
+ background: var(--ofv-surface);
653
+ color: var(--ofv-text);
654
+ cursor: pointer;
655
+ overflow: hidden;
656
+ overflow-wrap: anywhere;
657
+ text-overflow: ellipsis;
658
+ }
659
+
660
+ .ofv-tabs button.is-active {
661
+ border-color: #2563eb;
662
+ background: #dbeafe;
663
+ color: #1e3a8a;
664
+ }
665
+
666
+ .ofv-root.ofv-theme-dark .ofv-tabs button.is-active {
667
+ border-color: #60a5fa;
668
+ background: #1e3a8a;
669
+ color: #eff6ff;
670
+ }
671
+
672
+ .ofv-sheet h3 {
673
+ margin: 0 0 10px;
674
+ overflow-wrap: anywhere;
675
+ }
676
+
677
+ .ofv-sheet-summary {
678
+ margin: 0 0 10px;
679
+ color: var(--ofv-text-muted);
680
+ font-size: 13px;
681
+ }
682
+
683
+ .ofv-office-package-note {
684
+ margin: 0;
685
+ padding: 10px 12px;
686
+ border: 1px solid var(--ofv-border);
687
+ border-radius: 6px;
688
+ background: var(--ofv-surface-muted);
689
+ color: var(--ofv-text);
690
+ font-size: 13px;
691
+ line-height: 1.55;
692
+ }
693
+
694
+ .ofv-iwork-meta {
695
+ display: grid;
696
+ gap: 10px;
697
+ margin: 12px 0 0;
698
+ }
699
+
700
+ .ofv-iwork-meta > strong {
701
+ font-size: 13px;
702
+ }
703
+
704
+ .ofv-iwork-meta-grid {
705
+ display: grid;
706
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
707
+ gap: 8px 16px;
708
+ }
709
+
710
+ .ofv-office-package-list {
711
+ display: grid;
712
+ gap: 4px;
713
+ max-height: 320px;
714
+ margin: 12px 0 0;
715
+ overflow: auto;
716
+ padding: 12px 12px 12px 30px;
717
+ border: 1px solid var(--ofv-border);
718
+ border-radius: 6px;
719
+ background: var(--ofv-surface);
720
+ font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
721
+ }
722
+
723
+ .ofv-sheet-window {
724
+ display: flex;
725
+ flex-wrap: wrap;
726
+ align-items: center;
727
+ gap: 8px;
728
+ max-width: 100%;
729
+ min-width: 0;
730
+ margin: 0 0 10px;
731
+ padding: 8px;
732
+ border: 1px solid var(--ofv-border);
733
+ border-radius: 6px;
734
+ background: var(--ofv-surface-muted);
735
+ }
736
+
737
+ .ofv-sheet-window-note {
738
+ flex: 1 1 260px;
739
+ min-width: 0;
740
+ color: var(--ofv-text-muted);
741
+ font-size: 13px;
742
+ line-height: 1.4;
743
+ overflow-wrap: anywhere;
744
+ }
745
+
746
+ .ofv-sheet-window button {
747
+ flex: 0 1 auto;
748
+ max-width: 100%;
749
+ min-width: 0;
750
+ min-height: 30px;
751
+ border: 1px solid var(--ofv-border);
752
+ border-radius: 6px;
753
+ padding: 0 10px;
754
+ background: var(--ofv-surface);
755
+ color: var(--ofv-text);
756
+ cursor: pointer;
757
+ font: inherit;
758
+ font-size: 12px;
759
+ overflow-wrap: anywhere;
760
+ }
761
+
762
+ .ofv-sheet-window button:hover {
763
+ background: var(--ofv-button-hover);
764
+ }
765
+
766
+ .ofv-sheet-window button:disabled {
767
+ cursor: not-allowed;
768
+ opacity: 0.55;
769
+ }
770
+
771
+ .ofv-table-scroll {
772
+ max-width: 100%;
773
+ max-height: min(680px, 72vh);
774
+ overflow: auto;
775
+ border: 1px solid var(--ofv-border);
776
+ background: var(--ofv-surface);
777
+ }
778
+
779
+ .ofv-table-scroll table {
780
+ border-collapse: collapse;
781
+ min-width: 100%;
782
+ }
783
+
784
+ .ofv-table-scroll td,
785
+ .ofv-table-scroll th {
786
+ max-width: min(420px, 80vw);
787
+ border: 1px solid var(--ofv-border);
788
+ padding: 6px 8px;
789
+ white-space: nowrap;
790
+ overflow: hidden;
791
+ text-overflow: ellipsis;
792
+ font-size: 13px;
793
+ }
794
+
795
+ .ofv-table-scroll tr:first-child > th,
796
+ .ofv-table-scroll tr:first-child > td {
797
+ position: sticky;
798
+ z-index: 2;
799
+ top: 0;
800
+ background: var(--ofv-surface-muted);
801
+ }
802
+
803
+ .ofv-table-scroll tr > th:first-child,
804
+ .ofv-table-scroll tr > td:first-child {
805
+ position: sticky;
806
+ z-index: 1;
807
+ left: 0;
808
+ background: var(--ofv-surface-muted);
809
+ }
810
+
811
+ .ofv-table-scroll tr:first-child > th:first-child,
812
+ .ofv-table-scroll tr:first-child > td:first-child {
813
+ z-index: 3;
814
+ }
815
+
816
+ .ofv-cell-formula {
817
+ background-image: linear-gradient(135deg, #f59e0b 0 8px, transparent 8px);
818
+ background-repeat: no-repeat;
819
+ }
820
+
821
+ .ofv-formula-list ul {
822
+ margin: 8px 0 0;
823
+ padding-left: 18px;
824
+ font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
825
+ }
826
+
827
+ .ofv-chart-grid {
828
+ display: grid;
829
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
830
+ gap: 12px;
831
+ }
832
+
833
+ .ofv-chart-card {
834
+ min-width: 0;
835
+ overflow: hidden;
836
+ border: 1px solid var(--ofv-border);
837
+ border-radius: 8px;
838
+ background: var(--ofv-surface);
839
+ }
840
+
841
+ .ofv-chart-card header {
842
+ display: grid;
843
+ gap: 4px;
844
+ padding: 12px 14px 0;
845
+ }
846
+
847
+ .ofv-chart-card h4 {
848
+ margin: 0;
849
+ overflow: hidden;
850
+ color: var(--ofv-text);
851
+ font-size: 14px;
852
+ line-height: 1.35;
853
+ text-overflow: ellipsis;
854
+ white-space: nowrap;
855
+ }
856
+
857
+ .ofv-chart-card header span {
858
+ color: var(--ofv-text-muted);
859
+ font-size: 12px;
860
+ }
861
+
862
+ .ofv-chart-svg {
863
+ display: block;
864
+ width: 100%;
865
+ height: auto;
866
+ min-height: 180px;
867
+ padding: 8px 10px;
868
+ }
869
+
870
+ .ofv-chart-axis {
871
+ stroke: var(--ofv-border);
872
+ stroke-width: 1.5;
873
+ }
874
+
875
+ .ofv-chart-label {
876
+ fill: var(--ofv-text-muted);
877
+ font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
878
+ }
879
+
880
+ .ofv-chart-data {
881
+ margin: 0;
882
+ padding: 0 14px 12px;
883
+ color: var(--ofv-text-muted);
884
+ font-size: 13px;
885
+ }
886
+
887
+ .ofv-chart-data ul {
888
+ margin: 8px 0 0;
889
+ padding-left: 18px;
890
+ }
891
+
892
+ .ofv-epub-meta {
893
+ display: grid;
894
+ gap: 8px;
895
+ min-width: 0;
896
+ max-width: 520px;
897
+ }
898
+
899
+ .ofv-epub-reader {
900
+ max-width: 100%;
901
+ max-height: min(760px, 74vh);
902
+ min-width: 0;
903
+ overflow: auto;
904
+ padding: 28px;
905
+ border: 1px solid var(--ofv-border);
906
+ border-radius: 8px;
907
+ background: var(--ofv-surface);
908
+ color: var(--ofv-text);
909
+ }
910
+
911
+ .ofv-epub-chapter {
912
+ max-width: 760px;
913
+ min-width: 0;
914
+ margin: 0 auto 36px;
915
+ padding-bottom: 28px;
916
+ border-bottom: 1px solid var(--ofv-border);
917
+ }
918
+
919
+ .ofv-epub-chapter:last-child {
920
+ margin-bottom: 0;
921
+ padding-bottom: 0;
922
+ border-bottom: 0;
923
+ }
924
+
925
+ .ofv-epub-chapter h3 {
926
+ margin: 0 0 18px;
927
+ font-size: 18px;
928
+ }
929
+
930
+ .ofv-epub-content {
931
+ font: 16px/1.75 Georgia, "Times New Roman", serif;
932
+ }
933
+
934
+ .ofv-epub-content p {
935
+ margin: 0 0 1em;
936
+ }
937
+
938
+ .ofv-epub-content img,
939
+ .ofv-epub-content svg {
940
+ max-width: 100%;
941
+ height: auto;
942
+ }
943
+
944
+ .ofv-epub-content a {
945
+ color: #2563eb;
946
+ }
947
+
948
+ .ofv-root.ofv-theme-dark .ofv-epub-content a {
949
+ color: #60a5fa;
950
+ }
951
+
952
+ .ofv-xps-meta {
953
+ display: grid;
954
+ gap: 8px;
955
+ max-width: 520px;
956
+ }
957
+
958
+ .ofv-xps-pages {
959
+ display: grid;
960
+ gap: 18px;
961
+ max-width: 100%;
962
+ max-height: min(760px, 74vh);
963
+ min-width: 0;
964
+ overflow: auto;
965
+ padding: 20px;
966
+ border: 1px solid var(--ofv-border);
967
+ border-radius: 8px;
968
+ background: var(--ofv-surface-muted);
969
+ }
970
+
971
+ .ofv-xps-page {
972
+ width: min(100%, 840px);
973
+ max-width: 840px;
974
+ min-width: 0;
975
+ margin: 0 auto;
976
+ padding: 22px;
977
+ border: 1px solid var(--ofv-border);
978
+ border-radius: 6px;
979
+ background: var(--ofv-surface);
980
+ box-shadow: var(--ofv-shadow);
981
+ }
982
+
983
+ .ofv-xps-page h4 {
984
+ margin: 0 0 4px;
985
+ font-size: 16px;
986
+ }
987
+
988
+ .ofv-xps-page > span {
989
+ display: block;
990
+ margin-bottom: 14px;
991
+ color: var(--ofv-text-muted);
992
+ font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
993
+ }
994
+
995
+ .ofv-xps-text p {
996
+ margin: 0 0 8px;
997
+ line-height: 1.7;
998
+ }
999
+
1000
+ .ofv-slide {
1001
+ min-width: 0;
1002
+ min-height: 160px;
1003
+ padding: 18px;
1004
+ border: 1px solid var(--ofv-border);
1005
+ border-radius: 8px;
1006
+ background: var(--ofv-surface);
1007
+ overflow-wrap: anywhere;
1008
+ }
1009
+
1010
+ .ofv-pptx-viewer {
1011
+ width: 100%;
1012
+ max-width: 100%;
1013
+ min-width: 0;
1014
+ min-height: 160px;
1015
+ overflow: auto;
1016
+ background: var(--ofv-bg);
1017
+ }
1018
+
1019
+ .ofv-pptx-viewer > div[data-slide-index] {
1020
+ box-sizing: border-box;
1021
+ max-width: 100%;
1022
+ min-width: 0;
1023
+ overflow: auto;
1024
+ overflow-wrap: anywhere;
1025
+ }
1026
+
1027
+ .ofv-presentation-summary {
1028
+ display: grid;
1029
+ min-width: 0;
1030
+ gap: 12px;
1031
+ }
1032
+
1033
+ .ofv-presentation-summary > p {
1034
+ display: grid;
1035
+ gap: 4px;
1036
+ margin: 0;
1037
+ padding: 10px 12px;
1038
+ border: 1px solid var(--ofv-border);
1039
+ border-radius: 6px;
1040
+ background: var(--ofv-surface-muted);
1041
+ }
1042
+
1043
+ .ofv-presentation-summary strong {
1044
+ color: var(--ofv-text);
1045
+ font-size: 13px;
1046
+ }
1047
+
1048
+ .ofv-presentation-summary span {
1049
+ color: var(--ofv-text-muted);
1050
+ font-size: 12px;
1051
+ line-height: 1.45;
1052
+ }
1053
+
1054
+ .ofv-presentation-slides {
1055
+ display: grid;
1056
+ gap: 8px;
1057
+ min-width: 0;
1058
+ margin: 0;
1059
+ padding: 0;
1060
+ list-style: none;
1061
+ }
1062
+
1063
+ .ofv-presentation-slides li {
1064
+ display: grid;
1065
+ gap: 4px;
1066
+ min-width: 0;
1067
+ padding: 10px 12px;
1068
+ border: 1px solid var(--ofv-border);
1069
+ border-radius: 6px;
1070
+ background: var(--ofv-surface);
1071
+ }
1072
+
1073
+ .ofv-presentation-slides p {
1074
+ margin: 0;
1075
+ overflow: hidden;
1076
+ color: var(--ofv-text-muted);
1077
+ font-size: 12px;
1078
+ line-height: 1.45;
1079
+ text-overflow: ellipsis;
1080
+ white-space: nowrap;
1081
+ }
1082
+
1083
+
1084
+
1085
+ .ofv-slide-image {
1086
+ margin: 12px 0 0;
1087
+ }
1088
+
1089
+ .ofv-slide-image > img {
1090
+ display: block;
1091
+ max-width: 100%;
1092
+ max-height: 360px;
1093
+ object-fit: contain;
1094
+ }
1095
+
1096
+ .ofv-slide-image figcaption {
1097
+ margin-top: 6px;
1098
+ color: var(--ofv-text-muted);
1099
+ font-size: 12px;
1100
+ }
1101
+
1102
+ .ofv-text-block {
1103
+ max-width: 100%;
1104
+ max-height: 520px;
1105
+ overflow: auto;
1106
+ margin: 0;
1107
+ padding: 12px;
1108
+ border-radius: 6px;
1109
+ background: #0f172a;
1110
+ color: #e5e7eb;
1111
+ white-space: pre-wrap;
1112
+ word-break: break-word;
1113
+ font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1114
+ }
1115
+
1116
+ .ofv-font-preview {
1117
+ display: grid;
1118
+ gap: 10px;
1119
+ margin: 14px 0;
1120
+ padding: 14px;
1121
+ border: 1px solid var(--ofv-border);
1122
+ border-radius: 8px;
1123
+ background: var(--ofv-surface-muted);
1124
+ }
1125
+
1126
+ .ofv-font-preview strong {
1127
+ font-size: 13px;
1128
+ }
1129
+
1130
+ .ofv-font-sample {
1131
+ font-size: 28px;
1132
+ line-height: 1.25;
1133
+ word-break: break-word;
1134
+ }
1135
+
1136
+ .ofv-font-pangram {
1137
+ color: var(--ofv-text-muted);
1138
+ font-size: 16px;
1139
+ line-height: 1.5;
1140
+ word-break: break-word;
1141
+ }
1142
+
1143
+ .ofv-font-status {
1144
+ color: var(--ofv-text-muted);
1145
+ font-size: 12px;
1146
+ }
1147
+
1148
+ .ofv-font-info {
1149
+ display: grid;
1150
+ gap: 12px;
1151
+ padding-top: 8px;
1152
+ border-top: 1px solid var(--ofv-border);
1153
+ }
1154
+
1155
+ .ofv-font-tables {
1156
+ max-width: 100%;
1157
+ overflow: auto;
1158
+ }
1159
+
1160
+ .ofv-font-tables strong {
1161
+ display: block;
1162
+ margin: 0 0 8px;
1163
+ }
1164
+
1165
+ .ofv-font-tables table {
1166
+ width: 100%;
1167
+ min-width: 640px;
1168
+ border-collapse: collapse;
1169
+ font-size: 13px;
1170
+ }
1171
+
1172
+ .ofv-font-tables th,
1173
+ .ofv-font-tables td {
1174
+ padding: 8px;
1175
+ border-bottom: 1px solid var(--ofv-border);
1176
+ text-align: left;
1177
+ vertical-align: top;
1178
+ }
1179
+
1180
+ .ofv-font-tables th {
1181
+ color: var(--ofv-text-muted);
1182
+ font-weight: 600;
1183
+ }
1184
+
1185
+ .ofv-font-tables td {
1186
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1187
+ }
1188
+
1189
+ .ofv-wasm-preview {
1190
+ display: grid;
1191
+ gap: 12px;
1192
+ margin: 14px 0;
1193
+ }
1194
+
1195
+ .ofv-wasm-summary {
1196
+ display: grid;
1197
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
1198
+ gap: 8px 16px;
1199
+ }
1200
+
1201
+ .ofv-wasm-sections {
1202
+ width: 100%;
1203
+ border-collapse: collapse;
1204
+ font-size: 13px;
1205
+ }
1206
+
1207
+ .ofv-wasm-sections th,
1208
+ .ofv-wasm-sections td {
1209
+ padding: 8px;
1210
+ border-bottom: 1px solid var(--ofv-border);
1211
+ text-align: left;
1212
+ vertical-align: top;
1213
+ }
1214
+
1215
+ .ofv-wasm-sections th {
1216
+ color: var(--ofv-text-muted);
1217
+ font-weight: 600;
1218
+ }
1219
+
1220
+ .ofv-wasm-error {
1221
+ color: #b91c1c;
1222
+ }
1223
+
1224
+ .ofv-wasm-list ul {
1225
+ margin: 8px 0 0;
1226
+ padding-left: 18px;
1227
+ font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1228
+ }
1229
+
1230
+ .ofv-psd-preview {
1231
+ display: grid;
1232
+ gap: 12px;
1233
+ margin: 14px 0;
1234
+ }
1235
+
1236
+ .ofv-psd-summary {
1237
+ display: grid;
1238
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
1239
+ gap: 8px 16px;
1240
+ }
1241
+
1242
+ .ofv-psd-error {
1243
+ color: #b91c1c;
1244
+ }
1245
+
1246
+ .ofv-sqlite-preview {
1247
+ display: grid;
1248
+ gap: 12px;
1249
+ margin: 14px 0;
1250
+ }
1251
+
1252
+ .ofv-sqlite-summary {
1253
+ display: grid;
1254
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
1255
+ gap: 8px 16px;
1256
+ }
1257
+
1258
+ .ofv-sqlite-schema {
1259
+ max-width: 100%;
1260
+ overflow: auto;
1261
+ }
1262
+
1263
+ .ofv-sqlite-schema strong {
1264
+ display: block;
1265
+ margin: 0 0 8px;
1266
+ }
1267
+
1268
+ .ofv-sqlite-schema table {
1269
+ width: 100%;
1270
+ min-width: 720px;
1271
+ border-collapse: collapse;
1272
+ font-size: 13px;
1273
+ }
1274
+
1275
+ .ofv-sqlite-schema th,
1276
+ .ofv-sqlite-schema td {
1277
+ padding: 8px;
1278
+ border-bottom: 1px solid var(--ofv-border);
1279
+ text-align: left;
1280
+ vertical-align: top;
1281
+ }
1282
+
1283
+ .ofv-sqlite-schema th {
1284
+ color: var(--ofv-text-muted);
1285
+ font-weight: 600;
1286
+ }
1287
+
1288
+ .ofv-sqlite-schema td:last-child {
1289
+ max-width: 420px;
1290
+ overflow-wrap: anywhere;
1291
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1292
+ }
1293
+
1294
+ .ofv-sqlite-error,
1295
+ .ofv-sqlite-empty {
1296
+ color: var(--ofv-text-muted);
1297
+ }
1298
+
1299
+ .ofv-data-preview {
1300
+ display: grid;
1301
+ gap: 12px;
1302
+ margin: 14px 0;
1303
+ }
1304
+
1305
+ .ofv-data-summary {
1306
+ display: grid;
1307
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
1308
+ gap: 8px 16px;
1309
+ }
1310
+
1311
+ .ofv-data-error,
1312
+ .ofv-data-note {
1313
+ color: var(--ofv-text-muted);
1314
+ }
1315
+
1316
+ .ofv-data-kv,
1317
+ .ofv-avro-schema {
1318
+ max-width: 100%;
1319
+ overflow: auto;
1320
+ }
1321
+
1322
+ .ofv-data-kv strong,
1323
+ .ofv-avro-schema > strong {
1324
+ display: block;
1325
+ margin: 0 0 8px;
1326
+ }
1327
+
1328
+ .ofv-data-kv table {
1329
+ width: 100%;
1330
+ min-width: 640px;
1331
+ border-collapse: collapse;
1332
+ font-size: 13px;
1333
+ }
1334
+
1335
+ .ofv-data-kv th,
1336
+ .ofv-data-kv td {
1337
+ padding: 8px;
1338
+ border-bottom: 1px solid var(--ofv-border);
1339
+ text-align: left;
1340
+ vertical-align: top;
1341
+ }
1342
+
1343
+ .ofv-data-kv th {
1344
+ width: 180px;
1345
+ color: var(--ofv-text-muted);
1346
+ font-weight: 600;
1347
+ }
1348
+
1349
+ .ofv-data-kv td {
1350
+ overflow-wrap: anywhere;
1351
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1352
+ }
1353
+
1354
+ .ofv-avro-schema ul {
1355
+ margin: 8px 0 0;
1356
+ padding-left: 18px;
1357
+ font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1358
+ }
1359
+
1360
+ .ofv-file-list {
1361
+ max-width: 100%;
1362
+ max-height: 520px;
1363
+ overflow: auto;
1364
+ margin: 12px 0 0;
1365
+ padding-left: 18px;
1366
+ font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1367
+ }
1368
+
1369
+ .ofv-svg-stage {
1370
+ display: block;
1371
+ width: 100%;
1372
+ max-width: 100%;
1373
+ min-width: 0;
1374
+ height: min(620px, 70vh);
1375
+ border: 1px solid var(--ofv-border);
1376
+ border-radius: 8px;
1377
+ background: var(--ofv-surface);
1378
+ color: var(--ofv-text);
1379
+ }
1380
+
1381
+ .ofv-drawing-summary {
1382
+ display: flex;
1383
+ flex-wrap: wrap;
1384
+ gap: 8px 14px;
1385
+ min-width: 0;
1386
+ margin: 0 0 12px;
1387
+ padding: 8px 10px;
1388
+ border: 1px solid var(--ofv-border);
1389
+ border-radius: 6px;
1390
+ background: var(--ofv-surface-muted);
1391
+ color: var(--ofv-text-muted);
1392
+ font-size: 12px;
1393
+ }
1394
+
1395
+ .ofv-drawing-summary > span {
1396
+ display: inline-flex;
1397
+ gap: 5px;
1398
+ min-width: 0;
1399
+ }
1400
+
1401
+ .ofv-drawing-summary strong {
1402
+ color: var(--ofv-text);
1403
+ font-weight: 600;
1404
+ overflow-wrap: anywhere;
1405
+ }
1406
+
1407
+ .ofv-cad-layers {
1408
+ display: flex;
1409
+ flex-wrap: wrap;
1410
+ align-items: center;
1411
+ gap: 8px;
1412
+ max-width: 100%;
1413
+ min-width: 0;
1414
+ margin: 0 0 12px;
1415
+ padding: 10px;
1416
+ border: 1px solid var(--ofv-border);
1417
+ border-radius: 8px;
1418
+ background: var(--ofv-surface-muted);
1419
+ font-size: 13px;
1420
+ }
1421
+
1422
+ .ofv-cad-layers strong {
1423
+ margin-right: 4px;
1424
+ }
1425
+
1426
+ .ofv-cad-layers label {
1427
+ display: inline-flex;
1428
+ align-items: center;
1429
+ gap: 6px;
1430
+ min-height: 28px;
1431
+ padding: 4px 8px;
1432
+ border: 1px solid var(--ofv-border);
1433
+ border-radius: 999px;
1434
+ background: var(--ofv-surface);
1435
+ color: var(--ofv-text-muted);
1436
+ cursor: pointer;
1437
+ }
1438
+
1439
+ .ofv-cad-layers input {
1440
+ margin: 0;
1441
+ }
1442
+
1443
+ .ofv-cad-summary {
1444
+ display: grid;
1445
+ gap: 8px;
1446
+ min-width: 0;
1447
+ max-width: 520px;
1448
+ margin: 12px 0;
1449
+ }
1450
+
1451
+ .ofv-cad-types ul {
1452
+ display: grid;
1453
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
1454
+ gap: 6px 14px;
1455
+ min-width: 0;
1456
+ margin: 8px 0 0;
1457
+ padding-left: 18px;
1458
+ font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1459
+ }
1460
+
1461
+ .ofv-cad-conversion {
1462
+ margin: 12px 0;
1463
+ padding: 10px 10px 10px 30px;
1464
+ border: 1px solid var(--ofv-border);
1465
+ border-radius: 8px;
1466
+ background: var(--ofv-surface-muted);
1467
+ color: var(--ofv-text);
1468
+ font-size: 13px;
1469
+ line-height: 1.6;
1470
+ }
1471
+
1472
+ .ofv-cad-conversion li + li {
1473
+ margin-top: 6px;
1474
+ }
1475
+
1476
+ .ofv-cad-binary-probe {
1477
+ margin-top: 12px;
1478
+ }
1479
+
1480
+ .ofv-cad-probe-list {
1481
+ display: grid;
1482
+ gap: 4px;
1483
+ margin: 10px 0;
1484
+ padding-left: 18px;
1485
+ color: var(--ofv-text-muted);
1486
+ font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1487
+ }
1488
+
1489
+ .ofv-cad-entities {
1490
+ margin-top: 12px;
1491
+ }
1492
+
1493
+ .ofv-ofd-pages {
1494
+ display: grid;
1495
+ gap: 18px;
1496
+ min-width: 0;
1497
+ margin: 12px 0;
1498
+ }
1499
+
1500
+ .ofv-ofd-summary {
1501
+ display: flex;
1502
+ flex-wrap: wrap;
1503
+ gap: 8px 14px;
1504
+ min-width: 0;
1505
+ margin: 0 0 12px;
1506
+ padding: 8px 10px;
1507
+ border: 1px solid var(--ofv-border);
1508
+ border-radius: 6px;
1509
+ background: var(--ofv-surface-muted);
1510
+ color: var(--ofv-text-muted);
1511
+ font-size: 12px;
1512
+ }
1513
+
1514
+ .ofv-ofd-summary > span {
1515
+ display: inline-flex;
1516
+ gap: 5px;
1517
+ min-width: 0;
1518
+ }
1519
+
1520
+ .ofv-ofd-summary strong {
1521
+ color: var(--ofv-text);
1522
+ font-weight: 600;
1523
+ overflow-wrap: anywhere;
1524
+ }
1525
+
1526
+ .ofv-ofd-page {
1527
+ margin: 0;
1528
+ }
1529
+
1530
+ .ofv-ofd-page svg {
1531
+ display: block;
1532
+ width: min(100%, 760px);
1533
+ max-width: 100%;
1534
+ max-height: 760px;
1535
+ border: 1px solid var(--ofv-border);
1536
+ border-radius: 6px;
1537
+ background: #fff;
1538
+ box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
1539
+ }
1540
+
1541
+ .ofv-ofd-page figcaption {
1542
+ margin-top: 8px;
1543
+ color: var(--ofv-text-muted);
1544
+ font-size: 12px;
1545
+ }
1546
+
1547
+ .ofv-model-stage {
1548
+ position: relative;
1549
+ width: 100%;
1550
+ max-width: 100%;
1551
+ height: 100%;
1552
+ min-width: 0;
1553
+ min-height: 360px;
1554
+ background: var(--ofv-bg);
1555
+ }
1556
+
1557
+ .ofv-model-stage canvas {
1558
+ display: block;
1559
+ width: 100%;
1560
+ height: 100%;
1561
+ }
1562
+
1563
+ .ofv-model-message {
1564
+ position: absolute;
1565
+ z-index: 1;
1566
+ top: 12px;
1567
+ left: 12px;
1568
+ max-width: min(520px, calc(100% - 24px));
1569
+ padding: 8px 10px;
1570
+ border: 1px solid var(--ofv-border);
1571
+ border-radius: 6px;
1572
+ background: color-mix(in srgb, var(--ofv-surface) 92%, transparent);
1573
+ color: var(--ofv-text);
1574
+ font-size: 13px;
1575
+ line-height: 1.5;
1576
+ }
1577
+
1578
+ .ofv-model-measure {
1579
+ position: absolute;
1580
+ z-index: 1;
1581
+ top: 12px;
1582
+ right: 12px;
1583
+ width: max-content;
1584
+ min-width: min(180px, calc(100% - 24px));
1585
+ max-width: min(260px, calc(100% - 24px));
1586
+ padding: 10px 12px;
1587
+ border: 1px solid var(--ofv-border);
1588
+ border-radius: 6px;
1589
+ background: color-mix(in srgb, var(--ofv-surface) 92%, transparent);
1590
+ color: var(--ofv-text);
1591
+ box-shadow: var(--ofv-shadow);
1592
+ }
1593
+
1594
+ .ofv-model-materials {
1595
+ position: absolute;
1596
+ z-index: 1;
1597
+ top: 190px;
1598
+ right: 12px;
1599
+ width: max-content;
1600
+ min-width: min(180px, calc(100% - 24px));
1601
+ max-width: min(260px, calc(100% - 24px));
1602
+ padding: 10px 12px;
1603
+ border: 1px solid var(--ofv-border);
1604
+ border-radius: 6px;
1605
+ background: color-mix(in srgb, var(--ofv-surface) 92%, transparent);
1606
+ color: var(--ofv-text);
1607
+ box-shadow: var(--ofv-shadow);
1608
+ }
1609
+
1610
+ .ofv-model-measure strong {
1611
+ display: block;
1612
+ margin-bottom: 8px;
1613
+ font-size: 13px;
1614
+ }
1615
+
1616
+ .ofv-model-materials strong {
1617
+ display: block;
1618
+ margin-bottom: 8px;
1619
+ font-size: 13px;
1620
+ }
1621
+
1622
+ .ofv-model-measure dl {
1623
+ display: grid;
1624
+ grid-template-columns: auto 1fr;
1625
+ gap: 5px 12px;
1626
+ margin: 0;
1627
+ font-size: 12px;
1628
+ line-height: 1.35;
1629
+ }
1630
+
1631
+ .ofv-model-materials dl {
1632
+ display: grid;
1633
+ grid-template-columns: auto minmax(0, 1fr);
1634
+ gap: 5px 12px;
1635
+ margin: 0;
1636
+ font-size: 12px;
1637
+ line-height: 1.35;
1638
+ }
1639
+
1640
+ .ofv-model-measure dt {
1641
+ color: var(--ofv-text-muted);
1642
+ }
1643
+
1644
+ .ofv-model-materials dt {
1645
+ color: var(--ofv-text-muted);
1646
+ }
1647
+
1648
+ .ofv-model-measure dd {
1649
+ margin: 0;
1650
+ text-align: right;
1651
+ font-variant-numeric: tabular-nums;
1652
+ }
1653
+
1654
+ .ofv-model-materials dd {
1655
+ min-width: 0;
1656
+ margin: 0;
1657
+ overflow-wrap: anywhere;
1658
+ text-align: right;
1659
+ }
1660
+
1661
+ @media (max-width: 640px) {
1662
+ .ofv-model-materials {
1663
+ top: auto;
1664
+ right: 12px;
1665
+ bottom: 12px;
1666
+ }
1667
+ }
1668
+
1669
+ /* Archive / Zip layout styling */
1670
+ .ofv-archive-layout {
1671
+ display: flex;
1672
+ flex-wrap: wrap;
1673
+ width: 100%;
1674
+ max-width: 100%;
1675
+ height: 100%;
1676
+ min-width: 0;
1677
+ background: var(--ofv-surface);
1678
+ min-height: 360px;
1679
+ }
1680
+
1681
+ .ofv-archive-sidebar {
1682
+ width: 320px;
1683
+ flex: 1 1 220px;
1684
+ min-width: 0;
1685
+ max-width: 100%;
1686
+ border-right: 1px solid var(--ofv-border);
1687
+ display: flex;
1688
+ flex-direction: column;
1689
+ background: var(--ofv-surface-muted);
1690
+ }
1691
+
1692
+ .ofv-archive-header {
1693
+ padding: 12px 16px;
1694
+ border-bottom: 1px solid var(--ofv-border);
1695
+ font-weight: bold;
1696
+ font-size: 14px;
1697
+ color: var(--ofv-text);
1698
+ background: var(--ofv-surface);
1699
+ }
1700
+
1701
+ .ofv-archive-tree {
1702
+ flex: 1;
1703
+ min-width: 0;
1704
+ overflow: auto;
1705
+ }
1706
+
1707
+ .ofv-archive-main {
1708
+ flex: 1;
1709
+ min-width: 0;
1710
+ display: flex;
1711
+ flex-direction: column;
1712
+ overflow: auto;
1713
+ position: relative;
1714
+ background: var(--ofv-bg);
1715
+ }
1716
+
1717
+ .ofv-archive-item {
1718
+ display: flex;
1719
+ align-items: center;
1720
+ width: 100%;
1721
+ padding: 8px 16px;
1722
+ cursor: pointer;
1723
+ font-size: 13px;
1724
+ font: inherit;
1725
+ color: var(--ofv-text);
1726
+ background: transparent;
1727
+ border: 0;
1728
+ border-bottom: 1px solid rgba(0, 0, 0, 0.03);
1729
+ user-select: none;
1730
+ gap: 8px;
1731
+ text-align: left;
1732
+ transition: background 0.15s ease;
1733
+ }
1734
+
1735
+ .ofv-archive-item:hover,
1736
+ .ofv-archive-item:focus-visible {
1737
+ background: var(--ofv-button-hover);
1738
+ }
1739
+
1740
+ .ofv-archive-item:focus-visible {
1741
+ outline: 2px solid var(--ofv-accent);
1742
+ outline-offset: -2px;
1743
+ }
1744
+
1745
+ .ofv-archive-item.is-active {
1746
+ background: var(--ofv-button-hover);
1747
+ font-weight: bold;
1748
+ border-left: 3px solid var(--ofv-text);
1749
+ padding-left: 13px;
1750
+ }
1751
+
1752
+ .ofv-archive-item-icon {
1753
+ flex: 0 0 16px;
1754
+ text-align: center;
1755
+ font-size: 14px;
1756
+ }
1757
+
1758
+ .ofv-archive-item-name {
1759
+ flex: 1;
1760
+ overflow: hidden;
1761
+ text-overflow: ellipsis;
1762
+ white-space: nowrap;
1763
+ }
1764
+
1765
+ .ofv-archive-loading {
1766
+ display: flex;
1767
+ flex-direction: column;
1768
+ align-items: center;
1769
+ justify-content: center;
1770
+ width: 100%;
1771
+ height: 100%;
1772
+ color: var(--ofv-text-muted);
1773
+ font-size: 14px;
1774
+ gap: 12px;
1775
+ }
1776
+
1777
+ .ofv-archive-loading-spinner {
1778
+ width: 28px;
1779
+ height: 28px;
1780
+ border: 3px solid var(--ofv-border);
1781
+ border-top-color: var(--ofv-text);
1782
+ border-radius: 50%;
1783
+ animation: ofv-spin 1s linear infinite;
1784
+ }
1785
+
1786
+ @keyframes ofv-spin {
1787
+ to { transform: rotate(360deg); }
1788
+ }
1789
+
1790
+ .ofv-archive-info {
1791
+ display: flex;
1792
+ flex-direction: column;
1793
+ justify-content: center;
1794
+ width: 100%;
1795
+ min-width: 0;
1796
+ padding: 40px;
1797
+ color: var(--ofv-text);
1798
+ max-width: 600px;
1799
+ margin: auto;
1800
+ }
1801
+
1802
+ .ofv-archive-info h3 {
1803
+ margin: 0 0 16px;
1804
+ font-size: 20px;
1805
+ border-bottom: 1px solid var(--ofv-border);
1806
+ padding-bottom: 8px;
1807
+ }
1808
+
1809
+ .ofv-archive-info-meta {
1810
+ display: flex;
1811
+ flex-direction: column;
1812
+ gap: 12px;
1813
+ font-size: 14px;
1814
+ }
1815
+
1816
+ .ofv-archive-summary {
1817
+ display: grid;
1818
+ grid-template-columns: auto minmax(0, 1fr);
1819
+ gap: 8px 12px;
1820
+ min-width: 0;
1821
+ margin: 18px 0 0;
1822
+ padding-top: 14px;
1823
+ border-top: 1px solid var(--ofv-border);
1824
+ font-size: 13px;
1825
+ line-height: 1.45;
1826
+ }
1827
+
1828
+ .ofv-archive-summary dt {
1829
+ margin: 0;
1830
+ color: var(--ofv-text-muted);
1831
+ font-weight: 600;
1832
+ }
1833
+
1834
+ .ofv-archive-summary dd {
1835
+ min-width: 0;
1836
+ margin: 0;
1837
+ overflow-wrap: anywhere;
1838
+ }
1839
+
1840
+ .ofv-archive-probe-meta {
1841
+ display: grid;
1842
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1843
+ gap: 10px 16px;
1844
+ margin: 12px 0;
1845
+ }
1846
+
1847
+ .ofv-archive-probe-table {
1848
+ margin-top: 12px;
1849
+ }
1850
+
1851
+ /* Email specific styles */
1852
+ .ofv-email-attachments {
1853
+ margin-top: 12px;
1854
+ display: flex;
1855
+ flex-wrap: wrap;
1856
+ min-width: 0;
1857
+ gap: 8px;
1858
+ }
1859
+
1860
+ .ofv-email-mbox-meta {
1861
+ display: grid;
1862
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
1863
+ gap: 8px 16px;
1864
+ margin-bottom: 12px;
1865
+ }
1866
+
1867
+ .ofv-email-mbox-table {
1868
+ margin-top: 8px;
1869
+ }
1870
+
1871
+ .ofv-email-attachment-item {
1872
+ display: flex;
1873
+ align-items: center;
1874
+ gap: 8px;
1875
+ min-width: 0;
1876
+ max-width: 100%;
1877
+ padding: 6px 12px;
1878
+ background: var(--ofv-surface-muted);
1879
+ border: 1px solid var(--ofv-border);
1880
+ border-radius: 6px;
1881
+ font-size: 13px;
1882
+ color: var(--ofv-text);
1883
+ text-decoration: none;
1884
+ transition: background 0.15s ease, border-color 0.15s ease;
1885
+ }
1886
+
1887
+ .ofv-email-attachment-item:hover {
1888
+ background: var(--ofv-button-hover);
1889
+ border-color: var(--ofv-text-muted);
1890
+ }
1891
+
1892
+ .ofv-email-body-iframe {
1893
+ width: 100%;
1894
+ max-width: 100%;
1895
+ border: none;
1896
+ border-radius: 4px;
1897
+ background: #ffffff;
1898
+ box-shadow: inset 0 0 2px rgba(0,0,0,0.05);
1899
+ }
1900
+
1901
+ /* GIS / Map Visualization Styles */
1902
+ .ofv-gis-viewer {
1903
+ display: flex;
1904
+ flex-direction: column;
1905
+ width: 100%;
1906
+ max-width: 100%;
1907
+ height: 100%;
1908
+ min-width: 0;
1909
+ min-height: 0;
1910
+ }
1911
+
1912
+ .ofv-gis-summary {
1913
+ display: flex;
1914
+ flex: 0 0 auto;
1915
+ flex-wrap: wrap;
1916
+ gap: 8px 14px;
1917
+ min-width: 0;
1918
+ padding: 8px 12px;
1919
+ border-bottom: 1px solid var(--ofv-border);
1920
+ background: var(--ofv-surface);
1921
+ color: var(--ofv-text-muted);
1922
+ font-size: 12px;
1923
+ }
1924
+
1925
+ .ofv-gis-summary > span {
1926
+ display: inline-flex;
1927
+ gap: 5px;
1928
+ min-width: 0;
1929
+ }
1930
+
1931
+ .ofv-gis-summary strong {
1932
+ color: var(--ofv-text);
1933
+ font-weight: 600;
1934
+ overflow-wrap: anywhere;
1935
+ }
1936
+
1937
+ .ofv-map-stage {
1938
+ flex: 1 1 auto;
1939
+ width: 100%;
1940
+ max-width: 100%;
1941
+ height: auto;
1942
+ min-width: 0;
1943
+ min-height: 0;
1944
+ position: relative;
1945
+ background: var(--ofv-bg);
1946
+ }
1947
+
1948
+ /* Premium custom Leaflet map controls styling */
1949
+ .ofv-map-stage .leaflet-bar {
1950
+ border: 1px solid var(--ofv-border) !important;
1951
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
1952
+ }
1953
+
1954
+ .ofv-map-stage .leaflet-bar a {
1955
+ background-color: var(--ofv-surface) !important;
1956
+ color: var(--ofv-text) !important;
1957
+ border-bottom: 1px solid var(--ofv-border) !important;
1958
+ }
1959
+
1960
+ .ofv-map-stage .leaflet-bar a:hover {
1961
+ background-color: var(--ofv-button-hover) !important;
1962
+ }
1963
+
1964
+ /* Elegant feature popup table styling */
1965
+ .ofv-map-popup {
1966
+ font-family: inherit;
1967
+ color: var(--ofv-text);
1968
+ min-width: 0;
1969
+ max-width: 280px;
1970
+ }
1971
+
1972
+ .ofv-map-popup h4 {
1973
+ margin: 0 0 8px;
1974
+ font-size: 14px;
1975
+ font-weight: 600;
1976
+ border-bottom: 1px solid var(--ofv-border);
1977
+ padding-bottom: 4px;
1978
+ }
1979
+
1980
+ .ofv-map-popup-table {
1981
+ width: 100%;
1982
+ border-collapse: collapse;
1983
+ font-size: 12px;
1984
+ }
1985
+
1986
+ .ofv-map-popup-table tr {
1987
+ border-bottom: 1px solid rgba(0, 0, 0, 0.04);
1988
+ }
1989
+
1990
+ .ofv-map-popup-table tr:last-child {
1991
+ border-bottom: none;
1992
+ }
1993
+
1994
+ .ofv-map-popup-key {
1995
+ font-weight: 600;
1996
+ color: var(--ofv-text-muted);
1997
+ padding: 4px 8px 4px 0;
1998
+ vertical-align: top;
1999
+ white-space: nowrap;
2000
+ }
2001
+
2002
+ .ofv-map-popup-val {
2003
+ padding: 4px 0;
2004
+ word-break: break-word;
2005
+ }
2006
+
2007
+ /* Code container styling */
2008
+ .ofv-code-container {
2009
+ display: flex;
2010
+ flex-direction: column;
2011
+ width: 100%;
2012
+ max-width: 100%;
2013
+ height: 100%;
2014
+ min-width: 0;
2015
+ min-height: 0;
2016
+ overflow: hidden;
2017
+ background: var(--ofv-surface);
2018
+ }
2019
+
2020
+ .ofv-code-header {
2021
+ display: flex;
2022
+ flex: 0 0 auto;
2023
+ flex-wrap: wrap;
2024
+ align-items: center;
2025
+ justify-content: space-between;
2026
+ gap: 16px;
2027
+ min-height: 54px;
2028
+ min-width: 0;
2029
+ padding: 10px 14px;
2030
+ border-bottom: 1px solid var(--ofv-border);
2031
+ background: var(--ofv-surface);
2032
+ }
2033
+
2034
+ .ofv-code-title {
2035
+ display: grid;
2036
+ min-width: 0;
2037
+ gap: 2px;
2038
+ }
2039
+
2040
+ .ofv-code-title strong {
2041
+ overflow: hidden;
2042
+ color: var(--ofv-text);
2043
+ font-size: 14px;
2044
+ line-height: 1.35;
2045
+ text-overflow: ellipsis;
2046
+ white-space: nowrap;
2047
+ }
2048
+
2049
+ .ofv-code-title span,
2050
+ .ofv-code-status {
2051
+ color: var(--ofv-text-muted);
2052
+ font-size: 12px;
2053
+ line-height: 1.4;
2054
+ }
2055
+
2056
+ .ofv-code-actions {
2057
+ display: flex;
2058
+ flex: 0 0 auto;
2059
+ flex-wrap: wrap;
2060
+ align-items: center;
2061
+ justify-content: flex-end;
2062
+ gap: 8px;
2063
+ }
2064
+
2065
+ .ofv-code-status {
2066
+ min-width: min(74px, 100%);
2067
+ text-align: right;
2068
+ }
2069
+
2070
+ .ofv-code-action {
2071
+ min-height: 30px;
2072
+ border: 1px solid var(--ofv-border);
2073
+ border-radius: 6px;
2074
+ padding: 0 10px;
2075
+ background: var(--ofv-surface-muted);
2076
+ color: var(--ofv-text);
2077
+ cursor: pointer;
2078
+ font: inherit;
2079
+ font-size: 12px;
2080
+ }
2081
+
2082
+ .ofv-code-action:hover {
2083
+ background: var(--ofv-button-hover);
2084
+ }
2085
+
2086
+ .ofv-code-action:disabled {
2087
+ cursor: not-allowed;
2088
+ opacity: 0.58;
2089
+ }
2090
+
2091
+ .ofv-code-action[aria-pressed="true"] {
2092
+ border-color: #2563eb;
2093
+ background: rgba(37, 99, 235, 0.12);
2094
+ color: #1d4ed8;
2095
+ }
2096
+
2097
+ .ofv-theme-dark .ofv-code-action[aria-pressed="true"] {
2098
+ color: #93c5fd;
2099
+ }
2100
+
2101
+ .ofv-code-notice {
2102
+ flex: 0 0 auto;
2103
+ padding: 8px 14px;
2104
+ border-bottom: 1px solid var(--ofv-border);
2105
+ background: rgba(245, 158, 11, 0.12);
2106
+ color: var(--ofv-text);
2107
+ font-size: 12px;
2108
+ line-height: 1.45;
2109
+ }
2110
+
2111
+ .ofv-text-structure {
2112
+ display: flex;
2113
+ flex: 0 0 auto;
2114
+ flex-wrap: wrap;
2115
+ gap: 8px 14px;
2116
+ min-width: 0;
2117
+ padding: 8px 14px;
2118
+ border-bottom: 1px solid var(--ofv-border);
2119
+ background: var(--ofv-surface-muted);
2120
+ color: var(--ofv-text-muted);
2121
+ font-size: 12px;
2122
+ line-height: 1.45;
2123
+ }
2124
+
2125
+ .ofv-text-structure > span {
2126
+ display: inline-flex;
2127
+ gap: 5px;
2128
+ min-width: 0;
2129
+ }
2130
+
2131
+ .ofv-text-structure strong {
2132
+ color: var(--ofv-text);
2133
+ font-weight: 600;
2134
+ overflow-wrap: anywhere;
2135
+ }
2136
+
2137
+ .ofv-code-body {
2138
+ display: grid;
2139
+ grid-template-columns: auto minmax(0, 1fr);
2140
+ flex: 1 1 auto;
2141
+ max-width: 100%;
2142
+ min-width: 0;
2143
+ min-height: 0;
2144
+ overflow: auto;
2145
+ background: var(--ofv-surface-muted);
2146
+ }
2147
+
2148
+ .ofv-code-editor {
2149
+ flex: 1 1 auto;
2150
+ max-width: 100%;
2151
+ min-width: 0;
2152
+ min-height: 280px;
2153
+ overflow: hidden;
2154
+ background: var(--ofv-surface-muted);
2155
+ }
2156
+
2157
+ .ofv-code-editor[hidden],
2158
+ .ofv-code-body[hidden] {
2159
+ display: none;
2160
+ }
2161
+
2162
+ .ofv-code-container.is-editor .ofv-code-editor {
2163
+ display: block;
2164
+ }
2165
+
2166
+ .ofv-code-editor-fallback {
2167
+ display: block;
2168
+ width: 100%;
2169
+ height: 100%;
2170
+ min-height: inherit;
2171
+ margin: 0;
2172
+ border: 0;
2173
+ padding: 18px 20px;
2174
+ outline: 0;
2175
+ resize: none;
2176
+ background: var(--ofv-surface-muted);
2177
+ color: var(--ofv-text);
2178
+ font-family: var(--ofv-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
2179
+ font-size: 13px;
2180
+ line-height: 1.6;
2181
+ white-space: pre;
2182
+ }
2183
+
2184
+ .ofv-code-gutter {
2185
+ position: sticky;
2186
+ left: 0;
2187
+ z-index: 1;
2188
+ min-width: 48px;
2189
+ margin: 0;
2190
+ padding: 18px 12px;
2191
+ border-right: 1px solid var(--ofv-border);
2192
+ background: var(--ofv-surface);
2193
+ color: var(--ofv-text-muted);
2194
+ font-family: var(--ofv-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
2195
+ font-size: 13px;
2196
+ line-height: 1.6;
2197
+ text-align: right;
2198
+ user-select: none;
2199
+ }
2200
+
2201
+ .ofv-code-container pre {
2202
+ margin: 0;
2203
+ padding: 18px 20px;
2204
+ max-width: 100%;
2205
+ min-width: max-content;
2206
+ background: transparent !important;
2207
+ font-family: var(--ofv-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
2208
+ font-size: 13px;
2209
+ line-height: 1.6;
2210
+ }
2211
+
2212
+ .ofv-code-container pre[class*="language-"] {
2213
+ overflow: visible;
2214
+ }
2215
+
2216
+ .ofv-code-container code {
2217
+ white-space: pre;
2218
+ }
2219
+
2220
+ .ofv-code-container.is-wrapped .ofv-code-body {
2221
+ overflow-x: hidden;
2222
+ }
2223
+
2224
+ .ofv-code-container.is-wrapped pre[class*="language-"] {
2225
+ min-width: 0;
2226
+ white-space: pre-wrap;
2227
+ word-break: break-word;
2228
+ }
2229
+
2230
+ .ofv-code-container.is-wrapped code {
2231
+ white-space: pre-wrap;
2232
+ word-break: break-word;
2233
+ }
2234
+
2235
+ @media (max-width: 640px) {
2236
+ .ofv-code-header {
2237
+ align-items: stretch;
2238
+ flex-direction: column;
2239
+ gap: 10px;
2240
+ }
2241
+
2242
+ .ofv-code-actions {
2243
+ justify-content: flex-start;
2244
+ flex-wrap: wrap;
2245
+ }
2246
+
2247
+ .ofv-code-status {
2248
+ min-width: 0;
2249
+ width: 100%;
2250
+ text-align: left;
2251
+ }
2252
+ }
2253
+
2254
+ /* Markdown container styling */
2255
+ .ofv-markdown-body {
2256
+ width: 100%;
2257
+ max-width: 100%;
2258
+ height: 100%;
2259
+ min-width: 0;
2260
+ overflow: auto;
2261
+ padding: 32px;
2262
+ box-sizing: border-box;
2263
+ background: var(--ofv-surface);
2264
+ color: var(--ofv-text);
2265
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
2266
+ font-size: 15px;
2267
+ line-height: 1.65;
2268
+ word-wrap: break-word;
2269
+ }
2270
+
2271
+ /* Light / Dark adjustments for Markdown */
2272
+ .ofv-root.ofv-theme-dark .ofv-markdown-body {
2273
+ background: var(--ofv-surface-muted);
2274
+ }
2275
+
2276
+ .ofv-markdown-body h1,
2277
+ .ofv-markdown-body h2,
2278
+ .ofv-markdown-body h3,
2279
+ .ofv-markdown-body h4,
2280
+ .ofv-markdown-body h5,
2281
+ .ofv-markdown-body h6 {
2282
+ margin-top: 24px;
2283
+ margin-bottom: 16px;
2284
+ font-weight: 600;
2285
+ line-height: 1.25;
2286
+ color: var(--ofv-text);
2287
+ }
2288
+
2289
+ .ofv-markdown-body h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid var(--ofv-border); }
2290
+ .ofv-markdown-body h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--ofv-border); }
2291
+ .ofv-markdown-body h3 { font-size: 1.25em; }
2292
+ .ofv-markdown-body h4 { font-size: 1em; }
2293
+
2294
+ .ofv-markdown-body p,
2295
+ .ofv-markdown-body blockquote,
2296
+ .ofv-markdown-body ul,
2297
+ .ofv-markdown-body ol,
2298
+ .ofv-markdown-body dl,
2299
+ .ofv-markdown-body table,
2300
+ .ofv-markdown-body pre {
2301
+ margin-top: 0;
2302
+ margin-bottom: 16px;
2303
+ }
2304
+
2305
+ .ofv-markdown-body a {
2306
+ color: #2563eb;
2307
+ text-decoration: none;
2308
+ }
2309
+
2310
+ .ofv-markdown-body a:hover {
2311
+ text-decoration: underline;
2312
+ }
2313
+
2314
+ .ofv-root.ofv-theme-dark .ofv-markdown-body a {
2315
+ color: #60a5fa;
2316
+ }
2317
+
2318
+ .ofv-markdown-body blockquote {
2319
+ padding: 0 1em;
2320
+ color: var(--ofv-text-muted);
2321
+ border-left: .25em solid var(--ofv-border);
2322
+ margin-left: 0;
2323
+ margin-right: 0;
2324
+ }
2325
+
2326
+ .ofv-markdown-body ul,
2327
+ .ofv-markdown-body ol {
2328
+ padding-left: 2em;
2329
+ }
2330
+
2331
+ .ofv-markdown-body ul {
2332
+ list-style-type: disc;
2333
+ }
2334
+
2335
+ .ofv-markdown-body ol {
2336
+ list-style-type: decimal;
2337
+ }
2338
+
2339
+ .ofv-markdown-body li + li {
2340
+ margin-top: .25em;
2341
+ }
2342
+
2343
+ .ofv-markdown-body code {
2344
+ padding: .2em .4em;
2345
+ margin: 0;
2346
+ font-size: 85%;
2347
+ background-color: var(--ofv-surface-muted);
2348
+ border-radius: 6px;
2349
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2350
+ }
2351
+
2352
+ .ofv-root.ofv-theme-dark .ofv-markdown-body code {
2353
+ background-color: rgba(255, 255, 255, 0.08);
2354
+ }
2355
+
2356
+ .ofv-markdown-body pre {
2357
+ max-width: 100%;
2358
+ padding: 16px;
2359
+ overflow: auto;
2360
+ font-size: 85%;
2361
+ line-height: 1.45;
2362
+ background-color: var(--ofv-surface-muted);
2363
+ border-radius: 6px;
2364
+ }
2365
+
2366
+ .ofv-root.ofv-theme-dark .ofv-markdown-body pre {
2367
+ background-color: rgba(0, 0, 0, 0.2);
2368
+ }
2369
+
2370
+ .ofv-markdown-body pre code {
2371
+ padding: 0;
2372
+ margin: 0;
2373
+ font-size: 100%;
2374
+ word-break: normal;
2375
+ white-space: pre;
2376
+ background: transparent !important;
2377
+ border: 0;
2378
+ }
2379
+
2380
+ .ofv-markdown-body hr {
2381
+ height: .25em;
2382
+ padding: 0;
2383
+ margin: 24px 0;
2384
+ background-color: var(--ofv-border);
2385
+ border: 0;
2386
+ }
2387
+
2388
+ .ofv-markdown-body table {
2389
+ border-spacing: 0;
2390
+ border-collapse: collapse;
2391
+ display: block;
2392
+ width: max-content;
2393
+ max-width: 100%;
2394
+ overflow: auto;
2395
+ }
2396
+
2397
+ .ofv-markdown-body table th,
2398
+ .ofv-markdown-body table td {
2399
+ padding: 6px 13px;
2400
+ border: 1px solid var(--ofv-border);
2401
+ }
2402
+
2403
+ .ofv-markdown-body table tr {
2404
+ background-color: var(--ofv-surface);
2405
+ }
2406
+
2407
+ .ofv-markdown-body table tr:nth-child(2n) {
2408
+ background-color: var(--ofv-surface-muted);
2409
+ }
2410
+
2411
+ /* PDF lazy loading elements */
2412
+ .ofv-pdf-page-wrapper {
2413
+ margin: 16px auto;
2414
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
2415
+ border: 1px solid var(--ofv-border);
2416
+ background-color: var(--ofv-surface);
2417
+ position: relative;
2418
+ display: flex;
2419
+ align-items: center;
2420
+ justify-content: center;
2421
+ box-sizing: border-box;
2422
+ }
2423
+
2424
+ .ofv-pdf-skeleton {
2425
+ font-size: 14px;
2426
+ color: var(--ofv-text-muted);
2427
+ font-family: inherit;
2428
+ display: flex;
2429
+ align-items: center;
2430
+ justify-content: center;
2431
+ width: 100%;
2432
+ height: 100%;
2433
+ background: linear-gradient(90deg, var(--ofv-surface-muted) 25%, var(--ofv-border) 37%, var(--ofv-surface-muted) 63%);
2434
+ background-size: 400% 100%;
2435
+ animation: ofv-skeleton-pulse 1.4s ease infinite;
2436
+ }
2437
+
2438
+ @keyframes ofv-skeleton-pulse {
2439
+ 0% {
2440
+ background-position: 100% 50%;
2441
+ }
2442
+ 100% {
2443
+ background-position: 0% 50%;
2444
+ }
2445
+ }
2446
+
2447
+ .ofv-pdf-error {
2448
+ color: #ef4444;
2449
+ font-weight: 500;
2450
+ font-size: 14px;
2451
+ }
2452
+
2453
+ /* PDF Text Layer styling */
2454
+ .ofv-pdf-text-layer {
2455
+ position: absolute;
2456
+ left: 0;
2457
+ top: 0;
2458
+ right: 0;
2459
+ bottom: 0;
2460
+ overflow: hidden;
2461
+ line-height: 1;
2462
+ pointer-events: none;
2463
+ user-select: text;
2464
+ }
2465
+
2466
+ .ofv-pdf-text-layer span {
2467
+ color: transparent;
2468
+ position: absolute;
2469
+ white-space: pre;
2470
+ cursor: text;
2471
+ transform-origin: 0% 0%;
2472
+ pointer-events: auto;
2473
+ }
2474
+
2475
+ .ofv-pdf-text-layer span::selection {
2476
+ background: rgba(59, 130, 246, 0.35); /* Premium blue highlight matching theme */
2477
+ }
2478
+
2479
+ /* For Firefox support of selection background */
2480
+ .ofv-pdf-text-layer span::-moz-selection {
2481
+ background: rgba(59, 130, 246, 0.35);
2482
+ }