mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
small screen styles
This commit is contained in:
@ -501,11 +501,11 @@ export class SlashCommandAutoComplete {
|
|||||||
this.dom.style.setProperty('--bottom', `${window.innerHeight - rect.top}px`);
|
this.dom.style.setProperty('--bottom', `${window.innerHeight - rect.top}px`);
|
||||||
this.domWrap.style.bottom = `${window.innerHeight - rect.top}px`;
|
this.domWrap.style.bottom = `${window.innerHeight - rect.top}px`;
|
||||||
if (this.isShowingDetails) {
|
if (this.isShowingDetails) {
|
||||||
this.domWrap.style.left = '1vw';
|
this.domWrap.style.setProperty('--leftOffset', '1vw');
|
||||||
} else {
|
} else {
|
||||||
this.domWrap.style.left = `${rect.left}px`;
|
this.domWrap.style.setProperty('--leftOffset', `${rect.left}px`);
|
||||||
}
|
}
|
||||||
this.domWrap.style.right = `calc(1vw + ${this.isShowingDetails ? 25 : 0}vw)`;
|
this.domWrap.style.setProperty('--rightOffset', `calc(1vw + ${this.isShowingDetails ? 25 : 0}vw)`);
|
||||||
this.updateDetailsPosition();
|
this.updateDetailsPosition();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -523,7 +523,7 @@ export class SlashCommandAutoComplete {
|
|||||||
const selRect = this.selectedItem.dom.children[0].getBoundingClientRect();
|
const selRect = this.selectedItem.dom.children[0].getBoundingClientRect();
|
||||||
this.detailsWrap.style.setProperty('--targetOffset', `${selRect.top}`);
|
this.detailsWrap.style.setProperty('--targetOffset', `${selRect.top}`);
|
||||||
this.detailsWrap.style.bottom = `${window.innerHeight - rect.top}px`;
|
this.detailsWrap.style.bottom = `${window.innerHeight - rect.top}px`;
|
||||||
this.detailsWrap.style.left = `calc(100vw - ${this.domWrap.style.right})`;
|
this.detailsWrap.style.left = `calc(100vw - calc(1vw + ${this.isShowingDetails ? 25 : 0}vw))`;
|
||||||
this.detailsWrap.style.right = '1vw';
|
this.detailsWrap.style.right = '1vw';
|
||||||
this.detailsWrap.style.top = '5vh';
|
this.detailsWrap.style.top = '5vh';
|
||||||
} else {
|
} else {
|
||||||
|
@ -1101,9 +1101,13 @@ select {
|
|||||||
.slashCommandAutoComplete-wrap {
|
.slashCommandAutoComplete-wrap {
|
||||||
--targetOffset: 0;
|
--targetOffset: 0;
|
||||||
--direction: column;
|
--direction: column;
|
||||||
|
--leftOffset: 1vw;
|
||||||
|
--rightOffset: 1vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: var(--direction);
|
flex-direction: var(--direction);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
left: var(--leftOffset);
|
||||||
|
right: var(--rightOffset);
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
|
|
||||||
|
|
||||||
@ -1508,7 +1512,21 @@ select {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
.slashCommandAutoComplete-wrap {
|
||||||
|
left: 1vw;
|
||||||
|
> .slashCommandAutoComplete {
|
||||||
|
.specs {
|
||||||
|
grid-column: 2 / 4;
|
||||||
|
}
|
||||||
|
.help {
|
||||||
|
grid-column: 2 / 4;
|
||||||
|
padding-left: 1em;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.slashCommandBrowser {
|
.slashCommandBrowser {
|
||||||
> .search {
|
> .search {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
Reference in New Issue
Block a user