/* Il tema di Vox.Web, allineato a eulogika-ai-start. L'allineamento è fatto di variabili e non di regole ricopiate. I colori della piattaforma stanno una volta sola, in --eu-*, e da lì vengono mappati sulle variabili di Bootstrap: da quel punto in poi tabelle, elenchi, avvisi, campi e pulsanti prendono il tema senza che nessuno li tocchi uno per uno. Bootstrap 5.3 ha il tema scuro nativo — in App.razor — quindi qui non si dichiara un secondo tema: si sposta quello che c'è sulla tavolozza di casa. Ricopiare le regole di start sarebbe stato più rapido oggi e sbagliato domani: due fogli che dicono la stessa cosa con parole diverse divergono al primo ritocco, e la divergenza si scopre guardando due applicazioni affiancate. */ :root { /* La tavolozza di eulogika-ai-start, verbatim. */ --eu-bg: #0f1923; --eu-panel: #1a2d42; --eu-panel-hover: #1e3550; --eu-field: #243447; --eu-text: #e0eaf5; --eu-text-strong: #ffffff; --eu-muted: #7a9dbf; --eu-faint: #4a6580; --eu-accent: #4a9eff; --eu-accent-deep: #3b7dd8; --eu-good: #6ee89a; --eu-bad: #ff8a7a; --eu-line: rgba(255, 255, 255, 0.08); --eu-line-strong: rgba(255, 255, 255, 0.15); --eu-radius: 12px; --eu-radius-sm: 8px; --eu-topbar: linear-gradient(135deg, #1a2332 0%, #243447 100%); } /* La mappatura: da qui in giù Bootstrap si veste da solo. */ :root, [data-bs-theme="dark"] { --bs-body-bg: var(--eu-bg); --bs-body-color: var(--eu-text); --bs-emphasis-color: var(--eu-text-strong); --bs-heading-color: var(--eu-text-strong); --bs-secondary-color: var(--eu-muted); --bs-secondary-bg: var(--eu-panel); --bs-tertiary-bg: var(--eu-field); --bs-tertiary-color: var(--eu-faint); --bs-border-color: var(--eu-line); --bs-border-color-translucent: var(--eu-line); --bs-link-color: var(--eu-accent); --bs-link-hover-color: #7eb3f5; --bs-link-color-rgb: 74, 158, 255; --bs-code-color: #9fc9ff; --bs-primary: var(--eu-accent); --bs-primary-rgb: 74, 158, 255; --bs-success-text-emphasis: var(--eu-good); --bs-danger-text-emphasis: var(--eu-bad); --bs-font-sans-serif: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; } html, body { font-family: var(--bs-font-sans-serif); background: var(--eu-bg); color: var(--eu-text); margin: 0; padding: 0; } h1, h2, h3, h4 { color: var(--eu-text-strong); font-weight: 700; } h1 { font-size: 1.8rem; } h2 { font-size: 1.25rem; margin-top: 2rem; } h3 { font-size: 1rem; } .lead { color: var(--eu-muted); font-size: 1rem; } /* ===== Superfici ===== */ /* Un pannello solo, dichiarato una volta: le carte di start, le celle di elenco e le tabelle sono la stessa superficie vista in tre forme, e darle tre colori vicini ma non uguali è il modo in cui un'interfaccia comincia a sembrare assemblata. */ .card, .list-group-item, .table { background-color: var(--eu-panel); border-color: var(--eu-line); color: var(--eu-text); } .card { border-radius: var(--eu-radius); } .list-group-item-light { background-color: var(--eu-field); color: var(--eu-text); } .table { --bs-table-bg: var(--eu-panel); --bs-table-color: var(--eu-text); --bs-table-border-color: var(--eu-line); --bs-table-striped-bg: var(--eu-panel-hover); --bs-table-striped-color: var(--eu-text); --bs-table-hover-bg: var(--eu-panel-hover); --bs-table-hover-color: var(--eu-text-strong); border-radius: var(--eu-radius); overflow: hidden; } .table > thead th { color: var(--eu-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; } .text-muted { color: var(--eu-muted) !important; } code { color: #9fc9ff; background: rgba(74, 158, 255, 0.10); border-radius: 4px; padding: 0.05rem 0.3rem; } /* ===== Comandi ===== */ .btn-primary { background: linear-gradient(135deg, var(--eu-accent), var(--eu-accent-deep)); border: none; border-radius: var(--eu-radius-sm); color: var(--eu-text-strong); font-weight: 600; transition: opacity 0.15s; } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--eu-accent), var(--eu-accent-deep)); opacity: 0.88; color: var(--eu-text-strong); } .btn-outline-secondary { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--eu-line-strong); border-radius: var(--eu-radius-sm); color: #c8d8f0; } .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--eu-line-strong); color: var(--eu-text-strong); } .btn:disabled, .btn.disabled { opacity: 0.45; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.25); } .form-control, .form-select { background-color: var(--eu-field); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--eu-radius-sm); color: var(--eu-text); } .form-control:focus, .form-select:focus { background-color: var(--eu-field); border-color: var(--eu-accent); color: var(--eu-text); } .form-label { color: #8aaac8; font-size: 0.82rem; font-weight: 500; } .form-range::-webkit-slider-thumb { background: var(--eu-accent); } .form-range::-moz-range-thumb { background: var(--eu-accent); } /* ===== Avvisi ===== */ .alert { border-radius: var(--eu-radius-sm); border-width: 1px; } .alert-warning { background: rgba(255, 193, 7, 0.12); border-color: rgba(255, 193, 7, 0.3); color: #ffd479; } .alert-danger { background: rgba(231, 76, 60, 0.15); border-color: rgba(231, 76, 60, 0.3); color: var(--eu-bad); } .alert-success { background: rgba(39, 174, 96, 0.15); border-color: rgba(39, 174, 96, 0.3); color: var(--eu-good); } /* ===== Validazione ===== */ h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid var(--eu-bad); } .validation-message { color: var(--eu-bad); } /* ===== Errore di Blazor ===== */ /* Come in start: la barra dell'errore è rossa su fondo scuro, non gialla su fondo chiaro. */ #blazor-error-ui { background: #2a1a1a; color: var(--eu-bad); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; border-radius: var(--eu-radius-sm); } .blazor-error-boundary::after { content: "Si è verificato un errore."; } /* ===== Pagine dei volti ===== */ /* Titolo e interruttore dei prototipi sulla stessa riga, allineati sulla linea di base del titolo. wrap perché su uno schermo stretto le tre pastiglie scendono sotto invece di stringere il titolo fino a spezzarlo. */ .aigor-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 1rem; margin-bottom: 0.5rem; } .aigor-heading h1 { margin: 0; }