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

mobile styles and iOS waifu fixing

Browse Source
This commit is contained in:
RossAscends
2023-04-19 02:03:46 +09:00
parent 0eebc047b8
commit ae95d0175d
1 changed files with 76 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
public/style.css
View File

@@ -3308,7 +3308,7 @@ body.waifuMode #top-bar {
}
body.waifuMode #sheld {
height: 40vh;
height: 40svh;
top: calc(100% - 40vh);
bottom: 0;
}
@@ -3351,23 +3351,7 @@ body.movingUI #expression-holder {
@media (max-width: 1000px) {
body.waifuMode .expression-holder {
max-height: 100svh;
max-width: 100svw;
height: 100svh;
width: 100svw;
position: absolute;
bottom: 0;
filter: drop-shadow(2px 2px 2px #51515199);
z-index: 1;
left: 0;
}
body.waifuMode img.expression {
/* height: 90vh; */
object-fit: cover;
}
.mes img.img_extra {
max-width: 100%;
@@ -3398,7 +3382,7 @@ body.movingUI #expression-holder {
body {
touch-action: none;
overflow: auto;
overflow: hidden;
}
.drawer-content {
@@ -3435,6 +3419,19 @@ body.movingUI #expression-holder {
margin: 0 auto;
}
#sheld {
resize: none;
left: 0 !important;
top: 42px;
width: 100% !important;
max-width: 100%;
}
#sheld,
#character_popup {
/* overflow-y: hidden; */
}
#character_popup,
#world_popup,
#send_form {
@@ -3448,27 +3445,17 @@ body.movingUI #expression-holder {
border-bottom: 1px solid var(--grey30);
align-items: start;
align-content: start;
}
#sheld {
resize: none;
left: 0 !important;
top: 42px;
width: 100% !important;
max-width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.drag-grabber,
.pull-tab {
display: none;
display: none !important;
}
#sheld,
#character_popup {
overflow-y: hidden;
}
.mes-text {
padding-right: 25px;
@@ -3547,6 +3534,42 @@ body.movingUI #expression-holder {
flex-basis: max(calc(100% / 4 - 10px), 200px);
}
.expression-holder {
display: none;
}
body.waifuMode #sheld {
height: 40svh;
top: 60svh;
align-items: end;
bottom: 0 !important;
}
body.waifuMode .expression-holder {
display: inline;
max-height: 100svh;
max-width: 100svw;
height: 100svh;
width: 100svw;
position: absolute;
filter: drop-shadow(2px 2px 2px #51515199);
z-index: 1;
bottom: 0 !important;
left: 0 !important;
border: 1px solid red;
}
body.waifuMode img.expression {
object-fit: cover;
}
.scrollableInner {
overflow-y: auto;
overflow-x: hidden;
max-height: 100svh;
}
/*for debug purposes*/
/* div {border: 1px solid purple;} */
}
@@ -3576,12 +3599,11 @@ body.movingUI #expression-holder {
max-width: unset;
min-height: unset;
max-height: unset;
width: 100svw !important;
height: calc(100svh - 40px) !important;
padding-right: max(env(safe-area-inset-right), 5px) !important;
padding-left: max(env(safe-area-inset-left), 5px) !important;
padding-bottom: max(env(safe-area-inset-bottom), 15px) !important;
width: 100svw;
height: calc(100svh - 40px);
padding-right: max(env(safe-area-inset-right), 5px);
padding-left: max(env(safe-area-inset-left), 5px);
padding-bottom: max(env(safe-area-inset-bottom), 15px);
}
#character_popup,
@@ -3599,29 +3621,24 @@ body.movingUI #expression-holder {
left: 0;
right: 0;
top: 0;
max-height: calc(100svh - env(safe-area-inset-bottom));
max-width: min(calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left)), calc(100% - 5px));
margin: 0 auto;
height: calc(100svh - 70px);
/* calc(100svh - env(safe-area-inset-bottom)); */
width: min(calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left)), calc(100% - 5px));
max-height: calc(100svh - 70px);
/* calc(100svh - env(safe-area-inset-bottom)); */
max-width: min(calc(100% - env(safe-area-inset-right) - env(safe-area-inset-left)), calc(100% - 5px));
}
#character_popup,
#world_popup,
.drawer-content {
margin-top: 40px;
}
}
/* .spin {
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
.scrollableInner {
overflow-y: auto;
overflow-x: hidden;
}
}
*/
}