fixes button

webconfig/static/app.js

@@ -58,6 +58,16 @@ $("#save-layout")?.addEventListener("click", async () => {
 });
 
 // ---------- Background ----------
+function toggleBgType() {
+    const wrap = $("#bg-form");
+    if (!wrap) return;
+    const t = $("#bg-type")?.value || "gradient";
+    wrap.classList.remove("mode-gradient", "mode-solid", "mode-image");
+    wrap.classList.add("mode-" + t);
+}
+$("#bg-type")?.addEventListener("change", toggleBgType);
+toggleBgType();
+
 $("#save-bg")?.addEventListener("click", async () => {
     try {
         await api("PUT", "/api/background", {
@@ -167,6 +177,7 @@ function openDialogFor(btn) {
     $("#b-url").value = btn?.action?.url || "";
     $("#b-success").value = btn?.feedback?.successText || "";
     $("#b-error").value = btn?.feedback?.errorText || "Ошибка";
+    $("#b-pending").value = btn?.feedback?.pendingText ?? "...";
     $("#b-color").value = btn?.color || "#7b007b";
     $("#b-trigger-mode").value = btn?.trigger?.mode || "hold";
     $("#b-hold").value = btn?.trigger?.holdMs || 800;
@@ -208,6 +219,7 @@ form?.addEventListener("submit", async (e) => {
         url: $("#b-url").value,
         successText: $("#b-success").value,
         errorText: $("#b-error").value,
+        pendingText: $("#b-pending").value || "...",
         color: $("#b-color").value,
         triggerMode: $("#b-trigger-mode").value,
         holdMs: parseInt($("#b-hold").value, 10),

webconfig/static/style.css

@@ -185,6 +185,46 @@ button.icon-only { padding: 6px 9px; line-height: 1; }
 .buttons-list li.sortable-ghost { opacity: 0.4; }
 .buttons-list li.sortable-chosen { border-color: var(--accent); }
 
+/* ---------- Appearance ---------- */
+.subhead {
+    font-size: 0.95rem;
+    font-weight: 600;
+    margin: 0 0 12px;
+    color: var(--text);
+}
+.section-divider {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 20px 0;
+}
+.card-actions.compact { margin-top: 10px; }
+
+.appearance-bg .bg-gradient-row,
+.appearance-bg .bg-image-row { display: none; }
+.appearance-bg.mode-gradient .bg-gradient-row { display: flex; }
+.appearance-bg.mode-solid .bg-solid-row { display: flex; }
+.appearance-bg.mode-image .bg-image-row { display: flex; }
+
+.feedback-panel {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 24px;
+    align-items: start;
+}
+.feedback-form { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
+.feedback-form .span-2 { grid-column: 1 / -1; }
+.feedback-preview .preview-label {
+    font-size: 0.88em;
+    color: var(--muted);
+    margin-bottom: 8px;
+}
+.feedback-preview .preview-row {
+    flex-direction: column;
+    align-items: center;
+    margin-top: 0;
+    gap: 16px;
+}
+
 /* ---------- Feedback preview ---------- */
 .preview-row { display: flex; gap: 24px; margin-top: 16px; }
 .preview-dot {
@@ -245,6 +285,8 @@ button.icon-only { padding: 6px 9px; line-height: 1; }
 @media (max-width: 720px) {
     .update-layout { grid-template-columns: 1fr; }
     .version-sidebar { position: static; }
+    .feedback-panel { grid-template-columns: 1fr; }
+    .feedback-form { grid-template-columns: 1fr; }
 }
 
 .kv { display: flex; flex-direction: column; gap: 8px; }