stable-diffusion-webui

1
/* temporary fix to load default gradio font in frontend instead of backend */
2

3
@import url('webui-assets/css/sourcesanspro.css');
4

5

6
/* temporary fix to hide gradio crop tool until it's fixed https://github.com/gradio-app/gradio/issues/3810 */
7

8
div.gradio-image button[aria-label="Edit"] {
9
    display: none;
10
}
11

12

13
/* general gradio fixes */
14

15
:root, .dark{
16
    --checkbox-label-gap: 0.25em 0.1em;
17
    --section-header-text-size: 12pt;
18
    --block-background-fill: transparent;
19

20
}
21

22
.block.padded:not(.gradio-accordion) {
23
    padding: 0 !important;
24
}
25

26
div.gradio-container{
27
    max-width: unset !important;
28
}
29

30
.hidden{
31
    display: none !important;
32
}
33

34
.compact{
35
    background: transparent !important;
36
    padding: 0 !important;
37
}
38

39
div.form{
40
    border-width: 0;
41
    box-shadow: none;
42
    background: transparent;
43
    overflow: visible;
44
    gap: 0.5em;
45
}
46

47
.block.gradio-dropdown,
48
.block.gradio-slider,
49
.block.gradio-checkbox,
50
.block.gradio-textbox,
51
.block.gradio-radio,
52
.block.gradio-checkboxgroup,
53
.block.gradio-number,
54
.block.gradio-colorpicker {
55
    border-width: 0 !important;
56
    box-shadow: none !important;
57
}
58

59
div.gradio-group, div.styler{
60
    border-width: 0 !important;
61
    background: none;
62
}
63
.gap.compact{
64
    padding: 0;
65
    gap: 0.2em 0;
66
}
67

68
div.compact{
69
    gap: 1em;
70
}
71

72
.gradio-dropdown label span:not(.has-info),
73
.gradio-textbox label span:not(.has-info),
74
.gradio-number label span:not(.has-info)
75
{
76
    margin-bottom: 0;
77
}
78

79
.gradio-dropdown ul.options{
80
    z-index: 3000;
81
    min-width: fit-content;
82
    max-width: inherit;
83
    white-space: nowrap;
84
}
85

86
@media (pointer:fine) {
87
    .gradio-dropdown ul.options li.item {
88
        padding: 0.05em 0;
89
    }
90
}
91

92
.gradio-dropdown ul.options li.item.selected {
93
    background-color: var(--neutral-100);
94
}
95

96
.dark .gradio-dropdown ul.options li.item.selected {
97
    background-color: var(--neutral-900);
98
}
99

100
.gradio-dropdown div.wrap.wrap.wrap.wrap{
101
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
102
}
103

104
.gradio-dropdown:not(.multiselect) .wrap-inner.wrap-inner.wrap-inner{
105
    flex-wrap: unset;
106
}
107

108
.gradio-dropdown .single-select{
109
    white-space: nowrap;
110
    overflow: hidden;
111
}
112

113
.gradio-dropdown .token-remove.remove-all.remove-all{
114
    display: none;
115
}
116

117
.gradio-dropdown.multiselect .token-remove.remove-all.remove-all{
118
    display: flex;
119
}
120

121
.gradio-slider input[type="number"]{
122
    width: 6em;
123
}
124

125
.block.gradio-checkbox {
126
    margin: 0.75em 1.5em 0 0;
127
}
128

129
.gradio-html div.wrap{
130
    height: 100%;
131
}
132
div.gradio-html.min{
133
    min-height: 0;
134
}
135

136
.block.gradio-gallery{
137
    background: var(--input-background-fill);
138
}
139

140
.gradio-container .prose a, .gradio-container .prose a:visited{
141
    color: unset;
142
    text-decoration: none;
143
}
144

145
a{
146
    font-weight: bold;
147
    cursor: pointer;
148
}
149

150
/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reason. */
151
div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown{
152
    overflow: visible !important;
153
}
154

155
/* align-items isn't enough and elements may overflow in Safari. */
156
.unequal-height {
157
    align-content: flex-start;
158
}
159

160

161
/* general styled components */
162

163
.gradio-button.tool{
164
    max-width: 2.2em;
165
    min-width: 2.2em !important;
166
    height: 2.4em;
167
    align-self: end;
168
    line-height: 1em;
169
    border-radius: 0.5em;
170
}
171

172
.gradio-button.secondary-down{
173
    background: var(--button-secondary-background-fill);
174
    color: var(--button-secondary-text-color);
175
}
176
.gradio-button.secondary-down, .gradio-button.secondary-down:hover{
177
    box-shadow: 1px 1px 1px rgba(0,0,0,0.25) inset, 0px 0px 3px rgba(0,0,0,0.15) inset;
178
}
179
.gradio-button.secondary-down:hover{
180
    background: var(--button-secondary-background-fill-hover);
181
    color: var(--button-secondary-text-color-hover);
182
}
183

184
button.custom-button{
185
    border-radius: var(--button-large-radius);
186
    padding: var(--button-large-padding);
187
    font-weight: var(--button-large-text-weight);
188
    border: var(--button-border-width) solid var(--button-secondary-border-color);
189
    background: var(--button-secondary-background-fill);
190
    color: var(--button-secondary-text-color);
191
    font-size: var(--button-large-text-size);
192
    display: inline-flex;
193
    justify-content: center;
194
    align-items: center;
195
    transition: var(--button-transition);
196
    box-shadow: var(--button-shadow);
197
    text-align: center;
198
}
199

200
div.block.gradio-accordion {
201
    border: 1px solid var(--block-border-color) !important;
202
    border-radius: 8px !important;
203
    margin: 2px 0;
204
    padding: 8px 8px;
205
}
206

207
input[type="checkbox"].input-accordion-checkbox{
208
    vertical-align: sub;
209
    margin-right: 0.5em;
210
}
211

212

213
/* txt2img/img2img specific */
214

215
.block.token-counter{
216
    position: absolute;
217
    display: inline-block;
218
    right: 1em;
219
    min-width: 0 !important;
220
    width: auto;
221
    z-index: 100;
222
    top: -0.75em;
223
}
224

225
.block.token-counter-visible{
226
    display: block !important;
227
}
228

229
.block.token-counter span{
230
    background: var(--input-background-fill) !important;
231
    box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);
232
    border: 2px solid rgba(192,192,192,0.4) !important;
233
    border-radius: 0.4em;
234
}
235

236
.block.token-counter.error span{
237
    box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075);
238
    border: 2px solid rgba(255,0,0,0.4) !important;
239
}
240

241
.block.token-counter div{
242
    display: inline;
243
}
244

245
.block.token-counter span{
246
    padding: 0.1em 0.75em;
247
}
248

249
[id$=_subseed_show]{
250
    min-width: auto !important;
251
    flex-grow: 0 !important;
252
    display: flex;
253
}
254

255
[id$=_subseed_show] label{
256
    margin-bottom: 0.65em;
257
    align-self: end;
258
}
259

260
[id$=_seed_extras] > div{
261
    gap: 0.5em;
262
}
263

264
.html-log .comments{
265
    padding-top: 0.5em;
266
}
267

268
.html-log .comments:empty{
269
    padding-top: 0;
270
}
271

272
.html-log .performance {
273
    font-size: 0.85em;
274
    color: #444;
275
    display: flex;
276
}
277

278
.html-log .performance p{
279
    display: inline-block;
280
}
281

282
.html-log .performance p.time, .performance p.vram, .performance p.time abbr, .performance p.vram abbr {
283
    margin-bottom: 0;
284
    color: var(--block-title-text-color);
285
}
286

287
.html-log .performance p.time {
288
}
289

290
.html-log .performance p.vram {
291
    margin-left: auto;
292
}
293

294
.html-log .performance .measurement{
295
    color: var(--body-text-color);
296
    font-weight: bold;
297
}
298

299
#txt2img_generate, #img2img_generate {
300
    min-height: 4.5em;
301
}
302

303
#txt2img_generate, #img2img_generate {
304
    min-height: 4.5em;
305
}
306
.generate-box-compact #txt2img_generate, .generate-box-compact #img2img_generate {
307
    min-height: 3em;
308
}
309

310
@media screen and (min-width: 2500px) {
311
    #txt2img_gallery, #img2img_gallery {
312
        min-height: 768px;
313
    }
314
}
315

316
.gradio-gallery .thumbnails img {
317
    object-fit: scale-down !important;
318
}
319
#txt2img_actions_column, #img2img_actions_column {
320
    gap: 0.5em;
321
}
322
#txt2img_tools, #img2img_tools{
323
    gap: 0.4em;
324
}
325

326
.interrogate-col{
327
    min-width: 0 !important;
328
    max-width: fit-content;
329
    gap: 0.5em;
330
}
331
.interrogate-col > button{
332
    flex: 1;
333
}
334

335
.generate-box{
336
    position: relative;
337
}
338
.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{
339
    position: absolute;
340
    width: 50%;
341
    height: 100%;
342
    display: none;
343
    background: #b4c0cc;
344
}
345
.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover, .gradio-button.generate-box-interrupting:hover{
346
    background: #c2cfdb;
347
}
348
.gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{
349
    left: 0;
350
    border-radius: 0.5rem 0 0 0.5rem;
351
}
352
.gradio-button.generate-box-skip{
353
    right: 0;
354
    border-radius: 0 0.5rem 0.5rem 0;
355
}
356

357
#img2img_scale_resolution_preview.block{
358
    display: flex;
359
    align-items: end;
360
}
361

362
#txtimg_hr_finalres .resolution, #img2img_scale_resolution_preview .resolution{
363
    font-weight: bold;
364
}
365

366
#txtimg_hr_finalres div.pending, #img2img_scale_resolution_preview div.pending {
367
    opacity: 1;
368
    transition: opacity 0s;
369
}
370

371
.inactive{
372
    opacity: 0.5;
373
}
374

375
[id$=_column_batch]{
376
    min-width: min(13.5em, 100%) !important;
377
}
378

379
div.dimensions-tools{
380
    min-width: 1.6em !important;
381
    max-width: fit-content;
382
    flex-direction: column;
383
    place-content: center;
384
}
385

386
div#extras_scale_to_tab div.form{
387
    flex-direction: row;
388
}
389

390
#img2img_sketch, #img2maskimg, #inpaint_sketch {
391
    overflow: overlay !important;
392
    resize: auto;
393
    background: var(--panel-background-fill);
394
    z-index: 5;
395
}
396

397
.image-buttons > .form{
398
    justify-content: center;
399
}
400

401
.infotext {
402
    overflow-wrap: break-word;
403
}
404

405
#img2img_column_batch{
406
    align-self: end;
407
    margin-bottom: 0.9em;
408
}
409

410
#img2img_unused_scale_by_slider{
411
    visibility: hidden;
412
    width: 0.5em;
413
    max-width: 0.5em;
414
    min-width: 0.5em;
415
}
416

417
div.toprow-compact-stylerow{
418
    margin: 0.5em 0;
419
}
420

421
div.toprow-compact-tools{
422
    min-width: fit-content !important;
423
    max-width: fit-content;
424
}
425

426
/* settings */
427
#quicksettings {
428
    align-items: end;
429
}
430

431
#quicksettings > div, #quicksettings > fieldset{
432
    max-width: 36em;
433
    width: fit-content;
434
    flex: 0 1 fit-content;
435
    padding: 0;
436
    border: none;
437
    box-shadow: none;
438
    background: none;
439
}
440
#quicksettings > div.gradio-dropdown{
441
    min-width: 24em !important;
442
}
443

444
#settings{
445
    display: block;
446
}
447

448
#settings > div{
449
    border: none;
450
    margin-left: 10em;
451
    padding: 0 var(--spacing-xl);
452
}
453

454
#settings > div.tab-nav{
455
    float: left;
456
    display: block;
457
    margin-left: 0;
458
    width: 10em;
459
}
460

461
#settings > div.tab-nav button{
462
    display: block;
463
    border: none;
464
    text-align: left;
465
    white-space: initial;
466
    padding: 4px;
467
}
468

469
#settings > div.tab-nav .settings-category{
470
    display: block;
471
    margin: 1em 0 0.25em 0;
472
    font-weight: bold;
473
    text-decoration: underline;
474
    cursor: default;
475
    user-select: none;
476
}
477

478
#settings_result{
479
    height: 1.4em;
480
    margin: 0 1.2em;
481
}
482

483
table.popup-table{
484
    background: var(--body-background-fill);
485
    color: var(--body-text-color);
486
    border-collapse: collapse;
487
    margin: 1em;
488
    border: 4px solid var(--body-background-fill);
489
}
490

491
table.popup-table td{
492
    padding: 0.4em;
493
    border: 1px solid rgba(128, 128, 128, 0.5);
494
    max-width: 36em;
495
}
496

497
table.popup-table .muted{
498
    color: #aaa;
499
}
500

501
table.popup-table .link{
502
    text-decoration: underline;
503
    cursor: pointer;
504
    font-weight: bold;
505
}
506

507
.ui-defaults-none{
508
    color: #aaa !important;
509
}
510

511
#settings span{
512
    color: var(--body-text-color);
513
}
514

515
#settings .gradio-textbox, #settings .gradio-slider, #settings .gradio-number, #settings .gradio-dropdown, #settings .gradio-checkboxgroup, #settings .gradio-radio{
516
    margin-top: 0.75em;
517
}
518

519
#settings span .settings-comment {
520
    display: inline
521
}
522

523
.settings-comment a{
524
    text-decoration: underline;
525
}
526

527
.settings-comment .info{
528
    opacity: 0.75;
529
}
530

531
#sysinfo_download a.sysinfo_big_link{
532
    font-size: 24pt;
533
}
534

535
#sysinfo_download a{
536
    text-decoration: underline;
537
}
538

539
#sysinfo_validity{
540
    font-size: 18pt;
541
}
542

543
#settings .settings-info{
544
    max-width: 48em;
545
    border: 1px dotted #777;
546
    margin: 0;
547
    padding: 1em;
548
}
549

550

551
/* live preview */
552
.progressDiv{
553
    position: absolute;
554
    height: 20px;
555
    background: #b4c0cc;
556
    border-radius: 3px !important;
557
    top: -14px;
558
    left: 0px;
559
    width: 100%;
560
}
561

562
.progress-container{
563
    position: relative;
564
}
565

566
[id$=_results].mobile{
567
    margin-top: 28px;
568
}
569

570
.dark .progressDiv{
571
    background: #424c5b;
572
}
573

574
.progressDiv .progress{
575
    width: 0%;
576
    height: 20px;
577
    background: #0060df;
578
    color: white;
579
    font-weight: bold;
580
    line-height: 20px;
581
    padding: 0 8px 0 0;
582
    text-align: right;
583
    border-radius: 3px;
584
    overflow: visible;
585
    white-space: nowrap;
586
    padding: 0 0.5em;
587
}
588

589
.livePreview{
590
    position: absolute;
591
    z-index: 300;
592
    background: var(--background-fill-primary);
593
    width: 100%;
594
    height: 100%;
595
}
596

597
.livePreview img{
598
    position: absolute;
599
    object-fit: contain;
600
    width: 100%;
601
    height: calc(100% - 60px);  /* to match gradio's height */
602
}
603

604
/* fullscreen popup (ie in Lora's (i) button) */
605

606
.popup-metadata{
607
    color: black;
608
    background: white;
609
    display: inline-block;
610
    padding: 1em;
611
    white-space: pre-wrap;
612
}
613

614
.global-popup{
615
    display: flex;
616
    position: fixed;
617
    z-index: 1001;
618
    left: 0;
619
    top: 0;
620
    width: 100%;
621
    height: 100%;
622
    overflow: auto;
623
}
624

625
.global-popup *{
626
    box-sizing: border-box;
627
}
628

629
.global-popup-close:before {
630
    content: "×";
631
    position: fixed;
632
    right: 0.25em;
633
    top: 0;
634
    cursor: pointer;
635
    color: white;
636
    font-size: 32pt;
637
}
638

639
.global-popup-close{
640
    position: fixed;
641
    left: 0;
642
    top: 0;
643
    width: 100%;
644
    height: 100%;
645
    background-color: rgba(20, 20, 20, 0.95);
646
}
647

648
.global-popup-inner{
649
    display: inline-block;
650
    margin: auto;
651
    padding: 2em;
652
    z-index: 1001;
653
    max-height: 90%;
654
    max-width: 90%;
655
}
656

657
/* fullpage image viewer */
658

659
#lightboxModal{
660
    display: none;
661
    position: fixed;
662
    z-index: 1001;
663
    left: 0;
664
    top: 0;
665
    width: 100%;
666
    height: 100%;
667
    overflow: auto;
668
    background-color: rgba(20, 20, 20, 0.95);
669
    user-select: none;
670
    -webkit-user-select: none;
671
    flex-direction: column;
672
}
673

674
.modalControls {
675
    display: flex;
676
    position: absolute;
677
    right: 0px;
678
    left: 0px;
679
    gap: 1em;
680
    padding: 1em;
681
    background-color:rgba(0,0,0,0);
682
    z-index: 1;
683
    transition: 0.2s ease background-color;
684
}
685
.modalControls:hover {
686
    background-color:rgba(0,0,0, var(--sd-webui-modal-lightbox-toolbar-opacity));
687
}
688
.modalClose {
689
    margin-left: auto;
690
}
691
.modalControls span{
692
    color: white;
693
    text-shadow: 0px 0px 0.25em black;
694
    font-size: 35px;
695
    font-weight: bold;
696
    cursor: pointer;
697
    width: 1em;
698
}
699

700
.modalControls span:hover, .modalControls span:focus{
701
    color: #999;
702
    text-decoration: none;
703
}
704

705
#lightboxModal > img {
706
    display: block;
707
    margin: auto;
708
    width: auto;
709
}
710

711
#lightboxModal > img.modalImageFullscreen{
712
    object-fit: contain;
713
    height: 100%;
714
    width: 100%;
715
    min-height: 0;
716
}
717

718
.modalPrev,
719
.modalNext {
720
  cursor: pointer;
721
  position: absolute;
722
  top: 50%;
723
  width: auto;
724
  padding: 16px;
725
  margin-top: -50px;
726
  color: white;
727
  font-weight: bold;
728
  font-size: 20px;
729
  transition: 0.6s ease;
730
  border-radius: 0 3px 3px 0;
731
  user-select: none;
732
  -webkit-user-select: none;
733
}
734

735
.modalNext {
736
  right: 0;
737
  border-radius: 3px 0 0 3px;
738
}
739

740
.modalPrev:hover,
741
.modalNext:hover {
742
  background-color: rgba(0, 0, 0, 0.8);
743
}
744

745
#imageARPreview {
746
    position: absolute;
747
    top: 0px;
748
    left: 0px;
749
    border: 2px solid red;
750
    background: rgba(255, 0, 0, 0.3);
751
    z-index: 900;
752
    pointer-events: none;
753
    display: none;
754
}
755

756
@media (pointer: fine) {
757
    .modalPrev:hover,
758
    .modalNext:hover,
759
    .modalControls:hover ~ .modalPrev,
760
    .modalControls:hover ~ .modalNext,
761
    .modalControls:hover .cursor {
762
        opacity: 1;
763
    }
764

765
    .modalPrev,
766
    .modalNext,
767
    .modalControls .cursor {
768
        opacity: var(--sd-webui-modal-lightbox-icon-opacity);
769
    }
770
}
771

772
/* context menu (ie for the generate button) */
773

774
#context-menu{
775
    z-index:9999;
776
    position:absolute;
777
    display:block;
778
    padding:0px 0;
779
    border:2px solid #a55000;
780
    border-radius:8px;
781
    box-shadow:1px 1px 2px #CE6400;
782
    width: 200px;
783
}
784

785
.context-menu-items{
786
    list-style: none;
787
    margin: 0;
788
    padding: 0;
789
}
790

791
.context-menu-items a{
792
    display:block;
793
    padding:5px;
794
    cursor:pointer;
795
}
796

797
.context-menu-items a:hover{
798
    background: #a55000;
799
}
800

801

802
/* extensions */
803

804
#tab_extensions table{
805
    border-collapse: collapse;
806
}
807

808
#tab_extensions table td, #tab_extensions table th{
809
    border: 1px solid #ccc;
810
    padding: 0.25em 0.5em;
811
}
812

813
#tab_extensions table input[type="checkbox"]{
814
    margin-right: 0.5em;
815
    appearance: checkbox;
816
}
817

818
#tab_extensions button{
819
    max-width: 16em;
820
}
821

822
#tab_extensions input[disabled="disabled"]{
823
    opacity: 0.5;
824
}
825

826
.extension-tag{
827
    font-weight: bold;
828
    font-size: 95%;
829
}
830

831
#available_extensions .info{
832
    margin: 0;
833
}
834

835
#available_extensions .info{
836
    margin: 0.5em 0;
837
    display: flex;
838
    margin-top: auto;
839
    opacity: 0.80;
840
    font-size: 90%;
841
}
842

843
#available_extensions .date_added{
844
    margin-right: auto;
845
    display: inline-block;
846
}
847

848
#available_extensions .star_count{
849
    margin-left: auto;
850
    display: inline-block;
851
}
852

853
/* extensions tab table row hover highlight */
854

855
#extensions tr:hover td,
856
#config_state_extensions tr:hover td,
857
#available_extensions tr:hover td {
858
    background: rgba(0, 0, 0, 0.15);
859
}
860

861
.dark #extensions tr:hover td ,
862
.dark #config_state_extensions tr:hover td ,
863
.dark #available_extensions tr:hover td {
864
    background: rgba(255, 255, 255, 0.15);
865
}
866

867
/* replace original footer with ours */
868

869
footer {
870
    display: none !important;
871
}
872

873
#footer{
874
    text-align: center;
875
}
876

877
#footer div{
878
    display: inline-block;
879
}
880

881
#footer .versions{
882
    font-size: 85%;
883
    opacity: 0.85;
884
}
885

886
/* extra networks UI */
887

888
.extra-page > div.gap{
889
    gap: 0;
890
}
891

892
.extra-page-prompts{
893
    margin-bottom: 0;
894
}
895

896
.extra-page-prompts.extra-page-prompts-active{
897
    margin-bottom: 1em;
898
}
899

900
.extra-networks > div.tab-nav{
901
    min-height: 2.7rem;
902
}
903

904
.extra-networks-controls-div{
905
    align-self: center;
906
    margin-left: auto;
907
}
908

909
.extra-networks > div > [id *= '_extra_']{
910
    margin: 0.3em;
911
}
912

913
.extra-networks .tab-nav .search,
914
.extra-networks .tab-nav .sort
915
{
916
    margin: 0.3em;
917
    align-self: center;
918
    width: auto;
919
}
920

921
.extra-networks .tab-nav .search {
922
    width: 16em;
923
    max-width: 16em;
924
}
925

926
.extra-networks .tab-nav .sort {
927
    width: 12em;
928
    max-width: 12em;
929
}
930

931
#txt2img_extra_view, #img2img_extra_view {
932
    width: auto;
933
}
934

935
.extra-network-pane .nocards{
936
    margin: 1.25em 0.5em 0.5em 0.5em;
937
}
938

939
.extra-network-pane .nocards h1{
940
    font-size: 1.5em;
941
    margin-bottom: 1em;
942
}
943

944
.extra-network-pane .nocards li{
945
    margin-left: 0.5em;
946
}
947

948
.extra-network-pane .card .button-row{
949
    display: inline-flex;
950
    visibility: hidden;
951
    color: white;
952
}
953

954
.extra-network-pane .card .button-row {
955
    position: absolute;
956
    right: 0;
957
    z-index: 1;
958
}
959

960
.extra-network-pane .card:hover .button-row{
961
    visibility: visible;
962
}
963

964
.extra-network-pane .card-button{
965
    color: white;
966
}
967

968
.extra-network-pane .copy-path-button::before {
969
    content: "⎘";
970
}
971

972
.extra-network-pane .metadata-button::before{
973
    content: "🛈";
974
}
975

976
.extra-network-pane .edit-button::before{
977
    content: "🛠";
978
}
979

980
.extra-network-pane .card-button {
981
    width: 1.5em;
982
    text-shadow: 2px 2px 3px black;
983
    color: white;
984
    padding: 0.25em 0.1em;
985
}
986

987
.extra-network-pane .card-button:hover{
988
    color: red;
989
}
990

991
.extra-network-pane .card .card-button {
992
    font-size: 2rem;
993
}
994

995
.extra-network-pane .card-minimal .card-button {
996
    font-size: 1rem;
997
}
998

999
.standalone-card-preview.card .preview{
1000
    position: absolute;
1001
    object-fit: cover;
1002
    width: 100%;
1003
    height:100%;
1004
}
1005

1006
.extra-network-pane .card, .standalone-card-preview.card{
1007
    display: inline-block;
1008
    margin: 0.5rem;
1009
    width: 16rem;
1010
    height: 24rem;
1011
    box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
1012
    border-radius: 0.2rem;
1013
    position: relative;
1014

1015
    background-size: auto 100%;
1016
    background-position: center;
1017
    overflow: hidden;
1018
    cursor: pointer;
1019

1020
    background-image: url('./file=html/card-no-preview.png')
1021
}
1022

1023
.extra-network-pane .card:hover{
1024
    box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35);
1025
}
1026

1027
.extra-network-pane .card .actions .additional{
1028
    display: none;
1029
}
1030

1031
.extra-network-pane .card .actions{
1032
    position: absolute;
1033
    bottom: 0;
1034
    left: 0;
1035
    right: 0;
1036
    padding: 0.5em;
1037
    background: rgba(0,0,0,0.5);
1038
    box-shadow: 0 0 0.25em 0.25em rgba(0,0,0,0.5);
1039
    text-shadow: 0 0 0.2em black;
1040
}
1041

1042
.extra-network-pane .card .actions *{
1043
    color: white;
1044
}
1045

1046
.extra-network-pane .card .actions .name{
1047
    font-size: 1.7em;
1048
    font-weight: bold;
1049
    line-break: anywhere;
1050
}
1051

1052
.extra-network-pane .card .actions .description {
1053
    display: block;
1054
    max-height: 3em;
1055
    white-space: pre-wrap;
1056
    line-height: 1.1;
1057
}
1058

1059
.extra-network-pane .card .actions .description:hover {
1060
    max-height: none;
1061
}
1062

1063
.extra-network-pane .card .actions:hover .additional{
1064
    display: block;
1065
}
1066

1067
.extra-network-pane .card ul{
1068
    margin: 0.25em 0 0.75em 0.25em;
1069
    cursor: unset;
1070
}
1071

1072
.extra-network-pane .card ul a{
1073
    cursor: pointer;
1074
}
1075

1076
.extra-network-pane .card ul a:hover{
1077
    color: red;
1078
}
1079

1080
.extra-network-pane .card .preview{
1081
    position: absolute;
1082
    object-fit: cover;
1083
    width: 100%;
1084
    height:100%;
1085
}
1086

1087
div.block.gradio-box.edit-user-metadata {
1088
    width: 56em;
1089
    background: var(--body-background-fill);
1090
    padding: 2em !important;
1091
}
1092

1093
.edit-user-metadata .extra-network-name{
1094
    font-size: 18pt;
1095
    color: var(--body-text-color);
1096
}
1097

1098
.edit-user-metadata .file-metadata{
1099
    color: var(--body-text-color);
1100
}
1101

1102
.edit-user-metadata .file-metadata th{
1103
    text-align: left;
1104
}
1105

1106
.edit-user-metadata .file-metadata th, .edit-user-metadata .file-metadata td{
1107
    padding: 0.3em 1em;
1108
    overflow-wrap: anywhere;
1109
    word-break: break-word;
1110
}
1111

1112
.edit-user-metadata .wrap.translucent{
1113
    background: var(--body-background-fill);
1114
}
1115
.edit-user-metadata .gradio-highlightedtext span{
1116
    word-break: break-word;
1117
}
1118

1119
.edit-user-metadata-buttons{
1120
    margin-top: 1.5em;
1121
}
1122

1123
div.block.gradio-box.popup-dialog, .popup-dialog {
1124
    width: 56em;
1125
    background: var(--body-background-fill);
1126
    padding: 2em !important;
1127
}
1128

1129
div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-child{
1130
    margin-top: 1em;
1131
}
1132

1133
div.block.input-accordion{
1134

1135
}
1136

1137
.input-accordion-extra{
1138
    flex: 0 0 auto !important;
1139
    margin: 0 0.5em 0 auto;
1140
}
1141

1142
div.accordions > div.input-accordion{
1143
    min-width: fit-content !important;
1144
}
1145

1146
div.accordions > div.gradio-accordion .label-wrap span{
1147
    white-space: nowrap;
1148
    margin-right: 0.25em;
1149
}
1150

1151
div.accordions{
1152
    gap: 0.5em;
1153
}
1154

1155
div.accordions > div.input-accordion.input-accordion-open{
1156
    flex: 1 auto;
1157
    flex-flow: column;
1158
}
1159

1160

1161
/* sticky right hand columns */
1162

1163
#img2img_results, #txt2img_results, #extras_results {
1164
    position: sticky;
1165
    top: 0.5em;
1166
}
1167

1168
body.resizing {
1169
    cursor: col-resize !important;
1170
}
1171

1172
body.resizing * {
1173
    pointer-events: none !important;
1174
}
1175

1176
body.resizing .resize-handle {
1177
    pointer-events: initial !important;
1178
}
1179

1180
.resize-handle {
1181
    position: relative;
1182
    cursor: col-resize;
1183
    grid-column: 2 / 3;
1184
    min-width: 16px !important;
1185
    max-width: 16px !important;
1186
    height: 100%;
1187
}
1188

1189
.resize-handle::after {
1190
    content: '';
1191
    position: absolute;
1192
    top: 0;
1193
    bottom: 0;
1194
    left: 7.5px;
1195
    border-left: 1px dashed var(--border-color-primary);
1196
}
1197

1198
/* ========================= */
1199
.extra-network-pane {
1200
    display: flex;
1201
    height: calc(100vh - 24rem);
1202
    resize: vertical;
1203
    min-height: 52rem;
1204
    flex-direction: column;
1205
    overflow: hidden;
1206
}
1207

1208
.extra-network-pane .extra-network-pane-content {
1209
    display: flex;
1210
    flex: 1;
1211
    overflow: hidden;
1212
}
1213

1214
.extra-network-pane .extra-network-tree {
1215
    flex: 1;
1216
    font-size: 1rem;
1217
    border: 1px solid var(--block-border-color);
1218
    overflow: clip auto !important;
1219
}
1220

1221
.extra-network-pane .extra-network-cards {
1222
    flex: 3;
1223
    overflow: clip auto !important;
1224
    border: 1px solid var(--block-border-color);
1225
}
1226

1227
.extra-network-pane .extra-network-tree .tree-list {
1228
    flex: 1;
1229
    display: flex;
1230
    flex-direction: column;
1231
    padding: 0;
1232
    width: 100%;
1233
    overflow: hidden;
1234
}
1235

1236

1237
.extra-network-pane .extra-network-cards::-webkit-scrollbar,
1238
.extra-network-pane .extra-network-tree::-webkit-scrollbar {
1239
    background-color: transparent;
1240
    width: 16px;
1241
}
1242

1243
.extra-network-pane .extra-network-cards::-webkit-scrollbar-track,
1244
.extra-network-pane .extra-network-tree::-webkit-scrollbar-track {
1245
    background-color: transparent;
1246
    background-clip: content-box;
1247
}
1248

1249
.extra-network-pane .extra-network-cards::-webkit-scrollbar-thumb,
1250
.extra-network-pane .extra-network-tree::-webkit-scrollbar-thumb {
1251
    background-color: var(--border-color-primary);
1252
    border-radius: 16px;
1253
    border: 4px solid var(--background-fill-primary);
1254
}
1255

1256
.extra-network-pane .extra-network-cards::-webkit-scrollbar-button,
1257
.extra-network-pane .extra-network-tree::-webkit-scrollbar-button {
1258
    display: none;
1259
}
1260

1261
.extra-network-control {
1262
    position: relative;
1263
    display: grid;
1264
    width: 100%;
1265
    padding: 0 !important;
1266
    margin-top: 0 !important;
1267
    margin-bottom: 0 !important;
1268
    font-size: 1rem;
1269
    text-align: left;
1270
    user-select: none;
1271
    background-color: transparent;
1272
    border: none;
1273
    transition: background 33.333ms linear;
1274
    grid-template-rows: min-content;
1275
    grid-template-columns: minmax(0, auto) repeat(4, min-content);
1276
    grid-gap: 0.1rem;
1277
    align-items: start;
1278
}
1279

1280
.extra-network-tree .tree-list--tree {}
1281

1282
/* Remove auto indentation from tree. Will be overridden later. */
1283
.extra-network-tree .tree-list--subgroup {
1284
    margin: 0 !important;
1285
    padding: 0 !important;
1286
    box-shadow: 0.5rem 0 0 var(--body-background-fill) inset,
1287
                0.7rem 0 0 var(--neutral-800) inset;
1288
}
1289

1290
/* Set indentation for each depth of tree. */
1291
.extra-network-tree .tree-list--subgroup > .tree-list-item {
1292
    margin-left: 0.4rem !important;
1293
    padding-left: 0.4rem !important;
1294
}
1295

1296
/* Styles for tree <li> elements. */
1297
.extra-network-tree .tree-list-item {
1298
    list-style: none;
1299
    position: relative;
1300
    background-color: transparent;
1301
}
1302

1303
/* Directory <ul> visibility based on data-expanded attribute. */
1304
.extra-network-tree .tree-list-content+.tree-list--subgroup {
1305
    height: 0;
1306
    visibility: hidden;
1307
    opacity: 0;
1308
}
1309

1310
.extra-network-tree .tree-list-content[data-expanded]+.tree-list--subgroup {
1311
    height: auto;
1312
    visibility: visible;
1313
    opacity: 1;
1314
}
1315

1316
/* File <li> */
1317
.extra-network-tree .tree-list-item--subitem {
1318
    padding-top: 0 !important;
1319
    padding-bottom: 0 !important;
1320
    margin-top: 0 !important;
1321
    margin-bottom: 0 !important;
1322
}
1323

1324
/* <li> containing <ul> */
1325
.extra-network-tree .tree-list-item--has-subitem {}
1326

1327
/* BUTTON ELEMENTS */
1328
/* <button> */
1329
.extra-network-tree .tree-list-content {
1330
    position: relative;
1331
    display: grid;
1332
    width: 100%;
1333
    padding: 0 !important;
1334
    margin-top: 0 !important;
1335
    margin-bottom: 0 !important;
1336
    font-size: 1rem;
1337
    text-align: left;
1338
    user-select: none;
1339
    background-color: transparent;
1340
    border: none;
1341
    transition: background 33.333ms linear;
1342
    grid-template-rows: min-content;
1343
    grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action";
1344
    grid-template-columns: min-content min-content minmax(0, auto) min-content min-content;
1345
    grid-gap: 0.1rem;
1346
    align-items: start;
1347
    flex-grow: 1;
1348
    flex-basis: 100%;
1349
}
1350
/* Buttons for directories. */
1351
.extra-network-tree .tree-list-content-dir {}   
1352

1353
/* Buttons for files. */
1354
.extra-network-tree .tree-list-item--has-subitem .tree-list--subgroup > li:first-child {
1355
    padding-top: 0.5rem !important;
1356
}
1357

1358
.dark .extra-network-tree div.tree-list-content:hover {
1359
    -webkit-transition: all 0.05s ease-in-out;
1360
	transition: all 0.05s ease-in-out;
1361
    background-color: var(--neutral-800);
1362
}
1363

1364
.dark .extra-network-tree div.tree-list-content[data-selected] {
1365
    background-color: var(--neutral-700);
1366
}
1367

1368
.extra-network-tree div.tree-list-content[data-selected] {
1369
    background-color: var(--neutral-300);
1370
}
1371

1372
.extra-network-tree div.tree-list-content:hover {
1373
    -webkit-transition: all 0.05s ease-in-out;
1374
	transition: all 0.05s ease-in-out;
1375
    background-color: var(--neutral-200);
1376
}
1377

1378
/* ==== CHEVRON ICON ACTIONS ==== */
1379
/* Define the animation for the arrow when it is clicked. */
1380
.extra-network-tree .tree-list-content-dir .tree-list-item-action-chevron {
1381
    -ms-transform: rotate(135deg);
1382
    -webkit-transform: rotate(135deg);
1383
    transform: rotate(135deg);
1384
    transition: transform 0.2s;
1385
}
1386

1387
.extra-network-tree .tree-list-content-dir[data-expanded] .tree-list-item-action-chevron {
1388
    -ms-transform: rotate(225deg);
1389
    -webkit-transform: rotate(225deg);
1390
    transform: rotate(225deg);
1391
    transition: transform 0.2s;
1392
}
1393

1394
.tree-list-item-action-chevron {
1395
    display: inline-flex;
1396
    /* Uses box shadow to generate a pseudo chevron `>` icon. */
1397
    padding: 0.3rem;
1398
    box-shadow: 0.1rem 0.1rem 0 0 var(--neutral-200) inset;
1399
    transform: rotate(135deg);
1400
}
1401

1402
/* ==== SEARCH INPUT ACTIONS ==== */
1403
/* Add icon to left side of <input> */
1404
.extra-network-control .extra-network-control--search::before {
1405
    content: "🔎︎";
1406
    position: absolute;
1407
    margin: 0.5rem;
1408
    font-size: 1rem;
1409
    color: var(--input-placeholder-color);
1410
}
1411

1412
.extra-network-control .extra-network-control--search {
1413
    display: inline-flex;
1414
    position: relative;
1415
}
1416

1417
.extra-network-control .extra-network-control--search .extra-network-control--search-text {
1418
    border: 1px solid var(--button-secondary-border-color);
1419
    border-radius: 0.5rem;
1420
    color: var(--button-secondary-text-color);
1421
    background-color: transparent;
1422
    width: 100%;
1423
    padding-left: 2rem;
1424
    line-height: 1rem;
1425
}
1426

1427
/* <input> clear button (x on right side) styling */
1428
.extra-network-control .extra-network-control--search .extra-network-control--search-text::-webkit-search-cancel-button {
1429
    -webkit-appearance: none;
1430
    appearance: none;
1431
    cursor: pointer;
1432
    height: 1rem;
1433
    width: 1rem;
1434
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
1435
    mask-repeat: no-repeat;
1436
    mask-position: center center;
1437
    mask-size: 100%;
1438
    background-color: var(--input-placeholder-color);
1439
}
1440

1441
/* ==== SORT ICON ACTIONS ==== */
1442
.extra-network-control .extra-network-control--sort {
1443
    padding: 0.25rem;
1444
    display: inline-flex;
1445
    cursor: pointer;
1446
    justify-self: center;
1447
    align-self: center;
1448
}
1449

1450
.extra-network-control .extra-network-control--sort .extra-network-control--sort-icon {
1451
    height: 1.5rem;
1452
    width: 1.5rem;
1453
    mask-repeat: no-repeat;
1454
    mask-position: center center;
1455
    mask-size: 100%;
1456
    background-color: var(--input-placeholder-color);
1457
}
1458

1459
.extra-network-control .extra-network-control--sort[data-sortmode="path"] .extra-network-control--sort-icon {
1460
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 3.34315 2.34315 2 4 2H8.43845C9.81505 2 11.015 2.93689 11.3489 4.27239L11.7808 6H13.5H20C21.6569 6 23 7.34315 23 9V11C23 11.5523 22.5523 12 22 12C21.4477 12 21 11.5523 21 11V9C21 8.44772 20.5523 8 20 8H13.5H11.7808H4C3.44772 8 3 8.44772 3 9V10V19C3 19.5523 3.44772 20 4 20H9C9.55228 20 10 20.4477 10 21C10 21.5523 9.55228 22 9 22H4C2.34315 22 1 20.6569 1 19V10V9V5ZM3 6.17071C3.31278 6.06015 3.64936 6 4 6H9.71922L9.40859 4.75746C9.2973 4.3123 8.89732 4 8.43845 4H4C3.44772 4 3 4.44772 3 5V6.17071ZM20.1716 18.7574C20.6951 17.967 21 17.0191 21 16C21 13.2386 18.7614 11 16 11C13.2386 11 11 13.2386 11 16C11 18.7614 13.2386 21 16 21C17.0191 21 17.967 20.6951 18.7574 20.1716L21.2929 22.7071C21.6834 23.0976 22.3166 23.0976 22.7071 22.7071C23.0976 22.3166 23.0976 21.6834 22.7071 21.2929L20.1716 18.7574ZM13 16C13 14.3431 14.3431 13 16 13C17.6569 13 19 14.3431 19 16C19 17.6569 17.6569 19 16 19C14.3431 19 13 17.6569 13 16Z" fill="%23000000"></path></g></svg>');
1461
}
1462

1463
.extra-network-control .extra-network-control--sort[data-sortmode="name"] .extra-network-control--sort-icon {
1464
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1841 6.69223C17.063 6.42309 16.7953 6.25 16.5002 6.25C16.2051 6.25 15.9374 6.42309 15.8162 6.69223L11.3162 16.6922C11.1463 17.07 11.3147 17.514 11.6924 17.6839C12.0701 17.8539 12.5141 17.6855 12.6841 17.3078L14.1215 14.1136H18.8789L20.3162 17.3078C20.4862 17.6855 20.9302 17.8539 21.308 17.6839C21.6857 17.514 21.8541 17.07 21.6841 16.6922L17.1841 6.69223ZM16.5002 8.82764L14.7965 12.6136H18.2039L16.5002 8.82764Z" fill="%231C274C"></path><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.25 7C2.25 6.58579 2.58579 6.25 3 6.25H13C13.4142 6.25 13.75 6.58579 13.75 7C13.75 7.41421 13.4142 7.75 13 7.75H3C2.58579 7.75 2.25 7.41421 2.25 7Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H10C10.4142 11.25 10.75 11.5858 10.75 12C10.75 12.4142 10.4142 12.75 10 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12Z" fill="%231C274C"></path><path opacity="0.5" d="M2.25 17C2.25 16.5858 2.58579 16.25 3 16.25H8C8.41421 16.25 8.75 16.5858 8.75 17C8.75 17.4142 8.41421 17.75 8 17.75H3C2.58579 17.75 2.25 17.4142 2.25 17Z" fill="%231C274C"></path></g></svg>');
1465
}
1466

1467
.extra-network-control .extra-network-control--sort[data-sortmode="date_created"] .extra-network-control--sort-icon {
1468
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M17 11C14.2386 11 12 13.2386 12 16C12 18.7614 14.2386 21 17 21C19.7614 21 22 18.7614 22 16C22 13.2386 19.7614 11 17 11ZM17 11V9M2 9V15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.0799 19 5.2 19H13M2 9V8.2C2 7.0799 2 6.51984 2.21799 6.09202C2.40973 5.71569 2.71569 5.40973 3.09202 5.21799C3.51984 5 4.0799 5 5.2 5H13.8C14.9201 5 15.4802 5 15.908 5.21799C16.2843 5.40973 16.5903 5.71569 16.782 6.09202C17 6.51984 17 7.0799 17 8.2V9M2 9H17M5 3V5M14 3V5M15 16H17M17 16H19M17 16V14M17 16V18" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
1469
}
1470

1471
.extra-network-control .extra-network-control--sort[data-sortmode="date_modified"] .extra-network-control--sort-icon {
1472
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M10 21H6.2C5.0799 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4802 3 18.9201 3 17.8V8.2C3 7.0799 3 6.51984 3.21799 6.09202C3.40973 5.71569 3.71569 5.40973 4.09202 5.21799C4.51984 5 5.0799 5 6.2 5H17.8C18.9201 5 19.4802 5 19.908 5.21799C20.2843 5.40973 20.5903 5.71569 20.782 6.09202C21 6.51984 21 7.0799 21 8.2V10M7 3V5M17 3V5M3 9H21M13.5 13.0001L7 13M10 17.0001L7 17M14 21L16.025 20.595C16.2015 20.5597 16.2898 20.542 16.3721 20.5097C16.4452 20.4811 16.5147 20.4439 16.579 20.399C16.6516 20.3484 16.7152 20.2848 16.8426 20.1574L21 16C21.5523 15.4477 21.5523 14.5523 21 14C20.4477 13.4477 19.5523 13.4477 19 14L14.8426 18.1574C14.7152 18.2848 14.6516 18.3484 14.601 18.421C14.5561 18.4853 14.5189 18.5548 14.4903 18.6279C14.458 18.7102 14.4403 18.7985 14.405 18.975L14 21Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
1473
}
1474

1475
/* ==== SORT DIRECTION ICON ACTIONS ==== */
1476
.extra-network-control .extra-network-control--sort-dir {
1477
    padding: 0.25rem;
1478
    display: inline-flex;
1479
    cursor: pointer;
1480
    justify-self: center;
1481
    align-self: center;
1482
}
1483

1484
.extra-network-control .extra-network-control--sort-dir .extra-network-control--sort-dir-icon {
1485
    height: 1.5rem;
1486
    width: 1.5rem;
1487
    mask-repeat: no-repeat;
1488
    mask-position: center center;
1489
    mask-size: 100%;
1490
    background-color: var(--input-placeholder-color);
1491
}
1492

1493
.extra-network-control .extra-network-control--sort-dir[data-sortdir="Ascending"] .extra-network-control--sort-dir-icon {
1494
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 7L3 10M6 7L9 10" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
1495
}
1496

1497
.extra-network-control .extra-network-control--sort-dir[data-sortdir="Descending"] .extra-network-control--sort-dir-icon {
1498
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M13 12H21M13 8H21M13 16H21M6 7V17M6 17L3 14M6 17L9 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
1499
}
1500

1501
/* ==== TREE VIEW ICON ACTIONS ==== */
1502
.extra-network-control .extra-network-control--tree-view {
1503
    padding: 0.25rem;
1504
    display: inline-flex;
1505
    cursor: pointer;
1506
    justify-self: center;
1507
    align-self: center;
1508
}
1509

1510
.extra-network-control .extra-network-control--tree-view .extra-network-control--tree-view-icon {
1511
    height: 1.5rem;
1512
    width: 1.5rem;
1513
    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="black"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="black" d="M16 10v-4h-11v1h-2v-3h9v-4h-12v4h2v10h3v2h11v-4h-11v1h-2v-5h2v2z"></path></g></svg>');
1514
    mask-repeat: no-repeat;
1515
    mask-position: center center;
1516
    mask-size: 100%;
1517
    background-color: var(--input-placeholder-color);
1518
}
1519

1520
.extra-network-control .extra-network-control--enabled {
1521
    background-color: rgba(0, 0, 0, 0.15);
1522
}
1523

1524
.dark .extra-network-control .extra-network-control--enabled {
1525
    background-color: rgba(255, 255, 255, 0.15);
1526
}
1527

1528
/* ==== REFRESH ICON ACTIONS ==== */
1529
.extra-network-control .extra-network-control--refresh {
1530
    padding: 0.25rem;
1531
    display: inline-flex;
1532
    cursor: pointer;
1533
    justify-self: center;
1534
    align-self: center;
1535
}
1536

1537
.extra-network-control .extra-network-control--refresh .extra-network-control--refresh-icon {
1538
    height: 1.5rem;
1539
    width: 1.5rem;
1540
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38"/></svg>');
1541
    mask-repeat: no-repeat;
1542
    mask-position: center center;
1543
    mask-size: 100%;
1544
    background-color: var(--input-placeholder-color);
1545
}
1546

1547
.extra-network-control .extra-network-control--refresh-icon:active {
1548
    -ms-transform: rotate(180deg);
1549
    -webkit-transform: rotate(180deg);
1550
    transform: rotate(180deg);
1551
    transition: transform 0.2s;
1552
}
1553

1554
/* ==== TREE GRID CONFIG ==== */
1555

1556
/* Text for button. */
1557
.extra-network-tree .tree-list-item-label {
1558
    position: relative;
1559
    line-height: 1.25rem;
1560
    color: var(--button-secondary-text-color);
1561
    grid-area: label;
1562
    padding-left: 0.5rem;
1563
}
1564

1565
/* Text for button truncated. */
1566
.extra-network-tree .tree-list-item-label--truncate {
1567
    overflow: hidden;
1568
    text-overflow: ellipsis;
1569
    white-space: nowrap;
1570
}
1571

1572
/* Icon for button. */
1573
.extra-network-tree .tree-list-item-visual {
1574
    min-height: 1rem;
1575
    color: var(--button-secondary-text-color);
1576
    pointer-events: none;
1577
    align-items: right;
1578
}
1579

1580

1581
/* Icon for button when it is before label. */
1582
.extra-network-tree .tree-list-item-visual--leading {
1583
    grid-area: leading-visual;
1584
    width: 1rem;
1585
    text-align: right;
1586
}
1587

1588
/* Icon for button when it is after label. */
1589
.extra-network-tree .tree-list-item-visual--trailing {
1590
    grid-area: trailing-visual;
1591
    width: 1rem;
1592
    text-align: right;
1593
}
1594

1595
/* Dropdown arrow for button. */
1596
.extra-network-tree .tree-list-item-action--leading {
1597
    margin-right: 0.5rem;
1598
    margin-left: 0.2rem;
1599
}
1600

1601
.extra-network-tree .tree-list-content-file .tree-list-item-action--leading {
1602
    visibility: hidden;
1603
}
1604

1605
.extra-network-tree .tree-list-item-action--leading {
1606
    grid-area: leading-action;
1607
}
1608

1609
.extra-network-tree .tree-list-item-action--trailing {
1610
    grid-area: trailing-action;
1611
    display: inline-flex;
1612
}
1613

1614
.extra-network-tree .tree-list-content .button-row {
1615
    display: inline-flex;
1616
    visibility: hidden;
1617
    color: var(--button-secondary-text-color);
1618

1619
}
1620

1621
.extra-network-tree .tree-list-content:hover .button-row {
1622
    visibility: visible;
1623
}
1624