Spaces:
Running
Running
| @keyframes qr--success { | |
| 0%, 100% { | |
| color: var(--SmartThemeBodyColor); | |
| } | |
| 25%, 75% { | |
| color: rgb(81, 163, 81); | |
| } | |
| } | |
| &.qr--success { | |
| animation-name: qr--success; | |
| animation-duration: 3s; | |
| animation-timing-function: linear; | |
| animation-delay: 0s; | |
| animation-iteration-count: 1; | |
| } | |
| #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; | |
| position: relative; | |
| >#qr--popoutTrigger { | |
| position: absolute; | |
| right: 0.25em; | |
| top: 0; | |
| } | |
| } | |
| #qr--bar.popoutVisible { | |
| padding-right: 2.5em; | |
| } | |
| #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 { | |
| --qr--color: transparent; | |
| &.qr--color { | |
| background-color: var(--qr--color); | |
| } | |
| &.qr--borderColor { | |
| background-color: transparent; | |
| border-left: 5px solid var(--qr--color); | |
| border-right: 5px solid var(--qr--color); | |
| } | |
| &:has(.qr--buttons.qr--color) { | |
| margin: 5px; | |
| } | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 5px; | |
| width: 100%; | |
| >.qr--buttons { | |
| display: contents; | |
| &.qr--color { | |
| .qr--button:before { | |
| content: ''; | |
| background-color: var(--qr--color); | |
| position: absolute; | |
| inset: -5px; | |
| z-index: -1; | |
| } | |
| &.qr--borderColor { | |
| .qr--button:before { | |
| display: none; | |
| } | |
| &:before, &:after { | |
| content: ''; | |
| width: 5px; | |
| background-color: var(--qr--color); | |
| } | |
| } | |
| } | |
| } | |
| .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; | |
| position: relative; | |
| &:hover { | |
| background-color: rgb(30% 30% 30%); | |
| } | |
| .qr--hidden { | |
| display: none; | |
| } | |
| .qr--button-icon { | |
| margin: 0 0.5em; | |
| } | |
| >.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 .qr--set-itemAdder { | |
| display: flex; | |
| align-items: center; | |
| opacity: 0; | |
| transition: 100ms; | |
| margin: -2px 0 -11px 0; | |
| position: relative; | |
| .qr--actions { | |
| display: flex; | |
| gap: 0.25em; | |
| flex: 0 0 auto; | |
| .qr--action { | |
| margin: 0; | |
| } | |
| } | |
| &:before, &:after { | |
| content: ""; | |
| display: block; | |
| flex: 1 1 auto; | |
| border: 1px solid; | |
| margin: 0 1em; | |
| height: 0; | |
| } | |
| &:hover, &:focus-within { | |
| opacity: 1; | |
| } | |
| } | |
| >.qr--set-item .qr--content { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 0.5em; | |
| align-items: baseline; | |
| padding: 0.25em 0; | |
| > :nth-child(2) { | |
| 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 1 auto; | |
| display: flex; | |
| gap: 0.25em; | |
| justify-content: flex-end; | |
| flex-wrap: wrap; | |
| } | |
| >.drag-handle { | |
| padding: 0.75em; | |
| } | |
| .qr--set-itemLabelContainer { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5em; | |
| .qr--set-itemIcon:not(.fa-solid) { | |
| display: none; | |
| } | |
| .qr--set-itemLabel { | |
| min-width: 24px; | |
| } | |
| } | |
| .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; | |
| padding-right: 1px; | |
| >#qr--ctxEditor { | |
| .qr--ctxItem { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 0.5em; | |
| align-items: baseline; | |
| } | |
| } | |
| >#qr--autoExec { | |
| .checkbox_label { | |
| text-wrap: nowrap; | |
| .fa-fw { | |
| margin-right: 2px; | |
| } | |
| } | |
| } | |
| } | |
| @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: 50dvh; | |
| height: 50dvh; | |
| } | |
| } | |
| } | |
| .popup:has(#qr--modalEditor) { | |
| aspect-ratio: unset; | |
| &:has(.qr--isExecuting.qr--minimized) { | |
| min-width: unset; | |
| min-height: unset; | |
| height: auto ; | |
| width: min-content ; | |
| position: absolute; | |
| right: 1em; | |
| top: 1em; | |
| left: unset; | |
| bottom: unset; | |
| margin: unset; | |
| padding: 0; | |
| &::backdrop { | |
| backdrop-filter: unset; | |
| background-color: transparent; | |
| } | |
| .popup-body { | |
| flex: 0 0 auto; | |
| height: min-content; | |
| width: min-content; | |
| } | |
| .popup-content { | |
| flex: 0 0 auto; | |
| margin-top: 0; | |
| > #qr--modalEditor { | |
| max-height: 50vh; | |
| > #qr--main, | |
| > #qr--resizeHandle, | |
| > #qr--qrOptions > h3, | |
| > #qr--qrOptions > #qr--modal-executeButtons, | |
| > #qr--qrOptions > #qr--modal-executeProgress | |
| { | |
| display: none; | |
| } | |
| #qr--qrOptions { | |
| width: auto; | |
| } | |
| #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize { | |
| display: flex; | |
| } | |
| #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-minimize { | |
| display: none; | |
| } | |
| #qr--modal-debugState { | |
| padding-top: 0; | |
| } | |
| } | |
| } | |
| } | |
| &:has(.qr--isExecuting) { | |
| .popup-controls { | |
| display: none; | |
| } | |
| .qr--highlight { | |
| position: absolute; | |
| z-index: 50000; | |
| pointer-events: none; | |
| background-color: rgb(47 150 180 / 0.5); | |
| &.qr--unresolved { | |
| background-color: rgb(255 255 0 / 0.5); | |
| } | |
| } | |
| .qr--highlight-secondary { | |
| position: absolute; | |
| z-index: 50000; | |
| pointer-events: none; | |
| border: 3px solid red; | |
| } | |
| } | |
| .popup-content { | |
| display: flex; | |
| flex-direction: column; | |
| >#qr--modalEditor { | |
| flex: 1 1 auto; | |
| display: flex; | |
| flex-direction: row; | |
| gap: 1em; | |
| overflow: hidden; | |
| &.qr--isExecuting { | |
| #qr--main > h3:first-child, | |
| #qr--main > .qr--labels, | |
| #qr--main > .qr--modal-messageContainer > .qr--modal-editorSettings, | |
| #qr--qrOptions > h3:first-child, | |
| #qr--qrOptions > #qr--ctxEditor, | |
| #qr--qrOptions > .qr--ctxEditorActions, | |
| #qr--qrOptions > .qr--ctxEditorActions + h3, | |
| #qr--qrOptions > .qr--ctxEditorActions + h3 + div | |
| { | |
| display: none; | |
| } | |
| #qr--main > .qr--modal-messageContainer > #qr--modal-messageHolder > #qr--modal-message { | |
| visibility: hidden; | |
| } | |
| #qr--modal-debugButtons { | |
| display: flex; | |
| .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) { | |
| cursor: not-allowed; | |
| opacity: 0.5; | |
| pointer-events: none; | |
| transition: 200ms; | |
| border-color: transparent; | |
| } | |
| } | |
| &.qr--isPaused #qr--modal-debugButtons { | |
| .menu_button:not(#qr--modal-minimize, #qr--modal-maximize) { | |
| 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 { | |
| width: 6px; | |
| background-color: var(--SmartThemeBorderColor); | |
| border: 2px solid var(--SmartThemeBlurTintColor); | |
| transition: border-color 200ms, background-color 200ms; | |
| cursor: w-resize; | |
| &:hover { | |
| background-color: var(--SmartThemeQuoteColor); | |
| border-color: var(--SmartThemeQuoteColor); | |
| } | |
| } | |
| #qr--qrOptions { | |
| width: var(--width, auto); | |
| } | |
| } | |
| > #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; | |
| padding: 1px; | |
| > label, > .label { | |
| flex: 1 1 1px; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| &.qr--fit { | |
| flex: 0 0 auto; | |
| justify-content: center; | |
| } | |
| .qr--inputGroup { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 0.5em; | |
| input { | |
| flex: 1 1 auto; | |
| } | |
| } | |
| .qr--labelText { | |
| flex: 1 1 auto; | |
| } | |
| .qr--labelHint { | |
| flex: 1 1 auto; | |
| } | |
| input { | |
| flex: 0 0 auto; | |
| } | |
| .qr--modal-switcherList { | |
| background-color: var(--stcdx--bgColor); | |
| border: 1px solid var(--SmartThemeBorderColor); | |
| backdrop-filter: blur(var(--SmartThemeBlurStrength)); | |
| border-radius: 10px; | |
| font-size: smaller; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| overflow: auto; | |
| margin: 0; | |
| padding: 0.5em; | |
| max-height: 50vh; | |
| list-style: none; | |
| z-index: 40000; | |
| max-width: 100%; | |
| .qr--modal-switcherItem { | |
| display: flex; | |
| gap: 1em; | |
| text-align: left; | |
| opacity: 0.75; | |
| transition: 200ms; | |
| cursor: pointer; | |
| &:hover { | |
| opacity: 1; | |
| } | |
| &.qr--current { | |
| opacity: 1; | |
| .qr--label, .qr--id { | |
| font-weight: bold; | |
| } | |
| } | |
| } | |
| .qr--label { | |
| white-space: nowrap; | |
| .menu_button { | |
| display: inline-block; | |
| height: min-content; | |
| width: min-content; | |
| margin: 0 0.5em 0 0; | |
| } | |
| } | |
| .qr--id { | |
| opacity: 0.5; | |
| &:before { content: "["; } | |
| &:after { content: "]"; } | |
| } | |
| .qr--message { | |
| height: 1lh; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| opacity: 0.5; | |
| } | |
| } | |
| } | |
| } | |
| > .qr--modal-messageContainer { | |
| flex: 1 1 auto; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| > .qr--modal-editorSettings { | |
| display: flex; | |
| flex-wrap: wrap; | |
| flex-direction: row; | |
| column-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); | |
| &::-webkit-scrollbar, &::-webkit-scrollbar-thumb { | |
| visibility: visible; | |
| cursor: unset; | |
| } | |
| &::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; | |
| resize: none; | |
| line-height: 1.2; | |
| border: 1px solid var(--SmartThemeBorderColor); | |
| border-radius: 5px; | |
| position: relative; | |
| } | |
| } | |
| } | |
| } | |
| #qr--modal-icon { | |
| height: 100%; | |
| aspect-ratio: 1 / 1; | |
| } | |
| #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-debugButtons { | |
| display: none; | |
| gap: 1em; | |
| .qr--modal-debugButton { | |
| aspect-ratio: 1.25 / 1; | |
| width: 2.25em; | |
| position: relative; | |
| &:not(.fa-solid) { | |
| border-width: 1px; | |
| border-style: solid; | |
| &:after { | |
| content: ''; | |
| position: absolute; | |
| inset: 3px; | |
| 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'); | |
| } | |
| &#qr--modal-step:after { | |
| mask-image: url('/img/step-over.svg'); | |
| } | |
| &#qr--modal-stepInto:after { | |
| mask-image: url('/img/step-into.svg'); | |
| } | |
| &#qr--modal-stepOut:after { | |
| mask-image: url('/img/step-out.svg'); | |
| } | |
| &#qr--modal-maximize { | |
| display: none; | |
| } | |
| } | |
| } | |
| #qr--modal-send_textarea { | |
| flex: 0 0 auto; | |
| } | |
| #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); | |
| flex: 0 0 auto; | |
| 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; | |
| white-space: pre-wrap; | |
| } | |
| #qr--modal-debugState { | |
| display: none; | |
| &.qr--active { | |
| display: block; | |
| } | |
| text-align: left; | |
| font-size: smaller; | |
| font-family: var(--monoFontFamily); | |
| // background-color: rgb(146, 190, 252); | |
| color: white; | |
| padding: 0.5em 0; | |
| overflow: auto; | |
| min-width: 100%; | |
| width: 0; | |
| white-space: pre-wrap; | |
| .qr--scope { | |
| display: grid; | |
| grid-template-columns: 0fr 1fr 1fr; | |
| column-gap: 0em; | |
| .qr--title { | |
| grid-column: 1 / 4; | |
| font-weight: bold; | |
| font-family: var(--mainFontFamily); | |
| background-color: var(--black50a); | |
| padding: 0.25em; | |
| margin-top: 0.5em; | |
| } | |
| .qr--var, .qr--macro, .qr--pipe { | |
| display: contents; | |
| &:nth-child(2n + 1) { | |
| .qr--key, .qr--val { | |
| background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25); | |
| } | |
| .qr--val { | |
| &:nth-child(2n) { | |
| background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.125); | |
| } | |
| &:hover { | |
| background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5); | |
| } | |
| } | |
| } | |
| &:nth-child(2n) { | |
| .qr--val { | |
| &:nth-child(2n) { | |
| background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.0625); | |
| } | |
| &:hover { | |
| background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.5); | |
| } | |
| } | |
| } | |
| &.qr--isHidden { | |
| .qr--key, .qr--val { | |
| opacity: 0.5; | |
| } | |
| } | |
| .qr--val { | |
| grid-column: 2 / 4; | |
| &.qr--singleCol { | |
| grid-column: unset; | |
| } | |
| &.qr--simple { | |
| &:before, &:after { | |
| content: '"'; | |
| color: var(--SmartThemeQuoteColor); | |
| } | |
| } | |
| &.qr--unresolved { | |
| &:after { | |
| content: '-UNRESOLVED-'; | |
| font-style: italic; | |
| color: var(--SmartThemeQuoteColor); | |
| } | |
| } | |
| } | |
| } | |
| .qr--key { | |
| margin-left: 0.5em; | |
| padding-right: 1em; | |
| &:after { content: ": "; } | |
| } | |
| .qr--pipe, .qr--macro { | |
| > .qr--key { | |
| &:before { content: "{{"; } | |
| &:after { content: "}}: "; } | |
| } | |
| } | |
| .qr--scope { | |
| display: contents; | |
| .qr--pipe { | |
| .qr--key, .qr--val { | |
| opacity: 0.5; | |
| } | |
| } | |
| } | |
| } | |
| .qr--stack { | |
| display: grid; | |
| grid-template-columns: 1fr 0fr; | |
| .qr--title { | |
| grid-column: 1 / 3; | |
| font-weight: bold; | |
| font-family: var(--mainFontFamily); | |
| background-color: var(--black50a); | |
| padding: 0.25em; | |
| margin-top: 1em; | |
| } | |
| .qr--item { | |
| display: contents; | |
| &:nth-child(2n + 1) { | |
| .qr--name, .qr--source { | |
| background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25); | |
| } | |
| } | |
| .qr--name { | |
| margin-left: 0.5em; | |
| } | |
| .qr--source { | |
| opacity: 0.5; | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| @keyframes qr--progressPulse { | |
| 0%, | |
| 100% { | |
| background-color: var(--progColor); | |
| } | |
| 50% { | |
| background-color: var(--progFlashColor); | |
| } | |
| } | |
| @keyframes qr--debugPulse { | |
| 0%, | |
| 100% { | |
| border-color: rgb(81, 163, 81); | |
| } | |
| 50% { | |
| border-color: rgb(146, 190, 252); | |
| } | |
| } | |
| .popup.qr--hide { | |
| opacity: 0 ; | |
| &::backdrop { | |
| opacity: 0 ; | |
| } | |
| } | |
| .popup.qr--hide::backdrop { | |
| opacity: 0 ; | |
| } | |
| .popup:has(.qr--transferModal) { | |
| .popup-button-ok { | |
| &:after { | |
| content: 'Transfer'; | |
| height: 0; | |
| overflow: hidden; | |
| font-weight: bold; | |
| } | |
| display: flex; | |
| align-items: center; | |
| flex-direction: column; | |
| white-space: pre; | |
| font-weight: normal; | |
| box-shadow: 0 0 0; | |
| transition: 200ms; | |
| } | |
| .qr--copy { | |
| &:after { | |
| content: 'Copy'; | |
| height: 0; | |
| overflow: hidden; | |
| font-weight: bold; | |
| } | |
| display: flex; | |
| align-items: center; | |
| flex-direction: column; | |
| white-space: pre; | |
| font-weight: normal; | |
| box-shadow: 0 0 0; | |
| transition: 200ms; | |
| } | |
| &:has(.qr--transferSelect:focus) { | |
| .popup-button-ok { | |
| font-weight: bold; | |
| box-shadow: 0 0 10px; | |
| } | |
| &.qr--isCopy { | |
| .popup-button-ok { | |
| font-weight: normal; | |
| box-shadow: 0 0 0; | |
| } | |
| .qr--copy { | |
| font-weight: bold; | |
| box-shadow: 0 0 10px; | |
| } | |
| } | |
| } | |
| } | |