rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-04-02 21:21:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2562 from SillyTavern/dvh-units

Browse Source
This commit is contained in:
Cohee 2024-07-26 19:34:03 +03:00 committed by GitHub
commit 6f58f9c599
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 83 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/character-group-overlay.css
View File

@ -89,7 +89,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
height: 100svh; height: 100dvh;
z-index: 9998; z-index: 9998;
top: 0; top: 0;
} }

4
public/css/loader.css
View File

@ -7,8 +7,8 @@
z-index: 999999; z-index: 999999;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
width: 100svw; width: 100dvw;
height: 100svh; height: 100dvh;
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeBlurTintColor);
color: var(--SmartThemeBodyColor); color: var(--SmartThemeBodyColor);
/*for some reason the full screen blur does not work on iOS*/ /*for some reason the full screen blur does not work on iOS*/

6
public/css/logprobs.css
View File

@ -1,7 +1,7 @@
#logprobsViewer { #logprobsViewer {
overflow-y: auto; overflow-y: auto;
max-width: 90svw; max-width: 90dvw;
max-height: 90svh; max-height: 90dvh;
min-width: 100px; min-width: 100px;
min-height: 50px; min-height: 50px;
border-radius: 10px; border-radius: 10px;
@ -16,7 +16,7 @@
top: 0; top: 0;
margin: 0; margin: 0;
right: unset; right: unset;
width: calc(((100svw - var(--sheldWidth)) / 2) - 1px); width: calc(((100dvw - var(--sheldWidth)) / 2) - 1px);
} }
.logprobs_panel_header { .logprobs_panel_header {

54
public/css/mobile-styles.css
View File

@ -1,6 +1,8 @@
/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/ /*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
#send_form.compact #leftSendForm, #send_form.compact #rightSendForm {
#send_form.compact #leftSendForm,
#send_form.compact #rightSendForm {
flex-wrap: nowrap; flex-wrap: nowrap;
width: unset; width: unset;
} }
@ -34,9 +36,9 @@
right: 0; right: 0;
width: fit-content; width: fit-content;
max-height: calc(60vh - 60px); max-height: calc(60vh - 60px);
max-height: calc(60svh - 60px); max-height: calc(60dvh - 60px);
max-width: 90vw; max-width: 90vw;
max-width: 90svw; max-width: 90dvw;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
@ -102,7 +104,7 @@
min-width: unset; min-width: unset;
width: 100%; width: 100%;
max-height: calc(100vh - 45px); max-height: calc(100vh - 45px);
max-height: calc(100svh - 45px); max-height: calc(100dvh - 45px);
position: fixed; position: fixed;
left: 0; left: 0;
top: 5px; top: 5px;
@ -130,15 +132,15 @@
#top-bar { #top-bar {
position: fixed; position: fixed;
width: 100vw; width: 100vw;
width: 100svw; width: 100dvw;
} }
#bg1, #bg1,
#bg_custom { #bg_custom {
height: 100vh !important; height: 100vh !important;
height: 100svh !important; height: 100dvh !important;
width: 100vw !important; width: 100vw !important;
width: 100svw !important; width: 100dvw !important;
background-position: center; background-position: center;
} }
@ -146,13 +148,7 @@
#sheld, #sheld,
#character_popup, #character_popup,
.drawer-content .drawer-content {
/* ,
#world_popup */
{
/*max-height: calc(100vh - 36px);
max-height: calc(100svh - 36px);*/
width: 100% !important; width: 100% !important;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
@ -223,10 +219,10 @@
#floatingPrompt, #floatingPrompt,
#cfgConfig, #cfgConfig,
#logprobsViewer, #logprobsViewer,
#movingDivs > div { #movingDivs>div {
/* 100vh are fallback units for browsers that don't support svh */ /* 100vh are fallback units for browsers that don't support dvh */
height: calc(100vh - 45px); height: calc(100vh - 45px);
height: calc(100svh - 45px); height: calc(100dvh - 45px);
min-width: 100% !important; min-width: 100% !important;
width: 100% !important; width: 100% !important;
max-width: 100% !important; max-width: 100% !important;
@ -249,7 +245,7 @@
#floatingPrompt, #floatingPrompt,
#cfgConfig, #cfgConfig,
#logprobsViewer, #logprobsViewer,
#movingDivs > div { #movingDivs>div {
height: min-content; height: min-content;
} }
@ -286,9 +282,9 @@
body.waifuMode #sheld { body.waifuMode #sheld {
height: 40vh; height: 40vh;
height: 40svh; height: 40dvh;
top: 60vh; top: 60vh;
top: 60svh; top: 60dvh;
bottom: 0 !important; bottom: 0 !important;
} }
@ -325,16 +321,16 @@
body.waifuMode .zoomed_avatar { body.waifuMode .zoomed_avatar {
width: fit-content; width: fit-content;
max-height: calc(60vh - 60px); max-height: calc(60vh - 60px);
max-height: calc(60svh - 60px); max-height: calc(60dvh - 60px);
max-width: 90vw; max-width: 90vw;
max-width: 90svw; max-width: 90dvw;
} }
.scrollableInner { .scrollableInner {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
max-height: calc(100vh - 90px); max-height: calc(100vh - 90px);
max-height: calc(100svh - 90px); max-height: calc(100dvh - 90px);
} }
.horde_multiple_hint { .horde_multiple_hint {
@ -370,9 +366,9 @@
body:not(.waifuMode) .zoomed_avatar { body:not(.waifuMode) .zoomed_avatar {
max-height: calc(60vh - 60px); max-height: calc(60vh - 60px);
max-height: calc(60svh - 60px); max-height: calc(60dvh - 60px);
max-width: 90vw; max-width: 90vw;
max-width: 90svw; max-width: 90dvw;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
@ -453,9 +449,9 @@
min-height: unset; min-height: unset;
max-height: unset; max-height: unset;
width: 100vw; width: 100vw;
width: 100svw; width: 100dvw;
height: calc(100vh - 36px); height: calc(100vh - 36px);
height: calc(100svh - 36px); height: calc(100dvh - 36px);
padding-right: max(env(safe-area-inset-right), 0px); padding-right: max(env(safe-area-inset-right), 0px);
padding-left: max(env(safe-area-inset-left), 0px); padding-left: max(env(safe-area-inset-left), 0px);
padding-bottom: 0; padding-bottom: 0;
@ -485,10 +481,10 @@
top: 0; top: 0;
margin: 0 auto; margin: 0 auto;
height: calc(100vh - 70px); height: calc(100vh - 70px);
height: calc(100svh - 70px); height: calc(100dvh - 70px);
width: calc(100% - 5px); width: calc(100% - 5px);
max-height: calc(100vh - 70px); max-height: calc(100vh - 70px);
max-height: calc(100svh - 70px); max-height: calc(100dvh - 70px);
max-width: calc(100% - 5px); max-width: calc(100% - 5px);
} }

2
public/css/popup-safari-fix.css
View File

@ -7,5 +7,5 @@ body.safari .popup.large_dialogue_popup .popup-body {
body.safari .popup .popup-body { body.safari .popup .popup-body {
height: fit-content; height: fit-content;
max-height: 90vh; max-height: 90vh;
max-height: 90svh; max-height: 90dvh;
} }

8
public/css/popup.css
View File

@ -16,8 +16,8 @@ dialog {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: calc(100svh - 2em); max-height: calc(100dvh - 2em);
max-width: calc(100svw - 2em); max-width: calc(100dvw - 2em);
min-height: fit-content; min-height: fit-content;
/* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup-body' is hiding overflow for the real content. */ /* 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 {
.popup #toast-container { .popup #toast-container {
/* Fix toastr in dialogs by actually placing it at the top of the screen via transform */ /* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
height: 100svh; height: 100dvh;
top: calc(50% + var(--topBarBlockSize)); top: calc(50% + var(--topBarBlockSize));
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -115,7 +115,7 @@ body.no-blur .popup[open]::backdrop {
.popup-crop-wrap { .popup-crop-wrap {
margin: 10px auto; margin: 10px auto;
max-height: 75vh; max-height: 75vh;
max-height: 75svh; max-height: 75dvh;
max-width: 100%; max-width: 100%;
} }

2
public/css/toggle-dependent.css
View File

@ -364,7 +364,7 @@ body.waifuMode #top-bar {
body.waifuMode #sheld { body.waifuMode #sheld {
height: 40vh; height: 40vh;
height: 40svh; height: 40dvh;
top: calc(100% - 40vh); top: calc(100% - 40vh);
bottom: 0; bottom: 0;
} }

4
public/scripts/extensions/quick-reply/style.css
View File

@ -231,8 +231,8 @@
flex-direction: column; flex-direction: column;
} }
body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder { body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
min-height: 50svh; min-height: 50dvh;
height: 50svh; height: 50dvh;
} }
} }
.popup:has(#qr--modalEditor) { .popup:has(#qr--modalEditor) {

4
public/scripts/extensions/quick-reply/style.less
View File

@ -297,8 +297,8 @@
} }
>#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder { >#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder {
min-height: 50svh; min-height: 50dvh;
height: 50svh; height: 50dvh;
} }
} }
} }

85
public/style.css
View File

@ -137,7 +137,6 @@ body {
width: 100%; width: 100%;
/*fallback for JS load*/ /*fallback for JS load*/
height: 100vh; height: 100vh;
height: 100svh;
height: 100dvh; height: 100dvh;
/*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/ /*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
/*height: calc(var(--doc-height) - 1px);*/ /*height: calc(var(--doc-height) - 1px);*/
@ -451,7 +450,7 @@ code {
border-radius: 5px; border-radius: 5px;
background-color: var(--black70a); background-color: var(--black70a);
padding: 0 3px; padding: 0 3px;
/* max-width: calc(100svw - 95px); */ /* max-width: calc(100dvw - 95px); */
line-height: var(--mainFontSize); line-height: var(--mainFontSize);
color: var(--white70a); color: var(--white70a);
} }
@ -535,13 +534,13 @@ body.reduced-motion #bg_custom {
flex-direction: column; flex-direction: column;
/* -1px to give sheld some wiggle room to bounce off tobar when moving*/ /* -1px to give sheld some wiggle room to bounce off tobar when moving*/
height: calc(100vh - var(--topBarBlockSize) - 1px); height: calc(100vh - var(--topBarBlockSize) - 1px);
height: calc(100svh - var(--topBarBlockSize) - 1px); height: calc(100dvh - var(--topBarBlockSize) - 1px);
max-height: calc(100svh - var(--topBarBlockSize) - 1px); max-height: calc(100dvh - var(--topBarBlockSize) - 1px);
overflow-x: hidden; overflow-x: hidden;
/* max-width: 50vw; */ /* max-width: 50vw; */
position: absolute; position: absolute;
left: calc((100vw - var(--sheldWidth))/2); left: calc((100vw - var(--sheldWidth))/2);
left: calc((100svw - var(--sheldWidth))/2); left: calc((100dvw - var(--sheldWidth))/2);
top: var(--topBarBlockSize); top: var(--topBarBlockSize);
margin: 0 auto; margin: 0 auto;
left: 0; left: 0;
@ -1160,12 +1159,12 @@ textarea {
font-family: var(--mainFontFamily); font-family: var(--mainFontFamily);
padding: 5px 10px; padding: 5px 10px;
max-height: 90vh; max-height: 90vh;
max-height: 90svh; max-height: 90dvh;
} }
textarea.autoSetHeight { textarea.autoSetHeight {
max-height: 50vh; max-height: 50vh;
max-height: 50svh; max-height: 50dvh;
} }
input, input,
@ -1179,7 +1178,7 @@ select {
min-height: calc(var(--bottomFormBlockSize) + 2px); min-height: calc(var(--bottomFormBlockSize) + 2px);
height: calc(var(--bottomFormBlockSize) + 2px); height: calc(var(--bottomFormBlockSize) + 2px);
max-height: 50vh; max-height: 50vh;
max-height: 50svh; max-height: 50dvh;
word-wrap: break-word; word-wrap: break-word;
resize: vertical; resize: vertical;
display: block; display: block;
@ -2111,14 +2110,14 @@ textarea::placeholder {
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
#form_create textarea { #form_create textarea {
flex-grow: 1; flex-grow: 1;
min-height: 20svh; min-height: 20dvh;
} }
} }
@media screen and (min-width: 1001px) { @media screen and (min-width: 1001px) {
#description_textarea { #description_textarea {
height: 29vh; height: 29vh;
height: 29svh; height: 29dvh;
} }
#firstmessage_textarea { #firstmessage_textarea {
@ -2394,8 +2393,8 @@ input[type="file"] {
#floatingPrompt, #floatingPrompt,
#cfgConfig { #cfgConfig {
overflow-y: auto; overflow-y: auto;
max-width: 90svw; max-width: 90dvw;
max-height: 90svh; max-height: 90dvh;
min-width: 100px; min-width: 100px;
min-height: 100px; min-height: 100px;
border-radius: 10px; border-radius: 10px;
@ -2411,7 +2410,7 @@ input[type="file"] {
top: 0; top: 0;
margin: 0; margin: 0;
right: unset; right: unset;
width: calc(((100svw - var(--sheldWidth)) / 2) - 1px); width: calc(((100dvw - var(--sheldWidth)) / 2) - 1px);
} }
@ -2768,7 +2767,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
flex-wrap: wrap; flex-wrap: wrap;
width: calc(var(--sheldWidth) - 10px); width: calc(var(--sheldWidth) - 10px);
max-width: 100vw; max-width: 100vw;
max-width: 100svw; max-width: 100dvw;
justify-content: space-evenly; justify-content: space-evenly;
} }
@ -3123,7 +3122,7 @@ grammarly-extension {
#dialogue_popup { #dialogue_popup {
width: 500px; width: 500px;
max-width: 90vw; max-width: 90vw;
max-width: 90svw; max-width: 90dvw;
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
margin-left: auto; margin-left: auto;
@ -3139,7 +3138,7 @@ grammarly-extension {
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeBlurTintColor);
border-radius: 10px; border-radius: 10px;
max-height: 90vh; max-height: 90vh;
max-height: 90svh; max-height: 90dvh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: hidden; overflow-y: hidden;
@ -3153,9 +3152,9 @@ grammarly-extension {
.large_dialogue_popup { .large_dialogue_popup {
height: 90vh !important; height: 90vh !important;
height: 90svh !important; height: 90dvh !important;
max-width: 90vw !important; max-width: 90vw !important;
max-width: 90svw !important; max-width: 90dvw !important;
} }
.wide_dialogue_popup { .wide_dialogue_popup {
@ -3307,7 +3306,7 @@ grammarly-extension {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
height: 100svh; height: 100dvh;
z-index: 9999; z-index: 9999;
top: 0; top: 0;
} }
@ -3315,9 +3314,9 @@ grammarly-extension {
#bgtest { #bgtest {
display: none; display: none;
width: 100vw; width: 100vw;
width: 100svw; width: 100dvw;
height: 100vh; height: 100vh;
height: 100svh; height: 100dvh;
position: absolute; position: absolute;
z-index: -100; z-index: -100;
background-color: red; background-color: red;
@ -3954,7 +3953,7 @@ input[type="range"]::-webkit-slider-thumb {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
height: 100svh; height: 100dvh;
z-index: 2058; z-index: 2058;
} }
@ -3967,11 +3966,11 @@ input[type="range"]::-webkit-slider-thumb {
min-width: 100px; min-width: 100px;
max-width: var(--sheldWidth); max-width: var(--sheldWidth);
height: calc(100vh - 84px); height: calc(100vh - 84px);
height: calc(100svh - 84px); height: calc(100dvh - 84px);
min-height: calc(100vh - 84px); min-height: calc(100vh - 84px);
min-height: calc(100svh - 84px); min-height: calc(100dvh - 84px);
max-height: calc(100vh - 84px); max-height: calc(100vh - 84px);
max-height: calc(100svh - 84px); max-height: calc(100dvh - 84px);
position: absolute; position: absolute;
z-index: 4001; z-index: 4001;
margin-left: auto; margin-left: auto;
@ -4050,7 +4049,7 @@ h5 {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
height: 100svh; height: 100dvh;
z-index: 4100; z-index: 4100;
top: 0; top: 0;
background-color: var(--black70a); background-color: var(--black70a);
@ -4064,7 +4063,7 @@ h5 {
max-width: var(--sheldWidth); max-width: var(--sheldWidth);
height: min-content; height: min-content;
max-height: calc(100vh - var(--topBarBlockSize)); max-height: calc(100vh - var(--topBarBlockSize));
max-height: calc(100svh - var(--topBarBlockSize)); max-height: calc(100dvh - var(--topBarBlockSize));
min-height: 100px; min-height: 100px;
position: absolute; position: absolute;
z-index: 2066; z-index: 2066;
@ -4384,14 +4383,14 @@ a {
overflow-wrap: break-word; overflow-wrap: break-word;
white-space: normal; white-space: normal;
max-width: calc(((100vw - 500px) / 2) - 10px); max-width: calc(((100vw - 500px) / 2) - 10px);
max-width: calc(((100svw - 500px) / 2) - 10px); max-width: calc(((100dvw - 500px) / 2) - 10px);
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
max-height: 90vh; max-height: 90vh;
max-height: 90svh; max-height: 90dvh;
/*unsure why, but this prevents scrollbars*/ /*unsure why, but this prevents scrollbars*/
height: 49vh; height: 49vh;
height: 49svh; height: 49dvh;
padding: 5px; padding: 5px;
overflow-y: auto; overflow-y: auto;
@ -4427,11 +4426,11 @@ a {
#right-nav-panel { #right-nav-panel {
width: calc((100vw - var(--sheldWidth) - 2px) /2); width: calc((100vw - var(--sheldWidth) - 2px) /2);
width: calc((100svw - var(--sheldWidth) - 2px) /2); width: calc((100dvw - var(--sheldWidth) - 2px) /2);
max-height: calc(100vh - var(--topBarBlockSize)); max-height: calc(100vh - var(--topBarBlockSize));
max-height: calc(100svh - var(--topBarBlockSize)); max-height: calc(100dvh - var(--topBarBlockSize));
height: calc(100vh - var(--topBarBlockSize)); height: calc(100vh - var(--topBarBlockSize));
height: calc(100svh - var(--topBarBlockSize)); height: calc(100dvh - var(--topBarBlockSize));
position: fixed; position: fixed;
top: 0; top: 0;
margin: 0; margin: 0;
@ -4484,7 +4483,7 @@ a {
border-radius: 10px; border-radius: 10px;
max-width: 100%; max-width: 100%;
max-height: 40vh; max-height: 40vh;
max-height: 40svh; max-height: 40dvh;
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
} }
@ -4576,18 +4575,18 @@ body:not(.caption) .mes_img_caption {
.img_enlarged_container pre { .img_enlarged_container pre {
max-height: 25vh; max-height: 25vh;
max-height: 25svh; max-height: 25dvh;
flex-shrink: 0; flex-shrink: 0;
overflow: auto; overflow: auto;
} }
.popup:has(.img_enlarged.zoomed).large_dialogue_popup { .popup:has(.img_enlarged.zoomed).large_dialogue_popup {
height: 100vh !important; height: 100vh !important;
height: 100svh !important; height: 100dvh !important;
max-height: 100vh !important; max-height: 100vh !important;
max-height: 100svh !important; max-height: 100dvh !important;
max-width: 100vw !important; max-width: 100vw !important;
max-width: 100svw !important; max-width: 100dvw !important;
padding: 0; padding: 0;
} }
@ -4774,7 +4773,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
width: var(--sheldWidth); width: var(--sheldWidth);
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize))); max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
max-height: calc(100svh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize))); max-height: calc(100dvh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
display: none; display: none;
position: absolute; position: absolute;
top: var(--topBarBlockSize); top: var(--topBarBlockSize);
@ -4809,11 +4808,11 @@ body:not(.movingUI) .drawer-content.maximized {
.fillLeft { .fillLeft {
width: calc((100vw - var(--sheldWidth) - 2px) /2); width: calc((100vw - var(--sheldWidth) - 2px) /2);
width: calc((100svw - var(--sheldWidth) - 2px) /2); width: calc((100dvw - var(--sheldWidth) - 2px) /2);
height: calc(100vh - var(--topBarBlockSize)); height: calc(100vh - var(--topBarBlockSize));
height: calc(100svh - var(--topBarBlockSize)); height: calc(100dvh - var(--topBarBlockSize));
max-height: calc(100vh - var(--topBarBlockSize)); max-height: calc(100vh - var(--topBarBlockSize));
max-height: calc(100svh - var(--topBarBlockSize)); max-height: calc(100dvh - var(--topBarBlockSize));
position: fixed; position: fixed;
top: 0; top: 0;
margin: 0; margin: 0;
@ -5063,7 +5062,7 @@ body:not(.movingUI) .drawer-content.maximized {
width: 100%; width: 100%;
/* margin-inline: 10px; */ /* margin-inline: 10px; */
max-height: 90vh; max-height: 90vh;
max-width: 90svh; max-width: 90dvh;
} }
.zoomed_avatar img { .zoomed_avatar img {