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 @@
3434 right: 0.25em;
3535 top: 0;
3636}
37+/*hide QR popout for mobile*/
38+@media screen and (max-width: 1000px) {
39+ #qr--bar > #qr--popoutTrigger {
40+ display: none;
41+ }
42+}
3743#qr--bar.popoutVisible {
3844 padding-right: 2.5em;
3945}
public/scripts/extensions/quick-reply/style.less+526 -362
@@ -1,11 +1,16 @@
11@keyframes qr--success {
2- 0%, 100% {
2+
3+ 0%,
4+ 100% {
35 color: var(--SmartThemeBodyColor);
46 }
5- 25%, 75% {
7+
8+ 25%,
9+ 75% {
610 color: rgb(81, 163, 81);
711 }
812}
13+
914&.qr--success {
1015 animation-name: qr--success;
1116 animation-duration: 3s;
@@ -13,6 +18,7 @@
1318 animation-delay: 0s;
1419 animation-iteration-count: 1;
1520}
21+
1622#qr--bar {
1723 outline: none;
1824 margin: 0;
@@ -33,6 +39,14 @@
3339 top: 0;
3440 }
3541}
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+
3650#qr--bar.popoutVisible {
3751 padding-right: 2.5em;
3852}
@@ -68,17 +82,21 @@
6882#qr--popout>.qr--body {
6983 >.qr--buttons {
7084 --qr--color: transparent;
85+
7186 &.qr--color {
7287 background-color: var(--qr--color);
7388 }
89+
7490 &.qr--borderColor {
7591 background-color: transparent;
7692 border-left: 5px solid var(--qr--color);
7793 border-right: 5px solid var(--qr--color);
7894 }
95+
7996 &:has(.qr--buttons.qr--color) {
8097 margin: 5px;
8198 }
99+
82100 margin: 0;
83101 padding: 0;
84102 display: flex;
@@ -89,6 +107,7 @@
89107
90108 >.qr--buttons {
91109 display: contents;
110+
92111 &.qr--color {
93112 .qr--button:before {
94113 content: '';
@@ -97,11 +116,14 @@
97116 inset: -5px;
98117 z-index: -1;
99118 }
119+
100120 &.qr--borderColor {
101121 .qr--button:before {
102122 display: none;
103123 }
104- &:before, &:after {
124+
125+ &:before,
126+ &:after {
105127 content: '';
106128 width: 5px;
107129 background-color: var(--qr--color);
@@ -132,6 +154,7 @@
132154 .qr--hidden {
133155 display: none;
134156 }
157+
135158 .qr--button-icon {
136159 margin: 0 0.5em;
137160 }
@@ -277,15 +300,19 @@
277300 transition: var(--animation-duration);
278301 margin: -2px 0 -11px 0;
279302 position: relative;
303+
280304 .qr--actions {
281305 display: flex;
282306 gap: 0.25em;
283307 flex: 0 0 auto;
308+
284309 .qr--action {
285310 margin: 0;
286311 }
287312 }
288- &:before, &:after {
313+
314+ &:before,
315+ &:after {
289316 content: "";
290317 display: block;
291318 flex: 1 1 auto;
@@ -293,10 +320,13 @@
293320 margin: 0 1em;
294321 height: 0;
295322 }
296- &:hover, &:focus-within {
323+
324+ &:hover,
325+ &:focus-within {
297326 opacity: 1;
298327 }
299328 }
329+
300330 >.qr--set-item .qr--content {
301331 display: flex;
302332 flex-direction: row;
@@ -336,9 +366,11 @@
336366 display: flex;
337367 align-items: center;
338368 gap: 0.5em;
369+
339370 .qr--set-itemIcon:not(.fa-solid) {
340371 display: none;
341372 }
373+
342374 .qr--set-itemLabel {
343375 min-width: 24px;
344376 }
@@ -384,15 +416,16 @@
384416 align-items: baseline;
385417 }
386418 }
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;
394426 }
395427 }
428+ }
396429}
397430
398431
@@ -433,65 +466,75 @@
433466 bottom: unset;
434467 margin: unset;
435468 padding: 0;
469+
436470 &::backdrop {
437471 backdrop-filter: unset;
438472 background-color: transparent;
439473 }
474+
440475 .popup-body {
441476 flex: 0 0 auto;
442477 height: min-content;
443478 width: min-content;
444479 }
480+
445481 .popup-content {
446482 flex: 0 0 auto;
447483 margin-top: 0;
448484
449485 > #qr--modalEditor {
450486 max-height: 50vh;
451- > #qr--main,
487+
452488 > #qr--resizeHandlemain,
453489 > #qr--qrOptions > h3resizeHandle,
454490 > #qr--qrOptions > #qr--modal-executeButtonsh3,
455491 > #qr--qrOptions > #qr--modal-executeProgressexecuteButtons,
456- {
492+ >#qr--qrOptions>#qr--modal-executeProgress {
457493 display: none;
458494 }
495+
459496 #qr--qrOptions {
460497 width: auto;
461498 }
499+
462500 #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
463501 display: flex;
464502 }
503+
465504 #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-minimize {
466505 display: none;
467506 }
507+
468508 #qr--modal-debugState {
469509 padding-top: 0;
470510 }
471511 }
472512 }
473513 }
474- &:has(.qr--isExecuting) {
514+
475- .popup-controls {
515+ &:has(.qr--isExecuting) {
476- display: none;
516+ .popup-controls {
477- }
517+ display: none;
478-
518+ }
479- .qr--highlight {
519+
480- position: absolute;
520+ .qr--highlight {
481- z-index: 50000;
521+ position: absolute;
482522 pointer z-eventsindex: none50000;
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
496539 .popup-content {
497540 display: flex;
@@ -504,23 +547,26 @@
504547 gap: 1em;
505548 overflow: hidden;
506549
507550 &.qr--isExecuting {
508- #qr--main > h3:first-child,
551+
509552 #qr--main > .qr-h3:first-labelschild,
510553 #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettingslabels,
511- #qr--qrOptions > h3:first-child,
554+ #qr--main>.qr--modal-messageContainer>.qr--modal-editorSettings,
512555 #qr--qrOptions > #qr-h3:first-ctxEditorchild,
513556 #qr--qrOptions > .#qr--ctxEditorActionsctxEditor,
514557 #qr--qrOptions > .qr--ctxEditorActions + h3,
515558 #qr--qrOptions > .qr--ctxEditorActions + h3 + div,
516- {
559+ #qr--qrOptions>.qr--ctxEditorActions+h3+div {
517560 display: none;
518561 }
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+
524570 .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {
525571 cursor: not-allowed;
526572 opacity: 0.5;
@@ -528,12 +574,14 @@
528574 transition: var(--animation-duration-2x);
529575 border-color: transparent;
530576 }
531577 }
578+
532579 &.qr--isPaused #qr--modal-debugButtons {
533580 .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {
534581 cursor: pointer;
535582 opacity: 1;
536583 pointer-events: all;
584+
537585 &#qr--modal-resume {
538586 animation-name: qr--debugPulse;
539587 animation-duration: 1500ms;
@@ -541,73 +589,90 @@
541589 animation-delay: 0s;
542590 animation-iteration-count: infinite;
543591 }
592+
544593 &#qr--modal-resume {
545594 border-color: rgb(81, 163, 81);
546595 }
596+
547597 &#qr--modal-step {
548598 border-color: var(--SmartThemeQuoteColor);
549599 }
600+
550601 &#qr--modal-stepInto {
551602 border-color: var(--SmartThemeQuoteColor);
552603 }
604+
553605 &#qr--modal-stepOut {
554606 border-color: var(--SmartThemeQuoteColor);
555607 }
556608 }
557609 }
558- #qr--resizeHandle {
610+
559- width: 6px;
611+ #qr--resizeHandle {
560- background-color: var(--SmartThemeBorderColor);
612+ width: 6px;
561613 border background-color: 2px solid var(--SmartThemeBlurTintColorSmartThemeBorderColor);
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 {
573-
625+ 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;
581633 display overflow: flexhidden;
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;
589647 position: relative;
648+
590649 &.qr--fit {
591650 flex: 0 0 auto;
592651 justify-content: center;
593652 }
653+
594654 .qr--inputGroup {
595655 display: flex;
596656 align-items: baseline;
597657 gap: 0.5em;
658+
598659 input {
599660 flex: 1 1 auto;
600661 }
601662 }
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+
611676 .qr--modal-switcherList {
612677 background-color: var(--stcdx--bgColor);
613678 border: 1px solid var(--SmartThemeBorderColor);
@@ -625,6 +690,7 @@
625690 list-style: none;
626691 z-index: 40000;
627692 max-width: 100%;
693+
628694 .qr--modal-switcherItem {
629695 display: flex;
630696 gap: 1em;
@@ -632,18 +698,24 @@
632698 opacity: 0.75;
633699 transition: var(--animation-duration-2x);
634700 cursor: pointer;
701+
635702 &:hover {
636703 opacity: 1;
637704 }
705+
638706 &.qr--current {
639707 opacity: 1;
640- .qr--label, .qr--id {
708+
709+ .qr--label,
710+ .qr--id {
641711 font-weight: bold;
642712 }
643713 }
644714 }
715+
645716 .qr--label {
646717 white-space: nowrap;
718+
647719 .menu_button {
648720 display: inline-block;
649721 height: min-content;
@@ -651,11 +723,19 @@
651723 margin: 0 0.5em 0 0;
652724 }
653725 }
726+
654727 .qr--id {
655728 opacity: 0.5;
656- &:before { content: "["; }
729+
657- &:after { content: "]"; }
730+ &:before {
731+ content: "[";
732+ }
733+
734+ &:after {
735+ content: "]";
736+ }
658737 }
738+
659739 .qr--message {
660740 height: 1lh;
661741 overflow: hidden;
@@ -664,102 +744,124 @@
664744 opacity: 0.5;
665745 }
666746 }
667747 }
668748 }
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;
676758 flex-wrap: wrap;
677759 flex-direction: row;
678760 column-gap: 1em;
679761 color: var(--grey70);
680762 font-size: smaller;
681763 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;
688770 }
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;
696778 display overflow: nonehidden;
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 {
702791 visibility: visible;
703792 cursor: unset;
704793 }
705- &::selection {
794+
706- color: unset;
795+ &::selection {
707- background-color: rgba(108 171 251 / 0.25);
796+ color: unset;
708797 @supports ( background-color: rgbrgba(from white r108 g171 b251 / 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);
712801 }
713802 }
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;
720809 overflow padding: hidden0;
721- min-width: 100%;
810+ margin: 0;
722811 width border: 0none;
723- > #qr--modal-messageSyntaxInner {
812+ overflow: hidden;
724813 height min-width: 100%;
725- }
814+ width: 0;
726- }
815+
727816 > #qr--modal-messagemessageSyntaxInner {
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;
744833 }
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+
759860 #qr--modal-icon {
760861 height: 100%;
761862 aspect-ratio: 1 / 1;
762863 }
864+
763865 #qr--modal-executeButtons {
764866 display: flex;
765867 gap: 1em;
@@ -819,16 +921,20 @@
819921 border-color: rgb(215, 136, 114);
820922 }
821923 }
822- #qr--modal-debugButtons {
924+
823- display: none;
925+ #qr--modal-debugButtons {
824926 gap display: 1emnone;
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;
828932 position: relative;
933+
829934 &:not(.fa-solid) {
830935 border-width: 1px;
831936 border-style: solid;
937+
832938 &:after {
833939 content: '';
834940 position: absolute;
@@ -839,23 +945,28 @@
839945 mask-repeat: no-repeat;
840946 }
841947 }
948+
842949 &#qr--modal-resume:after {
843950 mask-image: url('/img/step-resume.svg');
844951 }
952+
845953 &#qr--modal-step:after {
846954 mask-image: url('/img/step-over.svg');
847955 }
956+
848957 &#qr--modal-stepInto:after {
849958 mask-image: url('/img/step-into.svg');
850959 }
960+
851961 &#qr--modal-stepOut:after {
852962 mask-image: url('/img/step-out.svg');
853963 }
964+
854965 &#qr--modal-maximize {
855966 display: none;
856967 }
857968 }
858969 }
859970
860971 #qr--modal-send_textarea {
861972 flex: 0 0 auto;
@@ -939,135 +1050,180 @@
9391050 overflow: auto;
9401051 min-width: 100%;
9411052 width: 0;
9421053 white-space: pre-wrap;
9431054 }
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;
9571068 width padding: 0.5em 0;
958- white-space: pre-wrap;
1069+ overflow: auto;
959-
1070+ 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;
9651076 grid-columntemplate-columns: 10fr /1fr 41fr;
9661077 font column-weightgap: bold0em;
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,
9781089 .qr--val {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);
9961107 }
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+ }
10181129 }
1019- }
1130+
1020- }
1131+ .qr--val {
1021- }
1132+ grid-column: 2 / 4;
1022- .qr--key {
1133+
1023- margin-left: 0.5em;
1134+ &.qr--singleCol {
10241135 padding grid-rightcolumn: 1emunset;
1025- &:after { content: ": "; }
1136+ }
1026- }
1137+
10271138 .qr--pipe, &.qr--macrosimple {
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+
10361147 .qr--key, &.qr--valunresolved {
1037- opacity: 0.5;
1148+ &:after {
1038- }
1149+ content: '-UNRESOLVED-';
1039- }
1150+ font-style: italic;
1040- }
1151+ color: var(--SmartThemeQuoteColor);
10411152 }
1042-
1153+ }
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 {
10441193 display: grid;
10451194 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;
10501199 background font-colorfamily: var(--black50amainFontFamily);
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 {
10551206 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 {
10581212 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);
10591213 }
10601214 }
1215+
10611216 .qr--name {
10621217 margin-left: 0.5em;
10631218 }
1219+
10641220 .qr--source {
10651221 opacity: 0.5;
10661222 text-align: right;
10671223 white-space: nowrap;
10681224 }
10691225 }
10701226 }
10711227 }
10721228 }
10731229 }
@@ -1086,6 +1242,7 @@
10861242}
10871243
10881244@keyframes qr--debugPulse {
1245+
10891246 0%,
10901247 100% {
10911248 border-color: rgb(81, 163, 81);
@@ -1097,10 +1254,11 @@
10971254}
10981255
10991256.popup.qr--hide {
11001257 opacity: 0 !important;
1101- &::backdrop {
1258+
1102- opacity: 0 !important;
1259+ &::backdrop {
1103- }
1260+ opacity: 0 !important;
1261+ }
11041262}
11051263
11061264.popup.qr--hide::backdrop {
@@ -1110,50 +1268,56 @@
11101268
11111269
11121270.popup:has(.qr--transferModal) {
11131271 .popup-button-ok {
11141272 &:after {
11151273 content: 'Transfer';
11161274 height: 0;
11171275 overflow: hidden;
11181276 font-weight: bold;
11191277 }
1120- display: flex;
1278+
1121- align-items: center;
1279+ display: flex;
11221280 flex align-directionitems: columncenter;
11231281 white flex-spacedirection: precolumn;
11241282 font white-weightspace: normalpre;
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;
11391297 font align-weightitems: normalcenter;
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) {
11481306 & .qrpopup-button-isCopyok {
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+
11531311 &.qr--copyisCopy {
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;
11571315 }
1158- }
1316+
1317+ .qr--copy {
1318+ font-weight: bold;
1319+ box-shadow: 0 0 10px;
1320+ }
1321+ }
1322+ }
11591323}