Fix mobile QR popout style

90f58bb553032a69e0688dd66fc2b12871d6731a

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

Parents: 9bcbe957af41097cdebf93de9b1310af663ed2c2
2 files changed, +196 -26Showing whitespace changes
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+190 -26
@@ -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,6 +416,7 @@
384 align-items: baseline;416 align-items: baseline;
385 }417 }
386 }418 }
419
387 >#qr--autoExec {420 >#qr--autoExec {
388 .checkbox_label {421 .checkbox_label {
389 text-wrap: nowrap;422 text-wrap: nowrap;
@@ -433,44 +466,52 @@
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;
487
451 >#qr--main,488 >#qr--main,
452 >#qr--resizeHandle,489 >#qr--resizeHandle,
453 >#qr--qrOptions>h3,490 >#qr--qrOptions>h3,
454 >#qr--qrOptions>#qr--modal-executeButtons,491 >#qr--qrOptions>#qr--modal-executeButtons,
455 > #qr--qrOptions > #qr--modal-executeProgress492 >#qr--qrOptions>#qr--modal-executeProgress {
456 {
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 }
514
474 &:has(.qr--isExecuting) {515 &:has(.qr--isExecuting) {
475 .popup-controls {516 .popup-controls {
476 display: none;517 display: none;
@@ -481,10 +522,12 @@
481 z-index: 50000;522 z-index: 50000;
482 pointer-events: none;523 pointer-events: none;
483 background-color: rgb(47 150 180 / 0.5);524 background-color: rgb(47 150 180 / 0.5);
525
484 &.qr--unresolved {526 &.qr--unresolved {
485 background-color: rgb(255 255 0 / 0.5);527 background-color: rgb(255 255 0 / 0.5);
486 }528 }
487 }529 }
530
488 .qr--highlight-secondary {531 .qr--highlight-secondary {
489 position: absolute;532 position: absolute;
490 z-index: 50000;533 z-index: 50000;
@@ -505,6 +548,7 @@
505 overflow: hidden;548 overflow: hidden;
506549
507 &.qr--isExecuting {550 &.qr--isExecuting {
551
508 #qr--main>h3:first-child,552 #qr--main>h3:first-child,
509 #qr--main>.qr--labels,553 #qr--main>.qr--labels,
510 #qr--main>.qr--modal-messageContainer>.qr--modal-editorSettings,554 #qr--main>.qr--modal-messageContainer>.qr--modal-editorSettings,
@@ -512,15 +556,17 @@
512 #qr--qrOptions>#qr--ctxEditor,556 #qr--qrOptions>#qr--ctxEditor,
513 #qr--qrOptions>.qr--ctxEditorActions,557 #qr--qrOptions>.qr--ctxEditorActions,
514 #qr--qrOptions>.qr--ctxEditorActions+h3,558 #qr--qrOptions>.qr--ctxEditorActions+h3,
515 #qr--qrOptions > .qr--ctxEditorActions + h3 + div559 #qr--qrOptions>.qr--ctxEditorActions+h3+div {
516 {
517 display: none;560 display: none;
518 }561 }
562
519 #qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder>#qr--modal-message {563 #qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder>#qr--modal-message {
520 visibility: hidden;564 visibility: hidden;
521 }565 }
566
522 #qr--modal-debugButtons {567 #qr--modal-debugButtons {
523 display: flex;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;
@@ -529,11 +575,13 @@
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,31 +589,38 @@
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 }
610
558 #qr--resizeHandle {611 #qr--resizeHandle {
559 width: 6px;612 width: 6px;
560 background-color: var(--SmartThemeBorderColor);613 background-color: var(--SmartThemeBorderColor);
561 border: 2px solid var(--SmartThemeBlurTintColor);614 border: 2px solid var(--SmartThemeBlurTintColor);
562 transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);615 transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);
563 cursor: w-resize;616 cursor: w-resize;
617
564 &:hover {618 &:hover {
565 background-color: var(--SmartThemeQuoteColor);619 background-color: var(--SmartThemeQuoteColor);
566 border-color: var(--SmartThemeQuoteColor);620 border-color: var(--SmartThemeQuoteColor);
567 }621 }
568 }622 }
623
569 #qr--qrOptions {624 #qr--qrOptions {
570 width: var(--width, auto);625 width: var(--width, auto);
571 }626 }
@@ -576,38 +631,48 @@
576 display: flex;631 display: flex;
577 flex-direction: column;632 flex-direction: column;
578 overflow: hidden;633 overflow: hidden;
634
579 >.qr--labels {635 >.qr--labels {
580 flex: 0 0 auto;636 flex: 0 0 auto;
581 display: flex;637 display: flex;
582 flex-direction: row;638 flex-direction: row;
583 gap: 0.5em;639 gap: 0.5em;
584 padding: 1px;640 padding: 1px;
585 > label, > .label {641
642 >label,
643 >.label {
586 flex: 1 1 1px;644 flex: 1 1 1px;
587 display: flex;645 display: flex;
588 flex-direction: column;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 }
663
602 .qr--labelText {664 .qr--labelText {
603 flex: 1 1 auto;665 flex: 1 1 auto;
604 }666 }
667
605 .qr--labelHint {668 .qr--labelHint {
606 flex: 1 1 auto;669 flex: 1 1 auto;
607 }670 }
671
608 input {672 input {
609 flex: 0 0 auto;673 flex: 0 0 auto;
610 }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: "[";
658 }732 }
733
734 &:after {
735 content: "]";
736 }
737 }
738
659 .qr--message {739 .qr--message {
660 height: 1lh;740 height: 1lh;
661 overflow: hidden;741 overflow: hidden;
@@ -666,11 +746,13 @@
666 }746 }
667 }747 }
668 }748 }
749
669 >.qr--modal-messageContainer {750 >.qr--modal-messageContainer {
670 flex: 1 1 auto;751 flex: 1 1 auto;
671 display: flex;752 display: flex;
672 flex-direction: column;753 flex-direction: column;
673 overflow: hidden;754 overflow: hidden;
755
674 >.qr--modal-editorSettings {756 >.qr--modal-editorSettings {
675 display: flex;757 display: flex;
676 flex-wrap: wrap;758 flex-wrap: wrap;
@@ -679,38 +761,48 @@
679 color: var(--grey70);761 color: var(--grey70);
680 font-size: smaller;762 font-size: smaller;
681 align-items: baseline;763 align-items: baseline;
764
682 >.checkbox_label {765 >.checkbox_label {
683 white-space: nowrap;766 white-space: nowrap;
767
684 >input {768 >input {
685 font-size: inherit;769 font-size: inherit;
686 }770 }
687 }771 }
688 }772 }
773
689 >#qr--modal-messageHolder {774 >#qr--modal-messageHolder {
690 flex: 1 1 auto;775 flex: 1 1 auto;
691 display: grid;776 display: grid;
692 text-align: left;777 text-align: left;
693 overflow: hidden;778 overflow: hidden;
779
694 &.qr--noSyntax {780 &.qr--noSyntax {
695 >#qr--modal-messageSyntax {781 >#qr--modal-messageSyntax {
696 display: none;782 display: none;
697 }783 }
784
698 >#qr--modal-message {785 >#qr--modal-message {
699 background-color: var(--ac-style-color-background);786 background-color: var(--ac-style-color-background);
700 color: var(--ac-style-color-text);787 color: var(--ac-style-color-text);
701 &::-webkit-scrollbar, &::-webkit-scrollbar-thumb {788
789 &::-webkit-scrollbar,
790 &::-webkit-scrollbar-thumb {
702 visibility: visible;791 visibility: visible;
703 cursor: unset;792 cursor: unset;
704 }793 }
794
705 &::selection {795 &::selection {
706 color: unset;796 color: unset;
707 background-color: rgba(108 171 251 / 0.25);797 background-color: rgba(108 171 251 / 0.25);
798
708 @supports (color: rgb(from white r g b / 0.25)) {799 @supports (color: rgb(from white r g b / 0.25)) {
709 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);800 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
710 }801 }
711 }802 }
712 }803 }
713 }804 }
805
714 >#qr--modal-messageSyntax {806 >#qr--modal-messageSyntax {
715 grid-column: 1;807 grid-column: 1;
716 grid-row: 1;808 grid-row: 1;
@@ -720,10 +812,12 @@
720 overflow: hidden;812 overflow: hidden;
721 min-width: 100%;813 min-width: 100%;
722 width: 0;814 width: 0;
815
723 >#qr--modal-messageSyntaxInner {816 >#qr--modal-messageSyntaxInner {
724 height: 100%;817 height: 100%;
725 }818 }
726 }819 }
820
727 >#qr--modal-message {821 >#qr--modal-message {
728 background-color: transparent;822 background-color: transparent;
729 color: transparent;823 color: transparent;
@@ -731,19 +825,25 @@
731 grid-row: 1;825 grid-row: 1;
732 caret-color: var(--ac-style-color-text);826 caret-color: var(--ac-style-color-text);
733 overflow: auto;827 overflow: auto;
734 &::-webkit-scrollbar, &::-webkit-scrollbar-thumb {828
829 &::-webkit-scrollbar,
830 &::-webkit-scrollbar-thumb {
735 visibility: hidden;831 visibility: hidden;
736 cursor: default;832 cursor: default;
737 }833 }
834
738 &::selection {835 &::selection {
739 color: transparent;836 color: transparent;
740 background-color: rgba(108 171 251 / 0.25);837 background-color: rgba(108 171 251 / 0.25);
838
741 @supports (color: rgb(from white r g b / 0.25)) {839 @supports (color: rgb(from white r g b / 0.25)) {
742 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);840 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
743 }841 }
744 }842 }
745 }843 }
746 #qr--modal-message, #qr--modal-messageSyntaxInner {844
845 #qr--modal-message,
846 #qr--modal-messageSyntaxInner {
747 font-family: var(--monoFontFamily);847 font-family: var(--monoFontFamily);
748 padding: 0.75em;848 padding: 0.75em;
749 margin: 0;849 margin: 0;
@@ -756,10 +856,12 @@
756 }856 }
757 }857 }
758 }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 }
924
822 #qr--modal-debugButtons {925 #qr--modal-debugButtons {
823 display: none;926 display: none;
824 gap: 1em;927 gap: 1em;
928
825 .qr--modal-debugButton {929 .qr--modal-debugButton {
826 aspect-ratio: 1.25 / 1;930 aspect-ratio: 1.25 / 1;
827 width: 2.25em;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,18 +945,23 @@
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 }
@@ -941,11 +1052,14 @@
941 width: 0;1052 width: 0;
942 white-space: pre-wrap;1053 white-space: pre-wrap;
943 }1054 }
1055
944 #qr--modal-debugState {1056 #qr--modal-debugState {
945 display: none;1057 display: none;
1058
946 &.qr--active {1059 &.qr--active {
947 display: block;1060 display: block;
948 }1061 }
1062
949 text-align: left;1063 text-align: left;
950 font-size: smaller;1064 font-size: smaller;
951 font-family: var(--monoFontFamily);1065 font-family: var(--monoFontFamily);
@@ -961,6 +1075,7 @@
961 display: grid;1075 display: grid;
962 grid-template-columns: 0fr 1fr 1fr;1076 grid-template-columns: 0fr 1fr 1fr;
963 column-gap: 0em;1077 column-gap: 0em;
1078
964 .qr--title {1079 .qr--title {
965 grid-column: 1 / 4;1080 grid-column: 1 / 4;
966 font-weight: bold;1081 font-weight: bold;
@@ -969,47 +1084,66 @@
969 padding: 0.25em;1084 padding: 0.25em;
970 margin-top: 0.5em;1085 margin-top: 0.5em;
971 }1086 }
972 .qr--var, .qr--macro, .qr--pipe {1087
1088 .qr--var,
1089 .qr--macro,
1090 .qr--pipe {
973 display: contents;1091 display: contents;
1092
974 &:nth-child(2n + 1) {1093 &:nth-child(2n + 1) {
975 .qr--key, .qr--val {1094
1095 .qr--key,
1096 .qr--val {
976 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);1097 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);
977 }1098 }
1099
978 .qr--val {1100 .qr--val {
979 &:nth-child(2n) {1101 &:nth-child(2n) {
980 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.125);1102 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.125);
981 }1103 }
1104
982 &:hover {1105 &:hover {
983 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);1106 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);
984 }1107 }
985 }1108 }
986 }1109 }
1110
987 &:nth-child(2n) {1111 &:nth-child(2n) {
988 .qr--val {1112 .qr--val {
989 &:nth-child(2n) {1113 &:nth-child(2n) {
990 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.0625);1114 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.0625);
991 }1115 }
1116
992 &:hover {1117 &:hover {
993 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);1118 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);
994 }1119 }
995 }1120 }
996 }1121 }
1122
997 &.qr--isHidden {1123 &.qr--isHidden {
998 .qr--key, .qr--val {1124
1125 .qr--key,
1126 .qr--val {
999 opacity: 0.5;1127 opacity: 0.5;
1000 }1128 }
1001 }1129 }
1130
1002 .qr--val {1131 .qr--val {
1003 grid-column: 2 / 4;1132 grid-column: 2 / 4;
1133
1004 &.qr--singleCol {1134 &.qr--singleCol {
1005 grid-column: unset;1135 grid-column: unset;
1006 }1136 }
1137
1007 &.qr--simple {1138 &.qr--simple {
1008 &:before, &:after {1139
1140 &:before,
1141 &:after {
1009 content: '"';1142 content: '"';
1010 color: var(--SmartThemeQuoteColor);1143 color: var(--SmartThemeQuoteColor);
1011 }1144 }
1012 }1145 }
1146
1013 &.qr--unresolved {1147 &.qr--unresolved {
1014 &:after {1148 &:after {
1015 content: '-UNRESOLVED-';1149 content: '-UNRESOLVED-';
@@ -1019,21 +1153,36 @@
1019 }1153 }
1020 }1154 }
1021 }1155 }
1156
1022 .qr--key {1157 .qr--key {
1023 margin-left: 0.5em;1158 margin-left: 0.5em;
1024 padding-right: 1em;1159 padding-right: 1em;
1025 &:after { content: ": "; }1160
1161 &:after {
1162 content: ": ";
1026 }1163 }
1027 .qr--pipe, .qr--macro {1164 }
1165
1166 .qr--pipe,
1167 .qr--macro {
1028 >.qr--key {1168 >.qr--key {
1029 &:before { content: "{{"; }1169 &:before {
1030 &:after { content: "}}: "; }1170 content: "{{";
1171 }
1172
1173 &:after {
1174 content: "}}: ";
1175 }
1031 }1176 }
1032 }1177 }
1178
1033 .qr--scope {1179 .qr--scope {
1034 display: contents;1180 display: contents;
1181
1035 .qr--pipe {1182 .qr--pipe {
1036 .qr--key, .qr--val {1183
1184 .qr--key,
1185 .qr--val {
1037 opacity: 0.5;1186 opacity: 0.5;
1038 }1187 }
1039 }1188 }
@@ -1043,6 +1192,7 @@
1043 .qr--stack {1192 .qr--stack {
1044 display: grid;1193 display: grid;
1045 grid-template-columns: 1fr 0fr;1194 grid-template-columns: 1fr 0fr;
1195
1046 .qr--title {1196 .qr--title {
1047 grid-column: 1 / 3;1197 grid-column: 1 / 3;
1048 font-weight: bold;1198 font-weight: bold;
@@ -1051,16 +1201,22 @@
1051 padding: 0.25em;1201 padding: 0.25em;
1052 margin-top: 1em;1202 margin-top: 1em;
1053 }1203 }
1204
1054 .qr--item {1205 .qr--item {
1055 display: contents;1206 display: contents;
1207
1056 &:nth-child(2n + 1) {1208 &:nth-child(2n + 1) {
1057 .qr--name, .qr--source {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;
@@ -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);
@@ -1098,6 +1255,7 @@
10981255
1099.popup.qr--hide {1256.popup.qr--hide {
1100 opacity: 0 !important;1257 opacity: 0 !important;
1258
1101 &::backdrop {1259 &::backdrop {
1102 opacity: 0 !important;1260 opacity: 0 !important;
1103 }1261 }
@@ -1117,6 +1275,7 @@
1117 overflow: hidden;1275 overflow: hidden;
1118 font-weight: bold;1276 font-weight: bold;
1119 }1277 }
1278
1120 display: flex;1279 display: flex;
1121 align-items: center;1280 align-items: center;
1122 flex-direction: column;1281 flex-direction: column;
@@ -1125,6 +1284,7 @@
1125 box-shadow: 0 0 0;1284 box-shadow: 0 0 0;
1126 transition: var(--animation-duration-2x);1285 transition: var(--animation-duration-2x);
1127 }1286 }
1287
1128 .qr--copy {1288 .qr--copy {
1129 &:after {1289 &:after {
1130 content: 'Copy';1290 content: 'Copy';
@@ -1132,6 +1292,7 @@
1132 overflow: hidden;1292 overflow: hidden;
1133 font-weight: bold;1293 font-weight: bold;
1134 }1294 }
1295
1135 display: flex;1296 display: flex;
1136 align-items: center;1297 align-items: center;
1137 flex-direction: column;1298 flex-direction: column;
@@ -1140,16 +1301,19 @@
1140 box-shadow: 0 0 0;1301 box-shadow: 0 0 0;
1141 transition: var(--animation-duration-2x);1302 transition: var(--animation-duration-2x);
1142 }1303 }
1304
1143 &:has(.qr--transferSelect:focus) {1305 &:has(.qr--transferSelect:focus) {
1144 .popup-button-ok {1306 .popup-button-ok {
1145 font-weight: bold;1307 font-weight: bold;
1146 box-shadow: 0 0 10px;1308 box-shadow: 0 0 10px;
1147 }1309 }
1310
1148 &.qr--isCopy {1311 &.qr--isCopy {
1149 .popup-button-ok {1312 .popup-button-ok {
1150 font-weight: normal;1313 font-weight: normal;
1151 box-shadow: 0 0 0;1314 box-shadow: 0 0 0;
1152 }1315 }
1316
1153 .qr--copy {1317 .qr--copy {
1154 font-weight: bold;1318 font-weight: bold;
1155 box-shadow: 0 0 10px;1319 box-shadow: 0 0 10px;