#qr--bar { outline: none; margin: 0; transition: 0.3s; opacity: 0.7; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; overflow-x: auto; order: 1; padding-right: 2.5em; position: relative; } #qr--bar > #qr--popoutTrigger { position: absolute; right: 0.25em; top: 0; } #qr--popout { display: flex; flex-direction: column; padding: 0; z-index: 31; } #qr--popout > .qr--header { flex: 0 0 auto; height: 2em; position: relative; } #qr--popout > .qr--header > .qr--controls > .qr--close { height: 15px; aspect-ratio: 1 / 1; font-size: 20px; opacity: 0.5; transition: all 250ms; } #qr--popout > .qr--body { overflow-y: auto; } #qr--bar > .qr--buttons, #qr--popout > .qr--body > .qr--buttons { margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; width: 100%; } #qr--bar > .qr--buttons > .qr--buttons, #qr--popout > .qr--body > .qr--buttons > .qr--buttons { display: contents; } #qr--bar > .qr--buttons .qr--button, #qr--popout > .qr--body > .qr--buttons .qr--button { color: var(--SmartThemeBodyColor); border: 1px solid var(--SmartThemeBorderColor); border-radius: 10px; padding: 3px 5px; margin: 3px 0; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; text-align: center; } #qr--bar > .qr--buttons .qr--button:hover, #qr--popout > .qr--body > .qr--buttons .qr--button:hover { opacity: 1; filter: brightness(1.2); } #qr--bar > .qr--buttons .qr--button > .qr--button-expander, #qr--popout > .qr--body > .qr--buttons .qr--button > .qr--button-expander { display: none; } #qr--bar > .qr--buttons .qr--button.qr--hasCtx > .qr--button-expander, #qr--popout > .qr--body > .qr--buttons .qr--button.qr--hasCtx > .qr--button-expander { display: block; } .qr--button-expander { border-left: 1px solid; margin-left: 1em; text-align: center; width: 2em; } .qr--button-expander:hover { font-weight: bold; } .ctx-blocker { /* backdrop-filter: blur(1px); */ /* background-color: rgba(0 0 0 / 10%); */ bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 999; } .ctx-menu { position: absolute; overflow: visible; } .list-group .list-group-item.ctx-header { font-weight: bold; cursor: default; } .ctx-item + .ctx-header { border-top: 1px solid; } .ctx-item { position: relative; } .ctx-expander { border-left: 1px solid; margin-left: 1em; text-align: center; width: 2em; } .ctx-expander:hover { font-weight: bold; } .ctx-sub-menu { position: absolute; top: 0; left: 100%; } @media screen and (max-width: 1000px) { .ctx-blocker { position: absolute; } .list-group .list-group-item.ctx-item { padding: 1em; } } #qr--settings .qr--head { display: flex; align-items: baseline; gap: 1em; } #qr--settings .qr--head > .qr--title { font-weight: bold; } #qr--settings .qr--head > .qr--actions { display: flex; flex-direction: row; align-items: baseline; gap: 0.5em; } #qr--settings .qr--setList > .qr--item { display: flex; flex-direction: row; gap: 0.5em; align-items: baseline; padding: 0 0.5em; } #qr--settings .qr--setList > .qr--item > .drag-handle { padding: 0.75em; } #qr--settings .qr--setList > .qr--item > .qr--visible { flex: 0 0 auto; display: flex; flex-direction: row; } #qr--settings #qr--set-settings #qr--injectInputContainer { flex-wrap: nowrap; } #qr--settings #qr--set-qrList .qr--set-qrListContents { padding: 0 0.5em; } #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item { display: flex; flex-direction: row; gap: 0.5em; align-items: baseline; padding: 0.25em 0; } #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item > :nth-child(1) { flex: 0 0 auto; } #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item > :nth-child(2) { flex: 1 1 25%; } #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item > :nth-child(3) { flex: 0 0 auto; } #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item > :nth-child(4) { flex: 1 1 75%; } #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item > :nth-child(5) { flex: 0 0 auto; } #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item > .drag-handle { padding: 0.75em; } #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemLabel, #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--action { margin: 0; } #qr--settings #qr--set-qrList .qr--set-qrListContents > .qr--set-item .qr--set-itemMessage { font-size: smaller; } #qr--settings .qr--set-qrListActions { display: flex; flex-direction: row; gap: 0.5em; justify-content: center; padding-bottom: 0.5em; } #qr--qrOptions { display: flex; flex-direction: column; } #qr--qrOptions > #qr--ctxEditor .qr--ctxItem { display: flex; flex-direction: row; gap: 0.5em; align-items: baseline; } @media screen and (max-width: 750px) { body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor { flex-direction: column; overflow: auto; } body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main { flex: 0 0 auto; } body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels { flex-direction: column; } body .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder { min-height: 50svh; height: 50svh; } } .popup:has(#qr--modalEditor) { aspect-ratio: unset; } .popup:has(#qr--modalEditor):has(.qr--isExecuting) .popup-controls { display: none; } .popup:has(#qr--modalEditor) .popup-content { display: flex; flex-direction: column; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor { flex: 1 1 auto; display: flex; flex-direction: row; gap: 1em; overflow: hidden; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--main > h3:first-child, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--main > .qr--labels, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > h3:first-child, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > #qr--ctxEditor, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > .qr--ctxEditorActions, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > .qr--ctxEditorActions + h3, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > .qr--ctxEditorActions + h3 + div { display: none; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels { flex: 0 0 auto; display: flex; flex-direction: row; gap: 0.5em; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label { flex: 1 1 1px; display: flex; flex-direction: column; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelText { flex: 1 1 auto; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label > .qr--labelHint { flex: 1 1 auto; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--labels > label > input { flex: 0 0 auto; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings { display: flex; flex-direction: row; gap: 1em; color: var(--grey70); font-size: smaller; align-items: baseline; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label { white-space: nowrap; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings > .checkbox_label > input { font-size: inherit; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder { flex: 1 1 auto; display: grid; text-align: left; overflow: hidden; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-messageSyntax { display: none; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message { background-color: var(--ac-style-color-background); color: var(--ac-style-color-text); } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::selection { color: unset; background-color: rgba(108 171 251 / 0.25); } @supports (color: rgb(from white r g b / 0.25)) { .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder.qr--noSyntax > #qr--modal-message::selection { background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25); } } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax { grid-column: 1; grid-row: 1; padding: 0; margin: 0; border: none; overflow: hidden; min-width: 100%; width: 0; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-messageSyntax > #qr--modal-messageSyntaxInner { height: 100%; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message { background-color: transparent; color: transparent; grid-column: 1; grid-row: 1; caret-color: var(--ac-style-color-text); overflow: auto; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::-webkit-scrollbar-thumb { visibility: hidden; cursor: default; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::selection { color: transparent; background-color: rgba(108 171 251 / 0.25); } @supports (color: rgb(from white r g b / 0.25)) { .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message::selection { background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25); } } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-message, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder #qr--modal-messageSyntaxInner { font-family: var(--monoFontFamily); padding: 0.75em; margin: 0; border: none; resize: none; line-height: 1.2; border: 1px solid var(--SmartThemeBorderColor); border-radius: 5px; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons { display: flex; gap: 1em; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton { border-width: 2px; border-style: solid; display: flex; flex-direction: row; gap: 0.5em; padding: 0.5em 0.75em; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--modal-executeButton .qr--modal-executeComboIcon { display: flex; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute { transition: 200ms; filter: grayscale(0); } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute.qr--busy { cursor: wait; opacity: 0.5; filter: grayscale(1); } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-execute { border-color: #51a351; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop { cursor: default; opacity: 0.5; filter: grayscale(1); pointer-events: none; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-pause, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons .qr--busy ~ #qr--modal-stop { cursor: pointer; opacity: 1; filter: grayscale(0); pointer-events: all; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-pause { border-color: #92befc; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons #qr--modal-stop { border-color: #d78872; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons { display: flex; gap: 1em; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress { --prog: 0; --progColor: #92befc; --progFlashColor: #d78872; --progSuccessColor: #51a351; --progErrorColor: #bd362f; --progAbortedColor: #d78872; height: 0.5em; background-color: var(--black50a); position: relative; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress:after { content: ''; background-color: var(--progColor); position: absolute; inset: 0; right: calc(100% - var(--prog) * 1%); transition: 200ms; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--paused:after { animation-name: qr--progressPulse; animation-duration: 1500ms; animation-timing-function: ease-in-out; animation-delay: 0s; animation-iteration-count: infinite; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--aborted:after { background-color: var(--progAbortedColor); } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--success:after { background-color: var(--progSuccessColor); } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress.qr--error:after { background-color: var(--progErrorColor); } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeErrors { display: none; text-align: left; font-size: smaller; background-color: #bd362f; color: white; padding: 0.5em; overflow: auto; min-width: 100%; width: 0; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeErrors.qr--hasErrors { display: block; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeResult { display: none; text-align: left; font-size: smaller; background-color: #51a351; color: white; padding: 0.5em; overflow: auto; min-width: 100%; width: 0; white-space: pre-wrap; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeResult.qr--hasResult { display: block; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeResult:before { content: 'Result: '; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState { display: none; text-align: left; font-size: smaller; font-family: var(--monoFontFamily); color: white; padding: 0.5em 0; overflow: auto; min-width: 100%; width: 0; white-space: pre-wrap; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState.qr--active { display: block; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope { display: grid; grid-template-columns: 0fr 1fr; column-gap: 1em; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--title { grid-column: 1 / 3; font-weight: bold; background-color: var(--black50a); padding: 0.25em; margin-top: 0.5em; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe { display: contents; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var.qr--isHidden .qr--key, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro.qr--isHidden .qr--key, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe.qr--isHidden .qr--key, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var.qr--isHidden .qr--val, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro.qr--isHidden .qr--val, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe.qr--isHidden .qr--val { opacity: 0.5; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--key { margin-left: 0.5em; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--key:after { content: ": "; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe > .qr--key:before, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro > .qr--key:before { content: "{{"; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe > .qr--key:after, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro > .qr--key:after { content: "}}: "; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--scope { grid-column: 1 / 3; } .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--scope .qr--pipe .qr--key, .popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--scope .qr--pipe .qr--val { opacity: 0.5; } @keyframes qr--progressPulse { 0%, 100% { background-color: var(--progColor); } 50% { background-color: var(--progFlashColor); } } .popup.qr--hide { opacity: 0 !important; } .popup.qr--hide::backdrop { opacity: 0 !important; }