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

fix zoomedAvatar resize and movement

Browse Source
This commit is contained in:
RossAscends
2024-05-20 12:18:30 +09:00
parent 86f54dccdc
commit 67381cf493
4 changed files with 417 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -6275,11 +6275,11 @@
</div> </div>
<div id="zoomed_avatar_template" class="template_element"> <div id="zoomed_avatar_template" class="template_element">
<div class="zoomed_avatar"> <div class="zoomed_avatar">
<div class="zoomed_avatar_container">
<div class="panelControlBar flex-container"> <div class="panelControlBar flex-container">
<div class="fa-fw fa-solid fa-grip drag-grabber"></div> <div class="fa-fw fa-solid fa-grip drag-grabber"></div>
<div class="fa-fw fa-solid fa-circle-xmark dragClose" id="closeZoom"></div> <div class="fa-fw fa-solid fa-circle-xmark dragClose" id="closeZoom"></div>
</div> </div>
<div class="zoomed_avatar_container">
<img class="zoomed_avatar_img" src="" data-izoomify-url="" data-izoomify-magnify="1.8" data-izoomify-duration="300" alt=""> <img class="zoomed_avatar_img" src="" data-izoomify-url="" data-izoomify-magnify="1.8" data-izoomify-duration="300" alt="">
</div> </div>
</div> </div>

9
public/script.js
View File

@@ -10251,15 +10251,6 @@ jQuery(async function () {
$(`.zoomed_avatar[forChar="${charname}"] .dragClose`).hide(); $(`.zoomed_avatar[forChar="${charname}"] .dragClose`).hide();
} }
$('.zoomed_avatar').on('mouseup', (e) => {
if (e.target.closest('.drag-grabber') || e.button !== 0) {
return;
}
$(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {
$(`.zoomed_avatar[forChar="${charname}"]`).remove();
});
});
$('.zoomed_avatar, .zoomed_avatar .dragClose').on('click touchend', (e) => { $('.zoomed_avatar, .zoomed_avatar .dragClose').on('click touchend', (e) => {
if (e.target.closest('.dragClose')) { if (e.target.closest('.dragClose')) {
$(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => { $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {

56
public/scripts/RossAscends-mods.js
View File

@@ -436,8 +436,6 @@ const saveUserInputDebounced = debounce(saveUserInput);
// Make the DIV element draggable: // Make the DIV element draggable:
// THIRD UPDATE, prevent resize window breaks and smartly handle saving
export function dragElement(elmnt) { export function dragElement(elmnt) {
var hasBeenDraggedByUser = false; var hasBeenDraggedByUser = false;
var isMouseDown = false; var isMouseDown = false;
@@ -479,8 +477,8 @@ export function dragElement(elmnt) {
} }
//console.debug(left + width, winWidth, hasBeenDraggedByUser, isMouseDown) //console.debug(left + width, winWidth, hasBeenDraggedByUser, isMouseDown)
const style = getComputedStyle(target); //use computed values because not all CSS are set by default const style = getComputedStyle(target); //use computed values because not all CSS are set by default
height = target.offsetHeight; height = parseInt(style.height) //target.offsetHeight;
width = target.offsetWidth; width = parseInt(style.width) //target.offsetWidth;
top = parseInt(style.top); top = parseInt(style.top);
left = parseInt(style.left); left = parseInt(style.left);
right = parseInt(style.right); right = parseInt(style.right);
@@ -494,19 +492,20 @@ export function dragElement(elmnt) {
const topbarstyle = getComputedStyle(topbar); const topbarstyle = getComputedStyle(topbar);
topBarFirstX = parseInt(topbarstyle.marginInline); topBarFirstX = parseInt(topbarstyle.marginInline);
topBarLastY = parseInt(topbarstyle.height); topBarLastY = parseInt(topbarstyle.height);
/*
/*console.log(` console.log(`
Observer
winWidth: ${winWidth}, winHeight: ${winHeight} winWidth: ${winWidth}, winHeight: ${winHeight}
sheldWidth: ${sheldWidth} sheldWidth: sheldWidth
X: ${$(elmnt).css('left')} X: ${$(elmnt).css('left')}
Y: ${$(elmnt).css('top')} Y: ${$(elmnt).css('top')}
MaxX: ${maxX}, MaxY: ${maxY} MaxX: ${maxX}, MaxY: ${maxY}
height: ${height} height: ${height}
width: ${width} width: ${width}
Topbar 1st X: ${topBarFirstX} Topbar 1st X: ${topBarFirstX}
TopBar lastX: ${topBarLastX} TopBar lastX: topBarLastX
`);*/ `);
*/
//prepare an empty poweruser object for the item being altered if we don't have one already //prepare an empty poweruser object for the item being altered if we don't have one already
if (!power_user.movingUIState[elmntName]) { if (!power_user.movingUIState[elmntName]) {
@@ -524,24 +523,38 @@ export function dragElement(elmnt) {
} }
//handle resizing //handle resizing
if (!hasBeenDraggedByUser && isMouseDown) { if (!hasBeenDraggedByUser && isMouseDown) { //if user is dragging the resize handle (not in header)
console.debug('saw resize, NOT header drag'); //console.debug('saw resize, NOT header drag');
let imgHeight, imgWidth, imageAspectRatio;
let containerAspectRatio = elmnt.height() / elmnt.width();
//force the zoomed avatar container to always be the same aspect ratio as the inner image
if ($(elmnt).attr('id').startsWith('zoomFor_')) {
let zoomedAvatarImage = $(elmnt).find('.zoomed_avatar_img');
imgHeight = zoomedAvatarImage.height();
imgWidth = zoomedAvatarImage.width();
imageAspectRatio = imgHeight / imgWidth;
}
if (containerAspectRatio !== imageAspectRatio) {
elmnt.css('height', imgHeight);
}
//prevent resizing offscreen //prevent resizing offscreen
if (top + elmnt.height() >= winHeight) { if (top + elmnt.height() >= winHeight) {
console.debug('resizing height to prevent offscreen'); //console.debug('resizing height to prevent offscreen');
elmnt.css('height', winHeight - top - 1 + 'px'); elmnt.css('height', winHeight - top - 1 + 'px');
} }
if (left + elmnt.width() >= winWidth) { if (left + elmnt.width() >= winWidth) {
console.debug('resizing width to prevent offscreen'); //console.debug('resizing width to prevent offscreen');
elmnt.css('width', winWidth - left - 1 + 'px'); elmnt.css('width', winWidth - left - 1 + 'px');
} }
//prevent resizing from top left into the top bar //prevent resizing from top left into the top bar
if (top < topBarLastY && maxX >= topBarFirstX && left <= topBarFirstX if (top < topBarLastY && maxX >= topBarFirstX && left <= topBarFirstX
) { ) {
console.debug('prevent topbar underlap resize'); //console.debug('prevent topbar underlap resize');
elmnt.css('width', width - 1 + 'px'); elmnt.css('width', width - 1 + 'px');
} }
@@ -647,19 +660,20 @@ export function dragElement(elmnt) {
// and will defaults to shrink to min value of 100px set in CSS file // and will defaults to shrink to min value of 100px set in CSS file
elmnt.css('height', height); elmnt.css('height', height);
elmnt.css('width', width); elmnt.css('width', width);
/*
console.log(` /*console.log(`
elementDrag:
winWidth: ${winWidth}, winHeight: ${winHeight} winWidth: ${winWidth}, winHeight: ${winHeight}
sheldWidth: ${sheldWidth} sheldWidth: sheldWidth
X: ${$(elmnt).css('left')} X: ${$(elmnt).css('left')}
Y: ${$(elmnt).css('top')} Y: ${$(elmnt).css('top')}
MaxX: ${maxX}, MaxY: ${maxY} MaxX: ${maxX}, MaxY: ${maxY}
height: ${height} height: ${height}
width: ${width} width: ${width}
Topbar 1st X: ${topBarFirstX} Topbar 1st X: ${topBarFirstX}
TopBar lastX: ${topBarLastX} TopBar lastX: topBarLastX
`); `);*/
*/
return; return;
} }

351
public/style.css
View File

@@ -693,16 +693,21 @@ body .panelControlBar {
#send_but { #send_but {
visibility: hidden; visibility: hidden;
} }
#rightSendForm>div:not(.mes_send).stscript_btn { #rightSendForm>div:not(.mes_send).stscript_btn {
&.stscript_pause, &.stscript_stop {
&.stscript_pause,
&.stscript_stop {
display: flex; display: flex;
} }
} }
&.script_paused { &.script_paused {
#rightSendForm>div:not(.mes_send).stscript_btn { #rightSendForm>div:not(.mes_send).stscript_btn {
&.stscript_pause { &.stscript_pause {
display: none; display: none;
} }
&.stscript_continue { &.stscript_continue {
display: flex; display: flex;
} }
@@ -724,15 +729,19 @@ body .panelControlBar {
transition: 0.3s; transition: 0.3s;
opacity: 1; opacity: 1;
display: none; display: none;
&.stscript_pause>.fa-solid { &.stscript_pause>.fa-solid {
background-color: rgb(146, 190, 252); background-color: rgb(146, 190, 252);
} }
&.stscript_continue>.fa-solid { &.stscript_continue>.fa-solid {
background-color: rgb(146, 190, 252); background-color: rgb(146, 190, 252);
} }
&.stscript_stop>.fa-solid { &.stscript_stop>.fa-solid {
background-color: rgb(215, 136, 114); background-color: rgb(215, 136, 114);
} }
>.fa-solid { >.fa-solid {
--toastInfoColor: #2F96B4; --toastInfoColor: #2F96B4;
--progColor: rgba(0, 128, 0, 0.839); --progColor: rgba(0, 128, 0, 0.839);
@@ -747,8 +756,7 @@ body .panelControlBar {
align-items: center; align-items: center;
box-shadow: box-shadow:
0 0 0 var(--progColor), 0 0 0 var(--progColor),
0 0 0 var(--progColor) 0 0 0 var(--progColor);
;
} }
} }
} }
@@ -1147,24 +1155,27 @@ select {
--prog: 0%; --prog: 0%;
--progDone: 0; --progDone: 0;
border-top: var(--progWidth) solid var(--progColor); border-top: var(--progWidth) solid var(--progColor);
clip-path: polygon( clip-path: polygon(0% calc(var(--progDone) * var(--progWidthClip)),
0% calc(var(--progDone) * var(--progWidthClip)),
var(--prog) calc(var(--progDone) * var(--progWidthClip)), var(--prog) calc(var(--progDone) * var(--progWidthClip)),
var(--prog) var(--progWidthClip), var(--prog) var(--progWidthClip),
100% var(--progWidthClip), 100% var(--progWidthClip),
100% 100%, 100% 100%,
0% 100% 0% 100%);
);
transition: clip-path 200ms; transition: clip-path 200ms;
} }
@keyframes script_progress_pulse { @keyframes script_progress_pulse {
0%, 100% {
0%,
100% {
border-top-color: var(--progColor); border-top-color: var(--progColor);
} }
50% { 50% {
border-top-color: var(--progFlashColor); border-top-color: var(--progFlashColor);
} }
} }
#form_sheld.isExecutingCommandsFromChatInput.script_paused #send_textarea { #form_sheld.isExecutingCommandsFromChatInput.script_paused #send_textarea {
animation-name: script_progress_pulse; animation-name: script_progress_pulse;
animation-duration: 1500ms; animation-duration: 1500ms;
@@ -1176,9 +1187,11 @@ select {
#form_sheld.script_success #send_textarea { #form_sheld.script_success #send_textarea {
border-top-color: var(--progSuccessColor); border-top-color: var(--progSuccessColor);
} }
#form_sheld.script_error #send_textarea { #form_sheld.script_error #send_textarea {
border-top-color: var(--progErrorColor); border-top-color: var(--progErrorColor);
} }
#form_sheld.script_aborted #send_textarea { #form_sheld.script_aborted #send_textarea {
border-top-color: var(--progAbortedColor); border-top-color: var(--progAbortedColor);
} }
@@ -1200,17 +1213,20 @@ select {
--direction: row; --direction: row;
left: 0; left: 0;
right: 0; right: 0;
&:before { &:before {
content: ""; content: "";
flex: 0 1 calc(var(--targetOffset) * 1px); flex: 0 1 calc(var(--targetOffset) * 1px);
display: block; display: block;
pointer-events: none; pointer-events: none;
} }
.autoComplete { .autoComplete {
flex: 0 0 auto; flex: 0 0 auto;
width: 50vw; width: 50vw;
pointer-events: all; pointer-events: all;
} }
&:after { &:after {
content: ""; content: "";
flex: 1 1 0; flex: 1 1 0;
@@ -1240,11 +1256,13 @@ select {
flex: 0 1 calc(var(--targetOffset) * 1px - 5vh); flex: 0 1 calc(var(--targetOffset) * 1px - 5vh);
display: block; display: block;
} }
.autoComplete-details { .autoComplete-details {
flex: 0 0 auto; flex: 0 0 auto;
max-height: 80vh; max-height: 80vh;
pointer-events: all; pointer-events: all;
} }
&:after { &:after {
content: ""; content: "";
flex: 1 1 0; flex: 1 1 0;
@@ -1255,35 +1273,42 @@ select {
flex-direction: row; flex-direction: row;
left: 0; left: 0;
right: 0; right: 0;
.autoComplete-details { .autoComplete-details {
max-height: unset; max-height: unset;
width: 25vw; width: 25vw;
} }
&.left { &.left {
&:before { &:before {
flex: 0 1 calc(var(--targetOffset) * 1px - 25vw); flex: 0 1 calc(var(--targetOffset) * 1px - 25vw);
} }
&:after { &:after {
flex: 1 0 auto; flex: 1 0 auto;
max-width: 50vw; max-width: 50vw;
} }
} }
&.right { &.right {
&:before { &:before {
flex: 0 0 calc(var(--targetOffset) * 1px + 50vw); flex: 0 0 calc(var(--targetOffset) * 1px + 50vw);
} }
} }
&.full { &.full {
&:before { &:before {
content: ""; content: "";
flex: 0 1 calc(var(--targetOffset) * 1px); flex: 0 1 calc(var(--targetOffset) * 1px);
display: block; display: block;
} }
.autoComplete-details { .autoComplete-details {
flex: 0 0 auto; flex: 0 0 auto;
max-width: 50vw; max-width: 50vw;
width: unset; width: unset;
} }
&:after { &:after {
content: ""; content: "";
flex: 1 1 0; flex: 1 1 0;
@@ -1318,6 +1343,7 @@ body[data-stscript-style="dark"] {
--ac-style-color-currentParenthesis: rgba(195 118 210 / 1); --ac-style-color-currentParenthesis: rgba(195 118 210 / 1);
--ac-style-color-comment: rgba(122 151 90 / 1); --ac-style-color-comment: rgba(122 151 90 / 1);
} }
body[data-stscript-style="light"] { body[data-stscript-style="light"] {
--ac-style-color-border: rgba(200 200 200 / 1); --ac-style-color-border: rgba(200 200 200 / 1);
--ac-style-color-background: rgba(248 248 248 / 1); --ac-style-color-background: rgba(248 248 248 / 1);
@@ -1338,6 +1364,7 @@ body[data-stscript-style="light"] {
--ac-style-color-currentParenthesis: rgba(195 118 210 / 1); --ac-style-color-currentParenthesis: rgba(195 118 210 / 1);
--ac-style-color-comment: rgba(70 126 26 / 1); --ac-style-color-comment: rgba(70 126 26 / 1);
} }
body[data-stscript-style="theme"] { body[data-stscript-style="theme"] {
--ac-style-color-border: var(--SmartThemeBorderColor); --ac-style-color-border: var(--SmartThemeBorderColor);
--ac-style-color-background: var(--SmartThemeBlurTintColor); --ac-style-color-background: var(--SmartThemeBlurTintColor);
@@ -1357,10 +1384,13 @@ body[data-stscript-style="theme"] {
--ac-style-color-currentParenthesis: rgba(195 118 210 / 1); --ac-style-color-currentParenthesis: rgba(195 118 210 / 1);
--ac-style-color-comment: rgba(122 151 90 / 1); --ac-style-color-comment: rgba(122 151 90 / 1);
} }
body { body {
--ac-font-scale: 0.8; --ac-font-scale: 0.8;
} }
.autoComplete, .autoComplete-details {
.autoComplete,
.autoComplete-details {
--ac-color-border: var(--ac-style-color-border, rgba(69 69 69 / 1)); --ac-color-border: var(--ac-style-color-border, rgba(69 69 69 / 1));
--ac-color-background: var(--ac-style-color-background, rgba(32 32 32 / 1)); --ac-color-background: var(--ac-style-color-background, rgba(32 32 32 / 1));
--ac-color-text: var(--ac-style-color-text, rgba(204 204 204 / 1)); --ac-color-text: var(--ac-style-color-text, rgba(204 204 204 / 1));
@@ -1401,47 +1431,121 @@ body {
line-height: 1.2; line-height: 1.2;
text-align: left; text-align: left;
z-index: 10000; z-index: 10000;
* { text-shadow: none; }
* {
text-shadow: none;
} }
}
body[data-stscript-style] .autoComplete [data-option-type] { body[data-stscript-style] .autoComplete [data-option-type] {
&[data-option-type="enum"] .type { color: var(--ac-color-string); } &[data-option-type="enum"] .type {
&[data-option-type="command"] .type { color: var(--ac-color-cmd); } color: var(--ac-color-string);
&[data-option-type="namedArgument"] .type { color: var(--ac-color-argName); }
&[data-option-type="variable"] .type { color: var(--ac-color-punctuationL1); }
&[data-option-type="qr"] .type { color: var(--ac-color-variable); }
&[data-option-type="macro"] .type { color: var(--ac-color-variableLanguage); }
} }
&[data-option-type="command"] .type {
color: var(--ac-color-cmd);
}
&[data-option-type="namedArgument"] .type {
color: var(--ac-color-argName);
}
&[data-option-type="variable"] .type {
color: var(--ac-color-punctuationL1);
}
&[data-option-type="qr"] .type {
color: var(--ac-color-variable);
}
&[data-option-type="macro"] .type {
color: var(--ac-color-variableLanguage);
}
}
body[data-stscript-style] .hljs.language-stscript { body[data-stscript-style] .hljs.language-stscript {
* { text-shadow: none !important; } * {
text-shadow: none !important;
}
text-shadow: none !important; text-shadow: none !important;
background-color: var(--ac-style-color-background); background-color: var(--ac-style-color-background);
color: var(--ac-style-color-text); color: var(--ac-style-color-text);
.hljs-title.function_ { color: var(--ac-style-color-cmd); } .hljs-title.function_ {
.hljs-title.function_.invoke__ { color: var(--ac-style-color-cmd); } color: var(--ac-style-color-cmd);
.hljs-string { color: var(--ac-style-color-string); } }
.hljs-number { color: var(--ac-style-color-number); }
.hljs-variable { color: var(--ac-style-color-variable); } .hljs-title.function_.invoke__ {
.hljs-variable.language_ { color: var(--ac-style-color-variableLanguage); } color: var(--ac-style-color-cmd);
.hljs-property { color: var(--ac-style-color-argName); } }
.hljs-punctuation { color: var(--ac-style-color-punctuation); }
.hljs-keyword { color: var(--ac-style-color-variableLanguage); } .hljs-string {
.hljs-comment { color: var(--ac-style-color-comment); } color: var(--ac-style-color-string);
.hljs-abort { color: var(--ac-style-color-abort, #e38e23); } }
.hljs-number {
color: var(--ac-style-color-number);
}
.hljs-variable {
color: var(--ac-style-color-variable);
}
.hljs-variable.language_ {
color: var(--ac-style-color-variableLanguage);
}
.hljs-property {
color: var(--ac-style-color-argName);
}
.hljs-punctuation {
color: var(--ac-style-color-punctuation);
}
.hljs-keyword {
color: var(--ac-style-color-variableLanguage);
}
.hljs-comment {
color: var(--ac-style-color-comment);
}
.hljs-abort {
color: var(--ac-style-color-abort, #e38e23);
}
.hljs-closure { .hljs-closure {
> .hljs-punctuation { color: var(--ac-style-color-punctuation); } >.hljs-punctuation {
color: var(--ac-style-color-punctuation);
}
.hljs-closure { .hljs-closure {
> .hljs-punctuation { color: var(--ac-style-color-punctuationL1); } >.hljs-punctuation {
color: var(--ac-style-color-punctuationL1);
}
.hljs-closure { .hljs-closure {
> .hljs-punctuation { color: var(--ac-style-color-punctuationL2); } >.hljs-punctuation {
color: var(--ac-style-color-punctuationL2);
}
.hljs-closure { .hljs-closure {
> .hljs-punctuation { color: var(--ac-style-color-punctuation); } >.hljs-punctuation {
color: var(--ac-style-color-punctuation);
}
.hljs-closure { .hljs-closure {
> .hljs-punctuation { color: var(--ac-style-color-punctuationL1); } >.hljs-punctuation {
color: var(--ac-style-color-punctuationL1);
}
.hljs-closure { .hljs-closure {
> .hljs-punctuation { color: var(--ac-style-color-punctuationL2); } >.hljs-punctuation {
color: var(--ac-style-color-punctuationL2);
}
} }
} }
} }
@@ -1457,6 +1561,7 @@ body[data-stscript-style] .hljs.language-stscript {
align-items: center; align-items: center;
max-height: calc(95vh - var(--bottom)); max-height: calc(95vh - var(--bottom));
container-type: inline-size; container-type: inline-size;
>.item { >.item {
cursor: pointer; cursor: pointer;
padding: 3px; padding: 3px;
@@ -1464,10 +1569,12 @@ body[data-stscript-style] .hljs.language-stscript {
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
display: contents; display: contents;
@container (max-width: 80em) { @container (max-width: 80em) {
.specs { .specs {
grid-column: 2 / 4; grid-column: 2 / 4;
} }
>.help { >.help {
grid-column: 2 / 4; grid-column: 2 / 4;
padding-left: 1em; padding-left: 1em;
@@ -1475,21 +1582,26 @@ body[data-stscript-style] .hljs.language-stscript {
height: auto; height: auto;
} }
} }
&.blank { &.blank {
display: block; display: block;
grid-column: 1 / 4; grid-column: 1 / 4;
} }
&:hover>* { &:hover>* {
background-color: var(--ac-color-hoveredBackground); background-color: var(--ac-color-hoveredBackground);
color: var(--ac-color-hoveredText); color: var(--ac-color-hoveredText);
} }
&.selected>* { &.selected>* {
background-color: var(--ac-color-selectedBackground); background-color: var(--ac-color-selectedBackground);
color: var(--ac-color-selectedText); color: var(--ac-color-selectedText);
} }
>* { >* {
height: 100%; height: 100%;
} }
>*+* { >*+* {
padding-left: 0.5em; padding-left: 0.5em;
} }
@@ -1508,8 +1620,10 @@ body[data-stscript-style] .hljs.language-stscript {
/* &:before { content: "["; } /* &:before { content: "["; }
&:after { content: "]"; } */ &:after { content: "]"; } */
} }
>.specs { >.specs {
align-items: flex-start; align-items: flex-start;
>.name { >.name {
>.matched { >.matched {
background-color: var(--ac-color-matchedBackground); background-color: var(--ac-color-matchedBackground);
@@ -1517,24 +1631,30 @@ body[data-stscript-style] .hljs.language-stscript {
font-weight: bold; font-weight: bold;
} }
} }
>.body { >.body {
flex-wrap: wrap; flex-wrap: wrap;
column-gap: 0.5em; column-gap: 0.5em;
>.arguments { >.arguments {
display: contents; display: contents;
height: 100%; height: 100%;
} }
} }
} }
>.help { >.help {
height: 100%; height: 100%;
>.helpContent { >.helpContent {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
font-size: 0.9em;white-space: nowrap; font-size: 0.9em;
white-space: nowrap;
line-height: 1.2; line-height: 1.2;
max-height: 1.2em; max-height: 1.2em;
display: block; display: block;
>* { >* {
display: contents; display: contents;
} }
@@ -1542,29 +1662,36 @@ body[data-stscript-style] .hljs.language-stscript {
} }
} }
} }
.autoComplete-details { .autoComplete-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0.5em;
>.specs { >.specs {
cursor: default; cursor: default;
flex-direction: column; flex-direction: column;
padding: 0.25em 0.25em 0.5em 0.25em; padding: 0.25em 0.25em 0.5em 0.25em;
border-bottom: 1px solid var(--ac-color-border); border-bottom: 1px solid var(--ac-color-border);
>.name { >.name {
font-weight: bold; font-weight: bold;
color: var(--ac-color-text); color: var(--ac-color-text);
cursor: help; cursor: help;
&:hover { &:hover {
text-decoration: 1px dotted underline; text-decoration: 1px dotted underline;
} }
} }
>.body { >.body {
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0.5em;
>.arguments { >.arguments {
margin: 0; margin: 0;
padding-left: 1.25em; padding-left: 1.25em;
>.argumentItem::marker { >.argumentItem::marker {
color: color-mix(in srgb, var(--ac-color-text), var(--ac-style-color-background)); color: color-mix(in srgb, var(--ac-color-text), var(--ac-style-color-background));
} }
@@ -1572,166 +1699,212 @@ body[data-stscript-style] .hljs.language-stscript {
.argumentSpec { .argumentSpec {
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
.argument-default { .argument-default {
&:before { &:before {
content: " = "; content: " = ";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
color: var(--ac-color-string); color: var(--ac-color-string);
} }
} }
.argument { .argument {
cursor: help; cursor: help;
&:hover:not(:has(.argument-name:hover, .argument-types:hover, .argument-enums:hover)) { &:hover:not(:has(.argument-name:hover, .argument-types:hover, .argument-enums:hover)) {
text-decoration: 1px dotted underline; text-decoration: 1px dotted underline;
} }
} }
.argument-name, .argument-name,
.argument-types, .argument-types,
.argument-enums, .argument-enums,
.argument-default .argument-default {
{
cursor: help; cursor: help;
&:hover { &:hover {
text-decoration: 1px dotted underline; text-decoration: 1px dotted underline;
} }
} }
.argument.optional+.argument-description:before, .argument.optional+.argument-description:before,
.argumentSpec:has(.argument.optional) + .argument-description:before .argumentSpec:has(.argument.optional)+.argument-description:before {
{
content: "(optional) "; content: "(optional) ";
color: var(--ac-color-text); color: var(--ac-color-text);
opacity: 0.5; opacity: 0.5;
} }
.argument-description { .argument-description {
margin-left: 0.5em; margin-left: 0.5em;
font-family: var(--mainFontFamily); font-family: var(--mainFontFamily);
font-size: 0.9em; font-size: 0.9em;
} }
} }
.returns { .returns {
cursor: help; cursor: help;
&:hover { &:hover {
text-decoration: 1px dotted underline; text-decoration: 1px dotted underline;
} }
} }
} }
} }
>.help { >.help {
padding: 0 0.5em 0.5em 0.5em; padding: 0 0.5em 0.5em 0.5em;
div { div {
margin-block-end: 1em; margin-block-end: 1em;
} }
ul { ul {
margin: 0; margin: 0;
padding-left: 1.5em; padding-left: 1.5em;
} }
pre { pre {
margin: 0; margin: 0;
>code { >code {
display: block; display: block;
padding: 0; padding: 0;
} }
} }
} }
>.aliases { >.aliases {
padding: 0 0.5em 0.5em 0.5em; padding: 0 0.5em 0.5em 0.5em;
&:before { content: '(alias: '; }
&:before {
content: '(alias: ';
}
>.alias { >.alias {
font-family: monospace; font-family: monospace;
&+.alias:before { content: ', '; }
} &+.alias:before {
&:after { content: ')'; } content: ', ';
} }
} }
.autoComplete > .item, .autoComplete-details { &:after {
content: ')';
}
}
}
.autoComplete>.item,
.autoComplete-details {
>.specs { >.specs {
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
>.name { >.name {
font-family: monospace; font-family: monospace;
white-space: nowrap; white-space: nowrap;
/* color: var(--ac-color-text); */ /* color: var(--ac-color-text); */
} }
>.body { >.body {
display: flex; display: flex;
>.arguments { >.arguments {
font-family: monospace; font-family: monospace;
.argument { .argument {
white-space: nowrap; white-space: nowrap;
&.namedArgument { &.namedArgument {
&:before { &:before {
content: "["; content: "[";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
&:after { &:after {
content: "]"; content: "]";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
&.optional:after { &.optional:after {
content: "]?"; content: "]?";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
>.argument-name { >.argument-name {
color: var(--ac-color-argName); color: var(--ac-color-argName);
} }
} }
&.unnamedArgument { &.unnamedArgument {
&:before { &:before {
content: "("; content: "(";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
&.multiple:before { &.multiple:before {
content: "...("; content: "...(";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
&:after { &:after {
content: ")"; content: ")";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
&.optional:after { &.optional:after {
content: ")?"; content: ")?";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
} }
>.argument-name+.argument-types:before { >.argument-name+.argument-types:before {
content: "="; content: "=";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
>.argument-types { >.argument-types {
color: var(--ac-color-type); color: var(--ac-color-type);
word-break: break-all; word-break: break-all;
white-space: break-spaces; white-space: break-spaces;
>.argument-type+.argument-type:before { >.argument-type+.argument-type:before {
content: "|"; content: "|";
color: var(--ac-color-text); color: var(--ac-color-text);
};
} }
;
}
>.argument-types+.argument-enums, >.argument-types+.argument-enums,
> .argument-name + .argument-enums >.argument-name+.argument-enums {
{
&:before { &:before {
content: "="; content: "=";
color: var(--ac-color-text); color: var(--ac-color-text);
} }
} }
>.argument-enums { >.argument-enums {
color: var(--ac-color-string); color: var(--ac-color-string);
word-break: break-all; word-break: break-all;
white-space: break-spaces; white-space: break-spaces;
>.argument-enum+.argument-enum:before { >.argument-enum+.argument-enum:before {
content: "|"; content: "|";
color: var(--ac-color-text); color: var(--ac-color-text);
}; }
;
} }
} }
} }
>.returns { >.returns {
font-family: monospace; font-family: monospace;
color: var(--ac-color-text); color: var(--ac-color-text);
&:before { &:before {
content: "=> "; content: "=> ";
color: var(--ac-color-symbol); color: var(--ac-color-symbol);
@@ -1740,55 +1913,67 @@ body[data-stscript-style] .hljs.language-stscript {
} }
} }
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
.autoComplete-wrap { .autoComplete-wrap {
left: 1vw; left: 1vw;
right: 1vw; right: 1vw;
} }
.autoComplete-detailsWrap:not(.full) { .autoComplete-detailsWrap:not(.full) {
left: 50vw; left: 50vw;
} }
} }
.slashCommandBrowser { .slashCommandBrowser {
>.search { >.search {
display: flex; display: flex;
gap: 1em; gap: 1em;
align-items: baseline; align-items: baseline;
white-space: nowrap; white-space: nowrap;
>.searchLabel { >.searchLabel {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
align-items: baseline; align-items: baseline;
>.searchInput { >.searchInput {
flex: 1 1 auto; flex: 1 1 auto;
} }
} }
>.searchOptions { >.searchOptions {
display: flex; display: flex;
gap: 1em; gap: 1em;
align-items: baseline; align-items: baseline;
} }
} }
>.commandContainer { >.commandContainer {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
container-type: inline-size; container-type: inline-size;
>.autoComplete { >.autoComplete {
flex: 1 1 auto; flex: 1 1 auto;
max-height: unset; max-height: unset;
>.isFiltered { >.isFiltered {
display: none; display: none;
} }
.specs { .specs {
grid-column: 2 / 4; grid-column: 2 / 4;
} }
.help { .help {
grid-column: 2 / 4; grid-column: 2 / 4;
padding-left: 1em; padding-left: 1em;
opacity: 0.75; opacity: 0.75;
} }
} }
>.autoComplete-detailsWrap { >.autoComplete-detailsWrap {
flex: 0 0 auto; flex: 0 0 auto;
align-self: stretch; align-self: stretch;
@@ -1798,10 +1983,12 @@ body[data-stscript-style] .hljs.language-stscript {
&:before { &:before {
flex: 0 1 calc(var(--targetOffset) * 1px); flex: 0 1 calc(var(--targetOffset) * 1px);
} }
>.autoComplete-details { >.autoComplete-details {
max-height: 50vh; max-height: 50vh;
} }
} }
@container (max-width: 1000px) { @container (max-width: 1000px) {
>.autoComplete-detailsWrap { >.autoComplete-detailsWrap {
width: 50%; width: 50%;
@@ -3378,15 +3565,18 @@ input[type="range"]::-webkit-slider-thumb {
--markerWidth: 15px; --markerWidth: 15px;
container-type: inline-size; container-type: inline-size;
container-name: doubleRangeContainer; container-name: doubleRangeContainer;
>.doubleRangeInputContainer { >.doubleRangeInputContainer {
flex: 0 0 50%; flex: 0 0 50%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
>datalist { >datalist {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
font-size: x-small; font-size: x-small;
>option { >option {
flex: 0 0 0; flex: 0 0 0;
width: 0; width: 0;
@@ -3394,22 +3584,27 @@ input[type="range"]::-webkit-slider-thumb {
justify-content: center; justify-content: center;
} }
} }
@container doubleRangeContainer (max-width: 200px) { @container doubleRangeContainer (max-width: 200px) {
>datalist { >datalist {
height: 2.5em; height: 2.5em;
} }
&:nth-child(1)>datalist>option { &:nth-child(1)>datalist>option {
transform: rotate(-45deg); transform: rotate(-45deg);
transform-origin: bottom right; transform-origin: bottom right;
} }
&:nth-child(2)>datalist>option { &:nth-child(2)>datalist>option {
transform: rotate(45deg); transform: rotate(45deg);
transform-origin: bottom left; transform-origin: bottom left;
} }
} }
>input::-webkit-slider-thumb { >input::-webkit-slider-thumb {
z-index: 2; z-index: 2;
} }
&:after { &:after {
/* shifted to center to hide corners of the inset shadow */ /* shifted to center to hide corners of the inset shadow */
--shift: 2px; --shift: 2px;
@@ -3429,34 +3624,42 @@ input[type="range"]::-webkit-slider-thumb {
background-color: var(--SmartThemeQuoteColor); background-color: var(--SmartThemeQuoteColor);
box-shadow: inset 0 0 2px black; box-shadow: inset 0 0 2px black;
} }
&:nth-child(1) { &:nth-child(1) {
--value: 0; --value: 0;
padding-left: 1em; padding-left: 1em;
>input { >input {
direction: rtl; direction: rtl;
position: relative; position: relative;
padding-right: max(20px, 20%); padding-right: max(20px, 20%);
} }
>datalist { >datalist {
direction: rtl; direction: rtl;
padding-right: calc(var(--markerWidth)/2 + max(20px, 20%)); padding-right: calc(var(--markerWidth)/2 + max(20px, 20%));
padding-left: calc(var(--markerWidth)/2 - 2px); padding-left: calc(var(--markerWidth)/2 - 2px);
} }
&:after { &:after {
right: -2px; right: -2px;
} }
} }
&:nth-child(2) { &:nth-child(2) {
--value: 0; --value: 0;
padding-right: 1em; padding-right: 1em;
>input { >input {
position: relative; position: relative;
padding-left: max(20px, 20%); padding-left: max(20px, 20%);
} }
>datalist { >datalist {
padding-left: calc(var(--markerWidth)/2 + max(20px, 20%)); padding-left: calc(var(--markerWidth)/2 + max(20px, 20%));
padding-right: calc(var(--markerWidth)/2 - 2px); padding-right: calc(var(--markerWidth)/2 - 2px);
} }
&:after { &:after {
left: -2px; left: -2px;
} }
@@ -4285,6 +4488,7 @@ a {
#CustomCSS-textAreaBlock { #CustomCSS-textAreaBlock {
display: contents; display: contents;
} }
#customCSS { #customCSS {
flex: 1 1 auto; flex: 1 1 auto;
} }
@@ -4673,6 +4877,7 @@ body:not(.movingUI) .drawer-content.maximized {
backdrop-filter: blur(var(--SmartThemeBlurStrength)); backdrop-filter: blur(var(--SmartThemeBlurStrength));
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeBlurTintColor);
padding: 5px; padding: 5px;
border: 1px solid red;
} }
.zoomed_avatar { .zoomed_avatar {
@@ -4690,12 +4895,13 @@ body:not(.movingUI) .drawer-content.maximized {
position: absolute; position: absolute;
height: auto; height: auto;
max-height: 90vh !important; max-height: 90vh !important;
align-items: end; align-items: start;
} }
.zoomed_avatar .dragClose { /*why were we force hiding the close button again..?*/
/* .zoomed_avatar .dragClose {
display: none; display: none;
} } */
.zoomed_avatar_container { .zoomed_avatar_container {
width: 100%; width: 100%;
@@ -4894,10 +5100,39 @@ body:not(.movingUI) .drawer-content.maximized {
} }
/* CSS styles using a consistent pastel color palette */ /* CSS styles using a consistent pastel color palette */
.regex-brackets { color: #FFB347; } /* Pastel Orange */ .regex-brackets {
.regex-special { color: #B0E0E6; } /* Powder Blue */ color: #FFB347;
.regex-quantifier { color: #DDA0DD; } /* Plum */ }
.regex-operator { color: #FFB6C1; } /* Light Pink */
.regex-flags { color: #98FB98; } /* Pale Green */ /* Pastel Orange */
.regex-delimiter { font-weight: bold; color: #FF6961; } /* Pastel Red */ .regex-special {
.regex-highlight { color: #FAF8F6; } /* Pastel White */ color: #B0E0E6;
}
/* Powder Blue */
.regex-quantifier {
color: #DDA0DD;
}
/* Plum */
.regex-operator {
color: #FFB6C1;
}
/* Light Pink */
.regex-flags {
color: #98FB98;
}
/* Pale Green */
.regex-delimiter {
font-weight: bold;
color: #FF6961;
}
/* Pastel Red */
.regex-highlight {
color: #FAF8F6;
}
/* Pastel White */