/* ============================================================================ NADIREO — Theme Stylesheet "Empowering insights for a changing world" Foglio di stile a TEMA per uniformare le UI delle applicazioni allo stile della piattaforma NadirEO. Pensato come layer di skin: ridefinisce colori, tipografia, superfici, raggi, ombre e lo stile dei componenti ricorrenti SENZA imporre una struttura di layout. COME USARLO 1. Importa questo file dopo l'eventuale CSS di base/framework della tua app: 2. Imposta il tema sull'elemento (o su un contenitore radice): (default, come la console attuale) In assenza di attributo viene rispettato prefers-color-scheme. 3. Usa i token (var(--nd-*)) nei tuoi stili esistenti, e/o le classi pronte (.nd-btn, .nd-card, .nd-badge, .nd-field, ...) dove serve. Lo stile sui tag nativi (button, input, select, table) è già applicato. Tutti i token hanno prefisso --nd- per evitare collisioni. ============================================================================ */ /* ---------------------------------------------------------------------------- 0. FONT Font dell'interfaccia preso dallo stile del sito NadirEO: un grottesco umanistico arrotondato (famiglia Avenir/Mark sul sito ufficiale). Sostituto open-source ravvicinato = Mulish. Monospazio per ID/UUID/codici. Se possiedi il font ufficiale, ridefinisci semplicemente --nd-font-sans. ---------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---------------------------------------------------------------------------- 1. BRAND TOKENS — palette fissa (non cambia tra i temi) ---------------------------------------------------------------------------- */ :root { /* Brand core ---------------------------------------------------------- */ --nd-navy: #003366; /* primario — wordmark "nadir" */ --nd-navy-900: #00264d; --nd-navy-700: #0a3f73; --nd-navy-500: #1f5c96; --nd-navy-300: #6f9cc4; --nd-teal: #008a88; /* secondario — "eo" + claim */ --nd-teal-700: #006c6a; --nd-teal-500: #00a3a0; --nd-teal-300: #4fc6c3; --nd-teal-100: #c9ecec; --nd-petrol: #0d6b66; /* teal scuro — sfondi sezione hero */ /* Accenti (valori ufficiali da brand book NadirEO) -------------------- */ --nd-lime: #b8e905; /* Signal Lime — accesso immediato al dato */ --nd-lime-600: #9bc400; --nd-purple: #6a0dad; /* Spectral Violet — analisi avanzata */ --nd-purple-400: #9436c9; /* Stati semantici (tono base) ----------------------------------------- */ --nd-success: #1f9d6b; --nd-warning: #d98a00; --nd-danger: #d6453d; --nd-info: var(--nd-teal); /* Tipografia ---------------------------------------------------------- */ --nd-font-sans: "Mulish", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif; --nd-font-mono: "JetBrains Mono", "SFMono-Regular", "Consolas", monospace; --nd-text-xs: 0.75rem; /* 12 */ --nd-text-sm: 0.8125rem; /* 13 */ --nd-text-base: 0.9375rem; /* 15 */ --nd-text-md: 1.0625rem; /* 17 */ --nd-text-lg: 1.375rem; /* 22 */ --nd-text-xl: 1.75rem; /* 28 */ --nd-text-2xl: 2.25rem; /* 36 */ --nd-fw-regular: 400; --nd-fw-medium: 500; --nd-fw-semibold:600; --nd-fw-bold: 700; --nd-fw-black: 800; --nd-tracking-label: 0.04em; --nd-tracking-caps: 0.08em; /* Spaziatura (scala 4px) ---------------------------------------------- */ --nd-space-1: 4px; --nd-space-2: 8px; --nd-space-3: 12px; --nd-space-4: 16px; --nd-space-5: 20px; --nd-space-6: 24px; --nd-space-8: 32px; --nd-space-10: 40px; /* Raggi — coerenti con la console attuale (card morbide, pill piene) -- */ --nd-radius-xs: 6px; --nd-radius-sm: 8px; --nd-radius-md: 12px; --nd-radius-lg: 16px; --nd-radius-xl: 22px; --nd-radius-pill: 999px; /* Transizioni --------------------------------------------------------- */ --nd-ease: cubic-bezier(0.4, 0, 0.2, 1); --nd-dur: 160ms; color-scheme: dark; } /* ---------------------------------------------------------------------------- 2. THEME TOKENS — superfici, testo, bordi (cambiano tra dark/light) ---------------------------------------------------------------------------- */ /* DARK (default — come la console Data Access attuale) --------------------- */ :root, [data-theme="dark"] { color-scheme: dark; --nd-bg: #04182e; /* Deep Orbit Blue scurito — sfondo pagina */ --nd-bg-grad-a: #0a2747; --nd-bg-grad-b: #03132a; --nd-surface: #0e2740; /* pannello/app shell */ --nd-surface-2: #12324f; /* card, input, controlli */ --nd-surface-3: #18405f; /* hover / stati attivi soft */ --nd-overlay: rgba(4, 14, 26, 0.72); --nd-text: #eaf2f9; --nd-text-muted: #9bb3c9; --nd-text-faint: #6580a0; --nd-text-on-brand:#ffffff; --nd-border: rgba(120, 165, 205, 0.18); --nd-border-strong:rgba(120, 165, 205, 0.34); --nd-ring: rgba(0, 163, 160, 0.55); /* focus ring (teal) */ /* Azione primaria sul brand: TEAL (come "Contact Sales" sul sito) ----- */ --nd-primary: var(--nd-teal-500); --nd-primary-hover: #1bb7b3; --nd-primary-active: var(--nd-teal); --nd-on-primary: #022b2a; /* Stati su superfici scure (testo chiaro su chip tonale) -------------- */ --nd-success-fg: #5fd6a4; --nd-success-bg: rgba(31, 157, 107, 0.16); --nd-success-bd: rgba(95, 214, 164, 0.35); --nd-warning-fg: #f0bf63; --nd-warning-bg: rgba(217, 138, 0, 0.16); --nd-warning-bd: rgba(240, 191, 99, 0.35); --nd-danger-fg: #f08a84; --nd-danger-bg: rgba(214, 69, 61, 0.16); --nd-danger-bd: rgba(240, 138, 132, 0.35); --nd-info-fg: #58c8c5; --nd-info-bg: rgba(0, 163, 160, 0.16); --nd-info-bd: rgba(88, 200, 197, 0.35); --nd-neutral-fg: #9bb3c9; --nd-neutral-bg: rgba(120, 165, 205, 0.14); --nd-neutral-bd: rgba(120, 165, 205, 0.30); --nd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --nd-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42); --nd-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --nd-glow: 0 0 0 1px rgba(0,163,160,0.25), 0 10px 40px rgba(0, 60, 90, 0.45); } /* LIGHT --------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; --nd-bg: #f0f0f0; /* Zenith White ufficiale */ --nd-bg-grad-a: #f6f8f9; --nd-bg-grad-b: #e8edf0; --nd-surface: #ffffff; --nd-surface-2: #f5f8fa; --nd-surface-3: #eaf1f4; --nd-overlay: rgba(255, 255, 255, 0.7); --nd-text: #0a2440; --nd-text-muted: #4f6a82; --nd-text-faint: #8298ac; --nd-text-on-brand:#ffffff; --nd-border: #dde6ed; --nd-border-strong:#c4d2dd; --nd-ring: rgba(0, 138, 136, 0.45); --nd-primary: var(--nd-teal); --nd-primary-hover: #007471; --nd-primary-active: var(--nd-teal-700); --nd-on-primary: #ffffff; --nd-success-fg: #157f54; --nd-success-bg: #e2f5ec; --nd-success-bd: #b7e3cf; --nd-warning-fg: #9a6200; --nd-warning-bg: #fbf0db; --nd-warning-bd: #efd6a3; --nd-danger-fg: #b4322b; --nd-danger-bg: #fbe6e4; --nd-danger-bd: #f0c0bc; --nd-info-fg: #00736f; --nd-info-bg: #d8f0ef; --nd-info-bd: #aadedc; --nd-neutral-fg: #4f6a82; --nd-neutral-bg: #eaeff3; --nd-neutral-bd: #d3dde5; --nd-shadow-sm: 0 1px 2px rgba(10, 36, 64, 0.08); --nd-shadow-md: 0 8px 24px rgba(10, 36, 64, 0.10); --nd-shadow-lg: 0 24px 60px rgba(10, 36, 64, 0.16); --nd-glow: 0 0 0 1px rgba(0,138,136,0.18), 0 10px 40px rgba(0, 60, 90, 0.10); } /* Auto (nessun data-theme): segui il sistema ------------------------------- */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --nd-bg:#f0f0f0; --nd-bg-grad-a:#f6f8f9; --nd-bg-grad-b:#e8edf0; --nd-surface:#fff; --nd-surface-2:#f5f8fa; --nd-surface-3:#eaf1f4; --nd-overlay:rgba(255,255,255,0.7); --nd-text:#0a2440; --nd-text-muted:#4f6a82; --nd-text-faint:#8298ac; --nd-border:#dde6ed; --nd-border-strong:#c4d2dd; --nd-ring:rgba(0,138,136,0.45); --nd-primary:var(--nd-teal); --nd-primary-hover:#007471; --nd-primary-active:var(--nd-teal-700); --nd-on-primary:#fff; --nd-success-fg:#157f54; --nd-success-bg:#e2f5ec; --nd-success-bd:#b7e3cf; --nd-warning-fg:#9a6200; --nd-warning-bg:#fbf0db; --nd-warning-bd:#efd6a3; --nd-danger-fg:#b4322b; --nd-danger-bg:#fbe6e4; --nd-danger-bd:#f0c0bc; --nd-info-fg:#00736f; --nd-info-bg:#d8f0ef; --nd-info-bd:#aadedc; --nd-neutral-fg:#4f6a82; --nd-neutral-bg:#eaeff3; --nd-neutral-bd:#d3dde5; --nd-shadow-sm:0 1px 2px rgba(10,36,64,0.08); --nd-shadow-md:0 8px 24px rgba(10,36,64,0.10); --nd-shadow-lg:0 24px 60px rgba(10,36,64,0.16); --nd-glow:0 0 0 1px rgba(0,138,136,0.18),0 10px 40px rgba(0,60,90,0.10); } } /* ---------------------------------------------------------------------------- 3. BASE — tag nativi ---------------------------------------------------------------------------- */ .nd-theme, body.nd-theme { background: radial-gradient(1200px 700px at 80% -10%, var(--nd-bg-grad-a), transparent 60%), radial-gradient(900px 600px at 0% 110%, var(--nd-bg-grad-b), transparent 55%), var(--nd-bg); color: var(--nd-text); font-family: var(--nd-font-sans); font-size: var(--nd-text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .nd-theme h1, .nd-theme h2, .nd-theme h3, .nd-theme h4 { font-family: var(--nd-font-sans); font-weight: var(--nd-fw-bold); color: var(--nd-text); line-height: 1.15; margin: 0 0 0.4em; text-wrap: balance; } .nd-theme h1 { font-size: var(--nd-text-2xl); font-weight: var(--nd-fw-black); letter-spacing: -0.01em; } .nd-theme h2 { font-size: var(--nd-text-xl); } .nd-theme h3 { font-size: var(--nd-text-lg); } .nd-theme h4 { font-size: var(--nd-text-md); } .nd-theme p { margin: 0 0 1em; color: var(--nd-text); } .nd-theme a { color: var(--nd-teal-500); text-decoration: none; } .nd-theme a:hover { color: var(--nd-primary-hover); text-decoration: underline; text-underline-offset: 3px; } .nd-theme small { color: var(--nd-text-muted); font-size: var(--nd-text-sm); } .nd-theme code, .nd-theme kbd, .nd-theme samp { font-family: var(--nd-font-mono); } .nd-theme ::selection { background: var(--nd-teal); color: #fff; } .nd-theme hr { border: 0; border-top: 1px solid var(--nd-border); margin: var(--nd-space-6) 0; } /* Etichette di campo / overline ------------------------------------------- */ .nd-label, .nd-theme label { display: inline-block; font-size: var(--nd-text-sm); font-weight: var(--nd-fw-bold); letter-spacing: var(--nd-tracking-label); color: var(--nd-text-muted); margin-bottom: var(--nd-space-2); } .nd-overline { font-size: var(--nd-text-xs); font-weight: var(--nd-fw-bold); letter-spacing: var(--nd-tracking-caps); text-transform: uppercase; color: var(--nd-teal-500); } .nd-mono { font-family: var(--nd-font-mono); } .nd-muted { color: var(--nd-text-muted); } .nd-faint { color: var(--nd-text-faint); } /* ---------------------------------------------------------------------------- 4. SUPERFICI — card, pannelli, app shell ---------------------------------------------------------------------------- */ .nd-app-shell { background: linear-gradient(180deg, color-mix(in srgb, var(--nd-surface) 92%, transparent), var(--nd-surface)); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-xl); box-shadow: var(--nd-glow); } .nd-card, .nd-panel { background: var(--nd-surface-2); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-lg); box-shadow: var(--nd-shadow-sm); } .nd-card { padding: var(--nd-space-5); } .nd-card--flush { padding: 0; } .nd-card-dashed { background: color-mix(in srgb, var(--nd-surface-2) 60%, transparent); border: 1px dashed var(--nd-border-strong); border-radius: var(--nd-radius-md); color: var(--nd-text-muted); padding: var(--nd-space-5); text-align: center; } /* ---------------------------------------------------------------------------- 5. BOTTONI ---------------------------------------------------------------------------- */ .nd-btn, :where(.nd-theme button:not(.nd-unstyled)) { display: inline-flex; align-items: center; justify-content: center; gap: var(--nd-space-2); font-family: var(--nd-font-sans); font-size: var(--nd-text-base); font-weight: var(--nd-fw-bold); line-height: 1; padding: 11px 18px; border-radius: var(--nd-radius-md); border: 1px solid var(--_bd, var(--nd-border-strong)); background: var(--_bg, var(--nd-surface-3)); color: var(--_fg, var(--nd-text)); cursor: pointer; white-space: nowrap; transition: background var(--nd-dur) var(--nd-ease), border-color var(--nd-dur) var(--nd-ease), transform var(--nd-dur) var(--nd-ease), box-shadow var(--nd-dur) var(--nd-ease); } .nd-btn:hover, :where(.nd-theme button:not(.nd-unstyled)):hover { --_bg: color-mix(in srgb, var(--nd-surface-3) 64%, var(--nd-text) 8%); } .nd-btn:active, .nd-theme button:not(.nd-unstyled):active { transform: translateY(1px); } .nd-btn:focus-visible, .nd-theme button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nd-ring); } /* Primario — teal di brand */ .nd-btn--primary { --_bg: var(--nd-primary); --_fg: var(--nd-on-primary); --_bd: transparent; box-shadow: 0 6px 18px color-mix(in srgb, var(--nd-primary) 45%, transparent); } .nd-btn--primary:hover { --_bg: var(--nd-primary-hover); } .nd-btn--primary:active { --_bg: var(--nd-primary-active); } /* Navy / Secondario solido */ .nd-btn--navy { --_bg: var(--nd-navy); --_fg: #fff; --_bd: transparent; } .nd-btn--navy:hover { --_bg: var(--nd-navy-700); } /* Lime accent (azioni "discover/avvia") */ .nd-btn--lime { --_bg: var(--nd-lime); --_fg: #16270a; --_bd: transparent; } .nd-btn--lime:hover { --_bg: var(--nd-lime-600); } /* Outline / ghost */ .nd-btn--outline { --_bg: transparent; --_fg: var(--nd-text); --_bd: var(--nd-border-strong); } .nd-btn--ghost { --_bg: transparent; --_fg: var(--nd-text-muted); --_bd: transparent; } .nd-btn--ghost:hover { --_fg: var(--nd-text); background: var(--nd-surface-3); } .nd-btn--danger { --_bg: transparent; --_fg: var(--nd-danger-fg); --_bd: var(--nd-danger-bd); } .nd-btn--danger:hover { background: var(--nd-danger-bg); } /* Dimensioni / modificatori */ .nd-btn--sm { padding: 7px 12px; font-size: var(--nd-text-sm); border-radius: var(--nd-radius-sm); } .nd-btn--lg { padding: 15px 26px; font-size: var(--nd-text-md); border-radius: var(--nd-radius-md); } .nd-btn--block{ display: flex; width: 100%; } .nd-btn[disabled], .nd-theme button[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; } .nd-btn .nd-ico, .nd-theme button .nd-ico { width: 1.1em; height: 1.1em; flex: none; } /* Freccia circolare "Discover More" (motivo del sito) */ .nd-arrow-circle { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--nd-radius-pill); background: var(--nd-lime); color: #16270a; } .nd-arrow-circle--purple { background: var(--nd-purple); color: #fff; } .nd-arrow-circle--teal { background: var(--nd-teal); color: #fff; } /* ---------------------------------------------------------------------------- 6. SEGMENTED / TAB SWITCH (es. "Search & Preview" | "Quick Download") ---------------------------------------------------------------------------- */ .nd-segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--nd-space-2); padding: 6px; background: var(--nd-surface); border: 1px solid var(--nd-border); border-radius: var(--nd-radius-md); } .nd-segment > button, .nd-segment > .nd-segment-item { border: 1px solid transparent !important; background: transparent !important; color: var(--nd-text-muted) !important; font-weight: var(--nd-fw-bold); padding: 12px 16px; border-radius: var(--nd-radius-sm); } .nd-segment > [aria-selected="true"], .nd-segment > .is-active { background: var(--nd-primary) !important; color: var(--nd-on-primary) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--nd-primary) 40%, transparent); } /* ---------------------------------------------------------------------------- 7. PILL / CHIP (Category, Format) ---------------------------------------------------------------------------- */ .nd-pill, .nd-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nd-text-sm); font-weight: var(--nd-fw-bold); padding: 8px 16px; border-radius: var(--nd-radius-pill); border: 1px solid var(--nd-border-strong); background: var(--nd-surface-2); color: var(--nd-text-muted); cursor: pointer; transition: all var(--nd-dur) var(--nd-ease); } .nd-pill:hover { color: var(--nd-text); border-color: var(--nd-teal-500); } .nd-pill.is-active, .nd-pill[aria-pressed="true"] { background: var(--nd-primary); border-color: transparent; color: var(--nd-on-primary); } /* ---------------------------------------------------------------------------- 8. FORM — input, select, textarea ---------------------------------------------------------------------------- */ .nd-field { margin-bottom: var(--nd-space-5); } .nd-input, .nd-select, .nd-textarea, .nd-theme input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .nd-theme select, .nd-theme textarea { width: 100%; font-family: var(--nd-font-sans); font-size: var(--nd-text-base); color: var(--nd-text); background: var(--nd-surface); border: 1px solid var(--nd-border-strong); border-radius: var(--nd-radius-md); padding: 12px 14px; transition: border-color var(--nd-dur) var(--nd-ease), box-shadow var(--nd-dur) var(--nd-ease); } .nd-theme input::placeholder, .nd-theme textarea::placeholder { color: var(--nd-text-faint); } .nd-theme input:focus, .nd-theme select:focus, .nd-theme textarea:focus, .nd-input:focus, .nd-select:focus, .nd-textarea:focus { outline: none; border-color: var(--nd-teal-500); box-shadow: 0 0 0 3px var(--nd-ring); } .nd-theme select, .nd-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--nd-text-muted) 50%), linear-gradient(135deg, var(--nd-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; } /* date e numerici in mono per leggibilità (coerente con la console) */ .nd-theme input[type="date"], .nd-theme input[type="number"], .nd-input--mono { font-family: var(--nd-font-mono); letter-spacing: 0.02em; } .nd-input-group { position: relative; } .nd-input-group > .nd-ico-lead { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--nd-text-faint); width: 1.1em; height: 1.1em; pointer-events: none; } .nd-input-group > input { padding-left: 42px; } /* ---------------------------------------------------------------------------- 9. BADGE / STATO (job: COMPLETED, RUNNING, QUEUED, CANCELLED, FAILED) ---------------------------------------------------------------------------- */ .nd-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--nd-font-mono); font-size: var(--nd-text-xs); font-weight: var(--nd-fw-bold); letter-spacing: var(--nd-tracking-caps); text-transform: uppercase; padding: 4px 10px; border-radius: var(--nd-radius-pill); border: 1px solid var(--nd-neutral-bd); background: var(--nd-neutral-bg); color: var(--nd-neutral-fg); } .nd-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .nd-badge--success { color: var(--nd-success-fg); background: var(--nd-success-bg); border-color: var(--nd-success-bd); } .nd-badge--running { color: var(--nd-info-fg); background: var(--nd-info-bg); border-color: var(--nd-info-bd); } .nd-badge--running::before { animation: nd-pulse 1.2s var(--nd-ease) infinite; } .nd-badge--queued { color: var(--nd-warning-fg); background: var(--nd-warning-bg); border-color: var(--nd-warning-bd); } .nd-badge--failed { color: var(--nd-danger-fg); background: var(--nd-danger-bg); border-color: var(--nd-danger-bd); } .nd-badge--cancelled { color: var(--nd-neutral-fg); background: var(--nd-neutral-bg); border-color: var(--nd-neutral-bd); } .nd-badge--cancelled::before { background: var(--nd-text-faint); } @keyframes nd-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } /* ---------------------------------------------------------------------------- 10. JOB LIST ITEM (card della colonna "Recent Jobs") ---------------------------------------------------------------------------- */ .nd-job { display: block; color: var(--nd-text); text-decoration: none; background: var(--nd-surface-2); border: 1px solid var(--nd-border); border-left: 3px solid var(--nd-border-strong); border-radius: var(--nd-radius-md); padding: var(--nd-space-4); cursor: pointer; transition: border-color var(--nd-dur) var(--nd-ease), background var(--nd-dur) var(--nd-ease), transform var(--nd-dur) var(--nd-ease); } .nd-job:hover { transform: translateX(2px); border-left-color: var(--nd-teal-500); background: var(--nd-surface-3); } .nd-job.is-selected { border-left-color: var(--nd-primary); background: var(--nd-surface-3); } .nd-job--success { border-left-color: var(--nd-success-fg); } .nd-job--cancelled { border-left-color: var(--nd-text-faint); } .nd-job--running { border-left-color: var(--nd-info-fg); } .nd-job-top { display: flex; align-items: center; justify-content: space-between; gap: var(--nd-space-3); } .nd-job-id { font-family: var(--nd-font-mono); font-size: var(--nd-text-xs); color: var(--nd-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nd-job-title { font-weight: var(--nd-fw-bold); font-size: var(--nd-text-md); color: var(--nd-text); margin: 8px 0 4px; } .nd-job:hover .nd-job-title { color: var(--nd-text); } .nd-job-meta { font-size: var(--nd-text-sm); color: var(--nd-text-muted); } /* ---------------------------------------------------------------------------- 11. PAGINATION ---------------------------------------------------------------------------- */ .nd-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--nd-space-4); } .nd-pagination .nd-page-info { font-size: var(--nd-text-sm); color: var(--nd-text-muted); font-family: var(--nd-font-mono); } /* ---------------------------------------------------------------------------- 12. KBD ---------------------------------------------------------------------------- */ .nd-kbd, .nd-theme kbd { font-family: var(--nd-font-mono); font-size: 0.8em; font-weight: var(--nd-fw-bold); padding: 2px 7px; border-radius: var(--nd-radius-xs); background: var(--nd-surface-3); border: 1px solid var(--nd-border-strong); border-bottom-width: 2px; color: var(--nd-text); } /* ---------------------------------------------------------------------------- 13. TABELLE ---------------------------------------------------------------------------- */ .nd-table { width: 100%; border-collapse: collapse; font-size: var(--nd-text-base); } .nd-table th { text-align: left; font-size: var(--nd-text-xs); font-weight: var(--nd-fw-bold); letter-spacing: var(--nd-tracking-label); text-transform: uppercase; color: var(--nd-text-muted); padding: 12px 14px; border-bottom: 1px solid var(--nd-border-strong); } .nd-table td { padding: 14px; border-bottom: 1px solid var(--nd-border); } .nd-table tbody tr:hover { background: var(--nd-surface-3); } /* ---------------------------------------------------------------------------- 14. PROGRESS (avanzamento processamenti) ---------------------------------------------------------------------------- */ .nd-progress { height: 8px; border-radius: var(--nd-radius-pill); background: var(--nd-surface-3); overflow: hidden; } .nd-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nd-teal-500), var(--nd-lime)); } .nd-progress--indeterminate > span { width: 40%; animation: nd-indet 1.3s var(--nd-ease) infinite; } @keyframes nd-indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } /* ---------------------------------------------------------------------------- 15. TOAST / ALERT ---------------------------------------------------------------------------- */ .nd-alert { display: flex; gap: var(--nd-space-3); align-items: flex-start; padding: 14px 16px; border-radius: var(--nd-radius-md); border: 1px solid var(--nd-info-bd); background: var(--nd-info-bg); color: var(--nd-text); border-left-width: 4px; } .nd-alert--success { border-color: var(--nd-success-bd); background: var(--nd-success-bg); border-left-color: var(--nd-success-fg); } .nd-alert--warning { border-color: var(--nd-warning-bd); background: var(--nd-warning-bg); border-left-color: var(--nd-warning-fg); } .nd-alert--danger { border-color: var(--nd-danger-bd); background: var(--nd-danger-bg); border-left-color: var(--nd-danger-fg); } .nd-alert--info { border-left-color: var(--nd-info-fg); } /* ---------------------------------------------------------------------------- 16. SCROLLBAR (coerenza con il tema) ---------------------------------------------------------------------------- */ .nd-theme * { scrollbar-width: thin; scrollbar-color: var(--nd-border-strong) transparent; } .nd-theme *::-webkit-scrollbar { width: 10px; height: 10px; } .nd-theme *::-webkit-scrollbar-thumb { background: var(--nd-border-strong); border-radius: var(--nd-radius-pill); border: 2px solid transparent; background-clip: content-box; } .nd-theme *::-webkit-scrollbar-thumb:hover { background: var(--nd-teal-500); background-clip: content-box; } /* ---------------------------------------------------------------------------- 17. UTILITY DI BRAND ---------------------------------------------------------------------------- */ .nd-text-teal { color: var(--nd-teal-500); } .nd-text-navy { color: var(--nd-navy-300); } .nd-text-lime { color: var(--nd-lime); } .nd-text-purple { color: var(--nd-purple-400); } .nd-bg-petrol { background: var(--nd-petrol); color: #fff; } .nd-divider { height: 1px; background: var(--nd-border); border: 0; } .nd-elev-md { box-shadow: var(--nd-shadow-md); } .nd-elev-lg { box-shadow: var(--nd-shadow-lg); } /* Mappa Leaflet entro il tema (controlli e attribuzione) ------------------- */ .nd-theme .leaflet-bar a { background: var(--nd-surface) !important; color: var(--nd-text) !important; border-color: var(--nd-border) !important; } .nd-theme .leaflet-bar a:hover { background: var(--nd-surface-3) !important; } .nd-theme .leaflet-control-attribution { background: var(--nd-overlay) !important; color: var(--nd-text-muted) !important; } .nd-theme .leaflet-control-attribution a { color: var(--nd-teal-500) !important; }