/* |-------------------------------------------------------------------------- | MarqoFlow - Filament UI |-------------------------------------------------------------------------- | | Dark mode: | mantiene integralmente la palette Filament/MarqoFlow originale. | | Light mode: | usa una variante del verde brand con contrasto maggiore per testi, | icone, stati attivi e focus. | */ /* ============================================================ PULSANTI PRIMARY Il verde neon rimane il colore forte del brand. ============================================================ */ .fi-btn:not(.fi-outlined).fi-color-primary { background-color: #aaff00 !important; color: #000000 !important; --bg: #aaff00 !important; --hover-bg: #99e600 !important; --text: #000000 !important; --hover-text: #000000 !important; } .fi-btn:not(.fi-outlined).fi-color-primary .fi-icon { color: #000000 !important; } /* ============================================================ LIGHT MODE Applicato esclusivamente quando NON è dark. ============================================================ */ html:not(.dark) { /* * Scala primary dedicata alla modalità chiara. * * 50-200 = fondi/stati delicati * 500-700 = testi, icone e focus * 800-950 = contrasto elevato */ --primary-50: #f1f8e7; --primary-100: #e3f1ce; --primary-200: #c7e39d; --primary-300: #a6d363; --primary-400: #7caf2e; --primary-500: #5d8f13; --primary-600: #47750d; --primary-700: #395d0d; --primary-800: #304b10; --primary-900: #293f11; --primary-950: #142305; } /* ============================================================ SFONDO GENERALE LIGHT ============================================================ */ html:not(.dark) .fi-body { background-color: #f4f6f8; } html:not(.dark) .fi-main { background-color: #f4f6f8; } /* ============================================================ SIDEBAR LIGHT ============================================================ */ html:not(.dark) .fi-sidebar { background-color: #fafbfc; border-right-color: #e2e7ec; } /* ============================================================ NAVIGAZIONE ATTIVA LIGHT ============================================================ */ html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: #edf6dc; } html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #395d0d; } html:not(.dark) .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #47750d; } /* ============================================================ LINK / AZIONI PRIMARY LIGHT ============================================================ */ html:not(.dark) .fi-link.fi-color-primary, html:not(.dark) .fi-ac-link-action.fi-color-primary { color: #47750d; } /* ============================================================ FOCUS LIGHT ============================================================ */ html:not(.dark) :focus-visible { --tw-ring-color: #5d8f13; } /* ============================================================ DARK MODE Nessuna sostituzione dei token primary. I colori originali MarqoFlow restano quelli definiti dal PanelProvider. ============================================================ */ /* ============================================================ MARQOFLOW - KPI SEQUENCE V7 8 KPI indipendenti, ingresso progressivo da sinistra. ============================================================ */ @keyframes marqoflow-kpi-enter { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: translateX(0); } } /* * Nessuna animazione sul widget/contenitore complessivo. * Si muovono esclusivamente gli Stat marcati da PHP. */ .fi-wi-stats-overview, .fi-wi-stats-overview > *, .fi-wi-widget.fi-wi-stats-overview { animation: none !important; transform: none; } /* Ogni singola card */ .fi-wi-stats-overview-stat.mf-kpi-seq { opacity: 0; animation-name: marqoflow-kpi-enter !important; animation-duration: 450ms !important; animation-timing-function: cubic-bezier(.16, .84, .32, 1) !important; animation-fill-mode: forwards !important; will-change: opacity, transform; } /* 1 — Cantieri attivi */ .fi-wi-stats-overview-stat.mf-kpi-1 { animation-delay: 0ms !important; } /* 2 — Preventivato */ .fi-wi-stats-overview-stat.mf-kpi-2 { animation-delay: 180ms !important; } /* 3 — Speso reale */ .fi-wi-stats-overview-stat.mf-kpi-3 { animation-delay: 360ms !important; } /* 4 — Margine */ .fi-wi-stats-overview-stat.mf-kpi-4 { animation-delay: 540ms !important; } /* 5 — Da incassare */ .fi-wi-stats-overview-stat.mf-kpi-5 { animation-delay: 720ms !important; } /* 6 — Tranche in ritardo */ .fi-wi-stats-overview-stat.mf-kpi-6 { animation-delay: 900ms !important; } /* 7 — Costo manodopera */ .fi-wi-stats-overview-stat.mf-kpi-7 { animation-delay: 1080ms !important; } /* 8 — Ore lavorate */ .fi-wi-stats-overview-stat.mf-kpi-8 { animation-delay: 1260ms !important; } /* Hover leggero dopo l'ingresso */ .fi-wi-stats-overview-stat.mf-kpi-seq { transition: transform 160ms ease, box-shadow 160ms ease; } @media (hover: hover) { .fi-wi-stats-overview-stat.mf-kpi-seq:hover { transform: translateY(-2px); } } /* Accessibilità */ @media (prefers-reduced-motion: reduce) { .fi-wi-stats-overview-stat.mf-kpi-seq { opacity: 1 !important; animation: none !important; transform: none !important; } }