/* ========================================================= Dueflow Theme for Bootstrap 5.3+ Usage: or ========================================================= */ /* ---- Light mode ---- */ /* ========================================================= DUEFLOW THEME – LIGHT MODE Base color: #0b61a4 ========================================================= */ [data-bs-theme="light"] { /* 🎨 Brand */ --bs-primary: #0b61a4; --bs-primary-rgb: 11, 97, 164; --bs-secondary: #394d6d; --bs-secondary-rgb: 57, 77, 109; --bs-danger: #ef3d3d; --bs-success: #1f9d6a; --bs-warning: #f0b429; --bs-info: #2d7dd2; /* 🧱 Base layout */ --bs-body-bg: #f7f9fc; --bs-body-color: #0f1728; --bs-border-color: rgba(15, 23, 40, 0.12); /* 🔗 Links */ --bs-link-color: #0b61a4; --bs-link-hover-color: #084a80; /* 🃏 Cards */ --bs-card-bg: #ffffff; --bs-card-border-color: rgba(15, 23, 40, 0.08); /* 🧾 Forms */ --bs-form-control-bg: #ffffff; --bs-form-control-color: #0f1728; --bs-form-control-border-color: rgba(15, 23, 40, 0.18); --bs-form-control-focus-border-color: rgba(11, 97, 164, 0.55); --bs-focus-ring-color: rgba(11, 97, 164, 0.25); /* 🪟 Modals */ --bs-modal-content-bg: #ffffff; } /* ---- Dark mode ---- */ /* ========================================================= DUEFLOW THEME – DARK MODE (Blue background) Body background: #0b61a4 ========================================================= */ [data-bs-theme="dark"] { /* Base background / text */ --bs-body-bg: #0b61a4; /* ✅ richiesto */ --bs-body-color: #f5f9ff; /* testo molto chiaro */ /* Headings / muted / emphasis */ --bs-emphasis-color: #ffffff; --bs-secondary-color: rgba(245, 249, 255, 0.78); /* ✅ leggibile sul blu */ --bs-tertiary-color: rgba(245, 249, 255, 0.60); /* Borders */ --bs-border-color: rgba(255, 255, 255, 0.18); --bs-border-color-translucent: rgba(255, 255, 255, 0.14); /* Links */ --bs-link-color: #ffffff; --bs-link-hover-color: rgba(255, 255, 255, 0.82); /* Cards / dropdowns / modals (superfici leggibili sopra il blu) */ --bs-card-bg: rgba(255, 255, 255, 0.10); --bs-card-border-color: rgba(255, 255, 255, 0.18); --bs-dropdown-bg: rgba(12, 56, 98, 0.92); /* blu più scuro */ --bs-modal-content-bg: rgba(12, 56, 98, 0.96); /* blu più scuro */ /* Forms */ --bs-form-control-bg: rgba(12, 56, 98, 0.70); --bs-table-bg: rgba(12, 56, 98, 0.70) !important; --bs-form-control-color: #ffffff; --bs-form-control-border-color: rgba(255, 255, 255, 0.22); --bs-form-control-focus-border-color: rgba(255, 255, 255, 0.45); --bs-focus-ring-color: rgba(255, 255, 255, 0.22); /* Brand palette */ /* Primary: se il body è già primary-blue, non usare lo stesso blu per i bottoni, altrimenti "spariscono". Usiamo un primary "accent" chiaro (sky) */ --bs-primary: #0b61a4; --bs-primary-rgb: 88, 182, 255; /* ✅ Secondary più chiaro e “visibile” */ --bs-secondary: rgba(255, 255, 255, 0.82); --bs-secondary-rgb: 255, 255, 255; /* Semantic colors (pensati per fondo blu) */ --bs-success: #35d39a; --bs-success-rgb: 53, 211, 154; --bs-danger: #ff5b6b; --bs-danger-rgb: 255, 91, 107; --bs-warning: #ffd166; --bs-warning-rgb: 255, 209, 102; --bs-info: #9ad8ff; --bs-info-rgb: 154, 216, 255; } /* ========================================================= Component polish (opzionale ma consigliato) ========================================================= */ /* Bottoni: primary ben visibile su fondo blu */ [data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0b1b2a; --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: rgba(255, 255, 255, 0.22); --bs-btn-hover-color: #0b1b2a; --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, #fff); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.30); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, #fff); } /* Secondary button: outline chiaro */ [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: rgba(255, 255, 255, 0.92); --bs-btn-border-color: rgba(255, 255, 255, 0.40); --bs-btn-hover-bg: rgba(255, 255, 255, 0.14); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.55); } /* Card più “leggibile” */ [data-bs-theme="dark"] .card { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20); backdrop-filter: blur(6px); } /* Inputs più leggibili */ [data-bs-theme="dark"] .form-control::placeholder { color: rgba(255, 255, 255, 0.70); } /* ========================================================= Component polish (funziona su entrambi i temi) ========================================================= */ /* Bottoni più “Dueflow” */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 78%, #000); } /* Input e select: bordi più morbidi */ .form-control, .form-select { border-color: var(--bs-form-control-border-color); } .form-control:focus, .form-select:focus { border-color: var(--bs-form-control-focus-border-color); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); } /* Cards: ombra soft */ .card { border-color: var(--bs-card-border-color); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } /* Navbar (se usi navbar Bootstrap classica) */ .navbar { border-bottom: 1px solid var(--bs-border-color); } /* Bootbox / Modal personalizzazione Dueflow */ [data-bs-theme="dark"] .modal-content { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; } [data-bs-theme="dark"] .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .form-control { background-color: var(--bs-form-control-bg); color: #e8eef7; border-color: rgba(255, 255, 255, 0.15); } [data-bs-theme="dark"] .form-control:focus { border-color: rgba(91, 182, 255, 0.6); box-shadow: 0 0 0 .25rem rgba(91, 182, 255, 0.2); } /* ============================ LOGIN PAGE: sfondo bianco ============================ */ body.login-page { background: #ffffff !important; /* testo scuro se serve */ }