@kiteapps/lite-ui 0.1.0 → 0.1.1

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/pages.css DELETED
@@ -1,2070 +0,0 @@
1
- /* src/components/admin-ui.css */
2
- :root {
3
- --ad-dark:#3e4d56;
4
- --ad-nav:#586d78;
5
- --ad-sidebar:#edf0f1;
6
- --ad-line:#d9dddf;
7
- --ad-soft:#f2f4f4;
8
- --ad-green:#89c449;
9
- --ad-link:#1686ab;
10
- --ad-text:#252b2e;
11
- }
12
- .ad-shell {
13
- height: 100vh;
14
- min-height: 500px;
15
- display: flex;
16
- flex-direction: column;
17
- background: #fff;
18
- overflow: hidden;
19
- }
20
- .ad-header {
21
- height: 69px;
22
- color: #fff;
23
- background: var(--ad-dark);
24
- flex: none;
25
- }
26
- .ad-header-top {
27
- height: 42px;
28
- display: flex;
29
- align-items: center;
30
- padding: 0 10px 0 14px;
31
- position: relative;
32
- gap: 26px;
33
- }
34
- .ad-brand {
35
- display: flex;
36
- align-items: center;
37
- gap: 8px;
38
- font-size: 16px;
39
- font-weight: 600;
40
- letter-spacing: -.3px;
41
- white-space: nowrap;
42
- line-height: 20px;
43
- }
44
- .ad-brand svg {
45
- color: #c4d1d5;
46
- }
47
- .ad-brand-orbit {
48
- width: 24px;
49
- height: 24px;
50
- border: 2px solid #6eb4ab;
51
- border-left-color: transparent;
52
- border-bottom-color: #db9b31;
53
- border-radius: 50%;
54
- transform: rotate(-20deg);
55
- margin-left: -12px;
56
- margin-top: -6px;
57
- }
58
- .ad-directory {
59
- border: 0;
60
- background: transparent;
61
- color: #fff;
62
- font-size: 11px;
63
- display: flex;
64
- align-items: center;
65
- gap: 16px;
66
- padding: 0;
67
- }
68
- .ad-button--download {
69
- position: absolute;
70
- left: 50%;
71
- transform: translateX(-50%);
72
- top: 0;
73
- background: #e20d2b !important;
74
- color: #fff !important;
75
- border-color: #e20d2b !important;
76
- font-weight: 700;
77
- height: 19px !important;
78
- min-height: 19px !important;
79
- padding: 0 8px !important;
80
- font-size: 10px !important;
81
- }
82
- .ad-header-right {
83
- margin-left: auto;
84
- align-self: flex-start;
85
- display: flex;
86
- align-items: center;
87
- gap: 13px;
88
- font-size: 10px;
89
- padding-top: 2px;
90
- white-space: nowrap;
91
- }
92
- .ad-header-right button {
93
- border: 0;
94
- background: transparent;
95
- color: inherit;
96
- padding: 0;
97
- display: inline-flex;
98
- align-items: center;
99
- gap: 2px;
100
- font-size: 10px;
101
- }
102
- .ad-bell {
103
- position: relative;
104
- display: inline-flex;
105
- }
106
- .ad-bell i {
107
- background: #ed282e;
108
- border-radius: 8px;
109
- font-size: 9px;
110
- position: absolute;
111
- top: -9px;
112
- right: -7px;
113
- padding: 0 4px;
114
- font-style: normal;
115
- }
116
- .ad-header-bottom {
117
- height: 27px;
118
- display: flex;
119
- align-items: stretch;
120
- padding-left: 10px;
121
- position: relative;
122
- }
123
- .ad-main-nav {
124
- display: flex;
125
- height: 27px;
126
- }
127
- .ad-main-nav button {
128
- border: 0;
129
- background: var(--ad-nav);
130
- color: #fff;
131
- min-width: 78px;
132
- padding: 0 14px;
133
- border-right: 1px solid #50636e;
134
- font-size: 11px;
135
- }
136
- .ad-main-nav button.is-active {
137
- color: #222;
138
- background: #fff;
139
- }
140
- .ad-main-nav button:hover:not(.is-active) {
141
- background: #667d87;
142
- }
143
- .ad-header-search {
144
- position: absolute;
145
- right: 10px;
146
- top: -20px;
147
- height: 19px;
148
- width: 223px;
149
- background: #b9c3c8;
150
- color: #6f7d84;
151
- display: flex;
152
- align-items: center;
153
- padding: 0 5px;
154
- gap: 5px;
155
- }
156
- .ad-header-search input {
157
- border: 0;
158
- outline: 0;
159
- min-width: 0;
160
- width: 100%;
161
- background: transparent;
162
- font-size: 10px;
163
- color: #34434a;
164
- }
165
- .ad-header-search input::placeholder {
166
- color: #6b7478;
167
- }
168
- .ad-domain-settings {
169
- margin-left: auto;
170
- border: 0;
171
- background: #657883;
172
- color: #fff;
173
- font-size: 10px;
174
- display: flex;
175
- align-items: center;
176
- gap: 4px;
177
- padding: 0 9px;
178
- height: 21px;
179
- margin-top: 3px;
180
- }
181
- .ad-workspace {
182
- display: flex;
183
- flex: 1;
184
- min-height: 0;
185
- }
186
- .ad-sidebar {
187
- width: 244px;
188
- flex: 0 0 244px;
189
- background: var(--ad-sidebar);
190
- padding-top: 7px;
191
- overflow: auto;
192
- }
193
- .ad-nav-heading {
194
- width: 100%;
195
- height: 28px;
196
- display: flex;
197
- align-items: center;
198
- justify-content: space-between;
199
- padding: 0 15px;
200
- border: 0;
201
- background: transparent;
202
- text-align: left;
203
- color: #111;
204
- font-size: 11px;
205
- font-weight: 600;
206
- }
207
- .ad-nav-heading:hover {
208
- background: #e1e6e8;
209
- }
210
- .ad-nav-item {
211
- width: 100%;
212
- height: 27px;
213
- display: block;
214
- border: 0;
215
- background: transparent;
216
- text-align: left;
217
- padding: 0 26px;
218
- font-size: 11px;
219
- color: #2b3032;
220
- }
221
- .ad-nav-item:hover {
222
- background: #e2e7e9;
223
- }
224
- .ad-nav-item.is-active {
225
- background: #dce0e2;
226
- border-left: 3px solid #83c348;
227
- padding-left: 23px;
228
- }
229
- .ad-main {
230
- min-width: 0;
231
- flex: 1;
232
- padding: 0 20px 48px 22px;
233
- overflow: auto;
234
- }
235
- .ad-page-header {
236
- height: 34px;
237
- display: flex;
238
- align-items: center;
239
- justify-content: space-between;
240
- border-bottom: 1px solid #e3e6e7;
241
- margin: 0 -1px 10px;
242
- }
243
- .ad-page-header h1 {
244
- margin: 0;
245
- font-size: 13px;
246
- font-weight: 600;
247
- display: flex;
248
- align-items: center;
249
- gap: 4px;
250
- }
251
- .ad-header-action {
252
- display: flex;
253
- align-items: center;
254
- }
255
- .ad-main-nav button:nth-child(1) {
256
- width: 98px;
257
- }
258
- .ad-main-nav button:nth-child(2) {
259
- width: 80px;
260
- }
261
- .ad-main-nav button:nth-child(3) {
262
- width: 114px;
263
- }
264
- .ad-main-nav button:nth-child(4) {
265
- width: 76px;
266
- }
267
- .ad-main-nav button:nth-child(5) {
268
- width: 82px;
269
- }
270
- .ad-header-search {
271
- right: 40px;
272
- }
273
- .ad-domain-settings {
274
- margin-right: 30px;
275
- }
276
- .ad-panel {
277
- border: 1px solid #e4e7e8;
278
- background: #fff;
279
- padding: 0 14px 20px;
280
- }
281
- .ad-tabs {
282
- height: 27px;
283
- display: flex;
284
- align-items: stretch;
285
- background: #edf0f1;
286
- border-bottom: 1px solid #d9dddf;
287
- margin: 0 -14px 18px;
288
- }
289
- .ad-tab {
290
- border: 0;
291
- border-right: 1px solid #dfe3e4;
292
- background: transparent;
293
- padding: 0 14px;
294
- font-size: 11px;
295
- color: #2c3335;
296
- white-space: nowrap;
297
- }
298
- .ad-tab.is-active {
299
- background: #fff;
300
- font-weight: 600;
301
- box-shadow: inset 0 2px #fff;
302
- }
303
- .ad-tab:hover:not(.is-active) {
304
- background: #e3e9eb;
305
- }
306
- .ad-section-title {
307
- font-size: 12px;
308
- line-height: 18px;
309
- margin: 20px 0 10px;
310
- font-weight: 700;
311
- }
312
- .ad-section-title:first-child {
313
- margin-top: 2px;
314
- }
315
- .ad-check-row,
316
- .ad-radio-row {
317
- display: flex;
318
- align-items: center;
319
- min-height: 27px;
320
- gap: 7px;
321
- line-height: 17px;
322
- cursor: pointer;
323
- width: max-content;
324
- max-width: 100%;
325
- }
326
- .ad-check-row input,
327
- .ad-radio-row input {
328
- position: absolute;
329
- opacity: 0;
330
- width: 1px;
331
- height: 1px;
332
- }
333
- .ad-check-box {
334
- width: 15px;
335
- height: 15px;
336
- border: 1px solid #c7cccf;
337
- background: #fff;
338
- flex: none;
339
- display: inline-grid;
340
- place-items: center;
341
- }
342
- .ad-check-row input:checked + .ad-check-box:after {
343
- content: "\2713";
344
- color: #79b83f;
345
- font-size: 14px;
346
- line-height: 1;
347
- font-weight: 700;
348
- }
349
- .ad-radio-mark {
350
- width: 14px;
351
- height: 14px;
352
- border: 1px solid #aeb8bb;
353
- border-radius: 50%;
354
- display: inline-grid;
355
- place-items: center;
356
- flex: none;
357
- }
358
- .ad-radio-row input:checked + .ad-radio-mark:after {
359
- content: "";
360
- width: 6px;
361
- height: 6px;
362
- border-radius: 50%;
363
- background: #81bf46;
364
- }
365
- .ad-check-row.is-disabled,
366
- .ad-radio-row.is-disabled {
367
- opacity: .5;
368
- cursor: not-allowed;
369
- }
370
- .ad-check-row input:focus-visible + .ad-check-box,
371
- .ad-radio-row input:focus-visible + .ad-radio-mark {
372
- outline: 2px solid #1686ab;
373
- outline-offset: 2px;
374
- }
375
- .ad-help {
376
- display: inline-flex;
377
- color: #8b969b;
378
- vertical-align: middle;
379
- cursor: help;
380
- }
381
- .ad-text-link {
382
- border: 0;
383
- padding: 0;
384
- color: var(--ad-link);
385
- background: none;
386
- font-size: 11px;
387
- }
388
- .ad-text-link:hover {
389
- text-decoration: underline;
390
- }
391
- .ad-button {
392
- min-height: 22px;
393
- display: inline-flex;
394
- align-items: center;
395
- justify-content: center;
396
- gap: 5px;
397
- padding: 2px 12px;
398
- border: 1px solid #e3e4e5;
399
- background: #eeeeef;
400
- color: #333;
401
- font-size: 11px;
402
- line-height: 16px;
403
- white-space: nowrap;
404
- }
405
- .ad-button:hover {
406
- filter: brightness(.96);
407
- }
408
- .ad-button:disabled {
409
- opacity: .55;
410
- cursor: not-allowed;
411
- }
412
- .ad-button--primary {
413
- background: var(--ad-green);
414
- border-color: var(--ad-green);
415
- color: #fff;
416
- font-weight: 600;
417
- }
418
- .ad-button--outline {
419
- background: #fff;
420
- border-color: #cbd2d5;
421
- }
422
- .ad-icon-button {
423
- border: 0;
424
- background: transparent;
425
- color: #697980;
426
- padding: 3px;
427
- display: inline-grid;
428
- place-items: center;
429
- }
430
- .ad-field {
431
- display: flex;
432
- flex-direction: column;
433
- gap: 5px;
434
- }
435
- .ad-field label {
436
- font-size: 11px;
437
- }
438
- .ad-input,
439
- .ad-select {
440
- height: 22px;
441
- min-width: 145px;
442
- border: 1px solid #cbd2d5;
443
- background: #fff;
444
- color: #222;
445
- padding: 2px 6px;
446
- font-size: 11px;
447
- border-radius: 0;
448
- }
449
- .ad-select {
450
- padding-right: 20px;
451
- }
452
- .ad-input:disabled,
453
- .ad-select:disabled {
454
- background: #f2f3f3;
455
- color: #8a969a;
456
- }
457
- .ad-input:focus,
458
- .ad-select:focus {
459
- outline: 1px solid #2e91af;
460
- border-color: #2e91af;
461
- }
462
- .ad-input::placeholder {
463
- color: #7b8589;
464
- }
465
- .ad-hint {
466
- color: #7c8589;
467
- font-size: 10px;
468
- line-height: 16px;
469
- }
470
- .ad-form-row {
471
- display: flex;
472
- align-items: flex-start;
473
- min-height: 33px;
474
- gap: 14px;
475
- }
476
- .ad-form-label {
477
- width: 166px;
478
- flex: 0 0 166px;
479
- text-align: right;
480
- padding-top: 4px;
481
- font-size: 11px;
482
- }
483
- .ad-form-label b {
484
- color: #d42639;
485
- }
486
- .ad-form-control {
487
- min-width: 0;
488
- display: flex;
489
- flex-wrap: wrap;
490
- align-items: center;
491
- gap: 6px;
492
- }
493
- .ad-form-control .ad-field {
494
- margin: 0;
495
- }
496
- .ad-form-control .ad-hint {
497
- width: 100%;
498
- }
499
- .ad-action-bar {
500
- display: flex;
501
- align-items: center;
502
- justify-content: center;
503
- gap: 8px;
504
- padding: 14px 0 0;
505
- border-top: 1px solid #edf0f1;
506
- margin-top: 14px;
507
- }
508
- .ad-status {
509
- color: #4d8e2b;
510
- font-size: 11px;
511
- margin-left: 8px;
512
- }
513
- .ad-notice {
514
- display: flex;
515
- gap: 8px;
516
- align-items: flex-start;
517
- padding: 10px 12px;
518
- margin: 10px 0;
519
- background: #edf7fa;
520
- color: #3b6473;
521
- line-height: 17px;
522
- }
523
- .ad-notice--warning {
524
- background: #fff6e8;
525
- color: #86620b;
526
- }
527
- .ad-notice svg {
528
- flex: none;
529
- }
530
- .ad-table-wrap {
531
- overflow: auto;
532
- border: 1px solid #dce1e2;
533
- }
534
- .ad-table {
535
- width: 100%;
536
- border-collapse: collapse;
537
- font-size: 11px;
538
- }
539
- .ad-table th {
540
- background: #f2f4f4;
541
- text-align: left;
542
- font-weight: 600;
543
- border-bottom: 1px solid #dce1e2;
544
- padding: 8px 10px;
545
- }
546
- .ad-table td {
547
- border-bottom: 1px solid #e6e9ea;
548
- padding: 8px 10px;
549
- }
550
- .ad-table tr:last-child td {
551
- border-bottom: 0;
552
- }
553
- .ad-table .ad-empty {
554
- text-align: center;
555
- color: #7b8589;
556
- height: 90px;
557
- }
558
- .ad-modal-backdrop {
559
- position: fixed;
560
- inset: 0;
561
- background: rgba(21, 33, 39, .35);
562
- display: flex;
563
- justify-content: center;
564
- align-items: flex-start;
565
- padding-top: 17vh;
566
- z-index: 10;
567
- }
568
- .ad-modal {
569
- width: min(510px, calc(100vw - 32px));
570
- background: #fff;
571
- box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
572
- }
573
- .ad-modal-head {
574
- height: 40px;
575
- background: #eff2f3;
576
- display: flex;
577
- align-items: center;
578
- justify-content: space-between;
579
- padding: 0 14px;
580
- font-size: 13px;
581
- }
582
- .ad-modal-body {
583
- padding: 18px;
584
- }
585
- .ad-modal-footer {
586
- border-top: 1px solid #e2e6e8;
587
- padding: 10px 14px;
588
- display: flex;
589
- justify-content: flex-end;
590
- gap: 8px;
591
- }
592
- .ad-footer {
593
- height: 20px;
594
- flex: none;
595
- background: #e8ecee;
596
- display: flex;
597
- align-items: center;
598
- justify-content: center;
599
- gap: 18px;
600
- font-size: 10px;
601
- color: #242b2e;
602
- white-space: nowrap;
603
- overflow: hidden;
604
- }
605
- .ad-footer button,
606
- .ad-footer a {
607
- border: 0;
608
- background: none;
609
- padding: 0;
610
- color: inherit;
611
- font-size: 10px;
612
- text-decoration: none;
613
- }
614
- .ad-footer button:hover,
615
- .ad-footer a:hover {
616
- text-decoration: underline;
617
- }
618
- :focus-visible {
619
- outline: 2px solid #1686ab;
620
- outline-offset: 2px;
621
- }
622
- @media (max-width:760px) {
623
- .ad-header {
624
- height: auto;
625
- }
626
- .ad-header-top {
627
- height: 62px;
628
- align-items: center;
629
- padding: 0 12px;
630
- }
631
- .ad-header-right,
632
- .ad-button--download,
633
- .ad-header-search,
634
- .ad-domain-settings {
635
- display: none;
636
- }
637
- .ad-header-bottom {
638
- padding-left: 0;
639
- overflow: auto;
640
- }
641
- .ad-main-nav {
642
- min-width: max-content;
643
- }
644
- .ad-sidebar {
645
- width: 175px;
646
- flex-basis: 175px;
647
- }
648
- .ad-main {
649
- padding: 0 12px 30px;
650
- }
651
- .ad-form-label {
652
- width: 120px;
653
- flex-basis: 120px;
654
- }
655
- .ad-footer {
656
- justify-content: flex-start;
657
- padding: 0 12px;
658
- }
659
- }
660
- @media (max-width:520px) {
661
- .ad-workspace {
662
- display: block;
663
- }
664
- .ad-sidebar {
665
- width: auto;
666
- padding: 5px 0;
667
- display: flex;
668
- overflow: auto;
669
- white-space: nowrap;
670
- }
671
- .ad-nav-group {
672
- flex: none;
673
- }
674
- .ad-nav-heading {
675
- width: auto;
676
- gap: 8px;
677
- }
678
- .ad-nav-items {
679
- position: absolute;
680
- z-index: 3;
681
- background: #edf0f1;
682
- box-shadow: 0 5px 12px rgba(0, 0, 0, .12);
683
- }
684
- .ad-nav-item {
685
- min-width: 150px;
686
- }
687
- .ad-form-row {
688
- display: block;
689
- margin-bottom: 10px;
690
- }
691
- .ad-form-label {
692
- width: auto;
693
- text-align: left;
694
- padding: 0 0 4px;
695
- }
696
- .ad-tabs {
697
- overflow: auto;
698
- }
699
- .ad-brand {
700
- font-size: 13px;
701
- }
702
- .ad-directory {
703
- margin-left: auto;
704
- font-size: 10px;
705
- }
706
- }
707
- .ad-option-list {
708
- margin-left: 23px;
709
- }
710
- .ad-option-inline {
711
- display: flex;
712
- align-items: center;
713
- gap: 9px;
714
- flex-wrap: wrap;
715
- min-height: 27px;
716
- }
717
- .ad-indent {
718
- margin-left: 24px;
719
- }
720
- .ad-tail-link {
721
- text-align: right;
722
- margin: 7px 0 5px;
723
- font-size: 11px;
724
- }
725
- .ad-form-block {
726
- padding: 4px 0 10px;
727
- }
728
- .ad-form-block .ad-form-row {
729
- margin-bottom: 3px;
730
- }
731
- .ad-form-control .ad-radio-row {
732
- min-width: 14px;
733
- }
734
- .ad-short {
735
- min-width: 0;
736
- width: 80px;
737
- }
738
- .ad-footnote {
739
- color: #7c8589;
740
- font-size: 10px;
741
- text-align: center;
742
- }
743
- .ad-notes {
744
- border-top: 1px solid #e7eaeb;
745
- margin: 18px -14px -20px;
746
- padding: 14px;
747
- line-height: 19px;
748
- }
749
- .ad-notes ul {
750
- margin: 8px 0 0 5px;
751
- padding-left: 16px;
752
- }
753
- .ad-notes li::marker {
754
- color: #8cc349;
755
- }
756
- .ad-inline-save .ad-action-bar {
757
- border: 0;
758
- justify-content: flex-start;
759
- margin: 0 0 0 180px;
760
- padding: 2px 0;
761
- }
762
- .ad-spaced {
763
- margin: 12px 0;
764
- }
765
- .ad-textarea {
766
- width: 100%;
767
- border: 1px solid #cbd2d5;
768
- resize: vertical;
769
- padding: 7px;
770
- }
771
- .ad-modal-options {
772
- display: grid;
773
- gap: 4px;
774
- }
775
- .ad-status-dot {
776
- width: 8px;
777
- height: 8px;
778
- border-radius: 50%;
779
- background: #86c247;
780
- }
781
- .ad-architecture {
782
- text-align: center;
783
- padding: 12px 0 30px;
784
- }
785
- .ad-architecture h3 {
786
- font-size: 14px;
787
- margin: 5px 0 24px;
788
- }
789
- .ad-architecture-diagram {
790
- display: flex;
791
- align-items: center;
792
- justify-content: center;
793
- gap: 22px;
794
- color: #5b6970;
795
- margin: 0 auto 30px;
796
- }
797
- .ad-architecture-diagram div {
798
- min-width: 118px;
799
- border: 1px solid #cfd9dd;
800
- padding: 18px 12px;
801
- color: #32444d;
802
- background: #f6f8f8;
803
- line-height: 17px;
804
- }
805
- .ad-architecture .ad-tabs {
806
- justify-content: center;
807
- margin-bottom: 15px;
808
- }
809
- .ad-architecture p {
810
- margin: 15px 0;
811
- color: #59676d;
812
- }
813
- .story-row {
814
- display: flex;
815
- align-items: center;
816
- flex-wrap: wrap;
817
- gap: 8px;
818
- }
819
- .story-column {
820
- display: grid;
821
- gap: 12px;
822
- max-width: 500px;
823
- }
824
- .ad-proxy {
825
- padding: 15px 8px;
826
- }
827
- .ad-proxy strong {
828
- display: block;
829
- margin-bottom: 12px;
830
- }
831
- .ad-proxy dl {
832
- display: grid;
833
- grid-template-columns: 120px 1fr;
834
- row-gap: 10px;
835
- margin: 0;
836
- }
837
- .ad-proxy dt {
838
- color: #6b777c;
839
- }
840
- .ad-proxy dd {
841
- margin: 0;
842
- }
843
- .ad-success {
844
- color: #70ad33;
845
- }
846
- .ad-site-domain {
847
- display: flex;
848
- align-items: center;
849
- gap: 15px;
850
- margin: 0 0 12px;
851
- }
852
- .ad-site-domain .ad-select {
853
- width: 240px;
854
- }
855
- .ad-site-picker {
856
- border: 1px solid #e1e5e6;
857
- display: grid;
858
- grid-template-columns: 1fr 1fr;
859
- min-height: 360px;
860
- margin-bottom: 15px;
861
- }
862
- .ad-site-column {
863
- min-width: 0;
864
- border-right: 1px solid #e1e5e6;
865
- padding: 0 12px 10px;
866
- }
867
- .ad-site-column:last-child {
868
- border-right: 0;
869
- }
870
- .ad-site-column > strong {
871
- display: block;
872
- background: #f3f5f5;
873
- margin: 10px -2px 0;
874
- padding: 10px;
875
- }
876
- .ad-ou-tree {
877
- max-height: 304px;
878
- overflow: auto;
879
- padding-top: 5px;
880
- }
881
- .ad-ou-row {
882
- height: 24px;
883
- display: flex;
884
- align-items: center;
885
- gap: 7px;
886
- white-space: nowrap;
887
- cursor: pointer;
888
- }
889
- .ad-ou-row input {
890
- accent-color: #85c447;
891
- }
892
- .ad-ou-row span {
893
- color: #758289;
894
- }
895
- .ad-dc-list {
896
- min-height: 250px;
897
- padding: 15px 8px;
898
- }
899
- .ad-integration-grid {
900
- display: grid;
901
- grid-template-columns: repeat(5, minmax(135px, 1fr));
902
- gap: 14px 10px;
903
- margin: 0 5px;
904
- }
905
- .ad-integration-tile {
906
- height: 69px;
907
- padding: 0;
908
- display: flex;
909
- flex-direction: column;
910
- border: 1px solid #e3e6e7;
911
- background: #fff;
912
- text-align: center;
913
- color: #111;
914
- }
915
- .ad-integration-tile:hover {
916
- border-color: #9fc9d6;
917
- }
918
- .ad-integration-tile strong {
919
- flex: 1;
920
- display: grid;
921
- place-items: center;
922
- font-size: 17px;
923
- letter-spacing: -.3px;
924
- }
925
- .ad-integration-tile span {
926
- height: 20px;
927
- background: #f7f7f7;
928
- color: #80878a;
929
- display: grid;
930
- place-items: center;
931
- font-size: 11px;
932
- }
933
- .ad-service-instructions {
934
- padding: 10px 20px;
935
- line-height: 21px;
936
- }
937
- .ad-service-instructions h2 {
938
- font-size: 13px;
939
- }
940
- .ad-service-instructions ol {
941
- padding-left: 25px;
942
- }
943
- .ad-header-links {
944
- display: flex;
945
- gap: 14px;
946
- }
947
- .ad-restrict-toolbar {
948
- display: flex;
949
- align-items: center;
950
- gap: 12px;
951
- padding: 12px 0;
952
- }
953
- .ad-restrict-count {
954
- margin-left: auto;
955
- color: #7b8589;
956
- }
957
- .ad-tabs + .ad-section-title {
958
- margin-top: 17px;
959
- margin-bottom: 5px;
960
- }
961
- .ad-password-rules {
962
- max-width: 520px;
963
- margin: 10px auto;
964
- padding-left: 20px;
965
- line-height: 20px;
966
- color: #68757a;
967
- }
968
- .ad-language-toolbar {
969
- display: flex;
970
- align-items: center;
971
- gap: 8px;
972
- margin: 15px 0 10px;
973
- }
974
- .ad-language-toolbar .ad-field {
975
- margin-right: auto;
976
- }
977
- .ad-language-toolbar span {
978
- color: #7a8589;
979
- }
980
- .ad-architecture {
981
- padding: 12px 0 0;
982
- }
983
- .ad-architecture .ad-tabs {
984
- background: #fff;
985
- border: 0;
986
- margin: 0 0 0;
987
- }
988
- .ad-architecture .ad-tab {
989
- border: 0;
990
- border-right: 1px solid #e0e5e6;
991
- padding: 0 15px;
992
- }
993
- .ad-architecture .ad-tab:last-child {
994
- border-right: 0;
995
- }
996
- .ad-architecture .ad-tab.is-active {
997
- box-shadow: inset 0 -3px #85c447;
998
- }
999
- .ad-architecture-diagram {
1000
- min-height: 295px;
1001
- width: 100%;
1002
- background: #fafafa;
1003
- border: 1px solid #edf0f1;
1004
- margin: 0;
1005
- gap: 15px;
1006
- }
1007
- .ad-architecture-diagram .ad-architecture-node {
1008
- background: none;
1009
- border: 0;
1010
- min-width: 115px;
1011
- display: flex;
1012
- flex-direction: column;
1013
- align-items: center;
1014
- gap: 8px;
1015
- padding: 0;
1016
- }
1017
- .ad-architecture-node svg {
1018
- color: #859aa3;
1019
- stroke-width: 1.2;
1020
- }
1021
- .ad-architecture-node span,
1022
- .ad-server-stack > span {
1023
- font-size: 10px;
1024
- white-space: nowrap;
1025
- }
1026
- .ad-architecture-node small {
1027
- font-size: 9px;
1028
- color: #7d888c;
1029
- }
1030
- .ad-server-stack {
1031
- min-width: 100px;
1032
- display: flex;
1033
- align-items: center;
1034
- flex-direction: column;
1035
- gap: 5px;
1036
- }
1037
- .ad-server-stack .ad-architecture-node {
1038
- border: 1px solid #dce3e5;
1039
- padding: 3px;
1040
- min-width: 75px;
1041
- }
1042
- .ad-architecture-diagram > svg {
1043
- color: #8a9ba2;
1044
- stroke-width: 1.2;
1045
- }
1046
- .ad-configure-action {
1047
- text-align: center;
1048
- margin: 20px 0 10px;
1049
- }
1050
- .ad-architecture-panel {
1051
- padding-bottom: 10px;
1052
- }
1053
- @media (max-width:900px) {
1054
- .ad-architecture-diagram {
1055
- overflow: auto;
1056
- justify-content: flex-start;
1057
- padding: 15px;
1058
- }
1059
- }
1060
- @media (max-width:1060px) {
1061
- .ad-integration-grid {
1062
- grid-template-columns: repeat(3, minmax(135px, 1fr));
1063
- }
1064
- }
1065
- @media (max-width:700px) {
1066
- .ad-integration-grid {
1067
- grid-template-columns: repeat(2, minmax(120px, 1fr));
1068
- }
1069
- .ad-site-picker {
1070
- grid-template-columns: 1fr;
1071
- }
1072
- .ad-site-column {
1073
- border-right: 0;
1074
- border-bottom: 1px solid #e1e5e6;
1075
- }
1076
- }
1077
-
1078
- /* src/dashboard/dashboard.css */
1079
- .ad-main.ad-main--dashboard {
1080
- padding: 0;
1081
- }
1082
- .dash-page {
1083
- min-height: 100%;
1084
- background: #fff;
1085
- }
1086
- .dash-toolbar {
1087
- height: 31px;
1088
- display: flex;
1089
- align-items: center;
1090
- gap: 11px;
1091
- border-bottom: 1px solid #e1e4e5;
1092
- padding: 0 13px 0 18px;
1093
- }
1094
- .dash-toolbar label {
1095
- font-size: 11px;
1096
- }
1097
- .dash-toolbar select {
1098
- width: 201px;
1099
- height: 22px;
1100
- border: 1px solid #d0d5d6;
1101
- border-radius: 0;
1102
- background: #fff;
1103
- font-size: 11px;
1104
- padding: 0 8px;
1105
- }
1106
- .dash-toolbar-actions {
1107
- margin-left: auto;
1108
- height: 100%;
1109
- display: flex;
1110
- align-items: center;
1111
- }
1112
- .dash-toolbar-actions > button,
1113
- .dash-menu-anchor > button {
1114
- height: 30px;
1115
- min-width: 42px;
1116
- background: #fff;
1117
- border: 0;
1118
- border-left: 1px solid #e8ebec;
1119
- display: grid;
1120
- place-items: center;
1121
- color: #1d2529;
1122
- }
1123
- .dash-menu-anchor {
1124
- position: relative;
1125
- }
1126
- .dash-menu {
1127
- position: absolute;
1128
- top: 30px;
1129
- right: 0;
1130
- z-index: 5;
1131
- background: #fff;
1132
- width: 160px;
1133
- border: 1px solid #dce2e4;
1134
- box-shadow: 0 3px 10px #0002;
1135
- padding: 5px 0;
1136
- }
1137
- .dash-menu button {
1138
- display: block;
1139
- width: 100%;
1140
- border: 0;
1141
- background: #fff;
1142
- text-align: left;
1143
- padding: 7px 12px;
1144
- font-size: 11px;
1145
- }
1146
- .dash-menu button:hover {
1147
- background: #f0f3f3;
1148
- }
1149
- .dash-layout {
1150
- display: grid;
1151
- grid-template-columns: minmax(0, 1fr) 295px;
1152
- margin: 18px 25px 0 10px;
1153
- border: 1px solid #e6e9ea;
1154
- align-items: stretch;
1155
- }
1156
- .dash-layout.without-shortcuts {
1157
- grid-template-columns: 1fr;
1158
- }
1159
- .dash-content {
1160
- min-width: 0;
1161
- }
1162
- .dash-metrics {
1163
- display: grid;
1164
- grid-template-columns: repeat(4, minmax(0, 1fr));
1165
- }
1166
- .dash-metric {
1167
- height: 119px;
1168
- border: 0;
1169
- border-right: 1px solid #e6e9ea;
1170
- border-bottom: 1px solid #e6e9ea;
1171
- background: #fff;
1172
- text-align: left;
1173
- padding: 21px 18px 15px;
1174
- display: flex;
1175
- flex-direction: column;
1176
- align-items: flex-start;
1177
- position: relative;
1178
- color: #14191b;
1179
- }
1180
- .dash-metric:hover {
1181
- background: #fafcfc;
1182
- }
1183
- .dash-metric-title {
1184
- font-size: 13px;
1185
- margin-bottom: 7px;
1186
- }
1187
- .dash-metric strong {
1188
- font-size: 20px;
1189
- font-weight: 600;
1190
- line-height: 26px;
1191
- white-space: nowrap;
1192
- }
1193
- .dash-metric small {
1194
- color: #777f83;
1195
- font-size: 11px;
1196
- white-space: nowrap;
1197
- }
1198
- .dash-metric-icon {
1199
- position: absolute;
1200
- right: 15px;
1201
- top: 38px;
1202
- opacity: .8;
1203
- }
1204
- .dash-metric-icon.is-rose {
1205
- color: #c14a7d;
1206
- }
1207
- .dash-metric-icon.is-blue {
1208
- color: #55a8d2;
1209
- }
1210
- .dash-metric-icon.is-orange {
1211
- color: #d98d55;
1212
- }
1213
- .dash-metric-icon.is-green {
1214
- color: #70bb6b;
1215
- }
1216
- .dash-chart-grid {
1217
- display: grid;
1218
- grid-template-columns: 1fr 1fr;
1219
- }
1220
- .dash-widget {
1221
- height: 352px;
1222
- border-right: 1px solid #e6e9ea;
1223
- border-bottom: 1px solid #e6e9ea;
1224
- min-width: 0;
1225
- background: #fff;
1226
- }
1227
- .dash-widget:nth-child(2) {
1228
- border-right: 0;
1229
- }
1230
- .dash-wide-widget {
1231
- grid-column: 1/-1;
1232
- height: 337px;
1233
- border-right: 0;
1234
- }
1235
- .dash-widget-heading {
1236
- height: 44px;
1237
- display: flex;
1238
- align-items: center;
1239
- justify-content: space-between;
1240
- padding: 0 24px;
1241
- font-size: 13px;
1242
- }
1243
- .dash-widget-heading strong {
1244
- font-weight: 600;
1245
- }
1246
- .dash-widget-tools {
1247
- display: flex;
1248
- opacity: 0;
1249
- }
1250
- .dash-widget:hover .dash-widget-tools,
1251
- .dash-widget:focus-within .dash-widget-tools {
1252
- opacity: 1;
1253
- }
1254
- .dash-widget-tools button {
1255
- border: 0;
1256
- background: #fff;
1257
- color: #7c888e;
1258
- padding: 4px;
1259
- display: grid;
1260
- place-items: center;
1261
- }
1262
- .is-spinning {
1263
- animation: dash-spin .5s linear infinite;
1264
- }
1265
- @keyframes dash-spin {
1266
- to {
1267
- transform: rotate(360deg);
1268
- }
1269
- }
1270
- .dash-column-chart {
1271
- height: 290px;
1272
- padding: 14px 30px 10px 40px;
1273
- display: flex;
1274
- position: relative;
1275
- }
1276
- .dash-axis-title {
1277
- position: absolute;
1278
- left: 12px;
1279
- top: 43%;
1280
- writing-mode: vertical-rl;
1281
- transform: rotate(180deg);
1282
- color: #656d71;
1283
- }
1284
- .dash-y-labels {
1285
- display: flex;
1286
- flex-direction: column;
1287
- justify-content: space-between;
1288
- align-items: flex-end;
1289
- width: 35px;
1290
- height: 260px;
1291
- padding-right: 9px;
1292
- color: #62696d;
1293
- }
1294
- .dash-plot {
1295
- flex: 1;
1296
- height: 260px;
1297
- position: relative;
1298
- border-bottom: 1px solid #dce1e2;
1299
- display: flex;
1300
- flex-direction: column;
1301
- justify-content: space-between;
1302
- }
1303
- .dash-gridline {
1304
- height: 1px;
1305
- background: #e5e9ea;
1306
- width: 100%;
1307
- }
1308
- .dash-columns {
1309
- position: absolute;
1310
- inset: 0;
1311
- display: grid;
1312
- grid-template-columns: repeat(3, 1fr);
1313
- }
1314
- .dash-columns button {
1315
- border: 0;
1316
- background: transparent;
1317
- display: flex;
1318
- flex-direction: column;
1319
- justify-content: flex-end;
1320
- align-items: center;
1321
- position: relative;
1322
- min-width: 0;
1323
- padding: 0;
1324
- }
1325
- .dash-column {
1326
- width: min(40px, 40%);
1327
- background: #46c0f2;
1328
- }
1329
- .dash-column-label {
1330
- position: absolute;
1331
- top: calc(100% + 8px);
1332
- max-width: 100%;
1333
- overflow: hidden;
1334
- text-overflow: ellipsis;
1335
- white-space: nowrap;
1336
- font-size: 10px;
1337
- color: #6c7376;
1338
- }
1339
- .dash-mfa-chart {
1340
- height: 290px;
1341
- display: flex;
1342
- align-items: center;
1343
- justify-content: center;
1344
- gap: 32px;
1345
- }
1346
- .dash-pie {
1347
- width: 212px;
1348
- height: 212px;
1349
- flex: none;
1350
- border-radius: 50%;
1351
- border: 0;
1352
- background: conic-gradient(#8864b4 0 49.3%, #397dd5 49.3% 100%);
1353
- box-shadow: inset 0 0 0 1px #fff3;
1354
- }
1355
- .dash-legend {
1356
- display: grid;
1357
- gap: 8px;
1358
- }
1359
- .dash-legend button {
1360
- border: 0;
1361
- padding: 0;
1362
- display: flex;
1363
- align-items: center;
1364
- background: transparent;
1365
- font-weight: 600;
1366
- font-size: 11px;
1367
- white-space: nowrap;
1368
- }
1369
- .dash-legend i {
1370
- width: 11px;
1371
- height: 11px;
1372
- border-radius: 50%;
1373
- margin-right: 6px;
1374
- }
1375
- .dash-legend .is-purple {
1376
- background: #8864b4;
1377
- }
1378
- .dash-legend .is-blue {
1379
- background: #397dd5;
1380
- }
1381
- .dash-horizontal-chart {
1382
- position: relative;
1383
- padding: 9px 40px 12px 34px;
1384
- height: 277px;
1385
- }
1386
- .dash-horizontal-axis-title {
1387
- position: absolute;
1388
- bottom: 1px;
1389
- left: 50%;
1390
- color: #656d71;
1391
- }
1392
- .dash-horizontal-bars {
1393
- display: grid;
1394
- gap: 7px;
1395
- margin: 0 0 0 110px;
1396
- padding: 0 0 0 10px;
1397
- height: 225px;
1398
- background:
1399
- repeating-linear-gradient(
1400
- 90deg,
1401
- transparent 0,
1402
- transparent calc(14.285% - 1px),
1403
- #e5e9ea calc(14.285% - 1px),
1404
- #e5e9ea 14.285%);
1405
- }
1406
- .dash-horizontal-bars button {
1407
- border: 0;
1408
- background: transparent;
1409
- display: flex;
1410
- align-items: center;
1411
- position: relative;
1412
- padding: 0;
1413
- }
1414
- .dash-horizontal-bars button span {
1415
- position: absolute;
1416
- right: calc(100% + 12px);
1417
- white-space: nowrap;
1418
- font-size: 10px;
1419
- color: #646c70;
1420
- }
1421
- .dash-horizontal-bars button i {
1422
- height: 23px;
1423
- background: #226958;
1424
- display: block;
1425
- }
1426
- .dash-horizontal-ticks {
1427
- display: flex;
1428
- justify-content: space-between;
1429
- margin-left: 120px;
1430
- color: #656e72;
1431
- font-size: 10px;
1432
- }
1433
- .dash-shortcuts {
1434
- border-left: 1px solid #e6e9ea;
1435
- padding: 0 19px;
1436
- overflow: hidden;
1437
- }
1438
- .dash-shortcuts section {
1439
- border-bottom: 1px solid #edf0f0;
1440
- padding: 20px 0 14px;
1441
- }
1442
- .dash-shortcuts section:last-child {
1443
- border: 0;
1444
- }
1445
- .dash-shortcuts h3 {
1446
- font-size: 13px;
1447
- margin: 0 0 18px;
1448
- font-weight: 600;
1449
- }
1450
- .dash-shortcuts ul {
1451
- margin: 0;
1452
- padding: 0;
1453
- list-style: none;
1454
- }
1455
- .dash-shortcuts li {
1456
- margin: 0 0 8px;
1457
- }
1458
- .dash-shortcuts button {
1459
- border: 0;
1460
- background: none;
1461
- padding: 0 4px;
1462
- font-size: 11px;
1463
- color: #171c1e;
1464
- text-align: left;
1465
- }
1466
- .dash-shortcuts button:hover {
1467
- color: #1686ab;
1468
- text-decoration: underline;
1469
- }
1470
- .dash-shortcuts a {
1471
- display: inline-block;
1472
- padding: 0 4px;
1473
- font-size: 11px;
1474
- color: #171c1e;
1475
- text-decoration: none;
1476
- }
1477
- .dash-shortcuts a:hover {
1478
- color: #1686ab;
1479
- text-decoration: underline;
1480
- }
1481
- .dash-overlay {
1482
- position: fixed;
1483
- inset: 0;
1484
- background: #0007;
1485
- z-index: 10;
1486
- display: grid;
1487
- place-items: center;
1488
- }
1489
- .dash-expanded {
1490
- width: min(900px, 90vw);
1491
- height: min(560px, 86vh);
1492
- background: #fff;
1493
- box-shadow: 0 10px 35px #0004;
1494
- }
1495
- .dash-expanded-heading {
1496
- height: 44px;
1497
- padding: 0 18px;
1498
- border-bottom: 1px solid #e6e9ea;
1499
- display: flex;
1500
- justify-content: space-between;
1501
- align-items: center;
1502
- font-size: 14px;
1503
- }
1504
- .dash-expanded-heading button {
1505
- border: 0;
1506
- background: #fff;
1507
- }
1508
- .dash-expanded .dash-mfa-chart,
1509
- .dash-expanded .dash-column-chart,
1510
- .dash-expanded .dash-horizontal-chart {
1511
- height: calc(100% - 50px);
1512
- }
1513
- @media (max-width:1100px) {
1514
- .dash-layout {
1515
- grid-template-columns: minmax(0, 1fr) 250px;
1516
- }
1517
- .dash-metric {
1518
- padding-left: 10px;
1519
- }
1520
- .dash-metric-icon {
1521
- display: none;
1522
- }
1523
- .dash-mfa-chart {
1524
- gap: 15px;
1525
- }
1526
- .dash-pie {
1527
- width: 165px;
1528
- height: 165px;
1529
- }
1530
- }
1531
- @media (max-width:800px) {
1532
- .dash-layout {
1533
- grid-template-columns: 1fr;
1534
- }
1535
- .dash-shortcuts {
1536
- border-left: 0;
1537
- display: grid;
1538
- grid-template-columns: 1fr 1fr;
1539
- }
1540
- .dash-metric small {
1541
- white-space: normal;
1542
- }
1543
- .dash-metrics {
1544
- grid-template-columns: repeat(2, 1fr);
1545
- }
1546
- }
1547
- @media (max-width:520px) {
1548
- .dash-chart-grid {
1549
- grid-template-columns: 1fr;
1550
- }
1551
- .dash-wide-widget {
1552
- grid-column: auto;
1553
- }
1554
- .dash-shortcuts {
1555
- grid-template-columns: 1fr;
1556
- }
1557
- .dash-mfa-chart {
1558
- gap: 10px;
1559
- }
1560
- .dash-pie {
1561
- width: 140px;
1562
- height: 140px;
1563
- }
1564
- }
1565
-
1566
- /* src/reports/reports.css */
1567
- .ad-main.ad-main--reports {
1568
- padding: 0;
1569
- }
1570
- .ad-sidebar[aria-label="Reports navigation"] {
1571
- width: 239px;
1572
- flex-basis: 239px;
1573
- }
1574
- .report-navigation {
1575
- width: 100%;
1576
- }
1577
- .report-search {
1578
- height: 25px;
1579
- margin: 2px 5px 5px;
1580
- display: flex;
1581
- align-items: center;
1582
- gap: 4px;
1583
- background: #fff;
1584
- border: 1px solid #e3e7e8;
1585
- padding: 0 5px;
1586
- color: #172025;
1587
- }
1588
- .report-search input {
1589
- border: 0;
1590
- outline: 0;
1591
- background: transparent;
1592
- min-width: 0;
1593
- width: 100%;
1594
- font-size: 11px;
1595
- }
1596
- .report-nav-group {
1597
- border: 0;
1598
- background: transparent;
1599
- width: 100%;
1600
- min-height: 28px;
1601
- padding: 0 16px;
1602
- text-align: left;
1603
- font-size: 11px;
1604
- font-weight: 600;
1605
- display: flex;
1606
- align-items: center;
1607
- justify-content: space-between;
1608
- color: #111;
1609
- }
1610
- .report-nav-group:hover {
1611
- background: #e2e7e9;
1612
- }
1613
- .report-nav-item {
1614
- border: 0;
1615
- background: transparent;
1616
- display: block;
1617
- width: 100%;
1618
- min-height: 26px;
1619
- text-align: left;
1620
- padding: 5px 18px 5px 27px;
1621
- font-size: 11px;
1622
- line-height: 16px;
1623
- color: #202629;
1624
- }
1625
- .report-nav-item:hover {
1626
- background: #e4e8e9;
1627
- }
1628
- .report-nav-item.is-active {
1629
- background: #dce0e2;
1630
- border-left: 3px solid #85c448;
1631
- padding-left: 24px;
1632
- }
1633
- .report-search-empty {
1634
- color: #778389;
1635
- padding: 16px;
1636
- }
1637
- .report-category-bar {
1638
- height: 30px;
1639
- display: flex;
1640
- align-items: stretch;
1641
- border-bottom: 1px solid #e2e6e7;
1642
- white-space: nowrap;
1643
- }
1644
- .report-category {
1645
- position: relative;
1646
- min-width: 0;
1647
- }
1648
- .report-category > button {
1649
- height: 100%;
1650
- border: 0;
1651
- border-right: 1px solid #e7e9ea;
1652
- background: #fff;
1653
- color: #666f73;
1654
- padding: 0 14px;
1655
- display: flex;
1656
- align-items: center;
1657
- gap: 6px;
1658
- font-size: 11px;
1659
- }
1660
- .report-category > button:hover {
1661
- background: #f4f6f6;
1662
- }
1663
- .report-category-menu {
1664
- position: absolute;
1665
- z-index: 4;
1666
- top: 29px;
1667
- left: 0;
1668
- background: #fff;
1669
- min-width: 230px;
1670
- max-height: 300px;
1671
- overflow: auto;
1672
- box-shadow: 0 4px 14px #0003;
1673
- border: 1px solid #dce1e3;
1674
- padding: 4px 0;
1675
- }
1676
- .report-category-menu button {
1677
- display: block;
1678
- width: 100%;
1679
- padding: 7px 12px;
1680
- border: 0;
1681
- background: #fff;
1682
- text-align: left;
1683
- font-size: 11px;
1684
- }
1685
- .report-category-menu button:hover,
1686
- .report-category-menu button.is-active {
1687
- background: #eef2f2;
1688
- }
1689
- .report-page-body {
1690
- padding: 0 47px 40px 22px;
1691
- }
1692
- .report-page-heading {
1693
- height: 33px;
1694
- display: flex;
1695
- justify-content: space-between;
1696
- align-items: center;
1697
- border-bottom: 1px solid #e2e6e7;
1698
- }
1699
- .report-page-heading h1 {
1700
- font-size: 13px;
1701
- font-weight: 600;
1702
- margin: 0;
1703
- display: flex;
1704
- align-items: center;
1705
- gap: 8px;
1706
- }
1707
- .report-page-heading h1 svg {
1708
- color: #8c9599;
1709
- }
1710
- .report-page-heading button {
1711
- border: 0;
1712
- background: none;
1713
- display: flex;
1714
- align-items: center;
1715
- gap: 4px;
1716
- font-size: 11px;
1717
- }
1718
- .report-page-heading button:hover {
1719
- color: #1686ab;
1720
- }
1721
- .report-schedule-note {
1722
- padding: 8px 12px;
1723
- margin-top: 8px;
1724
- background: #edf7fa;
1725
- color: #326d7e;
1726
- }
1727
- .report-filters {
1728
- min-height: 100px;
1729
- position: relative;
1730
- padding-top: 19px;
1731
- }
1732
- .report-filter-row {
1733
- display: flex;
1734
- justify-content: center;
1735
- align-items: center;
1736
- gap: 10px;
1737
- position: relative;
1738
- left: -33px;
1739
- }
1740
- .report-filter-row label {
1741
- font-size: 11px;
1742
- margin-right: 4px;
1743
- }
1744
- .report-filter-row select {
1745
- width: 236px;
1746
- height: 22px;
1747
- border: 1px solid #cfd5d8;
1748
- background: #fff;
1749
- border-radius: 0;
1750
- padding: 0 6px;
1751
- font-size: 11px;
1752
- }
1753
- .report-ou-current,
1754
- .report-ou-link {
1755
- border: 0;
1756
- background: transparent;
1757
- font-size: 11px;
1758
- padding: 0;
1759
- }
1760
- .report-ou-current {
1761
- display: flex;
1762
- align-items: center;
1763
- gap: 5px;
1764
- }
1765
- .report-ou-link {
1766
- color: #1686ab;
1767
- }
1768
- .report-filter-actions {
1769
- display: flex;
1770
- justify-content: center;
1771
- gap: 8px;
1772
- padding-top: 14px;
1773
- position: relative;
1774
- left: -83px;
1775
- }
1776
- .report-filter-actions button {
1777
- border: 0;
1778
- min-width: 78px;
1779
- height: 22px;
1780
- font-size: 11px;
1781
- }
1782
- .report-generate {
1783
- color: #fff;
1784
- background: #85bd48;
1785
- }
1786
- .report-stop {
1787
- color: #666;
1788
- background: #ececec;
1789
- }
1790
- .report-filter-actions button:disabled {
1791
- opacity: .62;
1792
- cursor: not-allowed;
1793
- }
1794
- .report-ou-picker {
1795
- position: absolute;
1796
- z-index: 3;
1797
- top: 46px;
1798
- left: 65%;
1799
- width: 185px;
1800
- padding: 12px;
1801
- background: #fff;
1802
- border: 1px solid #cfd7da;
1803
- box-shadow: 0 4px 12px #0002;
1804
- display: grid;
1805
- gap: 8px;
1806
- }
1807
- .report-ou-picker label {
1808
- display: flex;
1809
- gap: 6px;
1810
- align-items: center;
1811
- }
1812
- .report-results {
1813
- height: 99px;
1814
- border: 1px solid #e5e8e9;
1815
- display: grid;
1816
- place-items: center;
1817
- margin-top: 0;
1818
- }
1819
- .report-results span {
1820
- display: flex;
1821
- align-items: center;
1822
- gap: 5px;
1823
- font-weight: 600;
1824
- font-size: 11px;
1825
- }
1826
- @media (max-width:1000px) {
1827
- .report-category-bar {
1828
- overflow-x: auto;
1829
- }
1830
- .report-category {
1831
- flex: none;
1832
- }
1833
- }
1834
- @media (max-width:650px) {
1835
- .report-filter-row {
1836
- flex-wrap: wrap;
1837
- }
1838
- .report-filter-row select {
1839
- width: 190px;
1840
- }
1841
- .report-page-body {
1842
- padding-left: 12px;
1843
- padding-right: 12px;
1844
- }
1845
- }
1846
-
1847
- /* src/configuration/configuration.css */
1848
- .ad-main.ad-main--configuration {
1849
- padding: 0 22px 40px;
1850
- }
1851
- .config-heading {
1852
- height: 34px;
1853
- border-bottom: 1px solid #e0e5e6;
1854
- display: flex;
1855
- align-items: center;
1856
- justify-content: space-between;
1857
- }
1858
- .config-heading h1 {
1859
- margin: 0;
1860
- font-size: 13px;
1861
- font-weight: 600;
1862
- }
1863
- .config-heading h1 span {
1864
- color: #899599;
1865
- font-size: 11px;
1866
- margin-left: 3px;
1867
- }
1868
- .config-heading button {
1869
- border: 0;
1870
- background: none;
1871
- color: #737b7f;
1872
- display: flex;
1873
- align-items: center;
1874
- gap: 6px;
1875
- font-size: 11px;
1876
- }
1877
- .config-feature-strip {
1878
- background: #f2f8f8;
1879
- margin-top: 10px;
1880
- height: 134px;
1881
- text-align: center;
1882
- }
1883
- .config-feature-strip h2 {
1884
- font-size: 11px;
1885
- font-weight: 400;
1886
- margin: 0;
1887
- padding: 15px 0 10px;
1888
- }
1889
- .config-features {
1890
- display: flex;
1891
- justify-content: center;
1892
- gap: 67px;
1893
- height: 65px;
1894
- }
1895
- .config-features > div {
1896
- width: 80px;
1897
- display: flex;
1898
- flex-direction: column;
1899
- align-items: center;
1900
- gap: 4px;
1901
- }
1902
- .config-features span {
1903
- white-space: nowrap;
1904
- }
1905
- .config-feature-strip p {
1906
- margin: 0;
1907
- height: 30px;
1908
- background: #e8ebeb;
1909
- display: flex;
1910
- align-items: center;
1911
- justify-content: center;
1912
- gap: 4px;
1913
- }
1914
- .config-features button {
1915
- border: 0;
1916
- background: transparent;
1917
- display: flex;
1918
- flex-direction: column;
1919
- align-items: center;
1920
- gap: 4px;
1921
- padding: 0;
1922
- }
1923
- .config-table-title {
1924
- height: 41px;
1925
- display: flex;
1926
- align-items: center;
1927
- justify-content: space-between;
1928
- }
1929
- .config-table-title h2 {
1930
- font-size: 12px;
1931
- font-weight: 400;
1932
- margin: 0;
1933
- }
1934
- .config-table-title button {
1935
- border: 0;
1936
- background: #86bf4a;
1937
- color: #fff;
1938
- padding: 4px 11px;
1939
- font-size: 11px;
1940
- display: flex;
1941
- align-items: center;
1942
- gap: 5px;
1943
- }
1944
- .config-table-tools {
1945
- height: 25px;
1946
- background: #f3f5f5;
1947
- display: flex;
1948
- justify-content: space-between;
1949
- align-items: center;
1950
- padding: 0 9px;
1951
- }
1952
- .config-table-tools label {
1953
- display: flex;
1954
- align-items: center;
1955
- }
1956
- .config-table-tools input {
1957
- border: 0;
1958
- outline: 0;
1959
- width: 150px;
1960
- background: transparent;
1961
- }
1962
- .config-page-controls {
1963
- display: flex;
1964
- align-items: center;
1965
- gap: 5px;
1966
- }
1967
- .config-page-controls button {
1968
- width: 20px;
1969
- height: 18px;
1970
- border: 0;
1971
- background: #fff;
1972
- color: #9ca4a7;
1973
- display: grid;
1974
- place-items: center;
1975
- }
1976
- .config-page-controls span {
1977
- padding: 0 13px;
1978
- }
1979
- .config-policy-table-wrap {
1980
- overflow: auto;
1981
- }
1982
- .config-policy-table {
1983
- width: 100%;
1984
- border-collapse: collapse;
1985
- table-layout: fixed;
1986
- }
1987
- .config-policy-table th {
1988
- background: #58676e;
1989
- color: #fff;
1990
- font-size: 11px;
1991
- font-weight: 400;
1992
- text-align: left;
1993
- height: 47px;
1994
- padding: 8px;
1995
- }
1996
- .config-policy-table.is-reference th:nth-child(1) {
1997
- width: 10%;
1998
- }
1999
- .config-policy-table.is-reference th:nth-child(2) {
2000
- width: 8%;
2001
- }
2002
- .config-policy-table.is-reference th:nth-child(3) {
2003
- width: 13%;
2004
- }
2005
- .config-policy-table.is-reference th:nth-child(4) {
2006
- width: 25%;
2007
- }
2008
- .config-policy-table.is-reference th:nth-child(5) {
2009
- width: 11%;
2010
- }
2011
- .config-policy-table.is-reference th:nth-child(6) {
2012
- width: 20%;
2013
- }
2014
- .config-policy-table.is-reference th:nth-child(7) {
2015
- width: 13%;
2016
- }
2017
- .config-policy-table td {
2018
- padding: 8px;
2019
- height: 47px;
2020
- border: 1px solid #e5e8e9;
2021
- vertical-align: top;
2022
- line-height: 17px;
2023
- overflow: hidden;
2024
- text-overflow: ellipsis;
2025
- }
2026
- .config-policy-table td:nth-child(6) {
2027
- white-space: nowrap;
2028
- }
2029
- .config-policy-table tbody tr:nth-child(even) {
2030
- background: #fafafa;
2031
- }
2032
- .config-policy-table td button {
2033
- border: 0;
2034
- background: none;
2035
- padding: 2px;
2036
- color: #4c5b61;
2037
- }
2038
- .config-actions {
2039
- display: flex;
2040
- gap: 8px;
2041
- }
2042
- .config-policy-table .config-empty {
2043
- text-align: center;
2044
- height: 90px;
2045
- vertical-align: middle;
2046
- }
2047
- .config-detail-panel {
2048
- margin-top: 10px;
2049
- min-height: 270px;
2050
- padding: 18px;
2051
- }
2052
- .config-detail-panel h2 {
2053
- font-size: 13px;
2054
- }
2055
- .config-detail-panel p {
2056
- color: #6f7d82;
2057
- }
2058
- @media (max-width:750px) {
2059
- .config-features {
2060
- gap: 8px;
2061
- justify-content: space-around;
2062
- }
2063
- .config-feature-strip p {
2064
- padding: 3px;
2065
- height: auto;
2066
- }
2067
- .config-policy-table {
2068
- min-width: 850px;
2069
- }
2070
- }