diff --git a/VERSION b/VERSION index 7a94c73..8bfc8db 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.2.61 +1.2.62 diff --git a/management-ui/src/styles/enterprise.css b/management-ui/src/styles/enterprise.css index 4f9bc3b..b34f39b 100644 --- a/management-ui/src/styles/enterprise.css +++ b/management-ui/src/styles/enterprise.css @@ -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 {