/* ============================================================================ * Tasitlarim2024 — Theme palettes * * Uygulama: attribute'una bagli. * - data-theme="forest" : Doga (yesil/teal/toprak) * - data-theme="rose" : Bordo (bordo/pembe/krem) * - data-theme="sunny" : Gunesli (canli mavi + pastel) * * CSS variables, Bootstrap component renklerini ve site-wide accent'leri * override eder. JS theme-switch dinamik olarak data-theme'i degistirir. * * NOT: !important sadece Bootstrap'in dahili .bg-primary / .btn-primary gibi * compiled class'larini gecmek icin gerekli — daha temiz cozum Bootstrap'i * tema-aware compile etmek ama bu approach 0 build-step gerektirir. * ============================================================================ */ :root { /* Default (Bootstrap mavi) — kullanici hicbir tema secmedigi zaman */ --t-primary: #0d6efd; --t-primary-dark: #0a58ca; --t-primary-soft: #cfe2ff; --t-secondary: #6c757d; --t-accent: #0dcaf0; --t-light-bg: #f8f9fa; --t-surface: #ffffff; --t-text: #212529; --t-text-muted: #6c757d; --t-danger: #dc3545; --t-warning: #ffc107; --t-success: #198754; --t-border: #dee2e6; --t-navbar-bg: #0d6efd; --t-navbar-text: #ffffff; } /* ---------- TEMA 1: FOREST (Doga) ---------- Bootstrap'in --bs-* degiskenlerini ezerek tum BS5 bilesenlerini (button/alert/badge/card/border/link/form-focus) tek noktadan donusturur. */ [data-theme="forest"] { --t-primary: #157A6E; --t-primary-dark: #0e5b53; --t-primary-soft: #d4ebe7; --t-secondary: #499F68; --t-accent: #77B2BC; --t-light-bg: #F0F2EE; --t-surface: #ffffff; --t-text: #1f2d2a; --t-text-muted: #6b7570; --t-danger: #B4654A; --t-warning: #d4a574; --t-success: #499F68; --t-border: #C2C5BB; --t-navbar-bg: #157A6E; --t-navbar-text: #ffffff; /* Bootstrap 5 CSS variables overrides — tum BS bilesenleri ortak kullanir */ --bs-primary: #157A6E; --bs-primary-rgb: 21, 122, 110; --bs-primary-text-emphasis: #0e5b53; --bs-primary-bg-subtle: #d4ebe7; --bs-primary-border-subtle: #98c8c0; --bs-link-color: #157A6E; --bs-link-color-rgb: 21, 122, 110; --bs-link-hover-color: #0e5b53; --bs-link-hover-color-rgb: 14, 91, 83; } /* ---------- TEMA 2: ROSE (Bordo) ---------- */ [data-theme="rose"] { --t-primary: #612940; --t-primary-dark: #471d2e; --t-primary-soft: #FDECEF; --t-secondary: #9D6381; --t-accent: #9D6381; --t-light-bg: #FDECEF; --t-surface: #ffffff; --t-text: #0F110C; --t-text-muted: #6c6669; --t-danger: #c0392b; --t-warning: #d4a574; --t-success: #5e8c61; --t-border: #C3CCCC; --t-navbar-bg: #612940; --t-navbar-text: #FDECEF; --bs-primary: #612940; --bs-primary-rgb: 97, 41, 64; --bs-primary-text-emphasis: #471d2e; --bs-primary-bg-subtle: #FDECEF; --bs-primary-border-subtle: #d5a8b8; --bs-link-color: #612940; --bs-link-color-rgb: 97, 41, 64; --bs-link-hover-color: #471d2e; --bs-link-hover-color-rgb: 71, 29, 46; } /* ---------- TEMA 3: SUNNY (Gunesli) ---------- */ [data-theme="sunny"] { --t-primary: #3777FF; --t-primary-dark: #2860d8; --t-primary-soft: #d8e4ff; --t-secondary: #FFBE86; --t-accent: #FFE156; --t-light-bg: #FFE9CE; --t-surface: #ffffff; --t-text: #212529; --t-text-muted: #6c757d; --t-danger: #FFB5C2; --t-warning: #FFE156; --t-success: #58c47f; --t-border: #f0d8b8; --t-navbar-bg: #3777FF; --t-navbar-text: #ffffff; --bs-primary: #3777FF; --bs-primary-rgb: 55, 119, 255; --bs-primary-text-emphasis: #2860d8; --bs-primary-bg-subtle: #d8e4ff; --bs-primary-border-subtle: #a3b9f0; --bs-link-color: #3777FF; --bs-link-color-rgb: 55, 119, 255; --bs-link-hover-color: #2860d8; --bs-link-hover-color-rgb: 40, 96, 216; } /* ============================================================================ * Tema degiskenlerini Bootstrap class'larina BAGLA * Sadece tema aktifken ([data-theme]:not(empty)) — varsayilan davranisi bozma. * ============================================================================ */ body[data-theme] .navbar.bg-primary, body[data-theme] header .navbar.bg-primary { background-color: var(--t-navbar-bg) !important; } body[data-theme] .navbar-dark .navbar-brand, body[data-theme] .navbar-dark .nav-link { color: var(--t-navbar-text) !important; } body[data-theme] .btn-primary { background-color: var(--t-primary) !important; border-color: var(--t-primary) !important; } body[data-theme] .btn-primary:hover, body[data-theme] .btn-primary:focus { background-color: var(--t-primary-dark) !important; border-color: var(--t-primary-dark) !important; } body[data-theme] .btn-outline-primary { color: var(--t-primary) !important; border-color: var(--t-primary) !important; } body[data-theme] .btn-outline-primary:hover { background-color: var(--t-primary) !important; color: #fff !important; } body[data-theme] .bg-primary { background-color: var(--t-primary) !important; } body[data-theme] .text-primary { color: var(--t-primary) !important; } body[data-theme] .border-primary { border-color: var(--t-primary) !important; } body[data-theme] a { color: var(--t-primary); } body[data-theme] a:hover { color: var(--t-primary-dark); } /* Tablolar (table-dark thead) — tema rengiyle uyumlu */ body[data-theme] .table-dark, body[data-theme] .table > thead.table-dark, body[data-theme] .table > thead > tr.table-dark { background-color: var(--t-primary-dark) !important; color: var(--t-navbar-text) !important; } /* Form focus rengi */ body[data-theme] .form-control:focus, body[data-theme] .form-select:focus { border-color: var(--t-primary) !important; box-shadow: 0 0 0 .2rem rgba(0,0,0,.04), 0 0 0 .15rem var(--t-primary-soft) !important; } /* Aksiyon menu tile hover */ body[data-theme] .vt-action-tile:hover { background-color: var(--t-primary-soft) !important; border-color: var(--t-primary) !important; color: var(--t-primary-dark) !important; } body[data-theme] .vt-action-tile:hover i { color: var(--t-primary-dark) !important; } /* Badge primary */ body[data-theme] .badge.bg-primary { background-color: var(--t-primary) !important; } /* Aktif satir vurgu (table-success) tema rengine */ body[data-theme="forest"] .table-success { background-color: #d4ebe7 !important; } body[data-theme="rose"] .table-success { background-color: #FDECEF !important; } body[data-theme="sunny"] .table-success { background-color: #FFE9CE !important; } /* ============================================================================ * SITE-OZGU SINIF OVERRIDE'LARI * Site.css icindeki hardcoded #0d6efd renkleriyle tasarlanmis ozel sinifllari * tema rengiyle eslestir. * ============================================================================ */ /* Landing page navbar (.lp-nav) */ body[data-theme] .lp-nav .navbar-brand { color: var(--t-primary) !important; } body[data-theme] .lp-nav .navbar-brand:hover { color: var(--t-primary-dark) !important; } body[data-theme] .lp-nav .nav-link.active, body[data-theme] .lp-nav .nav-link:hover { color: var(--t-primary) !important; } body[data-theme] .lp-nav .nav-link.active::after, body[data-theme] .lp-nav .nav-link:hover::after { background: var(--t-primary) !important; } body[data-theme] .lp-nav-cta, body[data-theme] .lp-login-modal .lp-auth-submit { background-color: var(--t-primary) !important; border-color: var(--t-primary) !important; color: #fff !important; } body[data-theme] .lp-nav-cta:hover { background-color: var(--t-primary-dark) !important; border-color: var(--t-primary-dark) !important; } /* Landing hero CTA — eskiden var(--ink) ile sabit siyah idi. Tema aktif ise tema rengini kullan, "Üye Girişi" linkini de tema rengine cek. */ body[data-theme] .lp-btn-primary { background: var(--t-primary) !important; color: #fff !important; } body[data-theme] .lp-btn-primary:hover { background: var(--t-primary-dark) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .15) !important; } body[data-theme] .lp-link { color: var(--t-primary) !important; } body[data-theme] .lp-link:hover { color: var(--t-primary-dark) !important; } /* Landing feature kartlarinin accent renkleri (varsa) */ body[data-theme] .lp-feature i, body[data-theme] .lp-section-title strong, body[data-theme] .lp-bullet i { color: var(--t-primary) !important; } /* Dashboard kartlari (.dp-card, .dp-kpi) accent renkleri. STRATEJI: dp-kpi-blue'nun --kpi-color degiskenini tema rengiyle override et — kartin border-left, icon arkaplani, icon rengi otomatik degisir. Karti DARK YAPMIYORUZ — beyaz arka plan + tema-renkli accent = kontrast her zaman dogru. (Eski dark-gradient yaklasimi ikon/sayiyi kayboruyordu.) dp-kpi-amber/green/red anlamli renkler — tema disi tutuyoruz. */ body[data-theme] .dp-card-head { color: var(--t-text) !important; } body[data-theme] .dp-link-arrow { color: var(--t-primary) !important; } body[data-theme] .dp-link-arrow:hover { color: var(--t-primary-dark) !important; } body[data-theme] .dp-kpi-blue { --kpi-color: var(--t-primary); } /* Calendar gunu blue rengi (Yaklasan Tarihler kartı) */ body[data-theme] .dp-cal-date.col-blue { --cal-color: var(--t-primary); } /* Quick action butonlari (dashboard) — tum *-blue varyantlari tema'ya bagli; diger renkli quick'ler (orange/green/purple) anlamlarini korur. .dp-quick-blue cssde --qc-color: #2563eb hardcoded; bunu override ediyoruz. */ body[data-theme] .dp-quick-blue { --qc-color: var(--t-primary); } /* Hardcoded #2563eb (muayene type, calendar, timeline links) */ body[data-theme] .type-muayene, body[data-theme] .dp-cal-type.type-muayene, body[data-theme] .dp-tl-type.type-muayene { color: var(--t-primary) !important; } body[data-theme] .dp-prio-modal-icon.bg-blue { background: var(--t-primary-soft) !important; color: var(--t-primary) !important; } /* Vehicle modal kart basliklari (.vm-card-title, .vm-bullet) */ body[data-theme] .vm-card-title { color: var(--t-text) !important; } body[data-theme] .vm-bullet { background-color: var(--t-primary) !important; color: #fff !important; } /* Admin settings sayfasi accent'leri */ body[data-theme] .as-item.active { background-color: var(--t-primary-soft) !important; color: var(--t-primary-dark) !important; border-color: var(--t-primary) !important; } body[data-theme] .as-head .ic, body[data-theme] .as-card-head i.text-primary { color: var(--t-primary) !important; } /* Footer / Menu hover */ body[data-theme] .nav-link:hover { color: var(--t-primary) !important; } /* Pagination */ body[data-theme] .page-link { color: var(--t-primary) !important; } body[data-theme] .page-item.active .page-link { background-color: var(--t-primary) !important; border-color: var(--t-primary) !important; } /* Form check (checkbox/radio) checked state */ body[data-theme] .form-check-input:checked { background-color: var(--t-primary) !important; border-color: var(--t-primary) !important; } /* Datepicker today highlight (bootstrap-datepicker) */ body[data-theme] .datepicker table tr td.today, body[data-theme] .datepicker table tr td.today:hover { background-color: var(--t-primary-soft) !important; color: var(--t-primary-dark) !important; } body[data-theme] .datepicker table tr td.active, body[data-theme] .datepicker table tr td.active.active { background-color: var(--t-primary) !important; color: #fff !important; } /* Select2 (bootstrap-5 theme) — secili tag rengi */ body[data-theme] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { background-color: var(--t-primary-soft) !important; border-color: var(--t-primary) !important; color: var(--t-primary-dark) !important; } /* SweetAlert2 — primary butonu */ body[data-theme] .swal2-confirm.swal2-styled { background-color: var(--t-primary) !important; border-color: var(--t-primary) !important; } /* Form-control'ler placeholder + border focus uyumlu kalsin */ body[data-theme] .form-control, body[data-theme] .form-select { border-color: var(--t-border, #dee2e6); } /* Spinner */ body[data-theme] .spinner-border-primary, body[data-theme] .spinner-border.text-primary { color: var(--t-primary) !important; } /* Tooltip */ body[data-theme] .tooltip .tooltip-inner { background-color: var(--t-primary) !important; } body[data-theme] .bs-tooltip-top .tooltip-arrow::before, body[data-theme] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--t-primary) !important; } body[data-theme] .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--t-primary) !important; } body[data-theme] .bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--t-primary) !important; } body[data-theme] .bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--t-primary) !important; } /* Modal header (Bootstrap modal-header iconlari, basliklar) */ body[data-theme] .modal-header i.text-primary, body[data-theme] .modal-title i.text-primary { color: var(--t-primary) !important; } /* Alert primary */ body[data-theme] .alert-primary { color: var(--t-primary-dark) !important; background-color: var(--t-primary-soft) !important; border-color: var(--t-primary) !important; } body[data-theme] .alert-info { color: var(--t-primary-dark) !important; background-color: var(--t-primary-soft) !important; border-color: var(--t-primary) !important; } /* ============================================================================ * Tema sec switcher kart stilleri (AdminSettings / Settings sayfasi) * ============================================================================ */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .theme-card { border: 2px solid var(--t-border, #dee2e6); border-radius: 12px; padding: 14px; background: #fff; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; position: relative; } .theme-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); } .theme-card.active { border-color: var(--t-primary, #0d6efd); box-shadow: 0 0 0 3px rgba(13,110,253,.15); } .theme-card .tc-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; } .theme-card .tc-sub { font-size: .78rem; color: #6c757d; margin-bottom: 10px; } .theme-card .tc-swatches { display: flex; gap: 4px; margin-bottom: 8px; } .theme-card .tc-swatch { flex: 1; height: 28px; border-radius: 4px; border: 1px solid rgba(0,0,0,.05); } .theme-card .tc-active-flag { position: absolute; top: 8px; right: 10px; background: #198754; color: #fff; font-size: .65rem; font-weight: 700; padding: 2px 6px; border-radius: 10px; display: none; } .theme-card.active .tc-active-flag { display: inline-block; }