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 { body.waifuMode #sheld {
height: 40vh; height: 40svh;
top: calc(100% - 40vh); top: calc(100% - 40vh);
bottom: 0; bottom: 0;
} }
@@ -3351,23 +3351,7 @@ body.movingUI #expression-holder {
@media (max-width: 1000px) { @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 { .mes img.img_extra {
max-width: 100%; max-width: 100%;
@@ -3398,7 +3382,7 @@ body.movingUI #expression-holder {
body { body {
touch-action: none; touch-action: none;
overflow: auto; overflow: hidden;
} }
.drawer-content { .drawer-content {
@@ -3435,6 +3419,19 @@ body.movingUI #expression-holder {
margin: 0 auto; 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, #character_popup,
#world_popup, #world_popup,
#send_form { #send_form {
@@ -3448,27 +3445,17 @@ body.movingUI #expression-holder {
border-bottom: 1px solid var(--grey30); border-bottom: 1px solid var(--grey30);
align-items: start; align-items: start;
align-content: start; align-content: start;
} overflow-y: auto;
overflow-x: hidden;
#sheld {
resize: none;
left: 0 !important;
top: 42px;
width: 100% !important;
max-width: 100%;
} }
.drag-grabber, .drag-grabber,
.pull-tab { .pull-tab {
display: none; display: none !important;
} }
#sheld,
#character_popup {
overflow-y: hidden;
}
.mes-text { .mes-text {
padding-right: 25px; padding-right: 25px;
@@ -3547,6 +3534,42 @@ body.movingUI #expression-holder {
flex-basis: max(calc(100% / 4 - 10px), 200px); 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*/ /*for debug purposes*/
/* div {border: 1px solid purple;} */ /* div {border: 1px solid purple;} */
} }
@@ -3576,12 +3599,11 @@ body.movingUI #expression-holder {
max-width: unset; max-width: unset;
min-height: unset; min-height: unset;
max-height: unset; max-height: unset;
width: 100svw;
width: 100svw !important; height: calc(100svh - 40px);
height: calc(100svh - 40px) !important; padding-right: max(env(safe-area-inset-right), 5px);
padding-right: max(env(safe-area-inset-right), 5px) !important; padding-left: max(env(safe-area-inset-left), 5px);
padding-left: max(env(safe-area-inset-left), 5px) !important; padding-bottom: max(env(safe-area-inset-bottom), 15px);
padding-bottom: max(env(safe-area-inset-bottom), 15px) !important;
} }
#character_popup, #character_popup,
@@ -3599,29 +3621,24 @@ body.movingUI #expression-holder {
left: 0; left: 0;
right: 0; right: 0;
top: 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; 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; 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 { .scrollableInner {
transform: rotate(360deg); overflow-y: auto;
overflow-x: hidden;
} }
} }
*/