switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Feat v0.6.12 css isolation (#47)
All checks were successful
CI/CD / detect-changes (push) Successful in 4s
Details
CI/CD / test-frontend (push) Successful in 6s
Details
CI/CD / test-go-pg (push) Successful in 2m44s
Details
CI/CD / test-sqlite (push) Successful in 2m47s
Details
CI/CD / build-and-deploy (push) Successful in 1m46s
Details

Browse Source 
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #47.
This commit is contained in:
Jeffrey Smith
2026-04-01 11:58:39 +00:00
committed by xcaliber
parent 786bc92768
commit 221ae94f4f
33 changed files with 1385 additions and 1074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
packages/workflow-demo/css/main.css
View File

@@ -4,14 +4,14 @@
defined in variables.css for automatic dark/light support.
========================================== */
.surface-workflow-demo {
.ext-workflow-demo {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem 2rem;
}
/* Topbar */
.demo-topbar {
.ext-workflow-demo-topbar {
display: flex;
align-items: center;
justify-content: space-between;
@@ -19,7 +19,7 @@
border-bottom: 1px solid var(--border);
margin-bottom: 1rem;
}
.demo-topbar h1 {
.ext-workflow-demo-topbar h1 {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
@@ -27,26 +27,26 @@
}
/* Subtitle */
.demo-subtitle {
.ext-workflow-demo-subtitle {
color: var(--text-2);
margin: 0 0 1.5rem;
font-size: 0.9rem;
}
/* Grid */
.demo-grid {
.ext-workflow-demo-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.demo-grid {
.ext-workflow-demo-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Card */
.demo-card {
.ext-workflow-demo-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
@@ -58,22 +58,22 @@
}
/* Title row */
.card-title-row {
.ext-workflow-demo-card-title-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-title-row h2 {
.ext-workflow-demo-card-title-row h2 {
font-size: 1.1rem;
font-weight: 600;
margin: 0;
flex: 1;
color: var(--text);
}
.card-icon {
.ext-workflow-demo-card-icon {
font-size: 1.3rem;
}
.card-tier {
.ext-workflow-demo-card-tier {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
@@ -81,11 +81,11 @@
border-radius: 4px;
font-weight: 600;
}
.badge-browser { background: var(--success-dim); color: var(--success-light); }
.badge-starlark { background: var(--accent-dim); color: var(--accent-light); }
.ext-workflow-demo-badge-browser { background: var(--success-dim); color: var(--success-light); }
.ext-workflow-demo-badge-starlark { background: var(--accent-dim); color: var(--accent-light); }
/* Description */
.card-desc {
.ext-workflow-demo-card-desc {
color: var(--text-2);
font-size: 0.85rem;
margin: 0;
@@ -93,12 +93,12 @@
}
/* Badges */
.card-badges {
.ext-workflow-demo-card-badges {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.demo-card .badge {
.ext-workflow-demo-card .ext-workflow-demo-badge {
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 10px;
@@ -106,12 +106,12 @@
color: var(--text-2);
white-space: nowrap;
}
.demo-card .badge-installed { background: var(--success-dim); color: var(--success-light); }
.demo-card .badge-not-installed { background: var(--warning-dim); color: var(--warning-light); }
.demo-card .badge-needs-publish { background: var(--danger-dim); color: var(--danger-light); }
.ext-workflow-demo-card .ext-workflow-demo-badge-installed { background: var(--success-dim); color: var(--success-light); }
.ext-workflow-demo-card .ext-workflow-demo-badge-not-installed { background: var(--warning-dim); color: var(--warning-light); }
.ext-workflow-demo-card .ext-workflow-demo-badge-needs-publish { background: var(--danger-dim); color: var(--danger-light); }
/* Stage flow diagram */
.stage-flow {
.ext-workflow-demo-stage-flow {
display: flex;
align-items: flex-start;
gap: 0.25rem;
@@ -122,7 +122,7 @@
overflow-x: auto;
}
.stage-node {
.ext-workflow-demo-stage-node {
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.4rem 0.6rem;
@@ -132,31 +132,31 @@
font-size: 0.75rem;
color: var(--text);
}
.stage-node.stage-public {
.ext-workflow-demo-stage-node.ext-workflow-demo-stage-public {
border-color: var(--success);
background: var(--success-dim);
}
.stage-node.stage-system {
.ext-workflow-demo-stage-node.ext-workflow-demo-stage-system {
border-color: var(--accent);
background: var(--accent-dim);
}
.stage-label {
.ext-workflow-demo-stage-label {
font-weight: 600;
font-size: 0.8rem;
}
.stage-meta {
.ext-workflow-demo-stage-meta {
color: var(--text-3);
font-size: 0.65rem;
}
.stage-note {
.ext-workflow-demo-stage-note {
color: var(--warning-light);
font-size: 0.6rem;
font-style: italic;
margin-top: 2px;
}
.stage-arrow {
.ext-workflow-demo-stage-arrow {
display: flex;
align-items: center;
font-size: 1.1rem;
@@ -166,25 +166,25 @@
}
/* Collapsible sections */
.card-collapsible {
.ext-workflow-demo-card-collapsible {
border: 1px solid var(--border);
border-radius: 6px;
font-size: 0.8rem;
}
.card-collapsible summary {
.ext-workflow-demo-card-collapsible summary {
padding: 0.5rem 0.75rem;
cursor: pointer;
font-weight: 600;
user-select: none;
color: var(--text);
}
.card-collapsible summary:hover {
.ext-workflow-demo-card-collapsible summary:hover {
background: var(--bg-hover);
}
.collapsible-content {
.ext-workflow-demo-collapsible-content {
padding: 0 0.75rem 0.75rem;
}
.collapsible-content pre {
.ext-workflow-demo-collapsible-content pre {
background: var(--bg-raised);
color: var(--text);
padding: 0.5rem;
@@ -197,7 +197,7 @@
}
/* Actions */
.card-actions {
.ext-workflow-demo-card-actions {
display: flex;
align-items: center;
gap: 0.5rem;
@@ -205,7 +205,7 @@
padding-top: 0.5rem;
border-top: 1px solid var(--border);
}
.demo-card .btn {
.ext-workflow-demo-card .ext-workflow-demo-btn {
padding: 0.4rem 1rem;
border: none;
border-radius: 6px;
@@ -216,13 +216,13 @@
/* demo-card buttons — uses kernel .sw-btn--primary */
/* Public link row */
.public-link-row {
.ext-workflow-demo-public-link-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.25rem;
}
.public-link-row input {
.ext-workflow-demo-public-link-row input {
flex: 1;
font-size: 0.7rem;
padding: 4px 8px;
@@ -232,7 +232,7 @@
color: var(--text);
font-family: var(--mono);
}
.public-link-row .btn-copy {
.ext-workflow-demo-public-link-row .ext-workflow-demo-btn-copy {
padding: 4px 10px;
font-size: 0.7rem;
background: var(--bg-raised);
@@ -241,6 +241,6 @@
color: var(--text-2);
cursor: pointer;
}
.public-link-row .btn-copy:hover {
.ext-workflow-demo-public-link-row .ext-workflow-demo-btn-copy:hover {
background: var(--bg-hover);
}