Switch to dynamic viewport units

b7a1474d7badd8da71504c5c9c0d5a78649909d3

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

Parents: ecceeec62a3d821d86fec57c1af3c40263023ab8
10 files changed, +81 -86Showing whitespace changes
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+23 -27
@@ -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 }
@@ -30,9 +32,9 @@
3032 right: 0;
3133 width: fit-content;
3234 max-height: calc(60vh - 60px);
3335 max-height: calc(60svh60dvh - 60px);
3436 max-width: 90vw;
3537 max-width: 90svw90dvw;
3638 left: 50%;
3739 top: 50%;
3840 transform: translateX(-50%) translateY(-50%);
@@ -98,7 +100,7 @@
98100 min-width: unset;
99101 width: 100%;
100102 max-height: calc(100vh - 45px);
101103 max-height: calc(100svh100dvh - 45px);
102104 position: fixed;
103105 left: 0;
104106 top: 5px;
@@ -126,15 +128,15 @@
126128 #top-bar {
127129 position: fixed;
128130 width: 100vw;
129131 width: 100svw100dvw;
130132 }
131133
132134 #bg1,
133135 #bg_custom {
134136 height: 100vh !important;
135137 height: 100svh100dvh !important;
136138 width: 100vw !important;
137139 width: 100svw100dvw !important;
138140 background-position: center;
139141
140142 }
@@ -142,13 +144,7 @@
142144
143145 #sheld,
144146 #character_popup,
145147 .drawer-content {
146-
147- /* ,
148- #world_popup */
149- {
150- /*max-height: calc(100vh - 36px);
151- max-height: calc(100svh - 36px);*/
152148 width: 100% !important;
153149 margin: 0 auto;
154150 max-width: 100%;
@@ -220,9 +216,9 @@
220216 #cfgConfig,
221217 #logprobsViewer,
222218 #movingDivs>div {
223219 /* 100vh are fallback units for browsers that don't support svhdvh */
224220 height: calc(100vh - 45px);
225221 height: calc(100svh100dvh - 45px);
226222 min-width: 100% !important;
227223 width: 100% !important;
228224 max-width: 100% !important;
@@ -282,9 +278,9 @@
282278
283279 body.waifuMode #sheld {
284280 height: 40vh;
285281 height: 40svh40dvh;
286282 top: 60vh;
287283 top: 60svh60dvh;
288284 bottom: 0 !important;
289285 }
290286
@@ -321,16 +317,16 @@
321317 body.waifuMode .zoomed_avatar {
322318 width: fit-content;
323319 max-height: calc(60vh - 60px);
324320 max-height: calc(60svh60dvh - 60px);
325321 max-width: 90vw;
326322 max-width: 90svw90dvw;
327323 }
328324
329325 .scrollableInner {
330326 overflow-y: auto;
331327 overflow-x: hidden;
332328 max-height: calc(100vh - 90px);
333329 max-height: calc(100svh100dvh - 90px);
334330 }
335331
336332 .horde_multiple_hint {
@@ -366,9 +362,9 @@
366362
367363 body:not(.waifuMode) .zoomed_avatar {
368364 max-height: calc(60vh - 60px);
369365 max-height: calc(60svh60dvh - 60px);
370366 max-width: 90vw;
371367 max-width: 90svw90dvw;
372368 left: 50%;
373369 top: 50%;
374370 transform: translateX(-50%) translateY(-50%);
@@ -449,9 +445,9 @@
449445 min-height: unset;
450446 max-height: unset;
451447 width: 100vw;
452448 width: 100svw100dvw;
453449 height: calc(100vh - 36px);
454450 height: calc(100svh100dvh - 36px);
455451 padding-right: max(env(safe-area-inset-right), 0px);
456452 padding-left: max(env(safe-area-inset-left), 0px);
457453 padding-bottom: 0;
@@ -481,10 +477,10 @@
481477 top: 0;
482478 margin: 0 auto;
483479 height: calc(100vh - 70px);
484480 height: calc(100svh100dvh - 70px);
485481 width: calc(100% - 5px);
486482 max-height: calc(100vh - 70px);
487483 max-height: calc(100svh100dvh - 70px);
488484 max-width: calc(100% - 5px);
489485
490486 }
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
@@ -360,7 +360,7 @@ body.waifuMode #top-bar {
360360
361361body.waifuMode #sheld {
362362 height: 40vh;
363363 height: 40svh40dvh;
364364 top: calc(100% - 40vh);
365365 bottom: 0;
366366}
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 {