feat: enhance website flow and user workbench
This commit is contained in:
boos
+206
-1
@@ -358,6 +358,7 @@ a {
|
||||
.console-preview-section,
|
||||
.factory-section,
|
||||
.studio-section,
|
||||
.pipeline-section,
|
||||
.control-section,
|
||||
.deploy-section,
|
||||
.final-section {
|
||||
@@ -1103,6 +1104,7 @@ a {
|
||||
.ops-section,
|
||||
.factory-section,
|
||||
.studio-section,
|
||||
.pipeline-section,
|
||||
.control-section,
|
||||
.deploy-section,
|
||||
.final-section {
|
||||
@@ -1124,6 +1126,7 @@ a {
|
||||
|
||||
.section-heading span,
|
||||
.studio-copy span,
|
||||
.pipeline-copy span,
|
||||
.control-panel span,
|
||||
.ops-copy span,
|
||||
.console-preview-copy > span,
|
||||
@@ -1140,6 +1143,7 @@ a {
|
||||
.section-heading h2,
|
||||
.workflow-panel h2,
|
||||
.studio-copy h2,
|
||||
.pipeline-copy h2,
|
||||
.control-panel h2,
|
||||
.ops-copy h2,
|
||||
.console-preview-copy h2,
|
||||
@@ -1249,6 +1253,9 @@ a {
|
||||
.endpoint-card p,
|
||||
.studio-copy p,
|
||||
.studio-flow p,
|
||||
.pipeline-copy p,
|
||||
.pipeline-request p,
|
||||
.pipeline-steps p,
|
||||
.workflow-panel p,
|
||||
.ops-copy p,
|
||||
.ops-card p,
|
||||
@@ -1264,6 +1271,9 @@ a {
|
||||
.capability-card,
|
||||
.endpoint-card,
|
||||
.studio-flow article,
|
||||
.pipeline-request,
|
||||
.pipeline-steps article,
|
||||
.pipeline-output,
|
||||
.control-grid > div,
|
||||
.ops-card,
|
||||
.console-preview-stats > div,
|
||||
@@ -1276,6 +1286,9 @@ a {
|
||||
.capability-card:hover,
|
||||
.endpoint-card:hover,
|
||||
.studio-flow article:hover,
|
||||
.pipeline-request:hover,
|
||||
.pipeline-steps article:hover,
|
||||
.pipeline-output:hover,
|
||||
.control-grid > div:hover,
|
||||
.ops-card:hover,
|
||||
.console-preview-stats > div:hover,
|
||||
@@ -1350,6 +1363,183 @@ a {
|
||||
letter-spacing: -0.045em;
|
||||
}
|
||||
|
||||
.pipeline-section {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
|
||||
gap: 18px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.pipeline-copy,
|
||||
.pipeline-board {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 32px;
|
||||
background: var(--panel-gradient);
|
||||
box-shadow: inset 0 1px 0 var(--surface-highlight);
|
||||
}
|
||||
|
||||
.pipeline-copy {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 18px;
|
||||
padding: 34px;
|
||||
}
|
||||
|
||||
.pipeline-board {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1fr) minmax(220px, 0.72fr);
|
||||
gap: 12px;
|
||||
padding: clamp(18px, 3vw, 30px);
|
||||
}
|
||||
|
||||
.pipeline-board::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
background:
|
||||
linear-gradient(var(--console-grid-y) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--console-grid-x) 1px, transparent 1px);
|
||||
background-size: 38px 38px;
|
||||
mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
|
||||
}
|
||||
|
||||
.pipeline-request,
|
||||
.pipeline-output,
|
||||
.pipeline-steps article {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 20px;
|
||||
background: var(--surface);
|
||||
box-shadow: inset 0 1px 0 var(--surface-highlight);
|
||||
}
|
||||
|
||||
.pipeline-request {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.pipeline-request span,
|
||||
.pipeline-output-head span,
|
||||
.pipeline-output-row span,
|
||||
.pipeline-steps article span {
|
||||
color: var(--faint);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pipeline-request strong {
|
||||
max-width: 16ch;
|
||||
color: var(--text);
|
||||
font-size: clamp(21px, 2.2vw, 30px);
|
||||
line-height: 1.04;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.pipeline-steps {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pipeline-steps article {
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
min-height: 78px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.pipeline-steps em {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 12px;
|
||||
color: var(--text);
|
||||
background: var(--pill-featured-bg);
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.pipeline-steps strong {
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pipeline-steps article span {
|
||||
justify-self: end;
|
||||
min-width: 74px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
padding: 6px 8px;
|
||||
background: var(--surface-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pipeline-output {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.pipeline-output-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pipeline-output-head strong,
|
||||
.pipeline-output-row em {
|
||||
color: var(--acid);
|
||||
font-family: var(--font-geist-mono), monospace;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pipeline-output-row {
|
||||
min-height: 54px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 4px 8px;
|
||||
align-items: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: var(--surface-muted);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pipeline-output-row strong {
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pipeline-output-row span {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.pipeline-output-row em {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 2;
|
||||
align-self: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.endpoint-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -1811,6 +2001,7 @@ a {
|
||||
.api-section,
|
||||
.workflow-section,
|
||||
.ops-section,
|
||||
.pipeline-section,
|
||||
.console-preview-section,
|
||||
.studio-section,
|
||||
.control-section,
|
||||
@@ -1838,7 +2029,8 @@ a {
|
||||
}
|
||||
|
||||
.section-heading.split,
|
||||
.endpoint-grid {
|
||||
.endpoint-grid,
|
||||
.pipeline-board {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@@ -1859,6 +2051,7 @@ a {
|
||||
.api-section,
|
||||
.workflow-section,
|
||||
.ops-section,
|
||||
.pipeline-section,
|
||||
.console-preview-section,
|
||||
.studio-section,
|
||||
.control-section,
|
||||
@@ -1942,6 +2135,8 @@ a {
|
||||
|
||||
.workflow-panel,
|
||||
.studio-copy,
|
||||
.pipeline-copy,
|
||||
.pipeline-board,
|
||||
.control-section,
|
||||
.ops-copy,
|
||||
.ops-grid,
|
||||
@@ -1978,8 +2173,18 @@ a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pipeline-steps article {
|
||||
grid-template-columns: 34px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.pipeline-steps article span {
|
||||
grid-column: 2;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.factory-section,
|
||||
.control-section,
|
||||
.pipeline-section,
|
||||
.console-preview-section,
|
||||
.deploy-section {
|
||||
gap: 22px;
|
||||
|
||||
Reference in New Issue
Block a user