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

Add viewport fallback to small viewport sizes

Browse Source
This commit is contained in:
Jaezmien Naejara
2023-07-09 14:02:40 +08:00
parent 880472df18
commit f03df10972
1 changed files with 52 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/style.css
View File

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