refactor(webui): use central campaign components

This commit is contained in:
2026-07-21 12:04:30 +02:00
parent ce92499333
commit b7653b58f4
9 changed files with 192 additions and 432 deletions

View File

@@ -1,6 +1,4 @@
/* Campaign workspace data interfaces. Kept separate from layout.css so local sticky/table tweaks stay untouched. */
.alert.success { background: var(--success-bg); color: var(--success-text); margin-bottom: 12px; }
.alert.info { background: var(--info-bg); color: var(--info-text); margin-bottom: 12px; }
.small-note { font-size: 12px; }
.wizard-action-grid {
@@ -80,7 +78,6 @@
.standalone-wizard-body { min-height: auto; }
/* Editable campaign data surfaces. */
.responsive-form-grid { align-items: start; }
.json-edit-block {
display: grid;
gap: 8px;
@@ -129,7 +126,6 @@
@media (max-width: 1100px) {
.template-editor-grid { grid-template-columns: 1fr; }
.form-grid.compact.responsive-form-grid { grid-template-columns: 1fr; }
}
/* Campaign data layout refinement. */
@@ -322,22 +318,6 @@
.campaigns-page .card-body {
padding: 0;
}
.campaign-table-wrap {
margin: 0;
}
.campaign-table thead,
.campaign-table thead th {
top: 64px;
}
.campaign-table th:first-child,
.campaign-table td:first-child {
padding-left: 24px;
}
.campaign-table th:last-child,
.campaign-table td:last-child {
padding-right: 24px;
}
.module-workspace .section-sidebar {
padding-top: 18px;
}
@@ -580,7 +560,7 @@
box-shadow: var(--shadow-campaign-small);
}
.field-chip-button.used {
background: var(--green-soft);
background: var(--success-soft);
border-color: var(--success-border-soft);
color: var(--success-text-strong);
}
@@ -745,14 +725,6 @@
color: var(--muted);
font-style: italic;
}
.recipient-address-inline-button {
width: 28px;
height: 28px;
}
.recipient-address-inline-button svg {
width: 16px;
height: 16px;
}
.recipient-add-row td {
background: var(--panel-soft);
}
@@ -771,15 +743,6 @@
}
/* Recipient editor compaction and reusable attachment rule overlay. */
.recipient-editor-table th:nth-child(1),
.recipient-editor-table td:nth-child(1) { width: 42px; }
.recipient-editor-table th:nth-child(2),
.recipient-editor-table td:nth-child(2) { min-width: 500px; }
.recipient-editor-table th:nth-child(3),
.recipient-editor-table td:nth-child(3) { min-width: 192px; }
.recipient-editor-table th:last-child,
.recipient-editor-table td:last-child { width: 123px; }
.recipient-editor-table td { vertical-align: top; }
.recipient-cell { white-space: normal !important; }
.recipient-address-stack {
display: grid;
@@ -861,8 +824,6 @@
.attachment-sources-table td:last-child { width: 123px; }
@media (max-width: 900px) {
.recipient-editor-table th:nth-child(2),
.recipient-editor-table td:nth-child(2) { min-width: 300px; }
.recipient-address-stack { min-width: 260px; }
}
.attachment-rules-table th:nth-child(1),
@@ -894,7 +855,7 @@
.attachment-rules-main {
min-width: 0;
}
.attachment-rules-table tr.is-choosing-file td {
.attachment-rules-table .data-grid-body-cell.is-choosing-file {
background: var(--panel-soft);
}
.attachment-file-browser-panel {
@@ -940,7 +901,7 @@
.field-with-action input.chooser-display-input {
background: var(--panel-soft);
border-color: var(--line-dark);
color: var(--ink);
color: var(--text-strong);
cursor: pointer;
caret-color: transparent;
user-select: none;
@@ -1130,7 +1091,7 @@
align-items: center;
gap: 8px;
max-width: 260px;
color: var(--ink);
color: var(--text-strong);
text-decoration: none;
}
.recipient-data-identity:hover .recipient-data-address {
@@ -1279,7 +1240,7 @@
overflow: auto;
}
.version-history-table .current-version-row td {
.version-history-table .data-grid-body-cell.current-version-row {
font-weight: 700;
}
@@ -1297,7 +1258,7 @@
border: 1px solid var(--line-subtle);
border-radius: 12px;
background: var(--panel-glass);
color: var(--text-primary);
color: var(--text);
padding: 12px;
white-space: pre-wrap;
}
@@ -1379,7 +1340,7 @@
border-radius: 12px;
background: var(--panel-glass);
padding: 0.55rem 0.7rem;
color: var(--text-primary);
color: var(--text);
}
.attachment-file-chip strong {
@@ -1401,7 +1362,7 @@
.message-preview-raw summary {
cursor: pointer;
font-weight: 700;
color: var(--text-primary);
color: var(--text);
}
@media (max-width: 720px), (max-height: 700px) {
@@ -1446,25 +1407,6 @@
color: var(--warning);
}
/* Managed attachment chooser refinements. */
.split-field-action {
gap: 0;
}
.split-field-action > input,
.split-field-action > select,
.split-field-action > textarea {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.split-field-action > button,
.split-field-action > .button,
.split-field-action > .btn {
align-self: stretch;
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: none;
}
/* Review & Send workflow page. */
.review-send-page {
--review-flow-partial: var(--review-flow-purple, #9b86c7);
@@ -2654,54 +2596,20 @@
min-height: 78px;
padding: 16px;
}
.recipient-import-preview-surface {
overflow: auto;
}
.recipient-import-preview-table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
}
.recipient-import-preview-table th,
.recipient-import-preview-table td {
border-bottom: var(--border-line);
padding: 9px 10px;
text-align: left;
vertical-align: top;
}
.recipient-import-preview-table th {
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.recipient-import-preview-table td {
color: var(--text);
font-size: 13px;
word-break: break-word;
}
.recipient-import-preview-table tr.is-invalid td {
.recipient-import-preview-grid .data-grid-body-cell.is-invalid {
color: var(--danger-text);
}
.recipient-import-raw-table td {
.recipient-import-raw-grid .data-grid-body-cell {
white-space: pre;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 12px;
}
.recipient-import-raw-table tr.is-header-row td {
.recipient-import-raw-grid .data-grid-body-cell.is-header-row {
background: color-mix(in srgb, var(--accent) 8%, transparent);
font-weight: 700;
}
.recipient-import-mapping-table select,
.recipient-import-mapping-table input {
width: 100%;
min-width: 160px;
}
.recipient-import-mapping-table td:nth-child(2) {
max-width: 260px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recipient-import-file-step {
display: grid;
gap: 14px;
@@ -2793,17 +2701,6 @@
margin: 4px 0 0;
overflow-wrap: anywhere;
}
.admin-managed-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 7px;
border-radius: 999px;
background: var(--info-muted-bg);
color: var(--info-text-muted);
font-size: 11px;
font-weight: 800;
}
.admin-governance-mode {
display: grid;
gap: 8px;