Fix mobile QR popout style

90f58bb553032a69e0688dd66fc2b12871d6731a

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 9bcbe957af41097cdebf93de9b1310af663ed2c2
2 files changed, +532 -362Ignore whitespace
public/scripts/extensions/quick-reply/style.css+6 -0
@@ -34,6 +34,12 @@
34 right: 0.25em;34 right: 0.25em;
35 top: 0;35 top: 0;
36}36}
37/*hide QR popout for mobile*/
38@media screen and (max-width: 1000px) {
39 #qr--bar > #qr--popoutTrigger {
40 display: none;
41 }
42}
37#qr--bar.popoutVisible {43#qr--bar.popoutVisible {
38 padding-right: 2.5em;44 padding-right: 2.5em;
39}45}
public/scripts/extensions/quick-reply/style.less+526 -362
@@ -1,11 +1,16 @@
1@keyframes qr--success {1@keyframes qr--success {
2 0%, 100% {2
3 0%,
4 100% {
3 color: var(--SmartThemeBodyColor);5 color: var(--SmartThemeBodyColor);
4 }6 }
5 25%, 75% {7
8 25%,
9 75% {
6 color: rgb(81, 163, 81);10 color: rgb(81, 163, 81);
7 }11 }
8}12}
13
9&.qr--success {14&.qr--success {
10 animation-name: qr--success;15 animation-name: qr--success;
11 animation-duration: 3s;16 animation-duration: 3s;
@@ -13,6 +18,7 @@
13 animation-delay: 0s;18 animation-delay: 0s;
14 animation-iteration-count: 1;19 animation-iteration-count: 1;
15}20}
21
16#qr--bar {22#qr--bar {
17 outline: none;23 outline: none;
18 margin: 0;24 margin: 0;
@@ -33,6 +39,14 @@
33 top: 0;39 top: 0;
34 }40 }
35}41}
42
43/*hide QR popout for mobile*/
44@media screen and (max-width: 1000px) {
45 #qr--bar>#qr--popoutTrigger {
46 display: none;
47 }
48}
49
36#qr--bar.popoutVisible {50#qr--bar.popoutVisible {
37 padding-right: 2.5em;51 padding-right: 2.5em;
38}52}
@@ -68,17 +82,21 @@
68#qr--popout>.qr--body {82#qr--popout>.qr--body {
69 >.qr--buttons {83 >.qr--buttons {
70 --qr--color: transparent;84 --qr--color: transparent;
85
71 &.qr--color {86 &.qr--color {
72 background-color: var(--qr--color);87 background-color: var(--qr--color);
73 }88 }
89
74 &.qr--borderColor {90 &.qr--borderColor {
75 background-color: transparent;91 background-color: transparent;
76 border-left: 5px solid var(--qr--color);92 border-left: 5px solid var(--qr--color);
77 border-right: 5px solid var(--qr--color);93 border-right: 5px solid var(--qr--color);
78 }94 }
95
79 &:has(.qr--buttons.qr--color) {96 &:has(.qr--buttons.qr--color) {
80 margin: 5px;97 margin: 5px;
81 }98 }
99
82 margin: 0;100 margin: 0;
83 padding: 0;101 padding: 0;
84 display: flex;102 display: flex;
@@ -89,6 +107,7 @@
89107
90 >.qr--buttons {108 >.qr--buttons {
91 display: contents;109 display: contents;
110
92 &.qr--color {111 &.qr--color {
93 .qr--button:before {112 .qr--button:before {
94 content: '';113 content: '';
@@ -97,11 +116,14 @@
97 inset: -5px;116 inset: -5px;
98 z-index: -1;117 z-index: -1;
99 }118 }
119
100 &.qr--borderColor {120 &.qr--borderColor {
101 .qr--button:before {121 .qr--button:before {
102 display: none;122 display: none;
103 }123 }
104 &:before, &:after {124
125 &:before,
126 &:after {
105 content: '';127 content: '';
106 width: 5px;128 width: 5px;
107 background-color: var(--qr--color);129 background-color: var(--qr--color);
@@ -132,6 +154,7 @@
132 .qr--hidden {154 .qr--hidden {
133 display: none;155 display: none;
134 }156 }
157
135 .qr--button-icon {158 .qr--button-icon {
136 margin: 0 0.5em;159 margin: 0 0.5em;
137 }160 }
@@ -277,15 +300,19 @@
277 transition: var(--animation-duration);300 transition: var(--animation-duration);
278 margin: -2px 0 -11px 0;301 margin: -2px 0 -11px 0;
279 position: relative;302 position: relative;
303
280 .qr--actions {304 .qr--actions {
281 display: flex;305 display: flex;
282 gap: 0.25em;306 gap: 0.25em;
283 flex: 0 0 auto;307 flex: 0 0 auto;
308
284 .qr--action {309 .qr--action {
285 margin: 0;310 margin: 0;
286 }311 }
287 }312 }
288 &:before, &:after {313
314 &:before,
315 &:after {
289 content: "";316 content: "";
290 display: block;317 display: block;
291 flex: 1 1 auto;318 flex: 1 1 auto;
@@ -293,10 +320,13 @@
293 margin: 0 1em;320 margin: 0 1em;
294 height: 0;321 height: 0;
295 }322 }
296 &:hover, &:focus-within {323
324 &:hover,
325 &:focus-within {
297 opacity: 1;326 opacity: 1;
298 }327 }
299 }328 }
329
300 >.qr--set-item .qr--content {330 >.qr--set-item .qr--content {
301 display: flex;331 display: flex;
302 flex-direction: row;332 flex-direction: row;
@@ -336,9 +366,11 @@
336 display: flex;366 display: flex;
337 align-items: center;367 align-items: center;
338 gap: 0.5em;368 gap: 0.5em;
369
339 .qr--set-itemIcon:not(.fa-solid) {370 .qr--set-itemIcon:not(.fa-solid) {
340 display: none;371 display: none;
341 }372 }
373
342 .qr--set-itemLabel {374 .qr--set-itemLabel {
343 min-width: 24px;375 min-width: 24px;
344 }376 }
@@ -384,15 +416,16 @@
384 align-items: baseline;416 align-items: baseline;
385 }417 }
386 }418 }
387 >#qr--autoExec {
388 .checkbox_label {
389 text-wrap: nowrap;
390419
391 .fa-fw {420 >#qr--autoExec {
392 margin-right: 2px;421 .checkbox_label {
393 }422 text-wrap: nowrap;
423
424 .fa-fw {
425 margin-right: 2px;
394 }426 }
395 }427 }
428 }
396}429}
397430
398431
@@ -433,65 +466,75 @@
433 bottom: unset;466 bottom: unset;
434 margin: unset;467 margin: unset;
435 padding: 0;468 padding: 0;
469
436 &::backdrop {470 &::backdrop {
437 backdrop-filter: unset;471 backdrop-filter: unset;
438 background-color: transparent;472 background-color: transparent;
439 }473 }
474
440 .popup-body {475 .popup-body {
441 flex: 0 0 auto;476 flex: 0 0 auto;
442 height: min-content;477 height: min-content;
443 width: min-content;478 width: min-content;
444 }479 }
480
445 .popup-content {481 .popup-content {
446 flex: 0 0 auto;482 flex: 0 0 auto;
447 margin-top: 0;483 margin-top: 0;
448484
449 > #qr--modalEditor {485 >#qr--modalEditor {
450 max-height: 50vh;486 max-height: 50vh;
451 > #qr--main,487
452 > #qr--resizeHandle,488 >#qr--main,
453 > #qr--qrOptions > h3,489 >#qr--resizeHandle,
454 > #qr--qrOptions > #qr--modal-executeButtons,490 >#qr--qrOptions>h3,
455 > #qr--qrOptions > #qr--modal-executeProgress491 >#qr--qrOptions>#qr--modal-executeButtons,
456 {492 >#qr--qrOptions>#qr--modal-executeProgress {
457 display: none;493 display: none;
458 }494 }
495
459 #qr--qrOptions {496 #qr--qrOptions {
460 width: auto;497 width: auto;
461 }498 }
499
462 #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {500 #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
463 display: flex;501 display: flex;
464 }502 }
503
465 #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-minimize {504 #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-minimize {
466 display: none;505 display: none;
467 }506 }
507
468 #qr--modal-debugState {508 #qr--modal-debugState {
469 padding-top: 0;509 padding-top: 0;
470 }510 }
471 }511 }
472 }512 }
473 }513 }
474 &:has(.qr--isExecuting) {514
475 .popup-controls {515 &:has(.qr--isExecuting) {
476 display: none;516 .popup-controls {
477 }517 display: none;
478518 }
479 .qr--highlight {519
480 position: absolute;520 .qr--highlight {
481 z-index: 50000;521 position: absolute;
482 pointer-events: none;522 z-index: 50000;
483 background-color: rgb(47 150 180 / 0.5);523 pointer-events: none;
484 &.qr--unresolved {524 background-color: rgb(47 150 180 / 0.5);
485 background-color: rgb(255 255 0 / 0.5);525
486 }526 &.qr--unresolved {
487 }527 background-color: rgb(255 255 0 / 0.5);
488 .qr--highlight-secondary {528 }
489 position: absolute;529 }
490 z-index: 50000;530
491 pointer-events: none;531 .qr--highlight-secondary {
492 border: 3px solid red;532 position: absolute;
493 }533 z-index: 50000;
494 }534 pointer-events: none;
535 border: 3px solid red;
536 }
537 }
495538
496 .popup-content {539 .popup-content {
497 display: flex;540 display: flex;
@@ -504,23 +547,26 @@
504 gap: 1em;547 gap: 1em;
505 overflow: hidden;548 overflow: hidden;
506549
507 &.qr--isExecuting {550 &.qr--isExecuting {
508 #qr--main > h3:first-child,551
509 #qr--main > .qr--labels,552 #qr--main>h3:first-child,
510 #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings,553 #qr--main>.qr--labels,
511 #qr--qrOptions > h3:first-child,554 #qr--main>.qr--modal-messageContainer>.qr--modal-editorSettings,
512 #qr--qrOptions > #qr--ctxEditor,555 #qr--qrOptions>h3:first-child,
513 #qr--qrOptions > .qr--ctxEditorActions,556 #qr--qrOptions>#qr--ctxEditor,
514 #qr--qrOptions > .qr--ctxEditorActions + h3,557 #qr--qrOptions>.qr--ctxEditorActions,
515 #qr--qrOptions > .qr--ctxEditorActions + h3 + div558 #qr--qrOptions>.qr--ctxEditorActions+h3,
516 {559 #qr--qrOptions>.qr--ctxEditorActions+h3+div {
517 display: none;560 display: none;
518 }561 }
519 #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message {562
520 visibility: hidden;563 #qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder>#qr--modal-message {
521 }564 visibility: hidden;
522 #qr--modal-debugButtons {565 }
523 display: flex;566
567 #qr--modal-debugButtons {
568 display: flex;
569
524 .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {570 .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {
525 cursor: not-allowed;571 cursor: not-allowed;
526 opacity: 0.5;572 opacity: 0.5;
@@ -528,12 +574,14 @@
528 transition: var(--animation-duration-2x);574 transition: var(--animation-duration-2x);
529 border-color: transparent;575 border-color: transparent;
530 }576 }
531 }577 }
578
532 &.qr--isPaused #qr--modal-debugButtons {579 &.qr--isPaused #qr--modal-debugButtons {
533 .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {580 .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {
534 cursor: pointer;581 cursor: pointer;
535 opacity: 1;582 opacity: 1;
536 pointer-events: all;583 pointer-events: all;
584
537 &#qr--modal-resume {585 &#qr--modal-resume {
538 animation-name: qr--debugPulse;586 animation-name: qr--debugPulse;
539 animation-duration: 1500ms;587 animation-duration: 1500ms;
@@ -541,73 +589,90 @@
541 animation-delay: 0s;589 animation-delay: 0s;
542 animation-iteration-count: infinite;590 animation-iteration-count: infinite;
543 }591 }
592
544 &#qr--modal-resume {593 &#qr--modal-resume {
545 border-color: rgb(81, 163, 81);594 border-color: rgb(81, 163, 81);
546 }595 }
596
547 &#qr--modal-step {597 &#qr--modal-step {
548 border-color: var(--SmartThemeQuoteColor);598 border-color: var(--SmartThemeQuoteColor);
549 }599 }
600
550 &#qr--modal-stepInto {601 &#qr--modal-stepInto {
551 border-color: var(--SmartThemeQuoteColor);602 border-color: var(--SmartThemeQuoteColor);
552 }603 }
604
553 &#qr--modal-stepOut {605 &#qr--modal-stepOut {
554 border-color: var(--SmartThemeQuoteColor);606 border-color: var(--SmartThemeQuoteColor);
555 }607 }
556 }608 }
557 }609 }
558 #qr--resizeHandle {610
559 width: 6px;611 #qr--resizeHandle {
560 background-color: var(--SmartThemeBorderColor);612 width: 6px;
561 border: 2px solid var(--SmartThemeBlurTintColor);613 background-color: var(--SmartThemeBorderColor);
562 transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);614 border: 2px solid var(--SmartThemeBlurTintColor);
563 cursor: w-resize;615 transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);
564 &:hover {616 cursor: w-resize;
565 background-color: var(--SmartThemeQuoteColor);617
566 border-color: var(--SmartThemeQuoteColor);618 &:hover {
567 }619 background-color: var(--SmartThemeQuoteColor);
568 }620 border-color: var(--SmartThemeQuoteColor);
569 #qr--qrOptions {621 }
570 width: var(--width, auto);622 }
571 }623
572 }624 #qr--qrOptions {
573625 width: var(--width, auto);
574 > #qr--main {626 }
575 flex: 1 1 auto;627 }
576 display: flex;628
577 flex-direction: column;629 >#qr--main {
578 overflow: hidden;630 flex: 1 1 auto;
579 > .qr--labels {631 display: flex;
580 flex: 0 0 auto;632 flex-direction: column;
581 display: flex;633 overflow: hidden;
582 flex-direction: row;634
583 gap: 0.5em;635 >.qr--labels {
584 padding: 1px;636 flex: 0 0 auto;
585 > label, > .label {637 display: flex;
586 flex: 1 1 1px;638 flex-direction: row;
587 display: flex;639 gap: 0.5em;
588 flex-direction: column;640 padding: 1px;
641
642 >label,
643 >.label {
644 flex: 1 1 1px;
645 display: flex;
646 flex-direction: column;
589 position: relative;647 position: relative;
648
590 &.qr--fit {649 &.qr--fit {
591 flex: 0 0 auto;650 flex: 0 0 auto;
592 justify-content: center;651 justify-content: center;
593 }652 }
653
594 .qr--inputGroup {654 .qr--inputGroup {
595 display: flex;655 display: flex;
596 align-items: baseline;656 align-items: baseline;
597 gap: 0.5em;657 gap: 0.5em;
658
598 input {659 input {
599 flex: 1 1 auto;660 flex: 1 1 auto;
600 }661 }
601 }662 }
602 .qr--labelText {663
603 flex: 1 1 auto;664 .qr--labelText {
604 }665 flex: 1 1 auto;
605 .qr--labelHint {666 }
606 flex: 1 1 auto;667
607 }668 .qr--labelHint {
608 input {669 flex: 1 1 auto;
609 flex: 0 0 auto;670 }
610 }671
672 input {
673 flex: 0 0 auto;
674 }
675
611 .qr--modal-switcherList {676 .qr--modal-switcherList {
612 background-color: var(--stcdx--bgColor);677 background-color: var(--stcdx--bgColor);
613 border: 1px solid var(--SmartThemeBorderColor);678 border: 1px solid var(--SmartThemeBorderColor);
@@ -625,6 +690,7 @@
625 list-style: none;690 list-style: none;
626 z-index: 40000;691 z-index: 40000;
627 max-width: 100%;692 max-width: 100%;
693
628 .qr--modal-switcherItem {694 .qr--modal-switcherItem {
629 display: flex;695 display: flex;
630 gap: 1em;696 gap: 1em;
@@ -632,18 +698,24 @@
632 opacity: 0.75;698 opacity: 0.75;
633 transition: var(--animation-duration-2x);699 transition: var(--animation-duration-2x);
634 cursor: pointer;700 cursor: pointer;
701
635 &:hover {702 &:hover {
636 opacity: 1;703 opacity: 1;
637 }704 }
705
638 &.qr--current {706 &.qr--current {
639 opacity: 1;707 opacity: 1;
640 .qr--label, .qr--id {708
709 .qr--label,
710 .qr--id {
641 font-weight: bold;711 font-weight: bold;
642 }712 }
643 }713 }
644 }714 }
715
645 .qr--label {716 .qr--label {
646 white-space: nowrap;717 white-space: nowrap;
718
647 .menu_button {719 .menu_button {
648 display: inline-block;720 display: inline-block;
649 height: min-content;721 height: min-content;
@@ -651,11 +723,19 @@
651 margin: 0 0.5em 0 0;723 margin: 0 0.5em 0 0;
652 }724 }
653 }725 }
726
654 .qr--id {727 .qr--id {
655 opacity: 0.5;728 opacity: 0.5;
656 &:before { content: "["; }729
657 &:after { content: "]"; }730 &:before {
731 content: "[";
732 }
733
734 &:after {
735 content: "]";
736 }
658 }737 }
738
659 .qr--message {739 .qr--message {
660 height: 1lh;740 height: 1lh;
661 overflow: hidden;741 overflow: hidden;
@@ -664,102 +744,124 @@
664 opacity: 0.5;744 opacity: 0.5;
665 }745 }
666 }746 }
667 }747 }
668 }748 }
669 > .qr--modal-messageContainer {749
670 flex: 1 1 auto;750 >.qr--modal-messageContainer {
671 display: flex;751 flex: 1 1 auto;
672 flex-direction: column;752 display: flex;
673 overflow: hidden;753 flex-direction: column;
674 > .qr--modal-editorSettings {754 overflow: hidden;
675 display: flex;755
756 >.qr--modal-editorSettings {
757 display: flex;
676 flex-wrap: wrap;758 flex-wrap: wrap;
677 flex-direction: row;759 flex-direction: row;
678 column-gap: 1em;760 column-gap: 1em;
679 color: var(--grey70);761 color: var(--grey70);
680 font-size: smaller;762 font-size: smaller;
681 align-items: baseline;763 align-items: baseline;
682 > .checkbox_label {764
683 white-space: nowrap;765 >.checkbox_label {
684 > input {766 white-space: nowrap;
685 font-size: inherit;767
686 }768 >input {
687 }769 font-size: inherit;
688 }770 }
689 > #qr--modal-messageHolder {771 }
690 flex: 1 1 auto;772 }
691 display: grid;773
692 text-align: left;774 >#qr--modal-messageHolder {
693 overflow: hidden;775 flex: 1 1 auto;
694 &.qr--noSyntax {776 display: grid;
695 > #qr--modal-messageSyntax {777 text-align: left;
696 display: none;778 overflow: hidden;
697 }779
698 > #qr--modal-message {780 &.qr--noSyntax {
699 background-color: var(--ac-style-color-background);781 >#qr--modal-messageSyntax {
700 color: var(--ac-style-color-text);782 display: none;
701 &::-webkit-scrollbar, &::-webkit-scrollbar-thumb {783 }
784
785 >#qr--modal-message {
786 background-color: var(--ac-style-color-background);
787 color: var(--ac-style-color-text);
788
789 &::-webkit-scrollbar,
790 &::-webkit-scrollbar-thumb {
702 visibility: visible;791 visibility: visible;
703 cursor: unset;792 cursor: unset;
704 }793 }
705 &::selection {794
706 color: unset;795 &::selection {
707 background-color: rgba(108 171 251 / 0.25);796 color: unset;
708 @supports (color: rgb(from white r g b / 0.25)) {797 background-color: rgba(108 171 251 / 0.25);
709 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);798
710 }799 @supports (color: rgb(from white r g b / 0.25)) {
711 }800 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
712 }801 }
713 }802 }
714 > #qr--modal-messageSyntax {803 }
715 grid-column: 1;804 }
716 grid-row: 1;805
717 padding: 0;806 >#qr--modal-messageSyntax {
718 margin: 0;807 grid-column: 1;
719 border: none;808 grid-row: 1;
720 overflow: hidden;809 padding: 0;
721 min-width: 100%;810 margin: 0;
722 width: 0;811 border: none;
723 > #qr--modal-messageSyntaxInner {812 overflow: hidden;
724 height: 100%;813 min-width: 100%;
725 }814 width: 0;
726 }815
727 > #qr--modal-message {816 >#qr--modal-messageSyntaxInner {
728 background-color: transparent;817 height: 100%;
729 color: transparent;818 }
730 grid-column: 1;819 }
731 grid-row: 1;820
732 caret-color: var(--ac-style-color-text);821 >#qr--modal-message {
733 overflow: auto;822 background-color: transparent;
734 &::-webkit-scrollbar, &::-webkit-scrollbar-thumb {823 color: transparent;
735 visibility: hidden;824 grid-column: 1;
736 cursor: default;825 grid-row: 1;
737 }826 caret-color: var(--ac-style-color-text);
738 &::selection {827 overflow: auto;
739 color: transparent;828
740 background-color: rgba(108 171 251 / 0.25);829 &::-webkit-scrollbar,
741 @supports (color: rgb(from white r g b / 0.25)) {830 &::-webkit-scrollbar-thumb {
742 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);831 visibility: hidden;
743 }832 cursor: default;
744 }833 }
745 }834
746 #qr--modal-message, #qr--modal-messageSyntaxInner {835 &::selection {
747 font-family: var(--monoFontFamily);836 color: transparent;
748 padding: 0.75em;837 background-color: rgba(108 171 251 / 0.25);
749 margin: 0;838
750 resize: none;839 @supports (color: rgb(from white r g b / 0.25)) {
751 line-height: 1.2;840 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
752 border: 1px solid var(--SmartThemeBorderColor);841 }
753 border-radius: 5px;842 }
754 position: relative;843 }
755 }844
756 }845 #qr--modal-message,
757 }846 #qr--modal-messageSyntaxInner {
758 }847 font-family: var(--monoFontFamily);
848 padding: 0.75em;
849 margin: 0;
850 resize: none;
851 line-height: 1.2;
852 border: 1px solid var(--SmartThemeBorderColor);
853 border-radius: 5px;
854 position: relative;
855 }
856 }
857 }
858 }
859
759 #qr--modal-icon {860 #qr--modal-icon {
760 height: 100%;861 height: 100%;
761 aspect-ratio: 1 / 1;862 aspect-ratio: 1 / 1;
762 }863 }
864
763 #qr--modal-executeButtons {865 #qr--modal-executeButtons {
764 display: flex;866 display: flex;
765 gap: 1em;867 gap: 1em;
@@ -819,16 +921,20 @@
819 border-color: rgb(215, 136, 114);921 border-color: rgb(215, 136, 114);
820 }922 }
821 }923 }
822 #qr--modal-debugButtons {924
823 display: none;925 #qr--modal-debugButtons {
824 gap: 1em;926 display: none;
825 .qr--modal-debugButton {927 gap: 1em;
826 aspect-ratio: 1.25 / 1;928
827 width: 2.25em;929 .qr--modal-debugButton {
930 aspect-ratio: 1.25 / 1;
931 width: 2.25em;
828 position: relative;932 position: relative;
933
829 &:not(.fa-solid) {934 &:not(.fa-solid) {
830 border-width: 1px;935 border-width: 1px;
831 border-style: solid;936 border-style: solid;
937
832 &:after {938 &:after {
833 content: '';939 content: '';
834 position: absolute;940 position: absolute;
@@ -839,23 +945,28 @@
839 mask-repeat: no-repeat;945 mask-repeat: no-repeat;
840 }946 }
841 }947 }
948
842 &#qr--modal-resume:after {949 &#qr--modal-resume:after {
843 mask-image: url('/img/step-resume.svg');950 mask-image: url('/img/step-resume.svg');
844 }951 }
952
845 &#qr--modal-step:after {953 &#qr--modal-step:after {
846 mask-image: url('/img/step-over.svg');954 mask-image: url('/img/step-over.svg');
847 }955 }
956
848 &#qr--modal-stepInto:after {957 &#qr--modal-stepInto:after {
849 mask-image: url('/img/step-into.svg');958 mask-image: url('/img/step-into.svg');
850 }959 }
960
851 &#qr--modal-stepOut:after {961 &#qr--modal-stepOut:after {
852 mask-image: url('/img/step-out.svg');962 mask-image: url('/img/step-out.svg');
853 }963 }
964
854 &#qr--modal-maximize {965 &#qr--modal-maximize {
855 display: none;966 display: none;
856 }967 }
857 }968 }
858 }969 }
859970
860 #qr--modal-send_textarea {971 #qr--modal-send_textarea {
861 flex: 0 0 auto;972 flex: 0 0 auto;
@@ -939,135 +1050,180 @@
939 overflow: auto;1050 overflow: auto;
940 min-width: 100%;1051 min-width: 100%;
941 width: 0;1052 width: 0;
942 white-space: pre-wrap;1053 white-space: pre-wrap;
943 }1054 }
944 #qr--modal-debugState {1055
945 display: none;1056 #qr--modal-debugState {
946 &.qr--active {1057 display: none;
947 display: block;1058
948 }1059 &.qr--active {
949 text-align: left;1060 display: block;
950 font-size: smaller;1061 }
951 font-family: var(--monoFontFamily);1062
952 // background-color: rgb(146, 190, 252);1063 text-align: left;
953 color: white;1064 font-size: smaller;
954 padding: 0.5em 0;1065 font-family: var(--monoFontFamily);
955 overflow: auto;1066 // background-color: rgb(146, 190, 252);
956 min-width: 100%;1067 color: white;
957 width: 0;1068 padding: 0.5em 0;
958 white-space: pre-wrap;1069 overflow: auto;
9591070 min-width: 100%;
960 .qr--scope {1071 width: 0;
961 display: grid;1072 white-space: pre-wrap;
962 grid-template-columns: 0fr 1fr 1fr;1073
963 column-gap: 0em;1074 .qr--scope {
964 .qr--title {1075 display: grid;
965 grid-column: 1 / 4;1076 grid-template-columns: 0fr 1fr 1fr;
966 font-weight: bold;1077 column-gap: 0em;
967 font-family: var(--mainFontFamily);1078
968 background-color: var(--black50a);1079 .qr--title {
969 padding: 0.25em;1080 grid-column: 1 / 4;
970 margin-top: 0.5em;1081 font-weight: bold;
971 }1082 font-family: var(--mainFontFamily);
972 .qr--var, .qr--macro, .qr--pipe {1083 background-color: var(--black50a);
973 display: contents;1084 padding: 0.25em;
974 &:nth-child(2n + 1) {1085 margin-top: 0.5em;
975 .qr--key, .qr--val {1086 }
976 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);1087
977 }1088 .qr--var,
978 .qr--val {1089 .qr--macro,
979 &:nth-child(2n) {1090 .qr--pipe {
980 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.125);1091 display: contents;
981 }1092
982 &:hover {1093 &:nth-child(2n + 1) {
983 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);1094
984 }1095 .qr--key,
985 }1096 .qr--val {
986 }1097 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);
987 &:nth-child(2n) {1098 }
988 .qr--val {1099
989 &:nth-child(2n) {1100 .qr--val {
990 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.0625);1101 &:nth-child(2n) {
991 }1102 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.125);
992 &:hover {1103 }
993 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);1104
994 }1105 &:hover {
995 }1106 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);
996 }1107 }
997 &.qr--isHidden {1108 }
998 .qr--key, .qr--val {1109 }
999 opacity: 0.5;1110
1000 }1111 &:nth-child(2n) {
1001 }1112 .qr--val {
1002 .qr--val {1113 &:nth-child(2n) {
1003 grid-column: 2 / 4;1114 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.0625);
1004 &.qr--singleCol {1115 }
1005 grid-column: unset;1116
1006 }1117 &:hover {
1007 &.qr--simple {1118 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);
1008 &:before, &:after {1119 }
1009 content: '"';1120 }
1010 color: var(--SmartThemeQuoteColor);1121 }
1011 }1122
1012 }1123 &.qr--isHidden {
1013 &.qr--unresolved {1124
1014 &:after {1125 .qr--key,
1015 content: '-UNRESOLVED-';1126 .qr--val {
1016 font-style: italic;1127 opacity: 0.5;
1017 color: var(--SmartThemeQuoteColor);1128 }
1018 }1129 }
1019 }1130
1020 }1131 .qr--val {
1021 }1132 grid-column: 2 / 4;
1022 .qr--key {1133
1023 margin-left: 0.5em;1134 &.qr--singleCol {
1024 padding-right: 1em;1135 grid-column: unset;
1025 &:after { content: ": "; }1136 }
1026 }1137
1027 .qr--pipe, .qr--macro {1138 &.qr--simple {
1028 > .qr--key {1139
1029 &:before { content: "{{"; }1140 &:before,
1030 &:after { content: "}}: "; }1141 &:after {
1031 }1142 content: '"';
1032 }1143 color: var(--SmartThemeQuoteColor);
1033 .qr--scope {1144 }
1034 display: contents;1145 }
1035 .qr--pipe {1146
1036 .qr--key, .qr--val {1147 &.qr--unresolved {
1037 opacity: 0.5;1148 &:after {
1038 }1149 content: '-UNRESOLVED-';
1039 }1150 font-style: italic;
1040 }1151 color: var(--SmartThemeQuoteColor);
1041 }1152 }
10421153 }
1043 .qr--stack {1154 }
1155 }
1156
1157 .qr--key {
1158 margin-left: 0.5em;
1159 padding-right: 1em;
1160
1161 &:after {
1162 content: ": ";
1163 }
1164 }
1165
1166 .qr--pipe,
1167 .qr--macro {
1168 >.qr--key {
1169 &:before {
1170 content: "{{";
1171 }
1172
1173 &:after {
1174 content: "}}: ";
1175 }
1176 }
1177 }
1178
1179 .qr--scope {
1180 display: contents;
1181
1182 .qr--pipe {
1183
1184 .qr--key,
1185 .qr--val {
1186 opacity: 0.5;
1187 }
1188 }
1189 }
1190 }
1191
1192 .qr--stack {
1044 display: grid;1193 display: grid;
1045 grid-template-columns: 1fr 0fr;1194 grid-template-columns: 1fr 0fr;
1046 .qr--title {1195
1047 grid-column: 1 / 3;1196 .qr--title {
1048 font-weight: bold;1197 grid-column: 1 / 3;
1049 font-family: var(--mainFontFamily);1198 font-weight: bold;
1050 background-color: var(--black50a);1199 font-family: var(--mainFontFamily);
1051 padding: 0.25em;1200 background-color: var(--black50a);
1052 margin-top: 1em;1201 padding: 0.25em;
1053 }1202 margin-top: 1em;
1054 .qr--item {1203 }
1204
1205 .qr--item {
1055 display: contents;1206 display: contents;
1056 &:nth-child(2n + 1) {1207
1057 .qr--name, .qr--source {1208 &:nth-child(2n + 1) {
1209
1210 .qr--name,
1211 .qr--source {
1058 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);1212 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);
1059 }1213 }
1060 }1214 }
1215
1061 .qr--name {1216 .qr--name {
1062 margin-left: 0.5em;1217 margin-left: 0.5em;
1063 }1218 }
1219
1064 .qr--source {1220 .qr--source {
1065 opacity: 0.5;1221 opacity: 0.5;
1066 text-align: right;1222 text-align: right;
1067 white-space: nowrap;1223 white-space: nowrap;
1068 }1224 }
1069 }1225 }
1070 }1226 }
1071 }1227 }
1072 }1228 }
1073 }1229 }
@@ -1086,6 +1242,7 @@
1086}1242}
10871243
1088@keyframes qr--debugPulse {1244@keyframes qr--debugPulse {
1245
1089 0%,1246 0%,
1090 100% {1247 100% {
1091 border-color: rgb(81, 163, 81);1248 border-color: rgb(81, 163, 81);
@@ -1097,10 +1254,11 @@
1097}1254}
10981255
1099.popup.qr--hide {1256.popup.qr--hide {
1100 opacity: 0 !important;1257 opacity: 0 !important;
1101 &::backdrop {1258
1102 opacity: 0 !important;1259 &::backdrop {
1103 }1260 opacity: 0 !important;
1261 }
1104}1262}
11051263
1106.popup.qr--hide::backdrop {1264.popup.qr--hide::backdrop {
@@ -1110,50 +1268,56 @@
11101268
11111269
1112.popup:has(.qr--transferModal) {1270.popup:has(.qr--transferModal) {
1113 .popup-button-ok {1271 .popup-button-ok {
1114 &:after {1272 &:after {
1115 content: 'Transfer';1273 content: 'Transfer';
1116 height: 0;1274 height: 0;
1117 overflow: hidden;1275 overflow: hidden;
1118 font-weight: bold;1276 font-weight: bold;
1119 }1277 }
1120 display: flex;1278
1121 align-items: center;1279 display: flex;
1122 flex-direction: column;1280 align-items: center;
1123 white-space: pre;1281 flex-direction: column;
1124 font-weight: normal;1282 white-space: pre;
1125 box-shadow: 0 0 0;1283 font-weight: normal;
1126 transition: var(--animation-duration-2x);1284 box-shadow: 0 0 0;
1127 }1285 transition: var(--animation-duration-2x);
1128 .qr--copy {1286 }
1129 &:after {1287
1130 content: 'Copy';1288 .qr--copy {
1131 height: 0;1289 &:after {
1132 overflow: hidden;1290 content: 'Copy';
1133 font-weight: bold;1291 height: 0;
1134 }1292 overflow: hidden;
1135 display: flex;1293 font-weight: bold;
1136 align-items: center;1294 }
1137 flex-direction: column;1295
1138 white-space: pre;1296 display: flex;
1139 font-weight: normal;1297 align-items: center;
1140 box-shadow: 0 0 0;1298 flex-direction: column;
1141 transition: var(--animation-duration-2x);1299 white-space: pre;
1142 }1300 font-weight: normal;
1143 &:has(.qr--transferSelect:focus) {1301 box-shadow: 0 0 0;
1144 .popup-button-ok {1302 transition: var(--animation-duration-2x);
1145 font-weight: bold;1303 }
1146 box-shadow: 0 0 10px;1304
1147 }1305 &:has(.qr--transferSelect:focus) {
1148 &.qr--isCopy {1306 .popup-button-ok {
1149 .popup-button-ok {1307 font-weight: bold;
1150 font-weight: normal;1308 box-shadow: 0 0 10px;
1151 box-shadow: 0 0 0;1309 }
1152 }1310
1153 .qr--copy {1311 &.qr--isCopy {
1154 font-weight: bold;1312 .popup-button-ok {
1155 box-shadow: 0 0 10px;1313 font-weight: normal;
1156 }1314 box-shadow: 0 0 0;
1157 }1315 }
1158 }1316
1317 .qr--copy {
1318 font-weight: bold;
1319 box-shadow: 0 0 10px;
1320 }
1321 }
1322 }
1159}1323}