From 7aae9bef1a1add13499e7f08de34a522dde7151b Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Wed, 30 Sep 2026 12:40:35 +0200
Subject: [PATCH] style(container): align node card visuals

---
 .../nodes/container-node/container-node.css   | 126 +++++++++++-------
 1 file changed, 81 insertions(+), 45 deletions(-)

diff --git a/src/app/shared/nodes/container-node/container-node.css b/src/app/shared/nodes/container-node/container-node.css
index 68fe1e5..29d64e3 100644
--- a/src/app/shared/nodes/container-node/container-node.css
+++ b/src/app/shared/nodes/container-node/container-node.css
@@ -7,13 +7,13 @@
 .container-node {
   position: relative;
   width: 340px;
-  border: 1px solid #cbd5e1;
-  border-radius: 18px;
-  background:
-    radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 36%),
-    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  user-select: none;
+  -webkit-user-select: none;
+  border: 1px solid #dbe2ea;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
   color: #0f172a;
-  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
   /* Ports deliberately project beyond the card edge, like Generic nodes; clipping hides them. */
   overflow: visible;
 }
@@ -131,8 +131,8 @@
 }
 
 :host.selected .container-node {
-  border-color: #0f766e;
-  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18), 0 16px 36px rgba(15, 23, 42, 0.18);
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.24), 0 12px 28px rgba(15, 23, 42, 0.16);
 }
 
 :host.validation-highlighted .container-node {
@@ -161,39 +161,46 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 12px 14px;
-  background: linear-gradient(135deg, #0f766e 0%, #0f766e 45%, #0ea5e9 100%);
-  color: #f8fafc;
+  padding: 11px 12px;
+  border-bottom: 1px solid #e8eef6;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
+  color: #0f172a;
 }
 
 .container-node__icon {
-  width: 34px;
-  height: 34px;
+  width: 38px;
+  height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.18);
-  border: 1px solid rgba(255, 255, 255, 0.26);
-  font-size: 16px;
+  border-radius: 10px;
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-size: 19px;
 }
 
 .container-node__titles {
   min-width: 0;
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  line-height: 1.25;
 }
 
 .container-node__eyebrow {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  opacity: 0.86;
+  order: -1;
+  font-size: 11.5px;
+  font-weight: 500;
+  letter-spacing: 0;
+  color: #1d4ed8;
 }
 
 .container-node__name {
-  font-size: 16px;
-  font-weight: 700;
+  font-size: 14px;
+  font-weight: 600;
+  color: #0f172a;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -207,41 +214,70 @@
 }
 
 .container-node__name-edit {
-  border: 0;
+  border: none;
   width: 24px;
   height: 24px;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.16);
-  color: #f8fafc;
+  background: transparent;
+  color: #64748b;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
+  opacity: 0;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.container-node:hover .container-node__name-edit {
+  opacity: 1;
+}
+
+.container-node__name-edit:hover {
+  background: #eff6ff;
+  color: #1d4ed8;
 }
 
 .container-node__delete,
 .container-node__focus,
 .container-node__settings {
   border: 0;
-  width: 30px;
-  height: 30px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.16);
-  color: #f8fafc;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #64748b;
+  font-size: 13px;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 
 .container-node__settings--active {
-  background: rgba(255, 255, 255, 0.34);
-  color: #ffffff;
+  background: #dbeafe;
+  color: #1d4ed8;
 }
 
 .container-node__clone {
   border: 0;
-  width: 30px;
-  height: 30px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.22);
-  color: #eff6ff;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #64748b;
+  font-size: 13px;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.container-node__focus:hover,
+.container-node__settings:hover,
+.container-node__clone:hover {
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.container-node__delete:hover {
+  background: #fef2f2;
+  color: #dc2626;
 }
 
 .container-node__header-actions {
@@ -412,8 +448,8 @@
 .container-node__ports {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 14px;
-  padding: 14px;
+  gap: 10px;
+  padding: 12px;
 }
 
 .container-node__port-title {
@@ -448,11 +484,11 @@
   align-items: flex-start;
   flex: 1 1 0;
   min-width: 0;
-  min-height: 36px;
-  padding: 4px 10px;
-  border-radius: 14px;
+  min-height: 32px;
+  padding: 4px 8px;
+  border-radius: 7px;
   border: 1px solid transparent;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
   box-sizing: border-box;
   overflow: hidden;