Switch to dynamic viewport units

b7a1474d7badd8da71504c5c9c0d5a78649909d3

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

Parents: ecceeec62a3d821d86fec57c1af3c40263023ab8
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 }
@@ -30,9 +32,9 @@
30 right: 0;32 right: 0;
31 width: fit-content;33 width: fit-content;
32 max-height: calc(60vh - 60px);34 max-height: calc(60vh - 60px);
33 max-height: calc(60svh - 60px);35 max-height: calc(60dvh - 60px);
34 max-width: 90vw;36 max-width: 90vw;
35 max-width: 90svw;37 max-width: 90dvw;
36 left: 50%;38 left: 50%;
37 top: 50%;39 top: 50%;
38 transform: translateX(-50%) translateY(-50%);40 transform: translateX(-50%) translateY(-50%);
@@ -98,7 +100,7 @@
98 min-width: unset;100 min-width: unset;
99 width: 100%;101 width: 100%;
100 max-height: calc(100vh - 45px);102 max-height: calc(100vh - 45px);
101 max-height: calc(100svh - 45px);103 max-height: calc(100dvh - 45px);
102 position: fixed;104 position: fixed;
103 left: 0;105 left: 0;
104 top: 5px;106 top: 5px;
@@ -126,15 +128,15 @@
126 #top-bar {128 #top-bar {
127 position: fixed;129 position: fixed;
128 width: 100vw;130 width: 100vw;
129 width: 100svw;131 width: 100dvw;
130 }132 }
131133
132 #bg1,134 #bg1,
133 #bg_custom {135 #bg_custom {
134 height: 100vh !important;136 height: 100vh !important;
135 height: 100svh !important;137 height: 100dvh !important;
136 width: 100vw !important;138 width: 100vw !important;
137 width: 100svw !important;139 width: 100dvw !important;
138 background-position: center;140 background-position: center;
139141
140 }142 }
@@ -142,13 +144,7 @@
142144
143 #sheld,145 #sheld,
144 #character_popup,146 #character_popup,
145 .drawer-content147 .drawer-content {
146
147 /* ,
148 #world_popup */
149 {
150 /*max-height: calc(100vh - 36px);
151 max-height: calc(100svh - 36px);*/
152 width: 100% !important;148 width: 100% !important;
153 margin: 0 auto;149 margin: 0 auto;
154 max-width: 100%;150 max-width: 100%;
@@ -219,10 +215,10 @@
219 #floatingPrompt,215 #floatingPrompt,
220 #cfgConfig,216 #cfgConfig,
221 #logprobsViewer,217 #logprobsViewer,
222 #movingDivs > div {218 #movingDivs>div {
223 /* 100vh are fallback units for browsers that don't support svh */219 /* 100vh are fallback units for browsers that don't support dvh */
224 height: calc(100vh - 45px);220 height: calc(100vh - 45px);
225 height: calc(100svh - 45px);221 height: calc(100dvh - 45px);
226 min-width: 100% !important;222 min-width: 100% !important;
227 width: 100% !important;223 width: 100% !important;
228 max-width: 100% !important;224 max-width: 100% !important;
@@ -245,7 +241,7 @@
245 #floatingPrompt,241 #floatingPrompt,
246 #cfgConfig,242 #cfgConfig,
247 #logprobsViewer,243 #logprobsViewer,
248 #movingDivs > div {244 #movingDivs>div {
249 height: min-content;245 height: min-content;
250 }246 }
251247
@@ -282,9 +278,9 @@
282278
283 body.waifuMode #sheld {279 body.waifuMode #sheld {
284 height: 40vh;280 height: 40vh;
285 height: 40svh;281 height: 40dvh;
286 top: 60vh;282 top: 60vh;
287 top: 60svh;283 top: 60dvh;
288 bottom: 0 !important;284 bottom: 0 !important;
289 }285 }
290286
@@ -321,16 +317,16 @@
321 body.waifuMode .zoomed_avatar {317 body.waifuMode .zoomed_avatar {
322 width: fit-content;318 width: fit-content;
323 max-height: calc(60vh - 60px);319 max-height: calc(60vh - 60px);
324 max-height: calc(60svh - 60px);320 max-height: calc(60dvh - 60px);
325 max-width: 90vw;321 max-width: 90vw;
326 max-width: 90svw;322 max-width: 90dvw;
327 }323 }
328324
329 .scrollableInner {325 .scrollableInner {
330 overflow-y: auto;326 overflow-y: auto;
331 overflow-x: hidden;327 overflow-x: hidden;
332 max-height: calc(100vh - 90px);328 max-height: calc(100vh - 90px);
333 max-height: calc(100svh - 90px);329 max-height: calc(100dvh - 90px);
334 }330 }
335331
336 .horde_multiple_hint {332 .horde_multiple_hint {
@@ -366,9 +362,9 @@
366362
367 body:not(.waifuMode) .zoomed_avatar {363 body:not(.waifuMode) .zoomed_avatar {
368 max-height: calc(60vh - 60px);364 max-height: calc(60vh - 60px);
369 max-height: calc(60svh - 60px);365 max-height: calc(60dvh - 60px);
370 max-width: 90vw;366 max-width: 90vw;
371 max-width: 90svw;367 max-width: 90dvw;
372 left: 50%;368 left: 50%;
373 top: 50%;369 top: 50%;
374 transform: translateX(-50%) translateY(-50%);370 transform: translateX(-50%) translateY(-50%);
@@ -449,9 +445,9 @@
449 min-height: unset;445 min-height: unset;
450 max-height: unset;446 max-height: unset;
451 width: 100vw;447 width: 100vw;
452 width: 100svw;448 width: 100dvw;
453 height: calc(100vh - 36px);449 height: calc(100vh - 36px);
454 height: calc(100svh - 36px);450 height: calc(100dvh - 36px);
455 padding-right: max(env(safe-area-inset-right), 0px);451 padding-right: max(env(safe-area-inset-right), 0px);
456 padding-left: max(env(safe-area-inset-left), 0px);452 padding-left: max(env(safe-area-inset-left), 0px);
457 padding-bottom: 0;453 padding-bottom: 0;
@@ -481,10 +477,10 @@
481 top: 0;477 top: 0;
482 margin: 0 auto;478 margin: 0 auto;
483 height: calc(100vh - 70px);479 height: calc(100vh - 70px);
484 height: calc(100svh - 70px);480 height: calc(100dvh - 70px);
485 width: calc(100% - 5px);481 width: calc(100% - 5px);
486 max-height: calc(100vh - 70px);482 max-height: calc(100vh - 70px);
487 max-height: calc(100svh - 70px);483 max-height: calc(100dvh - 70px);
488 max-width: calc(100% - 5px);484 max-width: calc(100% - 5px);
489485
490 }486 }
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
@@ -360,7 +360,7 @@ body.waifuMode #top-bar {
360360
361body.waifuMode #sheld {361body.waifuMode #sheld {
362 height: 40vh;362 height: 40vh;
363 height: 40svh;363 height: 40dvh;
364 top: calc(100% - 40vh);364 top: calc(100% - 40vh);
365 bottom: 0;365 bottom: 0;
366}366}
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 {