diff --git a/index.html b/index.html index 02f868f..280e94e 100644 --- a/index.html +++ b/index.html @@ -916,15 +916,15 @@ '; content.innerHTML = html; backBtn.disabled = false; + btns.classList.remove('hidden'); } else { content.innerHTML = 'Done'; stkSetPillsDisabled(false); @@ -2845,23 +2857,10 @@ async function stkSubItemClick(itemId) { async function stkMenuRespond(result) { try { const data = await pysimFetch('/api/menu-respond', { result: result }); - if (result === 'cancel') { - stkMenuClose(); - return; - } - if (result === 'back') { - if (stkMenuStack.length > 0) { - const prev = stkMenuStack.pop(); - const content = document.getElementById('stk-menu-panel-content'); - content.innerHTML = ''; - let html = '
'; - prev.forEach(item => { - html += '
' + item.id + '' + esc(item.text) + '
'; - }); - html += '
'; - content.innerHTML = html; - document.getElementById('stk-back-btn').disabled = stkMenuStack.length === 0; - } + if (result === 'cancel' || result === 'back' || result === 'timeout') { + stkMenuRenderItems(); + document.getElementById('stk-menu-buttons').classList.add('hidden'); + document.getElementById('stk-back-btn').disabled = stkMenuStack.length === 0; return; } stkMenuHandleResponse(data); diff --git a/style.css b/style.css index fc0f9cd..a1cce9b 100644 --- a/style.css +++ b/style.css @@ -554,6 +554,10 @@ video { display: none; } +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -562,6 +566,10 @@ video { position: relative; } +.inset-0 { + inset: 0px; +} + .bottom-full { bottom: 100%; } @@ -578,6 +586,10 @@ video { z-index: 10; } +.z-50 { + z-index: 50; +} + .mx-auto { margin-left: auto; margin-right: auto; @@ -639,6 +651,10 @@ video { margin-top: 0.5rem; } +.mt-3 { + margin-top: 0.75rem; +} + .block { display: block; } @@ -663,6 +679,10 @@ video { max-height: 8rem; } +.max-h-\[80vh\] { + max-height: 80vh; +} + .min-h-20 { min-height: 5rem; } @@ -699,6 +719,10 @@ video { width: 12rem; } +.w-5 { + width: 1.25rem; +} + .w-6 { width: 1.5rem; } @@ -749,6 +773,10 @@ video { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.flex-col { + flex-direction: column; +} + .flex-wrap { flex-wrap: wrap; } @@ -761,6 +789,10 @@ video { align-items: center; } +.justify-center { + justify-content: center; +} + .justify-between { justify-content: space-between; } @@ -799,12 +831,22 @@ video { row-gap: 0.5rem; } +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } +.overflow-auto { + overflow: auto; +} + .overflow-y-auto { overflow-y: auto; } @@ -825,6 +867,10 @@ video { border-radius: 9999px; } +.rounded-lg { + border-radius: 0.5rem; +} + .rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; @@ -856,6 +902,15 @@ video { border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); } +.bg-amber-50 { + --tw-bg-opacity: 1; + background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)); +} + +.bg-black\/50 { + background-color: rgb(0 0 0 / 0.5); +} + .bg-blue-600 { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); @@ -891,6 +946,16 @@ video { background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1)); } +.bg-red-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-600 { + --tw-bg-opacity: 1; + background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1)); +} + .bg-transparent { background-color: transparent; } @@ -908,6 +973,10 @@ video { padding: 0.75rem; } +.p-4 { + padding: 1rem; +} + .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; @@ -981,10 +1050,18 @@ video { padding-top: 0.5rem; } +.pt-3 { + padding-top: 0.75rem; +} + .text-center { text-align: center; } +.text-right { + text-align: right; +} + .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } @@ -1024,6 +1101,11 @@ video { line-height: 1.625; } +.text-amber-600 { + --tw-text-opacity: 1; + color: rgb(217 119 6 / var(--tw-text-opacity, 1)); +} + .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); @@ -1079,6 +1161,16 @@ video { color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } +.text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity, 1)); +} + +.text-red-700 { + --tw-text-opacity: 1; + color: rgb(185 28 28 / var(--tw-text-opacity, 1)); +} + .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); @@ -1098,6 +1190,10 @@ video { text-decoration-line: underline; } +.opacity-50 { + opacity: 0.5; +} + .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -1142,6 +1238,16 @@ video { background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); } +.hover\:bg-red-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-slate-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); +} + .hover\:text-gray-600:hover { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); @@ -1183,11 +1289,19 @@ video { border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); } +.dark\:bg-amber-900\/30:is(.dark *) { + background-color: rgb(120 53 15 / 0.3); +} + .dark\:bg-blue-500:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } +.dark\:bg-red-900\/30:is(.dark *) { + background-color: rgb(127 29 29 / 0.3); +} + .dark\:bg-slate-700:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); @@ -1203,6 +1317,11 @@ video { background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); } +.dark\:text-amber-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(251 191 36 / var(--tw-text-opacity, 1)); +} + .dark\:text-blue-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity, 1)); @@ -1258,6 +1377,10 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } +.dark\:hover\:bg-red-900\/50:hover:is(.dark *) { + background-color: rgb(127 29 29 / 0.5); +} + .dark\:hover\:bg-slate-600:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));