@matangot/react-pdf-viewer 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.
@@ -0,0 +1,1022 @@
1
+ /* ========================================
2
+ @matangot/react-pdf-viewer styles
3
+ ======================================== */
4
+
5
+ :root {
6
+ --pdf-primary: #18181b;
7
+ --pdf-primary-hover: #27272a;
8
+ --pdf-bg: #fafafa;
9
+ --pdf-toolbar-bg: #f0f0f2;
10
+ --pdf-toolbar-border: #e4e4e7;
11
+ --pdf-text: #18181b;
12
+ --pdf-text-muted: #71717a;
13
+ --pdf-btn-hover: #f4f4f5;
14
+ --pdf-btn-active: #e4e4e7;
15
+ --pdf-sidebar-bg: #f0f0f2;
16
+ --pdf-sidebar-width: 180px;
17
+ --pdf-input-border: #d4d4d8;
18
+ --pdf-input-bg: #ffffff;
19
+ --pdf-page-bg: #ffffff;
20
+ --pdf-page-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
21
+ --pdf-page-gap: 12px;
22
+ --pdf-placeholder-bg: #f4f4f5;
23
+ --pdf-search-highlight: #fde68a;
24
+ --pdf-thumbnail-border: transparent;
25
+ --pdf-thumbnail-active-border: var(--pdf-primary);
26
+ --pdf-dropdown-bg: #ffffff;
27
+ --pdf-dropdown-border: #d4d4d8;
28
+ --pdf-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
29
+ --pdf-dropdown-hover: #f4f4f5;
30
+ --pdf-dropdown-icon: #52525b;
31
+ --pdf-input-focus-border: #71717a;
32
+ }
33
+
34
+ /* Dark theme */
35
+ [data-theme="dark"] {
36
+ --pdf-primary: #fafafa;
37
+ --pdf-primary-hover: #e4e4e7;
38
+ --pdf-bg: #18181b;
39
+ --pdf-toolbar-bg: #1c1c1f;
40
+ --pdf-toolbar-border: #27272a;
41
+ --pdf-text: #fafafa;
42
+ --pdf-text-muted: #a1a1aa;
43
+ --pdf-btn-hover: #27272a;
44
+ --pdf-btn-active: #3f3f46;
45
+ --pdf-sidebar-bg: #1c1c1f;
46
+ --pdf-input-border: #3f3f46;
47
+ --pdf-input-bg: #27272a;
48
+ --pdf-page-bg: #ffffff;
49
+ --pdf-placeholder-bg: #27272a;
50
+ --pdf-search-highlight: #fbbf24;
51
+ --pdf-dropdown-bg: #27272a;
52
+ --pdf-dropdown-border: #3f3f46;
53
+ --pdf-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
54
+ --pdf-dropdown-hover: #3f3f46;
55
+ --pdf-dropdown-icon: #a1a1aa;
56
+ --pdf-input-focus-border: #a1a1aa;
57
+ }
58
+
59
+ /* System theme */
60
+ @media (prefers-color-scheme: dark) {
61
+ [data-theme="system"] {
62
+ --pdf-primary: #fafafa;
63
+ --pdf-primary-hover: #e4e4e7;
64
+ --pdf-bg: #18181b;
65
+ --pdf-toolbar-bg: #1c1c1f;
66
+ --pdf-toolbar-border: #27272a;
67
+ --pdf-text: #fafafa;
68
+ --pdf-text-muted: #a1a1aa;
69
+ --pdf-btn-hover: #27272a;
70
+ --pdf-btn-active: #3f3f46;
71
+ --pdf-sidebar-bg: #1c1c1f;
72
+ --pdf-input-border: #3f3f46;
73
+ --pdf-input-bg: #27272a;
74
+ --pdf-page-bg: #ffffff;
75
+ --pdf-placeholder-bg: #27272a;
76
+ --pdf-search-highlight: #fbbf24;
77
+ --pdf-dropdown-bg: #27272a;
78
+ --pdf-dropdown-border: #3f3f46;
79
+ --pdf-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
80
+ --pdf-dropdown-hover: #3f3f46;
81
+ --pdf-dropdown-icon: #a1a1aa;
82
+ }
83
+ }
84
+
85
+ /* ========================================
86
+ Layout
87
+ ======================================== */
88
+
89
+ .pdf-viewer {
90
+ display: flex;
91
+ flex-direction: column;
92
+ width: 100%;
93
+ height: 100%;
94
+ overflow: hidden;
95
+ background-color: var(--pdf-bg);
96
+ color: var(--pdf-text);
97
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
98
+ Arial, sans-serif;
99
+ font-size: 14px;
100
+ line-height: 1.5;
101
+ outline: none;
102
+ -webkit-font-smoothing: antialiased;
103
+ -moz-osx-font-smoothing: grayscale;
104
+ color-scheme: light;
105
+ }
106
+
107
+ [data-theme="dark"] .pdf-viewer,
108
+ .pdf-viewer[data-theme="dark"] {
109
+ color-scheme: dark;
110
+ }
111
+
112
+ @media (prefers-color-scheme: dark) {
113
+ [data-theme="system"] .pdf-viewer,
114
+ .pdf-viewer[data-theme="system"] {
115
+ color-scheme: dark;
116
+ }
117
+ }
118
+
119
+ .pdf-viewer--loading {
120
+ position: relative;
121
+ }
122
+
123
+ .pdf-viewer--loading::after {
124
+ content: '';
125
+ position: absolute;
126
+ top: 0;
127
+ left: 0;
128
+ right: 0;
129
+ height: 2px;
130
+ background: linear-gradient(90deg, transparent, var(--pdf-primary), transparent);
131
+ animation: pdf-loading 1.5s ease-in-out infinite;
132
+ }
133
+
134
+ @keyframes pdf-loading {
135
+ 0% { transform: translateX(-100%); }
136
+ 100% { transform: translateX(100%); }
137
+ }
138
+
139
+ /* ========================================
140
+ Toolbar
141
+ ======================================== */
142
+
143
+ .pdf-viewer__toolbar {
144
+ display: flex;
145
+ flex-direction: row;
146
+ align-items: center;
147
+ gap: 2px;
148
+ padding: 6px 8px;
149
+ height: 44px;
150
+ background-color: var(--pdf-toolbar-bg);
151
+ border-bottom: 1px solid var(--pdf-toolbar-border);
152
+ flex-shrink: 0;
153
+ box-sizing: border-box;
154
+ }
155
+
156
+ /* ========================================
157
+ Buttons
158
+ ======================================== */
159
+
160
+ .pdf-viewer__btn {
161
+ display: flex;
162
+ align-items: center;
163
+ justify-content: center;
164
+ width: 34px;
165
+ height: 34px;
166
+ border: none;
167
+ border-radius: 6px;
168
+ background: transparent;
169
+ color: var(--pdf-text-muted);
170
+ cursor: pointer;
171
+ padding: 0;
172
+ flex-shrink: 0;
173
+ transition: color 0.15s ease, background-color 0.15s ease;
174
+ }
175
+
176
+ .pdf-viewer__btn:hover {
177
+ background-color: var(--pdf-btn-hover);
178
+ color: var(--pdf-text);
179
+ }
180
+
181
+ .pdf-viewer__btn:active {
182
+ background-color: var(--pdf-btn-active);
183
+ }
184
+
185
+ .pdf-viewer__btn:disabled {
186
+ opacity: 0.3;
187
+ cursor: not-allowed;
188
+ }
189
+
190
+ .pdf-viewer__btn:disabled:hover {
191
+ background: transparent;
192
+ color: var(--pdf-text-muted);
193
+ }
194
+
195
+ .pdf-viewer__btn--active {
196
+ background-color: var(--pdf-btn-active);
197
+ color: var(--pdf-text);
198
+ }
199
+
200
+ .pdf-viewer__btn--active:hover {
201
+ background-color: var(--pdf-btn-active);
202
+ }
203
+
204
+ .pdf-viewer__btn--small {
205
+ width: 24px;
206
+ height: 24px;
207
+ }
208
+
209
+ /* ========================================
210
+ Toolbar sections (3-column layout)
211
+ ======================================== */
212
+
213
+ .pdf-viewer__toolbar-section {
214
+ display: flex;
215
+ flex-direction: row;
216
+ align-items: center;
217
+ gap: 2px;
218
+ }
219
+
220
+ .pdf-viewer__toolbar-section--center {
221
+ flex: 1;
222
+ justify-content: center;
223
+ }
224
+
225
+ .pdf-viewer__toolbar-section--end {
226
+ justify-content: flex-end;
227
+ }
228
+
229
+ /* ========================================
230
+ Toolbar extras (search, rotate, download, etc.)
231
+ ======================================== */
232
+
233
+ .pdf-viewer__toolbar-extras {
234
+ display: flex;
235
+ flex-direction: row;
236
+ align-items: center;
237
+ gap: 4px;
238
+ }
239
+
240
+ /* ========================================
241
+ Separator
242
+ ======================================== */
243
+
244
+ .pdf-viewer__separator {
245
+ width: 1px;
246
+ height: 20px;
247
+ background-color: var(--pdf-toolbar-border);
248
+ flex-shrink: 0;
249
+ margin: 0 6px;
250
+ }
251
+
252
+ /* ========================================
253
+ Navigation
254
+ ======================================== */
255
+
256
+ .pdf-viewer__navigation {
257
+ display: flex;
258
+ flex-direction: row;
259
+ align-items: center;
260
+ gap: 4px;
261
+ }
262
+
263
+ .pdf-viewer__page-input {
264
+ width: 38px;
265
+ height: 26px;
266
+ text-align: center;
267
+ border: 1px solid var(--pdf-input-border);
268
+ border-radius: 6px;
269
+ background: var(--pdf-input-bg);
270
+ color: var(--pdf-text);
271
+ padding: 0 4px;
272
+ font-size: 13px;
273
+ font-family: inherit;
274
+ outline: none;
275
+ box-sizing: border-box;
276
+ transition: border-color 0.15s ease;
277
+ }
278
+
279
+ .pdf-viewer__page-input:focus {
280
+ border-color: var(--pdf-input-focus-border);
281
+ }
282
+
283
+ .pdf-viewer__page-count {
284
+ font-size: 14px;
285
+ color: var(--pdf-text-muted);
286
+ white-space: nowrap;
287
+ margin-left: 4px;
288
+ }
289
+
290
+ .pdf-viewer__page-count-mobile {
291
+ display: none;
292
+ }
293
+
294
+ .pdf-viewer__show-mobile {
295
+ display: none;
296
+ }
297
+
298
+ /* ========================================
299
+ Zoom
300
+ ======================================== */
301
+
302
+ .pdf-viewer__zoom {
303
+ display: flex;
304
+ flex-direction: row;
305
+ align-items: center;
306
+ gap: 4px;
307
+ }
308
+
309
+ .pdf-viewer__zoom-trigger {
310
+ display: flex;
311
+ align-items: center;
312
+ justify-content: center;
313
+ min-width: 52px;
314
+ height: 34px;
315
+ padding: 0 8px;
316
+ border: 1px solid var(--pdf-input-border);
317
+ border-radius: 6px;
318
+ background: var(--pdf-input-bg);
319
+ color: var(--pdf-text);
320
+ font-size: 13px;
321
+ font-variant-numeric: tabular-nums;
322
+ font-family: inherit;
323
+ cursor: pointer;
324
+ transition: border-color 0.15s ease;
325
+ box-sizing: border-box;
326
+ white-space: nowrap;
327
+ }
328
+
329
+ .pdf-viewer__zoom-trigger:hover {
330
+ border-color: var(--pdf-text-muted);
331
+ }
332
+
333
+ .pdf-viewer__zoom-level-text {
334
+ pointer-events: none;
335
+ }
336
+
337
+ /* ========================================
338
+ Search
339
+ ======================================== */
340
+
341
+ .pdf-viewer__search-toggle {
342
+ position: relative;
343
+ }
344
+
345
+ .pdf-viewer__search-panel {
346
+ position: absolute;
347
+ top: calc(100% + 6px);
348
+ left: 0;
349
+ display: flex;
350
+ flex-direction: row;
351
+ align-items: center;
352
+ gap: 6px;
353
+ padding: 10px 10px;
354
+ background: var(--pdf-dropdown-bg);
355
+ border: 1px solid var(--pdf-dropdown-border);
356
+ border-radius: 6px;
357
+ box-shadow: var(--pdf-dropdown-shadow);
358
+ z-index: 20;
359
+ white-space: nowrap;
360
+ }
361
+
362
+ .pdf-viewer__search-input-wrapper {
363
+ position: relative;
364
+ display: flex;
365
+ align-items: center;
366
+ }
367
+
368
+ .pdf-viewer__search-input-icon {
369
+ position: absolute;
370
+ left: 8px;
371
+ display: flex;
372
+ align-items: center;
373
+ color: var(--pdf-text-muted);
374
+ pointer-events: none;
375
+ }
376
+
377
+ .pdf-viewer__search-input-icon svg {
378
+ width: 14px;
379
+ height: 14px;
380
+ }
381
+
382
+ .pdf-viewer__search-panel-input {
383
+ width: 180px;
384
+ height: 30px;
385
+ padding: 0 8px 0 28px;
386
+ border: 1px solid var(--pdf-input-border);
387
+ border-radius: 6px;
388
+ background: var(--pdf-input-bg);
389
+ color: var(--pdf-text);
390
+ font-size: 13px;
391
+ font-family: inherit;
392
+ outline: none;
393
+ box-sizing: border-box;
394
+ transition: border-color 0.15s ease;
395
+ }
396
+
397
+ .pdf-viewer__search-panel-input:focus {
398
+ border-color: var(--pdf-input-focus-border);
399
+ }
400
+
401
+ .pdf-viewer__search-panel-input::placeholder {
402
+ color: var(--pdf-text-muted);
403
+ }
404
+
405
+ .pdf-viewer__search-count {
406
+ font-size: 12px;
407
+ color: var(--pdf-text-muted);
408
+ white-space: nowrap;
409
+ min-width: 32px;
410
+ text-align: center;
411
+ margin-left: 4px;
412
+ }
413
+
414
+ /* ========================================
415
+ Body
416
+ ======================================== */
417
+
418
+ .pdf-viewer__body {
419
+ display: flex;
420
+ flex-direction: row;
421
+ flex: 1;
422
+ overflow: hidden;
423
+ }
424
+
425
+ /* ========================================
426
+ Sidebar
427
+ ======================================== */
428
+
429
+ .pdf-viewer__sidebar {
430
+ width: var(--pdf-sidebar-width);
431
+ overflow-y: auto;
432
+ padding: 6px;
433
+ display: flex;
434
+ flex-direction: column;
435
+ gap: 4px;
436
+ background-color: var(--pdf-sidebar-bg);
437
+ border-right: 1px solid var(--pdf-toolbar-border);
438
+ flex-shrink: 0;
439
+ box-sizing: border-box;
440
+ }
441
+
442
+ .pdf-viewer__thumbnail {
443
+ display: flex;
444
+ flex-direction: column;
445
+ align-items: center;
446
+ padding: 4px;
447
+ border: 2px solid transparent;
448
+ border-radius: 6px;
449
+ cursor: pointer;
450
+ background: transparent;
451
+ gap: 2px;
452
+ transition: background-color 0.15s ease, border-color 0.15s ease;
453
+ }
454
+
455
+ .pdf-viewer__thumbnail:hover {
456
+ background-color: var(--pdf-btn-hover);
457
+ }
458
+
459
+ .pdf-viewer__thumbnail--active {
460
+ border-color: transparent;
461
+ background-color: #e4e4e7;
462
+ }
463
+
464
+ .pdf-viewer__thumbnail--active:hover {
465
+ background-color: #e4e4e7;
466
+ }
467
+
468
+ [data-theme="dark"] .pdf-viewer__thumbnail--active,
469
+ [data-theme="dark"] .pdf-viewer__thumbnail--active:hover {
470
+ background-color: #3f3f46;
471
+ }
472
+
473
+ @media (prefers-color-scheme: dark) {
474
+ [data-theme="system"] .pdf-viewer__thumbnail--active,
475
+ [data-theme="system"] .pdf-viewer__thumbnail--active:hover {
476
+ background-color: #3f3f46;
477
+ }
478
+ }
479
+
480
+ .pdf-viewer__thumbnail canvas {
481
+ width: 100%;
482
+ display: block;
483
+ border-radius: 2px;
484
+ }
485
+
486
+ .pdf-viewer__thumbnail span {
487
+ font-size: 12px;
488
+ color: var(--pdf-text-muted);
489
+ text-align: center;
490
+ margin-top: 4px;
491
+ }
492
+
493
+ /* ========================================
494
+ Pages
495
+ ======================================== */
496
+
497
+ .pdf-viewer__pages {
498
+ flex: 1;
499
+ overflow: auto;
500
+ padding: 16px;
501
+ display: flex;
502
+ flex-direction: column;
503
+ align-items: safe center;
504
+ gap: var(--pdf-page-gap);
505
+ touch-action: pan-x pan-y;
506
+ }
507
+
508
+ /* Scroll mode: vertical (default) */
509
+ .pdf-viewer__pages--scroll-vertical {
510
+ flex-direction: column;
511
+ }
512
+
513
+ /* Scroll mode: horizontal */
514
+ .pdf-viewer__pages--scroll-horizontal {
515
+ flex-direction: row;
516
+ flex-wrap: nowrap;
517
+ overflow-x: auto;
518
+ overflow-y: hidden;
519
+ align-items: center;
520
+ }
521
+
522
+ /* Scroll mode: page (single page at a time) */
523
+ .pdf-viewer__pages--scroll-page {
524
+ flex-direction: column;
525
+ }
526
+
527
+ .pdf-viewer__pages--scroll-page > .pdf-viewer__page-wrapper,
528
+ .pdf-viewer__pages--scroll-page > .pdf-viewer__page-pair {
529
+ display: none;
530
+ }
531
+
532
+ .pdf-viewer__pages--scroll-page > .pdf-viewer__page-wrapper--active,
533
+ .pdf-viewer__pages--scroll-page > .pdf-viewer__page-pair--active {
534
+ display: flex;
535
+ }
536
+
537
+ /* View mode: dual (side-by-side pairs) */
538
+ .pdf-viewer__pages--dual {
539
+ /* Applied alongside scroll mode */
540
+ }
541
+
542
+ .pdf-viewer__page-pair {
543
+ display: flex;
544
+ flex-direction: row;
545
+ gap: var(--pdf-page-gap);
546
+ justify-content: center;
547
+ }
548
+
549
+ .pdf-viewer__pages--hand {
550
+ cursor: grab;
551
+ user-select: none;
552
+ }
553
+
554
+ .pdf-viewer__pages--hand .pdf-viewer__page-text-layer {
555
+ pointer-events: none;
556
+ }
557
+
558
+ .pdf-viewer__page-wrapper {
559
+ position: relative;
560
+ }
561
+
562
+ .pdf-viewer__page {
563
+ position: relative;
564
+ box-shadow: var(--pdf-page-shadow);
565
+ background: var(--pdf-page-bg);
566
+ }
567
+
568
+ .pdf-viewer__page-canvas {
569
+ display: block;
570
+ }
571
+
572
+ .pdf-viewer__page-text-layer {
573
+ position: absolute;
574
+ text-align: initial;
575
+ inset: 0;
576
+ overflow: clip;
577
+ opacity: 1;
578
+ line-height: 1;
579
+ -webkit-text-size-adjust: none;
580
+ -moz-text-size-adjust: none;
581
+ text-size-adjust: none;
582
+ forced-color-adjust: none;
583
+ transform-origin: 0 0;
584
+ caret-color: CanvasText;
585
+ z-index: 1;
586
+ }
587
+
588
+ .pdf-viewer__page-text-layer :is(span, br) {
589
+ color: transparent;
590
+ position: absolute;
591
+ white-space: pre;
592
+ cursor: text;
593
+ transform-origin: 0% 0%;
594
+ }
595
+
596
+ .pdf-viewer__page-text-layer span::selection {
597
+ background: rgba(37, 99, 235, 0.3);
598
+ color: transparent;
599
+ }
600
+
601
+ .pdf-viewer__page-text-layer mark.pdf-viewer__search-hit {
602
+ color: transparent;
603
+ background: rgba(253, 224, 71, 0.4);
604
+ border-radius: 2px;
605
+ padding: 0;
606
+ }
607
+
608
+ .pdf-viewer__page-text-layer mark.pdf-viewer__search-hit--current {
609
+ background: rgba(249, 115, 22, 0.5);
610
+ }
611
+
612
+ .pdf-viewer__page-placeholder {
613
+ width: 612px;
614
+ height: 792px;
615
+ background: var(--pdf-placeholder-bg);
616
+ box-shadow: var(--pdf-page-shadow);
617
+ }
618
+
619
+ /* ========================================
620
+ Dropdown Menu
621
+ ======================================== */
622
+
623
+ .pdf-viewer__dropdown {
624
+ position: relative;
625
+ }
626
+
627
+ .pdf-viewer__dropdown-content {
628
+ position: absolute;
629
+ top: 100%;
630
+ margin-top: 4px;
631
+ min-width: 200px;
632
+ background: var(--pdf-dropdown-bg);
633
+ border: 1px solid var(--pdf-dropdown-border);
634
+ border-radius: 8px;
635
+ box-shadow: var(--pdf-dropdown-shadow);
636
+ padding: 6px;
637
+ z-index: 50;
638
+ overflow: hidden;
639
+ display: flex;
640
+ flex-direction: column;
641
+ gap: 2px;
642
+ }
643
+
644
+ .pdf-viewer__dropdown-content--left {
645
+ left: 0;
646
+ }
647
+
648
+ .pdf-viewer__dropdown-content--right {
649
+ right: 0;
650
+ }
651
+
652
+ .pdf-viewer__dropdown-content--center {
653
+ left: 50%;
654
+ transform: translateX(-50%);
655
+ }
656
+
657
+ .pdf-viewer__dropdown-item {
658
+ display: flex;
659
+ align-items: center;
660
+ gap: 12px;
661
+ width: 100%;
662
+ padding: 10px 12px;
663
+ border: none;
664
+ border-radius: 6px;
665
+ background: transparent;
666
+ color: var(--pdf-text);
667
+ font-size: 14px;
668
+ line-height: 1;
669
+ text-align: left;
670
+ cursor: pointer;
671
+ transition: background-color 0.1s ease;
672
+ box-sizing: border-box;
673
+ font-family: inherit;
674
+ }
675
+
676
+ .pdf-viewer__dropdown-item:hover {
677
+ background-color: var(--pdf-dropdown-hover);
678
+ }
679
+
680
+ .pdf-viewer__dropdown-item--active {
681
+ background-color: var(--pdf-dropdown-hover);
682
+ font-weight: 500;
683
+ }
684
+
685
+ .pdf-viewer__dropdown-item-check {
686
+ display: flex;
687
+ align-items: center;
688
+ justify-content: center;
689
+ width: 16px;
690
+ height: 16px;
691
+ flex-shrink: 0;
692
+ margin-left: auto;
693
+ color: var(--pdf-text);
694
+ }
695
+
696
+ .pdf-viewer__dropdown-item--disabled {
697
+ opacity: 0.4;
698
+ cursor: not-allowed;
699
+ }
700
+
701
+ .pdf-viewer__dropdown-item--disabled:hover {
702
+ background: transparent;
703
+ }
704
+
705
+ .pdf-viewer__dropdown-item-icon {
706
+ display: flex;
707
+ align-items: center;
708
+ justify-content: center;
709
+ width: 18px;
710
+ height: 18px;
711
+ flex-shrink: 0;
712
+ color: var(--pdf-dropdown-icon);
713
+ }
714
+
715
+ .pdf-viewer__dropdown-item-label {
716
+ white-space: nowrap;
717
+ }
718
+
719
+ .pdf-viewer__dropdown-separator {
720
+ height: 1px;
721
+ margin: 6px 0;
722
+ background-color: var(--pdf-dropdown-border);
723
+ }
724
+
725
+ /* ========================================
726
+ Modal
727
+ ======================================== */
728
+
729
+ .pdf-viewer__modal-backdrop {
730
+ position: absolute;
731
+ inset: 0;
732
+ z-index: 100;
733
+ display: flex;
734
+ align-items: center;
735
+ justify-content: center;
736
+ background: rgba(0, 0, 0, 0.3);
737
+ backdrop-filter: blur(2px);
738
+ }
739
+
740
+ .pdf-viewer__modal {
741
+ width: 90%;
742
+ max-width: 420px;
743
+ max-height: 80%;
744
+ background: var(--pdf-dropdown-bg);
745
+ border: 1px solid var(--pdf-dropdown-border);
746
+ border-radius: 12px;
747
+ box-shadow: var(--pdf-dropdown-shadow);
748
+ overflow: hidden;
749
+ display: flex;
750
+ flex-direction: column;
751
+ }
752
+
753
+ .pdf-viewer__modal-header {
754
+ display: flex;
755
+ align-items: center;
756
+ justify-content: space-between;
757
+ padding: 16px 18px 14px;
758
+ border-bottom: 1px solid var(--pdf-dropdown-border);
759
+ }
760
+
761
+ .pdf-viewer__modal-title {
762
+ margin: 0;
763
+ font-size: 15px;
764
+ font-weight: 600;
765
+ color: var(--pdf-text);
766
+ }
767
+
768
+ .pdf-viewer__modal-body {
769
+ padding: 18px;
770
+ overflow-y: auto;
771
+ }
772
+
773
+ .pdf-viewer__props-file-info {
774
+ display: flex;
775
+ align-items: baseline;
776
+ justify-content: space-between;
777
+ gap: 12px;
778
+ padding-bottom: 14px;
779
+ margin-bottom: 14px;
780
+ border-bottom: 1px solid var(--pdf-dropdown-border);
781
+ }
782
+
783
+ .pdf-viewer__props-file-name {
784
+ font-size: 14px;
785
+ font-weight: 500;
786
+ color: var(--pdf-text);
787
+ word-break: break-word;
788
+ min-width: 0;
789
+ }
790
+
791
+ .pdf-viewer__props-file-size {
792
+ font-size: 13px;
793
+ color: var(--pdf-text-muted);
794
+ white-space: nowrap;
795
+ flex-shrink: 0;
796
+ }
797
+
798
+ .pdf-viewer__props-table {
799
+ width: 100%;
800
+ border-collapse: collapse;
801
+ font-size: 13px;
802
+ }
803
+
804
+ .pdf-viewer__props-table tr + tr {
805
+ border-top: 1px solid var(--pdf-dropdown-border);
806
+ }
807
+
808
+ .pdf-viewer__props-label {
809
+ padding: 9px 14px 9px 0;
810
+ color: var(--pdf-text-muted);
811
+ white-space: nowrap;
812
+ vertical-align: top;
813
+ width: 90px;
814
+ }
815
+
816
+ .pdf-viewer__props-value {
817
+ padding: 9px 0;
818
+ color: var(--pdf-text);
819
+ word-break: break-word;
820
+ }
821
+
822
+ /* ========================================
823
+ Error
824
+ ======================================== */
825
+
826
+ .pdf-viewer__error {
827
+ display: flex;
828
+ align-items: center;
829
+ justify-content: center;
830
+ flex: 1;
831
+ padding: 32px;
832
+ text-align: center;
833
+ color: var(--pdf-text-muted);
834
+ }
835
+
836
+ /* ========================================
837
+ Mobile / small-screen layout
838
+ ======================================== */
839
+
840
+ @media (max-width: 640px) {
841
+ .pdf-viewer__toolbar {
842
+ height: auto;
843
+ min-height: 44px;
844
+ gap: 2px;
845
+ padding: 6px 8px;
846
+ }
847
+
848
+ .pdf-viewer__btn {
849
+ width: 36px;
850
+ height: 36px;
851
+ }
852
+
853
+ .pdf-viewer__btn svg {
854
+ width: 18px;
855
+ height: 18px;
856
+ }
857
+
858
+ .pdf-viewer__page-input {
859
+ width: 36px;
860
+ height: 28px;
861
+ font-size: 14px;
862
+ border-radius: 4px;
863
+ padding: 0 4px;
864
+ }
865
+
866
+ .pdf-viewer__page-count {
867
+ font-size: 13px;
868
+ margin-left: 1px;
869
+ }
870
+
871
+ .pdf-viewer__page-count-desktop {
872
+ display: none;
873
+ }
874
+
875
+ .pdf-viewer__page-count-mobile {
876
+ display: inline;
877
+ }
878
+
879
+ .pdf-viewer__separator {
880
+ display: none;
881
+ }
882
+
883
+ /* Flatten toolbar sections so order works across all items */
884
+ .pdf-viewer__toolbar-section,
885
+ .pdf-viewer__toolbar-section--center,
886
+ .pdf-viewer__toolbar-section--end {
887
+ display: contents;
888
+ }
889
+
890
+ /* Left: sidebar, search */
891
+ .pdf-viewer__search-toggle { order: 2; }
892
+
893
+ /* Center: zoom */
894
+ .pdf-viewer__zoom { order: 10; margin: 0 auto; }
895
+
896
+ /* Right: pagination, action menu */
897
+ .pdf-viewer__navigation { order: 20; }
898
+ .pdf-viewer__more-menu { order: 30; }
899
+
900
+ /* Hide zoom dropdown on mobile, keep +/- */
901
+ .pdf-viewer__zoom-dropdown {
902
+ display: none;
903
+ }
904
+
905
+ /* Hide all extra toolbar items (search, rotate, download, etc.) */
906
+ .pdf-viewer__toolbar-extras {
907
+ display: none;
908
+ }
909
+
910
+ .pdf-viewer__hide-mobile {
911
+ display: none;
912
+ }
913
+
914
+ .pdf-viewer__show-mobile {
915
+ display: contents;
916
+ }
917
+
918
+ .pdf-viewer__navigation > .pdf-viewer__btn {
919
+ display: none;
920
+ }
921
+
922
+ /* Search panel: full width on mobile */
923
+ .pdf-viewer__search-panel {
924
+ position: fixed;
925
+ top: 52px;
926
+ left: 8px;
927
+ right: 8px;
928
+ bottom: auto;
929
+ width: auto;
930
+ border-radius: 6px;
931
+ z-index: 200;
932
+ }
933
+
934
+ .pdf-viewer__search-input-wrapper {
935
+ flex: 1;
936
+ min-width: 0;
937
+ }
938
+
939
+ .pdf-viewer__search-panel-input {
940
+ width: 100%;
941
+ height: 36px;
942
+ font-size: 16px;
943
+ }
944
+
945
+ .pdf-viewer__pages {
946
+ padding: 8px;
947
+ gap: 8px;
948
+ }
949
+
950
+ /* Sidebar overlays content on mobile */
951
+ .pdf-viewer__sidebar {
952
+ position: absolute;
953
+ top: 0;
954
+ left: 0;
955
+ bottom: 0;
956
+ z-index: 10;
957
+ width: 220px;
958
+ box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
959
+ }
960
+
961
+ .pdf-viewer__body {
962
+ position: relative;
963
+ }
964
+ }
965
+
966
+ /* ========================================
967
+ Print styles
968
+ ======================================== */
969
+
970
+ @media print {
971
+ .pdf-viewer__toolbar,
972
+ .pdf-viewer__sidebar,
973
+ .pdf-viewer__modal-backdrop {
974
+ display: none !important;
975
+ }
976
+
977
+ .pdf-viewer,
978
+ .pdf-viewer__body,
979
+ .pdf-viewer__pages {
980
+ display: block !important;
981
+ position: static !important;
982
+ overflow: visible !important;
983
+ height: auto !important;
984
+ width: auto !important;
985
+ flex: none !important;
986
+ }
987
+
988
+ .pdf-viewer__pages {
989
+ padding: 0 !important;
990
+ gap: 0 !important;
991
+ }
992
+
993
+ .pdf-viewer__page-wrapper {
994
+ break-inside: avoid;
995
+ page-break-inside: avoid;
996
+ page-break-after: always;
997
+ margin: 0 !important;
998
+ padding: 0 !important;
999
+ }
1000
+
1001
+ .pdf-viewer__page-wrapper:last-child {
1002
+ page-break-after: auto;
1003
+ }
1004
+
1005
+ .pdf-viewer__page {
1006
+ box-shadow: none !important;
1007
+ margin: 0 !important;
1008
+ }
1009
+
1010
+ .pdf-viewer__page canvas {
1011
+ max-width: 100% !important;
1012
+ height: auto !important;
1013
+ }
1014
+
1015
+ .pdf-viewer__page-text-layer {
1016
+ display: none !important;
1017
+ }
1018
+
1019
+ .pdf-viewer__page-placeholder {
1020
+ display: none !important;
1021
+ }
1022
+ }