1
/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
2
@media screen and (max-width: 1000px) {
3

4
    #UI-Theme-Block,
5
    #UI-Customization,
6
    #power-user-options-block,
7
    #ContextSettings,
8
    #InstructSettingsColumn,
9
    #InstructSequencesColumn {
10
        flex-basis: 100%;
11
    }
12

13
    #rm_button_panel_pin_div,
14
    #lm_button_panel_pin_div {
15
        display: none;
16
    }
17

18
    #rm_button_characters {
19
        font-size: var(--topBarIconSize);
20
    }
21

22
    #CharListButtonAndHotSwaps {
23
        align-items: center;
24
    }
25

26
    #send_form.compact #leftSendForm,
27
    #send_form.compact #rightSendForm {
28
        flex-wrap: nowrap;
29
        width: unset;
30
    }
31

32
    #sheldWidthToggleBlock {
33
        display: none;
34
    }
35

36
    #bg_menu_content,
37
    #bg_custom_content {
38
        grid-template-columns: repeat(var(--bg-thumb-columns, 3), 1fr);
39
    }
40

41
    .bg_folder_grid {
42
        grid-template-columns: repeat(var(--bg-thumb-columns, 3), 1fr);
43
    }
44

45
    .bg_folder_tile .bg_folder_tile_menu {
46
        opacity: 0;
47
        visibility: hidden;
48
        transform: scale(0.9);
49
    }
50

51
    .bg_folder_tile:hover .bg_folder_tile_menu,
52
    .bg_folder_tile:focus-within .bg_folder_tile_menu {
53
        display: none;
54
    }
55

56
    .bg_folder_tile.mobile-menu-open .bg_folder_tile_menu {
57
        display: flex;
58
        opacity: 1;
59
        visibility: visible;
60
        transform: scale(1);
61
        z-index: 4;
62
    }
63

64
    .bg_folder_tile.mobile-menu-open .mobile-only-menu-toggle {
65
        opacity: 0;
66
        pointer-events: none;
67
    }
68

69
    .bg_folder_tile .mobile-only-menu-toggle {
70
        display: flex;
71
        align-items: center;
72
        justify-content: center;
73
        position: absolute;
74
        top: 5px;
75
        right: 5px;
76
        width: 30px;
77
        height: 30px;
78
        background-color: rgba(0, 0, 0, 0.4);
79
        color: white;
80
        border-radius: 6px;
81
        z-index: 3;
82
        cursor: pointer;
83
        backdrop-filter: blur(2px);
84
    }
85

86
    .bg_folder_tile .jg-button {
87
        width: 30px;
88
        height: 30px;
89
    }
90

91
    .bg_list {
92
        width: unset;
93
    }
94

95
    .bg_button {
96
        font-size: 15px;
97
    }
98

99
    #Backgrounds .bg_example .BGSampleTitle {
100
        opacity: 1;
101
        bottom: 0px;
102
    }
103

104
    .bg_example:hover .jg-menu,
105
    .bg_example:focus-within .jg-menu {
106
        display: none;
107
    }
108

109
    .bg_example.mobile-menu-open .jg-menu {
110
        display: flex;
111
        z-index: 4;
112
    }
113

114
    .bg_example.mobile-menu-open .mobile-only-menu-toggle {
115
        opacity: 0;
116
        pointer-events: none;
117
    }
118

119
    .bg_example .mobile-only-menu-toggle {
120
        display: flex;
121
        align-items: center;
122
        justify-content: center;
123
        position: absolute;
124
        top: 5px;
125
        right: 5px;
126
        width: 30px;
127
        height: 30px;
128
        background-color: rgba(0, 0, 0, 0.4);
129
        color: white;
130
        border-radius: 6px;
131
        z-index: 3;
132
        cursor: pointer;
133
        backdrop-filter: blur(2px);
134
    }
135

136
    .bg_example .jg-button {
137
        width: 30px;
138
        height: 30px;
139
    }
140

141
    #background_fitting {
142
        max-width: 6em;
143
    }
144

145
    #Backgrounds.drawer-content.openDrawer.bg-drawer-layout {
146
        width: 100dvw;
147
        max-width: 100dvw;
148
    }
149

150
    #bg_tabs .bg_tabs_list .bg_tab_button {
151
        min-width: 6em;
152
    }
153

154
    #add_background_button_top>span,
155
    #auto_background>span,
156
    #bg_add_folder_button>span,
157
    #bg_selection_mode_button>span:not(#bg_group_select_count),
158
    #bg_group_add_to_folder_button>span,
159
    #bg_folder_remove_selected_button>span {
160
        display: none;
161
    }
162

163
    #bg_group_select_count:not(:empty) {
164
        display: inline !important;
165
    }
166

167
    .bg_folder_breadcrumb {
168
        gap: 5px;
169
    }
170

171
    .bg_folder_breadcrumb .expander {
172
        min-width: 0;
173
    }
174

175
    #bg_current_folder_name {
176
        min-width: 0;
177
        flex: 1 1 auto;
178
    }
179

180
    #extensions_settings,
181
    #extensions_settings2 {
182
        width: 100% !important;
183
        min-width: 100% !important;
184
    }
185

186
    body:not(.waifuMode) .zoomed_avatar {
187
        min-width: 100px;
188
        min-height: 100px;
189
        position: absolute;
190
        padding: 0;
191
        filter: drop-shadow(2px 2px 2px #51515199);
192
        z-index: 30;
193
        overflow: hidden;
194
        right: 0;
195
        width: fit-content;
196
        max-height: calc(60vh - 60px);
197
        max-height: calc(60dvh - 60px);
198
        max-width: 90vw;
199
        max-width: 90dvw;
200
        left: 50%;
201
        top: 50%;
202
        transform: translateX(-50%) translateY(-50%);
203
        align-items: center;
204
        justify-content: center;
205
        height: fit-content;
206
        width: 100%;
207
    }
208

209
    .zoomed_avatar .dragClose {
210
        display: unset;
211
    }
212

213
    /* .world_entry_thin_controls, */
214
    #persona-management-block,
215
    #character_popup .flex-container {
216
        flex-direction: column;
217
    }
218

219
    #WIMultiSelector {
220
        align-self: normal;
221
    }
222

223
    .WIEntryContentAndMemo {
224
        flex-flow: column;
225
    }
226

227
    .WIEntryContentAndMemo .world_entry_thin_controls {
228
        width: 100%;
229
    }
230

231
    .world_entry_form_control.world_entry_form_horizontal {
232
        /* flex-direction: column; */
233
        align-items: flex-start;
234
        row-gap: 0.5rem;
235
    }
236

237
    .world_entry_form_control.world_entry_form_horizontal .world_popup_expander {
238
        display: none;
239
    }
240

241
    .world_entry .inline-drawer-toggle {
242
        padding-bottom: 5px;
243
    }
244

245
    #worldInfoScanningCheckboxes {
246
        flex-flow: row;
247
        flex-wrap: wrap;
248
    }
249

250
    body {
251
        touch-action: none;
252
        overflow: hidden;
253
        position: fixed;
254
    }
255

256
    .world_entry_form_control {
257
        /* width: 100%; */
258
    }
259

260
    .drawer-content {
261
        min-width: unset;
262
        width: 100dvw;
263
        max-height: calc(100vh - 45px);
264
        max-height: calc(100dvh - 45px);
265
        position: fixed;
266
        left: 0;
267
        top: 5px;
268
        border: 1px solid var(--SmartThemeBorderColor);
269
    }
270

271
    .drawer-content .floating_panel_maximize,
272
    .drawer-content .inline-drawer-maximize {
273
        display: none;
274
    }
275

276
    #select_chat_popup {
277
        align-items: start;
278
        height: min-content;
279
        align-content: start;
280
        max-width: unset;
281
    }
282

283
    #wiActivationSettings,
284
    #wiTopBlock {
285
        flex-direction: column;
286
    }
287

288
    #top-settings-holder,
289
    #top-bar {
290
        position: fixed;
291
        width: 100vw;
292
        width: 100dvw;
293
    }
294

295
    #bg1,
296
    #bg_custom {
297
        height: 100vh !important;
298
        height: 100dvh !important;
299
        width: 100vw !important;
300
        width: 100dvw !important;
301
        background-position: center;
302

303
    }
304

305

306
    #sheld,
307
    #character_popup,
308
    .drawer-content {
309
        width: 100dvw !important;
310
        margin: 0 auto;
311
        max-width: 100dvw;
312
        left: 0 !important;
313
        resize: none !important;
314
        top: var(--topBarBlockSize);
315
    }
316

317
    .wi-settings {
318
        flex-direction: column;
319
        gap: 5px !important;
320
    }
321

322
    .WIEntryTitleAndStatus,
323
    .WIEntryHeaderControls {
324
        width: 100%;
325
    }
326

327
    #WIEntryHeaderTitlesPC {
328
        display: none;
329
    }
330

331
    .WIEntryHeaderTitleMobile {
332
        display: block !important;
333
    }
334

335
    #character_popup,
336
    #world_popup {
337
        overflow-y: auto;
338
    }
339

340
    #character_popup,
341
    #send_form {
342
        border: 1px solid var(--SmartThemeBorderColor);
343
        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
344
        max-width: 100dvw;
345
    }
346

347
    #chat {
348
        border-left: 1px solid var(--SmartThemeBorderColor);
349
        border-right: 1px solid var(--SmartThemeBorderColor);
350
        border-bottom: 1px solid var(--SmartThemeBorderColor);
351
        align-items: start;
352
        align-content: start;
353
        overflow-y: auto;
354
        overflow-x: hidden
355
    }
356

357
    .mes_buttons {
358
        font-size: calc(var(--mainFontSize)*1.2);
359
    }
360

361
    .drag-grabber,
362
    .pull-tab {
363
        display: none !important;
364

365
    }
366

367
    #groupCurrentMemberPopoutButton,
368
    #summaryExtensionPopoutButton {
369
        display: none;
370
    }
371

372
    #right-nav-panel,
373
    #left-nav-panel,
374
    #floatingPrompt,
375
    #cfgConfig,
376
    #logprobsViewer,
377
    #movingDivs>div {
378
        /* 100vh are fallback units for browsers that don't support dvh */
379
        height: calc(100vh - 45px);
380
        height: calc(100dvh - 45px);
381
        min-width: 100dvw !important;
382
        width: 100dvw !important;
383
        max-width: 100dvw !important;
384
        overflow-y: hidden;
385
        border-left: 1px solid var(--SmartThemeBorderColor);
386
        border-right: 1px solid var(--SmartThemeBorderColor);
387
        border-bottom: 1px solid var(--SmartThemeBorderColor);
388
        border-radius: 0 0 20px 20px;
389
        top: var(--topBarBlockSize) !important;
390
        left: 0 !important;
391
        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
392

393
        @starting-style {
394
            height: 0;
395
        }
396
    }
397

398
    #left-nav-panel:not(.openDrawer),
399
    #right-nav-panel:not(.openDrawer) {
400
        height: 0;
401
    }
402

403
    /*
404
    #right-nav-panel {
405
        padding-right: 15px;
406
    }
407
    */
408

409
    #floatingPrompt,
410
    #cfgConfig,
411
    #logprobsViewer,
412
    #movingDivs>div {
413
        height: min-content;
414
    }
415

416
    #right-nav-panel h4 {
417
        margin: 5px auto;
418
    }
419

420
    #result_info {
421
        font-size: calc(var(--mainFontSize) - .1rem);
422
    }
423

424
    /*     .avatar_div {
425
        margin-top: 5px;
426
    } */
427

428
    #character_popup {
429
        width: 100%;
430
        border-radius: 0 0 20px 20px;
431
        margin-top: 0px;
432
        height: calc(100% - var(--topBarBlockSize));
433
    }
434

435
    .drawer25pWidth {
436
        flex-basis: max(calc(100% / 4 - 10px), 190px);
437
    }
438

439
    .drawer33pWidth {
440
        flex-basis: max(calc(100% / 3 - 10px), 190px);
441
    }
442

443
    .expression-holder {
444
        display: none;
445
    }
446

447
    body.waifuMode #sheld {
448
        height: 40vh;
449
        height: 40dvh;
450
        top: 60vh;
451
        top: 60dvh;
452
        bottom: 0 !important;
453
    }
454

455
    body:not(.waifuMode) #expression-wrapper {
456
        visibility: hidden;
457
    }
458

459
    #visual-novel-wrapper {
460
        position: unset !important;
461
    }
462

463
    body.waifuMode .expression-holder {
464
        /*display: inline;*/
465

466
        max-width: 100vw;
467
        height: 100vh;
468
        width: max-content;
469
        margin: 0 auto;
470
        position: absolute;
471
        left: 0;
472
        right: 0;
473
        filter: drop-shadow(2px 2px 2px #51515199);
474
        z-index: 1 !important;
475
    }
476

477
    body.waifuMode img.expression {
478
        object-fit: cover;
479
    }
480

481
    body.waifuMode .zoomed_avatar_container {
482
        height: 100%;
483
    }
484

485
    body.waifuMode .zoomed_avatar {
486
        width: fit-content;
487
        max-height: calc(60vh - 60px);
488
        max-height: calc(60dvh - 60px);
489
        max-width: 90vw;
490
        max-width: 90dvw;
491
    }
492

493
    .scrollableInner {
494
        overflow-y: auto;
495
        overflow-x: hidden;
496
        max-height: calc(100vh - 90px);
497
        max-height: calc(100dvh - 90px);
498
    }
499

500
    .horde_multiple_hint {
501
        display: none;
502
    }
503

504
    select[multiple] {
505
        max-height: 50px;
506
        overflow-y: auto;
507
    }
508
}
509

510
/*landscape mode phones and ipads*/
511
@media screen and (max-width: 1000px) and (orientation: landscape) {
512
    body.waifuMode img.expression {
513
        object-fit: contain;
514
    }
515

516
    .tag.excluded:after {
517
        top: unset;
518
        bottom: unset;
519
    }
520

521
    body:not(.waifuMode) .zoomed_avatar {
522
        max-height: calc(60vh - 60px);
523
        max-height: calc(60dvh - 60px);
524
        max-width: 90vw;
525
        max-width: 90dvw;
526
        left: 50%;
527
        top: 50%;
528
        transform: translateX(-50%) translateY(-50%);
529
        align-items: center;
530
        justify-content: center;
531
        height: fit-content;
532
        width: 100%;
533
    }
534
}
535

536
/*portrait mode phones*/
537
@media screen and (max-width: 450px) {
538

539
    body:not(.waifuMode) .zoomed_avatar {
540
        min-width: 100px;
541
        min-height: 100px;
542
        max-height: 50vh;
543
        max-width: 90vw;
544
        position: absolute;
545
        padding: 0;
546
        filter: drop-shadow(2px 2px 2px #51515199);
547
        z-index: 30;
548
        overflow: hidden;
549
        display: none;
550
        right: 0;
551
        left: 50%;
552
        top: 50%;
553
        transform: translateX(-50%) translateY(-50%);
554
        align-items: center;
555
        justify-content: center;
556
        height: fit-content;
557
        width: 100%;
558
    }
559

560
    .drawer25pWidth {
561
        flex-basis: max(calc(100% / 2 - 10px), 180px);
562
    }
563

564
    .drawer33pWidth {
565
        flex-basis: max(calc(100% / 2 - 10px), 180px);
566
    }
567

568
    .tag.excluded:after {
569
        top: unset;
570
        bottom: unset;
571
    }
572

573

574
    #leftSendForm,
575
    #rightSendForm {
576
        width: 1.15em;
577
        flex-wrap: wrap;
578
        height: unset;
579
    }
580
}
581

582
/*iOS specific*/
583
@supports (-webkit-touch-callout: none) {
584
    body {
585
        margin: 0 auto;
586
    }
587

588
    #top-bar {
589
        width: 100vw;
590
    }
591

592
    #sheld {
593
        margin: unset;
594
        padding: unset;
595
        width: unset;
596
        height: unset;
597
        min-width: unset;
598
        max-width: unset;
599
        min-height: unset;
600
        max-height: unset;
601
        width: 100vw;
602
        width: 100dvw;
603
        height: calc(100vh - 36px);
604
        height: calc(100dvh - 36px);
605
        padding-right: max(env(safe-area-inset-right), 0px);
606
        padding-left: max(env(safe-area-inset-left), 0px);
607
        padding-bottom: 0;
608
    }
609

610
    body.PWA #sheld {
611
        padding-right: max(env(safe-area-inset-right), 2px);
612
        padding-left: max(env(safe-area-inset-left), 2px);
613
        padding-bottom: max(env(safe-area-inset-bottom), 15px);
614

615
    }
616

617
    #character_popup,
618
    #world_popup,
619
    #left-nav-panel,
620
    #right-nav-panel,
621
    .drawer-content {
622
        width: unset;
623
        height: unset;
624
        min-width: unset;
625
        max-width: unset;
626
        min-height: unset;
627
        max-height: unset;
628
        backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
629
        left: 0;
630
        right: 0;
631
        top: 0;
632
        margin: 0 auto;
633
        height: calc(100vh - 70px);
634
        height: calc(100dvh - 70px);
635
        width: calc(100dvw - 5px);
636
        max-height: calc(100vh - 70px);
637
        max-height: calc(100dvh - 70px);
638
        max-width: calc(100dvw - 5px);
639

640
    }
641

642
    #character_popup,
643
    #world_popup,
644
    .drawer-content {
645
        margin-top: 36px;
646
    }
647

648
    .scrollableInner {
649
        overflow-y: auto;
650
        overflow-x: hidden;
651
    }
652

653
    #horde_model {
654
        height: unset;
655
    }
656
}