draw attention to debug buttons

92eec72c6d59f24f15e8ac006dc542765cd9a029

LenAnderson <Anderson.Len@outlook.com>

public/scripts/extensions/quick-reply/style.less+44 -9 Viewed

         >#qr--autoExec {
             .checkbox_label {
                 text-wrap: nowrap;
+-
++
                 .fa-fw {
                     margin-right: 2px;
+                }

@@ -519,6 +519,7 @@
519	519	opacity: 0.5;
520	520	pointer-events: none;
521	521	transition: 200ms;
	522	+ border-color: transparent;
522	523	}
523	524	}
524	525	&.qr--isPaused #qr--modal-debugButtons {

                         cursor: pointer;
                         opacity: 1;
                         pointer-events: all;
 +                        &#qr--modal-resume {
 +                            animation-name: qr--debugPulse;
 +                            animation-duration: 1500ms;
 +                            animation-timing-function: ease-in-out;
 +                            animation-delay: 0s;
 +                            animation-iteration-count: infinite;
 +                        }
 +                        &#qr--modal-resume {
 +                            border-color: rgb(81, 163, 81);
 +                        }
 +                        &#qr--modal-step {
 +                            border-color: var(--SmartThemeQuoteColor);
 +                        }
 +                        &#qr--modal-stepInto {
 +                            border-color: var(--SmartThemeQuoteColor);
 +                        }
 +                        &#qr--modal-stepOut {
 +                            border-color: var(--SmartThemeQuoteColor);
 +                        }
+                    }
+                }
 				#qr--resizeHandle {

 					aspect-ratio: 1.25 / 1;
 					width: 2.25em;
                     position: relative;
                     &:not(.fa-solid):after {
                         contentborder-width: ''1px;
                         positionborder-style: absolutesolid;
                         inset&:after 3px;{
 -                        background-color: var(--SmartThemeBodyColor);
 +                            content: '';
 -                        mask-size: contain;
 +                            position: absolute;
 -                        mask-position: center;
 +                            inset: 3px;
 -                        mask-repeat: no-repeat;
 +                            background-color: var(--SmartThemeBodyColor);
 +                            mask-size: contain;
 +                            mask-position: center;
 +                            mask-repeat: no-repeat;
 +                        }
+                    }
                     &#qr--modal-resume:after {
                         mask-image: url('/img/step-resume.svg');

+    }
+}
 +@keyframes qr--debugPulse {
 +    0%,
 +    100% {
 +        border-color: rgb(81, 163, 81);
 +    }
++
 +    50% {
 +        border-color: rgb(146, 190, 252);
 +    }
 +}
++
 .popup.qr--hide {
 	opacity: 0 !important;
 	&::backdrop {