mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-02-09 08:38:53 +01:00
Switch to dynamic viewport units
This commit is contained in:
Cohee
parent
ecceeec62a
commit
b7a1474d7b
@ -89,7 +89,7 @@
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
height: 100dvh;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
z-index: 999999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100svw;
|
||||
height: 100svh;
|
||||
width: 100dvw;
|
||||
height: 100dvh;
|
||||
background-color: var(--SmartThemeBlurTintColor);
|
||||
color: var(--SmartThemeBodyColor);
|
||||
/*for some reason the full screen blur does not work on iOS*/
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
#logprobsViewer {
|
||||
overflow-y: auto;
|
||||
max-width: 90svw;
|
||||
max-height: 90svh;
|
||||
max-width: 90dvw;
|
||||
max-height: 90dvh;
|
||||
min-width: 100px;
|
||||
min-height: 50px;
|
||||
border-radius: 10px;
|
||||
@ -16,7 +16,7 @@
|
||||
top: 0;
|
||||
margin: 0;
|
||||
right: unset;
|
||||
width: calc(((100svw - var(--sheldWidth)) / 2) - 1px);
|
||||
width: calc(((100dvw - var(--sheldWidth)) / 2) - 1px);
|
||||
}
|
||||
|
||||
.logprobs_panel_header {
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/
|
||||
@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;
|
||||
width: unset;
|
||||
}
|
||||
@ -30,9 +32,9 @@
|
||||
right: 0;
|
||||
width: fit-content;
|
||||
max-height: calc(60vh - 60px);
|
||||
max-height: calc(60svh - 60px);
|
||||
max-height: calc(60dvh - 60px);
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
max-width: 90dvw;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
@ -98,7 +100,7 @@
|
||||
min-width: unset;
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 45px);
|
||||
max-height: calc(100svh - 45px);
|
||||
max-height: calc(100dvh - 45px);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
@ -126,15 +128,15 @@
|
||||
#top-bar {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
width: 100svw;
|
||||
width: 100dvw;
|
||||
}
|
||||
|
||||
#bg1,
|
||||
#bg_custom {
|
||||
height: 100vh !important;
|
||||
height: 100svh !important;
|
||||
height: 100dvh !important;
|
||||
width: 100vw !important;
|
||||
width: 100svw !important;
|
||||
width: 100dvw !important;
|
||||
background-position: center;
|
||||
|
||||
}
|
||||
@ -142,13 +144,7 @@
|
||||
|
||||
#sheld,
|
||||
#character_popup,
|
||||
.drawer-content
|
||||
|
||||
/* ,
|
||||
#world_popup */
|
||||
{
|
||||
/*max-height: calc(100vh - 36px);
|
||||
max-height: calc(100svh - 36px);*/
|
||||
.drawer-content {
|
||||
width: 100% !important;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
@ -219,10 +215,10 @@
|
||||
#floatingPrompt,
|
||||
#cfgConfig,
|
||||
#logprobsViewer,
|
||||
#movingDivs > div {
|
||||
/* 100vh are fallback units for browsers that don't support svh */
|
||||
#movingDivs>div {
|
||||
/* 100vh are fallback units for browsers that don't support dvh */
|
||||
height: calc(100vh - 45px);
|
||||
height: calc(100svh - 45px);
|
||||
height: calc(100dvh - 45px);
|
||||
min-width: 100% !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
@ -245,7 +241,7 @@
|
||||
#floatingPrompt,
|
||||
#cfgConfig,
|
||||
#logprobsViewer,
|
||||
#movingDivs > div {
|
||||
#movingDivs>div {
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
@ -282,9 +278,9 @@
|
||||
|
||||
body.waifuMode #sheld {
|
||||
height: 40vh;
|
||||
height: 40svh;
|
||||
height: 40dvh;
|
||||
top: 60vh;
|
||||
top: 60svh;
|
||||
top: 60dvh;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
@ -321,16 +317,16 @@
|
||||
body.waifuMode .zoomed_avatar {
|
||||
width: fit-content;
|
||||
max-height: calc(60vh - 60px);
|
||||
max-height: calc(60svh - 60px);
|
||||
max-height: calc(60dvh - 60px);
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
max-width: 90dvw;
|
||||
}
|
||||
|
||||
.scrollableInner {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: calc(100vh - 90px);
|
||||
max-height: calc(100svh - 90px);
|
||||
max-height: calc(100dvh - 90px);
|
||||
}
|
||||
|
||||
.horde_multiple_hint {
|
||||
@ -366,9 +362,9 @@
|
||||
|
||||
body:not(.waifuMode) .zoomed_avatar {
|
||||
max-height: calc(60vh - 60px);
|
||||
max-height: calc(60svh - 60px);
|
||||
max-height: calc(60dvh - 60px);
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
max-width: 90dvw;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
@ -449,9 +445,9 @@
|
||||
min-height: unset;
|
||||
max-height: unset;
|
||||
width: 100vw;
|
||||
width: 100svw;
|
||||
width: 100dvw;
|
||||
height: calc(100vh - 36px);
|
||||
height: calc(100svh - 36px);
|
||||
height: calc(100dvh - 36px);
|
||||
padding-right: max(env(safe-area-inset-right), 0px);
|
||||
padding-left: max(env(safe-area-inset-left), 0px);
|
||||
padding-bottom: 0;
|
||||
@ -481,10 +477,10 @@
|
||||
top: 0;
|
||||
margin: 0 auto;
|
||||
height: calc(100vh - 70px);
|
||||
height: calc(100svh - 70px);
|
||||
height: calc(100dvh - 70px);
|
||||
width: calc(100% - 5px);
|
||||
max-height: calc(100vh - 70px);
|
||||
max-height: calc(100svh - 70px);
|
||||
max-height: calc(100dvh - 70px);
|
||||
max-width: calc(100% - 5px);
|
||||
|
||||
}
|
||||
|
||||
@ -7,5 +7,5 @@ body.safari .popup.large_dialogue_popup .popup-body {
|
||||
body.safari .popup .popup-body {
|
||||
height: fit-content;
|
||||
max-height: 90vh;
|
||||
max-height: 90svh;
|
||||
max-height: 90dvh;
|
||||
}
|
||||
|
||||
@ -16,8 +16,8 @@ dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
max-height: calc(100svh - 2em);
|
||||
max-width: calc(100svw - 2em);
|
||||
max-height: calc(100dvh - 2em);
|
||||
max-width: calc(100dvw - 2em);
|
||||
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. */
|
||||
@ -103,7 +103,7 @@ body.no-blur .popup[open]::backdrop {
|
||||
|
||||
.popup #toast-container {
|
||||
/* 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));
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@ -115,7 +115,7 @@ body.no-blur .popup[open]::backdrop {
|
||||
.popup-crop-wrap {
|
||||
margin: 10px auto;
|
||||
max-height: 75vh;
|
||||
max-height: 75svh;
|
||||
max-height: 75dvh;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@ -360,7 +360,7 @@ body.waifuMode #top-bar {
|
||||
|
||||
body.waifuMode #sheld {
|
||||
height: 40vh;
|
||||
height: 40svh;
|
||||
height: 40dvh;
|
||||
top: calc(100% - 40vh);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@ -231,8 +231,8 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
|
||||
min-height: 50svh;
|
||||
height: 50svh;
|
||||
min-height: 50dvh;
|
||||
height: 50dvh;
|
||||
}
|
||||
}
|
||||
.popup:has(#qr--modalEditor) {
|
||||
|
||||
@ -297,8 +297,8 @@
|
||||
}
|
||||
|
||||
>#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder {
|
||||
min-height: 50svh;
|
||||
height: 50svh;
|
||||
min-height: 50dvh;
|
||||
height: 50dvh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,7 +137,6 @@ body {
|
||||
width: 100%;
|
||||
/*fallback for JS load*/
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
height: 100dvh;
|
||||
/*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
|
||||
/*height: calc(var(--doc-height) - 1px);*/
|
||||
@ -451,7 +450,7 @@ code {
|
||||
border-radius: 5px;
|
||||
background-color: var(--black70a);
|
||||
padding: 0 3px;
|
||||
/* max-width: calc(100svw - 95px); */
|
||||
/* max-width: calc(100dvw - 95px); */
|
||||
line-height: var(--mainFontSize);
|
||||
color: var(--white70a);
|
||||
}
|
||||
@ -535,13 +534,13 @@ body.reduced-motion #bg_custom {
|
||||
flex-direction: column;
|
||||
/* -1px to give sheld some wiggle room to bounce off tobar when moving*/
|
||||
height: calc(100vh - var(--topBarBlockSize) - 1px);
|
||||
height: calc(100svh - var(--topBarBlockSize) - 1px);
|
||||
max-height: calc(100svh - var(--topBarBlockSize) - 1px);
|
||||
height: calc(100dvh - var(--topBarBlockSize) - 1px);
|
||||
max-height: calc(100dvh - var(--topBarBlockSize) - 1px);
|
||||
overflow-x: hidden;
|
||||
/* max-width: 50vw; */
|
||||
position: absolute;
|
||||
left: calc((100vw - var(--sheldWidth))/2);
|
||||
left: calc((100svw - var(--sheldWidth))/2);
|
||||
left: calc((100dvw - var(--sheldWidth))/2);
|
||||
top: var(--topBarBlockSize);
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
@ -1160,12 +1159,12 @@ textarea {
|
||||
font-family: var(--mainFontFamily);
|
||||
padding: 5px 10px;
|
||||
max-height: 90vh;
|
||||
max-height: 90svh;
|
||||
max-height: 90dvh;
|
||||
}
|
||||
|
||||
textarea.autoSetHeight {
|
||||
max-height: 50vh;
|
||||
max-height: 50svh;
|
||||
max-height: 50dvh;
|
||||
}
|
||||
|
||||
input,
|
||||
@ -1179,7 +1178,7 @@ select {
|
||||
min-height: calc(var(--bottomFormBlockSize) + 2px);
|
||||
height: calc(var(--bottomFormBlockSize) + 2px);
|
||||
max-height: 50vh;
|
||||
max-height: 50svh;
|
||||
max-height: 50dvh;
|
||||
word-wrap: break-word;
|
||||
resize: vertical;
|
||||
display: block;
|
||||
@ -2111,14 +2110,14 @@ textarea::placeholder {
|
||||
@media screen and (max-width: 1000px) {
|
||||
#form_create textarea {
|
||||
flex-grow: 1;
|
||||
min-height: 20svh;
|
||||
min-height: 20dvh;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1001px) {
|
||||
#description_textarea {
|
||||
height: 29vh;
|
||||
height: 29svh;
|
||||
height: 29dvh;
|
||||
}
|
||||
|
||||
#firstmessage_textarea {
|
||||
@ -2394,8 +2393,8 @@ input[type="file"] {
|
||||
#floatingPrompt,
|
||||
#cfgConfig {
|
||||
overflow-y: auto;
|
||||
max-width: 90svw;
|
||||
max-height: 90svh;
|
||||
max-width: 90dvw;
|
||||
max-height: 90dvh;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
border-radius: 10px;
|
||||
@ -2411,7 +2410,7 @@ input[type="file"] {
|
||||
top: 0;
|
||||
margin: 0;
|
||||
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;
|
||||
width: calc(var(--sheldWidth) - 10px);
|
||||
max-width: 100vw;
|
||||
max-width: 100svw;
|
||||
max-width: 100dvw;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
@ -3123,7 +3122,7 @@ grammarly-extension {
|
||||
#dialogue_popup {
|
||||
width: 500px;
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
max-width: 90dvw;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
margin-left: auto;
|
||||
@ -3139,7 +3138,7 @@ grammarly-extension {
|
||||
background-color: var(--SmartThemeBlurTintColor);
|
||||
border-radius: 10px;
|
||||
max-height: 90vh;
|
||||
max-height: 90svh;
|
||||
max-height: 90dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: hidden;
|
||||
@ -3153,9 +3152,9 @@ grammarly-extension {
|
||||
|
||||
.large_dialogue_popup {
|
||||
height: 90vh !important;
|
||||
height: 90svh !important;
|
||||
height: 90dvh !important;
|
||||
max-width: 90vw !important;
|
||||
max-width: 90svw !important;
|
||||
max-width: 90dvw !important;
|
||||
}
|
||||
|
||||
.wide_dialogue_popup {
|
||||
@ -3307,7 +3306,7 @@ grammarly-extension {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
height: 100dvh;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
}
|
||||
@ -3315,9 +3314,9 @@ grammarly-extension {
|
||||
#bgtest {
|
||||
display: none;
|
||||
width: 100vw;
|
||||
width: 100svw;
|
||||
width: 100dvw;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
height: 100dvh;
|
||||
position: absolute;
|
||||
z-index: -100;
|
||||
background-color: red;
|
||||
@ -3954,7 +3953,7 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
height: 100dvh;
|
||||
z-index: 2058;
|
||||
}
|
||||
|
||||
@ -3967,11 +3966,11 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
min-width: 100px;
|
||||
max-width: var(--sheldWidth);
|
||||
height: calc(100vh - 84px);
|
||||
height: calc(100svh - 84px);
|
||||
height: calc(100dvh - 84px);
|
||||
min-height: calc(100vh - 84px);
|
||||
min-height: calc(100svh - 84px);
|
||||
min-height: calc(100dvh - 84px);
|
||||
max-height: calc(100vh - 84px);
|
||||
max-height: calc(100svh - 84px);
|
||||
max-height: calc(100dvh - 84px);
|
||||
position: absolute;
|
||||
z-index: 4001;
|
||||
margin-left: auto;
|
||||
@ -4050,7 +4049,7 @@ h5 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
height: 100dvh;
|
||||
z-index: 4100;
|
||||
top: 0;
|
||||
background-color: var(--black70a);
|
||||
@ -4064,7 +4063,7 @@ h5 {
|
||||
max-width: var(--sheldWidth);
|
||||
height: min-content;
|
||||
max-height: calc(100vh - var(--topBarBlockSize));
|
||||
max-height: calc(100svh - var(--topBarBlockSize));
|
||||
max-height: calc(100dvh - var(--topBarBlockSize));
|
||||
min-height: 100px;
|
||||
position: absolute;
|
||||
z-index: 2066;
|
||||
@ -4384,14 +4383,14 @@ a {
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
max-width: calc(((100vw - 500px) / 2) - 10px);
|
||||
max-width: calc(((100svw - 500px) / 2) - 10px);
|
||||
max-width: calc(((100dvw - 500px) / 2) - 10px);
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
max-height: 90vh;
|
||||
max-height: 90svh;
|
||||
max-height: 90dvh;
|
||||
/*unsure why, but this prevents scrollbars*/
|
||||
height: 49vh;
|
||||
height: 49svh;
|
||||
height: 49dvh;
|
||||
|
||||
padding: 5px;
|
||||
overflow-y: auto;
|
||||
@ -4427,11 +4426,11 @@ a {
|
||||
|
||||
#right-nav-panel {
|
||||
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(100svh - var(--topBarBlockSize));
|
||||
max-height: calc(100dvh - var(--topBarBlockSize));
|
||||
height: calc(100vh - var(--topBarBlockSize));
|
||||
height: calc(100svh - var(--topBarBlockSize));
|
||||
height: calc(100dvh - var(--topBarBlockSize));
|
||||
position: fixed;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
@ -4484,7 +4483,7 @@ a {
|
||||
border-radius: 10px;
|
||||
max-width: 100%;
|
||||
max-height: 40vh;
|
||||
max-height: 40svh;
|
||||
max-height: 40dvh;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
|
||||
@ -4576,18 +4575,18 @@ body:not(.caption) .mes_img_caption {
|
||||
|
||||
.img_enlarged_container pre {
|
||||
max-height: 25vh;
|
||||
max-height: 25svh;
|
||||
max-height: 25dvh;
|
||||
flex-shrink: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.popup:has(.img_enlarged.zoomed).large_dialogue_popup {
|
||||
height: 100vh !important;
|
||||
height: 100svh !important;
|
||||
height: 100dvh !important;
|
||||
max-height: 100vh !important;
|
||||
max-height: 100svh !important;
|
||||
max-height: 100dvh !important;
|
||||
max-width: 100vw !important;
|
||||
max-width: 100svw !important;
|
||||
max-width: 100dvw !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -4774,7 +4773,7 @@ body:has(#character_popup.open) #top-settings-holder:has(.drawer-content.openDra
|
||||
width: var(--sheldWidth);
|
||||
overflow-y: auto;
|
||||
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;
|
||||
position: absolute;
|
||||
top: var(--topBarBlockSize);
|
||||
@ -4809,11 +4808,11 @@ body:not(.movingUI) .drawer-content.maximized {
|
||||
|
||||
.fillLeft {
|
||||
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(100svh - var(--topBarBlockSize));
|
||||
height: calc(100dvh - var(--topBarBlockSize));
|
||||
max-height: calc(100vh - var(--topBarBlockSize));
|
||||
max-height: calc(100svh - var(--topBarBlockSize));
|
||||
max-height: calc(100dvh - var(--topBarBlockSize));
|
||||
position: fixed;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
@ -5063,7 +5062,7 @@ body:not(.movingUI) .drawer-content.maximized {
|
||||
width: 100%;
|
||||
/* margin-inline: 10px; */
|
||||
max-height: 90vh;
|
||||
max-width: 90svh;
|
||||
max-width: 90dvh;
|
||||
}
|
||||
|
||||
.zoomed_avatar img {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user