#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--popoutTrigger { position: absolute; right: 0.25em; top: 0; } } #qr--popout { display: flex; flex-direction: column; padding: 0; z-index: 31; >.qr--header { flex: 0 0 auto; height: 2em; position: relative; >.qr--controls { >.qr--close { height: 15px; aspect-ratio: 1 / 1; font-size: 20px; opacity: 0.5; transition: all 250ms; } } } >.qr--body { overflow-y: auto; } } #qr--bar, #qr--popout>.qr--body { >.qr--buttons { margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; width: 100%; >.qr--buttons { display: contents; } .qr--button { color: var(--SmartThemeBodyColor); // background-color: var(--black50a); 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; &:hover { opacity: 1; filter: brightness(1.2); } >.qr--button-expander { display: none; } &.qr--hasCtx { >.qr--button-expander { display: block; } } } } } .qr--button-expander { border-left: 1px solid; margin-left: 1em; text-align: center; width: 2em; &: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--title { font-weight: bold; } >.qr--actions { display: flex; flex-direction: row; align-items: baseline; gap: 0.5em; } } .qr--setList { >.qr--item { display: flex; flex-direction: row; gap: 0.5em; align-items: baseline; padding: 0 0.5em; >.drag-handle { padding: 0.75em; } >.qr--visible { flex: 0 0 auto; display: flex; flex-direction: row; } } } #qr--set-settings { #qr--injectInputContainer { flex-wrap: nowrap; } } #qr--set-qrList { .qr--set-qrListContents> { padding: 0 0.5em; >.qr--set-item { display: flex; flex-direction: row; gap: 0.5em; align-items: baseline; padding: 0.25em 0; > :nth-child(1) { flex: 0 0 auto; } > :nth-child(2) { flex: 1 1 25%; } > :nth-child(3) { flex: 0 0 auto; } > :nth-child(4) { flex: 1 1 75%; } > :nth-child(5) { flex: 0 0 auto; } >.drag-handle { padding: 0.75em; } .qr--set-itemLabel, .qr--action { margin: 0; } .qr--set-itemMessage { font-size: smaller; } } } } .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--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; >#qr--main { flex: 0 0 auto; } >#qr--main>.qr--labels { flex-direction: column; } >#qr--main>.qr--modal-messageContainer>#qr--modal-messageHolder { min-height: 50svh; height: 50svh; } } } .popup:has(#qr--modalEditor) { aspect-ratio: unset; .popup-content { display: flex; flex-direction: column; >#qr--modalEditor { flex: 1 1 auto; display: flex; flex-direction: row; gap: 1em; overflow: hidden; >#qr--main { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; >.qr--labels { flex: 0 0 auto; display: flex; flex-direction: row; gap: 0.5em; >label { flex: 1 1 1px; display: flex; flex-direction: column; >.qr--labelText { flex: 1 1 auto; } >.qr--labelHint { flex: 1 1 auto; } >input { flex: 0 0 auto; } } } >.qr--modal-messageContainer { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; >.qr--modal-editorSettings { display: flex; flex-direction: row; gap: 1em; color: var(--grey70); font-size: smaller; align-items: baseline; >.checkbox_label { white-space: nowrap; >input { font-size: inherit; } } } >#qr--modal-messageHolder { flex: 1 1 auto; display: grid; text-align: left; overflow: hidden; &.qr--noSyntax { >#qr--modal-messageSyntax { display: none; } >#qr--modal-message { background-color: var(--ac-style-color-background); color: var(--ac-style-color-text); &::selection { color: unset; background-color: rgba(108 171 251 / 0.25); @supports (color: rgb(from white r g b / 0.25)) { background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25); } } } } >#qr--modal-messageSyntax { grid-column: 1; grid-row: 1; padding: 0; margin: 0; border: none; overflow: hidden; min-width: 100%; width: 0; >#qr--modal-messageSyntaxInner { height: 100%; } } >#qr--modal-message { background-color: transparent; color: transparent; grid-column: 1; grid-row: 1; caret-color: var(--ac-style-color-text); overflow: auto; &::-webkit-scrollbar, &::-webkit-scrollbar-thumb { visibility: hidden; cursor: default; } &::selection { color: transparent; background-color: rgba(108 171 251 / 0.25); @supports (color: rgb(from white r g b / 0.25)) { background-color: rgb(from var(--ac-style-color-matchedText) r g b / 0.25); } } } #qr--modal-message, #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; } } } } #qr--modal-executeButtons { display: flex; gap: 1em; .qr--modal-executeButton { border-width: 2px; border-style: solid; display: flex; flex-direction: row; gap: 0.5em; padding: 0.5em 0.75em; .qr--modal-executeComboIcon { display: flex; } } #qr--modal-execute { transition: 200ms; filter: grayscale(0); &.qr--busy { cursor: wait; opacity: 0.5; filter: grayscale(1); } } #qr--modal-execute { border-color: rgb(81, 163, 81); } #qr--modal-pause, #qr--modal-stop { cursor: default; opacity: 0.5; filter: grayscale(1); pointer-events: none; } .qr--busy { ~#qr--modal-pause, ~#qr--modal-stop { cursor: pointer; opacity: 1; filter: grayscale(0); pointer-events: all; } } #qr--modal-pause { border-color: rgb(146, 190, 252); } #qr--modal-stop { border-color: rgb(215, 136, 114); } } #qr--modal-executeProgress { --prog: 0; --progColor: rgb(146, 190, 252); --progFlashColor: rgb(215, 136, 114); --progSuccessColor: rgb(81, 163, 81); --progErrorColor: rgb(189, 54, 47); --progAbortedColor: rgb(215, 136, 114); height: 0.5em; background-color: var(--black50a); position: relative; &:after { content: ''; background-color: var(--progColor); position: absolute; inset: 0; right: calc(100% - var(--prog) * 1%); transition: 200ms; } &.qr--paused:after { animation-name: qr--progressPulse; animation-duration: 1500ms; animation-timing-function: ease-in-out; animation-delay: 0s; animation-iteration-count: infinite; } &.qr--aborted:after { background-color: var(--progAbortedColor); } &.qr--success:after { background-color: var(--progSuccessColor); } &.qr--error:after { background-color: var(--progErrorColor); } } #qr--modal-executeErrors { display: none; &.qr--hasErrors { display: block; } text-align: left; font-size: smaller; background-color: rgb(189, 54, 47); color: white; padding: 0.5em; overflow: auto; min-width: 100%; width: 0; } #qr--modal-executeResult { display: none; &.qr--hasResult { display: block; } &:before { content: 'Result: '; } text-align: left; font-size: smaller; background-color: rgb(81, 163, 81); color: white; padding: 0.5em; overflow: auto; min-width: 100%; width: 0; } } } } @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; }