/* ========================================================================= 💥 ETDS PORTAL — AÇIK / KOYU TEMA 💥 - Tema, ve üzerindeki "dark-mode" / "light-mode" sınıflarıyla seçilir (index.html ve TemaServisi uygular; kullanıcının son tercihi hatırlanır). - Bileşen stillerindeki sabit renkler var(--k-..., ) biçimine bağlıdır. --k-* değişkenleri YALNIZCA koyu temada tanımlıdır; açık temada tarayıcı parantez içindeki eski rengi kullanır. ========================================================================= */ :root { --ios-ust-renk: #f8fafc; } html.ust-yuzey { --ios-ust-renk: #ffffff; } html.dark-mode { color-scheme: dark; --ios-ust-renk: #0f172a; /* Yüzeyler */ --k-zemin: #0f172a; --k-yuzey: #1e293b; --k-yuzey-rgb: 30, 41, 59; --k-yuzey-2: #273449; --k-yuzey-3: #334155; --k-yuzey-4: #475569; --k-koyu-1: #334155; --k-koyu-2: #3b4a61; /* Renkli zeminler (rozet, ikon kutusu, uyarı kutusu) */ --k-mavi-ton: rgba(59, 130, 246, 0.16); --k-mavi-ton-2: rgba(59, 130, 246, 0.3); --k-yesil-ton: rgba(34, 197, 94, 0.14); --k-yesil-ton-2: rgba(34, 197, 94, 0.28); --k-kirmizi-ton: rgba(239, 68, 68, 0.14); --k-kirmizi-ton-2: rgba(239, 68, 68, 0.28); --k-sari-ton: rgba(245, 158, 11, 0.14); --k-sari-ton-2: rgba(245, 158, 11, 0.28); --k-mor-ton: rgba(139, 92, 246, 0.16); --k-pembe-ton: rgba(236, 72, 153, 0.14); --k-mavi2-ton: rgba(14, 165, 233, 0.14); /* Yazılar */ --k-metin: #f1f5f9; --k-metin-2: #e2e8f0; --k-metin-3: #cbd5e1; --k-metin-4: #94a3b8; --k-metin-5: #8392a8; --k-metin-6: #64748b; --k-mavi-metin: #93c5fd; --k-kirmizi-metin: #fca5a5; --k-yesil-metin: #86efac; --k-sari-metin: #fcd34d; --k-mor-metin: #d8b4fe; /* Kenarlıklar */ --k-kenar: #334155; --k-kenar-2: #475569; --k-mavi-kenar: rgba(96, 165, 250, 0.35); --k-yesil-kenar: rgba(74, 222, 128, 0.3); --k-kirmizi-kenar: rgba(248, 113, 113, 0.35); --k-sari-kenar: rgba(251, 191, 36, 0.35); --k-mor-kenar: rgba(192, 132, 252, 0.35); /* Acente düzeninin (MainLayout) kendi değişkenleri */ --color-bg: #0f172a; --color-surface: #1e293b; --color-border: #334155; --color-text-dark: #f1f5f9; --color-text-muted: #94a3b8; } html.dark-mode.ust-yuzey { --ios-ust-renk: #1e293b; } /* ---------------- Bootstrap koyu tema değişkenleri (uygulamanın lacivert paletine uyarlanır) ---------------- */ [data-bs-theme=dark] { --bs-body-bg: #0f172a; --bs-body-bg-rgb: 15, 23, 42; --bs-body-color: #e2e8f0; --bs-body-color-rgb: 226, 232, 240; --bs-emphasis-color: #f8fafc; --bs-emphasis-color-rgb: 248, 250, 252; --bs-secondary-color: #94a3b8; --bs-secondary-color-rgb: 148, 163, 184; --bs-secondary-bg: #1e293b; --bs-secondary-bg-rgb: 30, 41, 59; --bs-tertiary-color: rgba(148, 163, 184, 0.75); --bs-tertiary-bg: #172033; --bs-tertiary-bg-rgb: 23, 32, 51; --bs-border-color: #334155; --bs-border-color-translucent: rgba(148, 163, 184, 0.18); --bs-heading-color: inherit; --bs-link-color: #60a5fa; --bs-link-color-rgb: 96, 165, 250; --bs-link-hover-color: #93c5fd; --bs-link-hover-color-rgb: 147, 197, 253; --bs-primary-text-emphasis: #93c5fd; --bs-secondary-text-emphasis: #cbd5e1; --bs-success-text-emphasis: #86efac; --bs-info-text-emphasis: #7dd3fc; --bs-warning-text-emphasis: #fcd34d; --bs-danger-text-emphasis: #fca5a5; --bs-light-text-emphasis: #e2e8f0; --bs-dark-text-emphasis: #e2e8f0; --bs-primary-bg-subtle: rgba(59, 130, 246, 0.16); --bs-secondary-bg-subtle: rgba(148, 163, 184, 0.14); --bs-success-bg-subtle: rgba(34, 197, 94, 0.14); --bs-info-bg-subtle: rgba(14, 165, 233, 0.14); --bs-warning-bg-subtle: rgba(245, 158, 11, 0.14); --bs-danger-bg-subtle: rgba(239, 68, 68, 0.14); --bs-light-bg-subtle: #273449; --bs-dark-bg-subtle: #0f172a; --bs-primary-border-subtle: rgba(96, 165, 250, 0.35); --bs-secondary-border-subtle: #475569; --bs-success-border-subtle: rgba(74, 222, 128, 0.3); --bs-info-border-subtle: rgba(56, 189, 248, 0.3); --bs-warning-border-subtle: rgba(251, 191, 36, 0.35); --bs-danger-border-subtle: rgba(248, 113, 113, 0.35); --bs-light-border-subtle: #334155; --bs-dark-border-subtle: #334155; --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.45); --bs-box-shadow-sm: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.35); --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.55); } /* ---------------- Sabit renkli Bootstrap yardımcı sınıfları ---------------- */ html.dark-mode body { color: var(--bs-body-color); } html.dark-mode .bg-white { background-color: var(--k-yuzey) !important; } html.dark-mode .bg-light { background-color: var(--k-zemin) !important; } html.dark-mode .bg-body { background-color: var(--k-zemin) !important; } html.dark-mode .bg-dark { background-color: #334155 !important; } html.dark-mode .text-dark, html.dark-mode .text-black, html.dark-mode .text-body { color: var(--k-metin) !important; } html.dark-mode .text-secondary { color: #a3b1c6 !important; } html.dark-mode .text-primary { color: #60a5fa !important; } html.dark-mode .text-success { color: #4ade80 !important; } html.dark-mode .text-danger { color: #f87171 !important; } html.dark-mode .text-info { color: #38bdf8 !important; } html.dark-mode .text-warning { color: #fbbf24 !important; } html.dark-mode .border-light, html.dark-mode .border-light-subtle, html.dark-mode .border-white { border-color: var(--k-kenar) !important; } html.dark-mode hr { color: #475569; } html.dark-mode ::placeholder { color: #64748b !important; opacity: 1; } /* Düğmeler */ html.dark-mode .btn-light { --bs-btn-color: #e2e8f0; --bs-btn-bg: #273449; --bs-btn-border-color: #334155; --bs-btn-hover-color: #f8fafc; --bs-btn-hover-bg: #334155; --bs-btn-hover-border-color: #475569; --bs-btn-active-color: #f8fafc; --bs-btn-active-bg: #334155; --bs-btn-active-border-color: #475569; --bs-btn-disabled-color: #94a3b8; --bs-btn-disabled-bg: #273449; --bs-btn-disabled-border-color: #334155; } html.dark-mode .btn-white { background-color: var(--k-yuzey) !important; color: var(--k-metin) !important; border-color: var(--k-kenar) !important; } html.dark-mode .btn-outline-secondary { --bs-btn-color: #cbd5e1; --bs-btn-border-color: #475569; --bs-btn-hover-color: #f8fafc; --bs-btn-hover-bg: #334155; --bs-btn-hover-border-color: #475569; --bs-btn-active-bg: #334155; --bs-btn-active-border-color: #475569; } html.dark-mode .btn-dark { --bs-btn-bg: #334155; --bs-btn-border-color: #334155; --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #475569; --bs-btn-active-bg: #475569; --bs-btn-active-border-color: #475569; } /* Kartlar, modallar, açılır menüler, tablolar */ html.dark-mode .card { --bs-card-bg: #1e293b; --bs-card-cap-bg: #273449; --bs-card-border-color: #334155; } html.dark-mode .modal-content { --bs-modal-bg: #1e293b; --bs-modal-border-color: #334155; } html.dark-mode .dropdown-menu { --bs-dropdown-bg: #1e293b; --bs-dropdown-border-color: #334155; --bs-dropdown-link-color: #e2e8f0; --bs-dropdown-link-hover-bg: #273449; } html.dark-mode .table { --bs-table-bg: transparent; --bs-table-color: #e2e8f0; --bs-table-border-color: #334155; --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.05); --bs-table-hover-color: #f8fafc; } html.dark-mode .table-light { --bs-table-bg: #273449; --bs-table-color: #cbd5e1; --bs-table-border-color: #334155; } html.dark-mode .progress { --bs-progress-bg: #334155; } html.dark-mode .form-control, html.dark-mode .form-select { background-color: var(--k-zemin); color: var(--k-metin); border-color: var(--k-kenar-2); } html.dark-mode .form-control:disabled, html.dark-mode .form-select:disabled { background-color: rgba(0, 0, 0, 0.25); color: #94a3b8; } html.dark-mode .input-group-text { background-color: #273449; color: #cbd5e1; border-color: var(--k-kenar-2); } html.dark-mode .form-check-input { background-color: #0f172a; border-color: #475569; } html.dark-mode .form-check-input:checked { background-color: #2563eb; border-color: #2563eb; } /* Uygulamanın hata ekranı */ html.dark-mode #blazor-error-ui { color: #0f172a; } /* Kaydırma çubukları */ html.dark-mode .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; } /* Logo: koyu temada açık renkli yazılı sürüm */ .logo-koyu { display: none !important; } html.dark-mode .logo-koyu { display: inline-block !important; } html.dark-mode .logo-acik { display: none !important; } /* Açık renkli (sarı / camgöbeği) zeminlerde yazı koyu kalır */ html.dark-mode .bg-warning.text-dark, html.dark-mode .bg-warning .text-dark, html.dark-mode .bg-info.text-dark, html.dark-mode .bg-info .text-dark { color: #0f172a !important; }