rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-10 09:00:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

clear QR Set color and bg adjustments

Browse Source
This commit is contained in:
LenAnderson 2024-07-14 14:13:57 -04:00
parent 7de5bd00be
commit ddce6c4e89
5 changed files with 64 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/scripts/extensions/quick-reply/html/settings.html
View File

@ -60,8 +60,9 @@
<label class="flex-container" id="qr--injectInputContainer">
<input type="checkbox" id="qr--injectInput"> <span><span data-i18n="Inject user input automatically">Inject user input automatically</span> <small><span data-i18n="(if disabled, use ">(if disabled, use</span><code>{{input}}</code> <span data-i18n="macro for manual injection)">macro for manual injection)</span></small></span>
</label>
<div class="flex-container">
<div class="flex-container alignItemsCenter">
<toolcool-color-picker id="qr--color"></toolcool-color-picker>
<div class="menu_button" id="qr--colorClear">Clear</div>
<span data-i18n="Color">Color</span>
</div>
<label class="flex-container" id="qr--onlyBorderColorContainer">

4
public/scripts/extensions/quick-reply/src/QuickReplySet.js
View File

@ -84,8 +84,9 @@ export class QuickReplySet {
});
}
updateColor() {
if (this.color) {
if (this.color && this.color != 'transparent') {
this.dom.style.setProperty('--qr--color', this.color);
this.dom.classList.add('qr--color');
if (this.onlyBorderColor) {
this.dom.classList.add('qr--borderColor');
} else {
@ -93,6 +94,7 @@ export class QuickReplySet {
}
} else {
this.dom.style.setProperty('--qr--color', 'transparent');
this.dom.classList.remove('qr--color');
this.dom.classList.remove('qr--borderColor');
}
}

7
public/scripts/extensions/quick-reply/src/ui/SettingsUi.js
View File

@ -173,6 +173,13 @@ export class SettingsUi {
qrs.save();
this.currentQrSet.updateColor();
});
this.dom.querySelector('#qr--colorClear').addEventListener('click', (evt)=>{
const qrs = this.currentQrSet;
this.color.color = 'transparent';
qrs.color = 'transparent';
qrs.save();
this.currentQrSet.updateColor();
});
this.onlyBorderColor = this.dom.querySelector('#qr--onlyBorderColor');
this.onlyBorderColor.addEventListener('click', ()=>{
const qrs = this.currentQrSet;

34
public/scripts/extensions/quick-reply/style.css
View File

@ -59,7 +59,6 @@
#qr--bar > .qr--buttons,
#qr--popout > .qr--body > .qr--buttons {
--qr--color: transparent;
background-color: var(--qr--color);
margin: 0;
padding: 0;
display: flex;
@ -68,21 +67,40 @@
gap: 5px;
width: 100%;
}
#qr--bar > .qr--buttons.qr--color,
#qr--popout > .qr--body > .qr--buttons.qr--color {
background-color: var(--qr--color);
}
#qr--bar > .qr--buttons.qr--borderColor,
#qr--popout > .qr--body > .qr--buttons.qr--borderColor {
background-color: transparent;
border-left: 5px solid var(--qr--color);
border-right: 5px solid var(--qr--color);
}
#qr--bar > .qr--buttons:has(.qr--buttons.qr--color),
#qr--popout > .qr--body > .qr--buttons:has(.qr--buttons.qr--color) {
margin: 5px;
}
#qr--bar > .qr--buttons > .qr--buttons,
#qr--popout > .qr--body > .qr--buttons > .qr--buttons {
display: contents;
background-color: transparent;
}
#qr--bar > .qr--buttons > .qr--buttons:before,
#qr--popout > .qr--body > .qr--buttons > .qr--buttons:before,
#qr--bar > .qr--buttons > .qr--buttons:after,
#qr--popout > .qr--body > .qr--buttons > .qr--buttons:after {
#qr--bar > .qr--buttons > .qr--buttons.qr--color .qr--button:before,
#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color .qr--button:before {
content: '';
background-color: var(--qr--color);
position: absolute;
inset: -5px;
z-index: -1;
}
#qr--bar > .qr--buttons > .qr--buttons.qr--color.qr--borderColor .qr--button:before,
#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color.qr--borderColor .qr--button:before {
display: none;
}
#qr--bar > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:before,
#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:before,
#qr--bar > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:after,
#qr--popout > .qr--body > .qr--buttons > .qr--buttons.qr--color.qr--borderColor:after {
content: '';
width: 5px;
background-color: var(--qr--color);
@ -100,11 +118,11 @@
align-items: center;
justify-content: center;
text-align: center;
position: relative;
}
#qr--bar > .qr--buttons .qr--button:hover,
#qr--popout > .qr--body > .qr--buttons .qr--button:hover {
opacity: 1;
filter: brightness(1.2);
background-color: #4d4d4d;
}
#qr--bar > .qr--buttons .qr--button .qr--hidden,
#qr--popout > .qr--body > .qr--buttons .qr--button .qr--hidden {

34
public/scripts/extensions/quick-reply/style.less
View File

@ -66,12 +66,17 @@
#qr--popout>.qr--body {
>.qr--buttons {
--qr--color: transparent;
background-color: var(--qr--color);
&.qr--color {
background-color: var(--qr--color);
}
&.qr--borderColor {
background-color: transparent;
border-left: 5px solid var(--qr--color);
border-right: 5px solid var(--qr--color);
}
&:has(.qr--buttons.qr--color) {
margin: 5px;
}
margin: 0;
padding: 0;
display: flex;
@ -82,11 +87,24 @@
>.qr--buttons {
display: contents;
background-color: transparent;
&:before, &:after {
content: '';
width: 5px;
background-color: var(--qr--color);
&.qr--color {
.qr--button:before {
content: '';
background-color: var(--qr--color);
position: absolute;
inset: -5px;
z-index: -1;
}
&.qr--borderColor {
.qr--button:before {
display: none;
}
&:before, &:after {
content: '';
width: 5px;
background-color: var(--qr--color);
}
}
}
}
@ -103,10 +121,10 @@
align-items: center;
justify-content: center;
text-align: center;
position: relative;
&:hover {
opacity: 1;
filter: brightness(1.2);
background-color: rgb(30% 30% 30%);
}
.qr--hidden {