projekte/edgeguard-native
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Design-Harmonisierung mit mail-gateway — v1.2.62

Browse Source 
- Header: blur 12px, box-shadow, padding 0 24px, bg rgba(0.97)
- Content-Area: padding 24px (war 12px/16px); @992px 16px (war 8px)
- Sidebar: active-color via CSS-Variable statt hardcodiertem #60a5fa
- Sidebar: item font-size 14px, padding 8px 10px (wie mail-gateway)
- Tabs: ink-bar height 3px (war 2px)
- stats-window-label: Pill-Style statt Block+kursiv
- page-toolbar: align flex-start, margin-bottom 20px, gap 16px
- ant-alert: left-accent 3px pro Typ (info/success/warning/error)
- Neu: ant-statistic, stat-card-*, ant-descriptions-*, ant-form-item rhythm

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Debian
2026-06-01 21:06:33 +02:00
parent 1740cb7ae2
commit 112a945b5c
2 changed files with 105 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
VERSION
View File

@@ -1 +1 @@
1.2.61
1.2.62

129
management-ui/src/styles/enterprise.css
View File

@@ -140,9 +140,9 @@ h1, h2, h3, h4, h5, h6 {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
font-size: 13px;
color: rgba(255,255,255,0.6);
padding: 8px 10px;
font-size: 14px;
color: var(--nmg-sidebar-text, #94A3B8);
text-decoration: none;
border-radius: 6px;
transition: all 0.15s ease;
@@ -154,8 +154,8 @@ h1, h2, h3, h4, h5, h6 {
.sidebar-menu-item a:hover,
.sidebar-menu-item button:hover {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.88);
background: rgba(255,255,255,0.05);
color: #CBD5E1;
}
/* Child-Item: sub-nav unter einem Parent (z.B. /firewall/live unter
@@ -196,9 +196,8 @@ h1, h2, h3, h4, h5, h6 {
.sidebar-menu-item.active a,
.sidebar-menu-item.active button {
background: color-mix(in srgb, var(--branding-accent, #1677ff) 12%, transparent);
color: #60a5fa;
font-weight: 500;
background: color-mix(in srgb, var(--branding-accent, #1677ff) 10%, transparent);
color: var(--branding-accent, #1677ff);
}
.sidebar-version {
@@ -272,17 +271,17 @@ h1, h2, h3, h4, h5, h6 {
/* === HEADER === */
.header {
height: 56px;
background: #ffffff;
background: rgba(255,255,255,0.97);
border-bottom: 1px solid #E5E7EB;
box-shadow: 0 1px 0 #E2E8F0, 0 2px 8px rgba(15,23,42,0.04);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
padding: 0 24px;
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(8px);
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px);
}
.header-title {
@@ -299,7 +298,7 @@ h1, h2, h3, h4, h5, h6 {
/* === CONTENT AREA === */
.content-area {
padding: 12px 16px;
padding: 24px;
flex: 1;
overflow-x: hidden;
min-width: 0;
@@ -663,6 +662,68 @@ h1, h2, h3, h4, h5, h6 {
padding: 16px 20px !important;
}
/* ── Small cards — tighter body padding for stat rows ───────────────────────── */
.ant-card.ant-card-small > .ant-card-body {
padding: 12px 16px !important;
}
/* ── Statistic component — enterprise KPI treatment ──────────────────────────── */
.ant-statistic-title {
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
color: #94A3B8 !important;
margin-bottom: 6px !important;
}
.ant-statistic-content {
line-height: 1.1 !important;
}
.ant-statistic-content-value {
font-weight: 700 !important;
letter-spacing: -0.02em !important;
font-variant-numeric: tabular-nums !important;
}
.ant-statistic-content-suffix {
font-size: 13px !important;
font-weight: 400 !important;
color: #94A3B8 !important;
letter-spacing: 0 !important;
}
/* ── Semantic stat cards — danger / warning / success / info top-border ──────── */
.stat-card-danger { border-top: 2px solid #ff4d4f !important; background: rgba(255, 77, 79, 0.02) !important; }
.stat-card-warning { border-top: 2px solid #faad14 !important; background: rgba(250,173, 20, 0.02) !important; }
.stat-card-success { border-top: 2px solid #52c41a !important; background: rgba( 82,196, 26, 0.02) !important; }
.stat-card-info { border-top: 2px solid #1677ff !important; background: rgba( 22,119,255, 0.02) !important; }
.stat-card-danger:hover { border-color: #ff4d4f !important; }
.stat-card-warning:hover { border-color: #faad14 !important; }
.stat-card-success:hover { border-color: #52c41a !important; }
.stat-card-info:hover { border-color: #1677ff !important; }
/* ── Descriptions (Settings, Cluster, etc.) ─────────────────────────────────── */
.ant-descriptions-item-label {
font-size: 12px !important;
font-weight: 500 !important;
color: #64748B !important;
background: transparent !important;
}
.ant-descriptions-item-content {
font-size: 13px !important;
color: #1E293B !important;
}
.ant-descriptions-bordered .ant-descriptions-item-label {
background: #F8FAFC !important;
}
/* ── Form items — slightly tighter vertical rhythm ───────────────────────────── */
.ant-form-item {
margin-bottom: 20px !important;
}
.ant-form-item-with-help {
margin-bottom: 20px !important;
}
/* ── Form Inputs — shadcn style ──────────────────────────────────────────────── */
.ant-input,
.ant-input-affix-wrapper,
@@ -729,7 +790,7 @@ h1, h2, h3, h4, h5, h6 {
.ant-tabs .ant-tabs-ink-bar {
background: var(--branding-primary, #1677ff) !important;
height: 2px !important;
height: 3px !important;
border-radius: 2px !important;
}
@@ -833,10 +894,17 @@ h1, h2, h3, h4, h5, h6 {
height: 8px !important;
}
/* ── Alert ───────────────────────────────────────────────────────────────────── */
/* ── Alert — enterprise left-accent pattern ──────────────────────────────────── */
.ant-alert {
border-radius: 10px !important;
border-radius: 8px !important;
border-left-width: 3px !important;
}
.ant-alert-info { border-left-color: #1677ff !important; }
.ant-alert-success { border-left-color: #52c41a !important; }
.ant-alert-warning { border-left-color: #faad14 !important; }
.ant-alert-error { border-left-color: #ff4d4f !important; }
.ant-alert-message { font-weight: 600 !important; font-size: 13px !important; }
.ant-alert-description { font-size: 12px !important; margin-top: 2px !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
LAYOUT UTILITIES — replace inline styles in page components
@@ -1127,10 +1195,19 @@ h1, h2, h3, h4, h5, h6 {
.full-width-stack { width: 100%; }
.stats-window-label {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-style: italic;
display: inline-flex;
align-items: center;
gap: 5px;
width: fit-content;
margin-bottom: 10px;
padding: 3px 10px 3px 8px;
background: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
color: #64748B;
letter-spacing: 0.3px;
}
/* Inline-Style-Cleanup-Sweep (1.7.14): Utility-Klassen für die
@@ -1438,7 +1515,8 @@ h1, h2, h3, h4, h5, h6 {
.inline-elapsed { margin-left: 12px; font-size: 12px; }
.upgrade-timeline { margin-top: 16px; padding-left: 8px; }
.auto-update-hint { margin-top: 12px; font-size: 12px; margin-bottom: 0; }
.auto-update-hint { margin-top: 4px; font-size: 12px; margin-bottom: 0; }
.settings-updates-divider { margin: 20px 0; border-top: 1px solid #F1F5F9; }
.setup-wrapper-done { max-width: 520px; margin: 80px auto; padding: 24px; }
.setup-wrapper-wizard { max-width: 720px; margin: 60px auto; padding: 24px; }
@@ -1473,10 +1551,10 @@ h1, h2, h3, h4, h5, h6 {
/* Toolbar row used by page headers that mix title + actions buttons. */
.page-toolbar {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 12px;
gap: 12px;
margin-bottom: 20px;
gap: 16px;
flex-wrap: wrap;
}
@@ -1486,6 +1564,7 @@ h1, h2, h3, h4, h5, h6 {
.page-toolbar h4,
.page-toolbar h5 {
margin: 0;
line-height: 1.2 !important;
}
/* Inline icon+text combos */
@@ -1745,7 +1824,7 @@ h1, h2, h3, h4, h5, h6 {
}
.content-area {
padding: 8px;
padding: 16px;
}
.content-card {