/* ═══════════════════════════════════════════════════════════════════════ TailAdmin renk kaplaması (https://demo.tailadmin.com renkleri) Vuexy temasının ÜZERİNE yüklenir (Layout + Login'de EN SON CSS). AÇIK + KOYU mod: renkler değişkenlerden gelir; Vuexy'nin tema anahtarı etiketine light-style / dark-style sınıfı basar — koyu değerler html.dark-style bloğunda tanımlıdır. Tema dosyalarına dokunulmaz. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Marka (iki modda da aynı) */ --ta-brand-50: #ECF3FF; --ta-brand-100: #DDE9FF; --ta-brand-300: #9CB9FF; --ta-brand-400: #7592FF; --ta-brand-500: #465FFF; --ta-brand-600: #3641F5; --bs-primary: var(--ta-brand-500); --bs-primary-rgb: 70, 95, 255; /* AÇIK MOD (TailAdmin light) */ --ta-bg: #F9FAFB; /* sayfa zemini */ --ta-card: #FFFFFF; /* kart/menü/navbar zemini */ --ta-border: #E4E7EC; /* kenarlıklar */ --ta-border-soft: #F2F4F7; /* tablo iç çizgileri */ --ta-heading: #1D2939; /* başlıklar */ --ta-text: #344054; /* normal metin */ --ta-muted: #667085; /* soluk metin */ --ta-hover: #F2F4F7; /* hover zemini */ --ta-thead: #F9FAFB; /* tablo başlık zemini */ --ta-active-bg: #ECF3FF; /* menü aktif zemin */ --ta-active-text: #465FFF; /* menü aktif yazı */ --ta-input-bg: #FFFFFF; --ta-input-border: #D0D5DD; --ta-lbl-primary-bg: #ECF3FF; --ta-lbl-primary-tx: #465FFF; --ta-lbl-success-bg: #ECFDF3; --ta-lbl-success-tx: #039855; --ta-lbl-danger-bg: #FEF3F2; --ta-lbl-danger-tx: #D92D20; --ta-lbl-warning-bg: #FFFAEB; --ta-lbl-warning-tx: #DC6803; --ta-lbl-secondary-bg: #F2F4F7; --ta-lbl-secondary-tx: #667085; } /* KOYU MOD (TailAdmin dark) — Vuexy anahtarı html'e dark-style sınıfı (bazı sürümlerde data-style/data-bs-theme özniteliği) basar; hepsi kapsanır */ html.dark-style, html[data-style="dark"], html[data-bs-theme="dark"] { --ta-bg: #101828; /* gray-900 */ --ta-card: #17202F; /* gray-900 üstü hafif aydınlık */ --ta-border: #1D2939; /* gray-800 */ --ta-border-soft: #1A2231; --ta-heading: #F9FAFB; --ta-text: #98A2B3; /* gray-400 */ --ta-muted: #667085; --ta-hover: #1D2939; --ta-thead: #151D2C; --ta-active-bg: rgba(70, 95, 255, .14); --ta-active-text: #7592FF; /* brand-400 — koyuda daha okunur */ --ta-input-bg: #101828; --ta-input-border: #344054; --ta-lbl-primary-bg: rgba(70, 95, 255, .16); --ta-lbl-primary-tx: #7592FF; --ta-lbl-success-bg: rgba(18, 183, 106, .16); --ta-lbl-success-tx: #32D583; --ta-lbl-danger-bg: rgba(240, 68, 56, .16); --ta-lbl-danger-tx: #F97066; --ta-lbl-warning-bg: rgba(247, 144, 9, .16); --ta-lbl-warning-tx: #FDB022; --ta-lbl-secondary-bg: rgba(152, 162, 179, .16); --ta-lbl-secondary-tx: #98A2B3; } /* ── Sayfa zemini + metin ───────────────────────────────────────────────── */ body, .content-wrapper, .layout-page { background: var(--ta-bg) !important; color: var(--ta-text); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title { color: var(--ta-heading) !important; } a { color: var(--ta-brand-500); } a:hover { color: var(--ta-brand-600); } .text-primary { color: var(--ta-active-text) !important; } .text-muted { color: var(--ta-muted) !important; } /* ── Kartlar ────────────────────────────────────────────────────────────── */ .card { background: var(--ta-card) !important; border: 1px solid var(--ta-border) !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(16, 24, 40, .06) !important; color: var(--ta-text); } /* ── SOL MENÜ ───────────────────────────────────────────────────────────── */ #layout-menu, .bg-menu-theme { background: var(--ta-card) !important; border-right: 1px solid var(--ta-border); box-shadow: none !important; } .bg-menu-theme .menu-link, .bg-menu-theme .menu-sub .menu-link, .bg-menu-theme .menu-toggle::after { color: var(--ta-text) !important; } .bg-menu-theme .menu-inner .menu-item .menu-link, .bg-menu-theme .menu-sub .menu-item .menu-link { border-radius: 8px; transition: background-color .15s ease, color .15s ease; } /* Hover: TailAdmin davranışı */ .bg-menu-theme .menu-inner .menu-item .menu-link:hover, .bg-menu-theme .menu-inner .menu-item .menu-link:focus, .bg-menu-theme .menu-sub .menu-item .menu-link:hover, .bg-menu-theme .menu-sub .menu-item .menu-link:focus { background: var(--ta-hover) !important; color: var(--ta-heading) !important; } .bg-menu-theme .menu-item .menu-link:hover div, .bg-menu-theme .menu-item .menu-link:hover i, .bg-menu-theme .menu-item .menu-link:hover::after { color: var(--ta-heading) !important; } /* Aktif öğe (hover dahil) */ .bg-menu-theme .menu-inner .menu-item.active > .menu-link, .bg-menu-theme .menu-inner .menu-item.active > .menu-link:hover, .bg-menu-theme .menu-inner .menu-item.active > .menu-link:focus, .bg-menu-theme .menu-sub .menu-item.active > .menu-link, .bg-menu-theme .menu-sub .menu-item.active > .menu-link:hover { background: var(--ta-active-bg) !important; color: var(--ta-active-text) !important; box-shadow: none !important; } .bg-menu-theme .menu-item.active > .menu-link div, .bg-menu-theme .menu-item.active > .menu-link i, .bg-menu-theme .menu-item.active > .menu-link::before, .bg-menu-theme .menu-item.active > .menu-link:hover div, .bg-menu-theme .menu-item.active > .menu-link:hover i { color: var(--ta-active-text) !important; } /* TailAdmin: alt öğesi aktif olan AÇIK üst başlık da mavi vurgu alır (Dashboard gibi) */ .bg-menu-theme .menu-item.active.open > .menu-link.menu-toggle, .bg-menu-theme .menu-item.active.open > .menu-link.menu-toggle:hover { background: var(--ta-active-bg) !important; color: var(--ta-active-text) !important; } .bg-menu-theme .menu-item.active.open > .menu-link.menu-toggle i, .bg-menu-theme .menu-item.active.open > .menu-link.menu-toggle div, .bg-menu-theme .menu-item.active.open > .menu-link.menu-toggle::after { color: var(--ta-active-text) !important; } /* TailAdmin: alt menü öğelerinde NOKTA işareti yok; girinti üst başlığın YAZISIYLA hizalanır (ikon genişliği kadar içeride) */ .bg-menu-theme .menu-sub .menu-link::before { display: none !important; } .bg-menu-theme .menu-sub .menu-link { padding-left: 3.3rem !important; } /* TailAdmin: öğeler arası nefes payı + ferah satır yüksekliği */ .bg-menu-theme .menu-inner > .menu-item { margin: 2px 10px; } .bg-menu-theme .menu-inner .menu-link { padding-top: .55rem; padding-bottom: .55rem; } .bg-menu-theme .menu-sub .menu-item { margin: 2px 0; } /* "MENÜ" bölüm etiketi (küçük, gri, büyük harf) */ .bg-menu-theme .menu-header { color: var(--ta-muted) !important; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: .9rem 1.4rem .3rem; } .bg-menu-theme .menu-header .menu-header-text { color: var(--ta-muted) !important; } .bg-menu-theme .menu-header::before { display: none !important; } .app-brand-text { color: var(--ta-heading) !important; } .menu-inner-shadow { display: none !important; } .app-brand-logo svg path { fill: var(--ta-brand-500) !important; } .layout-menu-toggle { color: var(--ta-brand-500) !important; } /* ── Üst bar ────────────────────────────────────────────────────────────── */ .bg-navbar-theme, .layout-navbar { background: var(--ta-card) !important; border-bottom: 1px solid var(--ta-border); box-shadow: none !important; color: var(--ta-text); } .layout-navbar .fw-medium { color: var(--ta-heading); } /* ── Butonlar ───────────────────────────────────────────────────────────── */ .btn-primary { --bs-btn-bg: var(--ta-brand-500); --bs-btn-border-color: var(--ta-brand-500); --bs-btn-hover-bg: var(--ta-brand-600); --bs-btn-hover-border-color: var(--ta-brand-600); --bs-btn-active-bg: var(--ta-brand-600); --bs-btn-active-border-color: var(--ta-brand-600); --bs-btn-focus-shadow-rgb: 70, 95, 255; --bs-btn-disabled-bg: var(--ta-brand-300); --bs-btn-disabled-border-color: var(--ta-brand-300); background-color: var(--ta-brand-500) !important; border-color: var(--ta-brand-500) !important; color: #fff !important; box-shadow: none !important; } /* Hover: TailAdmin davranışı — buton KALKMAZ, gölge almaz, sadece bir ton koyulaşır */ .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary:focus-visible, .btn.btn-primary.show, .btn-check:checked + .btn-primary, .btn-primary:first-child:active { background-color: var(--ta-brand-600) !important; border-color: var(--ta-brand-600) !important; color: #fff !important; box-shadow: none !important; transform: none !important; filter: none !important; } /* Vuexy bazı butonlarda hover'ı translateY ile "kaldırıyor" — TailAdmin'de düz durur */ .btn:hover, .btn:active { transform: none !important; } /* Tıklamadaki dalga (ripple) animasyonu — TailAdmin'de yok */ .waves-ripple { display: none !important; } .btn-outline-primary { --bs-btn-focus-shadow-rgb: 70, 95, 255; color: var(--ta-active-text) !important; border-color: var(--ta-brand-500) !important; } .btn-outline-primary:hover, .btn-outline-primary.active { background-color: var(--ta-brand-500) !important; border-color: var(--ta-brand-500) !important; color: #fff !important; } .btn-label-primary { background: var(--ta-lbl-primary-bg) !important; color: var(--ta-lbl-primary-tx) !important; border: none; } .btn-label-success { background: var(--ta-lbl-success-bg) !important; color: var(--ta-lbl-success-tx) !important; border: none; } .btn-label-danger { background: var(--ta-lbl-danger-bg) !important; color: var(--ta-lbl-danger-tx) !important; border: none; } .btn-label-secondary { background: var(--ta-lbl-secondary-bg) !important; color: var(--ta-lbl-secondary-tx) !important; border: none; } .btn-label-primary:hover, .btn-label-primary:focus, .btn-label-primary:active, .btn-label-primary.show { background: var(--ta-brand-500) !important; color: #fff !important; border-color: transparent !important; box-shadow: none !important; } .btn-label-danger:hover, .btn-label-danger:focus, .btn-label-danger:active { background: #D92D20 !important; color: #fff !important; border-color: transparent !important; box-shadow: none !important; } .btn-label-success:hover, .btn-label-success:focus, .btn-label-success:active { background: #039855 !important; color: #fff !important; border-color: transparent !important; box-shadow: none !important; } .btn-label-secondary:hover, .btn-label-secondary:focus, .btn-label-secondary:active { background: var(--ta-hover) !important; color: var(--ta-heading) !important; border-color: transparent !important; box-shadow: none !important; } .btn-light { color: #000000; background-color: #f9f9f9; border-color: #dfdfdf; } .bg-primary, .badge.bg-primary { background-color: var(--ta-brand-500) !important; } /* ── Rozetler ───────────────────────────────────────────────────────────── */ .badge.bg-label-primary, .badge.bg-label-info { background: var(--ta-lbl-primary-bg) !important; color: var(--ta-lbl-primary-tx) !important; } .badge.bg-label-success { background: var(--ta-lbl-success-bg) !important; color: var(--ta-lbl-success-tx) !important; } .badge.bg-label-danger { background: var(--ta-lbl-danger-bg) !important; color: var(--ta-lbl-danger-tx) !important; } .badge.bg-label-warning { background: var(--ta-lbl-warning-bg) !important; color: var(--ta-lbl-warning-tx) !important; } .badge.bg-label-secondary { background: var(--ta-lbl-secondary-bg) !important; color: var(--ta-lbl-secondary-tx) !important; } .avatar-initial.bg-label-primary, .avatar-initial.bg-label-info { background: var(--ta-lbl-primary-bg) !important; color: var(--ta-lbl-primary-tx) !important; } /* ── Form elemanları ────────────────────────────────────────────────────── */ .form-control, .form-select { background-color: var(--ta-input-bg) !important; border-color: var(--ta-input-border) !important; color: var(--ta-heading) !important; border-radius: 8px; } .form-control:focus, .form-select:focus { border-color: var(--ta-brand-300) !important; box-shadow: 0 0 0 3px rgba(70, 95, 255, .12) !important; } .form-label { color: var(--ta-text); } .form-control::placeholder { color: var(--ta-muted); } .form-check-input:checked { background-color: var(--ta-brand-500) !important; border-color: var(--ta-brand-500) !important; } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(70, 95, 255, .12) !important; } /* ── Sekmeler ───────────────────────────────────────────────────────────── */ .nav-tabs .nav-link { color: var(--ta-muted); } .nav-tabs .nav-link.active { color: var(--ta-active-text) !important; border-bottom-color: var(--ta-brand-500) !important; background: transparent !important; } .nav-tabs .nav-link:hover { color: var(--ta-active-text); } /* ── Tablolar ───────────────────────────────────────────────────────────── */ .table { color: var(--ta-text); } .table thead th { color: var(--ta-muted) !important; border-bottom-color: var(--ta-border) !important; background: var(--ta-thead) !important; } .table td { border-color: var(--ta-border-soft) !important; color: var(--ta-text) !important; } .table .fw-medium { color: var(--ta-heading); } .table-hover tbody tr:hover { background: var(--ta-hover); --bs-table-hover-bg: var(--ta-hover); --bs-table-hover-color: var(--ta-heading); } /* ── select2 ────────────────────────────────────────────────────────────── */ .select2-container--default .select2-selection { background: var(--ta-input-bg) !important; border-color: var(--ta-input-border) !important; border-radius: 8px !important; } .select2-container--default .select2-selection__rendered { color: var(--ta-heading) !important; } .select2-dropdown { background: var(--ta-card) !important; border-color: var(--ta-border) !important; } .select2-search__field { background: var(--ta-input-bg) !important; border-color: var(--ta-input-border) !important; color: var(--ta-heading) !important; } .select2-results__option { color: var(--ta-text); } .select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable, .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--ta-brand-500) !important; color: #fff !important; } .select2-results__option--selected, .select2-results__option[aria-selected="true"] { background-color: var(--ta-active-bg) !important; color: var(--ta-active-text) !important; } .select2-container--default.select2-container--focus .select2-selection, .select2-container--default.select2-container--open .select2-selection { border-color: var(--ta-brand-300) !important; box-shadow: 0 0 0 3px rgba(70, 95, 255, .12) !important; } /* ── flatpickr ──────────────────────────────────────────────────────────── */ .flatpickr-calendar { background: var(--ta-card) !important; border: 1px solid var(--ta-border); box-shadow: 0 12px 16px -4px rgba(16,24,40,.12) !important; } .flatpickr-months, .flatpickr-weekdays, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--ta-heading); } .flatpickr-day { color: var(--ta-text); } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover { background: var(--ta-brand-500) !important; border-color: var(--ta-brand-500) !important; color: #fff !important; } .flatpickr-day.today { border-color: var(--ta-brand-500); } .flatpickr-day:hover { background: var(--ta-hover); } /* ── SweetAlert2 ────────────────────────────────────────────────────────── */ .swal2-popup { background: var(--ta-card) !important; color: var(--ta-text) !important; border-radius: 16px !important; } .swal2-title { color: var(--ta-heading) !important; } .swal2-html-container { color: var(--ta-text) !important; } .swal2-styled.swal2-confirm { background-color: var(--ta-brand-500) !important; box-shadow: none !important; border-radius: 8px !important; } .swal2-styled.swal2-confirm:hover { background-color: var(--ta-brand-600) !important; } /* ── Dropdown + Modal ───────────────────────────────────────────────────── */ .dropdown-menu { background: var(--ta-card) !important; border: 1px solid var(--ta-border); border-radius: 12px; box-shadow: 0 12px 16px -4px rgba(16, 24, 40, .12); color: var(--ta-text); } .dropdown-item { color: var(--ta-text); } .dropdown-item:hover { background: var(--ta-hover); color: var(--ta-heading); } .modal-content { background: var(--ta-card) !important; border-radius: 16px !important; border: 1px solid var(--ta-border); color: var(--ta-text); } /* ── Sağdaki ayar (customizer) düğmesi ──────────────────────────────────── */ .template-customizer-open-btn, .template-customizer .btn-primary { background: var(--ta-brand-500) !important; border-color: var(--ta-brand-500) !important; }