fix(ui): Design-Harmonisierung mit mail-gateway — v1.2.62
- 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
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user