mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
Add viewport fallback to small viewport sizes
This commit is contained in:
Jaezmien Naejara
@@ -85,6 +85,7 @@ body {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
/*fallback for JS load*/
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
/*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
|
||||
height: calc(var(--doc-height) - 1px);
|
||||
@@ -352,10 +353,12 @@ hr {
|
||||
#sheld {
|
||||
display: grid;
|
||||
grid-template-rows: auto min-content;
|
||||
height: calc(100vh - 42px);
|
||||
height: calc(100svh - 42px);
|
||||
overflow-x: hidden;
|
||||
max-width: 800px;
|
||||
position: absolute;
|
||||
left: calc((100vw - var(--sheldWidth))/2);
|
||||
left: calc((100svw - var(--sheldWidth))/2);
|
||||
top: 41px;
|
||||
margin: 0 auto;
|
||||
@@ -891,6 +894,7 @@ select {
|
||||
|
||||
#send_textarea {
|
||||
min-height: 40px;
|
||||
max-height: 50vh;
|
||||
max-height: 50svh;
|
||||
word-wrap: break-word;
|
||||
height: 40px;
|
||||
@@ -1453,6 +1457,7 @@ body.big-avatars .ch_description {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: calc(var(--sheldWidth) - 10px);
|
||||
max-width: 100vw;
|
||||
max-width: 100svw;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -1760,6 +1765,7 @@ grammarly-extension {
|
||||
|
||||
#dialogue_popup {
|
||||
width: 500px;
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
@@ -1775,6 +1781,7 @@ grammarly-extension {
|
||||
padding: 4px;
|
||||
background-color: var(--black30a);
|
||||
border-radius: 10px;
|
||||
max-height: 90vh;
|
||||
max-height: 90svh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1782,11 +1789,14 @@ grammarly-extension {
|
||||
}
|
||||
|
||||
.large_dialogue_popup {
|
||||
height: 90vh !important;
|
||||
height: 90svh !important;
|
||||
max-width: 90vw !important;
|
||||
max-width: 90svw !important;
|
||||
}
|
||||
|
||||
.wide_dialogue_popup {
|
||||
max-width: 90vh !important;
|
||||
max-width: 90svh !important;
|
||||
width: fit-content !important;
|
||||
}
|
||||
@@ -1903,6 +1913,7 @@ grammarly-extension {
|
||||
opacity: 0.0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
@@ -1910,7 +1921,9 @@ grammarly-extension {
|
||||
|
||||
#bgtest {
|
||||
display: none;
|
||||
width: 100vw;
|
||||
width: 100svw;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
position: absolute;
|
||||
z-index: -100;
|
||||
@@ -2436,6 +2449,7 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
opacity: 0.0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
z-index: 2055;
|
||||
background-color: var(--black70a);
|
||||
@@ -2578,6 +2592,7 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
opacity: 1.0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
z-index: 2058;
|
||||
}
|
||||
@@ -2590,8 +2605,11 @@ input[type="range"]::-webkit-slider-thumb {
|
||||
|
||||
min-width: 100px;
|
||||
max-width: var(--sheldWidth);
|
||||
height: calc(100vh - 84px);
|
||||
height: calc(100svh - 84px);
|
||||
min-height: calc(100vh - 84px);
|
||||
min-height: calc(100svh - 84px);
|
||||
max-height: calc(100vh - 84px);
|
||||
max-height: calc(100svh - 84px);
|
||||
position: absolute;
|
||||
z-index: 3002;
|
||||
@@ -2670,6 +2688,7 @@ h5 {
|
||||
opacity: 1.0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100svh;
|
||||
z-index: 3001;
|
||||
top: 0;
|
||||
@@ -2683,6 +2702,7 @@ h5 {
|
||||
grid-template-rows: auto auto;
|
||||
max-width: var(--sheldWidth);
|
||||
height: min-content;
|
||||
max-height: calc(100vh - 40px);
|
||||
max-height: calc(100svh - 40px);
|
||||
min-height: 100px;
|
||||
position: absolute;
|
||||
@@ -3552,11 +3572,14 @@ a {
|
||||
display: block;
|
||||
overflow-wrap: break-word;
|
||||
white-space: normal;
|
||||
max-width: calc(((100vw - 500px) / 2) - 10px);
|
||||
max-width: calc(((100svw - 500px) / 2) - 10px);
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
max-height: 90vh;
|
||||
max-height: 90svh;
|
||||
/*unsure why, but this prevents scrollbars*/
|
||||
height: 49vh;
|
||||
height: 49svh;
|
||||
|
||||
padding: 5px;
|
||||
@@ -3591,8 +3614,11 @@ a {
|
||||
/* ############################################################# */
|
||||
|
||||
#right-nav-panel {
|
||||
width: calc((100vw - var(--sheldWidth) - 2px) /2);
|
||||
width: calc((100svw - var(--sheldWidth) - 2px) /2);
|
||||
max-height: calc(100vh - 42px);
|
||||
max-height: calc(100svh - 42px);
|
||||
height: calc(100vh - 42px);
|
||||
height: calc(100svh - 42px);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -3652,6 +3678,7 @@ a {
|
||||
.mes_img {
|
||||
border-radius: 10px;
|
||||
max-width: 100%;
|
||||
max-height: 40vh;
|
||||
max-height: 40svh;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
@@ -3914,6 +3941,7 @@ label[for="extensions_autoconnect"] {
|
||||
min-width: 450px;
|
||||
width: var(--sheldWidth);
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 70px);
|
||||
max-height: calc(100svh - 70px);
|
||||
display: none;
|
||||
position: absolute;
|
||||
@@ -3937,8 +3965,11 @@ label[for="extensions_autoconnect"] {
|
||||
}
|
||||
|
||||
.fillLeft {
|
||||
width: calc((100vw - var(--sheldWidth) - 2px) /2);
|
||||
width: calc((100svw - var(--sheldWidth) - 2px) /2);
|
||||
height: calc(100vh - 42px);
|
||||
height: calc(100svh - 42px);
|
||||
max-height: calc(100vh - 42px);
|
||||
max-height: calc(100svh - 42px);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -4357,6 +4388,7 @@ body.waifuMode #top-bar {
|
||||
}
|
||||
|
||||
body.waifuMode #sheld {
|
||||
height: 40vh;
|
||||
height: 40svh;
|
||||
top: calc(100% - 40vh);
|
||||
bottom: 0;
|
||||
@@ -4540,7 +4572,9 @@ body.waifuMode .zoomed_avatar {
|
||||
top: 50px;
|
||||
aspect-ratio: 2 / 3;
|
||||
width: fit-content;
|
||||
max-height: calc(60vh - 60px);
|
||||
max-height: calc(60svh - 60px);
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
}
|
||||
|
||||
@@ -4591,6 +4625,7 @@ body.waifuMode .zoomed_avatar {
|
||||
.drawer-content {
|
||||
min-width: unset;
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 45px);
|
||||
max-height: calc(100svh - 45px);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@@ -4608,12 +4643,15 @@ body.waifuMode .zoomed_avatar {
|
||||
#top-bar {
|
||||
position: fixed;
|
||||
padding-top: 8px;
|
||||
width: 100vw;
|
||||
width: 100svw;
|
||||
}
|
||||
|
||||
#bg1,
|
||||
#bg_custom {
|
||||
height: 100vh !important;
|
||||
height: 100svh !important;
|
||||
width: 100vw !important;
|
||||
width: 100svw !important;
|
||||
background-position: center;
|
||||
|
||||
@@ -4627,6 +4665,7 @@ body.waifuMode .zoomed_avatar {
|
||||
/* ,
|
||||
#world_popup */
|
||||
{
|
||||
max-height: calc(100vh - 40px);
|
||||
max-height: calc(100svh - 40px);
|
||||
width: 100% !important;
|
||||
margin: 0 auto;
|
||||
@@ -4685,6 +4724,7 @@ body.waifuMode .zoomed_avatar {
|
||||
#right-nav-panel,
|
||||
#left-nav-panel,
|
||||
#floatingPrompt {
|
||||
height: calc(100vh - 45px);
|
||||
height: calc(100svh - 45px);
|
||||
min-width: 100% !important;
|
||||
width: 100% !important;
|
||||
@@ -4748,7 +4788,9 @@ body.waifuMode .zoomed_avatar {
|
||||
}
|
||||
|
||||
body.waifuMode #sheld {
|
||||
height: 40vh;
|
||||
height: 40svh;
|
||||
top: 60vh;
|
||||
top: 60svh;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
@@ -4775,13 +4817,16 @@ body.waifuMode .zoomed_avatar {
|
||||
|
||||
body.waifuMode .zoomed_avatar {
|
||||
width: fit-content;
|
||||
max-height: calc(60vh - 60px);
|
||||
max-height: calc(60svh - 60px);
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
}
|
||||
|
||||
.scrollableInner {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: calc(100vh - 90px);
|
||||
max-height: calc(100svh - 90px);
|
||||
}
|
||||
|
||||
@@ -4807,7 +4852,9 @@ body.waifuMode .zoomed_avatar {
|
||||
body:not(.waifuMode) .zoomed_avatar {
|
||||
|
||||
width: fit-content;
|
||||
max-height: calc(60vh - 60px);
|
||||
max-height: calc(60svh - 60px);
|
||||
max-width: 90vw;
|
||||
max-width: 90svw;
|
||||
}
|
||||
}
|
||||
@@ -4872,7 +4919,9 @@ body.waifuMode .zoomed_avatar {
|
||||
max-width: unset;
|
||||
min-height: unset;
|
||||
max-height: unset;
|
||||
width: 100vw;
|
||||
width: 100svw;
|
||||
height: calc(100vh - 40px);
|
||||
height: calc(100svh - 40px);
|
||||
padding-right: max(env(safe-area-inset-right), 0px);
|
||||
padding-left: max(env(safe-area-inset-left), 0px);
|
||||
@@ -4902,8 +4951,10 @@ body.waifuMode .zoomed_avatar {
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin: 0 auto;
|
||||
height: calc(100vh - 70px);
|
||||
height: calc(100svh - 70px);
|
||||
width: calc(100% - 5px);
|
||||
max-height: calc(100vh - 70px);
|
||||
max-height: calc(100svh - 70px);
|
||||
max-width: calc(100% - 5px);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user