GovOPlaN/govoplan-campaign
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: align campaign with shared UI foundations

Browse Source
This commit is contained in:
zemion
2026-08-18 21:32:34 +02:00
parent 06f773e4eb
commit 7bc5e4a35c
2 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/styles/campaign-workspace.css
+39 -39
View File
@@ -8,7 +8,7 @@
.wizard-action-card {
min-height: 176px;
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel-soft);
padding: 16px;
display: flex;
@@ -47,7 +47,7 @@
color: var(--text);
background: var(--panel-soft);
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
padding: 14px;
font: inherit;
line-height: 1.5;
@@ -62,7 +62,7 @@
align-items: center;
min-height: 28px;
border: var(--border-line);
border-radius: 999px;
border-radius: var(--radius-pill);
background: var(--panel-soft);
padding: 4px 10px;
color: var(--text-strong);
@@ -70,7 +70,7 @@
font-weight: 700;
}
@media (max-width: 1000px) {
@media (max-width: 1100px) {
.wizard-action-grid { grid-template-columns: 1fr; }
}
.locked-wizard-card { grid-template-columns: 1fr; }
@@ -143,7 +143,7 @@
}
.toggle-span-full {
border: var(--border-line);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--panel-soft);
padding: 10px 12px;
}
@@ -204,7 +204,7 @@
min-height: 88px;
padding: 14px;
border: var(--border-line);
border-radius: 12px;
border-radius: var(--radius-lg);
background: var(--panel-soft);
color: inherit;
text-decoration: none;
@@ -233,7 +233,7 @@
gap: 10px;
padding: 14px;
border: var(--border-line);
border-radius: 12px;
border-radius: var(--radius-lg);
background: var(--panel-soft);
}
.template-preview-box h3 {
@@ -254,7 +254,7 @@
.override-toggle-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 780px) {
@media (max-width: 760px) {
.related-link-grid,
.override-toggle-grid { grid-template-columns: 1fr; }
}
@@ -394,7 +394,7 @@
line-height: 1.55;
}
@media (max-width: 980px) {
@media (max-width: 1100px) {
.module-entry-table {
min-width: 880px;
}
@@ -411,7 +411,7 @@
.overview-config-card {
min-height: 218px;
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
background: linear-gradient(var(--control-gradient-start), var(--panel-soft));
box-shadow: var(--shadow-campaign-soft);
padding: 16px;
@@ -536,7 +536,7 @@
width: 100%;
min-height: 360px;
border: var(--border-line);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--surface);
}
.template-action-dialog {
@@ -573,7 +573,7 @@
white-space: nowrap;
}
@media (max-width: 720px) {
@media (max-width: 760px) {
.template-preview-toolbar {
display: grid;
}
@@ -670,7 +670,7 @@
background: var(--panel-soft);
}
.recipient-add-row .email-address-input {
max-width: 720px;
max-width: 760px;
}
@media (max-width: 1100px) {
@@ -679,7 +679,7 @@
.attachment-base-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
@media (max-width: 900px) {
.campaign-identity-grid { grid-template-columns: 1fr; }
}
@@ -701,7 +701,7 @@
justify-content: center;
min-height: 24px;
border: var(--border-line);
border-radius: 999px;
border-radius: var(--radius-pill);
background: var(--panel-soft);
color: var(--muted);
font-size: 11px;
@@ -746,7 +746,7 @@
}
.attachment-rules-empty {
border: 1px dashed var(--line-dark);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--panel-soft);
padding: 14px;
}
@@ -800,7 +800,7 @@
display: grid;
gap: 12px;
border: var(--border-line);
border-radius: 12px;
border-radius: var(--radius-lg);
background: var(--panel-soft);
padding: 14px;
min-width: 0;
@@ -1114,7 +1114,7 @@
justify-content: center;
min-height: 24px;
border: var(--border-line);
border-radius: 999px;
border-radius: var(--radius-pill);
background: var(--panel-soft);
color: var(--muted);
font-size: 11px;
@@ -1138,7 +1138,7 @@
.recipient-data-table td:nth-child(3) { min-width: 192px; }
.recipient-index-cell { white-space: nowrap; }
@media (max-width: 720px) {
@media (max-width: 760px) {
.recipient-address-empty-row,
.recipient-address-edit-line {
grid-template-columns: 1fr;
@@ -1201,7 +1201,7 @@
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 999px;
border-radius: var(--radius-pill);
color: var(--text);
text-decoration: none;
line-height: 1;
@@ -1275,7 +1275,7 @@
max-height: 260px;
overflow: auto;
border: 1px solid var(--line-subtle);
border-radius: 12px;
border-radius: var(--radius-lg);
background: var(--panel-glass);
color: var(--text);
padding: 12px;
@@ -1398,7 +1398,7 @@
min-width: min(220px, 100%);
max-width: 100%;
border: 1px solid var(--line-subtle);
border-radius: 12px;
border-radius: var(--radius-lg);
background: var(--panel-glass);
padding: 0.55rem 0.7rem;
color: var(--text);
@@ -1429,7 +1429,7 @@
color: var(--text);
}
@media (max-width: 720px), (max-height: 700px) {
@media (max-width: 760px), (max-height: 700px) {
.message-preview-backdrop {
padding: 8px;
}
@@ -1473,7 +1473,7 @@
/* Review & Send workflow page. */
.review-send-page {
--review-flow-partial: var(--review-flow-purple, #9b86c7);
--review-flow-partial: var(--data-category-purple);
}
.review-flow-navigation {
@@ -1522,7 +1522,7 @@
place-items: center;
flex: 0 0 auto;
border: 1px solid var(--review-stage-color);
border-radius: 50%;
border-radius: var(--radius-round);
color: color-mix(in srgb, var(--review-stage-color) 82%, var(--text));
background: color-mix(in srgb, var(--review-stage-color) 9%, var(--surface));
box-shadow: 0 0 0 4px var(--bg), 0 4px 12px var(--campaign-stage-shadow-color);
@@ -1537,7 +1537,7 @@
flex: 1 1 auto;
min-height: 54px;
margin: 4px 0 -14px;
border-radius: 999px;
border-radius: var(--radius-pill);
background: linear-gradient(
to bottom,
var(--review-stage-line-color, var(--review-stage-color)),
@@ -1768,7 +1768,7 @@
width: min(430px, calc(100% - 44px));
height: 110px;
border: 1px solid var(--campaign-panel-border);
border-radius: 10px;
border-radius: var(--radius-lg);
content: "";
transform: translate(-50%, -50%);
background: var(--campaign-panel-bg);
@@ -1797,7 +1797,7 @@
display: grid;
place-items: center;
border: var(--border-line-dark);
border-radius: 50%;
border-radius: var(--radius-round);
color: var(--muted);
background: var(--surface);
}
@@ -1873,7 +1873,7 @@
padding: 12px 14px;
border: var(--border-line);
border-left: 3px solid var(--blue);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel-soft);
}
@@ -2033,7 +2033,7 @@
justify-content: space-between;
gap: 10px;
border: 1px solid transparent;
border-radius: 5px;
border-radius: var(--radius-xs);
background: transparent;
padding: 6px 8px;
color: var(--text);
@@ -2143,7 +2143,7 @@
display: grid;
gap: 0.65rem;
border: 2px solid var(--line-strong, var(--line-subtle));
border-radius: 14px;
border-radius: var(--radius-xl);
padding: 0.75rem;
background: var(--panel-glass);
}
@@ -2222,7 +2222,7 @@
overflow: auto;
padding: 12px;
border: var(--border-line);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--surface-muted);
white-space: pre-wrap;
word-break: break-word;
@@ -2284,7 +2284,7 @@
.attempt-history-wrap {
overflow: auto;
border: var(--border-line);
border-radius: 8px;
border-radius: var(--radius-md);
}
.attempt-history-table {
@@ -2380,7 +2380,7 @@
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
border-radius: 50%;
border-radius: var(--radius-round);
color: color-mix(in srgb, var(--accent) 82%, var(--text));
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
font-weight: 700;
@@ -2717,7 +2717,7 @@
.campaign-copy-option small { margin-top: 3px; color: var(--muted); line-height: 1.35; }
.campaign-copy-option.is-disabled { opacity: .62; }
@media (max-width: 720px) {
@media (max-width: 760px) {
.campaign-copy-identity { grid-template-columns: 1fr; }
.campaign-copy-option { grid-template-columns: 1fr; }
}
@@ -2738,7 +2738,7 @@
.campaign-content-save-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.campaign-content-save-form > p { margin: 0; }
@media (max-width: 720px) {
@media (max-width: 760px) {
.campaign-content-library-item, .campaign-content-save-identity { grid-template-columns: 1fr; }
.campaign-content-library-item-actions { justify-content: flex-start; }
}
@@ -2747,14 +2747,14 @@
.campaign-schedule-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 12px; }
.campaign-schedule-interval { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px; }
.campaign-schedule-list { display: grid; gap: 4px; }
.campaign-schedule-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 12px; padding: 8px; border-radius: 4px; }
.campaign-schedule-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 12px; padding: 8px; border-radius: var(--radius-sm); }
.campaign-schedule-row:hover { background: var(--hover-bg); }
.campaign-schedule-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.campaign-schedule-main strong { flex-basis: 100%; }
.campaign-schedule-main span { color: var(--muted); font-size: var(--font-size-sm); }
.campaign-schedule-main .danger-text { color: var(--danger); }
@media (max-width: 720px) {
@media (max-width: 760px) {
.campaign-schedule-form { grid-template-columns: minmax(0, 1fr); }
.campaign-schedule-row { align-items: flex-start; flex-direction: column; }
}
@@ -2765,7 +2765,7 @@
.campaign-residual-file-form select,
.campaign-residual-file-form textarea { width: 100%; }
@media (max-width: 720px) {
@media (max-width: 760px) {
.campaign-residual-file-form { grid-template-columns: minmax(0, 1fr); }
.campaign-residual-file-wide { grid-column: auto; }
}