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

feat: add UI conformance and launch context

Browse Source
This commit is contained in:
zemion
2026-08-18 21:32:25 +02:00
parent 7685a103e8
commit 8a925782ab
35 changed files with 1125 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/styles/components.css
+75 -83
View File
@@ -20,7 +20,7 @@
width: 18px;
height: 13px;
border: 2px solid var(--loading-line);
border-radius: 3px;
border-radius: var(--radius-tight);
background: var(--loading-envelope-bg);
animation: loading-envelope-float .74s ease-in-out infinite alternate;
}
@@ -65,7 +65,7 @@
gap: 7px;
max-width: 100%;
border: 1px solid var(--control-border);
border-radius: 999px;
border-radius: var(--radius-pill);
background: linear-gradient(var(--control-gradient-start), var(--control-gradient-end));
box-shadow: var(--shadow-control-strong);
padding: 5px 8px 5px 11px;
@@ -98,7 +98,7 @@
width: 18px;
height: 18px;
border: 0;
border-radius: 999px;
border-radius: var(--radius-pill);
background: var(--hover-tint);
color: var(--control-text-muted);
cursor: pointer;
@@ -221,7 +221,7 @@
width: 28px;
height: 28px;
border: 0;
border-radius: 4px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
cursor: pointer;
@@ -264,7 +264,7 @@
color: var(--muted);
font-size: 0.875rem;
}
@media (max-width: 520px) {
@media (max-width: 560px) {
.password-generator-character-sets {
grid-template-columns: 1fr;
}
@@ -326,7 +326,7 @@
width: 18px;
height: 18px;
border: var(--border-line-dark);
border-radius: 4px;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-inset-highlight);
}
@@ -341,7 +341,7 @@
width: 30px;
height: 30px;
border: 0;
border-radius: 4px;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
cursor: pointer;
@@ -372,7 +372,7 @@
min-width: 220px;
padding: 10px;
border: var(--border-line-dark);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--panel);
box-shadow: var(--shadow-menu);
}
@@ -387,7 +387,7 @@
width: 28px;
height: 28px;
border: 1px solid var(--black-border-soft);
border-radius: 6px;
border-radius: var(--radius-compact);
cursor: pointer;
box-shadow: var(--shadow-inset-highlight);
}
@@ -420,7 +420,7 @@
width: 32px;
height: 32px;
border: var(--border-line);
border-radius: 4px;
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
cursor: pointer;
@@ -448,7 +448,7 @@
min-width: 30px;
height: 30px;
border: 1px solid transparent;
border-radius: 5px;
border-radius: var(--radius-xs);
background: transparent;
color: var(--text);
cursor: pointer;
@@ -491,7 +491,7 @@
.admin-overview-link {
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel-soft);
padding: 14px;
text-align: left;
@@ -528,7 +528,7 @@
align-items: center;
gap: 18px;
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel);
box-shadow: var(--shadow);
padding: 14px 16px;
@@ -612,7 +612,7 @@
align-items: center;
gap: 14px;
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel);
box-shadow: var(--shadow);
padding: 14px 16px;
@@ -713,7 +713,7 @@
display: grid;
gap: 10px;
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel-soft);
padding: 12px 14px;
}
@@ -752,7 +752,7 @@
.module-install-preflight-issue {
min-height: 30px;
padding: 6px 8px;
border-radius: 4px;
border-radius: var(--radius-sm);
background: var(--panel-glass);
}
@@ -783,7 +783,7 @@
align-content: start;
min-height: 86px;
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel-glass);
padding: 9px 10px;
}
@@ -795,7 +795,7 @@
.module-install-checklist-item span {
justify-self: start;
border-radius: 999px;
border-radius: var(--radius-pill);
background: var(--panel);
color: var(--muted);
font-size: 11px;
@@ -840,7 +840,7 @@
gap: 12px;
align-items: end;
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel);
box-shadow: var(--shadow);
padding: 14px 16px;
@@ -915,7 +915,7 @@
align-items: center;
gap: 14px;
border: var(--border-line);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel);
box-shadow: var(--shadow);
padding: 14px 16px;
@@ -1063,7 +1063,7 @@
align-items: start;
gap: 9px;
padding: 8px 9px;
border-radius: 7px;
border-radius: var(--radius-md);
cursor: pointer;
}
@@ -1180,7 +1180,7 @@
min-width: 0;
padding: 15px;
border: var(--border-line);
border-radius: 7px;
border-radius: var(--radius-md);
background: var(--panel);
}
@@ -1205,7 +1205,7 @@
.advanced-options-panel {
border: var(--border-line);
border-radius: 7px;
border-radius: var(--radius-md);
background: var(--panel);
}
@@ -1255,7 +1255,7 @@
gap: 10px;
padding: 12px 13px;
border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line));
border-radius: 7px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--amber) 12%, var(--panel));
}
@@ -1330,7 +1330,7 @@
.guided-review-list.is-empty {
padding: 12px;
border: 1px dashed var(--line);
border-radius: 7px;
border-radius: var(--radius-md);
color: var(--muted);
}
@@ -1344,7 +1344,7 @@
border: var(--border-line);
border-left-width: 4px;
border-left-color: var(--line-dark);
border-radius: 7px;
border-radius: var(--radius-md);
background: var(--panel);
}
@@ -1390,7 +1390,7 @@
line-height: 1.4;
}
@media (max-width: 840px) {
@media (max-width: 900px) {
.guided-config-shell {
grid-template-columns: 1fr;
}
@@ -1421,7 +1421,7 @@
gap: 7px;
min-height: 44px;
border: var(--border-line);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-control-surface);
padding: 7px 8px;
@@ -1473,7 +1473,7 @@
width: 28px;
height: 28px;
border: 1px solid var(--control-border);
border-radius: 999px;
border-radius: var(--radius-pill);
background: linear-gradient(var(--control-gradient-start), var(--control-gradient-end-muted));
color: var(--control-text);
cursor: pointer;
@@ -1495,7 +1495,7 @@
display: grid;
gap: 10px;
border: var(--border-line-dark);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-popover);
padding: 14px;
@@ -1520,7 +1520,7 @@
gap: 4px;
max-width: 560px;
border: var(--border-line);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: 0 8px 24px var(--hover-tint);
padding: 6px;
@@ -1531,7 +1531,7 @@
justify-content: space-between;
gap: 12px;
border: 0;
border-radius: 6px;
border-radius: var(--radius-compact);
background: transparent;
color: var(--text-strong);
cursor: pointer;
@@ -1744,7 +1744,7 @@
max-height: 360px;
overflow: auto;
border: var(--border-line-dark);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-popover);
padding: 5px;
@@ -1773,7 +1773,7 @@
gap: 16px;
width: 100%;
border: 0;
border-radius: 6px;
border-radius: var(--radius-compact);
background: transparent;
color: var(--text);
cursor: pointer;
@@ -1831,7 +1831,7 @@
gap: 12px;
width: 100%;
border: var(--border-line);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--surface-subtle);
padding: 12px;
}
@@ -1896,7 +1896,7 @@
width: 42px;
height: 24px;
border: 1px solid var(--toggle-track-border);
border-radius: 999px;
border-radius: var(--radius-pill);
background: var(--toggle-track-bg);
box-shadow: var(--shadow-control-inset-strong);
transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
@@ -1907,7 +1907,7 @@
left: 2px;
width: 18px;
height: 18px;
border-radius: 999px;
border-radius: var(--radius-pill);
background: var(--surface);
box-shadow: var(--shadow-thumb);
transition: transform .16s ease;
@@ -1988,7 +1988,7 @@
justify-content: center;
width: 16px;
height: 16px;
border-radius: 999px;
border-radius: var(--radius-pill);
color: var(--text-subtle);
background: var(--line-dark);
font-size: 11px;
@@ -2005,7 +2005,7 @@
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 3px;
border-radius: var(--radius-tight);
color: var(--text-subtle);
text-decoration: none;
}
@@ -2119,7 +2119,7 @@
max-width: min(320px, calc(100vw - 48px));
transform: translate(-50%, 3px);
border: var(--border-line-dark);
border-radius: 7px;
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-popover);
color: var(--text);
@@ -2220,7 +2220,7 @@
width: min(280px, 72vw);
padding: 9px 11px;
border: 1px solid var(--border-danger-soft);
border-radius: var(--radius-sm, 8px);
border-radius: var(--radius-md);
color: var(--danger-text-tooltip);
background: var(--danger-muted-bg);
box-shadow: var(--shadow-popover);
@@ -2253,7 +2253,7 @@
place-items: center;
min-height: 120px;
padding: 1.25rem;
border-radius: var(--radius-lg, 18px);
border-radius: var(--radius-lg);
background: var(--transparent-surface);
backdrop-filter: blur(1.5px);
margin: -10px;
@@ -2265,7 +2265,7 @@
gap: 0.65rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border-soft);
border-radius: 999px;
border-radius: var(--radius-pill);
color: var(--text);
background: var(--panel-glass-strong);
box-shadow: var(--shadow-soft);
@@ -2284,7 +2284,7 @@
.module-load-error .alert {
width: min(640px, 100%);
max-width: 640px;
max-width: 680px;
margin: 0;
}
@@ -2314,7 +2314,7 @@
width: 30px;
height: 30px;
border: 1px solid var(--control-border);
border-radius: 999px;
border-radius: var(--radius-pill);
background: linear-gradient(var(--control-gradient-start), var(--control-gradient-end-muted));
color: var(--control-text);
cursor: pointer;
@@ -2408,7 +2408,7 @@
width: 100%;
margin: 0;
border: 1px solid var(--border-soft);
border-radius: 12px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-floating);
pointer-events: auto;
}
@@ -2421,7 +2421,7 @@
cursor: pointer;
line-height: 1;
padding: 2px;
border-radius: 999px;
border-radius: var(--radius-pill);
flex: 0 0 auto;
}
@@ -2500,7 +2500,7 @@
cursor: pointer;
font-weight: 800;
padding: 4px 6px;
border-radius: 7px;
border-radius: var(--radius-md);
}
.file-breadcrumb:hover:not(:disabled),
@@ -2651,7 +2651,7 @@
grid-template-columns: 26px minmax(0, 1fr);
align-items: center;
gap: 2px;
border-radius: 9px;
border-radius: var(--radius-md);
}
.explorer-tree-node-wrap.has-actions {
@@ -2671,7 +2671,7 @@
place-items: center;
width: 26px;
height: 32px;
border-radius: 9px;
border-radius: var(--radius-md);
color: var(--muted);
}
@@ -2692,7 +2692,7 @@
min-width: 0;
width: 100%;
padding: 8px 9px;
border-radius: 9px;
border-radius: var(--radius-md);
font: inherit;
text-align: left;
user-select: none;
@@ -2844,7 +2844,7 @@
.file-tree-select {
width: 24px;
height: 24px;
border-radius: 999px;
border-radius: var(--radius-pill);
color: var(--text-strong);
font-weight: 900;
line-height: 1;
@@ -2890,7 +2890,7 @@
max-width: 100%;
overflow: hidden;
border: var(--border-line-dark);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--line-dark);
box-shadow: var(--shadow-control);
}
@@ -2931,11 +2931,11 @@
}
.segmented-control-option:first-child {
border-radius: 7px 0 0 7px;
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.segmented-control-option:last-child {
border-radius: 0 7px 7px 0;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.segmented-control-option:hover,
@@ -3052,7 +3052,7 @@
min-width: 21px;
height: 21px;
padding: 0 6px;
border-radius: 999px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 800;
line-height: 1;
@@ -3060,7 +3060,7 @@
}
.count-badge-compact { min-width: 18px; height: 18px; padding-inline: 5px; font-size: 10px; }
.count-badge-accent { background: var(--accent); color: var(--on-accent); }
.count-badge-accent { background: var(--accent); color: var(--badge-accent-text); }
.count-badge-neutral { border: var(--border-line); background: var(--surface-subtle); color: var(--text); }
.count-badge-danger { background: var(--red); color: var(--on-accent); }
@@ -3094,7 +3094,7 @@
.definition-graph-canvas .react-flow__edge.selected .react-flow__edge-path,
.definition-graph-canvas .react-flow__edge:hover .react-flow__edge-path { stroke: var(--accent); stroke-width: 3; }
.definition-graph-canvas-empty { position: absolute; inset: 0; pointer-events: none; }
.definition-node-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: 5px; background: var(--panel-soft); color: var(--text-strong); }
.definition-node-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border-radius: var(--radius-xs); background: var(--panel-soft); color: var(--text-strong); }
.definition-node-handle { width: 13px; height: 13px; border: 3px solid var(--panel); background: var(--line-dark); }
.definition-node-handle:hover,
.definition-node-handle.connectingto,
@@ -3202,7 +3202,7 @@
.theme-preview-header i {
width: 18px;
height: 18px;
border-radius: 50%;
border-radius: var(--radius-round);
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
@@ -3223,7 +3223,7 @@
.theme-preview-body span {
display: block;
height: 8px;
border-radius: 4px;
border-radius: var(--radius-sm);
background: var(--preview-line);
}
@@ -3517,7 +3517,7 @@
}
.mail-server-toggle-row {
border: var(--border-line);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--panel-soft);
}
.mail-server-plain-toggle-row {
@@ -3547,40 +3547,32 @@
align-items: center;
min-height: 24px;
border: var(--border-line);
border-radius: 99px;
border-radius: var(--radius-pill);
background: var(--panel-soft);
padding: 3px 9px;
color: var(--text-strong);
font-size: 12px;
font-weight: 700;
}
@media (max-width: 1000px) {
@media (max-width: 1100px) {
.mail-server-settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.mail-server-segmented-control { width: min(320px, 100%); }
}
@media (max-width: 720px) {
@media (max-width: 760px) {
.credential-panel-grid { grid-template-columns: 1fr; }
.mail-server-section-heading.split { align-items: flex-start; flex-direction: column; }
.mail-server-segmented-control { width: 100%; }
}
.unsaved-changes-dialog {
max-width: 520px;
}
.unsaved-changes-actions {
justify-content: flex-end;
}
.file-drop-zone {
display: grid;
place-items: center;
gap: 8px;
min-height: 170px;
border: 1px dashed var(--line-dark);
border-radius: 8px;
border-radius: var(--radius-md);
background: var(--panel-soft);
color: var(--muted);
text-align: center;
@@ -3614,7 +3606,7 @@
place-items: center;
width: 58px;
height: 58px;
border-radius: 50%;
border-radius: var(--radius-round);
background: conic-gradient(var(--primary) var(--file-drop-progress), var(--primary-soft-strong) 0);
color: var(--text-strong);
font-size: 12px;
@@ -3625,7 +3617,7 @@
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border-radius: var(--radius-round);
background: var(--panel-soft);
box-shadow: var(--primary-inset-ring);
}
@@ -3650,7 +3642,7 @@
.placeholder-stack span {
display: block;
border: 1px dashed var(--line-dark);
border-radius: 6px;
border-radius: var(--radius-compact);
background: var(--panel-soft);
padding: 10px 12px;
color: var(--muted);
@@ -3661,7 +3653,7 @@
gap: 12px;
}
.settings-target-row {
max-width: 520px;
max-width: 560px;
}
.admin-secret {
display: block;
@@ -3901,12 +3893,12 @@ a.dashboard-contribution-row:hover {
.description-list-inline.description-list-collapse-wide > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
@media (max-width: 1100px) {
.description-list-collapse-standard { grid-template-columns: 1fr; }
.description-list-inline.description-list-collapse-standard > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
@media (max-width: 760px) {
.description-list-collapse-narrow { grid-template-columns: 1fr; }
.description-list-inline.description-list-collapse-narrow > div { grid-template-columns: minmax(0, 1fr); }
}
@@ -3962,7 +3954,7 @@ button.stage-rail-item:focus-visible {
height: 38px;
place-items: center;
border: 1px solid var(--stage-rail-color);
border-radius: 50%;
border-radius: var(--radius-round);
background: color-mix(in srgb, var(--stage-rail-color) 8%, var(--surface));
color: color-mix(in srgb, var(--stage-rail-color) 82%, var(--text));
transition: background .16s ease, box-shadow .16s ease;
@@ -4015,7 +4007,7 @@ button.stage-rail-item:focus-visible {
min-width: 0;
overflow: hidden;
border: var(--border-line);
border-radius: 5px;
border-radius: var(--radius-xs);
background: var(--surface);
box-shadow: var(--shadow-control-inset);
transition: border-color .16s ease, box-shadow .16s ease;
@@ -4160,7 +4152,7 @@ button.stage-rail-item:focus-visible {
.wysiwyg-prosemirror pre {
overflow: auto;
padding: 10px 12px;
border-radius: 4px;
border-radius: var(--radius-sm);
background: var(--code-bg);
color: var(--code-text);
}
@@ -4189,7 +4181,7 @@ button.stage-rail-item:focus-visible {
margin: 0 2px;
padding: 1px 6px;
border: 1px solid var(--primary-border);
border-radius: 4px;
border-radius: var(--radius-sm);
background: var(--primary-soft);
color: var(--info-text-deep);
font-family: var(--font-mono, monospace);