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 @@
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+190 -26
@@ -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,6 +416,7 @@
384416 align-items: baseline;
385417 }
386418 }
419+
387420 >#qr--autoExec {
388421 .checkbox_label {
389422 text-wrap: nowrap;
@@ -433,44 +466,52 @@
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;
487+
451488 >#qr--main,
452489 >#qr--resizeHandle,
453490 >#qr--qrOptions>h3,
454491 >#qr--qrOptions>#qr--modal-executeButtons,
455492 > #qr--qrOptions > #qr--modal-executeProgress {
456- {
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 }
514+
474515 &:has(.qr--isExecuting) {
475516 .popup-controls {
476517 display: none;
@@ -481,10 +522,12 @@
481522 z-index: 50000;
482523 pointer-events: none;
483524 background-color: rgb(47 150 180 / 0.5);
525+
484526 &.qr--unresolved {
485527 background-color: rgb(255 255 0 / 0.5);
486528 }
487529 }
530+
488531 .qr--highlight-secondary {
489532 position: absolute;
490533 z-index: 50000;
@@ -505,6 +548,7 @@
505548 overflow: hidden;
506549
507550 &.qr--isExecuting {
551+
508552 #qr--main>h3:first-child,
509553 #qr--main>.qr--labels,
510554 #qr--main>.qr--modal-messageContainer>.qr--modal-editorSettings,
@@ -512,15 +556,17 @@
512556 #qr--qrOptions>#qr--ctxEditor,
513557 #qr--qrOptions>.qr--ctxEditorActions,
514558 #qr--qrOptions>.qr--ctxEditorActions+h3,
515559 #qr--qrOptions > .qr--ctxEditorActions + h3 + div {
516- {
517560 display: none;
518561 }
562+
519563 #qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder>#qr--modal-message {
520564 visibility: hidden;
521565 }
566+
522567 #qr--modal-debugButtons {
523568 display: flex;
569+
524570 .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) {
525571 cursor: not-allowed;
526572 opacity: 0.5;
@@ -529,11 +575,13 @@
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,31 +589,38 @@
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 }
610+
558611 #qr--resizeHandle {
559612 width: 6px;
560613 background-color: var(--SmartThemeBorderColor);
561614 border: 2px solid var(--SmartThemeBlurTintColor);
562615 transition: border-color var(--animation-duration-2x), background-color var(--animation-duration-2x);
563616 cursor: w-resize;
617+
564618 &:hover {
565619 background-color: var(--SmartThemeQuoteColor);
566620 border-color: var(--SmartThemeQuoteColor);
567621 }
568622 }
623+
569624 #qr--qrOptions {
570625 width: var(--width, auto);
571626 }
@@ -576,38 +631,48 @@
576631 display: flex;
577632 flex-direction: column;
578633 overflow: hidden;
634+
579635 >.qr--labels {
580636 flex: 0 0 auto;
581637 display: flex;
582638 flex-direction: row;
583639 gap: 0.5em;
584640 padding: 1px;
585- > label, > .label {
641+
642+ >label,
643+ >.label {
586644 flex: 1 1 1px;
587645 display: flex;
588646 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 }
663+
602664 .qr--labelText {
603665 flex: 1 1 auto;
604666 }
667+
605668 .qr--labelHint {
606669 flex: 1 1 auto;
607670 }
671+
608672 input {
609673 flex: 0 0 auto;
610674 }
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: "[";
658732 }
733+
734+ &:after {
735+ content: "]";
736+ }
737+ }
738+
659739 .qr--message {
660740 height: 1lh;
661741 overflow: hidden;
@@ -666,11 +746,13 @@
666746 }
667747 }
668748 }
749+
669750 >.qr--modal-messageContainer {
670751 flex: 1 1 auto;
671752 display: flex;
672753 flex-direction: column;
673754 overflow: hidden;
755+
674756 >.qr--modal-editorSettings {
675757 display: flex;
676758 flex-wrap: wrap;
@@ -679,38 +761,48 @@
679761 color: var(--grey70);
680762 font-size: smaller;
681763 align-items: baseline;
764+
682765 >.checkbox_label {
683766 white-space: nowrap;
767+
684768 >input {
685769 font-size: inherit;
686770 }
687771 }
688772 }
773+
689774 >#qr--modal-messageHolder {
690775 flex: 1 1 auto;
691776 display: grid;
692777 text-align: left;
693778 overflow: hidden;
779+
694780 &.qr--noSyntax {
695781 >#qr--modal-messageSyntax {
696782 display: none;
697783 }
784+
698785 >#qr--modal-message {
699786 background-color: var(--ac-style-color-background);
700787 color: var(--ac-style-color-text);
701- &::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
788+
789+ &::-webkit-scrollbar,
790+ &::-webkit-scrollbar-thumb {
702791 visibility: visible;
703792 cursor: unset;
704793 }
794+
705795 &::selection {
706796 color: unset;
707797 background-color: rgba(108 171 251 / 0.25);
798+
708799 @supports (color: rgb(from white r g b / 0.25)) {
709800 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
710801 }
711802 }
712803 }
713804 }
805+
714806 >#qr--modal-messageSyntax {
715807 grid-column: 1;
716808 grid-row: 1;
@@ -720,10 +812,12 @@
720812 overflow: hidden;
721813 min-width: 100%;
722814 width: 0;
815+
723816 >#qr--modal-messageSyntaxInner {
724817 height: 100%;
725818 }
726819 }
820+
727821 >#qr--modal-message {
728822 background-color: transparent;
729823 color: transparent;
@@ -731,19 +825,25 @@
731825 grid-row: 1;
732826 caret-color: var(--ac-style-color-text);
733827 overflow: auto;
734- &::-webkit-scrollbar, &::-webkit-scrollbar-thumb {
828+
829+ &::-webkit-scrollbar,
830+ &::-webkit-scrollbar-thumb {
735831 visibility: hidden;
736832 cursor: default;
737833 }
834+
738835 &::selection {
739836 color: transparent;
740837 background-color: rgba(108 171 251 / 0.25);
838+
741839 @supports (color: rgb(from white r g b / 0.25)) {
742840 background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25);
743841 }
744842 }
745843 }
746- #qr--modal-message, #qr--modal-messageSyntaxInner {
844+
845+ #qr--modal-message,
846+ #qr--modal-messageSyntaxInner {
747847 font-family: var(--monoFontFamily);
748848 padding: 0.75em;
749849 margin: 0;
@@ -756,10 +856,12 @@
756856 }
757857 }
758858 }
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 }
924+
822925 #qr--modal-debugButtons {
823926 display: none;
824927 gap: 1em;
928+
825929 .qr--modal-debugButton {
826930 aspect-ratio: 1.25 / 1;
827931 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,18 +945,23 @@
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 }
@@ -941,11 +1052,14 @@
9411052 width: 0;
9421053 white-space: pre-wrap;
9431054 }
1055+
9441056 #qr--modal-debugState {
9451057 display: none;
1058+
9461059 &.qr--active {
9471060 display: block;
9481061 }
1062+
9491063 text-align: left;
9501064 font-size: smaller;
9511065 font-family: var(--monoFontFamily);
@@ -961,6 +1075,7 @@
9611075 display: grid;
9621076 grid-template-columns: 0fr 1fr 1fr;
9631077 column-gap: 0em;
1078+
9641079 .qr--title {
9651080 grid-column: 1 / 4;
9661081 font-weight: bold;
@@ -969,47 +1084,66 @@
9691084 padding: 0.25em;
9701085 margin-top: 0.5em;
9711086 }
972- .qr--var, .qr--macro, .qr--pipe {
1087+
1088+ .qr--var,
1089+ .qr--macro,
1090+ .qr--pipe {
9731091 display: contents;
1092+
9741093 &:nth-child(2n + 1) {
975- .qr--key, .qr--val {
1094+
1095+ .qr--key,
1096+ .qr--val {
9761097 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);
9771098 }
1099+
9781100 .qr--val {
9791101 &:nth-child(2n) {
9801102 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.125);
9811103 }
1104+
9821105 &:hover {
9831106 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);
9841107 }
9851108 }
9861109 }
1110+
9871111 &:nth-child(2n) {
9881112 .qr--val {
9891113 &:nth-child(2n) {
9901114 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.0625);
9911115 }
1116+
9921117 &:hover {
9931118 background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5);
9941119 }
9951120 }
9961121 }
1122+
9971123 &.qr--isHidden {
998- .qr--key, .qr--val {
1124+
1125+ .qr--key,
1126+ .qr--val {
9991127 opacity: 0.5;
10001128 }
10011129 }
1130+
10021131 .qr--val {
10031132 grid-column: 2 / 4;
1133+
10041134 &.qr--singleCol {
10051135 grid-column: unset;
10061136 }
1137+
10071138 &.qr--simple {
1008- &:before, &:after {
1139+
1140+ &:before,
1141+ &:after {
10091142 content: '"';
10101143 color: var(--SmartThemeQuoteColor);
10111144 }
10121145 }
1146+
10131147 &.qr--unresolved {
10141148 &:after {
10151149 content: '-UNRESOLVED-';
@@ -1019,21 +1153,36 @@
10191153 }
10201154 }
10211155 }
1156+
10221157 .qr--key {
10231158 margin-left: 0.5em;
10241159 padding-right: 1em;
1025- &:after { content: ": "; }
1160+
1161+ &:after {
1162+ content: ": ";
10261163 }
1027- .qr--pipe, .qr--macro {
1164+ }
1165+
1166+ .qr--pipe,
1167+ .qr--macro {
10281168 >.qr--key {
1029- &:before { content: "{{"; }
1169+ &:before {
1030- &:after { content: "}}: "; }
1170+ content: "{{";
1171+ }
1172+
1173+ &:after {
1174+ content: "}}: ";
1175+ }
10311176 }
10321177 }
1178+
10331179 .qr--scope {
10341180 display: contents;
1181+
10351182 .qr--pipe {
1036- .qr--key, .qr--val {
1183+
1184+ .qr--key,
1185+ .qr--val {
10371186 opacity: 0.5;
10381187 }
10391188 }
@@ -1043,6 +1192,7 @@
10431192 .qr--stack {
10441193 display: grid;
10451194 grid-template-columns: 1fr 0fr;
1195+
10461196 .qr--title {
10471197 grid-column: 1 / 3;
10481198 font-weight: bold;
@@ -1051,16 +1201,22 @@
10511201 padding: 0.25em;
10521202 margin-top: 1em;
10531203 }
1204+
10541205 .qr--item {
10551206 display: contents;
1207+
10561208 &:nth-child(2n + 1) {
1057- .qr--name, .qr--source {
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;
@@ -1086,6 +1242,7 @@
10861242}
10871243
10881244@keyframes qr--debugPulse {
1245+
10891246 0%,
10901247 100% {
10911248 border-color: rgb(81, 163, 81);
@@ -1098,6 +1255,7 @@
10981255
10991256.popup.qr--hide {
11001257 opacity: 0 !important;
1258+
11011259 &::backdrop {
11021260 opacity: 0 !important;
11031261 }
@@ -1117,6 +1275,7 @@
11171275 overflow: hidden;
11181276 font-weight: bold;
11191277 }
1278+
11201279 display: flex;
11211280 align-items: center;
11221281 flex-direction: column;
@@ -1125,6 +1284,7 @@
11251284 box-shadow: 0 0 0;
11261285 transition: var(--animation-duration-2x);
11271286 }
1287+
11281288 .qr--copy {
11291289 &:after {
11301290 content: 'Copy';
@@ -1132,6 +1292,7 @@
11321292 overflow: hidden;
11331293 font-weight: bold;
11341294 }
1295+
11351296 display: flex;
11361297 align-items: center;
11371298 flex-direction: column;
@@ -1140,16 +1301,19 @@
11401301 box-shadow: 0 0 0;
11411302 transition: var(--animation-duration-2x);
11421303 }
1304+
11431305 &:has(.qr--transferSelect:focus) {
11441306 .popup-button-ok {
11451307 font-weight: bold;
11461308 box-shadow: 0 0 10px;
11471309 }
1310+
11481311 &.qr--isCopy {
11491312 .popup-button-ok {
11501313 font-weight: normal;
11511314 box-shadow: 0 0 0;
11521315 }
1316+
11531317 .qr--copy {
11541318 font-weight: bold;
11551319 box-shadow: 0 0 10px;