/* * features.css * ----------------------------------------------------------------------------- * Layer di personalizzazioni del tema Valeria — cliente La Piuma Bianca. * * Introdotto il 2026-07-01 per centralizzare gli override cromatici e le * "features" cliente senza toccare i template PHP. Ogni futuro allineamento * di zone/parti del gestionale al colore di brand va aggiunto qui sotto, * raggruppato per zona con commento === Nome zona ===. * * Caricato DOPO valeria-elegant.css (vedi App/EnqueueScripts/EnqueueScripts.php). * ----------------------------------------------------------------------------- */ /* ============================================================================ * TOKEN DI BRAND — variabili globali riusabili * ============================================================================ */ :root { --ve-primary: #219095; /* Teal profondo — colore di brand cliente (rev. 2026-07-01) */ --ve-primary-dark: #1B7378; /* Hover / pressed (~15% più scuro) */ --ve-primary-soft: rgba(33, 144, 149, 0.15); /* Fondino / highlight leggero */ --ve-primary-tint: rgba(33, 144, 149, 0.22); /* Ombre / bordi tinted */ } /* ============================================================================ * === Welcome card homepage — swap oro (#c8a96a) → teal (--ve-primary) * ============================================================================ * NB: il CSS della welcome card è INLINE dentro custom-templates/homepage.php * (righe 54-197). Vince sempre in cascata perché appare nel body dopo il . * Per questo qui usiamo !important — è l'unica strada senza toccare il PHP. */ .lpb-welcome { box-shadow: 0 1px 0 var(--ve-primary-tint), 0 30px 60px -25px rgba(60, 45, 30, 0.18), 0 8px 18px -10px rgba(60, 45, 30, 0.10) !important; } .lpb-welcome::before, .lpb-welcome::after { background: linear-gradient(180deg, transparent, var(--ve-primary), transparent) !important; } .lpb-welcome__greeting-sep { background-color: var(--ve-primary) !important; } .lpb-welcome__claim-dots { color: var(--ve-primary) !important; } .lpb-welcome__lead em::before, .lpb-welcome__lead em::after { color: var(--ve-primary) !important; } /* === Welcome card — piuma FA → piuma brand La Piuma Bianca === * Sostituisce la Font Awesome feather con la vera piuma del brand cliente. * Tecnica: mask-image sull'alpha del PNG trasparente + background-color = * piuma ritagliata dalla forma reale del brand, colorata col brand teal. * La classe .lpb-welcome__feather è un FA in homepage.php (invariato). * L'animazione lpb-feather-float 6s eredita dal CSS inline (già in place). * NOTA: il PNG è 1536×1024 / 2MB — TODO ottimizzare a ~300×200 in futuro. */ .lpb-welcome__feather { display: inline-block !important; width: 3rem !important; /* fissa in rem così non wrappa mai */ aspect-ratio: 3 / 2 !important; /* mantiene il ratio 1536×1024 del PNG */ height: auto !important; font-size: 1em !important; /* reset da 0.85em originale */ color: transparent !important; /* nasconde il glyph FA di fallback */ background-color: var(--ve-primary) !important; vertical-align: middle !important; margin-left: 0.5rem !important; -webkit-mask-image: url('../img/lapiuma-trasparente.png') !important; mask-image: url('../img/lapiuma-trasparente.png') !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .lpb-welcome__feather::before { content: none !important; /* elimina il glyph \f56b di Font Awesome */ } /* ============================================================================ * === Bottoni .btn.btn-info — override globale (Bootstrap/AdminLTE) * ============================================================================ * Usato in: homepage.php (Contatta WhatsApp / Invia mail), search-page*.php, * cliente-tpl.php, contattaci.php, template-parts/search-results-table.php, * valeria-todo.php, adminlte_todolist.php, PaymentButton.php. * Sostituisce il teal Bootstrap #17a2b8 col brand color cliente. */ .btn.btn-info, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle { background-color: var(--ve-primary) !important; border-color: var(--ve-primary) !important; color: #fff !important; } .btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info:not(:disabled):not(.disabled):hover, .btn.btn-info:focus-visible { background-color: var(--ve-primary-dark) !important; border-color: var(--ve-primary-dark) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--ve-primary-soft) !important; } /* ============================================================================ * === Badge homepage — .small-box.bg-info (AdminLTE smartbox) * ============================================================================ * Renderizzati via [adminlte_smartbox] shortcode (inc/shortcodes/templates/ * adminlte_smartbox.php). 7 badge nella homepage: Scadenziario, Segnalazioni, * Ricerca Avanzata, Ultimi aggiornamenti, Nuovi inserimenti, Monitoraggio * Loculi, Elenco Contatti. Bg-info di default → brand color. */ .small-box.bg-info { background-color: var(--ve-primary) !important; color: #fff !important; } .small-box.bg-info > .inner h3, .small-box.bg-info > .inner p, .small-box.bg-info .icon > i { color: #fff !important; } .small-box.bg-info .small-box-footer { background-color: rgba(0, 0, 0, 0.12) !important; color: #fff !important; } .small-box.bg-info .small-box-footer:hover { background-color: rgba(0, 0, 0, 0.22) !important; color: #fff !important; text-decoration: none !important; } /* ============================================================================ * === Redirect variabili blu di valeria-elegant.css → brand teal * ============================================================================ * valeria-elegant.css definisce --ve-accent #3d8ef8 (blu) usato per: border top * card, focus input, Select2 highlight, badge counter, link, ecc. Redirigo qui * al brand primario cosicché TUTTE le zone che referenziano --ve-accent * (borders, focus, hover, badge, breadcrumb) si aggiornino automaticamente. * * --ve-sidebar-active resta INVARIATO: la sidebar è una decisione separata, * fuori scope di questo task. */ :root { --ve-accent: var(--ve-primary); --ve-accent-dark: var(--ve-primary-dark); --ve-input-focus: var(--ve-primary-soft); --ve-sidebar-active: var(--ve-primary); /* voce attiva sidebar, icona, border-left */ } /* ============================================================================ * === Bottoni .btn.btn-primary — Bootstrap default #007bff → brand teal * ============================================================================ * Usato in tutte le liste per: "Aggiungi Contatto/Morticino/Marmista", tutti * i bottoni "Edit" (.btn.btn-primary.btn-sm.edit-row), edit-cimitero/cappella * in single-compagnia, e altri "Aggiungi/Modifica" sparsi. */ .btn.btn-primary, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { background-color: var(--ve-primary) !important; border-color: var(--ve-primary) !important; color: #fff !important; } .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:not(:disabled):not(.disabled):hover, .btn.btn-primary:focus-visible { background-color: var(--ve-primary-dark) !important; border-color: var(--ve-primary-dark) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--ve-primary-soft) !important; } /* ============================================================================ * === Checkbox / Radio nativi — accent-color al brand * ============================================================================ * Colora i checkbox "Soci"/"Non Soci" nelle liste e ogni form control nativo * col teal. Zero prefissi, supportato da Chrome 93+, Safari 15.4+, Firefox 92+. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--ve-primary); } /* ============================================================================ * === Link nell'area contenuti — telefono / email / breadcrumb / inline * ============================================================================ * Colora tutti i link dentro .content-wrapper col brand teal, escludendo * bottoni (.btn), footer degli smartbox (.small-box-footer) e nav-link * (già stilizzati altrove). Non tocca la sidebar né la top-navbar. */ .content-wrapper a:not(.btn):not(.small-box-footer):not(.nav-link) { color: var(--ve-primary); } .content-wrapper a:not(.btn):not(.small-box-footer):not(.nav-link):hover { color: var(--ve-primary-dark); } /* ============================================================================ * === Bootstrap / AdminLTE utility "primary" (blue #007bff) → brand teal * ============================================================================ * Copre TUTTI gli usi di .bg-primary / .text-primary / .border-primary / * .card-primary — inclusi i componenti React del plugin lapiuma-bianca-global-search * ("Analisi Dati Soci e Morticini" .card-primary, "Dashboard Analisi Dati" * .modal-header.bg-primary) — SENZA toccare il codice del plugin. */ .bg-primary, .modal-header.bg-primary, .card.card-primary:not(.card-outline) > .card-header, .card-primary:not(.card-outline) > .card-header { background-color: var(--ve-primary) !important; border-color: var(--ve-primary) !important; color: #fff !important; } .card.card-primary, .card-primary.card-outline { border-top-color: var(--ve-primary) !important; } .text-primary { color: var(--ve-primary) !important; } .border-primary { border-color: var(--ve-primary) !important; } /* ============================================================================ * === Plugin lapiuma-bianca-global-search — giallo (warning) → brand teal * ============================================================================ * SCOPED all'app React (#lapiuma_bianca_global_search) per NON toccare * .btn-warning / .card-warning / .alert-warning usati semanticamente altrove * (es. alert "contatto senza nome e cognome" in lista-contatti). * Riguarda: card-header "Selezione Compagnia", bottone "Attiva la ricerca * globale", badge numerico "1" degli step del wizard. */ #lapiuma_bianca_global_search .card.card-warning:not(.card-outline) > .card-header, #lapiuma_bianca_global_search .card-warning:not(.card-outline) > .card-header { background-color: var(--ve-primary) !important; border-color: var(--ve-primary) !important; color: #fff !important; } #lapiuma_bianca_global_search .card.card-warning, #lapiuma_bianca_global_search .card-warning.card-outline { border-top-color: var(--ve-primary) !important; } #lapiuma_bianca_global_search .btn.btn-warning, #lapiuma_bianca_global_search .btn-warning:not(:disabled):not(.disabled).active, #lapiuma_bianca_global_search .btn-warning:not(:disabled):not(.disabled):active { background-color: var(--ve-primary) !important; border-color: var(--ve-primary) !important; color: #fff !important; } #lapiuma_bianca_global_search .btn.btn-warning:hover, #lapiuma_bianca_global_search .btn.btn-warning:focus, #lapiuma_bianca_global_search .btn.btn-warning:focus-visible { background-color: var(--ve-primary-dark) !important; border-color: var(--ve-primary-dark) !important; color: #fff !important; box-shadow: 0 0 0 0.2rem var(--ve-primary-soft) !important; } #lapiuma_bianca_global_search .badge.badge-warning { background-color: var(--ve-primary) !important; color: #fff !important; } #lapiuma_bianca_global_search .modal-header.bg-warning, #lapiuma_bianca_global_search .bg-warning { background-color: var(--ve-primary) !important; color: #fff !important; } #lapiuma_bianca_global_search .modal-header.bg-warning .close, #lapiuma_bianca_global_search .modal-header.bg-warning .close span { color: #fff !important; } #lapiuma_bianca_global_search .modal-header.bg-success { background-color: var(--ve-primary) !important; color: #fff !important; } #lapiuma_bianca_global_search .modal-header.bg-success .close, #lapiuma_bianca_global_search .modal-header.bg-success .close span { color: #fff !important; } /* ============================================================================ * === Sidebar brand logo — piuma trasparente originale del brand * ============================================================================ * Sostituisce visivamente l' con la piuma trasparente * originale del brand cliente (assets/img/lapiuma-trasparente.png), senza * mask/tint: viene mostrata così com'è. Zero modifiche al template PHP. * Il trick "content: url()" rimpiazza la raster mostrata dall' senza * cambiare l'attributo src. */ .brand-link .brand-image { content: url('../img/lapiuma-trasparente.png') !important; height: 2.75rem !important; width: auto !important; max-width: none !important; border-radius: 0 !important; /* toglie img-circle di AdminLTE */ box-shadow: none !important; /* toglie elevation-3 */ background: transparent !important; opacity: 1 !important; /* override style="opacity: .8" */ padding: 0 !important; margin-top: -2px !important; /* allinea meglio con brand-text */ } /* --- Wrap del brand text su più righe se serve --------------------- */ /* AdminLTE mette white-space:nowrap sul brand-link → il testo tronca. */ /* Permetto il wrap e allineo verticalmente al centro col logo. */ .brand-link { white-space: normal !important; display: flex !important; align-items: center !important; gap: .6rem !important; } .brand-link .brand-text { white-space: normal !important; line-height: 1.2 !important; flex: 1 1 auto !important; min-width: 0 !important; /* consente al flex item di wrappare */ } /* ============================================================================ * === Fix icone Font Awesome invisibili nella top-navbar destra * ============================================================================ * Bug preesistente (già presente in v8 produzione): le icone della campanella * notifiche (far fa-bell) e del fullscreen (fas fa-expand-arrows-alt) non * appaiono nella top-navbar, mentre i webfonts sono correttamente caricati * (fa-solid-900.woff2 + fa-regular-400.woff2 = 200 OK in Network). * Forziamo font-family/font-weight direttamente sui glyph con * altissima specificità per battere qualsiasi override. */ .main-header .navbar-nav .nav-link .fas, .main-header .navbar-nav .nav-link i.fas { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-style: normal !important; display: inline-block !important; color: var(--ve-text-secondary, #6b7280) !important; font-size: 1.1rem !important; line-height: 1 !important; } .main-header .navbar-nav .nav-link .far, .main-header .navbar-nav .nav-link i.far { font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; font-style: normal !important; display: inline-block !important; color: var(--ve-text-secondary, #6b7280) !important; font-size: 1.1rem !important; line-height: 1 !important; } .main-header .navbar-nav .nav-link:hover .fas, .main-header .navbar-nav .nav-link:hover .far { color: var(--ve-primary) !important; } /* --- Fix sovrapposizione .navbar-badge con l'icona ----------------- */ /* valeria-elegant.css .badge { font-size:0.7rem !important; padding:3px 8px !important; } * gonfia il badge navbar → sovrappone la campanella (absolute top:9 right:5). * Riporto qui il badge alle dimensioni "navbar" AdminLTE default. */ .main-header .navbar-nav .nav-link .navbar-badge { font-size: 0.6rem !important; padding: 2px 4px !important; line-height: 1 !important; min-width: 0 !important; top: 4px !important; right: 2px !important; }