Merge pull request #2562 from SillyTavern/dvh-units

6f58f9c599fe3cdc2436589bd081f335a17cf83b

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed
Parents: e6e8d7726badbe9e93ea2a41cdaa97bba6203fb6 0253ef9cfd13bc650e99f26eceae0c664d579339
10 files changed, +83 -88Ignore whitespace
public/css/character-group-overlay.css+1 -1
@@ -89,7 +89,7 @@
8989 position: absolute;
9090 width: 100%;
9191 height: 100vh;
9292 height: 100svh100dvh;
9393 z-index: 9998;
9494 top: 0;
9595}
public/css/loader.css+2 -2
@@ -7,8 +7,8 @@
77 z-index: 999999;
88 width: 100vw;
99 height: 100vh;
1010 width: 100svw100dvw;
1111 height: 100svh100dvh;
1212 background-color: var(--SmartThemeBlurTintColor);
1313 color: var(--SmartThemeBodyColor);
1414 /*for some reason the full screen blur does not work on iOS*/
public/css/logprobs.css+3 -3
@@ -1,7 +1,7 @@
11#logprobsViewer {
22 overflow-y: auto;
33 max-width: 90svw90dvw;
44 max-height: 90svh90dvh;
55 min-width: 100px;
66 min-height: 50px;
77 border-radius: 10px;
@@ -16,7 +16,7 @@
1616 top: 0;
1717 margin: 0;
1818 right: unset;
1919 width: calc(((100svw100dvw - var(--sheldWidth)) / 2) - 1px);
2020}
2121
2222.logprobs_panel_header {
public/css/mobile-styles.css+25 -29
@@ -1,6 +1,8 @@
11/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
22@media screen and (max-width: 1000px) {
3- #send_form.compact #leftSendForm, #send_form.compact #rightSendForm {
3+
4+ #send_form.compact #leftSendForm,
5+ #send_form.compact #rightSendForm {
46 flex-wrap: nowrap;
57 width: unset;
68 }
@@ -34,9 +36,9 @@
3436 right: 0;
3537 width: fit-content;
3638 max-height: calc(60vh - 60px);
3739 max-height: calc(60svh60dvh - 60px);
3840 max-width: 90vw;
3941 max-width: 90svw90dvw;
4042 left: 50%;
4143 top: 50%;
4244 transform: translateX(-50%) translateY(-50%);
@@ -102,7 +104,7 @@
102104 min-width: unset;
103105 width: 100%;
104106 max-height: calc(100vh - 45px);
105107 max-height: calc(100svh100dvh - 45px);
106108 position: fixed;
107109 left: 0;
108110 top: 5px;
@@ -130,15 +132,15 @@
130132 #top-bar {
131133 position: fixed;
132134 width: 100vw;
133135 width: 100svw100dvw;
134136 }
135137
136138 #bg1,
137139 #bg_custom {
138140 height: 100vh !important;
139141 height: 100svh100dvh !important;
140142 width: 100vw !important;
141143 width: 100svw100dvw !important;
142144 background-position: center;
143145
144146 }
@@ -146,13 +148,7 @@
146148
147149 #sheld,
148150 #character_popup,
149151 .drawer-content {
150-
151- /* ,
152- #world_popup */
153- {
154- /*max-height: calc(100vh - 36px);
155- max-height: calc(100svh - 36px);*/
156152 width: 100% !important;
157153 margin: 0 auto;
158154 max-width: 100%;
@@ -223,10 +219,10 @@
223219 #floatingPrompt,
224220 #cfgConfig,
225221 #logprobsViewer,
226222 #movingDivs > div {
227223 /* 100vh are fallback units for browsers that don't support svhdvh */
228224 height: calc(100vh - 45px);
229225 height: calc(100svh100dvh - 45px);
230226 min-width: 100% !important;
231227 width: 100% !important;
232228 max-width: 100% !important;
@@ -249,7 +245,7 @@
249245 #floatingPrompt,
250246 #cfgConfig,
251247 #logprobsViewer,
252248 #movingDivs > div {
253249 height: min-content;
254250 }
255251
@@ -286,9 +282,9 @@
286282
287283 body.waifuMode #sheld {
288284 height: 40vh;
289285 height: 40svh40dvh;
290286 top: 60vh;
291287 top: 60svh60dvh;
292288 bottom: 0 !important;
293289 }
294290
@@ -325,16 +321,16 @@
325321 body.waifuMode .zoomed_avatar {
326322 width: fit-content;
327323 max-height: calc(60vh - 60px);
328324 max-height: calc(60svh60dvh - 60px);
329325 max-width: 90vw;
330326 max-width: 90svw90dvw;
331327 }
332328
333329 .scrollableInner {
334330 overflow-y: auto;
335331 overflow-x: hidden;
336332 max-height: calc(100vh - 90px);
337333 max-height: calc(100svh100dvh - 90px);
338334 }
339335
340336 .horde_multiple_hint {
@@ -370,9 +366,9 @@
370366
371367 body:not(.waifuMode) .zoomed_avatar {
372368 max-height: calc(60vh - 60px);
373369 max-height: calc(60svh60dvh - 60px);
374370 max-width: 90vw;
375371 max-width: 90svw90dvw;
376372 left: 50%;
377373 top: 50%;
378374 transform: translateX(-50%) translateY(-50%);
@@ -453,9 +449,9 @@
453449 min-height: unset;
454450 max-height: unset;
455451 width: 100vw;
456452 width: 100svw100dvw;
457453 height: calc(100vh - 36px);
458454 height: calc(100svh100dvh - 36px);
459455 padding-right: max(env(safe-area-inset-right), 0px);
460456 padding-left: max(env(safe-area-inset-left), 0px);
461457 padding-bottom: 0;
@@ -485,10 +481,10 @@
485481 top: 0;
486482 margin: 0 auto;
487483 height: calc(100vh - 70px);
488484 height: calc(100svh100dvh - 70px);
489485 width: calc(100% - 5px);
490486 max-height: calc(100vh - 70px);
491487 max-height: calc(100svh100dvh - 70px);
492488 max-width: calc(100% - 5px);
493489
494490 }
public/css/popup-safari-fix.css+1 -1
@@ -7,5 +7,5 @@ body.safari .popup.large_dialogue_popup .popup-body {
77body.safari .popup .popup-body {
88 height: fit-content;
99 max-height: 90vh;
1010 max-height: 90svh90dvh;
1111}
public/css/popup.css+4 -4
@@ -16,8 +16,8 @@ dialog {
1616 display: flex;
1717 flex-direction: column;
1818
1919 max-height: calc(100svh100dvh - 2em);
2020 max-width: calc(100svw100dvw - 2em);
2121 min-height: fit-content;
2222
2323 /* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup-body' is hiding overflow for the real content. */
@@ -103,7 +103,7 @@ body.no-blur .popup[open]::backdrop {
103103
104104.popup #toast-container {
105105 /* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
106106 height: 100svh100dvh;
107107 top: calc(50% + var(--topBarBlockSize));
108108 left: 50%;
109109 transform: translate(-50%, -50%);
@@ -115,7 +115,7 @@ body.no-blur .popup[open]::backdrop {
115115.popup-crop-wrap {
116116 margin: 10px auto;
117117 max-height: 75vh;
118118 max-height: 75svh75dvh;
119119 max-width: 100%;
120120}
121121
public/css/toggle-dependent.css+1 -1
@@ -364,7 +364,7 @@ body.waifuMode #top-bar {
364364
365365body.waifuMode #sheld {
366366 height: 40vh;
367367 height: 40svh40dvh;
368368 top: calc(100% - 40vh);
369369 bottom: 0;
370370}
public/scripts/extensions/quick-reply/style.css+2 -2
@@ -231,8 +231,8 @@
231231 flex-direction: column;
232232 }
233233 body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
234234 min-height: 50svh50dvh;
235235 height: 50svh50dvh;
236236 }
237237}
238238.popup:has(#qr--modalEditor) {
public/scripts/extensions/quick-reply/style.less+2 -2
@@ -297,8 +297,8 @@
297297 }
298298
299299 >#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder {
300300 min-height: 50svh50dvh;
301301 height: 50svh50dvh;
302302 }
303303 }
304304}
public/style.css+42 -43
@@ -137,7 +137,6 @@ body {
137137 width: 100%;
138138 /*fallback for JS load*/
139139 height: 100vh;
140- height: 100svh;
141140 height: 100dvh;
142141 /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
143142 /*height: calc(var(--doc-height) - 1px);*/
@@ -451,7 +450,7 @@ code {
451450 border-radius: 5px;
452451 background-color: var(--black70a);
453452 padding: 0 3px;
454453 /* max-width: calc(100svw100dvw - 95px); */
455454 line-height: var(--mainFontSize);
456455 color: var(--white70a);
457456}
@@ -535,13 +534,13 @@ body.reduced-motion #bg_custom {
535534 flex-direction: column;
536535 /* -1px to give sheld some wiggle room to bounce off tobar when moving*/
537536 height: calc(100vh - var(--topBarBlockSize) - 1px);
538537 height: calc(100svh100dvh - var(--topBarBlockSize) - 1px);
539538 max-height: calc(100svh100dvh - var(--topBarBlockSize) - 1px);
540539 overflow-x: hidden;
541540 /* max-width: 50vw; */
542541 position: absolute;
543542 left: calc((100vw - var(--sheldWidth))/2);
544543 left: calc((100svw100dvw - var(--sheldWidth))/2);
545544 top: var(--topBarBlockSize);
546545 margin: 0 auto;
547546 left: 0;
@@ -1160,12 +1159,12 @@ textarea {
11601159 font-family: var(--mainFontFamily);
11611160 padding: 5px 10px;
11621161 max-height: 90vh;
11631162 max-height: 90svh90dvh;
11641163}
11651164
11661165textarea.autoSetHeight {
11671166 max-height: 50vh;
11681167 max-height: 50svh50dvh;
11691168}
11701169
11711170input,
@@ -1179,7 +1178,7 @@ select {
11791178 min-height: calc(var(--bottomFormBlockSize) + 2px);
11801179 height: calc(var(--bottomFormBlockSize) + 2px);
11811180 max-height: 50vh;
11821181 max-height: 50svh50dvh;
11831182 word-wrap: break-word;
11841183 resize: vertical;
11851184 display: block;
@@ -2111,14 +2110,14 @@ textarea::placeholder {
21112110@media screen and (max-width: 1000px) {
21122111 #form_create textarea {
21132112 flex-grow: 1;
21142113 min-height: 20svh20dvh;
21152114 }
21162115}
21172116
21182117@media screen and (min-width: 1001px) {
21192118 #description_textarea {
21202119 height: 29vh;
21212120 height: 29svh29dvh;
21222121 }
21232122
21242123 #firstmessage_textarea {
@@ -2394,8 +2393,8 @@ input[type="file"] {
23942393#floatingPrompt,
23952394#cfgConfig {
23962395 overflow-y: auto;
23972396 max-width: 90svw90dvw;
23982397 max-height: 90svh90dvh;
23992398 min-width: 100px;
24002399 min-height: 100px;
24012400 border-radius: 10px;
@@ -2411,7 +2410,7 @@ input[type="file"] {
24112410 top: 0;
24122411 margin: 0;
24132412 right: unset;
24142413 width: calc(((100svw100dvw - var(--sheldWidth)) / 2) - 1px);
24152414
24162415}
24172416
@@ -2768,7 +2767,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
27682767 flex-wrap: wrap;
27692768 width: calc(var(--sheldWidth) - 10px);
27702769 max-width: 100vw;
27712770 max-width: 100svw100dvw;
27722771 justify-content: space-evenly;
27732772}
27742773
@@ -3123,7 +3122,7 @@ grammarly-extension {
31233122#dialogue_popup {
31243123 width: 500px;
31253124 max-width: 90vw;
31263125 max-width: 90svw90dvw;
31273126 position: absolute;
31283127 z-index: 9999;
31293128 margin-left: auto;
@@ -3139,7 +3138,7 @@ grammarly-extension {
31393138 background-color: var(--SmartThemeBlurTintColor);
31403139 border-radius: 10px;
31413140 max-height: 90vh;
31423141 max-height: 90svh90dvh;
31433142 display: flex;
31443143 flex-direction: column;
31453144 overflow-y: hidden;
@@ -3153,9 +3152,9 @@ grammarly-extension {
31533152
31543153.large_dialogue_popup {
31553154 height: 90vh !important;
31563155 height: 90svh90dvh !important;
31573156 max-width: 90vw !important;
31583157 max-width: 90svw90dvw !important;
31593158}
31603159
31613160.wide_dialogue_popup {
@@ -3307,7 +3306,7 @@ grammarly-extension {
33073306 position: absolute;
33083307 width: 100%;
33093308 height: 100vh;
33103309 height: 100svh100dvh;
33113310 z-index: 9999;
33123311 top: 0;
33133312}
@@ -3315,9 +3314,9 @@ grammarly-extension {
33153314#bgtest {
33163315 display: none;
33173316 width: 100vw;
33183317 width: 100svw100dvw;
33193318 height: 100vh;
33203319 height: 100svh100dvh;
33213320 position: absolute;
33223321 z-index: -100;
33233322 background-color: red;
@@ -3954,7 +3953,7 @@ input[type="range"]::-webkit-slider-thumb {
39543953 position: absolute;
39553954 width: 100%;
39563955 height: 100vh;
39573956 height: 100svh100dvh;
39583957 z-index: 2058;
39593958}
39603959
@@ -3967,11 +3966,11 @@ input[type="range"]::-webkit-slider-thumb {
39673966 min-width: 100px;
39683967 max-width: var(--sheldWidth);
39693968 height: calc(100vh - 84px);
39703969 height: calc(100svh100dvh - 84px);
39713970 min-height: calc(100vh - 84px);
39723971 min-height: calc(100svh100dvh - 84px);
39733972 max-height: calc(100vh - 84px);
39743973 max-height: calc(100svh100dvh - 84px);
39753974 position: absolute;
39763975 z-index: 4001;
39773976 margin-left: auto;
@@ -4050,7 +4049,7 @@ h5 {
40504049 position: absolute;
40514050 width: 100%;
40524051 height: 100vh;
40534052 height: 100svh100dvh;
40544053 z-index: 4100;
40554054 top: 0;
40564055 background-color: var(--black70a);
@@ -4064,7 +4063,7 @@ h5 {
40644063 max-width: var(--sheldWidth);
40654064 height: min-content;
40664065 max-height: calc(100vh - var(--topBarBlockSize));
40674066 max-height: calc(100svh100dvh - var(--topBarBlockSize));
40684067 min-height: 100px;
40694068 position: absolute;
40704069 z-index: 2066;
@@ -4384,14 +4383,14 @@ a {
43844383 overflow-wrap: break-word;
43854384 white-space: normal;
43864385 max-width: calc(((100vw - 500px) / 2) - 10px);
43874386 max-width: calc(((100svw100dvw - 500px) / 2) - 10px);
43884387 position: absolute;
43894388 z-index: 9999;
43904389 max-height: 90vh;
43914390 max-height: 90svh90dvh;
43924391 /*unsure why, but this prevents scrollbars*/
43934392 height: 49vh;
43944393 height: 49svh49dvh;
43954394
43964395 padding: 5px;
43974396 overflow-y: auto;
@@ -4427,11 +4426,11 @@ a {
44274426
44284427#right-nav-panel {
44294428 width: calc((100vw - var(--sheldWidth) - 2px) /2);
44304429 width: calc((100svw100dvw - var(--sheldWidth) - 2px) /2);
44314430 max-height: calc(100vh - var(--topBarBlockSize));
44324431 max-height: calc(100svh100dvh - var(--topBarBlockSize));
44334432 height: calc(100vh - var(--topBarBlockSize));
44344433 height: calc(100svh100dvh - var(--topBarBlockSize));
44354434 position: fixed;
44364435 top: 0;
44374436 margin: 0;
@@ -4484,7 +4483,7 @@ a {
44844483 border-radius: 10px;
44854484 max-width: 100%;
44864485 max-height: 40vh;
44874486 max-height: 40svh40dvh;
44884487 image-rendering: -webkit-optimize-contrast;
44894488}
44904489
@@ -4576,18 +4575,18 @@ body:not(.caption) .mes_img_caption {
45764575
45774576.img_enlarged_container pre {
45784577 max-height: 25vh;
45794578 max-height: 25svh25dvh;
45804579 flex-shrink: 0;
45814580 overflow: auto;
45824581}
45834582
45844583.popup:has(.img_enlarged.zoomed).large_dialogue_popup {
45854584 height: 100vh !important;
45864585 height: 100svh100dvh !important;
45874586 max-height: 100vh !important;
45884587 max-height: 100svh100dvh !important;
45894588 max-width: 100vw !important;
45904589 max-width: 100svw100dvw !important;
45914590 padding: 0;
45924591}
45934592
@@ -4774,7 +4773,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
47744773 width: var(--sheldWidth);
47754774 overflow-y: auto;
47764775 max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
47774776 max-height: calc(100svh100dvh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
47784777 display: none;
47794778 position: absolute;
47804779 top: var(--topBarBlockSize);
@@ -4809,11 +4808,11 @@ body:not(.movingUI) .drawer-content.maximized {
48094808
48104809.fillLeft {
48114810 width: calc((100vw - var(--sheldWidth) - 2px) /2);
48124811 width: calc((100svw100dvw - var(--sheldWidth) - 2px) /2);
48134812 height: calc(100vh - var(--topBarBlockSize));
48144813 height: calc(100svh100dvh - var(--topBarBlockSize));
48154814 max-height: calc(100vh - var(--topBarBlockSize));
48164815 max-height: calc(100svh100dvh - var(--topBarBlockSize));
48174816 position: fixed;
48184817 top: 0;
48194818 margin: 0;
@@ -5063,7 +5062,7 @@ body:not(.movingUI) .drawer-content.maximized {
50635062 width: 100%;
50645063 /* margin-inline: 10px; */
50655064 max-height: 90vh;
50665065 max-width: 90svh90dvh;
50675066}
50685067
50695068.zoomed_avatar img {