feat: add interactive campus workflow graph
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
lofyer
co-authored by
factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
parent
8dff9847e3
commit
248078113c
+719
-76
@@ -2255,6 +2255,10 @@ body textarea {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.app-shell .eyebrow {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
.app-shell .main-content span,
|
||||
.app-shell .main-content em {
|
||||
font-size: 13px !important;
|
||||
@@ -2722,113 +2726,558 @@ body textarea {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loop-chain {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
.loop-status-panel {
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 96% 2%, rgba(198, 230, 111, 0.08), transparent 24%),
|
||||
white;
|
||||
}
|
||||
|
||||
.loop-stage {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: 36px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
padding: 13px;
|
||||
background: #f8faf8;
|
||||
border: 1px solid var(--line-soft);
|
||||
.loop-flow-toolbar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin: 18px 0 12px;
|
||||
padding: 10px;
|
||||
background: #f3f7f4;
|
||||
border: 1px solid #e1e9e3;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.loop-stage > i {
|
||||
.loop-flow-summary {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.loop-flow-summary > span {
|
||||
min-width: 0;
|
||||
padding: 9px 11px;
|
||||
background: white;
|
||||
border: 1px solid #e5ebe6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.loop-flow-summary small,
|
||||
.loop-flow-summary strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loop-flow-summary small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.loop-flow-summary strong {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-flow-toolbar > .button {
|
||||
align-self: stretch;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.loop-flow-scroll {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
background:
|
||||
linear-gradient(rgba(35, 107, 79, 0.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(35, 107, 79, 0.045) 1px, transparent 1px),
|
||||
#f7f9f7;
|
||||
background-size: 25px 25px;
|
||||
border: 1px solid #dce5df;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.loop-flow-canvas {
|
||||
--loop-canvas-width: 1000px;
|
||||
--loop-canvas-height: 600px;
|
||||
--loop-node-width: 170px;
|
||||
--loop-node-height: 130px;
|
||||
position: relative;
|
||||
width: var(--loop-canvas-width);
|
||||
min-width: var(--loop-canvas-width);
|
||||
height: var(--loop-canvas-height);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.loop-flow-edges,
|
||||
.loop-flow-nodes {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.loop-flow-edges {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loop-flow-edge path {
|
||||
fill: none;
|
||||
stroke: #bdc9c2;
|
||||
stroke-width: 2;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.loop-flow-edge text {
|
||||
fill: #77867e;
|
||||
stroke: #f7f9f7;
|
||||
stroke-width: 5px;
|
||||
paint-order: stroke;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loop-flow-edge.complete path {
|
||||
stroke: var(--green);
|
||||
}
|
||||
|
||||
.loop-flow-edge.current path {
|
||||
stroke: #d69a31;
|
||||
stroke-dasharray: 7 5;
|
||||
}
|
||||
|
||||
.loop-flow-edge.risk path {
|
||||
stroke: #c76656;
|
||||
stroke-dasharray: 6 4;
|
||||
}
|
||||
|
||||
.loop-flow-edge.branch path {
|
||||
stroke: #96a69d;
|
||||
stroke-dasharray: 5 5;
|
||||
}
|
||||
|
||||
#loop-arrow-complete path {
|
||||
fill: var(--green);
|
||||
}
|
||||
|
||||
#loop-arrow-current path {
|
||||
fill: #d69a31;
|
||||
}
|
||||
|
||||
#loop-arrow-risk path {
|
||||
fill: #c76656;
|
||||
}
|
||||
|
||||
#loop-arrow-locked path,
|
||||
#loop-arrow-branch path {
|
||||
fill: #96a69d;
|
||||
}
|
||||
|
||||
.loop-flow-node {
|
||||
position: absolute;
|
||||
left: var(--loop-x);
|
||||
top: var(--loop-y);
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
width: var(--loop-node-width);
|
||||
height: var(--loop-node-height);
|
||||
grid-template-columns: 34px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
padding: 11px;
|
||||
color: var(--ink);
|
||||
background: white;
|
||||
border: 1px solid #dfe7e1;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 7px 20px rgba(24, 61, 46, 0.07);
|
||||
text-align: left;
|
||||
transition:
|
||||
transform 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.loop-flow-node:hover,
|
||||
.loop-flow-node:focus-visible {
|
||||
z-index: 3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 28px rgba(24, 61, 46, 0.14);
|
||||
}
|
||||
|
||||
.loop-flow-node.selected {
|
||||
z-index: 3;
|
||||
outline: 3px solid rgba(35, 135, 101, 0.16);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.loop-flow-node.complete {
|
||||
background: #f2f8f5;
|
||||
border-color: #a9d0ba;
|
||||
}
|
||||
|
||||
.loop-flow-node.complete.has-risk {
|
||||
background: #fff8f5;
|
||||
border-color: #d9a293;
|
||||
box-shadow: inset 0 3px #c76656;
|
||||
}
|
||||
|
||||
.loop-flow-node.current {
|
||||
background: #fffaf0;
|
||||
border-color: #ddac55;
|
||||
box-shadow: 0 9px 25px rgba(181, 124, 27, 0.16);
|
||||
}
|
||||
|
||||
.loop-flow-node.risk {
|
||||
background: #fff5f2;
|
||||
border-color: #db9b8c;
|
||||
box-shadow: 0 9px 25px rgba(173, 78, 69, 0.13);
|
||||
}
|
||||
|
||||
.loop-flow-node.locked {
|
||||
color: #66736c;
|
||||
background: #f6f8f6;
|
||||
border-style: dashed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.loop-flow-node.locked.has-risk {
|
||||
background: #fff8f5;
|
||||
border-color: #d9a293;
|
||||
}
|
||||
|
||||
.loop-flow-node-step {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
color: var(--green);
|
||||
background: #e7f3ed;
|
||||
color: #6f7e76;
|
||||
background: #e9eeeb;
|
||||
border-radius: 9px;
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loop-stage.review > i {
|
||||
color: #916217;
|
||||
background: #fff6df;
|
||||
}
|
||||
|
||||
.loop-stage.risk > i {
|
||||
color: #ad4e45;
|
||||
background: #fff0ed;
|
||||
}
|
||||
|
||||
.loop-stage.done > i {
|
||||
.loop-flow-node.complete .loop-flow-node-step {
|
||||
color: white;
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.loop-stage span,
|
||||
.loop-stage small,
|
||||
.loop-stage strong,
|
||||
.loop-stage em {
|
||||
.loop-flow-node.complete.has-risk .loop-flow-node-step {
|
||||
background: #b95b4d;
|
||||
}
|
||||
|
||||
.loop-flow-node.current .loop-flow-node-step {
|
||||
color: #825813;
|
||||
background: #ffecc5;
|
||||
}
|
||||
|
||||
.loop-flow-node.risk .loop-flow-node-step {
|
||||
color: #a34e42;
|
||||
background: #ffe3dc;
|
||||
}
|
||||
|
||||
.loop-flow-node-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loop-flow-node-copy small,
|
||||
.loop-flow-node-copy strong,
|
||||
.loop-flow-node-copy em {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loop-stage small {
|
||||
.loop-flow-node-copy small {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.loop-stage strong {
|
||||
margin: 3px 0;
|
||||
overflow-wrap: anywhere;
|
||||
font-size: 13px;
|
||||
.loop-flow-node-copy strong {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.loop-stage em {
|
||||
color: var(--green-2);
|
||||
font-size: 13px;
|
||||
.loop-flow-node-copy em {
|
||||
overflow: hidden;
|
||||
color: var(--green);
|
||||
font-style: normal;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-entity-grid {
|
||||
.loop-flow-node.current .loop-flow-node-copy em {
|
||||
color: #9b6817;
|
||||
}
|
||||
|
||||
.loop-flow-node.complete.has-risk .loop-flow-node-copy em,
|
||||
.loop-flow-node.risk .loop-flow-node-copy em {
|
||||
color: #a34e42;
|
||||
}
|
||||
|
||||
.loop-flow-node.locked .loop-flow-node-copy em {
|
||||
color: #88948e;
|
||||
}
|
||||
|
||||
.loop-flow-node-owner {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 4px;
|
||||
padding-top: 7px;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
border-top: 1px solid rgba(94, 113, 103, 0.14);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-flow-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.loop-mobile-branches {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loop-flow-legend > span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.loop-flow-legend i {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background: #f4f6f4;
|
||||
border: 2px dashed #aebbb4;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.loop-flow-legend i.complete {
|
||||
background: var(--green);
|
||||
border-color: var(--green);
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-flow-legend i.current {
|
||||
background: #fff2d5;
|
||||
border-color: #d59a31;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-flow-legend i.risk {
|
||||
background: #ffe5df;
|
||||
border-color: #c76656;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-node-detail {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.loop-node-hero {
|
||||
display: grid;
|
||||
grid-template-columns: 54px minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 13px;
|
||||
padding: 16px;
|
||||
color: #dcebe4;
|
||||
background:
|
||||
radial-gradient(circle at 92% 10%, rgba(198, 230, 111, 0.14), transparent 26%),
|
||||
linear-gradient(135deg, #173f33, #102e26);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.loop-node-hero.current {
|
||||
background:
|
||||
radial-gradient(circle at 92% 10%, rgba(255, 228, 167, 0.18), transparent 26%),
|
||||
linear-gradient(135deg, #4b3819, #2e281d);
|
||||
}
|
||||
|
||||
.loop-node-hero.risk {
|
||||
background:
|
||||
radial-gradient(circle at 92% 10%, rgba(255, 213, 202, 0.16), transparent 26%),
|
||||
linear-gradient(135deg, #543128, #33231f);
|
||||
}
|
||||
|
||||
.loop-node-hero.locked {
|
||||
color: #d7dfda;
|
||||
background: linear-gradient(135deg, #45534c, #303a35);
|
||||
}
|
||||
|
||||
.loop-node-hero-step {
|
||||
display: grid;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
place-items: center;
|
||||
color: #173f33;
|
||||
background: var(--lime);
|
||||
border-radius: 12px;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.loop-node-hero small,
|
||||
.loop-node-hero strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loop-node-hero small {
|
||||
color: #9db3aa;
|
||||
}
|
||||
|
||||
.loop-node-hero strong {
|
||||
margin-top: 5px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.loop-node-hero p {
|
||||
margin: 7px 0 0;
|
||||
color: #a8bdb4;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.loop-node-hero > em {
|
||||
padding: 6px 8px;
|
||||
color: var(--lime);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 7px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-node-io {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.loop-node-io article {
|
||||
padding: 12px;
|
||||
background: #f7faf8;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.loop-node-io span,
|
||||
.loop-node-io strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loop-node-io span {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.loop-node-io strong {
|
||||
margin-top: 6px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.loop-node-io > i {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #91a49a;
|
||||
}
|
||||
|
||||
.loop-node-io svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.loop-node-facts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.loop-entity-grid article {
|
||||
.loop-node-facts > span {
|
||||
min-width: 0;
|
||||
padding: 15px;
|
||||
background: #f9fbf9;
|
||||
padding: 11px;
|
||||
background: white;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 11px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.loop-entity-grid span,
|
||||
.loop-entity-grid strong,
|
||||
.loop-entity-grid small {
|
||||
.loop-node-facts small,
|
||||
.loop-node-facts strong {
|
||||
display: block;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.loop-entity-grid span {
|
||||
color: var(--green);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loop-entity-grid strong {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loop-entity-grid small {
|
||||
margin-top: 5px;
|
||||
.loop-node-facts small {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.loop-node-facts strong {
|
||||
margin-top: 5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.loop-node-relations {
|
||||
padding: 12px;
|
||||
background: #f6f8f6;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.loop-node-relations > span {
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.loop-node-relations > div {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.loop-node-relations button {
|
||||
max-width: 100%;
|
||||
padding: 6px 8px;
|
||||
overflow: hidden;
|
||||
color: var(--green);
|
||||
background: white;
|
||||
border: 1px solid #cfdfd6;
|
||||
border-radius: 6px;
|
||||
font-family: "SFMono-Regular", Consolas, monospace;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.loop-node-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #edf7f1;
|
||||
border: 1px solid #d2e6da;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.loop-node-action.locked,
|
||||
.loop-node-action.readonly {
|
||||
background: #f6f8f6;
|
||||
border-color: var(--line-soft);
|
||||
}
|
||||
|
||||
.loop-node-action span,
|
||||
.loop-node-action strong,
|
||||
.loop-node-action small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loop-node-action small {
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.loop-role-boundary {
|
||||
@@ -2857,12 +3306,13 @@ body textarea {
|
||||
}
|
||||
|
||||
.loop-action-list > button {
|
||||
display: flex;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
grid-template-columns: 34px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 13px;
|
||||
gap: 9px;
|
||||
padding: 11px;
|
||||
color: var(--ink);
|
||||
background: white;
|
||||
border: 1px solid var(--line-soft);
|
||||
@@ -2870,33 +3320,60 @@ body textarea {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.loop-action-list > button:not(:disabled):hover {
|
||||
background: #f3f9f6;
|
||||
border-color: #a9cfbb;
|
||||
}
|
||||
|
||||
.loop-action-list button:disabled {
|
||||
opacity: 0.58;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loop-action-list > button > i {
|
||||
display: grid;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
place-items: center;
|
||||
color: var(--green);
|
||||
background: var(--green-soft);
|
||||
border-radius: 8px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.loop-action-list span,
|
||||
.loop-action-list strong,
|
||||
.loop-action-list small {
|
||||
.loop-action-list small,
|
||||
.loop-action-list em {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loop-action-list strong {
|
||||
margin-top: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.loop-action-list small {
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.loop-action-list em {
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
line-height: 1.45;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-action-list b {
|
||||
flex: 0 0 auto;
|
||||
color: var(--green);
|
||||
font-size: 13px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -3085,11 +3562,13 @@ body textarea {
|
||||
.loop-action-panel {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.loop-flow-summary {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.loop-chain,
|
||||
.loop-entity-grid,
|
||||
.loop-modal-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -3103,6 +3582,170 @@ body textarea {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loop-flow-toolbar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loop-flow-summary {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.loop-flow-toolbar > .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loop-flow-scroll {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.loop-flow-canvas {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.loop-flow-edges {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loop-flow-nodes {
|
||||
position: static;
|
||||
display: grid;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.loop-flow-node {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.loop-flow-node:not(:last-child)::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: -14px;
|
||||
left: 28px;
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
background: #9fb1a7;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.loop-flow-legend {
|
||||
gap: 8px 12px;
|
||||
}
|
||||
|
||||
.loop-mobile-branches {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button {
|
||||
display: grid;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 4px 8px;
|
||||
padding: 10px;
|
||||
color: var(--ink);
|
||||
background: #f7f9f7;
|
||||
border: 1px dashed #b9c6bf;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button.active.risk {
|
||||
background: #fff4f1;
|
||||
border-color: #cf7969;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button.active.cycle {
|
||||
background: #fff9ec;
|
||||
border-color: #d9a44a;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.loop-mobile-branches span {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.loop-mobile-branches i,
|
||||
.loop-mobile-branches em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.loop-mobile-branches i {
|
||||
color: #8c9992;
|
||||
}
|
||||
|
||||
.loop-mobile-branches small {
|
||||
grid-column: 1 / -1;
|
||||
color: var(--muted);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.loop-mobile-branches em {
|
||||
align-self: start;
|
||||
color: var(--muted);
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button.active.risk em {
|
||||
color: #ad4e45;
|
||||
}
|
||||
|
||||
.loop-mobile-branches button.active.cycle em {
|
||||
color: #956313;
|
||||
}
|
||||
|
||||
.loop-node-hero {
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
.loop-node-hero-step {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.loop-node-hero > em {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.loop-node-io {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.loop-node-io > i {
|
||||
height: 14px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.loop-node-facts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.loop-node-action {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.loop-node-action .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.report-approval-toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user