diff --git a/server/static/css/style.css b/server/static/css/style.css index d47f2f2..2074638 100644 --- a/server/static/css/style.css +++ b/server/static/css/style.css @@ -435,12 +435,36 @@ main { .keenetic-url-edit { margin-top: 10px; - padding-top: 10px; - border-top: 1px solid var(--border); + padding: 12px; + border: 1px solid var(--border); + border-radius: 8px; + background: color-mix(in srgb, var(--accent) 8%, var(--card-bg)); +} + +.keenetic-url-edit.is-open { + border-color: var(--accent); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); +} + +.keenetic-url-edit-title { + font-size: 13px; + font-weight: 600; + margin-bottom: 8px; + color: var(--accent); } .keenetic-url-edit .form-group input { - font-size: 12px; + font-size: 13px; + width: 100%; +} + +.server-card-actions .keenetic-url-btn.active { + border-color: var(--accent); + color: var(--accent); +} + +.keenetic-card-open { + cursor: pointer; } .server-card-actions { diff --git a/server/static/js/app.js b/server/static/js/app.js index 510886a..93d2be3 100644 --- a/server/static/js/app.js +++ b/server/static/js/app.js @@ -40,6 +40,28 @@ document.addEventListener('click', function(e) { e.stopPropagation(); e.preventDefault(); toggleMuteDevice(bell); + return; + } + + const keenDnsBtn = e.target.closest('.keenetic-url-btn'); + if (keenDnsBtn) { + e.stopPropagation(); + e.preventDefault(); + toggleKeeneticUrlEdit(keenDnsBtn.dataset.name); + return; + } + + const keenSaveBtn = e.target.closest('.keenetic-url-save'); + if (keenSaveBtn) { + e.stopPropagation(); + e.preventDefault(); + saveKeeneticUrl(keenSaveBtn.dataset.name); + return; + } + + const keenCard = e.target.closest('.server-card[data-keen]'); + if (keenCard && !e.target.closest('.mute-bell, .server-card-actions, .keenetic-url-edit, .keenetic-links, a, button, input, label')) { + showKeeneticDetail(keenCard.dataset.keen); } }); @@ -1230,11 +1252,11 @@ function renderKeenetic() { const urlValue = escHtml(keeneticWebUrl(dev)); return ` -