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 @@
89 position: absolute;89 position: absolute;
90 width: 100%;90 width: 100%;
91 height: 100vh;91 height: 100vh;
92 height: 100svh;92 height: 100dvh;
93 z-index: 9998;93 z-index: 9998;
94 top: 0;94 top: 0;
95}95}
public/css/loader.css+2 -2
@@ -7,8 +7,8 @@
7 z-index: 999999;7 z-index: 999999;
8 width: 100vw;8 width: 100vw;
9 height: 100vh;9 height: 100vh;
10 width: 100svw;10 width: 100dvw;
11 height: 100svh;11 height: 100dvh;
12 background-color: var(--SmartThemeBlurTintColor);12 background-color: var(--SmartThemeBlurTintColor);
13 color: var(--SmartThemeBodyColor);13 color: var(--SmartThemeBodyColor);
14 /*for some reason the full screen blur does not work on iOS*/14 /*for some reason the full screen blur does not work on iOS*/
public/css/logprobs.css+3 -3
@@ -1,7 +1,7 @@
1#logprobsViewer {1#logprobsViewer {
2 overflow-y: auto;2 overflow-y: auto;
3 max-width: 90svw;3 max-width: 90dvw;
4 max-height: 90svh;4 max-height: 90dvh;
5 min-width: 100px;5 min-width: 100px;
6 min-height: 50px;6 min-height: 50px;
7 border-radius: 10px;7 border-radius: 10px;
@@ -16,7 +16,7 @@
16 top: 0;16 top: 0;
17 margin: 0;17 margin: 0;
18 right: unset;18 right: unset;
19 width: calc(((100svw - var(--sheldWidth)) / 2) - 1px);19 width: calc(((100dvw - var(--sheldWidth)) / 2) - 1px);
20}20}
2121
22.logprobs_panel_header {22.logprobs_panel_header {
public/css/mobile-styles.css+25 -29
@@ -1,6 +1,8 @@
1/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/1/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
2@media screen and (max-width: 1000px) {2@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 {
4 flex-wrap: nowrap;6 flex-wrap: nowrap;
5 width: unset;7 width: unset;
6 }8 }
@@ -34,9 +36,9 @@
34 right: 0;36 right: 0;
35 width: fit-content;37 width: fit-content;
36 max-height: calc(60vh - 60px);38 max-height: calc(60vh - 60px);
37 max-height: calc(60svh - 60px);39 max-height: calc(60dvh - 60px);
38 max-width: 90vw;40 max-width: 90vw;
39 max-width: 90svw;41 max-width: 90dvw;
40 left: 50%;42 left: 50%;
41 top: 50%;43 top: 50%;
42 transform: translateX(-50%) translateY(-50%);44 transform: translateX(-50%) translateY(-50%);
@@ -102,7 +104,7 @@
102 min-width: unset;104 min-width: unset;
103 width: 100%;105 width: 100%;
104 max-height: calc(100vh - 45px);106 max-height: calc(100vh - 45px);
105 max-height: calc(100svh - 45px);107 max-height: calc(100dvh - 45px);
106 position: fixed;108 position: fixed;
107 left: 0;109 left: 0;
108 top: 5px;110 top: 5px;
@@ -130,15 +132,15 @@
130 #top-bar {132 #top-bar {
131 position: fixed;133 position: fixed;
132 width: 100vw;134 width: 100vw;
133 width: 100svw;135 width: 100dvw;
134 }136 }
135137
136 #bg1,138 #bg1,
137 #bg_custom {139 #bg_custom {
138 height: 100vh !important;140 height: 100vh !important;
139 height: 100svh !important;141 height: 100dvh !important;
140 width: 100vw !important;142 width: 100vw !important;
141 width: 100svw !important;143 width: 100dvw !important;
142 background-position: center;144 background-position: center;
143145
144 }146 }
@@ -146,13 +148,7 @@
146148
147 #sheld,149 #sheld,
148 #character_popup,150 #character_popup,
149 .drawer-content151 .drawer-content {
150
151 /* ,
152 #world_popup */
153 {
154 /*max-height: calc(100vh - 36px);
155 max-height: calc(100svh - 36px);*/
156 width: 100% !important;152 width: 100% !important;
157 margin: 0 auto;153 margin: 0 auto;
158 max-width: 100%;154 max-width: 100%;
@@ -223,10 +219,10 @@
223 #floatingPrompt,219 #floatingPrompt,
224 #cfgConfig,220 #cfgConfig,
225 #logprobsViewer,221 #logprobsViewer,
226 #movingDivs > div {222 #movingDivs>div {
227 /* 100vh are fallback units for browsers that don't support svh */223 /* 100vh are fallback units for browsers that don't support dvh */
228 height: calc(100vh - 45px);224 height: calc(100vh - 45px);
229 height: calc(100svh - 45px);225 height: calc(100dvh - 45px);
230 min-width: 100% !important;226 min-width: 100% !important;
231 width: 100% !important;227 width: 100% !important;
232 max-width: 100% !important;228 max-width: 100% !important;
@@ -249,7 +245,7 @@
249 #floatingPrompt,245 #floatingPrompt,
250 #cfgConfig,246 #cfgConfig,
251 #logprobsViewer,247 #logprobsViewer,
252 #movingDivs > div {248 #movingDivs>div {
253 height: min-content;249 height: min-content;
254 }250 }
255251
@@ -286,9 +282,9 @@
286282
287 body.waifuMode #sheld {283 body.waifuMode #sheld {
288 height: 40vh;284 height: 40vh;
289 height: 40svh;285 height: 40dvh;
290 top: 60vh;286 top: 60vh;
291 top: 60svh;287 top: 60dvh;
292 bottom: 0 !important;288 bottom: 0 !important;
293 }289 }
294290
@@ -325,16 +321,16 @@
325 body.waifuMode .zoomed_avatar {321 body.waifuMode .zoomed_avatar {
326 width: fit-content;322 width: fit-content;
327 max-height: calc(60vh - 60px);323 max-height: calc(60vh - 60px);
328 max-height: calc(60svh - 60px);324 max-height: calc(60dvh - 60px);
329 max-width: 90vw;325 max-width: 90vw;
330 max-width: 90svw;326 max-width: 90dvw;
331 }327 }
332328
333 .scrollableInner {329 .scrollableInner {
334 overflow-y: auto;330 overflow-y: auto;
335 overflow-x: hidden;331 overflow-x: hidden;
336 max-height: calc(100vh - 90px);332 max-height: calc(100vh - 90px);
337 max-height: calc(100svh - 90px);333 max-height: calc(100dvh - 90px);
338 }334 }
339335
340 .horde_multiple_hint {336 .horde_multiple_hint {
@@ -370,9 +366,9 @@
370366
371 body:not(.waifuMode) .zoomed_avatar {367 body:not(.waifuMode) .zoomed_avatar {
372 max-height: calc(60vh - 60px);368 max-height: calc(60vh - 60px);
373 max-height: calc(60svh - 60px);369 max-height: calc(60dvh - 60px);
374 max-width: 90vw;370 max-width: 90vw;
375 max-width: 90svw;371 max-width: 90dvw;
376 left: 50%;372 left: 50%;
377 top: 50%;373 top: 50%;
378 transform: translateX(-50%) translateY(-50%);374 transform: translateX(-50%) translateY(-50%);
@@ -453,9 +449,9 @@
453 min-height: unset;449 min-height: unset;
454 max-height: unset;450 max-height: unset;
455 width: 100vw;451 width: 100vw;
456 width: 100svw;452 width: 100dvw;
457 height: calc(100vh - 36px);453 height: calc(100vh - 36px);
458 height: calc(100svh - 36px);454 height: calc(100dvh - 36px);
459 padding-right: max(env(safe-area-inset-right), 0px);455 padding-right: max(env(safe-area-inset-right), 0px);
460 padding-left: max(env(safe-area-inset-left), 0px);456 padding-left: max(env(safe-area-inset-left), 0px);
461 padding-bottom: 0;457 padding-bottom: 0;
@@ -485,10 +481,10 @@
485 top: 0;481 top: 0;
486 margin: 0 auto;482 margin: 0 auto;
487 height: calc(100vh - 70px);483 height: calc(100vh - 70px);
488 height: calc(100svh - 70px);484 height: calc(100dvh - 70px);
489 width: calc(100% - 5px);485 width: calc(100% - 5px);
490 max-height: calc(100vh - 70px);486 max-height: calc(100vh - 70px);
491 max-height: calc(100svh - 70px);487 max-height: calc(100dvh - 70px);
492 max-width: calc(100% - 5px);488 max-width: calc(100% - 5px);
493489
494 }490 }
public/css/popup-safari-fix.css+1 -1
@@ -7,5 +7,5 @@ body.safari .popup.large_dialogue_popup .popup-body {
7body.safari .popup .popup-body {7body.safari .popup .popup-body {
8 height: fit-content;8 height: fit-content;
9 max-height: 90vh;9 max-height: 90vh;
10 max-height: 90svh;10 max-height: 90dvh;
11}11}
public/css/popup.css+4 -4
@@ -16,8 +16,8 @@ dialog {
16 display: flex;16 display: flex;
17 flex-direction: column;17 flex-direction: column;
1818
19 max-height: calc(100svh - 2em);19 max-height: calc(100dvh - 2em);
20 max-width: calc(100svw - 2em);20 max-width: calc(100dvw - 2em);
21 min-height: fit-content;21 min-height: fit-content;
2222
23 /* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup-body' is hiding overflow for the real content. */23 /* 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
104.popup #toast-container {104.popup #toast-container {
105 /* Fix toastr in dialogs by actually placing it at the top of the screen via transform */105 /* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
106 height: 100svh;106 height: 100dvh;
107 top: calc(50% + var(--topBarBlockSize));107 top: calc(50% + var(--topBarBlockSize));
108 left: 50%;108 left: 50%;
109 transform: translate(-50%, -50%);109 transform: translate(-50%, -50%);
@@ -115,7 +115,7 @@ body.no-blur .popup[open]::backdrop {
115.popup-crop-wrap {115.popup-crop-wrap {
116 margin: 10px auto;116 margin: 10px auto;
117 max-height: 75vh;117 max-height: 75vh;
118 max-height: 75svh;118 max-height: 75dvh;
119 max-width: 100%;119 max-width: 100%;
120}120}
121121
public/css/toggle-dependent.css+1 -1
@@ -364,7 +364,7 @@ body.waifuMode #top-bar {
364364
365body.waifuMode #sheld {365body.waifuMode #sheld {
366 height: 40vh;366 height: 40vh;
367 height: 40svh;367 height: 40dvh;
368 top: calc(100% - 40vh);368 top: calc(100% - 40vh);
369 bottom: 0;369 bottom: 0;
370}370}
public/scripts/extensions/quick-reply/style.css+2 -2
@@ -231,8 +231,8 @@
231 flex-direction: column;231 flex-direction: column;
232 }232 }
233 body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {233 body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
234 min-height: 50svh;234 min-height: 50dvh;
235 height: 50svh;235 height: 50dvh;
236 }236 }
237}237}
238.popup:has(#qr--modalEditor) {238.popup:has(#qr--modalEditor) {
public/scripts/extensions/quick-reply/style.less+2 -2
@@ -297,8 +297,8 @@
297 }297 }
298298
299 >#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder {299 >#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder {
300 min-height: 50svh;300 min-height: 50dvh;
301 height: 50svh;301 height: 50dvh;
302 }302 }
303 }303 }
304}304}
public/style.css+42 -43
@@ -137,7 +137,6 @@ body {
137 width: 100%;137 width: 100%;
138 /*fallback for JS load*/138 /*fallback for JS load*/
139 height: 100vh;139 height: 100vh;
140 height: 100svh;
141 height: 100dvh;140 height: 100dvh;
142 /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/141 /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
143 /*height: calc(var(--doc-height) - 1px);*/142 /*height: calc(var(--doc-height) - 1px);*/
@@ -451,7 +450,7 @@ code {
451 border-radius: 5px;450 border-radius: 5px;
452 background-color: var(--black70a);451 background-color: var(--black70a);
453 padding: 0 3px;452 padding: 0 3px;
454 /* max-width: calc(100svw - 95px); */453 /* max-width: calc(100dvw - 95px); */
455 line-height: var(--mainFontSize);454 line-height: var(--mainFontSize);
456 color: var(--white70a);455 color: var(--white70a);
457}456}
@@ -535,13 +534,13 @@ body.reduced-motion #bg_custom {
535 flex-direction: column;534 flex-direction: column;
536 /* -1px to give sheld some wiggle room to bounce off tobar when moving*/535 /* -1px to give sheld some wiggle room to bounce off tobar when moving*/
537 height: calc(100vh - var(--topBarBlockSize) - 1px);536 height: calc(100vh - var(--topBarBlockSize) - 1px);
538 height: calc(100svh - var(--topBarBlockSize) - 1px);537 height: calc(100dvh - var(--topBarBlockSize) - 1px);
539 max-height: calc(100svh - var(--topBarBlockSize) - 1px);538 max-height: calc(100dvh - var(--topBarBlockSize) - 1px);
540 overflow-x: hidden;539 overflow-x: hidden;
541 /* max-width: 50vw; */540 /* max-width: 50vw; */
542 position: absolute;541 position: absolute;
543 left: calc((100vw - var(--sheldWidth))/2);542 left: calc((100vw - var(--sheldWidth))/2);
544 left: calc((100svw - var(--sheldWidth))/2);543 left: calc((100dvw - var(--sheldWidth))/2);
545 top: var(--topBarBlockSize);544 top: var(--topBarBlockSize);
546 margin: 0 auto;545 margin: 0 auto;
547 left: 0;546 left: 0;
@@ -1160,12 +1159,12 @@ textarea {
1160 font-family: var(--mainFontFamily);1159 font-family: var(--mainFontFamily);
1161 padding: 5px 10px;1160 padding: 5px 10px;
1162 max-height: 90vh;1161 max-height: 90vh;
1163 max-height: 90svh;1162 max-height: 90dvh;
1164}1163}
11651164
1166textarea.autoSetHeight {1165textarea.autoSetHeight {
1167 max-height: 50vh;1166 max-height: 50vh;
1168 max-height: 50svh;1167 max-height: 50dvh;
1169}1168}
11701169
1171input,1170input,
@@ -1179,7 +1178,7 @@ select {
1179 min-height: calc(var(--bottomFormBlockSize) + 2px);1178 min-height: calc(var(--bottomFormBlockSize) + 2px);
1180 height: calc(var(--bottomFormBlockSize) + 2px);1179 height: calc(var(--bottomFormBlockSize) + 2px);
1181 max-height: 50vh;1180 max-height: 50vh;
1182 max-height: 50svh;1181 max-height: 50dvh;
1183 word-wrap: break-word;1182 word-wrap: break-word;
1184 resize: vertical;1183 resize: vertical;
1185 display: block;1184 display: block;
@@ -2111,14 +2110,14 @@ textarea::placeholder {
2111@media screen and (max-width: 1000px) {2110@media screen and (max-width: 1000px) {
2112 #form_create textarea {2111 #form_create textarea {
2113 flex-grow: 1;2112 flex-grow: 1;
2114 min-height: 20svh;2113 min-height: 20dvh;
2115 }2114 }
2116}2115}
21172116
2118@media screen and (min-width: 1001px) {2117@media screen and (min-width: 1001px) {
2119 #description_textarea {2118 #description_textarea {
2120 height: 29vh;2119 height: 29vh;
2121 height: 29svh;2120 height: 29dvh;
2122 }2121 }
21232122
2124 #firstmessage_textarea {2123 #firstmessage_textarea {
@@ -2394,8 +2393,8 @@ input[type="file"] {
2394#floatingPrompt,2393#floatingPrompt,
2395#cfgConfig {2394#cfgConfig {
2396 overflow-y: auto;2395 overflow-y: auto;
2397 max-width: 90svw;2396 max-width: 90dvw;
2398 max-height: 90svh;2397 max-height: 90dvh;
2399 min-width: 100px;2398 min-width: 100px;
2400 min-height: 100px;2399 min-height: 100px;
2401 border-radius: 10px;2400 border-radius: 10px;
@@ -2411,7 +2410,7 @@ input[type="file"] {
2411 top: 0;2410 top: 0;
2412 margin: 0;2411 margin: 0;
2413 right: unset;2412 right: unset;
2414 width: calc(((100svw - var(--sheldWidth)) / 2) - 1px);2413 width: calc(((100dvw - var(--sheldWidth)) / 2) - 1px);
24152414
2416}2415}
24172416
@@ -2768,7 +2767,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
2768 flex-wrap: wrap;2767 flex-wrap: wrap;
2769 width: calc(var(--sheldWidth) - 10px);2768 width: calc(var(--sheldWidth) - 10px);
2770 max-width: 100vw;2769 max-width: 100vw;
2771 max-width: 100svw;2770 max-width: 100dvw;
2772 justify-content: space-evenly;2771 justify-content: space-evenly;
2773}2772}
27742773
@@ -3123,7 +3122,7 @@ grammarly-extension {
3123#dialogue_popup {3122#dialogue_popup {
3124 width: 500px;3123 width: 500px;
3125 max-width: 90vw;3124 max-width: 90vw;
3126 max-width: 90svw;3125 max-width: 90dvw;
3127 position: absolute;3126 position: absolute;
3128 z-index: 9999;3127 z-index: 9999;
3129 margin-left: auto;3128 margin-left: auto;
@@ -3139,7 +3138,7 @@ grammarly-extension {
3139 background-color: var(--SmartThemeBlurTintColor);3138 background-color: var(--SmartThemeBlurTintColor);
3140 border-radius: 10px;3139 border-radius: 10px;
3141 max-height: 90vh;3140 max-height: 90vh;
3142 max-height: 90svh;3141 max-height: 90dvh;
3143 display: flex;3142 display: flex;
3144 flex-direction: column;3143 flex-direction: column;
3145 overflow-y: hidden;3144 overflow-y: hidden;
@@ -3153,9 +3152,9 @@ grammarly-extension {
31533152
3154.large_dialogue_popup {3153.large_dialogue_popup {
3155 height: 90vh !important;3154 height: 90vh !important;
3156 height: 90svh !important;3155 height: 90dvh !important;
3157 max-width: 90vw !important;3156 max-width: 90vw !important;
3158 max-width: 90svw !important;3157 max-width: 90dvw !important;
3159}3158}
31603159
3161.wide_dialogue_popup {3160.wide_dialogue_popup {
@@ -3307,7 +3306,7 @@ grammarly-extension {
3307 position: absolute;3306 position: absolute;
3308 width: 100%;3307 width: 100%;
3309 height: 100vh;3308 height: 100vh;
3310 height: 100svh;3309 height: 100dvh;
3311 z-index: 9999;3310 z-index: 9999;
3312 top: 0;3311 top: 0;
3313}3312}
@@ -3315,9 +3314,9 @@ grammarly-extension {
3315#bgtest {3314#bgtest {
3316 display: none;3315 display: none;
3317 width: 100vw;3316 width: 100vw;
3318 width: 100svw;3317 width: 100dvw;
3319 height: 100vh;3318 height: 100vh;
3320 height: 100svh;3319 height: 100dvh;
3321 position: absolute;3320 position: absolute;
3322 z-index: -100;3321 z-index: -100;
3323 background-color: red;3322 background-color: red;
@@ -3954,7 +3953,7 @@ input[type="range"]::-webkit-slider-thumb {
3954 position: absolute;3953 position: absolute;
3955 width: 100%;3954 width: 100%;
3956 height: 100vh;3955 height: 100vh;
3957 height: 100svh;3956 height: 100dvh;
3958 z-index: 2058;3957 z-index: 2058;
3959}3958}
39603959
@@ -3967,11 +3966,11 @@ input[type="range"]::-webkit-slider-thumb {
3967 min-width: 100px;3966 min-width: 100px;
3968 max-width: var(--sheldWidth);3967 max-width: var(--sheldWidth);
3969 height: calc(100vh - 84px);3968 height: calc(100vh - 84px);
3970 height: calc(100svh - 84px);3969 height: calc(100dvh - 84px);
3971 min-height: calc(100vh - 84px);3970 min-height: calc(100vh - 84px);
3972 min-height: calc(100svh - 84px);3971 min-height: calc(100dvh - 84px);
3973 max-height: calc(100vh - 84px);3972 max-height: calc(100vh - 84px);
3974 max-height: calc(100svh - 84px);3973 max-height: calc(100dvh - 84px);
3975 position: absolute;3974 position: absolute;
3976 z-index: 4001;3975 z-index: 4001;
3977 margin-left: auto;3976 margin-left: auto;
@@ -4050,7 +4049,7 @@ h5 {
4050 position: absolute;4049 position: absolute;
4051 width: 100%;4050 width: 100%;
4052 height: 100vh;4051 height: 100vh;
4053 height: 100svh;4052 height: 100dvh;
4054 z-index: 4100;4053 z-index: 4100;
4055 top: 0;4054 top: 0;
4056 background-color: var(--black70a);4055 background-color: var(--black70a);
@@ -4064,7 +4063,7 @@ h5 {
4064 max-width: var(--sheldWidth);4063 max-width: var(--sheldWidth);
4065 height: min-content;4064 height: min-content;
4066 max-height: calc(100vh - var(--topBarBlockSize));4065 max-height: calc(100vh - var(--topBarBlockSize));
4067 max-height: calc(100svh - var(--topBarBlockSize));4066 max-height: calc(100dvh - var(--topBarBlockSize));
4068 min-height: 100px;4067 min-height: 100px;
4069 position: absolute;4068 position: absolute;
4070 z-index: 2066;4069 z-index: 2066;
@@ -4384,14 +4383,14 @@ a {
4384 overflow-wrap: break-word;4383 overflow-wrap: break-word;
4385 white-space: normal;4384 white-space: normal;
4386 max-width: calc(((100vw - 500px) / 2) - 10px);4385 max-width: calc(((100vw - 500px) / 2) - 10px);
4387 max-width: calc(((100svw - 500px) / 2) - 10px);4386 max-width: calc(((100dvw - 500px) / 2) - 10px);
4388 position: absolute;4387 position: absolute;
4389 z-index: 9999;4388 z-index: 9999;
4390 max-height: 90vh;4389 max-height: 90vh;
4391 max-height: 90svh;4390 max-height: 90dvh;
4392 /*unsure why, but this prevents scrollbars*/4391 /*unsure why, but this prevents scrollbars*/
4393 height: 49vh;4392 height: 49vh;
4394 height: 49svh;4393 height: 49dvh;
43954394
4396 padding: 5px;4395 padding: 5px;
4397 overflow-y: auto;4396 overflow-y: auto;
@@ -4427,11 +4426,11 @@ a {
44274426
4428#right-nav-panel {4427#right-nav-panel {
4429 width: calc((100vw - var(--sheldWidth) - 2px) /2);4428 width: calc((100vw - var(--sheldWidth) - 2px) /2);
4430 width: calc((100svw - var(--sheldWidth) - 2px) /2);4429 width: calc((100dvw - var(--sheldWidth) - 2px) /2);
4431 max-height: calc(100vh - var(--topBarBlockSize));4430 max-height: calc(100vh - var(--topBarBlockSize));
4432 max-height: calc(100svh - var(--topBarBlockSize));4431 max-height: calc(100dvh - var(--topBarBlockSize));
4433 height: calc(100vh - var(--topBarBlockSize));4432 height: calc(100vh - var(--topBarBlockSize));
4434 height: calc(100svh - var(--topBarBlockSize));4433 height: calc(100dvh - var(--topBarBlockSize));
4435 position: fixed;4434 position: fixed;
4436 top: 0;4435 top: 0;
4437 margin: 0;4436 margin: 0;
@@ -4484,7 +4483,7 @@ a {
4484 border-radius: 10px;4483 border-radius: 10px;
4485 max-width: 100%;4484 max-width: 100%;
4486 max-height: 40vh;4485 max-height: 40vh;
4487 max-height: 40svh;4486 max-height: 40dvh;
4488 image-rendering: -webkit-optimize-contrast;4487 image-rendering: -webkit-optimize-contrast;
4489}4488}
44904489
@@ -4576,18 +4575,18 @@ body:not(.caption) .mes_img_caption {
45764575
4577.img_enlarged_container pre {4576.img_enlarged_container pre {
4578 max-height: 25vh;4577 max-height: 25vh;
4579 max-height: 25svh;4578 max-height: 25dvh;
4580 flex-shrink: 0;4579 flex-shrink: 0;
4581 overflow: auto;4580 overflow: auto;
4582}4581}
45834582
4584.popup:has(.img_enlarged.zoomed).large_dialogue_popup {4583.popup:has(.img_enlarged.zoomed).large_dialogue_popup {
4585 height: 100vh !important;4584 height: 100vh !important;
4586 height: 100svh !important;4585 height: 100dvh !important;
4587 max-height: 100vh !important;4586 max-height: 100vh !important;
4588 max-height: 100svh !important;4587 max-height: 100dvh !important;
4589 max-width: 100vw !important;4588 max-width: 100vw !important;
4590 max-width: 100svw !important;4589 max-width: 100dvw !important;
4591 padding: 0;4590 padding: 0;
4592}4591}
45934592
@@ -4774,7 +4773,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
4774 width: var(--sheldWidth);4773 width: var(--sheldWidth);
4775 overflow-y: auto;4774 overflow-y: auto;
4776 max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));4775 max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
4777 max-height: calc(100svh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));4776 max-height: calc(100dvh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
4778 display: none;4777 display: none;
4779 position: absolute;4778 position: absolute;
4780 top: var(--topBarBlockSize);4779 top: var(--topBarBlockSize);
@@ -4809,11 +4808,11 @@ body:not(.movingUI) .drawer-content.maximized {
48094808
4810.fillLeft {4809.fillLeft {
4811 width: calc((100vw - var(--sheldWidth) - 2px) /2);4810 width: calc((100vw - var(--sheldWidth) - 2px) /2);
4812 width: calc((100svw - var(--sheldWidth) - 2px) /2);4811 width: calc((100dvw - var(--sheldWidth) - 2px) /2);
4813 height: calc(100vh - var(--topBarBlockSize));4812 height: calc(100vh - var(--topBarBlockSize));
4814 height: calc(100svh - var(--topBarBlockSize));4813 height: calc(100dvh - var(--topBarBlockSize));
4815 max-height: calc(100vh - var(--topBarBlockSize));4814 max-height: calc(100vh - var(--topBarBlockSize));
4816 max-height: calc(100svh - var(--topBarBlockSize));4815 max-height: calc(100dvh - var(--topBarBlockSize));
4817 position: fixed;4816 position: fixed;
4818 top: 0;4817 top: 0;
4819 margin: 0;4818 margin: 0;
@@ -5063,7 +5062,7 @@ body:not(.movingUI) .drawer-content.maximized {
5063 width: 100%;5062 width: 100%;
5064 /* margin-inline: 10px; */5063 /* margin-inline: 10px; */
5065 max-height: 90vh;5064 max-height: 90vh;
5066 max-width: 90svh;5065 max-width: 90dvh;
5067}5066}
50685067
5069.zoomed_avatar img {5068.zoomed_avatar img {