rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix zoomedAvatar resize and movement

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -6275,11 +6275,11 @@
</div>
<div id="zoomed_avatar_template" class="template_element">
<div class="zoomed_avatar">
<div class="zoomed_avatar_container">
<div class="panelControlBar flex-container">
<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>
<div class="zoomed_avatar_container">
<img class="zoomed_avatar_img" src="" data-izoomify-url="" data-izoomify-magnify="1.8" data-izoomify-duration="300" alt="">
</div>
</div>

9
public/script.js
View File

@ -10251,15 +10251,6 @@ jQuery(async function () {
$(`.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) => {
if (e.target.closest('.dragClose')) {
$(`.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:
// THIRD UPDATE, prevent resize window breaks and smartly handle saving
export function dragElement(elmnt) {
var hasBeenDraggedByUser = false;
var isMouseDown = false;
@ -479,8 +477,8 @@ export function dragElement(elmnt) {
}
//console.debug(left + width, winWidth, hasBeenDraggedByUser, isMouseDown)
const style = getComputedStyle(target); //use computed values because not all CSS are set by default
height = target.offsetHeight;
width = target.offsetWidth;
height = parseInt(style.height) //target.offsetHeight;
width = parseInt(style.width) //target.offsetWidth;
top = parseInt(style.top);
left = parseInt(style.left);
right = parseInt(style.right);
@ -494,19 +492,20 @@ export function dragElement(elmnt) {
const topbarstyle = getComputedStyle(topbar);
topBarFirstX = parseInt(topbarstyle.marginInline);
topBarLastY = parseInt(topbarstyle.height);
/*console.log(`
/*
console.log(`
Observer
winWidth: ${winWidth}, winHeight: ${winHeight}
sheldWidth: ${sheldWidth}
sheldWidth: sheldWidth
X: ${$(elmnt).css('left')}
Y: ${$(elmnt).css('top')}
MaxX: ${maxX}, MaxY: ${maxY}
height: ${height}
width: ${width}
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
if (!power_user.movingUIState[elmntName]) {
@ -524,24 +523,38 @@ export function dragElement(elmnt) {
}
//handle resizing
if (!hasBeenDraggedByUser && isMouseDown) {
console.debug('saw resize, NOT header drag');
if (!hasBeenDraggedByUser && isMouseDown) { //if user is dragging the resize handle (not in header)
//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
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');
}
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');
}
//prevent resizing from top left into the top bar
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');
}
@ -647,19 +660,20 @@ export function dragElement(elmnt) {
// and will defaults to shrink to min value of 100px set in CSS file
elmnt.css('height', height);
elmnt.css('width', width);
/*
console.log(`
/*console.log(`
elementDrag:
winWidth: ${winWidth}, winHeight: ${winHeight}
sheldWidth: ${sheldWidth}
sheldWidth: sheldWidth
X: ${$(elmnt).css('left')}
Y: ${$(elmnt).css('top')}
MaxX: ${maxX}, MaxY: ${maxY}
height: ${height}
width: ${width}
Topbar 1st X: ${topBarFirstX}
TopBar lastX: ${topBarLastX}
`);
*/
TopBar lastX: topBarLastX
`);*/
return;
}

351
public/style.css
View File

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