/* ========================================================= */ /* === 1. RESET E SFONDO TECNOLOGICO (NO IMMAGINI) === */ /* ========================================================= */ html, body { width: 100%; min-height: 100vh; margin: 0; padding: 0; font-family: 'Segoe UI', 'Inter', Roboto, Helvetica, Arial, sans-serif; /* SFONDO: Gradiente profondo (Blu Notte / Viola) */ background-color: #0f172a; /* Base scura */ background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%); background-attachment: fixed; background-size: cover; color: #e2e8f0; /* Testo grigio chiaro leggibile */ overflow-x: hidden; } /* Tema chiaro: sovrascrive lo sfondo scuro fisso di html/body, altrimenti sotto il layout (dove il contenuto non arriva) resta una striscia scura. NB: data-theme รจ sull'elemento , quindi serve html[data-theme="light"] (non [data-theme="light"] html, che cercherebbe un html discendente). */ html[data-theme="light"], html[data-theme="light"] body { background-color: #eef2f9 !important; background-image: linear-gradient(180deg, #e4eaf3 0%, #eef2f9 100%) !important; background-attachment: fixed; color: #1f2937; } /* Scrollbar personalizzata scura */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #0f172a; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ========================================================= */ /* === 2. EFFETTO VETRO PER COMPONENTI MUDBLAZOR === */ /* ========================================================= */ /* MENU LATERALE (Drawer) */ .mud-drawer, .mud-drawer-paper { background-color: rgba(15, 23, 42, 0.7) !important; /* Molto trasparente */ backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border-right: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: 4px 0 30px rgba(0,0,0,0.2) !important; } /* BARRA SUPERIORE (AppBar) */ .mud-appbar { background-color: rgba(15, 23, 42, 0.6) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; } /* Contenuto Principale */ .mud-main-content { background: transparent !important; padding-top: 20px; } /* Layout */ .mud-layout { background: transparent !important; } /* ========================================================= */ /* === 3. OVERRIDE INPUT E FORM (Stile Dark/Glass) === */ /* ========================================================= */ /* Input MudBlazor Standard */ .mud-input, .mud-input-control .mud-input-root { background-color: rgba(30, 41, 59, 0.5) !important; backdrop-filter: blur(10px); color: #fff !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,0.1) !important; transition: all 0.3s ease; } /* Focus sugli input */ .mud-input.mud-input-focused, .mud-input-control .mud-input-root.mud-input-focused { background-color: rgba(30, 41, 59, 0.8) !important; border-color: #60a5fa !important; /* Azzurro */ box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); } .mud-input-label { color: #94a3b8 !important; } /* Input standard HTML/Bootstrap (se presenti) */ .form-control { background-color: rgba(30, 41, 59, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: white !important; backdrop-filter: blur(10px); } .form-control:focus { background-color: rgba(30, 41, 59, 0.8) !important; border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important; } /* ========================================================= */ /* === 4. POPUP E DIALOGHI (Modal Windows 11 Style) === */ /* ========================================================= */ .mud-dialog-container .mud-paper { background-color: rgba(15, 23, 42, 0.85) !important; /* Sfondo scuro vetro */ backdrop-filter: blur(25px) !important; -webkit-backdrop-filter: blur(25px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; box-shadow: 0 25px 60px rgba(0,0,0,0.6) !important; } .mud-dialog-title { color: #f1f5f9 !important; font-weight: 700 !important; } .mud-dialog-content { color: #cbd5e1 !important; } /* Pulsanti nei dialoghi */ .mud-button-filled.mud-button-filled-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4); } .mud-button-filled.mud-button-filled-error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); } /* ========================================================= */ /* === 5. LINK E NAVIGAZIONE === */ /* ========================================================= */ .mud-nav-link { color: #94a3b8 !important; border-radius: 8px; margin-bottom: 4px; transition: all 0.2s ease; } .mud-nav-link:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: #f1f5f9 !important; transform: translateX(5px); } .mud-nav-link.active { background: linear-gradient(90deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%) !important; color: #60a5fa !important; border-left: 3px solid #60a5fa; } /* ========================================================= */ /* === 6. ANIMAZIONI UTILITY === */ /* ========================================================= */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }