lelii
/
humainflow-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(container): clarify double border

This commit is contained in:
Lucio Lelii 2026-09-30 12:44:44 +02:00
parent 124bf419b7
commit f0e9de8c12
1 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/shared/nodes/container-node/container-node.css
View File

@ -13,12 +13,22 @@
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
color: #0f172a;
/* The inset line is the Container's visual distinction from ordinary nodes. */
box-shadow: inset 0 0 0 1px #e2e8f0, 0 10px 24px rgba(15, 23, 42, 0.12);
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;
}
/* A clearly separated inner contour makes Containers recognizable at a glance. */
.container-node::before {
content: '';
position: absolute;
inset: 4px;
z-index: 30;
border: 1px solid #cbd5e1;
border-radius: 12px;
pointer-events: none;
}
.container-node__focus-backdrop {
position: fixed;
inset: 0;
@ -133,12 +143,20 @@
:host.selected .container-node {
border-color: #2563eb;
box-shadow: inset 0 0 0 1px #bfdbfe, 0 0 0 3px rgba(37, 99, 235, 0.24), 0 12px 28px rgba(15, 23, 42, 0.16);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.24), 0 12px 28px rgba(15, 23, 42, 0.16);
}
:host.selected .container-node::before {
border-color: #93c5fd;
}
:host.validation-highlighted .container-node {
border-color: #dc2626;
box-shadow: inset 0 0 0 1px #fecaca, 0 0 0 3px rgba(220, 38, 38, 0.18), 0 18px 38px rgba(127, 29, 29, 0.16);
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18), 0 18px 38px rgba(127, 29, 29, 0.16);
}
:host.validation-highlighted .container-node::before {
border-color: #fca5a5;
}
.container-node__lane-chip {