@charset "UTF-8"; /** * ============================================================================ * CANOPO 2026 - Stylesheet principale v70 (Enterprise DS + WCAG AA + Mobile Kit) * ============================================================================ * * v70 CHANGELOG (2026-09-14): * - skSidebar: un solo contenitore scroll sulla spalla * (.div_MenuLeftSideBar_Principale / .sk-sidebar). #navigationVertical e * .containerVertical non sono piu' position:fixed, cosi' le voci lunghe * restano raggiungibili sulla viewport. * * v69 CHANGELOG (2026-08-28): * - #ui-datepicker-div sopra l'header sticky della SkGrid (CMCNP-2060). * * v68 CHANGELOG (2026-07-31): * - Nei gruppi richiudibili della spalla l'accento arancio è ora limitato al * titolo: non crea più una barra verticale continua lungo le voci figlie. * * v67 CHANGELOG (2026-07-31): * - Esteso .sk-sidebar-section con gruppi richiudibili nativi tramite *
/: stato iniziale aperto, indicatore e focus accessibile. * - Il componente resta additivo: il titolo viene emesso dal template solo * quando almeno una voce della sezione è autorizzata. * * v66 CHANGELOG (2026-07-31): * - Aggiunto il componente additivo .sk-sidebar-section per organizzare * semanticamente la spalla sinistra in gruppi brevi e riconoscibili. * - Intestazioni coerenti con il Design System Canopo: testo primary, * accento arancio, tipografia XS e allineamento alle voci esistenti. * - Nessuna modifica agli stili, agli stati o al markup dei menu esistenti. * * v65 CHANGELOG (2026-07-21): * - Attivato il WOFF2 locale di Good Times mantenendo i fallback legacy. * * v64 CHANGELOG (2026-07-20): * - Bonificate le transizioni delle tile e dei pulsanti avanzati con stati hover locali. * * v63 CHANGELOG (2026-07-20): * - Restringimento delle transizioni dei pulsanti base e submit alle proprietà effettivamente animate. * * v62 CHANGELOG (2026-07-20): * - Bonificate le prime transizioni `all` con proprietà visive esplicite. * * v61 CHANGELOG (2026-07-20): * - Ripristinata la semantica HTML di hidden per .sk-notice. * - Corretto il token non definito dello stato attivo legenda scheduler. * - prefers-reduced-motion mantiene gli indicatori di caricamento statici. * - Limitate le transizioni dei controlli form alle proprieta' visive attese. * - Rimossi gli override dark globali dei token nudi on/no/closed/empty/alt: * nessun consumer calendario; collisioni documentate con componenti moderni. * * v58 CHANGELOG (2026-04-20): * * Modernizzazione loader full-page (sezione 26): sostituito spinner.gif con * Conic ring CSS-only (V2). Zero impatto sulle pagine: markup invariato * () e API JS invariata (body.classList.add('loading'), * spinnerStart/spinnerStop). * * [SEZIONE 26 RIDISEGNATA] * - .spinner: ora flex container con backdrop bianco 78% (era 80% con GIF) * - .spinner::before: anello rotante via conic-gradient + radial mask, * 48x48px, 1s linear infinite, gradient brand-primary -> brand-accent * (zero asset esterni, zero richieste HTTP, theming automatico) * - .spinner::after: etichetta "Caricamento" multilingua via :lang() CSS * (it/en/fr/de/es/pt) - richiede sk-core.js v1.10+ per fallback * navigator.language quando non e' impostato server-side * - @keyframes sk-spinner-spin: nome distinto da @keyframes spin esistente * (usato da .loaderChart) per evitare collisioni * * [INVARIATO IN SEZIONE 26] * - body.loading / body.loading .spinner (selettori invariati) * - #overlay, #overlayModal, #progressbar, #status, .loaderChart * - @keyframes spin (usato da .loaderChart, mantenuto) * * [REDUCED MOTION] * Override globale gia' presente (riga ~9697) gestisce automaticamente * .spinner::before. Nessun override locale necessario: con reduced-motion * l'anello resta visibile statico (conic-gradient e' una proprietà CSS, * non un'animazione) - feedback "loading in corso" preservato. * * v57 CHANGELOG (2026-04-19): * * Refactor retrocompatibile - nessun selettore rimosso, solo additivo: * * [VARIABILI NUOVE] * - Chart palette estesa: --chart-1-light/-dark ... --chart-7-light/-dark * (per stacked/grouped/hover senza ricorrere a hex hardcoded) * - Stato shade: --color-success-dark, --color-warning-dark, --color-error-dark * --color-success-tint, --color-warning-tint, --color-error-tint * - Brand danger tint: --brand-danger-light, --brand-danger-tint * - Alpirisch stati: --alpirisch-nuovo-bg/-border/-hover-bg/-hover-border (x4 stati) * - Button shade neutri: --btn-hover-bg-start/-end, --btn-active-bg-start/-end * - Mobile layout: --sk-mobile-drawer-w, --sk-mobile-bottom-nav-h, * --sk-mobile-breakpoint, --sk-mobile-touch-target * * [SOSTITUZIONI HEX -> VAR (zero impatto visivo)] * - Sezione 35.2 alpirisch (L4208-4242): 16 hex -> var(--alpirisch-*) * - Sezione 35.3 sk-btn base hover/active (L4350, L4357): 4 hex -> var * - Sezione 35.4 sk-btn--success/warning/danger: 12 hex -> var(--color-*-dark/-tint) * - Chart kit: riferimenti a shade via var(--chart-N-light/dark) * * [NUOVE REGOLE] * - Sezione 53. SK MOBILE KIT: * 53.1 Hamburger + drawer off-canvas (pattern laterale opzionale) * 53.2 Hide KPI/chart su mobile (display:none per sk-kpi-strip, sk-home-charts, * sk-chart, sk-home-chart-panel, sk-home-chart-box) * 53.3 Grid -> card list (conversione visuale griglie operative) * 53.4 sk-mobile-card component (titolo + righe label/value) * 53.5 sk-mobile-only / sk-desktop-only utility * 53.6 Bottom sheet per popup * 53.7 Mobile form single-column forzato * 53.8 Tap target enforcement (WCAG 2.5.5) * 53.9 prefers-reduced-motion esteso a tutte le transition * * [FIX REGOLE VUOTE] * - .sk-cal-cell--we (L2009): rende esplicita l'opacity per weekend * - .sk-popup-field (L3500): aggiunge flex layout essenziale * * [PERFORMANCE HINTS - vedi commento "Performance in produzione" sotto] * * [WCAG/AGID GAP CHIUSI] * - 2.5.5 Target Size: enforcement 44x44 minimo su mobile * - 2.3.3 Animation from Interactions: reduced-motion globale * - 1.4.12 Text Spacing: garantita su componenti mobile * - 1.3.4 Orientation: layout funzionale in landscape + portrait * - 2.4.11 Focus Not Obscured: z-index focus ring rispettato * * v56 CHANGELOG (2026-04-02): * - Menu Tab Visita (#navigation): nuovo pattern DOT per stati completamento * - DOT colorato (::before) indica lo stato (ok=verde, warn=arancio, ko=rosso) * - Barra sotto (::after) indica SOLO la selezione (arancione su .current) * - Accessibilita': forma (posizione pallino) + colore evita daltonismo * * v55 CHANGELOG (2026-04-01): * - CANOPO 2026 Enterprise Design System * - Grid: variabili --dhx-s-grid-row-hover, --dhx-s-grid-row-selected, * --dhx-s-grid-selection-border, --dhx-s-grid-cell-text * - Sincronizzazione con suite.css v9.3.2 e dhtmlx.css v3.3 * * ============================================================================ * PERFORMANCE IN PRODUZIONE (raccomandazioni v57) * ============================================================================ * Il file e' 8.900+ righe non-minificate. In produzione: * * 1. MINIFICAZIONE: servire default.min.css (gzipped tipicamente 35-45 KB vs * 220 KB originali). Tool: cssnano, clean-css, lightningcss. * * 2. COMPRESSIONE: abilitare Brotli (preferito) o gzip a livello server. * Brotli ~30% migliore di gzip su CSS. * * 3. HTTP CACHING: versionare l'URL (?v=57) e impostare Cache-Control: * max-age=31536000, immutable. Il versioning sul query string invalida * correttamente al cambio versione. * * 4. PRELOAD: nella master per evitare render-blocking aggiuntivo. * * 5. CRITICAL CSS (opzionale): estrarre inline le ~300 righe critiche * (custom properties + sez. 3-8) per first paint <100ms, rimandare il * resto con media="print" onload swap. * * 6. content-visibility:auto: applicato ai container off-screen riduce * layout/paint del 30-60% in pagine lunghe. Classe .sk-cv-auto gia' * disponibile (vedi sez. 53.10). * * 7. RIDUZIONE SELECTOR COMPLEXITY: le regole annidate su 4+ livelli * (es. #navigationVertical ul li a:link) costano in match. Preferire * classi BEM dirette. Per ora mantenute per retrocompatibilita' DHTMLX. * * 8. CSS CONTAINMENT: .gruppo1, .sk-card, .sk-home-chart-panel usano * contain:layout style per isolare il reflow (vedi sez. 53.10). * * 9. PURGING CONDIZIONALE: se un deploy serve SOLO moduli x/y/z, i blocchi * sez. 22 (Crystal Reports), 24 (Manichino DPI), 42 (Scheduler) possono * essere purgati via PostCSS per -15% size. * * 10. HTTP/2 o HTTP/3: un singolo file e' OK; evitare split multi-file che * richiederebbero piu' round-trip. * * ============================================================================ * * INDICE * ------ * 1. Custom Properties (variabili, incluse --chart-1..7 + shade) * 2. Font-face * 3. Reset & Base * 4. Scrollbar * 5. Tipografia & Utilita' * 6. Link * 7. Layout (Header, Footer, Floating, Sidebar) * 8. Div Main Interno * 9. Logo & Brand * 10. Menu Principale (Toolbar on/off) * 11. Menu FontAwesome (logout, cambiapwd, menuprincipale, tornamodulo) * 12. Tabelle & Intestazioni * 13. Menu Tab Orizzontale (#navigation) * 13b. SK Navigation Overflow Kit * 14. Menu Tab Verticale (#navigationVertical) & Left Sidebar * 15. Form & Validazione (Input, Select, Textarea, :valid/:invalid) * 16. Gruppi / Riquadri (box decorativi) * 17. Pulsanti (Buttons) * 18. Toolbar (gruppoToolbar) * 19. Pulsantiera Moduli (App, App2, noModulo) * 20. Colori Box Home (product colors - LEGACY, vedi nota in-sezione) * 21. Dimensioni predefinite input / textarea / select * 22. Crystal Reports (LEGACY) * 23. Calendario (23b SK Calendar Kit) * 24. Manichino DPI (LEGACY) * 25. Home Box / Grid * 26. Loader, Spinner & Overlay * 27. Varie (PathRoot, DUVRI, multiselect, ecc.) * 28. Login * 29. Media Queries (mobile <=480, tablet 481-1023, desktop >=1024) * 30. Badge Rischio DVR * 31. SK Grid Kit (dhtmlx v9 Grid engine) * 31.8 SK Page Kit (layout home + pagine normali) * 32. SK Card Kit (schede dettaglio / form read-only) * 33. SK Search Kit (pagine di ricerca avanzata) * 33.11 SK Layout System (griglia responsiva colonne flex) * 33.12 SK Responsive Inline Grid (collassa grid-template-columns inline) * 34. SK View Kit (componenti per pagine di visualizzazione) * 35. SK Page Toolbar + SK Button System * 36. SK Home Dashboard Kit v6 * 37. SK Widget Kit * 38. SK SVG Chart Kit v3 * 42. SK Scheduler Kit v4 * 51. Theme Management (Dark/Light via data-theme) * 52. SK Translation Kit (anti-glitch cloaking) * 53. SK MOBILE KIT (drawer, card list, hide charts, bottom sheet) [v57] * * ============================================================================ */ /* ========================================================================== 1. CUSTOM PROPERTIES ========================================================================== */ :root { /* ── Brand ── */ --brand-primary: #284473; --brand-primary-light: #3B5A9A; --brand-primary-dark: #1A2F54; --brand-primary-hover: #2050A0; --brand-accent: #ff9600; --brand-accent-hover: #FFA726; --brand-accent-dark: #F57C00; --brand-accent-light: #FFB74D; --brand-danger: #B30000; --brand-danger-hover: #D90000; --brand-bg: #f5f5f5; --brand-white: #ffffff; /* ── Buttons (product tiles) ── */ --buttonTextColor: black; --buttonHoverTextColor: white; --buttonHoverBackgroundColor: #ff9600; --buttonBackgroundColor: #b0c4de; /* ── Product text ── */ --productTextColor: #284473; --productTextWeight: 600; /* ── Form ── */ --input-border: #7E929E; /* v49 A11Y: 3.23:1 su bianco, WCAG 1.4.11 */ --input-border-top: #6B7B8A; /* v49 A11Y: coerente con input-border */ --input-focus: #284473; --input-radius: 6px; /* ── Validation ── */ --valid-color: #10B981; --invalid-color: #EF4444; /* ── Typography ── */ --font-base: 'Inter', 'Segoe UI', Arial, sans-serif; --font-brand: 'Good Times', Arial, sans-serif; --font-size-base: 13px; --font-size-sm: 11px; --font-size-xs: 11px; /* v49 A11Y: minimum leggibile alzato da 10px */ --font-size-icon: 16px; /* ── Toolbar / Tabs ── */ --toolbar-bg: #dbeafd; --toolbar-border: #a8bed2; --tab-bg: #d8eaff; --tab-border: #a4bed4; --tab-active-border: #ff9600; /* ── Sfondi ── */ --color-bg-main: #F8FAFC; --color-bg-secondary: #EFF6FF; --color-bg-white: #ffffff; --color-bg-light: #E1EFFF; --color-bg-hover: #F0F9FF; --color-bg-toolbar: #EBF5FF; --color-bg-card: #FFFFFF; /* ── Gradienti ── */ --gradient-primary: linear-gradient(135deg, #284473 0%, #3B5A9A 100%); --gradient-accent: linear-gradient(135deg, #ff9600 0%, #FFA726 100%); --gradient-header: #284473; --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); /* ── Testo ── */ --color-text-primary: #1E293B; --color-text-secondary: #64748B; --color-text-light: #6B7280; /* v49 A11Y: 4.83:1 su bianco, era #94A3B8 (2.56:1) */ --color-text-dark: #0F172A; /* ── Stato ── */ --color-success: #10B981; --color-success-light: #D1FAE5; --color-warning: #F59E0B; --color-warning-light: #FEF3C7; --color-error: #EF4444; --color-error-light: #FEE2E2; --color-info: #3B82F6; --color-info-light: #DBEAFE; --color-icon-bg: #EEF2F9; /* ── Stato testo-safe (WCAG AA 4.5:1 su bianco) ── Usare per testo piccolo (<18px) su sfondo bianco. Per icone >=18px, badge, grafici, bordi: usare le vivaci sopra. */ --color-accent-text: #A86000; --color-accent-safe: #B54D00; /* v54: 5.22:1 su bianco, 4.65:1 su icon-bg */ --color-success-text: #047A56; --color-warning-text: #A26800; --color-error-text: #DC2626; --color-info-text: #2563EB; /* ── Bordi ── */ --color-border: #E2E8F0; --color-border-dark: #CBD5E1; --color-border-light: #F1F5F9; /* ── Ombre ── */ --shadow: rgba(0, 0, 0, 0.08); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); --shadow-accent: 0 4px 12px rgba(255, 150, 0, 0.25); --shadow-primary: 0 4px 12px rgba(40, 68, 115, 0.25); --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.12); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* ── Spacing ── */ --spacing-xs: 4px; --spacing-sm: 10px; --spacing-md: 20px; --spacing-lg: 30px; /* ── Border radius ── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 999px; /* ── Chart palette (usata dal SVG Chart Kit, sez. 38) ── */ --chart-1: #284473; /* brand primary */ --chart-2: #ff9600; /* brand accent */ --chart-3: #10B981; /* success green */ --chart-4: #EF4444; /* error red */ --chart-5: #3B82F6; /* info blue */ --chart-6: #F59E0B; /* warning yellow */ --chart-7: #8B5CF6; /* violet */ /* ── Chart palette SHADE (v57) ── Tinte chiare/scure per stacked, grouped, hover, focus states. Usate dal SVG Chart Kit al posto di hex inline. */ --chart-1-light: #3B5A9A; --chart-1-dark: #1A2F54; --chart-2-light: #FFA726; --chart-2-dark: #F57C00; --chart-3-light: #34D399; --chart-3-dark: #059669; --chart-4-light: #F87171; --chart-4-dark: #DC2626; --chart-5-light: #60A5FA; --chart-5-dark: #2563EB; --chart-6-light: #FBBF24; --chart-6-dark: #D97706; --chart-7-light: #A78BFA; --chart-7-dark: #7C3AED; /* ── Stato SHADE (v57) ── *-dark: bordi, active state, hover su pulsante colorato (WCAG 4.5:1 su bianco) *-tint: sfondo tenue per alert, notice, chip */ --color-success-dark: #059669; --color-success-tint: #ECFDF5; --color-warning-dark: #D97706; --color-warning-tint: #FFFBEB; --color-error-dark: #DC2626; --color-error-tint: #FEF2F2; --color-info-dark: #2563EB; --color-info-tint: #EFF6FF; /* ── Brand danger SHADE (v57) ── */ --brand-danger-light: #F87171; --brand-danger-tint: #FEF2F2; /* ── Button neutral shade (v57) ── Gradient intermedi per hover/active di sk-btn base (senza variante). */ --btn-hover-bg-start: #E8EFF8; --btn-hover-bg-end: #DCE6F2; --btn-active-bg-start: #D0DCED; --btn-active-bg-end: #C4D5E8; /* ── Alpirisch stati (v57) ── Colori per toolbar stati AlPiRisCh (sez. 35.2). WCAG AA verificato: - nuovo (rosso) -> testo bianco 4.52:1 - completato (arancio) -> testo bianco 4.63:1 - valutato (verde) -> testo bianco 5.61:1 - archiviato (blu) -> testo bianco 7.25:1 */ --alpirisch-nuovo-bg: #F44336; --alpirisch-nuovo-border: #C62828; --alpirisch-nuovo-hover-bg: #E53935; --alpirisch-nuovo-hover-border: #B71C1C; --alpirisch-completato-bg: #FF8C00; --alpirisch-completato-border: #E65100; --alpirisch-completato-hover-bg: #FB8C00; --alpirisch-completato-hover-border: #EF6C00; --alpirisch-valutato-bg: #2E7D32; --alpirisch-valutato-border: #1B5E20; --alpirisch-valutato-hover-bg: #388E3C; --alpirisch-valutato-hover-border: #2E7D32; --alpirisch-archiviato-bg: #1565C0; --alpirisch-archiviato-border: #0D47A1; --alpirisch-archiviato-hover-bg: #1976D2; --alpirisch-archiviato-hover-border: #0D47A1; /* ── Transitions ── */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 250ms ease-out; /* ── Layout heights (singola fonte di verita) ── */ --header-h: 40px; --hr-bar-h: 34px; --tab-bar-h: 34px; --info-bar-h: 28px; --toolbar-h: 32px; --sidebar-w: 200px; /* ── Mobile layout (v57) ── Valori usati dalla sezione 53 SK Mobile Kit. */ --sk-mobile-breakpoint: 768px; --sk-mobile-drawer-w: 280px; --sk-mobile-bottom-nav-h: 56px; --sk-mobile-touch-target: 44px; --sk-mobile-fab-size: 48px; /* ── Offset contenuto ── body padding-top = 0. Ogni contenitore gestisce il proprio margin-top. v48: menuOrizzontale (default) sta sotto #header + headerHR; menuOrizzontaleVisita aggiunge headerVisita Stack visita = HR(34) + infoBar(28) + tab(34) + toolbar(32) = 128px */ --content-offset-hr: var(--hr-bar-h); --content-offset-base: var(--header-h); --content-offset-visita: calc(var(--header-h) + var(--stack-visita)); --stack-visita: calc(var(--hr-bar-h) + var(--info-bar-h) + var(--tab-bar-h) + var(--toolbar-h)); } /* ========================================================================== 2. FONT-FACE ========================================================================== */ @font-face { font-family: 'Good Times'; src: url('../css/good times rg-webfont.eot'); src: url('../css/good times rg-webfont.eot?#iefix') format('embedded-opentype'), url('../css/good times rg-webfont.woff2') format('woff2'), url('../css/good times rg-webfont.woff') format('woff'), url('../css/good times rg-webfont.ttf') format('truetype'), url('../css/good times rg-webfont.svg') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../css/Inter-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../css/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } /* ========================================================================== 3. RESET & BASE ========================================================================== */ html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background-color: var(--brand-bg); margin: 0; color: var(--color-text-primary); font-family: var(--font-base); font-size: var(--font-size-base); height: 100%; font-feature-settings: "liga" 1, "kern" 1; } body { padding-top: 0; } body *, td, input, select, textarea, button, a { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } td { font-size: var(--font-size-sm); } /* ========================================================================== 4. SCROLLBAR ========================================================================== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track-piece { background-color: var(--color-bg-white); } ::-webkit-scrollbar-thumb { background-color: var(--color-border-dark); border-radius: 5px; border: 2px solid var(--color-bg-white); } ::-webkit-scrollbar-thumb:hover { background-color: var(--brand-primary); } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { background-color: var(--color-bg-white); border: 1px solid var(--color-border); } /* ========================================================================== 5. TIPOGRAFIA & UTILITÀ ========================================================================== */ .bold { font-weight: bold; } .lbl { font-size: var(--font-size-base); color: var(--color-text-secondary); font-weight: bold; } .lbl2 { font-size: var(--font-size-sm); color: var(--color-text-primary); } .Logotitolo { font-size: 25px; color: var(--brand-primary); text-align: left; font-weight: bold; } .title1 { font-size: 14px; color: var(--color-text-primary); font-weight: bold; padding: 10px 0; } .title2 { font-size: 14px; color: var(--brand-accent-dark); font-weight: 600; text-align: left; } .errore { font-size: var(--font-size-base); color: var(--color-error-text); font-weight: bold; padding: 10px 0; } .conferma { font-size: var(--font-size-base); color: var(--color-success-text); font-weight: bold; padding: 10px 0; } /* ========================================================================== 6. LINK ========================================================================== */ a.lk1:link, a.lk1:visited { font-size: var(--font-size-sm); color: var(--color-info-text); cursor: pointer; text-decoration: underline; transition: color var(--transition-fast); } a.lk1:hover { color: var(--brand-accent); } a.lk2:link, a.lk2:visited { font-size: var(--font-size-sm); color: var(--color-info-text); cursor: pointer; text-decoration: none; transition: color var(--transition-fast), font-weight var(--transition-fast), text-decoration-color var(--transition-fast); } a.lk2:hover { color: var(--brand-accent); font-weight: bold; text-decoration: underline; } a.lk3:link, a.lk3:visited { font-size: var(--font-size-xs); color: var(--color-info-text); cursor: pointer; text-decoration: none; transition: color var(--transition-fast); } a.lk3:hover { color: var(--brand-accent); text-decoration: underline; } a.lk4:link, a.lk4:visited { font-size: 12px; color: var(--color-info-text); cursor: pointer; text-decoration: none; transition: color var(--transition-fast); } a.lk4:hover { font-size: 12px; color: var(--brand-accent); cursor: pointer; text-decoration: none; } a.lk5:link, a.lk5:visited, a.lk5:hover { font-size: 12px; color: var(--brand-white); cursor: pointer; text-decoration: none; } /* ========================================================================== 7. LAYOUT (Header, Footer, Floating, Sidebar) ========================================================================== Z-INDEX MAP (v48: menuOrizzontale separato da menuOrizzontaleVisita) ───────────────────────────── #header : 1000 spinner / overlay : 1100 #mainMenu : 1001 Sidebar : 998 headerHRSticky : 997 headerVisita : 996 menuOrizzontale : 995 menuOrizzontaleVisita : 995 toolbarVisita : 994 #navigation : 990 floatingBar : 980 #ui-datepicker-div: 10050 (sopra .dhx_header-fixed-cols 999, sotto overlayModal 15000) ========================================================================== */ /* jQuery UI appende il calendario a body e gli mette z-index inline = input+1 (~1). Le colonne freeze della SkGrid sono .dhx_header-fixed-cols a 999; l'header sticky e' .dhx_header-wrapper a 21. 10050 sta sopra entrambi e sopra #header/spinner, sotto #overlayModal (CMCNP-2060, ch=hr.8.58). */ #ui-datepicker-div { z-index: 10050 !important; } #header { top: 0; left: 0; width: 100%; height: var(--header-h); position: fixed; z-index: 1000; box-shadow: var(--shadow-md); background: var(--gradient-header); box-sizing: border-box; overflow: hidden; } /* Struttura table interna trasparente: il gradient di #header passa attraverso. Solo td SENZA classe (riempitivi). Le td con classe (Logoinside, toolbarOff, ecc.) mantengono i propri colori tramite le regole specifiche. */ #header table { background: transparent; } #header td:not([class]) { background: transparent; } #mainMenu { margin: auto; z-index: 1001; white-space: nowrap; overflow: hidden; max-height: var(--header-h); } #floatingBar { top: 60px; left: 5px; position: fixed; z-index: 980; width: var(--sidebar-w); height: 85%; border: 1px solid var(--color-border); padding: 4px; border-radius: var(--radius-md); background: var(--color-bg-white); box-shadow: var(--shadow-sm); box-sizing: border-box; } .sidebar { box-sizing: border-box; overflow-y: auto; padding: 12px; position: absolute; width: 100%; } .rigaOn { background-color: var(--color-bg-hover); transition: background-color var(--transition-fast); } .rigaOff { background-color: var(--brand-white); transition: background-color var(--transition-fast); } /* ── 7b. SK-PAGE-WRAPPER ── */ #sk-page-wrapper { width: 98%; margin-inline: auto; box-sizing: border-box; } /* ── 7c. SK-FAV-GRID-CONTAINER ── */ .sk-fav-grid-container { width: 100%; max-width: 600px; margin: 0 auto; } .sk-fav-grid-container > div { width: 100%; max-width: 550px; margin: 0 auto; } /* ========================================================================== 8. DIV MAIN INTERNO ========================================================================== body padding-top = 0. Ogni contenitore dichiara il proprio margin-top. Base → div_MainInternoRidotto → --content-offset-base (40px) Dett. → div_MainInternoRidottoHR → --content-offset-hr (80px) Visita → div_MainInternoRidottoMenuOrizzontale → --content-offset-visita (168px) Varianti _Expanded: senza sidebar (margin-left: 4px). ========================================================================== */ .div_MainInternoRidotto { margin-left: calc(var(--sidebar-w) + 4px); margin-right: 4px; margin-top: var(--content-offset-base); box-sizing: border-box; } .div_MainInternoRidotto_Expanded { margin-left: 4px; margin-right: 4px; margin-top: var(--content-offset-base); box-sizing: border-box; } .div_MainInternoRidottoHR { margin-left: calc(var(--sidebar-w) + 4px); margin-right: 4px; margin-top: var(--content-offset-hr); box-sizing: border-box; } .div_MainInternoRidottoHR_Expanded { margin-left: 4px; margin-right: 4px; margin-top: var(--content-offset-hr); box-sizing: border-box; } .div_MainInternoRidottoMenuOrizzontale { margin-left: calc(var(--sidebar-w) + 4px); margin-right: 4px; margin-top: var(--content-offset-visita); box-sizing: border-box; } .TitoloHome { display: flex; align-items: center; width: 100%; padding-top: 10px; } /* ── Header Risorse Umane ── */ .headerHRSticky { position: fixed; font-size: 13px; padding: 3px 10px; top: var(--header-h); left: var(--sidebar-w); right: 0; height: var(--hr-bar-h); z-index: 997; box-sizing: border-box; background: var(--color-bg-white); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal); border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } /* ── v48: menuOrizzontale separato da menuOrizzontaleVisita ── menuOrizzontale: sotto header + headerHR (Infortuni, Incidenti, ecc.) menuOrizzontaleVisita: sotto header + headerHR + headerVisita (solo pagine visita medica) Vecchio v47: un'unica .menuOrizzontale posizionata per lo stack visita, rompeva gli altri moduli */ .headerVisita { position: fixed; font-size: 11px; padding: 0 10px; top: calc(var(--header-h) + var(--hr-bar-h)); left: var(--sidebar-w); right: 0; height: var(--info-bar-h); z-index: 996; box-sizing: border-box; background: var(--color-bg-white); border: 1px solid var(--color-border); border-top: none; transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal); display: flex; align-items: center; gap: 10px; } /* menuOrizzontale: posizione DEFAULT, sotto header + headerHR. Usato da: Infortuni, Incidenti, Criticita Safety, e tutti i moduli che hanno headerHRSticky ma NON headerVisita sopra il menu tab. */ .menuOrizzontale { position: fixed; top: calc(var(--header-h) + var(--hr-bar-h)); left: var(--sidebar-w); right: 0; height: var(--tab-bar-h); box-sizing: border-box; z-index: 995; background: var(--color-bg-white); overflow: visible; } /* menuOrizzontaleVisita: posizione stack visita. Usato SOLO dalle pagine della visita medica che hanno headerHRSticky + headerVisita sopra il menu tab. */ .menuOrizzontaleVisita { position: fixed; top: calc(var(--header-h) + var(--hr-bar-h) + var(--info-bar-h)); left: var(--sidebar-w); right: 0; height: var(--tab-bar-h); box-sizing: border-box; z-index: 995; background: var(--color-bg-white); overflow: visible; } .toolbarVisita { position: fixed; font-size: 13px; top: calc(var(--header-h) + var(--hr-bar-h) + var(--info-bar-h) + var(--tab-bar-h)); left: var(--sidebar-w); right: 10px; height: var(--toolbar-h); z-index: 994; background: var(--color-bg-white); border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); padding-right: 10px; box-sizing: border-box; } /* ── 8b. Padding interno ── */ .div_MainInternoRidotto, .div_MainInternoRidotto_Expanded, .div_MainInternoRidottoHR, .div_MainInternoRidottoHR_Expanded, .div_MainInternoRidottoVisita { padding-top: var(--spacing-sm); } /* ── 8c. SK-SCHEDA-TOOLBAR ── Barra sticky per le pagine di dettaglio/scheda. Staccata dall'header di --sk-toolbar-gap per differenziarla visivamente dall'headerHRSticky (che è flush). ========================================================================== */ .sk-scheda-toolbar { --sk-toolbar-gap: 6px; position: fixed; top: calc(var(--header-h) + var(--sk-toolbar-gap)); left: var(--sidebar-w); right: 0; height: var(--hr-bar-h); z-index: 997; box-sizing: border-box; background: var(--color-bg-white); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; align-items: center; padding: 0 10px; gap: 8px; transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), gap var(--transition-normal); } .sk-scheda-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .sk-scheda-toolbar select { width: auto; min-width: 180px; max-width: 320px; height: 30px; flex-shrink: 0; } /* Il contenuto sotto la toolbar deve compensare il gap extra */ .sk-scheda-toolbar + .div_MainInternoRidottoHR, .sk-scheda-toolbar + .div_MainInternoRidottoHR_Expanded { margin-top: calc(var(--content-offset-hr) + 6px); } /* ========================================================================== 9. LOGO & BRAND ========================================================================== */ .Logoinside { font-family: var(--font-brand); font-size: 25px; color: var(--brand-white); text-align: center; cursor: pointer; background-color: var(--brand-primary); min-width: var(--sidebar-w); width: var(--sidebar-w); line-height: var(--header-h); box-sizing: border-box; transition: background-color var(--transition-normal), transform var(--transition-normal); } .Logoinside:hover { background-color: var(--brand-accent); transform: scale(1.02); } .Logomenu { font-family: var(--font-brand); font-size: 12px; text-align: center; cursor: pointer; } /* ========================================================================== 10. MENU PRINCIPALE (Toolbar on/off) ========================================================================== */ .toolbarOff, .toolbarOn { text-decoration: none; font-family: var(--font-base); font-size: var(--font-size-base); font-weight: 500; text-align: center; cursor: pointer; line-height: var(--header-h); transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } .toolbarOff { color: var(--brand-white); background-color: var(--brand-primary); } .toolbarOff:hover { color: var(--brand-white); background-color: var(--brand-accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .toolbarOn { color: var(--color-text-dark); background-color: var(--brand-bg); font-weight: 700; border-bottom: 3px solid var(--brand-accent); } /* ========================================================================== 11. MENU FONTAWESOME (logout, cambiapwd, menuprincipale, tornamodulo) ========================================================================== */ .logout, .cambiapwd, .menuprincipale, .tornamodulo, a.logout:link, a.logout:visited, a.cambiapwd:link, a.cambiapwd:visited, a.menuprincipale:link, a.menuprincipale:visited, a.tornamodulo:link, a.tornamodulo:visited { text-align: center; color: var(--brand-white); padding-left: 1px; font-weight: bold; font-size: var(--font-size-icon); cursor: pointer; font-family: 'FontAwesome'; text-decoration: none; transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast); } .logout, a.logout:link, a.logout:visited { background-color: var(--brand-danger); } .logout:hover { background-color: var(--brand-danger-hover); transform: scale(1.05); } .cambiapwd, a.cambiapwd:link, a.cambiapwd:visited { background-color: var(--brand-accent-dark); } .cambiapwd:hover { background-color: var(--brand-accent); transform: scale(1.05); } .menuprincipale, a.menuprincipale:link, a.menuprincipale:visited { background-color: var(--brand-primary); } .menuprincipale:hover { background-color: var(--brand-accent); transform: scale(1.05); } .tornamodulo, a.tornamodulo:link, a.tornamodulo:visited { background-color: var(--brand-accent-dark); } .tornamodulo:hover { background-color: var(--brand-accent); transform: scale(1.05); } /* ── 11b. NO TEXT SELECTION on navigation ── Impedisce la selezione testuale sugli elementi interattivi di header, sidebar e tab, evitando selezioni accidentali al click. */ #header, #mainMenu, .toolbarOff, .toolbarOn, .Logoinside, .Logomenu, .hamburger-btn, .logout, .cambiapwd, .menuprincipale, .tornamodulo, .div_MenuLeftSideBar_Principale, .sk-sidebar, #navigationVertical, #navigationVertical ul li a, #navigation ul li a { -webkit-user-select: none; user-select: none; } /* ========================================================================== 12. TABELLE & INTESTAZIONI ========================================================================== */ .tabHeader1 { border-bottom: 1px solid var(--color-border-dark); font-weight: bold; font-size: var(--font-size-sm); color: var(--brand-accent-dark); } .tabHeader2 { border-bottom: 1px solid var(--color-border-dark); font-weight: bold; font-size: var(--font-size-sm); color: var(--color-text-primary); } .tabRiga1 { border-bottom: 1px solid var(--color-border-dark); font-size: var(--font-size-sm); } .tabRiga2 { border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); } .tabRigaEnd { border-bottom: 1px solid var(--color-text-primary); } .Table_TD_AlignTop td { vertical-align: top; } /* ========================================================================== 13. MENU TAB ORIZZONTALE (#navigation) ========================================================================== Design unificato CANOPO 2026: barra contenitore, tab flat con underline, stati completamento via colore underline. Struttura HTML legacy (server-rendered): #navigation > ul > li > a[.current] [.stato-ok|ko|warn] Struttura dopo enhancement JS (jqueryslidemenu.js): #navigation.sk-nav-enhanced .sk-nav-wrap .sk-nav-arrow--left .sk-nav-scroll > ul > li > a .sk-nav-arrow--right .sk-nav-more .sk-nav-dropdown Senza JS i tab wrappano normalmente. Con JS scrollano orizzontalmente. ========================================================================== */ /* == 13.1 Container == Barra bianca con bordo e ombra. Contiene tutti i tab. Kit XSLT: skTabBar (Common/xslt/sk_tab_bar.xslt) emette questo nodo. */ #navigation { position: relative; z-index: 990; background: var(--color-bg-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); min-height: 38px; margin-bottom: 0; padding: 0; } /* == 13.2 Lista tab == Flex row. Senza JS wrappa. Con JS il nowrap viene forzato inline. */ #navigation ul { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0; padding: 0; list-style: none; gap: 0; } #navigation ul li { text-align: center; margin: 0; padding: 0; border: none; flex-shrink: 0; } /* == 13.3 Tab item == Flat, senza bordi individuali. Underline via ::after pseudo-element. */ #navigation ul li a { position: relative; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; white-space: nowrap; cursor: pointer; user-select: none; color: var(--color-text-secondary); font-size: var(--font-size-base); font-weight: 500; text-decoration: none; background: transparent; border: none; border-radius: 0; box-shadow: none; transition: color var(--transition-fast), background var(--transition-fast); } /* == 13.4 Underline pseudo-element == Barra sottile in basso al tab. Trasparente di default. */ #navigation ul li a::after { content: ""; position: absolute; bottom: 0; left: 8px; right: 8px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background var(--transition-normal); } /* == 13.5 Tab hover == Sfondo chiaro + anteprima underline grigia. Nessun lift/translateY. */ #navigation ul li a:hover { color: var(--brand-primary); background: var(--color-bg-hover); border: none; box-shadow: none; transform: none; } #navigation ul li a:hover::after { background: var(--color-border-dark); } /* == 13.6 Tab attivo (.current) == Testo primary bold, underline arancione. */ #navigation ul li a.current { z-index: 1; color: var(--brand-primary); font-weight: 600; background: transparent; border: none; box-shadow: none; } #navigation ul li a.current::after { background: var(--brand-accent) !important; left: 4px; right: 4px; } #navigation ul li a.current:hover { background: transparent; } /* == 13.7 Icone == Grigie di default, arancioni su hover e active. Scale leggero. */ #navigation ul li a i { font-size: 13px; color: var(--color-text-light); flex-shrink: 0; margin-right: 0; transition: color var(--transition-fast), transform var(--transition-fast); } #navigation ul li a:hover i, #navigation ul li a.current i { color: var(--brand-accent); } #navigation ul li a.current i { transform: scale(1.05); } /* == 13.8 Stati completamento (stato-ok / stato-ko / stato-warn) == v56: Pattern DOT. Il pallino colorato (::before) indica lo stato. La barra sotto (::after) indica SOLO la selezione (arancione). Questo evita che la selezione nasconda lo stato del tab. - Tab non selezionato con stato: DOT colorato, nessuna barra - Tab selezionato con stato: DOT colorato + barra arancione - Il DOT e' sempre visibile, indipendente dalla selezione */ /* == 13.8.1 DOT base (::before) == */ #navigation ul li a.stato-ok::before, #navigation ul li a.stato-ko::before, #navigation ul li a.stato-warn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; margin-right: 2px; transition: transform var(--transition-fast); } /* == 13.8.2 DOT colori per stato == */ #navigation ul li a.stato-ok::before { background: var(--color-success); } #navigation ul li a.stato-ko::before { background: var(--color-error); } #navigation ul li a.stato-warn::before { background: var(--color-warning); } /* == 13.8.3 DOT hover: leggero scale == */ #navigation ul li a.stato-ok:hover::before, #navigation ul li a.stato-ko:hover::before, #navigation ul li a.stato-warn:hover::before { transform: scale(1.15); } /* == 13.8.4 Tab selezionato + stato: DOT sempre visibile == La barra arancione viene da .current::after (gia' definita in 13.6). Non servono override: il DOT e' su ::before, la barra su ::after. */ /* == 13.8.5 Colore testo (invariato da v55) == */ #navigation ul li a.stato-ok { color: var(--color-text-primary); } #navigation ul li a.stato-ko { color: var(--color-text-primary); } #navigation ul li a.stato-warn { color: var(--color-text-primary); } /* == 13.9 Responsive == Su mobile: tab piu' compatti. */ @media (max-width: 768px) { #navigation ul li a { padding: 0 12px; height: 34px; font-size: var(--font-size-sm); } #navigation ul li a i { font-size: 12px; } } /* == 13.10 Posizionamento kit-menu di terzo livello fuori div_MainInternoRidotto == Il fragment XSLT Sostanza_menu.xslt (Aldebaran, modulo Sostanze Chimiche) renderizza il kit-tabbar #navigation come sibling top-level del body, PRIMA di .div_MainInternoRidotto (per evitare il doppio margin-top citato nel commento del fragment). Senza un margin-left/top esplicito #navigation finisce coperto da #header (z-index 1000, position:fixed) e da .div_MenuLeftSideBar_Principale (z-index 998, position:fixed): la tabbar c'e' nel DOM ma e' invisibile. 1) Allineamento kit tabbar: margin gemello di .div_MainInternoRidotto + 4px di gap dall'header in modo che il box-shadow respiri sotto la barra. 2) Reset del margin-top di .div_MainInternoRidotto quando preceduto dal kit-tabbar: l'offset dell'header e' gia' assorbito dalla tabbar stessa, altrimenti si accumulerebbero ~80px di vuoto sopra il main content. */ nav[aria-label="Menu kit sostanze"] > #navigation, nav[aria-label="Menu kit ricerca sostanze"] > #navigation { margin-left: calc(var(--sidebar-w) + 4px); margin-right: 4px; margin-top: calc(var(--content-offset-base) + 10px); } nav[aria-label="Menu kit sostanze"] ~ .div_MainInternoRidotto, nav[aria-label="Menu kit ricerca sostanze"] ~ .div_MainInternoRidotto { margin-top: 4px; } /* ========================================================================== 13b. SK NAVIGATION OVERFLOW KIT ========================================================================== Elementi funzionali creati dal JS (jqueryslidemenu.js / SkTabKit): frecce scroll, pulsante "more", dropdown dei tab nascosti. Questi elementi esistono SOLO quando il JS e' attivo. Classi comuni per upgrade() e create(): .sk-nav-wrap flex wrapper .sk-nav-scroll scroll container .sk-nav-arrow frecce laterali .sk-nav-more pulsante "..." .sk-nav-dropdown dropdown dei tab nascosti Classi specifiche per create() (componente nuovo con pannelli): .sk-tab__item tab item (equivalente di ul li a nel legacy) .sk-tab__dot dot stato .sk-tab__badge badge numerico .sk-tab__panels wrapper pannelli .sk-tab__panel singolo pannello ========================================================================== */ /* == 13b.1 Wrapper flex == */ .sk-nav-wrap { display: flex; align-items: stretch; position: relative; } /* == 13b.2 Scroll container == Contiene la