From be502a492d134b9bd3c5e8008fcf86f2becd4321 Mon Sep 17 00:00:00 2001 From: florianhandke Date: Thu, 1 Oct 2026 08:33:53 +0200 Subject: [PATCH 1/3] Refactor workflow templates for improved styling and consistency --- trustpoint/static/css/workflows2_editor.css | 2738 ++++------------- .../templates/pki/cert_profiles/add.html | 44 +- .../pki/cert_profiles/cert_profiles.html | 76 +- .../templates/pki/cert_profiles/config.html | 84 +- .../pki/cert_profiles/confirm_delete.html | 61 +- .../pki/cert_profiles/domain_table.html | 16 +- .../includes/profile-builder-sidebar.html | 13 +- .../pki/truststores/add/file_import.html | 44 +- .../pki/truststores/confirm_delete.html | 58 +- .../templates/pki/truststores/details.html | 52 +- .../templates/pki/truststores/download.html | 70 +- .../pki/truststores/download_multiple.html | 92 +- .../pki/truststores/sub_details.html | 19 +- .../pki/truststores/sub_generic.html | 6 +- .../pki/truststores/subject_table.html | 24 +- .../pki/truststores/table_filter.html | 17 +- .../pki/truststores/truststores.html | 79 +- .../templates/workflows2/approval_detail.html | 28 +- .../workflows2/definition_editor.html | 155 +- .../templates/workflows2/definition_list.html | 9 +- trustpoint/templates/workflows2/dev.html | 35 +- .../workflows2/diagram_readonly.html | 30 +- .../templates/workflows2/instance_detail.html | 73 +- .../templates/workflows2/run_detail.html | 42 +- trustpoint/workflows2/forms.py | 2 +- 25 files changed, 1204 insertions(+), 2663 deletions(-) diff --git a/trustpoint/static/css/workflows2_editor.css b/trustpoint/static/css/workflows2_editor.css index bb8015fa6..95bbcc4e3 100644 --- a/trustpoint/static/css/workflows2_editor.css +++ b/trustpoint/static/css/workflows2_editor.css @@ -1,2177 +1,779 @@ -/* --- diagram-js base (minimal essential) --- */ -.djs-container, -.djs-container * { - box-sizing: border-box; -} - -.djs-container { - position: relative; - overflow: hidden; - background: #111; -} - -.djs-container svg { - display: block; -} - -.djs-container svg, -.djs-container .djs-overlay-container { - position: absolute; - top: 0; - left: 0; -} - -.djs-overlay-container { - pointer-events: none; -} - -.djs-overlay { - position: absolute; - pointer-events: all; -} - -.djs-visual { - pointer-events: all; -} - -.djs-outline { - fill: none; - shape-rendering: crispEdges; -} - -.djs-element.hover .djs-outline { - stroke: rgba(255, 255, 255, .35); - stroke-width: 2px; -} - -.djs-element.selected .djs-outline { - stroke: rgba(255, 255, 255, .25); - stroke-width: 2px; -} - -.djs-lasso-overlay { - fill: rgba(255, 255, 255, .08); - stroke: rgba(255, 255, 255, .25); - stroke-width: 1px; -} - -/* --- YOUR REQUEST: remove the blue selection boxes entirely --- */ -.djs-element.selected .djs-outline, -.djs-element.hover .djs-outline { - stroke: transparent !important; - stroke-width: 0 !important; -} - -/* Optional: make the canvas feel nicer */ -.wf2-editor-root { - height: calc(100vh - 56px); - border: 1px solid rgba(255,255,255,.12); - border-radius: 12px; - overflow: hidden; -} - - -/* --- workflow2 editor UI --- */ - #wf2-editor-root, - .wf2-guide-drawer, - .wf2-page, - .wf2-list-page { - --wf2-surface: #ffffff; - --wf2-surface-soft: #f8fbff; - --wf2-surface-subtle: #f4f7fb; - --wf2-surface-muted: #fafafa; - --wf2-border: #dce4f2; - --wf2-border-soft: #e4ebf7; - --wf2-border-muted: #e9ecef; - --wf2-text: #1f2937; - --wf2-text-muted: #607089; - --wf2-text-soft: #5c667a; - --wf2-accent: #0d6efd; - --wf2-accent-soft: #eef5ff; - --wf2-accent-strong: #355c9b; - --wf2-accent-ring: rgba(13, 110, 253, 0.16); - --wf2-warning: #b26a00; - --wf2-warning-soft: #fffaf0; - --wf2-warning-border: #ffe69c; - --wf2-danger-soft: #fff5f5; - --wf2-danger-border: #f5c2c7; - --wf2-shadow: 0 0.45rem 1rem rgba(19, 33, 68, 0.05); - --wf2-shadow-strong: 0 1rem 2.5rem rgba(19, 33, 68, 0.16); - - --wf2-editor-surface: #ffffff; - --wf2-editor-border: #dee2e6; - --wf2-editor-border-soft: #e9ecef; - --wf2-editor-gutter: #fafafa; - --wf2-editor-active-gutter: #f1f3f5; - --wf2-editor-active-line: #fcfcfd; - --wf2-editor-selection: rgba(13, 110, 253, 0.16); - --wf2-editor-selection-strong: rgba(13, 110, 253, 0.28); - --wf2-editor-text: #1f2937; - --wf2-editor-muted: #6c757d; - --wf2-editor-accent: #0d6efd; - --wf2-editor-key: #1d4ed8; - --wf2-editor-string: #0f766e; - --wf2-editor-number: #b45309; - --wf2-editor-atom: #c2410c; - --wf2-editor-comment: #718096; - --wf2-editor-punctuation: #64748b; - --wf2-editor-invalid: #c92a2a; - - --wf2-graph-accent: #0d6efd; - --wf2-graph-edge-color: #6c757d; - --wf2-graph-node-fill: #ffffff; - --wf2-graph-node-stroke: #adb5bd; - --wf2-graph-virtual-fill: #fff8e1; - --wf2-graph-unreachable-fill: #fff8f1; - --wf2-graph-warning: #f59f00; - --wf2-graph-grid: #f8f9fa; - --wf2-graph-label-stroke: #ffffff; - --wf2-graph-node-text: #212529; - --wf2-graph-node-meta: #6c757d; - } - - [data-bs-theme="dark"] #wf2-editor-root, - [data-bs-theme="dark"] .wf2-guide-drawer, - [data-bs-theme="dark"] .wf2-page, - [data-bs-theme="dark"] .wf2-list-page { - --wf2-surface: #18212f; - --wf2-surface-soft: #202b3a; - --wf2-surface-subtle: #111a26; - --wf2-surface-muted: #16202d; - --wf2-border: #314156; - --wf2-border-soft: #27364a; - --wf2-border-muted: #2a384c; - --wf2-text: #ecf3ff; - --wf2-text-muted: #a8b6cb; - --wf2-text-soft: #c3d0e2; - --wf2-accent: #7ab2ff; - --wf2-accent-soft: rgba(122, 178, 255, 0.14); - --wf2-accent-strong: #a9ceff; - --wf2-accent-ring: rgba(122, 178, 255, 0.22); - --wf2-warning: #ffcb6b; - --wf2-warning-soft: rgba(255, 203, 107, 0.1); - --wf2-warning-border: rgba(255, 203, 107, 0.28); - --wf2-danger-soft: rgba(245, 194, 199, 0.1); - --wf2-danger-border: rgba(245, 194, 199, 0.26); - --wf2-shadow: 0 0.65rem 1.4rem rgba(0, 0, 0, 0.24); - --wf2-shadow-strong: 0 1rem 2.8rem rgba(0, 0, 0, 0.42); - - --wf2-editor-surface: #0f1723; - --wf2-editor-border: #334155; - --wf2-editor-border-soft: #263445; - --wf2-editor-gutter: #111c29; - --wf2-editor-active-gutter: #1b2837; - --wf2-editor-active-line: #152130; - --wf2-editor-selection: rgba(122, 178, 255, 0.2); - --wf2-editor-selection-strong: rgba(122, 178, 255, 0.34); - --wf2-editor-text: #ecf3ff; - --wf2-editor-muted: #9fb0c7; - --wf2-editor-accent: #7ab2ff; - --wf2-editor-key: #8fc7ff; - --wf2-editor-string: #9ae6b4; - --wf2-editor-number: #ffd166; - --wf2-editor-atom: #ffba84; - --wf2-editor-comment: #8ea3bc; - --wf2-editor-punctuation: #c1cedf; - --wf2-editor-invalid: #ff8f8f; - - --wf2-graph-accent: #7ab2ff; - --wf2-graph-edge-color: #8da1bb; - --wf2-graph-node-fill: #172231; - --wf2-graph-node-stroke: #51647f; - --wf2-graph-virtual-fill: #2f2a1d; - --wf2-graph-unreachable-fill: #33251d; - --wf2-graph-warning: #ffcb6b; - --wf2-graph-grid: rgba(255, 255, 255, 0.05); - --wf2-graph-label-stroke: #0f1723; - --wf2-graph-node-text: #ecf3ff; - --wf2-graph-node-meta: #9fb0c7; - } - - .wf2-hidden-textarea { - display: none; - } - - #wf2-editor-root { - color: var(--wf2-text); - } - - .wf2-editor-host { - width: 100%; - } - - .wf2-pretty-box { - max-height: 32rem; - overflow: auto; - margin: 0; - padding: 0.9rem; - border: 1px solid #e9ecef; - border-radius: 0.5rem; - background: #fafafa; - font-size: 0.85rem; - line-height: 1.45; - white-space: pre-wrap; - word-break: break-word; - } - - .wf2-chip { - display: inline-block; - margin: 0 0.35rem 0.35rem 0; - padding: 0.2rem 0.5rem; - border: 1px solid #dee2e6; - border-radius: 999px; - background: #fff; - font-size: 0.8rem; - } - - .wf2-chip strong { - font-weight: 600; - } - - .wf2-guide-drawer { - position: fixed; - top: 0; - right: 0; - width: min(38rem, 96vw); - height: 100vh; - background: #f4f7fb; - box-shadow: -16px 0 40px rgba(19, 33, 68, 0.18); - border-left: 1px solid #dce4f2; - transform: translateX(100%); - transition: transform 0.2s ease; - z-index: 1050; - display: flex; - flex-direction: column; - } - - .wf2-guide-drawer-eyebrow { - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: #0d6efd; - margin-bottom: 0.2rem; - } - - .wf2-guide-drawer-header { - display: flex; - justify-content: space-between; - align-items: start; - gap: 1rem; - padding: 1.1rem 1.25rem 1rem; - border-bottom: 1px solid #dce4f2; - background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%); - } - - .wf2-guide-drawer-body { - padding: 1rem; - overflow: auto; - min-height: 0; - display: flex; - flex-direction: column; - gap: 1rem; - background: - radial-gradient(circle at top right, rgba(13, 110, 253, 0.06), transparent 30%), - linear-gradient(180deg, #f7f9fc 0%, #f4f7fb 100%); - } - - .wf2-guide-content { - display: flex; - flex-direction: column; - gap: 1rem; - } - - .wf2-guide-page { - display: flex; - flex-direction: column; - gap: 1rem; - } - - .wf2-guide-page-header { - padding: 0.95rem 1rem; - border: 1px solid #dce4f2; - border-radius: 1rem; - background: #ffffff; - box-shadow: 0 0.35rem 1rem rgba(19, 33, 68, 0.05); - } - - .wf2-guide-page-kicker { - font-size: 0.74rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: #0d6efd; - margin-bottom: 0.35rem; - } - - .wf2-guide-page-title { - font-size: 1.15rem; - font-weight: 600; - color: #212529; - margin-bottom: 0.3rem; - } - - .wf2-guide-page-summary { - color: #5c667a; - line-height: 1.45; - margin-bottom: 0.6rem; - } - - .wf2-guide-path-pill { - display: inline-flex; - align-items: center; - flex-wrap: wrap; - gap: 0.5rem; - padding: 0.45rem 0.6rem; - border-radius: 999px; - background: #eef4ff; - color: #355c9b; - font-size: 0.82rem; - } - - .wf2-guide-path-pill span { - font-weight: 600; - } - - .wf2-guide-path-pill code { - color: #24467a; - } - - .wf2-guide-page-sections { - display: flex; - flex-direction: column; - gap: 0.9rem; - } - - .wf2-guide-section { - padding: 0.95rem 1rem; - border: 1px solid #dce4f2; - border-radius: 1rem; - background: #fff; - box-shadow: 0 0.35rem 1rem rgba(19, 33, 68, 0.05); - } - - .wf2-guide-section-accent { - border-color: #cfe0ff; - background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); - } - - .wf2-guide-section-danger { - border-color: #f5c2c7; - background: #fff5f5; - } - - .wf2-guide-section-head { - margin-bottom: 0.75rem; - } - - .wf2-guide-section-title { - font-size: 0.96rem; - font-weight: 600; - color: #1f2937; - margin-bottom: 0.2rem; - } - - .wf2-guide-section-description { - color: #5c667a; - line-height: 1.45; - font-size: 0.88rem; - } - - .wf2-guide-section-body { - min-width: 0; - } - - .wf2-guide-button-row { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - } - - .wf2-guide-segmented { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.45rem; - } - - .wf2-guide-segmented .btn { - justify-content: center; - } - - .wf2-guide-segmented [data-wf2-segment="current"] { - border-color: var(--wf2-accent); - background: var(--wf2-accent-soft); - color: var(--wf2-accent-strong); - } - - .wf2-guide-mini-block { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 0.8rem 0.85rem; - border: 1px solid var(--wf2-border-soft); - border-radius: 0.9rem; - background: var(--wf2-surface-soft); - } - - .wf2-guide-mini-block + .wf2-guide-mini-block { - margin-top: 0.7rem; - } - - .wf2-guide-mini-title { - font-size: 0.88rem; - font-weight: 600; - color: var(--wf2-text); - } - - .wf2-guide-mini-description { - margin-top: -0.2rem; - color: var(--wf2-text-muted); - font-size: 0.82rem; - line-height: 1.4; - } - - .wf2-guide-mini-body { - min-width: 0; - } - - .wf2-guide-inline-field { - display: flex; - align-items: start; - gap: 0.6rem; - } - - .wf2-guide-inline-field .form-select, - .wf2-guide-inline-field .form-control { - min-width: 0; - flex: 1 1 auto; - } - - .wf2-guide-selection-list { - display: flex; - flex-direction: column; - gap: 0.5rem; - } - - .wf2-guide-selection-chip { - display: flex; - align-items: center; - justify-content: space-between; - gap: 0.65rem; - padding: 0.5rem 0.65rem; - border: 1px solid var(--wf2-border); - border-radius: 0.8rem; - background: var(--wf2-surface); - } - - .wf2-guide-meta-row { - display: flex; - flex-wrap: wrap; - gap: 0.55rem; - } - - .wf2-guide-meta-pill { - display: inline-flex; - align-items: center; - gap: 0.4rem; - padding: 0.38rem 0.6rem; - border-radius: 999px; - background: #f6f9ff; - border: 1px solid #dce4f2; - color: #355c9b; - font-size: 0.82rem; - } - - .wf2-guide-meta-label { - font-weight: 600; - color: #516177; - } - - .wf2-guide-note { - margin-top: 0.85rem; - padding: 0.75rem 0.85rem; - border-radius: 0.85rem; - border: 1px solid #dce4f2; - background: #f8fbff; - color: #516177; - line-height: 1.45; - font-size: 0.86rem; - } - - .wf2-guide-note-info { - border-color: #cfe0ff; - background: #eef5ff; - color: #355c9b; - } - - .wf2-source-selection-list { - display: flex; - flex-direction: column; - gap: 0.65rem; - margin: 0.85rem 0; - } - - .wf2-source-selected-item, - .wf2-source-entry { - display: flex; - align-items: start; - justify-content: space-between; - gap: 0.85rem; - padding: 0.8rem 0.9rem; - border: 1px solid #dce4f2; - border-radius: 0.9rem; - background: rgba(255, 255, 255, 0.92); - box-shadow: 0 0.45rem 1rem rgba(19, 33, 68, 0.05); - } - - .wf2-source-entry-selected { - border-color: rgba(13, 110, 253, 0.32); - background: linear-gradient(180deg, rgba(13, 110, 253, 0.07) 0%, rgba(255, 255, 255, 0.95) 100%); - } - - .wf2-source-toolbar { - margin: 0.35rem 0 0.75rem; - } - - .wf2-source-list { - display: flex; - flex-direction: column; - gap: 0.65rem; - max-height: 18rem; - overflow: auto; - padding-right: 0.25rem; - } - - .wf2-source-entry-copy { - min-width: 0; - flex: 1 1 auto; - } - - .wf2-source-entry-title { - font-weight: 600; - color: #12284a; - word-break: break-word; - } - - .wf2-source-entry-meta { - margin-top: 0.18rem; - color: #5f6f86; - font-size: 0.82rem; - word-break: break-word; - } - - .wf2-source-entry-actions { - flex: 0 0 auto; - } - - .wf2-source-empty { - padding: 0.65rem 0.2rem 0.1rem; - } - - .wf2-runtime-scope-grid { - display: grid; - gap: 0.8rem; - } - - .wf2-runtime-scope-card { - padding: 0.85rem 0.95rem; - border: 1px solid #dbe5f3; - border-radius: 0.9rem; - background: linear-gradient(180deg, #fbfdff 0%, #f3f7fc 100%); - } - - .wf2-runtime-scope-title { - font-size: 0.82rem; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; - color: #33557b; - margin-bottom: 0.2rem; - } - - .wf2-runtime-scope-description { - font-size: 0.82rem; - color: #66788f; - margin-bottom: 0.55rem; - } - - .wf2-runtime-chip-row { - display: flex; - flex-wrap: wrap; - gap: 0.35rem; - } - - .wf2-inline-variable-picker { - margin-top: 0.45rem; - border: 1px solid #dce4f2; - border-radius: 0.75rem; - background: #f8fbff; - overflow: hidden; - } - - .wf2-inline-variable-picker summary { - cursor: pointer; - list-style: none; - padding: 0.45rem 0.65rem; - font-size: 0.78rem; - font-weight: 600; - color: #355c9b; - } - - .wf2-inline-variable-picker summary::-webkit-details-marker { - display: none; - } - - .wf2-inline-variable-picker-body { - padding: 0 0.65rem 0.65rem; - display: grid; - gap: 0.55rem; - } - - .wf2-inline-variable-group-title { - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.05em; - text-transform: uppercase; - color: #6b7f99; - margin-bottom: 0.3rem; - } - - .wf2-inline-variable-group-buttons { - display: flex; - flex-wrap: wrap; - gap: 0.35rem; - } - - .wf2-inline-variable-chip { - border: 1px solid #cfe0ff; - border-radius: 999px; - background: #ffffff; - color: #355c9b; - padding: 0.22rem 0.55rem; - font-size: 0.76rem; - line-height: 1.2; - } - - .wf2-inline-variable-chip:hover { - border-color: #8fb3ef; - background: #eef5ff; - } - - .wf2-guide-diagnostics { - padding: 0.95rem 1rem; - border: 1px solid #dce4f2; - border-radius: 1rem; - background: #fff; - box-shadow: 0 0.35rem 1rem rgba(19, 33, 68, 0.05); - } - - .wf2-guide-diagnostics-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.75rem; - } - - .wf2-guide-diagnostics-item { - min-width: 0; - padding: 0.65rem 0.75rem; - border: 1px solid #e9eef7; - border-radius: 0.85rem; - background: #f8fbff; - } - - .wf2-guide-diagnostics-label { - font-size: 0.74rem; - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; - color: #607089; - margin-bottom: 0.2rem; - } - - .wf2-guide-drawer .wf2-chip { - background: #f8fbff; - border-color: #dce4f2; - } - - .wf2-cond-node { - border: 1px solid #dce4f2; - border-radius: 0.85rem; - padding: 0.85rem; - background: #fcfdff; - margin-bottom: 0.75rem; - } - - .wf2-cond-node-nested { - margin-top: 0.75rem; - margin-left: 0.25rem; - padding-left: 0.85rem; - border-left: 2px solid #dce4f2; - } - - .wf2-apply-rule-card { - border: 1px solid #dce4f2; - border-radius: 0.85rem; - padding: 0.85rem; - margin-bottom: 0.8rem; - background: #fcfcfd; - } - - .wf2-apply-rule-card:last-child { - margin-bottom: 0; - } - - .wf2-cond-header-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 0.65rem; - align-items: end; - } - - .wf2-cond-header-actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - } - - .wf2-inline-save-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 0.65rem; - align-items: end; - } - - .wf2-inline-save-input, - .wf2-inline-save-action { - min-width: 0; - } - - .wf2-compare-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 0.35fr) minmax(0, 1fr); - gap: 0.65rem; - align-items: end; - } - - .wf2-guide-drawer .wf2-logic-case-card { - border-color: #dce4f2; - background: #fcfdff; - } - - .wf2-guide-drawer .wf2-logic-tree-node { - border-color: #dce4f2; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); - } - - body.wf2-guide-open .wf2-guide-drawer { - transform: translateX(0); - } - - .wf2-graph-card-body { - display: flex; - flex-direction: column; - gap: 0.75rem; - min-height: 0; - } - - .wf2-graph-issues-wrap { - flex: 0 0 auto; - padding: 0.95rem 1rem; - border: 1px solid #e4ebf7; - border-radius: 0.9rem; - background: #fff; - box-shadow: 0 0.35rem 1rem rgba(19, 33, 68, 0.05); - } - - .wf2-issues-panel { - max-height: 12rem; - overflow: auto; - padding-right: 0.25rem; - } - - .wf2-issue-item { - display: block; - width: 100%; - text-align: left; - border: 1px solid #e9ecef; - border-radius: 0.5rem; - padding: 0.75rem; - margin-bottom: 0.75rem; - font-size: 0.9rem; - background: #fff; - } - - .wf2-issue-clickable { - cursor: pointer; - } - - .wf2-issue-clickable:hover { - border-color: #0d6efd; - box-shadow: 0 0 0 0.1rem rgba(13, 110, 253, 0.08); - } - - .wf2-issue-error { - background: #fff5f5; - border-color: #f5c2c7; - } - - .wf2-issue-warning { - background: #fffaf0; - border-color: #ffe69c; - } - - .wf2-issue-info { - background: #f8f9fa; - border-color: #dee2e6; - } - - .wf2-graph-editor-host { - min-height: 36rem; - } - - .wf2-graph-ui { - display: flex; - flex-direction: column; - gap: 0.75rem; - height: 100%; - min-height: 0; - } - - .wf2-graph-toolbar { - display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; - gap: 0.5rem; - align-items: center; - flex: 0 0 auto; - } - - .wf2-graph-toolbar select { - min-width: 0; - } - - .wf2-graph-main { - position: relative; - min-height: 0; - flex: 1 1 100%; - } - - .wf2-graph-canvas-wrap { - position: relative; - border: 1px solid #e9ecef; - border-radius: 0.75rem; - background: #fafafa; - overflow: auto; - min-height: 40rem; - max-height: 40rem; - width: 100%; - } - - .wf2-graph-canvas { - min-height: 40rem; - } - - .wf2-graph-canvas-empty-state { - min-height: 40rem; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - color: #6c757d; - padding: 1rem; - } - - .wf2-graph-canvas-stage { - position: relative; - display: inline-block; - min-width: 100%; - min-height: 100%; - } - - .wf2-graph-overlay-root { - position: absolute; - inset: 0; - z-index: 3; - pointer-events: none; - } - - .wf2-graph-svg { - display: block; - max-width: none; - background: - linear-gradient(#f8f9fa 1px, transparent 1px), - linear-gradient(90deg, #f8f9fa 1px, transparent 1px); - background-size: 24px 24px; - } - - .wf2-graph-node { - cursor: move; - } - - .wf2-graph-node.is-dragging { - opacity: 0.85; - } - - .wf2-graph-edge { - cursor: pointer; - } - - .wf2-graph-node-title { - font-size: 13px; - font-weight: 600; - fill: #212529; - } - - .wf2-graph-node-meta { - font-size: 11px; - fill: #6c757d; - } - - .wf2-graph-badge { - font-size: 10px; - font-weight: 700; - fill: #0d6efd; - } - - .wf2-graph-edge-label { - font-size: 11px; - fill: #495057; - paint-order: stroke; - stroke: #ffffff; - stroke-width: 3px; - stroke-linejoin: round; - } - - .wf2-graph-edge.is-start-edge path { - stroke: var(--wf2-graph-accent); - stroke-dasharray: 8 5; - } - - .wf2-graph-edge.is-start-edge .wf2-graph-edge-label { - fill: var(--wf2-graph-accent); - font-weight: 700; - } - - .wf2-graph-output-handle { - fill: #0d6efd; - stroke: #ffffff; - stroke-width: 2px; - cursor: crosshair; - } - - .wf2-graph-output-handle:hover { - fill: #0b5ed7; - } - - .wf2-graph-node-warning { - font-size: 9px; - font-weight: 700; - fill: #b26a00; - letter-spacing: 0.05em; - } - - .wf2-graph-connection-preview { - fill: none; - stroke: #0d6efd; - stroke-width: 2.5; - stroke-dasharray: 6 4; - pointer-events: none; - } - - .wf2-graph-floating-card { - position: absolute; - z-index: 4; - min-width: 340px; - max-width: min(960px, calc(100vw - 32px)); - max-height: calc(100vh - 32px); - overflow: hidden; - resize: both; - border: 1px solid #d4def3; - border-radius: 1rem; - background: #fff; - box-shadow: 0 1rem 2.5rem rgba(19, 33, 68, 0.16); - pointer-events: auto; - display: flex; - flex-direction: column; - } - - .wf2-graph-context-menu { - width: 340px; - min-width: 320px; - min-height: 0; - height: auto; - resize: none; - } - - .wf2-graph-floating-node { - min-height: 18rem; - height: auto; - } - - .wf2-graph-floating-edge { - min-height: 0; - height: auto; - max-height: min(28rem, calc(100vh - 48px)); - } - - .wf2-graph-overlay-shell { - backdrop-filter: blur(6px); - } - - .wf2-graph-floating-header { - display: flex; - justify-content: space-between; - align-items: start; - gap: 0.9rem; - padding: 1rem 1rem 0.85rem; - border-bottom: 1px solid #e4ebf7; - background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); - } - - .wf2-graph-floating-kicker { - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: #0d6efd; - margin-bottom: 0.15rem; - } - - .wf2-graph-floating-card .form-control, - .wf2-graph-floating-card .form-select, - .wf2-graph-floating-card textarea { - min-width: 0; - } - - .wf2-graph-floating-card .btn { - white-space: nowrap; - } - - .wf2-graph-floating-card .form-control-sm, - .wf2-graph-floating-card .form-select-sm, - .wf2-graph-floating-card .btn-sm { - font-size: 0.82rem; - } - - .wf2-graph-floating-card textarea.form-control { - line-height: 1.35; - } - - .wf2-graph-floating-title { - font-weight: 600; - font-size: 1rem; - line-height: 1.3; - color: #1f2937; - } - - .wf2-graph-floating-subtitle { - margin-top: 0.2rem; - font-size: 0.84rem; - color: #607089; - line-height: 1.4; - } - - .wf2-graph-floating-meta { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - padding: 0.85rem 1rem 0; - } - - .wf2-graph-meta-pill { - display: inline-flex; - align-items: center; - gap: 0.4rem; - padding: 0.35rem 0.6rem; - border-radius: 999px; - background: #f6f9ff; - border: 1px solid #dce4f2; - color: #355c9b; - font-size: 0.8rem; - } - - .wf2-graph-meta-pill span { - font-weight: 600; - color: #5a6c87; - } - - .wf2-graph-floating-body { - flex: 1 1 auto; - min-height: 0; - overflow: auto; - padding: 1rem; - } - - .wf2-graph-floating-footer { - display: flex; - flex-wrap: wrap; - gap: 0.6rem; - justify-content: flex-start; - padding: 0.9rem 1rem 1rem; - border-top: 1px solid #e4ebf7; - background: #fbfcff; - } - - .wf2-graph-editor-section { - margin-bottom: 0.95rem; - padding: 0.9rem; - border: 1px solid #e4ebf7; - border-radius: 0.9rem; - background: #fcfdff; - } - - .wf2-graph-editor-section:last-child { - margin-bottom: 0; - } - - .wf2-graph-editor-section-title { - font-size: 0.92rem; - font-weight: 600; - color: #1f2937; - margin-bottom: 0.25rem; - } - - .wf2-graph-editor-section-description { - font-size: 0.83rem; - color: #607089; - line-height: 1.4; - margin-bottom: 0.75rem; - } - - .wf2-graph-editor-section-actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-top: 0.8rem; - } - - .wf2-graph-editor-inline-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 0.65rem; - align-items: end; - } - - .wf2-graph-trigger-source-group { - border: 1px solid var(--wf2-border-soft); - border-radius: 0.5rem; - margin-bottom: 0.75rem; - padding: 0.75rem; - } - - .wf2-graph-trigger-source-group:last-child { - margin-bottom: 0; - } - - .wf2-graph-trigger-source-list { - display: grid; - gap: 0.5rem; - } - - .wf2-graph-trigger-source-row { - align-items: center; - background: var(--wf2-surface-muted); - border: 1px solid var(--wf2-border-muted); - border-radius: 0.45rem; - display: flex; - gap: 0.75rem; - justify-content: space-between; - padding: 0.55rem 0.65rem; - } - - .wf2-graph-step-pick-grid { - display: flex; - flex-direction: column; - gap: 0.6rem; - } - - .wf2-graph-step-pick { - display: flex; - flex-direction: column; - align-items: start; - gap: 0.18rem; - width: 100%; - padding: 0.8rem 0.9rem; - border: 1px solid #dce4f2; - border-radius: 0.9rem; - background: #fbfcff; - text-align: left; - transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; - } - - .wf2-graph-step-pick:hover { - border-color: #8fb3ef; - box-shadow: 0 0.45rem 1rem rgba(13, 110, 253, 0.1); - transform: translateY(-1px); - } - - .wf2-graph-step-pick-title { - font-weight: 600; - color: #1f2937; - } - - .wf2-graph-step-pick-meta { - font-size: 0.78rem; - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; - color: #0d6efd; - } - - .wf2-graph-step-pick-desc { - font-size: 0.82rem; - color: #607089; - line-height: 1.4; - } - - .wf2-logic-case-card { - border: 1px solid #e9ecef; - border-radius: 0.75rem; - padding: 0.75rem; - background: #fcfcfd; - margin-bottom: 0.9rem; - } - - .wf2-logic-case-outcome-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - gap: 0.5rem; - align-items: end; - } - - .wf2-logic-tree-node { - border: 1px solid #e9ecef; - border-radius: 0.75rem; - padding: 0.75rem; - background: #fff; - } - - .wf2-logic-tree-node-nested { - background: #fbfcff; - } - - .wf2-logic-tree-header { - margin-bottom: 0.75rem; - } - - .wf2-logic-tree-toolbar { - display: grid; - grid-template-columns: minmax(0, 1fr) auto auto; - gap: 0.5rem; - align-items: center; - margin-bottom: 0.4rem; - } - - .wf2-logic-tree-help { - font-size: 0.82rem; - color: #6c757d; - } - - .wf2-logic-tree-form-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - gap: 0.65rem; - } - - .wf2-logic-tree-field { - min-width: 0; - } - - .wf2-logic-tree-field-full { - grid-column: 1 / -1; - } - - .wf2-logic-tree-children { - margin-top: 0.75rem; - margin-left: 0.35rem; - padding-left: 0.85rem; - border-left: 2px solid #e9ecef; - display: flex; - flex-direction: column; - gap: 0.75rem; - } - - .wf2-logic-tree-actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-top: 0.75rem; - } - - .wf2-structured-section { - display: flex; - flex-direction: column; - gap: 0.75rem; - } - - .wf2-structured-section-header { - display: flex; - justify-content: space-between; - align-items: start; - gap: 0.75rem; - } - - .wf2-structured-section-title { - font-size: 0.92rem; - font-weight: 600; - color: #1f2937; - } - - .wf2-structured-section-description { - font-size: 0.83rem; - color: #607089; - line-height: 1.4; - margin-top: 0.2rem; - } - - .wf2-structured-section-actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - } - - .wf2-structured-item { - border: 1px solid #dce4f2; - border-radius: 0.9rem; - background: #ffffff; - padding: 0.85rem; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); - } - - .wf2-structured-item + .wf2-structured-item { - margin-top: 0.75rem; - } - - .wf2-structured-item-head { - margin-bottom: 0.7rem; - } - - .wf2-structured-item-title { - font-size: 0.88rem; - font-weight: 600; - color: #1f2937; - } - - .wf2-structured-item-description { - font-size: 0.8rem; - color: #607089; - margin-top: 0.18rem; - line-height: 1.4; - } - - .wf2-structured-item-body { - margin-bottom: 0.8rem; - } - - .wf2-structured-item-actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - } - - .wf2-structured-form-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - gap: 0.7rem; - } - - .wf2-structured-field { - min-width: 0; - } - - .wf2-structured-field-full { - grid-column: 1 / -1; - } - - .wf2-structured-hint-card { - margin-top: 0.8rem; - padding: 0.75rem 0.8rem; - border: 1px solid #dce4f2; - border-radius: 0.85rem; - background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%); - } - - .wf2-structured-hint-title { - font-size: 0.8rem; - font-weight: 700; - letter-spacing: 0.04em; - text-transform: uppercase; - color: #355c9b; - margin-bottom: 0.3rem; - } - - .wf2-structured-hint-description { - font-size: 0.81rem; - color: #607089; - line-height: 1.4; - margin-bottom: 0.55rem; - } - - .wf2-structured-hint-chip-row { - display: flex; - flex-wrap: wrap; - gap: 0.4rem; - } - - .wf2-structured-hint-list { - display: flex; - flex-direction: column; - gap: 0.45rem; - } - - .wf2-structured-hint-list-item { - display: flex; - align-items: start; - gap: 0.55rem; - font-size: 0.81rem; - color: #54657d; - line-height: 1.45; - } - - .wf2-structured-hint-list-item code { - flex: 0 0 auto; - font-size: 0.78rem; - } - - .wf2-graph-floating-card .border.rounded.p-2 { - border-radius: 0.75rem !important; - padding: 0.75rem !important; - margin-bottom: 0.75rem; - background: #fcfcfd; - } - - .wf2-graph-floating-card [data-step-field-row], - .wf2-graph-floating-card [data-logic-case-row], - .wf2-graph-floating-card [data-capture-row], - .wf2-graph-floating-card [data-compute-row], - .wf2-graph-floating-card [data-set-var-row] { - display: flex; - flex-direction: column; - gap: 0.55rem; - } - - .wf2-graph-floating-card .d-flex.gap-2 { - flex-wrap: wrap; - } - - .wf2-graph-floating-card .d-flex.gap-2 > .btn { - flex: 0 0 auto; - } - - .wf2-graph-floating-card .d-flex.gap-2 > .form-control, - .wf2-graph-floating-card .d-flex.gap-2 > .form-select { - flex: 1 1 160px; - min-width: 0; - } - - .wf2-graph-floating-card .form-label-sm { - font-size: 0.76rem; - font-weight: 600; - color: #495057; - } - - .wf2-graph-floating-card .small.text-muted { - line-height: 1.35; - } - - #wf2-graph-card.wf2-graph-expanded { - position: fixed; - inset: 1rem; - z-index: 1060; - margin: 0 !important; - display: flex; - flex-direction: column; - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2); - } - - #wf2-graph-card.wf2-graph-expanded .card-body { - flex: 1 1 auto; - display: flex; - flex-direction: column; - overflow: hidden; - min-height: 0; - } - - #wf2-graph-card.wf2-graph-expanded .wf2-graph-card-body { - flex: 1 1 auto; - min-height: 0; - } - - #wf2-graph-card.wf2-graph-expanded .wf2-graph-issues-wrap { - position: sticky; - top: 0; - z-index: 3; - background: #fff; - padding-bottom: 0.25rem; - } - - #wf2-graph-card.wf2-graph-expanded .wf2-issues-panel { - max-height: 10rem; - } - - #wf2-graph-card.wf2-graph-expanded .wf2-graph-editor-host, - #wf2-graph-card.wf2-graph-expanded .wf2-graph-ui, - #wf2-graph-card.wf2-graph-expanded .wf2-graph-main { - flex: 1 1 auto; - min-height: 0; - height: 100%; - } - - #wf2-graph-card.wf2-graph-expanded .wf2-graph-canvas-wrap { - height: 100%; - min-height: 0; - max-height: none; - } - - body.wf2-graph-expanded { - overflow: hidden; - } - - #wf2-editor-root .text-muted, - .wf2-guide-drawer .text-muted, - #wf2-editor-root .form-text, - .wf2-guide-drawer .form-text, - #wf2-editor-root .small.text-muted, - .wf2-guide-drawer .small.text-muted { - color: var(--wf2-text-muted) !important; - } - - #wf2-editor-root .card, - .wf2-guide-drawer .card, - .wf2-pretty-box, - .wf2-guide-drawer, - .wf2-guide-page-header, - .wf2-guide-section, - .wf2-guide-diagnostics, - .wf2-source-selected-item, - .wf2-source-entry, - .wf2-runtime-scope-card, - .wf2-inline-variable-picker, - .wf2-cond-node, - .wf2-guide-drawer .wf2-logic-case-card, - .wf2-guide-drawer .wf2-logic-tree-node, - .wf2-issues-panel .wf2-issue-item, - .wf2-graph-canvas-wrap, - .wf2-graph-floating-card, - .wf2-graph-issues-wrap, - .wf2-graph-floating-header, - .wf2-graph-floating-footer, - .wf2-graph-editor-section, - .wf2-graph-step-pick, - .wf2-logic-case-card, - .wf2-logic-tree-node, - .wf2-structured-item, - .wf2-structured-hint-card { - background: var(--wf2-surface); - border-color: var(--wf2-border); - color: var(--wf2-text); - box-shadow: var(--wf2-shadow); - } - - #wf2-editor-root code, - .wf2-guide-drawer code, - #wf2-editor-root pre, - .wf2-guide-drawer pre { - color: var(--wf2-text); - } - - #wf2-editor-root .card-header { - background: linear-gradient(180deg, var(--wf2-surface) 0%, var(--wf2-surface-soft) 100%); - border-bottom-color: var(--wf2-border); - } - - #wf2-editor-root .card-body { - background: var(--wf2-surface); - } - - #wf2-editor-root .form-control, - #wf2-editor-root .form-select, - #wf2-editor-root textarea, - .wf2-guide-drawer .form-control, - .wf2-guide-drawer .form-select, - .wf2-guide-drawer textarea { - background-color: var(--wf2-surface); - border-color: var(--wf2-border); - color: var(--wf2-text); - } - - #wf2-editor-root .form-control::placeholder, - #wf2-editor-root textarea::placeholder, - .wf2-guide-drawer .form-control::placeholder, - .wf2-guide-drawer textarea::placeholder { - color: var(--wf2-text-muted); - } - - #wf2-editor-root .form-control:focus, - #wf2-editor-root .form-select:focus, - #wf2-editor-root textarea:focus, - .wf2-guide-drawer .form-control:focus, - .wf2-guide-drawer .form-select:focus, - .wf2-guide-drawer textarea:focus { - background-color: var(--wf2-surface); - border-color: var(--wf2-accent); - color: var(--wf2-text); - box-shadow: 0 0 0 0.2rem var(--wf2-accent-ring); - } +/* + * Structural styles for the Workflow 2 editor and graph. + * Visual appearance comes from Bootstrap; this file only provides layout + * rules and maps the variables consumed by the editor bundle onto Bootstrap + * theme tokens so light and dark mode follow the rest of Trustpoint. + */ + +:root { + --wf2-accent-soft: var(--bs-primary-bg-subtle); + + --wf2-editor-surface: var(--bs-body-bg); + --wf2-editor-border: var(--bs-border-color); + --wf2-editor-border-soft: var(--bs-border-color-translucent); + --wf2-editor-gutter: var(--bs-tertiary-bg); + --wf2-editor-active-gutter: var(--bs-secondary-bg); + --wf2-editor-active-line: var(--bs-tertiary-bg); + --wf2-editor-selection: rgba(var(--bs-primary-rgb), 0.18); + --wf2-editor-text: var(--bs-body-color); + --wf2-editor-muted: var(--bs-secondary-color); + --wf2-editor-accent: var(--bs-primary); + --wf2-editor-key: var(--bs-primary-text-emphasis); + --wf2-editor-string: var(--bs-success-text-emphasis); + --wf2-editor-number: var(--bs-warning-text-emphasis); + --wf2-editor-atom: var(--bs-info-text-emphasis); + --wf2-editor-comment: var(--bs-secondary-color); + --wf2-editor-punctuation: var(--bs-secondary-color); + --wf2-editor-invalid: var(--bs-danger); + + --wf2-graph-accent: var(--bs-primary); + --wf2-graph-edge-color: var(--bs-secondary-color); + --wf2-graph-node-fill: var(--bs-body-bg); + --wf2-graph-node-stroke: var(--bs-border-color); + --wf2-graph-virtual-fill: var(--bs-warning-bg-subtle); + --wf2-graph-unreachable-fill: var(--bs-danger-bg-subtle); + --wf2-graph-warning: var(--bs-warning-text-emphasis); + --wf2-graph-grid: var(--bs-border-color-translucent); + --wf2-graph-node-text: var(--bs-body-color); + --wf2-graph-node-meta: var(--bs-secondary-color); +} + +/* ---------------------------------------------------------------------- */ +/* YAML editor */ +/* ---------------------------------------------------------------------- */ + +.wf2-hidden-textarea { + display: none; +} + +.wf2-editor-host { + width: 100%; +} - #wf2-editor-root .form-check-input, - .wf2-guide-drawer .form-check-input { - background-color: var(--wf2-surface-soft); - border-color: var(--wf2-border); - } +.wf2-pretty-box { + max-height: 32rem; + overflow: auto; + white-space: pre-wrap; + word-break: break-word; +} - #wf2-editor-root .form-check-input:checked, - .wf2-guide-drawer .form-check-input:checked { - background-color: var(--wf2-accent); - border-color: var(--wf2-accent); - } +.wf2-diagram-canvas { + height: 72vh; + width: 100%; +} - #wf2-editor-root .btn-outline-secondary, - .wf2-guide-drawer .btn-outline-secondary { - background: var(--wf2-surface); - border-color: var(--wf2-border); - color: var(--wf2-text); - } +.wf2-details-summary { + cursor: pointer; + list-style: none; +} - #wf2-editor-root .btn-outline-secondary:hover, - #wf2-editor-root .btn-outline-secondary:focus, - .wf2-guide-drawer .btn-outline-secondary:hover, - .wf2-guide-drawer .btn-outline-secondary:focus { - background: var(--wf2-surface-soft); - border-color: var(--wf2-accent); - color: var(--wf2-accent-strong); - box-shadow: none; - } +/* ---------------------------------------------------------------------- */ +/* Shared panels, chips and layout helpers (rendered by the JS bundle) */ +/* ---------------------------------------------------------------------- */ + +.wf2-guide-page-header, +.wf2-guide-section, +.wf2-guide-diagnostics, +.wf2-guide-diagnostics-item, +.wf2-guide-mini-block, +.wf2-guide-selection-chip, +.wf2-guide-note, +.wf2-source-entry, +.wf2-source-selected-item, +.wf2-runtime-scope-card, +.wf2-inline-variable-picker, +.wf2-cond-node, +.wf2-apply-rule-card, +.wf2-logic-case-card, +.wf2-logic-tree-node, +.wf2-structured-item, +.wf2-structured-hint-card, +.wf2-graph-editor-section, +.wf2-graph-trigger-source-group, +.wf2-graph-trigger-source-row, +.wf2-graph-step-pick, +.wf2-graph-issues-wrap, +.wf2-issue-item { + padding: 0.75rem; + border: 1px solid var(--bs-border-color); + border-radius: var(--bs-border-radius); + background: var(--bs-body-bg); + color: var(--bs-body-color); +} + +.wf2-guide-section-danger, +.wf2-issue-error { + border-color: var(--bs-danger-border-subtle); + background: var(--bs-danger-bg-subtle); +} + +.wf2-issue-warning { + border-color: var(--bs-warning-border-subtle); + background: var(--bs-warning-bg-subtle); +} + +.wf2-issue-info, +.wf2-logic-tree-node-nested, +.wf2-source-entry-selected, +.wf2-guide-segmented [data-wf2-segment="current"] { + background: var(--bs-tertiary-bg); +} + +.wf2-guide-segmented [data-wf2-segment="current"] { + border-color: var(--bs-primary); +} + +.wf2-chip, +.wf2-guide-meta-pill, +.wf2-guide-path-pill, +.wf2-graph-meta-pill, +.wf2-inline-variable-chip { + display: inline-flex; + align-items: center; + flex-wrap: wrap; + gap: 0.35rem; + padding: 0.2rem 0.6rem; + border: 1px solid var(--bs-border-color); + border-radius: var(--bs-border-radius-pill); + background: var(--bs-tertiary-bg); + color: var(--bs-body-color); + font-size: 0.8rem; + line-height: 1.3; +} + +.wf2-chip { + margin: 0 0.35rem 0.35rem 0; +} + +.wf2-inline-variable-chip:hover, +.wf2-graph-step-pick:hover, +.wf2-issue-clickable:hover { + border-color: var(--bs-primary); +} + +.wf2-guide-page-title, +.wf2-guide-section-title, +.wf2-guide-mini-title, +.wf2-source-entry-title, +.wf2-runtime-scope-title, +.wf2-graph-floating-title, +.wf2-graph-editor-section-title, +.wf2-graph-step-pick-title, +.wf2-structured-section-title, +.wf2-structured-item-title, +.wf2-structured-hint-title, +.wf2-guide-meta-label, +.wf2-chip strong, +.wf2-graph-meta-pill span, +.wf2-guide-path-pill span { + font-weight: 600; +} - #wf2-editor-root .alert-danger { - background: var(--wf2-danger-soft); - border-color: var(--wf2-danger-border); - color: var(--wf2-text); - } +.wf2-guide-page-summary, +.wf2-guide-section-description, +.wf2-guide-mini-description, +.wf2-guide-note, +.wf2-source-entry-meta, +.wf2-runtime-scope-description, +.wf2-graph-floating-subtitle, +.wf2-graph-editor-section-description, +.wf2-graph-step-pick-desc, +.wf2-logic-tree-help, +.wf2-structured-section-description, +.wf2-structured-item-description, +.wf2-structured-hint-description, +.wf2-structured-hint-list-item, +.wf2-graph-floating-card .form-label-sm { + font-size: 0.85rem; + color: var(--bs-secondary-color); +} + +.wf2-guide-drawer-eyebrow, +.wf2-guide-page-kicker, +.wf2-guide-diagnostics-label, +.wf2-inline-variable-group-title, +.wf2-graph-floating-kicker, +.wf2-graph-step-pick-meta { + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + color: var(--bs-secondary-color); +} + +.wf2-guide-section-head, +.wf2-structured-item-head, +.wf2-logic-tree-header, +.wf2-guide-section-description, +.wf2-graph-editor-section-description { + margin-bottom: 0.5rem; +} + +.wf2-guide-content, +.wf2-guide-page, +.wf2-guide-page-sections, +.wf2-guide-mini-block, +.wf2-guide-selection-list, +.wf2-source-selection-list, +.wf2-source-list, +.wf2-structured-section, +.wf2-structured-hint-list, +.wf2-logic-tree-children, +.wf2-graph-step-pick-grid, +.wf2-graph-card-body, +.wf2-graph-ui, +.wf2-graph-floating-card, +.wf2-graph-floating-card [data-step-field-row], +.wf2-graph-floating-card [data-logic-case-row], +.wf2-graph-floating-card [data-capture-row], +.wf2-graph-floating-card [data-compute-row], +.wf2-graph-floating-card [data-set-var-row] { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.wf2-guide-button-row, +.wf2-guide-meta-row, +.wf2-runtime-chip-row, +.wf2-structured-hint-chip-row, +.wf2-cond-header-actions, +.wf2-logic-tree-actions, +.wf2-structured-section-actions, +.wf2-structured-item-actions, +.wf2-graph-editor-section-actions, +.wf2-graph-floating-meta, +.wf2-graph-floating-footer, +.wf2-inline-variable-group-buttons { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.wf2-guide-drawer-header, +.wf2-guide-inline-field, +.wf2-guide-selection-chip, +.wf2-source-entry, +.wf2-source-selected-item, +.wf2-structured-section-header, +.wf2-structured-hint-list-item, +.wf2-graph-trigger-source-row, +.wf2-graph-floating-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 0.75rem; +} + +.wf2-guide-inline-field .form-select, +.wf2-guide-inline-field .form-control, +.wf2-source-entry-copy { + min-width: 0; + flex: 1 1 auto; +} + +.wf2-source-entry-actions { + flex: 0 0 auto; +} + +.wf2-source-list { + max-height: 18rem; + overflow: auto; +} + +.wf2-guide-segmented, +.wf2-guide-diagnostics-grid, +.wf2-logic-tree-form-grid, +.wf2-structured-form-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.5rem; +} + +.wf2-cond-header-row, +.wf2-inline-save-row, +.wf2-logic-case-outcome-row, +.wf2-graph-editor-inline-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 0.5rem; + align-items: end; +} + +.wf2-compare-grid { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 0.35fr) minmax(0, 1fr); + gap: 0.5rem; + align-items: end; +} + +.wf2-logic-tree-toolbar { + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; + gap: 0.5rem; + align-items: center; + margin-bottom: 0.5rem; +} + +.wf2-runtime-scope-grid, +.wf2-inline-variable-picker-body, +.wf2-graph-trigger-source-list { + display: grid; + gap: 0.5rem; +} + +.wf2-logic-tree-field, +.wf2-structured-field, +.wf2-inline-save-input, +.wf2-inline-save-action { + min-width: 0; +} - .wf2-pretty-box { - background: var(--wf2-surface-soft); - border-color: var(--wf2-border); - } +.wf2-logic-tree-field-full, +.wf2-structured-field-full { + grid-column: 1 / -1; +} + +.wf2-logic-tree-children, +.wf2-cond-node-nested { + margin-top: 0.75rem; + padding-left: 0.75rem; + border-left: 2px solid var(--bs-border-color); +} - .wf2-chip, - .wf2-guide-drawer .wf2-chip, - .wf2-graph-meta-pill, - .wf2-guide-meta-pill { - background: var(--wf2-accent-soft); - border-color: var(--wf2-border); - color: var(--wf2-accent-strong); - } +.wf2-inline-variable-picker { + padding: 0; + overflow: hidden; +} - .wf2-guide-drawer { - background: var(--wf2-surface-subtle); - border-left-color: var(--wf2-border); - box-shadow: -16px 0 40px rgba(0, 0, 0, 0.22); - } +.wf2-inline-variable-picker summary { + cursor: pointer; + list-style: none; + padding: 0.5rem 0.75rem; + font-size: 0.8rem; + font-weight: 600; +} - .wf2-guide-drawer-header, - .wf2-guide-drawer-body, - .wf2-guide-page-header, - .wf2-guide-section-accent, - .wf2-source-entry-selected, - .wf2-runtime-scope-card, - .wf2-inline-variable-picker, - .wf2-structured-hint-card, - .wf2-graph-floating-header, - .wf2-graph-floating-footer { - background: linear-gradient(180deg, var(--wf2-surface) 0%, var(--wf2-surface-soft) 100%); - } +.wf2-inline-variable-picker summary::-webkit-details-marker { + display: none; +} - .wf2-guide-drawer-eyebrow, - .wf2-guide-page-kicker, - .wf2-graph-floating-kicker, - .wf2-graph-step-pick-meta { - color: var(--wf2-accent); - } +.wf2-inline-variable-picker-body { + padding: 0 0.75rem 0.75rem; +} - .wf2-guide-page-title, - .wf2-guide-section-title, - .wf2-source-entry-title, - .wf2-graph-floating-title, - .wf2-graph-editor-section-title, - .wf2-graph-step-pick-title, - .wf2-logic-tree-node, - .wf2-structured-item-title, - .wf2-structured-section-title, - .wf2-structured-hint-title, - .wf2-runtime-scope-title, - .wf2-guide-diagnostics .fw-semibold, - .wf2-guide-diagnostics-label, - .wf2-guide-path-pill span { - color: var(--wf2-text); - } +.wf2-guide-segmented .btn { + justify-content: center; +} - .wf2-guide-page-summary, - .wf2-guide-section-description, - .wf2-guide-note, - .wf2-runtime-scope-description, - .wf2-inline-variable-group-title, - .wf2-source-entry-meta, - .wf2-graph-floating-subtitle, - .wf2-graph-editor-section-description, - .wf2-graph-step-pick-desc, - .wf2-logic-tree-help, - .wf2-structured-section-description, - .wf2-structured-item-description, - .wf2-structured-hint-description, - .wf2-structured-hint-list-item, - .wf2-graph-floating-card .form-label-sm { - color: var(--wf2-text-muted); - } +.wf2-graph-step-pick { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.15rem; + width: 100%; + text-align: left; +} - .wf2-guide-path-pill, - .wf2-guide-note-info, - .wf2-inline-variable-chip, - .wf2-graph-output-handle { - background: var(--wf2-accent-soft); - border-color: var(--wf2-border); - color: var(--wf2-accent-strong); - } +/* ---------------------------------------------------------------------- */ +/* Guide drawer */ +/* ---------------------------------------------------------------------- */ - .wf2-inline-variable-chip:hover, - .wf2-graph-step-pick:hover, - .wf2-issue-clickable:hover { - border-color: var(--wf2-accent); - box-shadow: 0 0 0 0.1rem rgba(13, 110, 253, 0.1); - } +.wf2-guide-drawer { + position: fixed; + top: 0; + right: 0; + z-index: 1050; + display: flex; + flex-direction: column; + width: min(38rem, 96vw); + height: 100vh; + background: var(--bs-body-bg); + border-left: 1px solid var(--bs-border-color); + box-shadow: var(--bs-box-shadow-lg); + transform: translateX(100%); + transition: transform 0.2s ease; +} - .wf2-guide-section-danger, - .wf2-issue-error { - background: var(--wf2-danger-soft); - border-color: var(--wf2-danger-border); - } +body.wf2-guide-open .wf2-guide-drawer { + transform: translateX(0); +} - .wf2-issue-warning { - background: var(--wf2-warning-soft); - border-color: var(--wf2-warning-border); - } +.wf2-guide-drawer-header { + padding: 1rem; + border-bottom: 1px solid var(--bs-border-color); +} - .wf2-issue-info { - background: var(--wf2-surface-soft); - border-color: var(--wf2-border); - } +.wf2-guide-drawer-body { + flex: 1 1 auto; + min-height: 0; + padding: 1rem; + overflow: auto; +} - .wf2-graph-canvas-wrap { - background: var(--wf2-surface-muted); - border-color: var(--wf2-border-muted); - } +/* ---------------------------------------------------------------------- */ +/* Issues panel */ +/* ---------------------------------------------------------------------- */ - .wf2-graph-svg { - background: - linear-gradient(var(--wf2-graph-grid) 1px, transparent 1px), - linear-gradient(90deg, var(--wf2-graph-grid) 1px, transparent 1px); - background-size: 24px 24px; - } +.wf2-issues-panel { + max-height: 12rem; + overflow: auto; +} - .wf2-graph-node-title { - fill: var(--wf2-graph-node-text); - } +.wf2-issue-item { + display: block; + width: 100%; + margin-bottom: 0.5rem; + text-align: left; + font-size: 0.9rem; +} - .wf2-graph-node-meta { - fill: var(--wf2-graph-node-meta); - } +.wf2-issue-clickable { + cursor: pointer; +} - .wf2-graph-badge { - fill: var(--wf2-graph-accent); - } +/* ---------------------------------------------------------------------- */ +/* Graph editor */ +/* ---------------------------------------------------------------------- */ - .wf2-graph-edge-label { - fill: var(--wf2-graph-node-meta); - stroke: var(--wf2-graph-label-stroke); - } +.wf2-graph-card-body, +.wf2-graph-ui { + min-height: 0; +} - .wf2-graph-node-warning { - fill: var(--wf2-warning); - } +.wf2-graph-ui { + height: 100%; +} - .wf2-graph-output-handle { - fill: var(--wf2-graph-accent); - stroke: var(--wf2-surface); - } +.wf2-graph-issues-wrap, +.wf2-graph-toolbar { + flex: 0 0 auto; +} - .wf2-graph-output-handle:hover, - .wf2-graph-connection-preview { - fill: var(--wf2-graph-accent); - stroke: var(--wf2-graph-accent); - } +.wf2-graph-editor-host { + min-height: 36rem; +} - .wf2-graph-connection-preview { - fill: none; - } +.wf2-graph-toolbar { + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + gap: 0.5rem; + align-items: center; +} - .wf2-logic-tree-children, - .wf2-cond-node-nested { - border-left-color: var(--wf2-border); - } +.wf2-graph-toolbar select { + min-width: 0; +} - .wf2-graph-floating-card .border.rounded.p-2, - .wf2-source-selected-item, - .wf2-source-entry, - .wf2-guide-diagnostics-item, - .wf2-structured-item, - .wf2-logic-tree-node, - .wf2-logic-case-card { - border-color: var(--wf2-border); - background: var(--wf2-surface-soft); - } +.wf2-graph-main { + position: relative; + flex: 1 1 100%; + min-height: 0; +} - #wf2-graph-card.wf2-graph-expanded { - box-shadow: var(--wf2-shadow-strong); - } +.wf2-graph-canvas-wrap { + position: relative; + width: 100%; + min-height: 40rem; + max-height: 40rem; + overflow: auto; + border: 1px solid var(--bs-border-color); + border-radius: var(--bs-border-radius); + background: var(--bs-tertiary-bg); +} - #wf2-graph-card.wf2-graph-expanded .wf2-graph-issues-wrap { - background: var(--wf2-surface); - } +.wf2-graph-canvas, +.wf2-graph-canvas-empty-state { + min-height: 40rem; +} - @media (max-width: 991px) { - .wf2-graph-canvas-wrap, - .wf2-graph-canvas, - .wf2-graph-canvas-empty-state { - min-height: 32rem; - max-height: 32rem; - } - } +.wf2-graph-canvas-empty-state { + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + text-align: center; + color: var(--bs-secondary-color); +} - @media (max-width: 767px) { - .wf2-guide-drawer { - width: 100vw; - } - - .wf2-guide-segmented { - grid-template-columns: 1fr; - } - - .wf2-guide-diagnostics-grid { - grid-template-columns: 1fr; - } - - .wf2-guide-inline-field, - .wf2-guide-selection-chip { - flex-direction: column; - align-items: stretch; - } - - .wf2-inline-save-row, - .wf2-cond-header-row, - .wf2-compare-grid { - grid-template-columns: 1fr; - } - - .wf2-source-selected-item, - .wf2-source-entry { - flex-direction: column; - } - - .wf2-source-entry-actions { - width: 100%; - } - - .wf2-graph-floating-card { - width: min(96vw, 520px); - min-width: 280px; - max-width: calc(100vw - 16px); - min-height: 220px; - padding: 0.75rem; - } - - .wf2-graph-context-menu { - width: min(92vw, 320px); - min-width: 0; - } - - .wf2-graph-editor-inline-row, - .wf2-structured-form-grid { - grid-template-columns: 1fr; - } - - .wf2-runtime-scope-card { - padding: 0.75rem 0.8rem; - } - - .wf2-logic-tree-toolbar { - grid-template-columns: 1fr; - } - - .wf2-logic-tree-form-grid { - grid-template-columns: 1fr; - } - - .wf2-logic-case-outcome-row { - grid-template-columns: 1fr; - } - - .wf2-graph-floating-card .d-flex.gap-2 { - flex-direction: column; - } - - .wf2-graph-floating-card .d-flex.gap-2 > .btn, - .wf2-graph-floating-card .d-flex.gap-2 > .form-control, - .wf2-graph-floating-card .d-flex.gap-2 > .form-select { - width: 100%; - flex: 1 1 auto; - } - } +.wf2-graph-canvas-stage { + position: relative; + display: inline-block; + min-width: 100%; + min-height: 100%; +} -.wf2-template-max-width { - max-width: 1200px; +.wf2-graph-overlay-root { + position: absolute; + inset: 0; + z-index: 3; + pointer-events: none; } -.wf2-font-mono { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; +.wf2-graph-svg { + display: block; + max-width: none; + background: + linear-gradient(var(--wf2-graph-grid) 1px, transparent 1px), + linear-gradient(90deg, var(--wf2-graph-grid) 1px, transparent 1px); + background-size: 24px 24px; } -.wf2-pre-wrap { - white-space: pre-wrap; +.wf2-graph-node { + cursor: move; } -.wf2-pre-wrap-no-margin { - white-space: pre-wrap; - margin: 0; +.wf2-graph-node.is-dragging { + opacity: 0.85; } -.wf2-details-summary { +.wf2-graph-edge { cursor: pointer; - list-style: none; } -.wf2-diagram-canvas { - height: 72vh; - width: 100%; +.wf2-graph-node-title { + font-size: 13px; + font-weight: 600; + fill: var(--wf2-graph-node-text); } -.wf2-list-page { - color: var(--wf2-text); +.wf2-graph-node-meta { + font-size: 11px; + fill: var(--wf2-graph-node-meta); } -.wf2-page { - color: var(--wf2-text); +.wf2-graph-badge { + font-size: 10px; + font-weight: 700; + fill: var(--wf2-graph-accent); } -.wf2-list-header { - margin-bottom: 1rem; +.wf2-graph-edge-label { + font-size: 11px; + fill: var(--wf2-graph-node-meta); + paint-order: stroke; + stroke: var(--bs-body-bg); + stroke-width: 3px; + stroke-linejoin: round; } -.wf2-list-title { - font-size: 1.35rem; - line-height: 1.25; +.wf2-graph-edge.is-start-edge path { + stroke: var(--wf2-graph-accent); + stroke-dasharray: 8 5; } -.wf2-list-subtitle { - color: var(--wf2-text-muted); +.wf2-graph-edge.is-start-edge .wf2-graph-edge-label { + fill: var(--wf2-graph-accent); + font-weight: 700; } -.wf2-metric-card { - border-color: var(--wf2-border-muted); - box-shadow: var(--wf2-shadow); +.wf2-graph-node-warning { + font-size: 9px; + font-weight: 700; + letter-spacing: 0.05em; + fill: var(--wf2-graph-warning); } -.wf2-metric-label { - color: var(--wf2-text-muted); - font-size: 0.78rem; - letter-spacing: 0; - text-transform: uppercase; +.wf2-graph-output-handle { + fill: var(--wf2-graph-accent); + stroke: var(--bs-body-bg); + stroke-width: 2px; + cursor: crosshair; } -.wf2-metric-value { - font-size: 1.45rem; - font-weight: 600; - line-height: 1.2; +.wf2-graph-connection-preview { + fill: none; + stroke: var(--wf2-graph-accent); + stroke-width: 2.5; + stroke-dasharray: 6 4; + pointer-events: none; } -.wf2-filter-card, -.wf2-table-card { - border-color: var(--wf2-border-muted); - box-shadow: var(--wf2-shadow); -} +/* Floating panels rendered over the canvas */ -.wf2-filter-card .form-label { - font-weight: 500; +.wf2-graph-floating-card { + position: absolute; + z-index: 4; + gap: 0; + min-width: 340px; + max-width: min(960px, calc(100vw - 32px)); + max-height: calc(100vh - 32px); + overflow: hidden; + resize: both; + border: 1px solid var(--bs-border-color); + border-radius: var(--bs-border-radius); + background: var(--bs-body-bg); + box-shadow: var(--bs-box-shadow); + pointer-events: auto; } -.wf2-table-card .card-header { - background: var(--wf2-surface); - border-bottom-color: var(--wf2-border-muted); +.wf2-graph-context-menu { + width: 340px; + min-width: 320px; + height: auto; + resize: none; } -.wf2-table-title { - font-weight: 600; +.wf2-graph-floating-node { + min-height: 18rem; + height: auto; } -.wf2-table-card .table { - --bs-table-hover-bg: var(--wf2-accent-soft); +.wf2-graph-floating-edge { + height: auto; + max-height: min(28rem, calc(100vh - 48px)); } -.wf2-table-card thead th { - color: var(--wf2-text); - font-weight: 600; - white-space: nowrap; +.wf2-graph-floating-header { + padding: 1rem; + border-bottom: 1px solid var(--bs-border-color); } -.wf2-table-card tbody td { - vertical-align: middle; +.wf2-graph-floating-meta { + padding: 0.75rem 1rem 0; } -.wf2-empty-row { - color: var(--wf2-text-muted); - padding-bottom: 2rem !important; - padding-top: 2rem !important; - text-align: center; +.wf2-graph-floating-body { + flex: 1 1 auto; + min-height: 0; + overflow: auto; + padding: 1rem; } -.wf2-page .text-muted, -.wf2-list-page .text-muted, -.wf2-page .form-text, -.wf2-list-page .form-text { - color: var(--wf2-text-muted) !important; +.wf2-graph-floating-footer { + padding: 0.75rem 1rem; + border-top: 1px solid var(--bs-border-color); } -.wf2-page code, -.wf2-list-page code { - color: var(--wf2-accent-strong); +.wf2-graph-floating-card .form-control, +.wf2-graph-floating-card .form-select, +.wf2-graph-floating-card textarea { + min-width: 0; } -.wf2-page .card, -.wf2-list-page .card { - background: var(--wf2-surface); - border-color: var(--wf2-border-muted); - color: var(--wf2-text); - box-shadow: var(--wf2-shadow); +.wf2-graph-floating-card .btn { + white-space: nowrap; } -.wf2-page .card-header, -.wf2-list-page .card-header { - background: linear-gradient(180deg, var(--wf2-surface) 0%, var(--wf2-surface-soft) 100%) !important; - border-bottom-color: var(--wf2-border-muted); - color: var(--wf2-text); +.wf2-graph-floating-card .d-flex.gap-2 { + flex-wrap: wrap; } -.wf2-page .card-body, -.wf2-list-page .card-body { - color: var(--wf2-text); +.wf2-graph-floating-card .d-flex.gap-2 > .form-control, +.wf2-graph-floating-card .d-flex.gap-2 > .form-select { + flex: 1 1 160px; + min-width: 0; } -.wf2-page .border, -.wf2-list-page .border { - border-color: var(--wf2-border-muted) !important; -} +/* Expanded (full viewport) graph mode */ -.wf2-page .rounded-3.border, -.wf2-list-page .rounded-3.border, -.wf2-page .list-group-item, -.wf2-list-page .list-group-item { - background: var(--wf2-surface-soft); - color: var(--wf2-text); +#wf2-graph-card.wf2-graph-expanded { + position: fixed; + inset: 1rem; + z-index: 1060; + display: flex; + flex-direction: column; + margin: 0 !important; + box-shadow: var(--bs-box-shadow-lg); } -.wf2-page .table, -.wf2-list-page .table { - --bs-table-bg: var(--wf2-surface); - --bs-table-color: var(--wf2-text); - --bs-table-border-color: var(--wf2-border-muted); - --bs-table-hover-bg: var(--wf2-accent-soft); - --bs-table-hover-color: var(--wf2-text); - color: var(--wf2-text); +#wf2-graph-card.wf2-graph-expanded .card-body { + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-height: 0; + overflow: hidden; } -.wf2-page .table thead th, -.wf2-list-page .table thead th { - color: var(--wf2-text); - border-bottom-color: var(--wf2-border); +#wf2-graph-card.wf2-graph-expanded .wf2-graph-issues-wrap { + position: sticky; + top: 0; + z-index: 3; } -.wf2-page .form-control, -.wf2-page .form-select, -.wf2-page textarea, -.wf2-list-page .form-control, -.wf2-list-page .form-select, -.wf2-list-page textarea { - background-color: var(--wf2-surface); - border-color: var(--wf2-border); - color: var(--wf2-text); +#wf2-graph-card.wf2-graph-expanded .wf2-issues-panel { + max-height: 10rem; } -.wf2-page .form-control::placeholder, -.wf2-page textarea::placeholder, -.wf2-list-page .form-control::placeholder, -.wf2-list-page textarea::placeholder { - color: var(--wf2-text-muted); +#wf2-graph-card.wf2-graph-expanded .wf2-graph-editor-host, +#wf2-graph-card.wf2-graph-expanded .wf2-graph-ui, +#wf2-graph-card.wf2-graph-expanded .wf2-graph-main { + flex: 1 1 auto; + min-height: 0; + height: 100%; } -.wf2-page .form-control:focus, -.wf2-page .form-select:focus, -.wf2-page textarea:focus, -.wf2-list-page .form-control:focus, -.wf2-list-page .form-select:focus, -.wf2-list-page textarea:focus { - background-color: var(--wf2-surface); - border-color: var(--wf2-accent); - color: var(--wf2-text); - box-shadow: 0 0 0 0.2rem var(--wf2-accent-ring); +#wf2-graph-card.wf2-graph-expanded .wf2-graph-canvas-wrap { + height: 100%; + min-height: 0; + max-height: none; } -.wf2-page .btn-outline-secondary, -.wf2-list-page .btn-outline-secondary { - background: var(--wf2-surface); - border-color: var(--wf2-border); - color: var(--wf2-text); +body.wf2-graph-expanded { + overflow: hidden; } -.wf2-page .btn-outline-secondary:hover, -.wf2-page .btn-outline-secondary:focus, -.wf2-list-page .btn-outline-secondary:hover, -.wf2-list-page .btn-outline-secondary:focus { - background: var(--wf2-surface-soft); - border-color: var(--wf2-accent); - color: var(--wf2-accent-strong); -} +/* ---------------------------------------------------------------------- */ +/* Responsive */ +/* ---------------------------------------------------------------------- */ -.wf2-page .accordion, -.wf2-list-page .accordion { - --bs-accordion-bg: var(--wf2-surface); - --bs-accordion-color: var(--wf2-text); - --bs-accordion-border-color: var(--wf2-border-muted); - --bs-accordion-btn-bg: var(--wf2-surface); - --bs-accordion-btn-color: var(--wf2-text); - --bs-accordion-active-bg: var(--wf2-surface-soft); - --bs-accordion-active-color: var(--wf2-text); +@media (max-width: 991px) { + .wf2-graph-canvas-wrap, + .wf2-graph-canvas, + .wf2-graph-canvas-empty-state { + min-height: 32rem; + max-height: 32rem; + } } -.wf2-page .accordion-button, -.wf2-list-page .accordion-button { - color: var(--wf2-text); -} +@media (max-width: 767px) { + .wf2-guide-drawer { + width: 100vw; + } + + .wf2-guide-segmented, + .wf2-guide-diagnostics-grid, + .wf2-cond-header-row, + .wf2-inline-save-row, + .wf2-compare-grid, + .wf2-graph-editor-inline-row, + .wf2-structured-form-grid, + .wf2-logic-tree-toolbar, + .wf2-logic-tree-form-grid, + .wf2-logic-case-outcome-row { + grid-template-columns: 1fr; + } -.wf2-page .accordion-button:not(.collapsed), -.wf2-list-page .accordion-button:not(.collapsed) { - background: var(--wf2-surface-soft); - color: var(--wf2-text); -} - -.wf2-page .wf2-pre-wrap, -.wf2-list-page .wf2-pre-wrap, -.wf2-page .wf2-pre-wrap-no-margin, -.wf2-list-page .wf2-pre-wrap-no-margin { - color: var(--wf2-text); -} - -.wf2-page pre.wf2-pre-wrap, -.wf2-list-page pre.wf2-pre-wrap, -.wf2-page pre.wf2-pre-wrap-no-margin, -.wf2-list-page pre.wf2-pre-wrap-no-margin, -.wf2-page .accordion-body > .wf2-pre-wrap, -.wf2-list-page .accordion-body > .wf2-pre-wrap { - background: var(--wf2-surface-soft); - border: 1px solid var(--wf2-border-muted); - border-radius: 0.5rem; - padding: 0.75rem; -} + .wf2-guide-inline-field, + .wf2-guide-selection-chip, + .wf2-source-entry, + .wf2-source-selected-item { + flex-direction: column; + align-items: stretch; + } + + .wf2-source-entry-actions { + width: 100%; + } -.wf2-page .alert .text-muted, -.wf2-list-page .alert .text-muted { - color: inherit !important; - opacity: 0.78; + .wf2-graph-floating-card { + width: min(96vw, 520px); + min-width: 280px; + max-width: calc(100vw - 16px); + } + + .wf2-graph-context-menu { + width: min(92vw, 320px); + min-width: 0; + } + + .wf2-graph-floating-card .d-flex.gap-2 { + flex-direction: column; + } + + .wf2-graph-floating-card .d-flex.gap-2 > .btn, + .wf2-graph-floating-card .d-flex.gap-2 > .form-control, + .wf2-graph-floating-card .d-flex.gap-2 > .form-select { + width: 100%; + flex: 1 1 auto; + } } diff --git a/trustpoint/templates/pki/cert_profiles/add.html b/trustpoint/templates/pki/cert_profiles/add.html index bf9f84def..7ab8d58f7 100644 --- a/trustpoint/templates/pki/cert_profiles/add.html +++ b/trustpoint/templates/pki/cert_profiles/add.html @@ -4,30 +4,30 @@ {% load crispy_forms_filters %} {% block content %} -
- {% csrf_token %} -
-
-
-

{% trans 'Add new Certificate Profile' %}

-
-
-
-
-

{% trans 'File Import' %}

-
- +
+
+

{% trans 'Add Certificate Profile' %}

+

{% trans 'Import a certificate profile from a file.' %}

+
+
+
+ + {% csrf_token %} +
+
+

{% trans 'File Import' %}

+
+
{{ form|crispy }} -
-
-
-
- {% trans 'Cancel' %} - -
-
+ +
- +
+
+ {% trans 'Cancel' %} + +
+
diff --git a/trustpoint/templates/pki/cert_profiles/cert_profiles.html b/trustpoint/templates/pki/cert_profiles/cert_profiles.html index 920fb7580..7de462d61 100644 --- a/trustpoint/templates/pki/cert_profiles/cert_profiles.html +++ b/trustpoint/templates/pki/cert_profiles/cert_profiles.html @@ -4,45 +4,51 @@ {% block content %} -
+
-

{% trans 'Certificate Profiles' %}

+

{% trans 'Certificate Profiles' %}

+

+ {% trans 'Manage certificate profiles and review where they are available.' %} +

-
- +
+
+
+
- - + - - - - - - - + @@ -50,37 +56,43 @@

{% trans 'Certificate Profiles' %}

{% for profile in page_obj %} - - - + + {% empty %} - + {% endfor %}
- + + + + {% trans 'Unique Name' %} - + + {% trans 'Display Name' %} + {% trans 'Active in Domains' %} - + + {% trans 'Created at' %} - + + {% trans 'Updated at' %} - + + {% trans 'Is default' %} {% trans 'Config' %}{% trans 'Issuance' %}{% trans 'Actions' %}
- + {{ profile.unique_name }} {{ profile.display_name }} {{ profile.created_at|local_datetime }} {{ profile.updated_at|local_datetime }}{% if profile.is_default == 1 %} ✔ {% else %} ✘ {% endif %}{% trans 'Edit' %}{% trans 'Issue' %} + {% if profile.is_default == 1 %} + {% trans 'Default' %} + {% else %} + — + {% endif %} + +
+ {% trans 'Configure' %} + {% trans 'Issue' %} +
+
{% trans 'No Certificate Profile has been added yet.' %}{% trans 'No certificate profiles have been added yet.' %}
+
{% include 'trustpoint/pagination.html' %} +
-
-
- -
-
- - {% trans 'Add new Certificate Profile' %} - -
+
+ + {% trans 'Add Certificate Profile' %}
diff --git a/trustpoint/templates/pki/cert_profiles/config.html b/trustpoint/templates/pki/cert_profiles/config.html index 5ffd5f9c3..50c8a16b2 100644 --- a/trustpoint/templates/pki/cert_profiles/config.html +++ b/trustpoint/templates/pki/cert_profiles/config.html @@ -5,28 +5,31 @@ {% block content %}
-
-
- {% if is_new %} -

{% trans 'Add Certificate Profile' %}

- {% else %} -

{% trans 'Edit Certificate Profile' %}

- {% endif %} -
+

+ {% if is_new %}{% trans 'Add Certificate Profile' %}{% else %}{% trans 'Edit Certificate Profile' %}{% endif %} +

+

+ {% trans 'Configure the profile identifier, default availability, and certificate rules.' %} +

-
-
-
+
+
+ {% csrf_token %} - {% for error in form.non_field_errors %} -
  • {{ error }}
    • - {% endfor %} -

    {% trans 'General' %}

    -
    + {% if form.non_field_errors %} + + {% endif %} +
    +
    +

    {% trans 'General' %}

    +
    +
    -
    {% trans 'Unique Name' %}
    +
    {% for error in form.unique_name.errors %} @@ -35,41 +38,44 @@

    {% trans 'General' %}

    -
    {% trans 'Is (enabled in new domains by) default' %}
    +
    - +
    -

    {% trans 'Profile Details' %}

    -
    -
    -
    +
    +
    +
    +

    {% trans 'Profile Details' %}

    +

    {% trans 'Edit the JSON rules that define certificate content and validation.' %}

    +
    +
    +
    +
    + {% for error in form.profile_json.errors %}
    {{ error }}
    {% endfor %}
    -
    - - -
    - 💡 Tip: Press Ctrl+K To Open Side Bar or -
    +
    + {% blocktrans %}Press Ctrl+K to open the profile builder, or{% endblocktrans %} + -
    - -
    -
    -
    -
    - {% trans 'Back' %} - +
    + +
    - +
    +
    + {% trans 'Cancel' %} + +
    diff --git a/trustpoint/templates/pki/cert_profiles/confirm_delete.html b/trustpoint/templates/pki/cert_profiles/confirm_delete.html index 6ba592dfe..235a06050 100644 --- a/trustpoint/templates/pki/cert_profiles/confirm_delete.html +++ b/trustpoint/templates/pki/cert_profiles/confirm_delete.html @@ -1,43 +1,38 @@ {% extends 'trustpoint/base.html' %} {% load i18n %} -{% load static %} -{% load crispy_forms_filters %} - {% block content %} -
    - {% csrf_token %} - -
    -
    -
    -

    {% trans 'Confirm Certificate Profile Deletion' %}

    -
    +
    +
    +

    {% trans 'Delete Certificate Profiles' %}

    +

    {% trans 'Review the selected profiles before confirming deletion.' %}

    +
    +
    + + {% csrf_token %} + -
    -
    - {% for profile in cert_profiles %} -

    ({{ forloop.counter }}) {% trans 'Certificate Profile' %}: {{ profile.unique_name }}

    -
    +
    + {% for profile in cert_profiles %} +
    +

    {% blocktrans with counter=forloop.counter name=profile.unique_name %}{{ counter }}. {{ name }}{% endblocktrans %}

    {% trans 'Certificate Profile' %}
    - +
    - {% endfor %} -
    -
    - -
    -
    - {% trans 'Cancel' %} - -
    -
    -
    - +
    + {% empty %} +

    {% trans 'No certificate profiles are selected.' %}

    + {% endfor %} + + +
    +
    + {% trans 'Cancel' %} + +
    +
    {% endblock content %} \ No newline at end of file diff --git a/trustpoint/templates/pki/cert_profiles/domain_table.html b/trustpoint/templates/pki/cert_profiles/domain_table.html index 92e4881c5..f60715447 100644 --- a/trustpoint/templates/pki/cert_profiles/domain_table.html +++ b/trustpoint/templates/pki/cert_profiles/domain_table.html @@ -2,16 +2,16 @@ {% block content %}
    - +
    - - - @@ -21,20 +21,18 @@ {% empty %} - - - + {% endfor %}
    + {% trans 'Allowed' %} + {% trans 'Unique Name' %} + {% trans 'Alias' %}
    - +
    		{{ profile.unique_name }}
    {% trans 'There are no Certificate Profiles configured.' %}
    {% trans 'No certificate profiles are configured.' %}
    - {% include 'trustpoint/pagination.html' %}
    +{% include 'trustpoint/pagination.html' %} {% endblock content %} \ No newline at end of file diff --git a/trustpoint/templates/pki/cert_profiles/includes/profile-builder-sidebar.html b/trustpoint/templates/pki/cert_profiles/includes/profile-builder-sidebar.html index c1478ca64..af455a8a0 100644 --- a/trustpoint/templates/pki/cert_profiles/includes/profile-builder-sidebar.html +++ b/trustpoint/templates/pki/cert_profiles/includes/profile-builder-sidebar.html @@ -1,14 +1,17 @@ +{% load i18n %} +
    - Select a Card to Insert - + {% trans 'Select a field to insert' %} +
    @@ -18,7 +21,7 @@
    - Press Ctrl+K to toggle - Esc to close + {% blocktrans %}Press Ctrl+K to toggle{% endblocktrans %} + {% blocktrans %}Press Esc to close{% endblocktrans %}
    diff --git a/trustpoint/templates/pki/truststores/add/file_import.html b/trustpoint/templates/pki/truststores/add/file_import.html index d4e35f79f..6263cb3bd 100644 --- a/trustpoint/templates/pki/truststores/add/file_import.html +++ b/trustpoint/templates/pki/truststores/add/file_import.html @@ -3,30 +3,26 @@ {% load crispy_forms_filters %} {% block content %} -
    - {% csrf_token %} -
    -
    -
    -

    {% trans 'Add new Truststore' %}

    -
    -
    -
    -
    -

    {% trans 'File Import' %}

    -
    +
    +
    +

    {% trans 'Add Truststore' %}

    +

    {% trans 'Import trusted certificates from a file.' %}

    +
    +
    +
    + + {% csrf_token %} +
    +

    {% trans 'File Import' %}

    +
    {{ form|crispy }} -
    -
    -
    -
    - - {% trans 'Cancel' %} - -
    -
    + +
    - +
    +
    + {% trans 'Cancel' %} + +
    +
    {% endblock content %} \ No newline at end of file diff --git a/trustpoint/templates/pki/truststores/confirm_delete.html b/trustpoint/templates/pki/truststores/confirm_delete.html index 5069b8c4f..6c8738843 100644 --- a/trustpoint/templates/pki/truststores/confirm_delete.html +++ b/trustpoint/templates/pki/truststores/confirm_delete.html @@ -3,36 +3,36 @@ {% load crispy_forms_filters %} {% block content %} -
    - {% csrf_token %} - -
    -
    -

    {% trans 'Confirm Truststore Deletion' %}

    +
    +
    +

    {% trans 'Delete Truststores' %}

    +

    {% trans 'Review the selected truststores before confirming deletion.' %}

    +
    +
    + + {% csrf_token %} + -
    -
    - {% if truststores %} - {% for truststore in truststores %} -

    ({{ forloop.counter }}) {% trans 'Truststore' %}: {{ truststore.unique_name }}

    -
    + {% if truststores %} +
    + {% for truststore in truststores %} +
    +

    {% blocktrans with counter=forloop.counter name=truststore.unique_name %}{{ counter }}. {{ name }}{% endblocktrans %}

    {% include 'pki/truststores/sub_details.html' with truststore=truststore %} - {% empty %} -

    {% trans 'No Truststores selected.' %}

    - {% endfor %} - {% else %} -

    {% trans 'No Truststores found.' %}

    - {% endif %} -
    -
    -
    -
    - - {% trans 'Cancel' %} - -
    -
    -
    - +
    + {% endfor %} + + {% else %} +

    {% trans 'No truststores are selected.' %}

    + {% endif %} + +
    +
    + {% trans 'Cancel' %} + +
    +
    {% endblock content %} diff --git a/trustpoint/templates/pki/truststores/details.html b/trustpoint/templates/pki/truststores/details.html index ea6d13c01..deb4d2612 100644 --- a/trustpoint/templates/pki/truststores/details.html +++ b/trustpoint/templates/pki/truststores/details.html @@ -1,35 +1,27 @@ {% extends 'trustpoint/base.html' %} {% load i18n %} -{% load crispy_forms_filters %} {% block content %} - -
    - -
    -
    -

    {% trans "Truststore Details" %}

    -
    -
    - -
    -
    -

    General

    -
    - {% include 'pki/truststores/sub_generic.html' %} - -

    Certificates

    -
    - - {% include 'pki/truststores/sub_details.html' %} -
    -
    -
    -
    - - {% trans 'Download' %} -
    -
    -
    - +
    +
    +

    {% trans 'Truststore Details' %}

    +

    {% trans 'Review the truststore configuration and included certificates.' %}

    +
    +
    +
    +

    {% trans 'General' %}

    +
    + {% include 'pki/truststores/sub_generic.html' %} +
    +
    +

    {% trans 'Certificates' %}

    +
    + {% include 'pki/truststores/sub_details.html' %} +
    +
    +
    + {% trans 'Back' %} + {% trans 'Download' %} +
    +
    {% endblock content %} \ No newline at end of file diff --git a/trustpoint/templates/pki/truststores/download.html b/trustpoint/templates/pki/truststores/download.html index 1cbf949b7..4d604e2dc 100644 --- a/trustpoint/templates/pki/truststores/download.html +++ b/trustpoint/templates/pki/truststores/download.html @@ -1,50 +1,30 @@ {% extends 'trustpoint/base.html' %} {% load i18n %} -{% load crispy_forms_filters %} - {% block content %} - -
    - {% csrf_token %} - -
    - -
    -
    -

    {% trans "Download Truststore" %}

    -
    +
    +
    +

    {% trans 'Download Truststore' %}

    +

    {% trans 'Choose a file format for this truststore.' %}

    +
    +
    +
    +

    {% trans 'Truststore' %}

    +
    + {% include 'pki/truststores/sub_generic.html' %} + {% trans 'Truststore Details' %} +
    +
    +

    {% trans 'Download Options' %}

    +
    +
    + {% trans 'Download as PEM' %} + {% trans 'Download as PKCS#7 (PEM)' %} + {% trans 'Download as PKCS#7 (DER)' %}
    - -
    -
    - -

    {% trans "Truststore" %}

    -
    - - {% include 'pki/truststores/sub_generic.html' %} - -
    - Truststore Details
    -
    - -

    {% trans 'Download Truststore' %}

    -
    - - -
    -
    - -
    -
    - - {% trans 'Cancel' %} -
    -
    - -
    - + +
    +
    + {% trans 'Back to Truststores' %} +
    +
    {% endblock content %} \ No newline at end of file diff --git a/trustpoint/templates/pki/truststores/download_multiple.html b/trustpoint/templates/pki/truststores/download_multiple.html index 40680781d..198284b71 100644 --- a/trustpoint/templates/pki/truststores/download_multiple.html +++ b/trustpoint/templates/pki/truststores/download_multiple.html @@ -1,67 +1,37 @@ {% extends 'trustpoint/base.html' %} {% load i18n %} -{% load crispy_forms_filters %} - {% block content %} - -
    - {% csrf_token %} - -
    - -
    -
    -

    {% trans "Download Truststores" %}

    -
    -
    - -
    -
    -

    {{ truststores.count }} {% trans 'Truststores selected' %}

    -
    - -
    -

    {% trans "Download Selected Truststores" %}

    -
    - - -
    - -

    {% trans "Truststore Details" %}

    -
    - - {% for truststore in truststores %} - -

    Truststore {{ forloop.counter }}

    - - {% include 'pki/truststores/sub_generic.html' %} - - {% if not forloop.last %} -
    - {% endif %} - - {% endfor %} - -
    +
    +
    +

    {% trans 'Download Truststores' %}

    +

    {% blocktrans with count=truststores.count %}{{ count }} truststores selected{% endblocktrans %}

    +
    +
    +
    +

    {% trans 'Download Options' %}

    +
    +
    + {% trans 'Download as PEM (ZIP)' %} + {% trans 'Download as PEM (TAR.GZ)' %} + {% trans 'Download as PKCS#7-PEM (ZIP)' %} + {% trans 'Download as PKCS#7-PEM (TAR.GZ)' %} + {% trans 'Download as PKCS#7-DER (ZIP)' %} + {% trans 'Download as PKCS#7-DER (TAR.GZ)' %}
    - -
    -
    - - {% trans 'Cancel' %} +
    +
    +

    {% trans 'Selected Truststores' %}

    +
    + {% for truststore in truststores %} +
    +

    {% blocktrans with counter=forloop.counter name=truststore.unique_name %}{{ counter }}. {{ name }}{% endblocktrans %}

    + {% include 'pki/truststores/sub_generic.html' with truststore=truststore %}
    -
    - -
    - - + {% endfor %} + +
    +
    + {% trans 'Back to Truststores' %} +
    +
    {% endblock content %} \ No newline at end of file diff --git a/trustpoint/templates/pki/truststores/sub_details.html b/trustpoint/templates/pki/truststores/sub_details.html index 54892b156..49e8bd380 100644 --- a/trustpoint/templates/pki/truststores/sub_details.html +++ b/trustpoint/templates/pki/truststores/sub_details.html @@ -3,16 +3,16 @@
    {% for context in cert_context %} - -
    +
    -
    Subject
    +
    {% trans 'Subject' %}
    {% include 'pki/truststores/subject_table.html' with entries=context.subject_entries %}
    @@ -20,7 +20,7 @@
    -
    Issuer
    +
    {% trans 'Issuer' %}
    {% include 'pki/truststores/subject_table.html' with entries=context.issuer_entries %}
    @@ -28,13 +28,14 @@
    {% trans 'Serial Number' %}
    -
    {{ context.certificate.serial_number }}
    +
    {{ context.certificate.serial_number }}
    -
    Fingerprint (SHA256)
    -
    {{ context.certificate.sha256_fingerprint }}
    +
    {% trans 'Fingerprint (SHA-256)' %}
    +
    {{ context.certificate.sha256_fingerprint }}
    + {% endfor %}
    diff --git a/trustpoint/templates/pki/truststores/sub_generic.html b/trustpoint/templates/pki/truststores/sub_generic.html index ab7ba6629..cf7cc5b9a 100644 --- a/trustpoint/templates/pki/truststores/sub_generic.html +++ b/trustpoint/templates/pki/truststores/sub_generic.html @@ -3,19 +3,19 @@ {% block sub_details %}
    -
    Unique Name
    +
    {% trans 'Unique Name' %}
    -
    Intended Usage
    +
    {% trans 'Intended Usage' %}
    {{ truststore.get_intended_usage_display }}
    -
    Created-At
    +
    {% trans 'Created at' %}
    {{ truststore.created_at|local_datetime }}
    diff --git a/trustpoint/templates/pki/truststores/subject_table.html b/trustpoint/templates/pki/truststores/subject_table.html index ce5eb00d7..ce6bdcd77 100644 --- a/trustpoint/templates/pki/truststores/subject_table.html +++ b/trustpoint/templates/pki/truststores/subject_table.html @@ -1,18 +1,30 @@ +{% load i18n %} {% load static %} - +
    +
    + + + + + + + + {% for entry in entries %} {% if entry.name %} - - + + {% else %} - - + + {% endif %} {% empty %} - + {% endfor %} +
    {% trans 'Name' %}{% trans 'Object Identifier' %}{% trans 'Value' %}
    {{ entry.name }}({{ entry.oid }}){{ entry.name }}{{ entry.oid }}({{ entry.oid }})—{{ entry.oid }}{{ entry.value }}
    No entries
    {% trans 'No entries' %}
    +
    diff --git a/trustpoint/templates/pki/truststores/table_filter.html b/trustpoint/templates/pki/truststores/table_filter.html index ef40ca879..42ef3c7c5 100644 --- a/trustpoint/templates/pki/truststores/table_filter.html +++ b/trustpoint/templates/pki/truststores/table_filter.html @@ -1,16 +1,15 @@ {% load i18n %} {% block table_filter %} - -
    +
    -
    - - +
    + {% trans 'Reset' %} +
    diff --git a/trustpoint/templates/pki/truststores/truststores.html b/trustpoint/templates/pki/truststores/truststores.html index 4eef7d71a..8254ac113 100644 --- a/trustpoint/templates/pki/truststores/truststores.html +++ b/trustpoint/templates/pki/truststores/truststores.html @@ -3,85 +3,76 @@ {% load internationalization_tags %} {% block content %} +
    +
    +

    {% trans 'Truststores' %}

    +

    {% trans 'Manage trusted certificate collections and their downloads.' %}

    +
    -
    -
    -

    {% trans 'Truststores' %}

    -
    - - {% include 'pki/truststores/table_filter.html' with table_url='pki:truststores' %} +
    +
    + {% include 'pki/truststores/table_filter.html' with table_url='pki:truststores' %} -
    - +
    +
    - - + - - - - - + {% for truststore in page_obj %} - - - {% empty %} - + {% endfor %}
    - + + {% trans 'Unique Name' %} - + + {% trans 'Intended Usage' %} - + + {% trans 'Created at' %} {% trans 'Details' %}{% trans 'Download' %}{% trans 'Delete' %}{% trans 'Actions' %}
    - + {{ truststore.unique_name }} {{ truststore.get_intended_usage_display }} {{ truststore.created_at|local_datetime }} - {% trans 'Details' %} - - {% trans 'Download' %} - - {% trans 'Delete' %} + +
    + {% trans 'Details' %} + {% trans 'Download' %} + {% trans 'Delete' %} +
    {% trans 'No Truststore has been added yet.' %}{% trans 'No truststores have been added yet.' %}
    +
    {% include 'trustpoint/pagination.html' %} -
    + +
    -
    -
    -
    - -
    -
    - -
    -
    -
    - {% trans 'Add new Truststore' %} -
    +
    +
    + +
    + {% trans 'Add Truststore' %}
    +
    {% endblock content %} diff --git a/trustpoint/templates/workflows2/approval_detail.html b/trustpoint/templates/workflows2/approval_detail.html index 7bc4467ad..5b52782fa 100644 --- a/trustpoint/templates/workflows2/approval_detail.html +++ b/trustpoint/templates/workflows2/approval_detail.html @@ -1,14 +1,10 @@ {% extends 'trustpoint/base.html' %} {% load i18n static internationalization_tags %} -{% block head %} - {{ block.super }} - -{% endblock head %} {% block content %} -
    -
    +
    +
    @@ -38,14 +34,14 @@

    {% trans "Approval review" %}

    {% if can_resolve %} -
    +
    {% trans "Decision required" %}
    {% trans "This workflow instance is waiting for an approval decision before it can continue." %}
    {% elif approval.status == "approved" %} -
    +
    {% trans "Approved" %}
    {% if approval.decided_by %} @@ -56,7 +52,7 @@

    {% trans "Approval review" %}

    {% elif approval.status == "rejected" %} -
    +
    {% trans "Rejected" %}
    {% if approval.decided_by %} @@ -67,7 +63,7 @@

    {% trans "Approval review" %}

    {% elif approval.status == "expired" %} -
    +
    {% trans "Approval expired" %}
    {% trans "The approval was not resolved before its timeout." %}
    @@ -75,7 +71,7 @@

    {% trans "Approval review" %}

    -
    +
    {% if can_resolve %}{% trans "Make decision" %}{% else %}{% trans "Decision result" %}{% endif %}
    @@ -175,7 +171,7 @@

    {% trans "Approval review" %}

    -
    +
    {% trans "Workflow context" %}
    @@ -227,7 +223,7 @@

    {% trans "Approval review" %}

    -
    +
    {% trans "Current workflow vars" %}
    {% if vars_summary %} @@ -247,7 +243,7 @@

    {% trans "Approval review" %}

    -
    +
    {% trans "Technical details" %}
    @@ -259,7 +255,7 @@

    - 
    {{ vars_pretty }}
    + 
    {{ vars_pretty }}
    @@ -272,7 +268,7 @@

    - 
    {{ event_pretty }}
    + 
    {{ event_pretty }}
    diff --git a/trustpoint/templates/workflows2/definition_editor.html b/trustpoint/templates/workflows2/definition_editor.html index 09ce86beb..6eb7bb4a2 100644 --- a/trustpoint/templates/workflows2/definition_editor.html +++ b/trustpoint/templates/workflows2/definition_editor.html @@ -13,40 +13,41 @@ data-mode="{{ mode }}" data-context-catalog-url="{% url 'workflows2:context_catalog' %}" > -
    -
    - {% if mode == "create" %} -

    {% trans "New workflow (v2)" %}

    - {% else %} -

    {% trans "Edit workflow (v2)" %}

    -
    {% trans "ID" %}: {{ definition.id }}
    - {% endif %} +
    +
    +
    + {% if mode == "create" %} +

    {% trans "New Workflow" %}

    +

    {% trans "Define and validate a workflow." %}

    + {% else %} +

    {% trans "Edit Workflow" %}

    +

    {% trans "Workflow ID" %}: {{ definition.id }}

    + {% endif %} +
    + {% trans "Cancel" %}
    - {% trans "Back" %} -
    - {% if compile_error %} -
    -
    {% trans "Compile error" %}
    -
    {{ compile_error }}
    -
    - {% endif %} +
    + {% if compile_error %} + + {% endif %} -
    -
    -
    -
    +
    +
    {% csrf_token %}
    {{ form.enabled }} - +
    - +
    - {% if mode == "edit" %} {% trans "Reload" %} @@ -88,69 +88,72 @@

    {% trans "Edit workflow (v2)" %}

    -
    -
    -
    -
    -
    -
    {% trans "Interactive flow editor" %}
    -
    - {% trans "Loading…" %} - -
    -
    - -
    -
    -
    -
    {% trans "Issues" %}
    -
    - {% trans "Syntax, draft-graph, and editor issues" %} +
    +
    +
    +
    {% trans "Interactive flow editor" %}
    +
    + {% trans "Loading…" %} +
    -
    -
    {% trans "No current issues." %}
    +
    +
    +
    +
    {% trans "Issues" %}
    +
    + {% trans "Syntax, draft-graph, and editor issues" %} +
    +
    + +
    +
    {% trans "No current issues." %}
    +
    +
    + +
    + {% trans "Loading graph…" %} +
    -
    - {% trans "Loading graph…" %} -
    +
    +
    +
    {% trans "Compiled IR" %}
    + {% if definition %} + {{ definition.ir_hash }} + {% endif %} +
    +
    + {% if ir_json %} + 
    {{ ir_json|safe }}
    + {% else %} +
    {% trans "Save to compile and display IR." %}
    + {% endif %} +
    +
    -
    -
    -
    {% trans "Compiled IR" %}
    - {% if definition %} - {{ definition.ir_hash }} - {% endif %} -
    -
    - {% if ir_json %} - 
    {{ ir_json|safe }}
    - {% else %} -
    {% trans "Save to compile and display IR." %}
    - {% endif %} -
    -
    +
    +
    diff --git a/trustpoint/templates/workflows2/definition_list.html b/trustpoint/templates/workflows2/definition_list.html index a10709d20..61f9d9c01 100644 --- a/trustpoint/templates/workflows2/definition_list.html +++ b/trustpoint/templates/workflows2/definition_list.html @@ -1,14 +1,9 @@ {% extends "trustpoint/base.html" %} -{% load i18n static %} +{% load i18n %} {% load internationalization_tags %} -{% block head %} - {{ block.super }} - -{% endblock head %} - {% block content %} -
    +

    {% trans "Workflows" %} diff --git a/trustpoint/templates/workflows2/dev.html b/trustpoint/templates/workflows2/dev.html index 124012587..4fa20fa9b 100644 --- a/trustpoint/templates/workflows2/dev.html +++ b/trustpoint/templates/workflows2/dev.html @@ -1,45 +1,44 @@ {% extends "trustpoint/base.html" %} -{% load static %} - -{% block head %} - {{ block.super }} - -{% endblock head %} +{% load i18n static %} {% block content %} -
    -

    Workflows v2 — YAML → IR (dev)

    - -
    +
    +
    +

    {% trans 'Compile Workflow YAML' %}

    +

    {% trans 'Compile a workflow definition and inspect its intermediate representation.' %}

    +
    +
    + {% csrf_token %}
    - +
    - + {% if error %} -
    - Compile error:
    - 
    {{ error }}
    + {% endif %} {% if ir_json %} -

    IR

    - 
    +    
    {% trans 'Intermediate Representation' %}
    
+    
     {{ ir_json|json_script:"ir_data" }}
     
    
 
     
   {% endif %}
+
    {% endblock %} diff --git a/trustpoint/templates/workflows2/diagram_readonly.html b/trustpoint/templates/workflows2/diagram_readonly.html index 1b8253bc1..a69c6ebf4 100644 --- a/trustpoint/templates/workflows2/diagram_readonly.html +++ b/trustpoint/templates/workflows2/diagram_readonly.html @@ -1,5 +1,5 @@ {% extends "trustpoint/base.html" %} -{% load static %} +{% load i18n static %} {% block head %} {{ block.super }} @@ -7,30 +7,30 @@ {% endblock head %} {% block content %} -
    -
    +
    +
    -

    Workflow Diagram (read-only)

    -
    Definition: {{ definition_id }}
    +

    {% trans 'Workflow Diagram' %}

    +

    {% trans 'Read-only view of workflow definition' %}: {{ definition_id }}

    - - + +
    -
    -
    +
    +
    -
    -
    - -
    - Data source: {{ graph_url }} + +

    + {% trans 'Data source' %}: {{ graph_url }} +

    diff --git a/trustpoint/templates/workflows2/instance_detail.html b/trustpoint/templates/workflows2/instance_detail.html index 931353d99..3abbe9a95 100644 --- a/trustpoint/templates/workflows2/instance_detail.html +++ b/trustpoint/templates/workflows2/instance_detail.html @@ -1,14 +1,9 @@ {% extends 'trustpoint/base.html' %} {% load i18n static internationalization_tags %} -{% block head %} - {{ block.super }} - -{% endblock head %} - {% block content %} -
    -
    +
    +
    @@ -74,7 +69,7 @@

    {% trans "Workflow instance" %}

    {% if pending_approvals and inst.status == "awaiting" %} -
    +
    {% trans "Approval required" %}
    {% blocktrans count count=pending_approvals|length %} @@ -85,7 +80,7 @@

    {% trans "Workflow instance" %}

    {% elif inst.status == "error" %} -
    +
    {% trans "Instance error" %}
    {% trans "Resume continues from the current step; it does not restart from the beginning." %}
    @@ -93,32 +88,32 @@

    {% trans "Workflow instance" %}

    {% trans "Reason" %}: {{ inst.status_reason }}
    {% endif %} {% if inst.status_message %} -
    {{ inst.status_message }}
    +
    {{ inst.status_message }}
    {% elif latest_failed_step_run and latest_failed_step_run.error %} -
    {{ latest_failed_step_run.error }}
    +
    {{ latest_failed_step_run.error }}
    {% elif latest_failed_job and latest_failed_job.last_error %} -
    {{ latest_failed_job.last_error }}
    +
    {{ latest_failed_job.last_error }}
    {% else %} {% trans "The last workflow step errored. Review the execution timeline below for details." %} {% endif %}
    {% elif inst.status == "rejected" %} -
    +
    {% trans "Instance rejected" %}
    {% if inst.status_reason %}
    {% trans "Reason" %}: {{ inst.status_reason }}
    {% endif %} {% if inst.status_message %} -
    {{ inst.status_message }}
    +
    {{ inst.status_message }}
    {% else %} {% trans "This workflow instance reached a rejected terminal state." %} {% endif %}
    {% elif inst.status == "paused" %} -
    +
    {% trans "Instance paused" %}
    {% trans "Resume continues from the current step; it does not restart from the beginning." %}
    @@ -126,28 +121,28 @@

    {% trans "Workflow instance" %}

    {% trans "Reason" %}: {{ inst.status_reason }}
    {% endif %} {% if inst.status_message %} -
    {{ inst.status_message }}
    +
    {{ inst.status_message }}
    {% else %} {% trans "Execution stopped before completion and can be resumed." %} {% endif %}
    {% elif inst.status == "stopped" %} -
    +
    {% trans "Instance stopped" %}
    {% if inst.status_reason %}
    {% trans "Reason" %}: {{ inst.status_reason }}
    {% endif %} {% if inst.status_message %} -
    {{ inst.status_message }}
    +
    {{ inst.status_message }}
    {% else %} {% trans "This workflow instance was stopped intentionally." %} {% endif %}
    {% elif inst.status == "timed_out" %} -
    +
    {% trans "Instance timed out" %}
    {% if inst.status_reason or inst.status_message %}
    @@ -155,13 +150,13 @@

    {% trans "Workflow instance" %}

    {% trans "Reason" %}: {{ inst.status_reason }}
    {% endif %} {% if inst.status_message %} -
    {{ inst.status_message }}
    +
    {{ inst.status_message }}
    {% endif %}
    {% endif %}
    {% elif inst.status == "approved" %} -
    +
    {% trans "Instance approved" %}
    {% if inst.status_reason or inst.status_message %}
    @@ -169,13 +164,13 @@

    {% trans "Workflow instance" %}

    {% trans "Reason" %}: {{ inst.status_reason }}
    {% endif %} {% if inst.status_message %} -
    {{ inst.status_message }}
    +
    {{ inst.status_message }}
    {% endif %}
    {% endif %}
    {% elif inst.status == "finished" %} -
    +
    {% trans "Instance finished" %}
    {% if inst.status_reason or inst.status_message %}
    @@ -183,7 +178,7 @@

    {% trans "Workflow instance" %}

    {% trans "Reason" %}: {{ inst.status_reason }}
    {% endif %} {% if inst.status_message %} -
    {{ inst.status_message }}
    +
    {{ inst.status_message }}
    {% endif %}
    {% endif %} @@ -191,7 +186,7 @@

    {% trans "Workflow instance" %}

    {% endif %} {% if pending_approvals %} -
    +
    {% trans "Action required" %}
    @@ -238,7 +233,7 @@

    {% trans "Workflow instance" %}

    -
    +
    {% trans "Current position" %}
    {% if current_step %} @@ -268,7 +263,7 @@

    {% trans "Workflow instance" %}

    -
    +
    {% trans "Source and event" %}
    @@ -285,7 +280,7 @@

    {% trans "Workflow instance" %}

    -
    +
    {% trans "Current workflow vars" %}
    {% if vars_summary %} @@ -308,7 +303,7 @@

    {% trans "Workflow instance" %}

    {% if resolved_approvals %} -
    +
    {% trans "Approval history" %}
    @@ -342,7 +337,7 @@

    {% trans "Workflow instance" %}

    -
    +
    {% trans "Execution timeline" %}
    {{ step_run_items|length }} {% trans "step run(s)" %}
    @@ -424,7 +419,7 @@

    - 
    {{ r.error }}
    + 
    {{ r.error }}
    @@ -439,7 +434,7 @@

    - 
    {{ item.vars_delta_pretty }}
    + 
    {{ item.vars_delta_pretty }}
    @@ -454,7 +449,7 @@

    - 
    {{ item.output_pretty }}
    + 
    {{ item.output_pretty }}
    @@ -469,7 +464,7 @@

    - 
    {{ item.params_pretty }}
    + 
    {{ item.params_pretty }}
    @@ -495,7 +490,7 @@

    -
    +
    {% trans "Jobs" %}
    {{ jobs|length }}
    @@ -517,7 +512,7 @@

    {% trans "Attempts" %}: {{ j.attempts }}/{{ j.max_attempts }}

    {% if j.last_error %} -
    {{ j.last_error }}
    +
    {{ j.last_error }}
    {% endif %}
    {% endfor %} @@ -528,7 +523,7 @@

    -
    +
    {% trans "Technical details" %}
    @@ -540,7 +535,7 @@

    - 
    {{ vars_pretty }}
    + 
    {{ vars_pretty }}
    @@ -553,7 +548,7 @@

    - 
    {{ event_pretty }}
    + 
    {{ event_pretty }}
    diff --git a/trustpoint/templates/workflows2/run_detail.html b/trustpoint/templates/workflows2/run_detail.html index 6d08e227d..a0af67371 100644 --- a/trustpoint/templates/workflows2/run_detail.html +++ b/trustpoint/templates/workflows2/run_detail.html @@ -1,14 +1,10 @@ {% extends 'trustpoint/base.html' %} {% load i18n static internationalization_tags %} -{% block head %} - {{ block.super }} - -{% endblock head %} {% block content %} -
    -
    +
    +
    @@ -59,7 +55,7 @@

    {% trans "Workflow run" %}

    {% if pending_approval_count %} -
    +
    {% trans "Decision required" %}
    {% blocktrans count count=pending_approval_count %} @@ -70,7 +66,7 @@

    {% trans "Workflow run" %}

    {% elif error_instance_count %} -
    +
    {% trans "Run needs attention" %}
    {% blocktrans count count=error_instance_count %} @@ -81,7 +77,7 @@

    {% trans "Workflow run" %}

    {% elif timed_out_instance_count %} -
    +
    {% trans "Run timed out" %}
    {% blocktrans count count=timed_out_instance_count %} @@ -92,7 +88,7 @@

    {% trans "Workflow run" %}

    {% elif rejected_instance_count %} -
    +
    {% trans "Run finished with rejection" %}
    {% blocktrans count count=rejected_instance_count %} @@ -103,18 +99,18 @@

    {% trans "Workflow run" %}

    {% elif approved_instance_count and approved_instance_count == instance_total %} -
    +
    {% trans "Run approved" %}
    {% trans "All workflow instances in this run approved the request." %}
    {% elif finished_instance_count and finished_instance_count == instance_total %} -
    +
    {% trans "Run finished" %}
    {% trans "All workflow instances in this run reached the end of their workflow branch." %}
    {% endif %} -
    +
    {% trans "Request lock" %}
    {% if run.idempotency_key %} @@ -155,7 +151,7 @@

    {% trans "Workflow run" %}

    -
    +
    {% trans "Instances" %}
    {{ instance_total }}
    @@ -163,7 +159,7 @@

    {% trans "Workflow run" %}

    -
    +
    {% trans "Awaiting" %}
    {{ awaiting_instance_count }}
    @@ -172,7 +168,7 @@

    {% trans "Workflow run" %}

    -
    +
    {% trans "Pending approvals" %}
    {{ pending_approval_count }}
    @@ -180,7 +176,7 @@

    {% trans "Workflow run" %}

    -
    +
    {% trans "Problem results" %}
    {{ error_instance_count|add:timed_out_instance_count|add:rejected_instance_count }}
    @@ -191,7 +187,7 @@

    {% trans "Workflow run" %}

    -
    +
    {% trans "Source context" %}
    {{ source_summary }}
    @@ -201,7 +197,7 @@

    {% trans "Workflow run" %}

    -
    +
    {% trans "Event summary" %}
    {% include 'workflows2/_context_rows.html' with rows=event_context empty_label="This run only contains raw event payload data. Open the technical details below if you need the full JSON." %} @@ -210,7 +206,7 @@

    {% trans "Workflow run" %}

    -
    +
    {% trans "Workflow instances" %}
    {{ instance_total }} {% trans "instance(s)" %}
    @@ -264,7 +260,7 @@

    {% trans "Workflow run" %}

    -
    +
    {% trans "Technical details" %}
    @@ -276,7 +272,7 @@

    - 
    {{ source_pretty }}
    + 
    {{ source_pretty }}
    @@ -289,7 +285,7 @@

    - 
    {{ event_pretty }}
    + 
    {{ event_pretty }}
    diff --git a/trustpoint/workflows2/forms.py b/trustpoint/workflows2/forms.py index 95cc845dc..637879142 100644 --- a/trustpoint/workflows2/forms.py +++ b/trustpoint/workflows2/forms.py @@ -29,5 +29,5 @@ class Workflow2DefinitionForm(forms.Form): 'style': 'white-space: pre; tab-size: 2;', } ), - help_text=_('YAML workflow definition (v2).'), + help_text=_('YAML workflow definition.'), ) From 0b0c90be3deb0e8c8dda1f7238864b9693df4d52 Mon Sep 17 00:00:00 2001 From: florianhandke Date: Fri, 2 Oct 2026 14:13:05 +0200 Subject: [PATCH 2/3] fix failing test --- trustpoint/workflows2/tests/test_views_http.py | 2 -- 1 file changed, 2 deletions(-) diff --git a/trustpoint/workflows2/tests/test_views_http.py b/trustpoint/workflows2/tests/test_views_http.py index 7bd0e1ea3..89de3712a 100644 --- a/trustpoint/workflows2/tests/test_views_http.py +++ b/trustpoint/workflows2/tests/test_views_http.py @@ -202,8 +202,6 @@ def test_definitions_list_uses_workflow_theme_stylesheet(self) -> None: response = self.client.get(reverse("workflows2:definitions_list")) self.assertEqual(response.status_code, 200) - self.assertContains(response, "workflows2_editor.css") - self.assertContains(response, "wf2-list-page") def test_definition_create_uses_yaml_name_and_form_enabled_flag(self) -> None: self.client.force_login(self.user) From 6ec69c0a0b73abe775fb6eca4e4222942ab67881 Mon Sep 17 00:00:00 2001 From: florianhandke Date: Fri, 2 Oct 2026 14:19:27 +0200 Subject: [PATCH 3/3] fix behave test --- trustpoint/features/steps/r_104_steps.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/trustpoint/features/steps/r_104_steps.py b/trustpoint/features/steps/r_104_steps.py index 8e9be5e37..14e16a307 100644 --- a/trustpoint/features/steps/r_104_steps.py +++ b/trustpoint/features/steps/r_104_steps.py @@ -96,7 +96,8 @@ def step_delete_truststore(context: runner.Context, name: str) -> None: # noqa: ) assert context.response.status_code == 200, "Truststore delete form submission failed" - assert b"Confirm Truststore Deletion" in context.response.content + soup = BeautifulSoup(context.response.content, "html.parser") + assert soup.select_one('form#delete-truststores-form[method="post"]') is not None context.response = context.authenticated_client.post(f"/pki/truststores/delete/{context.truststore.id}/", data={}, follow=True) assert context.response.status_code == 200, "Truststore deletion response" assert not TruststoreModel.objects.filter(id=context.truststore.id).exists(), f"Deletion of Truststore with name {name} failed"