sync: mnogo

static/editor.css

@@ -1463,4 +1463,142 @@ input[type="number"] {
 }
 
 /* --- Canvas preview sanitization (напоминание): хинты/лейблы/чекбоксы скрыты в превью --- */
-/* Секции summary (headers/template) остаются видимыми */
+/* Секции summary (headers/template) остаются видимыми */
+/* --- Logs panel: base layout ------------------------------------------------- */
+#logs-list { --log-border: #1f2b3b; }
+#logs-list .logs-row {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--log-border);
+  background: #0f141a;
+  cursor: pointer;
+  transition: background-color .15s ease, box-shadow .15s ease, opacity .2s ease;
+}
+#logs-list .logs-row:hover { background: #111821; }
+#logs-list .logs-row.selected {
+  outline: 0;
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-2) 40%, transparent);
+}
+#logs-list .logs-row.dim { opacity: .70; }
+#logs-list .logs-row .title { font-size: 13px; }
+#logs-list .logs-row .sub {
+  font-size: 11px;
+  opacity: .85;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* --- HTTP status styling ----------------------------------------------------- */
+/* Shimmer animation for pending HTTP rows */
+@keyframes logs-shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+
+/* Pending request (no response yet): blue accent shimmer using --accent-2 */
+#logs-list .logs-row.kind-http.http-pending {
+  border-left: 3px solid var(--accent-2);
+  background:
+    linear-gradient(90deg,
+      color-mix(in srgb, var(--accent-2) 10%, transparent) 0%,
+      color-mix(in srgb, var(--accent-2) 20%, transparent) 50%,
+      color-mix(in srgb, var(--accent-2) 10%, transparent) 100%);
+  background-size: 200% 100%;
+  animation: logs-shimmer 1.4s linear infinite;
+}
+
+/* Success/Failure borders for completed HTTP rows */
+#logs-list .logs-row.kind-http.http-ok  { border-left: 3px solid #10b981; } /* emerald-500 */
+#logs-list .logs-row.kind-http.http-err { border-left: 3px solid #ef4444; } /* red-500 */
+
+/* --- Node sleep pulse -------------------------------------------------------- */
+@keyframes logs-sleep-pulse {
+  0%   { box-shadow: inset 0 0 0 0 rgba(245,158,11, 0.00); }
+  50%  { box-shadow: inset 0 0 0 2px rgba(245,158,11, 0.35); }
+  100% { box-shadow: inset 0 0 0 0 rgba(245,158,11, 0.00); }
+}
+#logs-list .logs-row.kind-node.ev-sleep {
+  border-left: 3px dashed #f59e0b; /* amber-500 */
+  animation: logs-sleep-pulse 1.8s ease-in-out infinite;
+}
+/* --- Node "water" running effect (blue→violet gradient, slow, saturated) ----- */
+@keyframes node-water {
+  0%   { background-position: 0% 0%; }
+  50%  { background-position: 100% 100%; }
+  100% { background-position: 0% 0%; }
+}
+
+/* Применяется, когда нода исполняется (класс .node-running вешается из SSE) */
+#drawflow .drawflow-node.node-running .title-box,
+#drawflow .drawflow-node.node-running .box {
+  /* База: наш стандартный фон ноды, сверху — насыщенный градиент воды */
+  background:
+    linear-gradient(125deg,
+      color-mix(in srgb, #60a5fa 78%, transparent) 0%,
+      color-mix(in srgb, #7c3aed 56%, transparent) 50%,
+      color-mix(in srgb, #60a5fa 78%, transparent) 100%),
+    var(--node);
+  background-size: 360% 360%;
+  animation: node-water 5.0s ease-in-out infinite; /* медленнее и гуще, «водная гладь» */
+  border-color: color-mix(in srgb, var(--accent-2) 55%, #7c3aed 45%);
+  /* Лёгкое свечение, чтобы подчеркнуть активность, без ядовитости */
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, var(--accent-2) 30%, transparent),
+    0 0 16px rgba(96,165,250,.18),
+    inset 0 0 22px rgba(167,139,250,.12);
+}
+
+/* Безопасность: при успехе/ошибке временные классы могут перебить рамку */
+#drawflow .drawflow-node.node-ok .title-box,
+#drawflow .drawflow-node.node-ok .box {
+  border-color: #10b981 !important; /* emerald */
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, #10b981 35%, transparent),
+    0 0 12px rgba(16,185,129,.18);
+  background-image: none; /* убрать «воду» после окончания */
+}
+
+#drawflow .drawflow-node.node-err .title-box,
+#drawflow .drawflow-node.node-err .box {
+  border-color: #ef4444 !important; /* red */
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, #ef4444 35%, transparent),
+    0 0 12px rgba(239,68,68,.18);
+  background-image: none; /* убрать «воду» после ошибки */
+}
+/* --- Water overlay: full-node coverage with fade-out on stop ------------------ */
+/* База: прозрачный градиент-оверлей на ВСЕЙ .drawflow_content_node,
+   который плавно меняет прозрачность. Когда нода активна (.node-running) —
+   поднимаем непрозрачность и двигаем «волну». При снятии .node-running
+   оверлей сам «затухает» благодаря transition на opacity. */
+#drawflow .drawflow-node .drawflow_content_node {
+  position: relative;
+  overflow: hidden;
+  z-index: 0; /* чтобы ::before можно было поднять поверх */
+}
+#drawflow .drawflow-node .drawflow_content_node::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;             /* поверх содержимого ноды, но без кликов */
+  pointer-events: none;
+  border-radius: 10px;
+  background: linear-gradient(125deg,
+      color-mix(in srgb, #60a5fa 78%, transparent) 0%,
+      color-mix(in srgb, #7c3aed 56%, transparent) 50%,
+      color-mix(in srgb, #60a5fa 78%, transparent) 100%);
+  background-size: 360% 360%;
+  opacity: 0;                              /* по умолчанию невидим */
+  transition: opacity 1.4s ease-in-out;    /* «затухание» при остановке */
+}
+#drawflow .drawflow-node.node-running .drawflow_content_node::before {
+  opacity: .42;  /* насыщенно, но читаемо; плавно исчезает при снятии класса */
+  animation: node-water 5.0s ease-in-out infinite; /* медленная водная гладь */
+}
+
+/* Отключаем прежнюю «водную» анимацию на частях, оставляя оверлей на всю ноду */
+#drawflow .drawflow-node.node-running .title-box,
+#drawflow .drawflow-node.node-running .box {
+  background: var(--node) !important;
+  animation: none !important;
+}