diff --git a/docu/docs/config-editor.html b/docu/docs/config-editor.html index 202fe6e..aa6db3c 100644 --- a/docu/docs/config-editor.html +++ b/docu/docs/config-editor.html @@ -28,6 +28,7 @@ background: radial-gradient(1200px 700px at 15% 10%, rgba(122,162,255,.22), transparent 60%), radial-gradient(900px 600px at 80% 35%, rgba(95,225,176,.16), transparent 55%), var(--bg); + background-repeat: no-repeat; color: var(--text); } @@ -175,6 +176,93 @@ .dot { width:10px; height:10px; border-radius:999px; background: rgba(232,238,252,.2); border: 1px solid rgba(232,238,252,.18); } .dot.ok { background: rgba(95,225,176,.55); border-color: rgba(95,225,176,.75); } .dot.err { background: rgba(255,122,139,.55); border-color: rgba(255,122,139,.75); } + + /* Modal */ + .modal { + position: fixed; + inset: 0; + display: none; + z-index: 9999; + } + .modal.open { display: block; } + .modal__backdrop { + position: absolute; + inset: 0; + background: rgba(0,0,0,.55); + backdrop-filter: blur(4px); + } + .modal__panel { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: min(920px, calc(100vw - 28px)); + max-height: min(82vh, 900px); + overflow: auto; + border-radius: 16px; + border: 1px solid var(--line); + background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), var(--card); + box-shadow: var(--shadow); + } + .modal__hd { + position: sticky; + top: 0; + display:flex; + align-items:center; + justify-content: space-between; + gap: 10px; + padding: 14px 14px 10px 14px; + border-bottom: 1px solid var(--line); + background: rgba(16,24,42,.88); + backdrop-filter: blur(10px); + } + .modal__hd h2 { + margin: 0; + font-size: 14px; + letter-spacing: .35px; + text-transform: uppercase; + color: var(--muted); + } + .modal__close { + width: 38px; + height: 38px; + border-radius: 12px; + border: 1px solid rgba(232,238,252,.16); + background: transparent; + color: var(--text); + font-size: 20px; + line-height: 1; + cursor: pointer; + } + .modal__bd { padding: 14px; } + .modal__bd h3 { margin: 14px 0 8px; font-size: 14px; } + .modal__bd ul { margin: 8px 0 0 18px; color: var(--text); } + .modal__bd li { margin: 6px 0; color: var(--text); } + .modal__bd code, .modal__bd pre { + font-family: var(--mono); + font-size: 12px; + } + .modal__bd pre { + white-space: pre-wrap; + background: rgba(0,0,0,.18); + border: 1px solid rgba(232,238,252,.12); + border-radius: 12px; + padding: 10px; + overflow: auto; + } + .creator-tag{ + display:inline-flex; + align-items:center; + gap: 8px; + padding: 6px 10px; + border-radius: 999px; + border: 1px solid rgba(232,238,252,.14); + background: rgba(0,0,0,.12); + color: var(--muted); + font-size: 12px; + margin: 10px 0 6px; + } + @@ -191,6 +279,7 @@ + @@ -273,7 +362,59 @@ router: -