From 70ed8f0a61121235705ab5fdb3975c2732e1680b Mon Sep 17 00:00:00 2001 From: Alberto Balbo Date: Wed, 21 Jan 2026 17:39:15 +0100 Subject: [PATCH] Modernizzazione UI: nuovo tema dark e sidebar rivista MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Aggiorna l’interfaccia Blazor con una palette dark moderna, font Inter, e una sidebar ridisegnata. Riorganizza layout e navigazione, migliora la gestione errori e introduce nuovi stili per card, bottoni, input e badge. Aggiunto `modern-pages.css` per header, griglie statistiche, alert e form più coerenti e attuali. Migliora leggibilità, navigazione e user experience complessiva. --- Mimante/Pages/_Host.cshtml | 4 + Mimante/Shared/MainLayout.razor | 107 +++++++++-- Mimante/Shared/NavMenu.razor | 254 ++++++++++++++----------- Mimante/wwwroot/css/app-wpf.css | 273 +++++++++++++++++++++++---- Mimante/wwwroot/css/modern-pages.css | 228 ++++++++++++++++++++++ 5 files changed, 708 insertions(+), 158 deletions(-) create mode 100644 Mimante/wwwroot/css/modern-pages.css diff --git a/Mimante/Pages/_Host.cshtml b/Mimante/Pages/_Host.cshtml index 9aa2379..2577525 100644 --- a/Mimante/Pages/_Host.cshtml +++ b/Mimante/Pages/_Host.cshtml @@ -9,9 +9,13 @@ + + + + diff --git a/Mimante/Shared/MainLayout.razor b/Mimante/Shared/MainLayout.razor index ce16f4f..be61931 100644 --- a/Mimante/Shared/MainLayout.razor +++ b/Mimante/Shared/MainLayout.razor @@ -1,26 +1,103 @@ @inherits LayoutComponentBase -
-
+
+
+ -
- - -
+
+
@Body
- - Si è verificato un errore. - - - Si è verificato un errore non gestito. Consultare la console del browser per ulteriori informazioni. - - Ricarica - ?? +
+ + Si e verificato un errore. Ricarica + +
+ + diff --git a/Mimante/Shared/NavMenu.razor b/Mimante/Shared/NavMenu.razor index 426564b..8cfb7c5 100644 --- a/Mimante/Shared/NavMenu.razor +++ b/Mimante/Shared/NavMenu.razor @@ -2,138 +2,176 @@ @inject NavigationManager NavigationManager @inject AuthenticationStateProvider AuthenticationStateProvider -
-
-
- - - AutoBidder - -
+
+
+ +
+ +
+ AutoBidder +
-
-
+
+
diff --git a/Mimante/wwwroot/css/app-wpf.css b/Mimante/wwwroot/css/app-wpf.css index a7e5854..b01dac9 100644 --- a/Mimante/wwwroot/css/app-wpf.css +++ b/Mimante/wwwroot/css/app-wpf.css @@ -1,68 +1,271 @@ -/* app-wpf.css - WPF Dark Theme + Modern Sidebar */ +/* app-wpf.css - Modern Dark Theme */ :root { - /* WPF Dark Theme Palette */ - --bg-primary: #1e1e1e; - --bg-secondary: #252526; - --bg-tertiary: #2d2d30; - --bg-hover: #3e3e42; - --bg-selected: #094771; - --border-color: #3e3e42; - --text-primary: #ffffff; - --text-secondary: #cccccc; - --text-muted: #808080; + /* Modern Dark Palette */ + --bg-primary: #0f0f0f; + --bg-secondary: #171717; + --bg-tertiary: #1f1f1f; + --bg-card: #1a1a1a; + --bg-hover: #262626; + --bg-selected: #2d2d2d; + --border-color: rgba(255, 255, 255, 0.08); + --border-subtle: rgba(255, 255, 255, 0.04); - /* WPF Accent Colors */ - --primary-color: #007acc; - --success-color: #00d800; - --warning-color: #ffb700; - --danger-color: #e81123; - --info-color: #00b7c3; + /* Text Colors */ + --text-primary: #fafafa; + --text-secondary: #a1a1aa; + --text-muted: #71717a; - /* Log Syntax Colors */ - --log-success: #00d800; - --log-warning: #ffb700; - --log-error: #f48771; - --log-info: #4ec9b0; - --log-debug: #569cd6; - --log-timestamp: #808080; + /* Accent Colors */ + --primary: #6366f1; + --primary-hover: #4f46e5; + --success: #22c55e; + --warning: #f59e0b; + --danger: #ef4444; + --info: #3b82f6; + + /* Gradients */ + --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); + --gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); + --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); + + /* Shadows */ + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); + --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); + + /* Border Radius */ + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 14px; + --radius-xl: 20px; } -/* === GLOBAL === */ -* { +/* === GLOBAL RESET === */ +*, *::before, *::after { box-sizing: border-box; + margin: 0; + padding: 0; } body { - margin: 0; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg-primary); color: var(--text-secondary); - font-size: 13px; + font-size: 14px; + line-height: 1.5; + -webkit-font-smoothing: antialiased; } -/* === LAYOUT === */ +/* === SCROLLBAR === */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.15); +} + +/* === LAYOUT (legacy support) === */ .page { display: flex; height: 100vh; overflow: hidden; } -/* Sidebar Moderna - 250px come prima */ +/* === MODERN CARD COMPONENT === */ +.card-modern { + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: 1.5rem; + transition: all 0.2s ease; +} + +.card-modern:hover { + border-color: rgba(255, 255, 255, 0.12); +} + +.card-header-modern { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border-subtle); +} + +.card-title { + font-size: 1rem; + font-weight: 600; + color: var(--text-primary); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.card-title i { + color: var(--primary); +} + +/* === MODERN BUTTON === */ +.btn-modern { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.625rem 1.25rem; + font-size: 0.875rem; + font-weight: 500; + border-radius: var(--radius-md); + border: none; + cursor: pointer; + transition: all 0.15s ease; +} + +.btn-primary-modern { + background: var(--gradient-primary); + color: white; +} + +.btn-primary-modern:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); +} + +.btn-success-modern { + background: var(--gradient-success); + color: white; +} + +.btn-danger-modern { + background: var(--gradient-danger); + color: white; +} + +.btn-ghost { + background: transparent; + border: 1px solid var(--border-color); + color: var(--text-secondary); +} + +.btn-ghost:hover { + background: var(--bg-hover); + border-color: rgba(255, 255, 255, 0.15); + color: var(--text-primary); +} + +/* === MODERN INPUT === */ +.input-modern { + width: 100%; + padding: 0.75rem 1rem; + font-size: 0.875rem; + color: var(--text-primary); + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + transition: all 0.15s ease; +} + +.input-modern:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); +} + +.input-modern::placeholder { + color: var(--text-muted); +} + +/* === BADGE === */ +.badge-modern { + display: inline-flex; + align-items: center; + gap: 0.25rem; + padding: 0.25rem 0.625rem; + font-size: 0.75rem; + font-weight: 500; + border-radius: 9999px; +} + +.badge-success { + background: rgba(34, 197, 94, 0.15); + color: #4ade80; +} + +.badge-warning { + background: rgba(245, 158, 11, 0.15); + color: #fbbf24; +} + +.badge-danger { + background: rgba(239, 68, 68, 0.15); + color: #f87171; +} + +.badge-info { + background: rgba(59, 130, 246, 0.15); + color: #60a5fa; +} + +/* === STAT CARD === */ +.stat-card { + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: 1.25rem; +} + +.stat-card-label { + font-size: 0.8125rem; + color: var(--text-muted); + margin-bottom: 0.5rem; +} + +.stat-card-value { + font-size: 1.75rem; + font-weight: 700; + color: var(--text-primary); + line-height: 1.2; +} + +.stat-card-change { + font-size: 0.8125rem; + margin-top: 0.5rem; +} + +.stat-card-change.positive { + color: var(--success); +} + +.stat-card-change.negative { + color: var(--danger); +} + +/* Sidebar Moderna - 260px */ .sidebar { - width: 250px; + width: 260px; height: 100vh; position: fixed; left: 0; top: 0; - background: linear-gradient(180deg, #1c2128 0%, #161b22 50%, #0d1117 100%); + background: linear-gradient(180deg, #1a1d23 0%, #13151a 100%); border-right: 1px solid var(--border-color); z-index: 1000; - box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5); } main { - margin-left: 250px; + margin-left: 260px; flex: 1; display: flex; flex-direction: column; diff --git a/Mimante/wwwroot/css/modern-pages.css b/Mimante/wwwroot/css/modern-pages.css new file mode 100644 index 0000000..69bdfda --- /dev/null +++ b/Mimante/wwwroot/css/modern-pages.css @@ -0,0 +1,228 @@ +/* === MODERN PAGE STYLES (append to app-wpf.css) === */ +.page-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border-color); +} + +.page-header-icon { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: var(--gradient-primary); + border-radius: var(--radius-md); + font-size: 1.5rem; + color: white; +} + +.page-header-text h1, +.page-header-text h2 { + margin: 0; + font-size: 1.5rem; + font-weight: 700; + color: var(--text-primary); +} + +.page-header-text p { + margin: 0.25rem 0 0; + font-size: 0.875rem; + color: var(--text-muted); +} + +/* Modern Accordion */ +.accordion-modern .accordion-item { + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg) !important; + margin-bottom: 0.75rem; + overflow: hidden; +} + +.accordion-modern .accordion-button { + background: transparent; + color: var(--text-primary); + font-weight: 600; + padding: 1rem 1.25rem; + box-shadow: none !important; +} + +.accordion-modern .accordion-button:not(.collapsed) { + background: rgba(99, 102, 241, 0.08); + color: var(--primary); +} + +.accordion-modern .accordion-button::after { + filter: invert(1); +} + +.accordion-modern .accordion-body { + padding: 1.25rem; + background: var(--bg-secondary); +} + +/* Modern Form Controls Override */ +.settings-container .form-control, +.settings-container .form-select { + background: var(--bg-secondary) !important; + border: 1px solid var(--border-color) !important; + border-radius: var(--radius-md) !important; + color: var(--text-primary) !important; + padding: 0.75rem 1rem !important; +} + +.settings-container .form-control:focus, +.settings-container .form-select:focus { + border-color: var(--primary) !important; + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important; +} + +/* Stats Grid */ +.stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + margin-bottom: 1.5rem; +} + +.stat-box { + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: 1.25rem; + transition: all 0.2s ease; +} + +.stat-box:hover { + border-color: rgba(255, 255, 255, 0.12); + transform: translateY(-2px); +} + +.stat-box-label { + font-size: 0.8125rem; + color: var(--text-muted); + margin-bottom: 0.5rem; + display: flex; + align-items: center; + gap: 0.5rem; +} + +.stat-box-value { + font-size: 1.75rem; + font-weight: 700; + color: var(--text-primary); +} + +.stat-box-value.success { color: var(--success); } +.stat-box-value.warning { color: var(--warning); } +.stat-box-value.danger { color: var(--danger); } +.stat-box-value.info { color: var(--info); } + +/* Empty State */ +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 4rem 2rem; + text-align: center; +} + +.empty-state-icon { + font-size: 4rem; + color: var(--text-muted); + opacity: 0.5; + margin-bottom: 1.5rem; +} + +.empty-state-title { + font-size: 1.25rem; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 0.5rem; +} + +.empty-state-text { + color: var(--text-muted); + max-width: 400px; +} + +/* Settings Container Override */ +.settings-container { + max-width: 1000px; +} + +.settings-container .accordion-item { + background: var(--bg-card) !important; + border: 1px solid var(--border-color) !important; + border-radius: var(--radius-lg) !important; + margin-bottom: 0.75rem; +} + +.settings-container .accordion-button { + background: transparent !important; + color: var(--text-primary) !important; + font-weight: 600; +} + +.settings-container .accordion-button:not(.collapsed) { + background: rgba(99, 102, 241, 0.08) !important; +} + +.settings-container .accordion-body { + background: var(--bg-secondary) !important; + border-top: 1px solid var(--border-color) !important; +} + +/* Alert modernization */ +.settings-container .alert { + border-radius: var(--radius-md) !important; + border: 1px solid !important; +} + +.settings-container .alert-success { + background: rgba(34, 197, 94, 0.1) !important; + border-color: rgba(34, 197, 94, 0.3) !important; + color: #4ade80 !important; +} + +.settings-container .alert-warning { + background: rgba(245, 158, 11, 0.1) !important; + border-color: rgba(245, 158, 11, 0.3) !important; + color: #fbbf24 !important; +} + +.settings-container .alert-danger { + background: rgba(239, 68, 68, 0.1) !important; + border-color: rgba(239, 68, 68, 0.3) !important; + color: #f87171 !important; +} + +/* Button modernization */ +.settings-container .btn-primary { + background: var(--gradient-primary) !important; + border: none !important; + border-radius: var(--radius-md) !important; +} + +.settings-container .btn-danger { + background: var(--gradient-danger) !important; + border: none !important; + border-radius: var(--radius-md) !important; +} + +.settings-container .btn-outline-secondary { + background: transparent !important; + border: 1px solid var(--border-color) !important; + color: var(--text-secondary) !important; + border-radius: var(--radius-md) !important; +} + +.settings-container .btn-outline-secondary:hover { + background: var(--bg-hover) !important; + color: var(--text-primary) !important; +}