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 QR .less format

Browse Source
This commit is contained in:
Cohee
2024-06-24 21:43:13 +03:00
parent 7a27c29695
commit cf9a5383a9
1 changed files with 501 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,23 +12,27 @@
order: 1; order: 1;
padding-right: 2.5em; padding-right: 2.5em;
position: relative; position: relative;
> #qr--popoutTrigger {
>#qr--popoutTrigger {
position: absolute; position: absolute;
right: 0.25em; right: 0.25em;
top: 0; top: 0;
} }
} }
#qr--popout { #qr--popout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
z-index: 31; z-index: 31;
> .qr--header {
>.qr--header {
flex: 0 0 auto; flex: 0 0 auto;
height: 2em; height: 2em;
position: relative; position: relative;
> .qr--controls {
> .qr--close { >.qr--controls {
>.qr--close {
height: 15px; height: 15px;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
font-size: 20px; font-size: 20px;
@@ -37,12 +41,15 @@
} }
} }
} }
> .qr--body {
>.qr--body {
overflow-y: auto; overflow-y: auto;
} }
} }
#qr--bar, #qr--popout > .qr--body {
> .qr--buttons { #qr--bar,
#qr--popout>.qr--body {
>.qr--buttons {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
@@ -51,7 +58,7 @@
gap: 5px; gap: 5px;
width: 100%; width: 100%;
> .qr--buttons { >.qr--buttons {
display: contents; display: contents;
} }
@@ -68,15 +75,18 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
&:hover { &:hover {
opacity: 1; opacity: 1;
filter: brightness(1.2); filter: brightness(1.2);
} }
> .qr--button-expander {
>.qr--button-expander {
display: none; display: none;
} }
&.qr--hasCtx { &.qr--hasCtx {
> .qr--button-expander { >.qr--button-expander {
display: block; display: block;
} }
} }
@@ -89,6 +99,7 @@
margin-left: 1em; margin-left: 1em;
text-align: center; text-align: center;
width: 2em; width: 2em;
&:hover { &:hover {
font-weight: bold; font-weight: bold;
} }
@@ -157,64 +168,92 @@
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 1em; gap: 1em;
> .qr--title {
>.qr--title {
font-weight: bold; font-weight: bold;
} }
> .qr--actions {
>.qr--actions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: baseline;
gap: 0.5em; gap: 0.5em;
} }
} }
.qr--setList { .qr--setList {
> .qr--item { >.qr--item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 0.5em; gap: 0.5em;
align-items: baseline; align-items: baseline;
padding: 0 0.5em; padding: 0 0.5em;
> .drag-handle {
>.drag-handle {
padding: 0.75em; padding: 0.75em;
} }
> .qr--visible {
>.qr--visible {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
} }
} }
#qr--set-settings { #qr--set-settings {
#qr--injectInputContainer { #qr--injectInputContainer {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
} }
#qr--set-qrList { #qr--set-qrList {
.qr--set-qrListContents > { .qr--set-qrListContents> {
padding: 0 0.5em; padding: 0 0.5em;
> .qr--set-item {
>.qr--set-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 0.5em; gap: 0.5em;
align-items: baseline; align-items: baseline;
padding: 0.25em 0; padding: 0.25em 0;
> :nth-child(1) { flex: 0 0 auto; }
> :nth-child(2) { flex: 1 1 25%; } > :nth-child(1) {
> :nth-child(3) { flex: 0 0 auto; } flex: 0 0 auto;
> :nth-child(4) { flex: 1 1 75%; } }
> :nth-child(5) { flex: 0 0 auto; }
> .drag-handle { > :nth-child(2) {
flex: 1 1 25%;
}
> :nth-child(3) {
flex: 0 0 auto;
}
> :nth-child(4) {
flex: 1 1 75%;
}
> :nth-child(5) {
flex: 0 0 auto;
}
>.drag-handle {
padding: 0.75em; padding: 0.75em;
} }
.qr--set-itemLabel, .qr--action {
.qr--set-itemLabel,
.qr--action {
margin: 0; margin: 0;
} }
.qr--set-itemMessage { .qr--set-itemMessage {
font-size: smaller; font-size: smaller;
} }
} }
} }
} }
.qr--set-qrListActions { .qr--set-qrListActions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -231,7 +270,8 @@
#qr--qrOptions { #qr--qrOptions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> #qr--ctxEditor {
>#qr--ctxEditor {
.qr--ctxItem { .qr--ctxItem {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -247,18 +287,22 @@
body .popup:has(#qr--modalEditor) .popup-content>#qr--modalEditor { body .popup:has(#qr--modalEditor) .popup-content>#qr--modalEditor {
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
> #qr--main {
>#qr--main {
flex: 0 0 auto; flex: 0 0 auto;
} }
> #qr--main > .qr--labels {
>#qr--main>.qr--labels {
flex-direction: column; flex-direction: column;
} }
> #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder {
>#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder {
min-height: 50svh; min-height: 50svh;
height: 50svh; height: 50svh;
} }
} }
} }
.popup:has(#qr--modalEditor) { .popup:has(#qr--modalEditor) {
aspect-ratio: unset; aspect-ratio: unset;
@@ -266,79 +310,94 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> #qr--modalEditor { >#qr--modalEditor {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1em; gap: 1em;
overflow: hidden; overflow: hidden;
> #qr--main { >#qr--main {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
> .qr--labels {
>.qr--labels {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 0.5em; gap: 0.5em;
> label {
>label {
flex: 1 1 1px; flex: 1 1 1px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
> .qr--labelText {
>.qr--labelText {
flex: 1 1 auto; flex: 1 1 auto;
} }
> .qr--labelHint {
>.qr--labelHint {
flex: 1 1 auto; flex: 1 1 auto;
} }
> input {
>input {
flex: 0 0 auto; flex: 0 0 auto;
} }
} }
} }
> .qr--modal-messageContainer {
>.qr--modal-messageContainer {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
> .qr--modal-editorSettings {
>.qr--modal-editorSettings {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1em; gap: 1em;
color: var(--grey70); color: var(--grey70);
font-size: smaller; font-size: smaller;
align-items: baseline; align-items: baseline;
> .checkbox_label {
>.checkbox_label {
white-space: nowrap; white-space: nowrap;
> input {
>input {
font-size: inherit; font-size: inherit;
} }
} }
} }
> #qr--modal-messageHolder {
>#qr--modal-messageHolder {
flex: 1 1 auto; flex: 1 1 auto;
display: grid; display: grid;
text-align: left; text-align: left;
overflow: hidden; overflow: hidden;
&.qr--noSyntax { &.qr--noSyntax {
> #qr--modal-messageSyntax { >#qr--modal-messageSyntax {
display: none; display: none;
} }
> #qr--modal-message {
>#qr--modal-message {
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);
&::selection { &::selection {
color: unset; color: unset;
background-color: rgba(108 171 251 / 0.25); background-color: rgba(108 171 251 / 0.25);
@supports (color: rgb(from white r g b / 0.25)) { @supports (color: rgb(from white r g b / 0.25)) {
background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25); background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
} }
} }
} }
} }
> #qr--modal-messageSyntax {
>#qr--modal-messageSyntax {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
padding: 0; padding: 0;
@@ -347,30 +406,38 @@
overflow: hidden; overflow: hidden;
min-width: 100%; min-width: 100%;
width: 0; width: 0;
> #qr--modal-messageSyntaxInner {
>#qr--modal-messageSyntaxInner {
height: 100%; height: 100%;
} }
} }
> #qr--modal-message {
>#qr--modal-message {
background-color: transparent; background-color: transparent;
color: transparent; color: transparent;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
caret-color: var(--ac-style-color-text); caret-color: var(--ac-style-color-text);
overflow: auto; overflow: auto;
&::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
&::-webkit-scrollbar,
&::-webkit-scrollbar-thumb {
visibility: hidden; visibility: hidden;
cursor: default; cursor: default;
} }
&::selection { &::selection {
color: transparent; color: transparent;
background-color: rgba(108 171 251 / 0.25); background-color: rgba(108 171 251 / 0.25);
@supports (color: rgb(from white r g b / 0.25)) { @supports (color: rgb(from white r g b / 0.25)) {
background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25); background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
} }
} }
} }
#qr--modal-message, #qr--modal-messageSyntaxInner {
#qr--modal-message,
#qr--modal-messageSyntaxInner {
font-family: var(--monoFontFamily); font-family: var(--monoFontFamily);
padding: 0.75em; padding: 0.75em;
margin: 0; margin: 0;
@@ -387,6 +454,7 @@
#qr--modal-executeButtons { #qr--modal-executeButtons {
display: flex; display: flex;
gap: 1em; gap: 1em;
.qr--modal-executeButton { .qr--modal-executeButton {
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
@@ -394,43 +462,55 @@
flex-direction: row; flex-direction: row;
gap: 0.5em; gap: 0.5em;
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
.qr--modal-executeComboIcon { .qr--modal-executeComboIcon {
display: flex; display: flex;
} }
} }
#qr--modal-execute { #qr--modal-execute {
transition: 200ms; transition: 200ms;
filter: grayscale(0); filter: grayscale(0);
&.qr--busy { &.qr--busy {
cursor: wait; cursor: wait;
opacity: 0.5; opacity: 0.5;
filter: grayscale(1); filter: grayscale(1);
} }
} }
#qr--modal-execute { #qr--modal-execute {
border-color: rgb(81, 163, 81); border-color: rgb(81, 163, 81);
} }
#qr--modal-pause, #qr--modal-stop {
#qr--modal-pause,
#qr--modal-stop {
cursor: default; cursor: default;
opacity: 0.5; opacity: 0.5;
filter: grayscale(1); filter: grayscale(1);
pointer-events: none; pointer-events: none;
} }
.qr--busy { .qr--busy {
~ #qr--modal-pause, ~ #qr--modal-stop {
~#qr--modal-pause,
~#qr--modal-stop {
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
filter: grayscale(0); filter: grayscale(0);
pointer-events: all; pointer-events: all;
} }
} }
#qr--modal-pause { #qr--modal-pause {
border-color: rgb(146, 190, 252); border-color: rgb(146, 190, 252);
} }
#qr--modal-stop { #qr--modal-stop {
border-color: rgb(215, 136, 114); border-color: rgb(215, 136, 114);
} }
} }
#qr--modal-executeProgress { #qr--modal-executeProgress {
--prog: 0; --prog: 0;
--progColor: rgb(146, 190, 252); --progColor: rgb(146, 190, 252);
@@ -441,6 +521,7 @@
height: 0.5em; height: 0.5em;
background-color: var(--black50a); background-color: var(--black50a);
position: relative; position: relative;
&:after { &:after {
content: ''; content: '';
background-color: var(--progColor); background-color: var(--progColor);
@@ -449,6 +530,7 @@
right: calc(100% - var(--prog) * 1%); right: calc(100% - var(--prog) * 1%);
transition: 200ms; transition: 200ms;
} }
&.qr--paused:after { &.qr--paused:after {
animation-name: qr--progressPulse; animation-name: qr--progressPulse;
animation-duration: 1500ms; animation-duration: 1500ms;
@@ -456,21 +538,27 @@
animation-delay: 0s; animation-delay: 0s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
&.qr--aborted:after { &.qr--aborted:after {
background-color: var(--progAbortedColor); background-color: var(--progAbortedColor);
} }
&.qr--success:after { &.qr--success:after {
background-color: var(--progSuccessColor); background-color: var(--progSuccessColor);
} }
&.qr--error:after { &.qr--error:after {
background-color: var(--progErrorColor); background-color: var(--progErrorColor);
} }
} }
#qr--modal-executeErrors { #qr--modal-executeErrors {
display: none; display: none;
&.qr--hasErrors { &.qr--hasErrors {
display: block; display: block;
} }
text-align: left; text-align: left;
font-size: smaller; font-size: smaller;
background-color: rgb(189, 54, 47); background-color: rgb(189, 54, 47);
@@ -480,12 +568,18 @@
min-width: 100%; min-width: 100%;
width: 0; width: 0;
} }
#qr--modal-executeResult { #qr--modal-executeResult {
display: none; display: none;
&.qr--hasResult { &.qr--hasResult {
display: block; display: block;
} }
&:before { content: 'Result: '; }
&:before {
content: 'Result: ';
}
text-align: left; text-align: left;
font-size: smaller; font-size: smaller;
background-color: rgb(81, 163, 81); background-color: rgb(81, 163, 81);
@@ -498,10 +592,14 @@
} }
} }
} }
@keyframes qr--progressPulse { @keyframes qr--progressPulse {
0%, 100% {
0%,
100% {
background-color: var(--progColor); background-color: var(--progColor);
} }
50% { 50% {
background-color: var(--progFlashColor); background-color: var(--progFlashColor);
} }