@robertraaijmakers/pptb-securityplugin 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,754 @@
1
+ :root {
2
+ --bg: #f6f2ec;
3
+ --panel: #ffffff;
4
+ --ink: #222118;
5
+ --muted: #6c675f;
6
+ --accent: #d35400;
7
+ --accent-dark: #a84400;
8
+ --border: #e2d8cb;
9
+ --shadow: rgba(0, 0, 0, 0.08);
10
+ --radius: 12px;
11
+ --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
12
+ --display: "Sora", "Segoe UI", sans-serif;
13
+ }
14
+
15
+ * {
16
+ box-sizing: border-box;
17
+ }
18
+
19
+ body {
20
+ margin: 0;
21
+ font-family: var(--display);
22
+ color: var(--ink);
23
+ background: radial-gradient(circle at top left, #fff6e9, #f0e6da);
24
+ min-height: 100vh;
25
+ }
26
+
27
+ body.theme-dark {
28
+ --bg: #141311;
29
+ --panel: #1d1b18;
30
+ --ink: #f2efe9;
31
+ --muted: #b7afa3;
32
+ --accent: #f39c4a;
33
+ --accent-dark: #cc7f32;
34
+ --border: #3a342e;
35
+ --shadow: rgba(0, 0, 0, 0.45);
36
+ background: radial-gradient(circle at top left, #1f1b17, #120f0d);
37
+ }
38
+
39
+ body.theme-dark .panel,
40
+ body.theme-dark .logs {
41
+ background: var(--panel);
42
+ }
43
+
44
+ body.theme-dark .tab-panel {
45
+ color: var(--ink);
46
+ }
47
+
48
+ body.theme-dark select,
49
+ body.theme-dark .filter-select,
50
+ body.theme-dark .multi-select-button,
51
+ body.theme-dark .multi-select-menu,
52
+ body.theme-dark .btn,
53
+ body.theme-dark .tab-button {
54
+ background: #24201c;
55
+ color: var(--ink);
56
+ border-color: var(--border);
57
+ }
58
+
59
+ body.theme-dark .tab-button.active {
60
+ background: var(--accent);
61
+ border-color: var(--accent);
62
+ color: #1a120b;
63
+ }
64
+
65
+ body.theme-dark .badge {
66
+ background: #2b2621;
67
+ }
68
+
69
+ body.theme-dark .assignment-status-pill {
70
+ background: #2a241f;
71
+ color: var(--ink);
72
+ }
73
+
74
+ body.theme-dark .loading-card {
75
+ background: #241f1b;
76
+ border-color: var(--border);
77
+ }
78
+
79
+ body.theme-dark .loading-progress {
80
+ background: #2b2520;
81
+ }
82
+
83
+ body.theme-dark .table tbody tr:hover {
84
+ background: #231f1b;
85
+ }
86
+
87
+ #app {
88
+ margin: 10px;
89
+ display: flex;
90
+ flex-direction: column;
91
+ gap: 12px;
92
+ }
93
+
94
+ .header {
95
+ display: flex;
96
+ justify-content: space-between;
97
+ align-items: center;
98
+ gap: 16px;
99
+ background: var(--panel);
100
+ padding: 20px 24px;
101
+ border-radius: var(--radius);
102
+ box-shadow: 0 10px 30px var(--shadow);
103
+ }
104
+
105
+ .header-actions {
106
+ display: flex;
107
+ align-items: center;
108
+ gap: 16px;
109
+ }
110
+
111
+ .btn.theme-toggle {
112
+ padding: 4px;
113
+ width: auto;
114
+ height: auto;
115
+ aspect-ratio: 1 / 1;
116
+ min-width: 32px;
117
+ min-height: 32px;
118
+ max-width: 40px;
119
+ max-height: 40px;
120
+ }
121
+
122
+ .theme-toggle {
123
+ border-radius: 999px;
124
+ background: transparent;
125
+ border: 1px solid var(--border);
126
+ color: var(--ink);
127
+ display: inline-flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ line-height: 0;
131
+ }
132
+
133
+ body.theme-dark .theme-toggle {
134
+ background: rgba(0, 0, 0, 0.2);
135
+ }
136
+
137
+ .theme-icon {
138
+ width: 100%;
139
+ height: 100%;
140
+ display: block;
141
+ max-width: 100%;
142
+ max-height: 100%;
143
+ pointer-events: none;
144
+ }
145
+
146
+ .theme-icon-sun {
147
+ fill: none;
148
+ stroke: currentColor;
149
+ stroke-width: 1.8;
150
+ stroke-linecap: round;
151
+ stroke-linejoin: round;
152
+ }
153
+
154
+ .theme-icon-moon {
155
+ fill: currentColor;
156
+ stroke: none;
157
+ }
158
+
159
+ .theme-icon-sun {
160
+ display: inline-block;
161
+ }
162
+
163
+ .theme-icon-moon {
164
+ display: none;
165
+ }
166
+
167
+ body.theme-dark .theme-icon-sun {
168
+ display: none;
169
+ }
170
+
171
+ body.theme-dark .theme-icon-moon {
172
+ display: inline-block;
173
+ }
174
+
175
+ .subtitle {
176
+ margin: 6px 0 0;
177
+ color: var(--muted);
178
+ }
179
+
180
+ .badge {
181
+ padding: 8px 12px;
182
+ border-radius: 999px;
183
+ background: #1c1b18;
184
+ color: #fff;
185
+ font-size: 12px;
186
+ letter-spacing: 0.5px;
187
+ text-transform: uppercase;
188
+ }
189
+
190
+ .controls {
191
+ display: grid;
192
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
193
+ gap: 16px;
194
+ background: var(--panel);
195
+ padding: 16px 20px;
196
+ border-radius: var(--radius);
197
+ border: 1px solid var(--border);
198
+ }
199
+
200
+ .controls-group {
201
+ display: contents;
202
+ }
203
+
204
+ .controls-group.hidden {
205
+ display: none;
206
+ }
207
+
208
+ .tabs {
209
+ display: flex;
210
+ gap: 8px;
211
+ padding: 0;
212
+ }
213
+
214
+ .tab-button {
215
+ border: 1px solid var(--border);
216
+ background: #fff;
217
+ border-radius: 999px;
218
+ padding: 6px 14px;
219
+ font-size: 12px;
220
+ text-transform: uppercase;
221
+ letter-spacing: 0.6px;
222
+ cursor: pointer;
223
+ }
224
+
225
+ .tab-button.active {
226
+ background: var(--accent);
227
+ border-color: var(--accent);
228
+ color: #fff;
229
+ }
230
+
231
+ .tab-panel.hidden {
232
+ display: none;
233
+ }
234
+
235
+ .control {
236
+ display: flex;
237
+ flex-direction: column;
238
+ gap: 6px;
239
+ }
240
+
241
+ .role-filter {
242
+ min-width: 200px;
243
+ }
244
+
245
+ .multi-select {
246
+ position: relative;
247
+ }
248
+
249
+ .multi-select-button {
250
+ width: 100%;
251
+ padding: 10px 12px;
252
+ border-radius: 8px;
253
+ border: 1px solid var(--border);
254
+ background: #fff;
255
+ cursor: pointer;
256
+ text-align: left;
257
+ }
258
+
259
+ .multi-select-menu {
260
+ position: absolute;
261
+ top: calc(100% + 6px);
262
+ left: 0;
263
+ right: 0;
264
+ background: #fff;
265
+ border: 1px solid var(--border);
266
+ border-radius: 12px;
267
+ box-shadow: 0 12px 24px var(--shadow);
268
+ padding: 12px;
269
+ z-index: 3;
270
+ }
271
+
272
+ .multi-select-menu.hidden {
273
+ display: none;
274
+ }
275
+
276
+ .multi-select-actions {
277
+ display: flex;
278
+ justify-content: space-between;
279
+ margin-bottom: 8px;
280
+ }
281
+
282
+ .link-button {
283
+ background: none;
284
+ border: none;
285
+ color: var(--accent-dark);
286
+ font-size: 12px;
287
+ text-transform: uppercase;
288
+ letter-spacing: 0.4px;
289
+ cursor: pointer;
290
+ padding: 0;
291
+ }
292
+
293
+ .multi-select-list {
294
+ max-height: 220px;
295
+ overflow-y: auto;
296
+ display: flex;
297
+ flex-direction: column;
298
+ gap: 6px;
299
+ }
300
+
301
+ .multi-select-item {
302
+ display: flex;
303
+ align-items: center;
304
+ gap: 8px;
305
+ font-size: 13px;
306
+ }
307
+
308
+ .checkbox-control {
309
+ justify-content: flex-end;
310
+ }
311
+
312
+ .checkbox-label {
313
+ display: inline-flex;
314
+ align-items: center;
315
+ gap: 10px;
316
+ font-size: 12px;
317
+ text-transform: uppercase;
318
+ letter-spacing: 0.6px;
319
+ color: var(--muted);
320
+ }
321
+
322
+ .checkbox-label input {
323
+ width: 16px;
324
+ height: 16px;
325
+ }
326
+
327
+ label {
328
+ font-size: 12px;
329
+ text-transform: uppercase;
330
+ letter-spacing: 0.6px;
331
+ color: var(--muted);
332
+ }
333
+
334
+ select,
335
+ button {
336
+ font-family: var(--display);
337
+ }
338
+
339
+ select {
340
+ padding: 10px 12px;
341
+ border-radius: 8px;
342
+ border: 1px solid var(--border);
343
+ background: #fff;
344
+ }
345
+
346
+ .btn {
347
+ padding: 10px 16px;
348
+ border-radius: 10px;
349
+ border: 1px solid var(--border);
350
+ background: #fff;
351
+ cursor: pointer;
352
+ font-weight: 600;
353
+ transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
354
+ }
355
+
356
+ .btn:not(:disabled):hover {
357
+ background: #f6efe6;
358
+ border-color: #d4c5b6;
359
+ }
360
+
361
+ body.theme-dark .btn:not(:disabled):hover {
362
+ background: #2a241f;
363
+ border-color: #3f362f;
364
+ }
365
+
366
+ .btn:disabled {
367
+ cursor: not-allowed;
368
+ opacity: 0.55;
369
+ }
370
+
371
+ .btn.primary {
372
+ background: var(--accent);
373
+ color: #fff;
374
+ border-color: var(--accent);
375
+ }
376
+
377
+ .btn.primary:hover {
378
+ background: var(--accent-dark);
379
+ }
380
+
381
+ .summary {
382
+ background: var(--panel);
383
+ padding: 16px 20px;
384
+ border-radius: var(--radius);
385
+ border: 1px solid var(--border);
386
+ font-size: 14px;
387
+ color: var(--muted);
388
+ }
389
+
390
+ .panel {
391
+ background: var(--panel);
392
+ border-radius: var(--radius);
393
+ border: 1px solid var(--border);
394
+ box-shadow: 0 8px 24px var(--shadow);
395
+ overflow-x: auto;
396
+ -webkit-overflow-scrolling: touch;
397
+ position: relative;
398
+ min-height: 420px;
399
+ }
400
+
401
+ .panel-header {
402
+ display: flex;
403
+ justify-content: space-between;
404
+ align-items: flex-start;
405
+ padding: 16px 20px;
406
+ border-bottom: 1px solid var(--border);
407
+ }
408
+
409
+ .panel-header-text {
410
+ display: flex;
411
+ flex-direction: column;
412
+ gap: 4px;
413
+ }
414
+
415
+ .panel-actions {
416
+ display: flex;
417
+ gap: 10px;
418
+ align-items: center;
419
+ }
420
+
421
+ .pending-count {
422
+ min-width: 26px;
423
+ height: 26px;
424
+ padding: 0 8px;
425
+ border-radius: 999px;
426
+ background: var(--accent);
427
+ color: #fff;
428
+ font-size: 12px;
429
+ font-weight: 700;
430
+ display: inline-flex;
431
+ align-items: center;
432
+ justify-content: center;
433
+ }
434
+
435
+ .pending-count.hidden {
436
+ display: none;
437
+ }
438
+
439
+ .panel-body {
440
+ padding: 16px 20px;
441
+ }
442
+
443
+ .assignment-controls {
444
+ display: grid;
445
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
446
+ gap: 16px;
447
+ padding: 16px 20px;
448
+ }
449
+
450
+
451
+ .assignment-list {
452
+ border-top: 1px solid var(--border);
453
+ padding: 16px 20px 20px;
454
+ }
455
+
456
+ .assignment-toolbar {
457
+ display: flex;
458
+ justify-content: flex-end;
459
+ gap: 12px;
460
+ margin-bottom: 12px;
461
+ }
462
+
463
+ .assignment-table {
464
+ overflow-x: auto;
465
+ }
466
+
467
+ .assignment-table .table tbody td {
468
+ vertical-align: middle;
469
+ }
470
+
471
+ .assignment-subtitle {
472
+ font-size: 12px;
473
+ color: var(--muted);
474
+ }
475
+
476
+ .assignment-status-pill {
477
+ padding: 4px 10px;
478
+ border-radius: 999px;
479
+ background: #f0e6da;
480
+ font-size: 11px;
481
+ text-transform: uppercase;
482
+ letter-spacing: 0.4px;
483
+ color: var(--ink);
484
+ }
485
+
486
+ .table-loading {
487
+ position: absolute;
488
+ inset: 76px 0 0 0;
489
+ display: flex;
490
+ align-items: center;
491
+ justify-content: center;
492
+ backdrop-filter: blur(2px);
493
+ z-index: 2;
494
+ }
495
+
496
+ .table-loading.hidden {
497
+ display: none;
498
+ }
499
+
500
+ .table-empty {
501
+ position: absolute;
502
+ inset: 76px 0 0 0;
503
+ display: flex;
504
+ flex-direction: column;
505
+ align-items: center;
506
+ justify-content: center;
507
+ text-align: center;
508
+ color: var(--muted);
509
+ gap: 6px;
510
+ padding: 24px;
511
+ }
512
+
513
+ .table-empty.hidden {
514
+ display: none;
515
+ }
516
+
517
+ .table-empty-title {
518
+ font-weight: 600;
519
+ color: var(--ink);
520
+ }
521
+
522
+ .table-empty-text {
523
+ font-size: 13px;
524
+ }
525
+
526
+ .loading-card {
527
+ width: min(360px, 90%);
528
+ background: #fff;
529
+ border: 1px solid var(--border);
530
+ border-radius: 16px;
531
+ padding: 20px;
532
+ box-shadow: 0 10px 30px var(--shadow);
533
+ text-align: center;
534
+ }
535
+
536
+ .loading-title {
537
+ font-weight: 600;
538
+ margin-bottom: 12px;
539
+ }
540
+
541
+ .loading-progress {
542
+ height: 10px;
543
+ border-radius: 999px;
544
+ background: #f0e6da;
545
+ overflow: hidden;
546
+ }
547
+
548
+ .loading-bar {
549
+ height: 100%;
550
+ width: 0;
551
+ background: var(--accent);
552
+ transition: width 200ms ease;
553
+ }
554
+
555
+ .loading-text {
556
+ margin-top: 10px;
557
+ font-size: 12px;
558
+ color: var(--muted);
559
+ }
560
+
561
+ .table.hidden {
562
+ visibility: hidden;
563
+ }
564
+
565
+ .table {
566
+ width: 100%;
567
+ border-collapse: collapse;
568
+ font-size: 14px;
569
+ }
570
+
571
+ .table thead th {
572
+ text-align: left;
573
+ font-size: 12px;
574
+ text-transform: uppercase;
575
+ letter-spacing: 0.6px;
576
+ color: var(--muted);
577
+ padding: 12px 16px;
578
+ border-bottom: 1px solid var(--border);
579
+ }
580
+
581
+ .sort-button {
582
+ border: none;
583
+ background: none;
584
+ padding: 0;
585
+ font: inherit;
586
+ color: inherit;
587
+ text-transform: inherit;
588
+ letter-spacing: inherit;
589
+ cursor: pointer;
590
+ display: inline-flex;
591
+ align-items: center;
592
+ gap: 6px;
593
+ }
594
+
595
+ .info-tooltip {
596
+ display: inline-flex;
597
+ align-items: center;
598
+ justify-content: center;
599
+ width: 18px;
600
+ height: 18px;
601
+ margin-left: 6px;
602
+ border-radius: 999px;
603
+ border: 1px solid var(--border);
604
+ color: var(--muted);
605
+ font-size: 11px;
606
+ font-weight: 700;
607
+ cursor: help;
608
+ position: relative;
609
+ }
610
+
611
+ .info-tooltip::after {
612
+ content: attr(data-tooltip);
613
+ position: absolute;
614
+ bottom: calc(100% + 8px);
615
+ left: 50%;
616
+ transform: translateX(-50%);
617
+ min-width: 220px;
618
+ max-width: 280px;
619
+ padding: 10px 12px;
620
+ border-radius: 8px;
621
+ background: var(--panel);
622
+ color: var(--ink);
623
+ border: 1px solid var(--border);
624
+ box-shadow: 0 8px 20px var(--shadow);
625
+ font-size: 12px;
626
+ text-transform: none;
627
+ letter-spacing: 0;
628
+ line-height: 1.4;
629
+ opacity: 0;
630
+ pointer-events: none;
631
+ transition: opacity 160ms ease, transform 160ms ease;
632
+ z-index: 5;
633
+ }
634
+
635
+ .info-tooltip:hover::after,
636
+ .info-tooltip:focus-visible::after {
637
+ opacity: 1;
638
+ transform: translateX(-50%) translateY(-2px);
639
+ }
640
+
641
+ .sort-button::after {
642
+ content: "";
643
+ display: inline-block;
644
+ width: 0;
645
+ height: 0;
646
+ border-left: 4px solid transparent;
647
+ border-right: 4px solid transparent;
648
+ border-top: 6px solid transparent;
649
+ }
650
+
651
+ .sort-button.sort-asc::after {
652
+ border-top-color: var(--muted);
653
+ }
654
+
655
+ .sort-button.sort-desc::after {
656
+ border-top-color: var(--muted);
657
+ transform: rotate(180deg);
658
+ }
659
+
660
+ .filter-row th {
661
+ padding: 6px 12px 12px;
662
+ }
663
+
664
+ .filter-select {
665
+ width: 100%;
666
+ padding: 6px 8px;
667
+ border-radius: 8px;
668
+ border: 1px solid var(--border);
669
+ background: #fff;
670
+ font-size: 12px;
671
+ text-transform: none;
672
+ letter-spacing: 0;
673
+ }
674
+
675
+ .table tbody td {
676
+ padding: 12px 16px;
677
+ border-bottom: 1px solid var(--border);
678
+ }
679
+
680
+ .table.hide-ownership thead tr:first-child th:nth-child(2),
681
+ .table.hide-ownership thead tr.filter-row th:nth-child(2),
682
+ .table.hide-ownership tbody td:nth-child(2) {
683
+ display: none;
684
+ }
685
+
686
+ .ownership {
687
+ color: var(--muted);
688
+ font-size: 12px;
689
+ text-transform: uppercase;
690
+ letter-spacing: 0.5px;
691
+ }
692
+
693
+ .level-select {
694
+ min-width: 165px;
695
+ }
696
+
697
+ .level-select.pending-change {
698
+ background: #ffe6c7;
699
+ border-color: #e1a56b;
700
+ }
701
+
702
+ body.theme-dark .level-select.pending-change {
703
+ background: #3a2a1e;
704
+ border-color: #b97638;
705
+ }
706
+
707
+ .level-none {
708
+ color: #6d6a63;
709
+ }
710
+
711
+ .level-user {
712
+ color: #5c5b57;
713
+ }
714
+
715
+ .level-businessUnit {
716
+ color: #2f7a3d;
717
+ }
718
+
719
+ .level-parentChild {
720
+ color: #1f6fa8;
721
+ }
722
+
723
+ .level-organization {
724
+ color: #9c2c2c;
725
+ }
726
+
727
+ .table tbody tr:hover {
728
+ background: #fdf9f3;
729
+ }
730
+
731
+ .muted {
732
+ color: var(--muted);
733
+ }
734
+
735
+ .logs {
736
+ background: var(--panel);
737
+ border-radius: var(--radius);
738
+ border: 1px solid var(--border);
739
+ padding: 16px 20px;
740
+ }
741
+
742
+ .logs pre {
743
+ font-family: var(--mono);
744
+ font-size: 12px;
745
+ margin: 0;
746
+ white-space: pre-wrap;
747
+ }
748
+
749
+ @media (max-width: 960px) {
750
+ .table {
751
+ display: block;
752
+ overflow-x: auto;
753
+ }
754
+ }