/* ================================================ HEADVISION THEME SYSTEM Tema: Cihaz temasına göre (light / dark) Kontrol: ================================================ */ /* ------------------------------ LIGHT MODE (Varsayılan) ------------------------------ */ :root[data-hv-theme="light"] { --hv-body-bg: #f3f4f6; --hv-text-color: #111827; --hv-muted-text-color: #6b7280; --hv-card-bg: #ffffff; --hv-card-border: #e5e7eb; --hv-sidebar-bg: #ffffff; --hv-sidebar-text: #111827; --hv-sidebar-border: #e5e7eb; --hv-topbar-bg: #ffffff; --hv-topbar-text: #111827; --hv-table-header-bg: #f9fafb; --hv-table-border: #e5e7eb; --hv-input-bg: #ffffff; --hv-input-border: #d1d5db; --hv-input-text: #111827; --hv-hover-bg: #f3f4f6; --hv-scroll-thumb: #c7cbd1; } /* ------------------------------ DARK MODE ------------------------------ */ :root[data-hv-theme="dark"] { --hv-body-bg: #101010; --hv-text-color: #e5e5e5; --hv-muted-text-color: #9ca3af; --hv-card-bg: #181818; --hv-card-border: #2a2a2a; --hv-sidebar-bg: #101010; --hv-sidebar-text: #e5e5e5; --hv-sidebar-border: #2a2a2a; --hv-topbar-bg: #101010; --hv-topbar-text: #e5e5e5; --hv-table-header-bg: #202020; --hv-table-border: #333333; --hv-input-bg: #151515; --hv-input-border: #3a3a3a; --hv-input-text: #f1f1f1; --hv-hover-bg: #242424; --hv-scroll-thumb: #3f3f3f; --hv-footer-card: #2C2C2C; } :root[data-hv-theme="light"] .modal-header, :root[data-hv-theme="light"] .modal-title { color: #111827 !important; /* siyaha yakın slate-900 tonu */ } /* ================================================ GLOBAL BASE ================================================ */ html, body { background-color: var(--hv-body-bg); color: var(--hv-text-color); transition: background 0.25s ease, color 0.25s ease; } /* Scrollbar */ *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--hv-scroll-thumb); border-radius: 8px; } /* ================================================ CARD ================================================ */ .card { background-color: var(--hv-card-bg) !important; border-color: var(--hv-card-border) !important; color: var(--hv-text-color) !important; transition: background 0.25s ease, border-color 0.25s ease; } .card-header, .card-footer { background-color: var(--hv-card-bg) !important; border-color: var(--hv-card-border) !important; } /* ================================================ SIDEBAR (Startbar / LeftBar) ================================================ */ .startbar { border-right: 1px solid var(--hv-sidebar-border); } .startbar, .startbar-menu { background-color: var(--hv-sidebar-bg) !important; color: var(--hv-sidebar-text) !important; } .startbar a, .startbar .nav-link { color: var(--hv-sidebar-text) !important; } .startbar .menu-label { color: var(--hv-sidebar-text); } .startbar .nav-link:hover { background-color: var(--hv-hover-bg); } .startbar .card { background-color: var(--hv-footer-card) !important; border-color: var(--hv-card-border) !important; color: var(--hv-text-color) !important; } .startbar .card small, .startbar .card .text-muted { color: var(--hv-muted-text-color) !important; } .footer { background-color: var(--hv-body-bg) !important; border-top: 1px solid var(--hv-card-border); color: var(--hv-muted-text-color); } .footer a { color: var(--hv-muted-text-color); } /* ================================================ TOPBAR ================================================ */ .topbar, .navbar, .page-title-box { background-color: var(--hv-topbar-bg) !important; color: var(--hv-topbar-text) !important; } .topbar .nav-icon, .topbar .nav-link { color: var(--hv-topbar-text) !important; } /* ================================================ TABLES ================================================ */ /*table { color: var(--hv-text-color); } */ thead tr { background-color: var(--hv-table-header-bg); } .table-bordered, .table thead th, .table tbody td { border-color: var(--hv-table-border) !important; } /* ================================================ FORMS ================================================ */ .form-control, .form-select { background-color: var(--hv-input-bg) !important; border-color: var(--hv-input-border) !important; color: var(--hv-input-text) !important; } .form-control:focus, .form-select:focus { border-color: #3b82f6 !important; /* mavi odak rengi */ box-shadow: 0 0 0 2px rgba(59, 130, 246, .35) !important; } /* ================================================ BUTTONS ================================================ */ .btn { transition: background 0.2s ease; } .btn-light { background: var(--hv-hover-bg) !important; border-color: var(--hv-card-border) !important; color: var(--hv-text-color) !important; } /* ================================================ HOVER EFFECTS ================================================ */ .list-group-item:hover, .table-hover tbody tr:hover { background-color: var(--hv-hover-bg); } /* ================================================ MISC ================================================ */ .border, .border-bottom, .border-top { border-color: var(--hv-card-border) !important; } /* ================================================ MODAL ================================================ */ /* Modal arka plan */ .modal-content { background-color: var(--hv-card-bg) !important; color: var(--hv-text-color) !important; border: 1px solid var(--hv-card-border) !important; } /* Üst başlık */ .modal-header { background-color: var(--hv-card-bg) !important; border-bottom: 1px solid var(--hv-card-border) !important; color: var(--hv-text-color) !important; } /* Kapatma butonu */ .modal-header .btn-close { filter: invert(1) grayscale(100%) !important; } /* Metin */ .modal-body p { color: var(--hv-muted-text-color) !important; } /* Footer */ .modal-footer { border-top: 1px solid var(--hv-card-border) !important; } /* Soft Secondary Button */ .btn-soft-secondary { background-color: var(--hv-hover-bg) !important; color: var(--hv-text-color) !important; border: 1px solid var(--hv-card-border) !important; } .btn-soft-secondary:hover { background-color: var(--hv-card-border) !important; } /* Danger button */ .btn-danger { background-color: #ef4444 !important; border-color: #ef4444 !important; } .btn-danger:hover { background-color: #dc2626 !important; } /* ============================================ LOGIN & WIZARD — Theme-Aware Styling Bu kısım sadece: auth-login-full layout'unda çalışır. ============================================ */ body.auth-login-full, .auth-login-full { background: var(--hv-body-bg) !important; background-color: var(--hv-body-bg) !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; } .auth-login-full .bg-light, .auth-login-full .bg-soft, .auth-login-full .auth-bg, .auth-login-full .bg-pattern, .auth-login-full .login-bg, .auth-login-full .bg-body-tertiary { background: var(--hv-body-bg) !important; background-color: var(--hv-body-bg) !important; } .auth-login-full .card, .auth-login-full .card-body { background-color: var(--hv-card-bg) !important; border-color: var(--hv-card-border) !important; } .auth-login-full .hv-auth-head .hv-sublead { color: var(--hv-muted-text-color) !important; } .auth-login-full .form-control, .auth-login-full .form-select { background-color: var(--hv-input-bg) !important; border-color: var(--hv-input-border) !important; color: var(--hv-input-text) !important; } .auth-login-full .form-check-label { color: var(--hv-text-color) !important; } .auth-login-full .text-muted { color: var(--hv-muted-text-color) !important; } .auth-login-full .form-control:focus, .auth-login-full .form-select:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 2px rgba(59,130,246,.35) !important; } .auth-login-full .visual-panel { background-color: var(--hv-card-bg) !important; border-left: 1px solid var(--hv-card-border) !important; } /* .auth-login-full .visual-cover { filter: brightness(.75) contrast(1.05) !important; } */ .auth-login-full .visual-shade { background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.7)) !important; } /* .auth-login-full .visual-content h3, .auth-login-full .visual-content p { color: var(--hv-text-color) !important; } */ .auth-login-full .btn-primary { background-color: #3b82f6 !important; border-color: #3b82f6 !important; color: #fff !important; } .auth-login-full .btn-primary:hover { background-color: #2563eb !important; border-color: #2563eb !important; } .auth-login-full .btn-outline-secondary { background-color: var(--hv-input-bg) !important; border-color: var(--hv-input-border) !important; color: var(--hv-muted-text-color) !important; } .auth-login-full .btn-outline-secondary:hover { background-color: var(--hv-hover-bg) !important; border-color: var(--hv-input-border) !important; } .auth-login-full #togglePassword i { color: var(--hv-muted-text-color) !important; } /* .auth-login-full select.form-select { background-image: none !important; }*/ .auth-login-full .modal-content { background-color: var(--hv-card-bg) !important; border-color: var(--hv-card-border) !important; } .auth-login-full .modal-header, .auth-login-full .modal-footer { border-color: var(--hv-card-border) !important; } /* Firma dropdown okunu mavi yap */ .wizard-page select.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230066ff' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592c.86 0 1.319 1.013.753 1.658l-4.796 5.482a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px; }