/* * ProConnect — koyu tema. * * YAKLAŞIM: `bundle.css` derlenmiş (248 KB) ve kaynak Sass'ı depoda yok, bu yüzden * tema yeniden derlenmiyor; bu dosya onun ÜZERİNE biniyor ve yalnız YÜZEYLERİ * (arka plan, metin, kenarlık) değiştiriyor. Vurgu rengi bilerek ellenmiyor — * böylece beyaz etiket ortakları (eLogo kırmızı, eKüp mavi) kendi renkleriyle * koyu temada da doğru görünüyor. * * Her kural `html[data-theme="dark"]` altında: öznitelik yokken bu dosyanın * hiçbir etkisi olmuyor, yani açık tema birebir eskisi gibi kalıyor. * * `!important` bolca var çünkü bundle.css'te de var * (ör. `.table td,.table th{background-color:#fff!important}`). * * KAPSAM DIŞI: yönetim paneli (`layouts.panel`) ayrı bir tema kullanıyor; belge * önizlemeleri (XSLT/PDF) bilerek AÇIK kalıyor — onlar evrak, ekran değil. */ :root { --pc-bg: #15181d; /* sayfa zemini */ --pc-yuzey: #1e2229; /* kart, tablo, panel */ --pc-yuzey-2: #262b33; /* modal, açılır menü, girdi */ --pc-yuzey-3: #2d333c; /* hover, çizgili satır */ --pc-kenar: #333a44; --pc-kenar-2: #3f4652; --pc-metin: #e4e6eb; --pc-metin-2: #a6b0bd; --pc-metin-3: #7c8696; } /* ---------------------------------------------------------------- iskelet */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--pc-bg) !important; color: var(--pc-metin); } html[data-theme="dark"] .main-wrapper, html[data-theme="dark"] .content-wrapper { background-color: var(--pc-bg); } html[data-theme="dark"] .sidebar { background-color: var(--pc-yuzey) !important; border-right: 1px solid var(--pc-kenar); } html[data-theme="dark"] .sidebar .logo { background-color: var(--pc-yuzey) !important; border-bottom: 1px solid var(--pc-kenar); } /* Açık/koyu logo seçimi aşağıda, giriş ekranı bölümünde tanımlı (kenar çubuğu ve giriş ekranı aynı kuralı paylaşıyor). */ html[data-theme="dark"] .sidebar .sidebar-nav li a { color: var(--pc-metin-2); } html[data-theme="dark"] .sidebar .sidebar-nav li a:hover, html[data-theme="dark"] .sidebar .sidebar-nav li a:focus { background-color: var(--pc-yuzey-3) !important; color: var(--pc-metin) !important; } /* bundle.css bu üçünü ayrıca #f8f9fa / #fff yapıyor — hepsi ezilmeli, yoksa kenar çubuğunda beyaz şeritler kalıyor. */ html[data-theme="dark"] .sidebar .logo-img, html[data-theme="dark"] .sidebar .sidebar-nav li.has-child, html[data-theme="dark"] .sidebar .sidebar-nav li.has-child > a, html[data-theme="dark"] .sidebar .sidebar-nav li.has-child > a.collapsed { background-color: var(--pc-yuzey) !important; } html[data-theme="dark"] .sidebar .sidebar-nav li.has-child > a.collapsed { color: var(--pc-metin-2) !important; } /* * ETKİN MENÜ — bu kural blokları yukarıdakilerden SONRA gelmek zorunda: has-child * ezmesi `!important` ile yazıldığı için etkin satırın vurgusunu da silmişti ve * "hangisi seçili belli olmuyor" haline gelmişti. * * Sol kenardaki çubuk bilinçli: koyu zeminde %18'lik mavi dolgu tek başına yeterince * ayırt edici değil. */ html[data-theme="dark"] .sidebar .sidebar-nav li.active > a, html[data-theme="dark"] .sidebar .sidebar-nav li.has-child.active > a, html[data-theme="dark"] .sidebar .sidebar-nav li.has-child.active > a.collapsed { background-color: rgba(0, 151, 232, .18) !important; color: #45b6f2 !important; box-shadow: inset 3px 0 0 #0097e8; } /* Açılmış alt menü listesi */ html[data-theme="dark"] .sidebar .sidebar-nav li.has-child .nav-collapse { background-color: var(--pc-bg) !important; } html[data-theme="dark"] .sidebar .sidebar-nav li.has-child .nav-collapse a { color: var(--pc-metin-2) !important; } html[data-theme="dark"] .sidebar .sidebar-nav li.has-child .nav-collapse a:hover { background-color: var(--pc-yuzey-3) !important; color: var(--pc-metin) !important; } /* Kenar çubuğu alt bilgi bloğu (sürüm, kota, kontör, destek) */ html[data-theme="dark"] .pcSidebarAlt { background: var(--pc-yuzey-2) !important; color: var(--pc-metin-2) !important; border-top: 1px solid var(--pc-kenar); } html[data-theme="dark"] .pcSidebarAlt p, html[data-theme="dark"] .pcSidebarAlt b, html[data-theme="dark"] .pcSidebarAlt .versionBilgisiDiv { color: var(--pc-metin-2) !important; } html[data-theme="dark"] .versionBilgisiDetay { background: var(--pc-yuzey-2) !important; box-shadow: 0 0 10px rgba(0, 0, 0, .5) !important; } html[data-theme="dark"] .versionBilgisiDetay a, html[data-theme="dark"] .versionBilgisiDetay b { color: var(--pc-metin-2) !important; } /* ------------------------------------------------- etkin alt menü maddesi * Kurallar İKİ TEMA için de burada: `pcAltAktif` sınıfı menüde yeni * (PanelHelper::altMenuAttrs) ve açık temada da bir karşılığı olmalı — eskiden alt * maddeler hiç işaretlenmiyordu. */ .sidebar .sidebar-nav .nav-collapse a.pcAltAktif { background-color: rgba(0, 151, 232, .12); color: #0097e8 !important; font-weight: 600; box-shadow: inset 3px 0 0 #0097e8; } html[data-theme="dark"] .sidebar .sidebar-nav .nav-collapse a.pcAltAktif { background-color: rgba(0, 151, 232, .18) !important; color: #45b6f2 !important; } /* ---------------------------------------------------------------- kartlar */ html[data-theme="dark"] .card, html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-body, html[data-theme="dark"] .well { background-color: var(--pc-yuzey) !important; border-color: var(--pc-kenar) !important; color: var(--pc-metin); box-shadow: none; } html[data-theme="dark"] .card .card-separator, html[data-theme="dark"] .panel-heading, html[data-theme="dark"] .panel-footer { background-color: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar) !important; color: var(--pc-metin); } html[data-theme="dark"] .card .card-title, html[data-theme="dark"] .card .card-subtitle, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--pc-metin); } html[data-theme="dark"] .text-muted, html[data-theme="dark"] small, html[data-theme="dark"] .help-block { color: var(--pc-metin-3) !important; } /* ---------------------------------------------------------------- tablolar */ html[data-theme="dark"] .table, html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tbody > tr > th, html[data-theme="dark"] .table > thead > tr > td, html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { background-color: var(--pc-yuzey) !important; border-color: var(--pc-kenar) !important; color: var(--pc-metin); } html[data-theme="dark"] .table > thead > tr > th { background-color: var(--pc-yuzey-2) !important; color: var(--pc-metin-2); } /* * SATIR AYIRICI. Tek kayıtlı listede dip toplam + kayıt + dip toplam tek bir blok gibi * görünüyordu: koyu zeminde yalnız dolgu farkına güvenmek yetmiyor, hele satırlar çok * satırlı olunca (hücre içinde alt alta üç bilgi var) nerede bittiği seçilmiyor. * * Çizgi rengi `--pc-kenar` değil `--pc-kenar-2`: ilki (#333a44) taban satırın üstünde * neredeyse görünmüyordu. */ html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] table.dataTable tbody tr > td { border-top: 1px solid var(--pc-kenar-2) !important; } html[data-theme="dark"] .table > tbody > tr:first-child > td { border-top: 0 !important; } /* * ÜÇ AYRI KADEME: zebra, üzerine gelme ve seçili satır birbirinden ayrılmalı. * Önceki halinde zebra ile hover aynı değişkeni kullanıyordu, imleç satırın üstündeyken * hiçbir şey değişmiyordu. (Açık temada da aynı kusur vardı: bundle.css'te zebra ve * hover ikisi de #f2f4f8'di — orası da düzeltildi.) * * taban : --pc-yuzey (#1e2229) * zebra : --pc-yuzey-2 (#262b33) — hafif basamak * hover : mavi tint %16 — "buradasın" hissi, tıklanabilirlik * seçili : mavi tint %32 — hover'dan belirgin şekilde koyu */ /* * ZEBRA — hem `tr` HEM `td` eziliyor. * * bundle.css zebrayı SATIRA basıyor: * .table-striped > tbody > tr:nth-of-type(2n+1) { background-color:#f2f4f8 } * Yalnız `td`'yi ezmek yetmez: hücre saydam kaldığı ya da bir eklenti hücre zeminini * sıfırladığı an satırın açık rengi ortaya çıkar. (Aynı hatayı hover'da yapmıştık, * satır bembeyaz parlamıştı.) * * Renk `--pc-yuzey-2`'den biraz açık (#2b313b): koyu zeminde küçük farklar açık * zemindeki kadar kolay seçilmiyor. */ html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd), html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(2n+1), html[data-theme="dark"] table.dataTable tbody tr.odd, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(2n+1) > td, html[data-theme="dark"] table.dataTable tbody tr.odd > td, html[data-theme="dark"] table.dataTable tbody tr.odd > td.sorting_1 { background-color: #2b313b !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even), html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(2n), html[data-theme="dark"] table.dataTable tbody tr.even, html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > td, html[data-theme="dark"] table.dataTable tbody tr.even > td, html[data-theme="dark"] table.dataTable tbody tr.even > td.sorting_1 { background-color: var(--pc-yuzey) !important; } /* * Hover — zebra kurallarından SONRA (eşit özgüllükte sıra belirleyici). * * ⚠️ DÜZ RENK, saydam DEĞİL. İlk halinde `rgba(0,151,232,.16)` kullanılmıştı ve satır * bembeyaz-mavi parlıyordu: bundle.css `tr:hover`'a AÇIK bir zemin basıyor, benim * yarı saydam mavim de `td`'de onun ÜSTÜNE biniyordu; iki katman toplanınca açık mavi * çıkıyordu. Bu yüzden hem `tr` hem `td` eziliyor ve renk düz veriliyor. */ html[data-theme="dark"] .table-hover > tbody > tr:hover, html[data-theme="dark"] table.dataTable tbody tr:hover { background-color: #203c4d !important; } html[data-theme="dark"] .table-hover > tbody > tr:hover > td, html[data-theme="dark"] .table-hover > tbody > tr:hover > th, html[data-theme="dark"] table.dataTable tbody tr:hover > td, html[data-theme="dark"] table.dataTable tbody tr.odd:hover > td, html[data-theme="dark"] table.dataTable tbody tr.even:hover > td, html[data-theme="dark"] table.dataTable tbody tr:hover > td.sorting_1 { background-color: #203c4d !important; } /* ---------------------------------------------------------------- dip toplam satırı * Listelerin başına ve sonuna eklenen "Belge değildir, liste dip toplamıdır." satırları. * Kuralların İKİSİ de burada: açık tema kuralı tema seçicisi olmadan yazılıyor, çünkü * bu dosya her sayfada yükleniyor ve o satırların açık temada da kesin bir rengi olmalı * (eskiden yalnız zebra paritesine bağlıydı). */ .table-striped > tbody > tr.pcDipToplam, .table-striped > tbody > tr.pcDipToplam > td, .pcDipToplam, .pcDipToplam > td { background-color: #eef1f6 !important; } .pcDipToplam > td { font-size: 11px; } /* * Dip toplam KAYITTAN DAHA AÇIK. İlk denemede daha koyu yapılmıştı (#12151a) ama taban * satır da koyu olduğu için ayrım zayıf kaldı. Açık temadaki mantık doğru olanı: bu bir * "bant" (tablo başlığı gibi kabuk), kayıt değil — kayıtlardan ayrışması için daha açık * olmalı. Üstüne alt/üst çizgi de ekleniyor: renk farkı tartışmalı olabilir, çizgi değil. */ /* * ⚠️ ÖZGÜLLÜK: zebra seçicisi (`.table-striped > tbody > tr:nth-of-type(2n+1)`) * `.pcDipToplam`tan daha özgül. İkisi de `!important` olduğu için kazananı özgüllük * belirliyordu ve dip toplam satırı tek sıraya denk geldiğinde zebra rengine * düşüyordu. Seçici `.table-striped`/`table.dataTable` ile zincirlenerek zebranın * üstüne çıkarılıyor. */ html[data-theme="dark"] .table-striped > tbody > tr.pcDipToplam, html[data-theme="dark"] .table-striped > tbody > tr.pcDipToplam > td, html[data-theme="dark"] table.dataTable tbody tr.pcDipToplam, html[data-theme="dark"] table.dataTable tbody tr.pcDipToplam > td, html[data-theme="dark"] .table > tbody > tr.pcDipToplam, html[data-theme="dark"] .table > tbody > tr.pcDipToplam > td { background-color: #3f4a5a !important; color: var(--pc-metin-2) !important; border-top: 1px solid var(--pc-kenar-2) !important; border-bottom: 1px solid var(--pc-kenar-2) !important; } html[data-theme="dark"] .pcDipToplam > td b { color: var(--pc-metin) !important; } /* Dip toplam bir kayıt değil: üzerine gelince vurgulanmasın. */ html[data-theme="dark"] .table-hover > tbody > tr.pcDipToplam:hover, html[data-theme="dark"] .table-hover > tbody > tr.pcDipToplam:hover > td, html[data-theme="dark"] table.dataTable tbody tr.pcDipToplam:hover, html[data-theme="dark"] table.dataTable tbody tr.pcDipToplam:hover > td { background-color: #3f4a5a !important; } /* ---------------------------------------------------------------- formlar */ /* * Girdiler tek tek tip sayılarak değil geniş seçiciyle alınıyor: tipleri saymak * DataTables'ın `type="search"` arama kutusunu atlamıştı (listelerin sağ üstünde * bembeyaz kalıyordu). Düğme gibi davranan tipler dışarıda bırakılıyor. */ html[data-theme="dark"] .form-control, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]) { background-color: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar-2) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .form-control::placeholder { color: var(--pc-metin-3) !important; } html[data-theme="dark"] .form-control[readonly], html[data-theme="dark"] .form-control[disabled] { background-color: var(--pc-bg) !important; color: var(--pc-metin-3) !important; } html[data-theme="dark"] .input-group-addon { background-color: var(--pc-yuzey-3) !important; border-color: var(--pc-kenar-2) !important; color: var(--pc-metin-2) !important; } html[data-theme="dark"] label, html[data-theme="dark"] .control-label { color: var(--pc-metin-2); } /* * select2 — portalda her listede var. Üç ayrı tema sınıfı dolaşımda * (`--default`, `--bootstrap`, `--classic`) ve hangisinin kullanıldığı ekrana göre * değişiyor; üçü de ele alınıyor, yoksa açılır liste beyaz kalıyor. */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple, html[data-theme="dark"] .select2-container--classic .select2-selection--single, html[data-theme="dark"] .select2-container--classic .select2-selection--multiple, html[data-theme="dark"] .select2-container--bootstrap .select2-selection, html[data-theme="dark"] .select2-dropdown, html[data-theme="dark"] .select2-container--default .select2-dropdown, html[data-theme="dark"] .select2-container--classic .select2-dropdown, html[data-theme="dark"] .select2-container--bootstrap .select2-dropdown, html[data-theme="dark"] .select2-search--dropdown .select2-search__field, html[data-theme="dark"] .select2-container--bootstrap .select2-search--dropdown .select2-search__field { background-color: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar-2) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .select2-results, html[data-theme="dark"] .select2-results__options, html[data-theme="dark"] .select2-results__option { background-color: var(--pc-yuzey-2) !important; color: var(--pc-metin) !important; } /* Seçili / üzerinde gezinilen seçenek */ html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] .select2-container--classic .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] .select2-container--bootstrap .select2-results__option--highlighted { background-color: #0097e8 !important; color: #fff !important; } html[data-theme="dark"] .select2-results__option[aria-selected=true], html[data-theme="dark"] .select2-container--bootstrap .select2-results__option[aria-selected=true] { background-color: var(--pc-yuzey-3) !important; color: var(--pc-metin) !important; } /* Çoklu seçimdeki etiketler (#e4e4e4 zemin) */ html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice, html[data-theme="dark"] .select2-container--classic .select2-selection--multiple .select2-selection__choice, html[data-theme="dark"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { background-color: var(--pc-yuzey-3) !important; border-color: var(--pc-kenar-2) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, html[data-theme="dark"] .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { color: var(--pc-metin) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--pc-metin-3) !important; } /* select2 pasif durumlar */ html[data-theme="dark"] .select2-container--bootstrap.select2-container--disabled .select2-selection, html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection { background-color: var(--pc-bg) !important; color: var(--pc-metin-3) !important; } /* ---------------------------------------------------------------- düğmeler */ html[data-theme="dark"] .btn-default { background-color: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar-2) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus { background-color: var(--pc-yuzey-3) !important; color: var(--pc-metin) !important; } /* * ETKİN FİLTRE — bu kural yukarıdaki .btn-default ezmesinden SONRA gelmek zorunda: * blanket ezme `.btn-default.active`ın vurgusunu da siliyordu ve listelerin üstündeki * filtre satırında hangisinin seçili olduğu kaybolmuştu. */ html[data-theme="dark"] .btn-default.active, html[data-theme="dark"] .btn-default.active:hover, html[data-theme="dark"] .btn-default.active:focus, html[data-theme="dark"] .btn-group > .btn.active { background-color: #0097e8 !important; border-color: #0097e8 !important; color: #fff !important; } /* * `.btn-secondary` Bootstrap 3'te YOK (Bootstrap 4 sınıfı) — projede 43 modal kapatma * düğmesi bunu kullanıyor ve hiçbir tema kuralına tutunmuyor, tarayıcının varsayılan * açık gri düğmesine düşüyor. Koyu temada gövde metni açık olunca "açık gri zemin + * açık yazı" çıkıp okunamaz hale geliyordu. */ html[data-theme="dark"] .btn-secondary { background-color: var(--pc-yuzey-3) !important; border: 1px solid var(--pc-kenar-2) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .btn-secondary:hover, html[data-theme="dark"] .btn-secondary:focus { background-color: var(--pc-kenar-2) !important; color: #fff !important; } /* Açık temada da sınıfsız kalıyordu; hiç değilse çerçeveli ve okunur olsun. */ html:not([data-theme="dark"]) .btn-secondary { background-color: #fff; border: 1px solid #ccc; color: #333; } /* ------------------------------------------------- modal / açılır / sekme */ html[data-theme="dark"] .modal-content { background-color: var(--pc-yuzey) !important; color: var(--pc-metin); border-color: var(--pc-kenar) !important; } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--pc-kenar) !important; background-color: var(--pc-yuzey) !important; } /* Başlık metni: bundle.css onu açık griye boyuyor, koyu zeminde kayboluyordu. */ html[data-theme="dark"] .modal-title { color: var(--pc-metin) !important; } html[data-theme="dark"] .modal-backdrop.in { opacity: .7; } html[data-theme="dark"] .close { color: var(--pc-metin); opacity: .7; text-shadow: none; } html[data-theme="dark"] .dropdown-menu { background-color: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } html[data-theme="dark"] .dropdown-menu > li > a { color: var(--pc-metin-2) !important; } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: var(--pc-yuzey-3) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .dropdown-menu .divider { background-color: var(--pc-kenar) !important; } html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--pc-kenar) !important; } html[data-theme="dark"] .nav-tabs > li > a { color: var(--pc-metin-2) !important; } html[data-theme="dark"] .nav-tabs > li.active > a, html[data-theme="dark"] .nav-tabs > li.active > a:hover, html[data-theme="dark"] .nav-tabs > li.active > a:focus { background-color: var(--pc-yuzey) !important; border-color: var(--pc-kenar) !important; } html[data-theme="dark"] .tab-content { background-color: transparent !important; } /* * `.proconnectNav` — modallardaki sekme çubuğu (ihracat, detay ekle vb.). * app.blade.php içinde `background:#f9f9f970` ile tanımlı; koyu temada açık gri bir * bant olarak kalıyor ve pasif sekmelerin yazısı üstünde okunmuyordu. * Etkin sekme de `background:#fff` alıyor, o da eziliyor. */ html[data-theme="dark"] .proconnectNav { background: var(--pc-yuzey-2) !important; } html[data-theme="dark"] .proconnectNav > li > a { color: var(--pc-metin-2) !important; } html[data-theme="dark"] .proconnectNav > li > a:hover { background-color: var(--pc-yuzey-3) !important; color: var(--pc-metin) !important; border-color: transparent !important; } html[data-theme="dark"] .proconnectNav > li.active > a, html[data-theme="dark"] .proconnectNav > li.active > a:focus, html[data-theme="dark"] .proconnectNav > li.active > a:hover { background-color: var(--pc-yuzey) !important; color: var(--pc-metin) !important; border-top-color: #0097e8 !important; border-left-color: var(--pc-kenar) !important; border-right-color: var(--pc-kenar) !important; } html[data-theme="dark"] .ihracatRowEdited { background: var(--pc-yuzey-3) !important; } /* `.pc-table` başlıkları koyu metin + koyu alt çizgi ile tanımlı (#333). */ html[data-theme="dark"] .pc-table thead th { color: var(--pc-metin-2) !important; border-bottom-color: var(--pc-kenar) !important; } html[data-theme="dark"] .breadcrumb { background-color: transparent !important; } html[data-theme="dark"] hr { border-color: var(--pc-kenar); } /* * Belge Özet modalı (#detail-view-modal) — veri ekranı, koyu temayı izler. * Açıklama paragrafları satır içinde `color:#0000009e` ile yazılmış (siyahın %62'si); * koyu zeminde okunmuyordu, bu yüzden açıkça eziliyor. */ html[data-theme="dark"] #detail-view-modal p[style*="#0000009e"], html[data-theme="dark"] #detail-view-modal p { color: var(--pc-metin-2) !important; } html[data-theme="dark"] #detail-view-modal h1, html[data-theme="dark"] #detail-view-modal h2, html[data-theme="dark"] #detail-view-modal h3, html[data-theme="dark"] #detail-view-modal h4 { color: #45b6f2 !important; } /* ---------------------------------------------------------------- liste/sayfalama */ html[data-theme="dark"] .list-group-item { background-color: var(--pc-yuzey) !important; border-color: var(--pc-kenar) !important; color: var(--pc-metin); } html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background-color: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar) !important; color: var(--pc-metin-2) !important; } /* DataTables kabuğu */ html[data-theme="dark"] .dataTables_wrapper, html[data-theme="dark"] .dataTables_info, html[data-theme="dark"] .dataTables_length, html[data-theme="dark"] .dataTables_filter { color: var(--pc-metin-2) !important; } /* * "İşleniyor..." katmanı. Eklentinin kendi stili beyazdan saydama giden bir degrade * (`background:linear-gradient(...)`) — koyu temada listenin ortasında parlayan beyaz * bir şerit bırakıyordu. Degradenin tamamı eziliyor, yoksa yalnız background-color * yazmak işe yaramaz: degrade onun üstünde kalır. */ html[data-theme="dark"] .dataTables_wrapper .dataTables_processing { background: var(--pc-yuzey-2) !important; background-image: none !important; color: var(--pc-metin) !important; border: 1px solid var(--pc-kenar) !important; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); } /* Sayfalama düğmeleri — eklentinin kendi beyaz/degrade stili */ html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--pc-metin-2) !important; border-color: transparent !important; background: transparent !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #fff !important; border: 1px solid #0097e8 !important; background: #0097e8 !important; background-image: none !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: var(--pc-metin) !important; border: 1px solid var(--pc-kenar-2) !important; background: var(--pc-yuzey-3) !important; background-image: none !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--pc-metin-3) !important; background: transparent !important; border-color: transparent !important; } /* ---------------------------------------------------------------- bildirim merkezi */ html[data-theme="dark"] .pcZilMenu { background-color: var(--pc-yuzey-2) !important; } html[data-theme="dark"] .pcZilBaslik, html[data-theme="dark"] .pcZilAlt { border-color: var(--pc-kenar) !important; } html[data-theme="dark"] .pcZilBos, html[data-theme="dark"] .pcZilYukleniyor { color: var(--pc-metin-3) !important; } html[data-theme="dark"] .bildirimSatir { background: var(--pc-yuzey-2) !important; border-bottom-color: var(--pc-kenar) !important; color: var(--pc-metin) !important; } /* Okunmamış satır koyuda da ayırt edilsin — açık temadaki mavi zemin yerine vurgu renginden bir iz. */ html[data-theme="dark"] .bildirimSatir.bildirimOkunmamis { background: var(--pc-yuzey-3) !important; box-shadow: inset 3px 0 0 #0097e8; } html[data-theme="dark"] .bildirimSatir:hover { background: var(--pc-yuzey-3) !important; } html[data-theme="dark"] .bildirimBaslik { color: var(--pc-metin) !important; } html[data-theme="dark"] .bildirimGovde { color: var(--pc-metin-2) !important; } html[data-theme="dark"] .bildirimTarih { color: var(--pc-metin-3) !important; } html[data-theme="dark"] #pcPushSerit { background: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] #pcPushSerit div { color: var(--pc-metin-2) !important; } /* ---------------------------------------------------------------- uyarı kutuları * Bootstrap 3 uyarıları pastel zemin + koyu yazı (ör. danger: #f2dede / #a94442). * Koyu temada ekranın üstünde parlayan açık bir blok olarak kalıyorlardı. * * Rozetlerdeki mantığın aynısı: AYNI TONDAN sönük zemin + açık yazı. Ölçülen * kontrastlar 6.9–7.9:1, yani uyarı metni rahat okunuyor. */ html[data-theme="dark"] .alert-success { background-color: #1d3324 !important; border-color: #2c5133 !important; color: #8fd694 !important; } html[data-theme="dark"] .alert-info { background-color: #17323d !important; border-color: #245063 !important; color: #7cc9e3 !important; } html[data-theme="dark"] .alert-warning { background-color: #3a2f16 !important; border-color: #5c4a22 !important; color: #e8c072 !important; } html[data-theme="dark"] .alert-danger { background-color: #3b2022 !important; border-color: #63353a !important; color: #f09b98 !important; } /* app.blade.php'de tanımlı kesik çizgili uyarı varyantı (koyu kırmızı metin) */ html[data-theme="dark"] .alert-danger-pastal { border-color: #63353a !important; color: #f09b98 !important; } /* Uyarı içindeki bağlantı ve kalın metin, uyarının kendi tonunda kalsın */ html[data-theme="dark"] .alert a, html[data-theme="dark"] .alert .alert-link { color: inherit !important; text-decoration: underline; } html[data-theme="dark"] .alert b, html[data-theme="dark"] .alert strong { color: inherit !important; } /* ---------------------------------------------------------------- renkli düğmeler * Bootstrap'in dolu düğmeleri beyaz yazıyla zaten düşük kontrastlı * (ölçüldü: warning 1.95:1, info 2.09:1, success 2.48:1, danger 3.96:1). * Koyu zeminde ayrıca göz alıyorlar. Tonlar koyultuluyor: renk kimliği ve "bu bir * eylem düğmesi" algısı korunuyor, kontrast 4.9–6.0:1 aralığına çıkıyor. */ html[data-theme="dark"] .btn-danger { background-color: #b03a36 !important; border-color: #8f2f2c !important; color: #fff !important; } html[data-theme="dark"] .btn-warning { background-color: #96661f !important; border-color: #7a5219 !important; color: #fff !important; } html[data-theme="dark"] .btn-success { background-color: #2f7d32 !important; border-color: #266628 !important; color: #fff !important; } html[data-theme="dark"] .btn-info { background-color: #1b7a94 !important; border-color: #156278 !important; color: #fff !important; } html[data-theme="dark"] .btn-primary { background-color: #0b74b5 !important; border-color: #095e93 !important; color: #fff !important; } html[data-theme="dark"] .btn-danger:hover, html[data-theme="dark"] .btn-warning:hover, html[data-theme="dark"] .btn-success:hover, html[data-theme="dark"] .btn-info:hover, html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .btn-danger:focus, html[data-theme="dark"] .btn-warning:focus, html[data-theme="dark"] .btn-success:focus, html[data-theme="dark"] .btn-info:focus, html[data-theme="dark"] .btn-primary:focus { filter: brightness(1.2); } /* ------------------------------------------------- renkli rozetler (--pc-renk) * ORTAK MEKANİZMA. Kullanıcı etiketleri (tags tablosundan gelen renkler) ve Genel * Bakış rozetleri satır içi `style="background:…;color:…"` ile basılıyor; satır içi * stil tema seçicisiyle ezilemez ve renk de sabit değil, veriden geliyor. * * Çözüm: basan taraf rengi ayrıca `--pc-renk` özel değişkeninde taşıyor, koyu tema da * ondan SÖNÜK ZEMİN + AÇIK YAZI türetiyor. Bootstrap etiketlerine elle yazdığımız * paletin aynısı, bu sefer hesaplanarak. * * `color-mix()` desteklenmiyorsa bu iki kural düşer ve satır içi renkler olduğu gibi * kalır — yani eski davranış. Bozulma olmaz. */ html[data-theme="dark"] .pcRenk { background: color-mix(in srgb, var(--pc-renk) 20%, #1e2229) !important; color: color-mix(in srgb, var(--pc-renk) 62%, #ffffff) !important; border: 1px solid color-mix(in srgb, var(--pc-renk) 38%, #1e2229) !important; } /* ---------------------------------------------------------------- etiket / rozet * Bootstrap 3'ün etiket renkleri parlak ve doygun; beyaz yazıyla kontrastları zaten * çok düşük (ölçüldü: info 2.09:1, warning 1.95:1, success 2.48:1 — hiçbir eşiği * geçmiyor). Açık zeminde "renkli çip" gibi okunuyorlar, koyu zeminde göz alıyor ve * yazı iyice kayboluyor. * * Koyu temada standart rozet biçimi: AYNI TONDAN sönük zemin + açık yazı. Ölçülen * kontrastlar 5.6–6.9:1 aralığında, yani AA'yı rahat geçiyor. Renk kimliği (yeşil = * başarılı, kırmızı = hata) korunuyor, yalnız parlaklık düşüyor. */ html[data-theme="dark"] .label-success, html[data-theme="dark"] .badge-success { background-color: #24402a !important; color: #7fd97f !important; } html[data-theme="dark"] .label-info, html[data-theme="dark"] .badge-info { background-color: #1d3c48 !important; color: #6fd3ef !important; } html[data-theme="dark"] .label-warning, html[data-theme="dark"] .badge-warning { background-color: #43351d !important; color: #f0b860 !important; } html[data-theme="dark"] .label-danger, html[data-theme="dark"] .badge-danger { background-color: #45252a !important; color: #ff8a85 !important; } html[data-theme="dark"] .label-default, html[data-theme="dark"] .badge, html[data-theme="dark"] .badge-default { background-color: #2d333c !important; color: #b9c0c9 !important; } html[data-theme="dark"] .label-primary, html[data-theme="dark"] .badge-primary { background-color: #15354a !important; color: #45b6f2 !important; } /* Tıklanabilir etiketler (Detaylı Durum, İstemci Pasif) biraz canlansın */ html[data-theme="dark"] a > .label:hover, html[data-theme="dark"] .label[data-toggle]:hover, html[data-theme="dark"] .clientStatusClick:hover { filter: brightness(1.35); } /* * KULLANICI ETİKETLERİ (ProConnect, Tahsil Edildi, eDefterPro…) buraya DAHİL DEĞİL: * renkleri `tags` tablosundan geliyor ve satır içi `style="background:…;color:…"` * olarak basılıyor (SendendInvoiceAjaxController:1040). Kullanıcının seçtiği renkleri * temaya göre değiştirmek bizim kararımız değil; zaten kendi metin renklerini de * taşıdıkları için okunuyorlar. */ /* ---------------------------------------------------------------- popover * Kabul/red sebebi, etiket seçimi gibi akışlar Bootstrap popover kullanıyor ve * popover hiç ele alınmamıştı: başlık bandı beyaz kalıp üstündeki yazı açık olunca * "Faturayı Kabul Sebebi" okunmuyordu. * * Ok (arrow) iki katmanlı: dış katman kenarlık, iç katman (:after) dolgu rengi. * Yalnız gövdeyi boyamak, okun ucunda beyaz bir üçgen bırakır. */ html[data-theme="dark"] .popover { background-color: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); color: var(--pc-metin); } html[data-theme="dark"] .popover-title { background-color: var(--pc-yuzey-3) !important; border-bottom-color: var(--pc-kenar) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .popover-content { color: var(--pc-metin) !important; } html[data-theme="dark"] .popover.top > .arrow { border-top-color: var(--pc-kenar) !important; } html[data-theme="dark"] .popover.top > .arrow:after { border-top-color: var(--pc-yuzey-2) !important; } html[data-theme="dark"] .popover.bottom > .arrow { border-bottom-color: var(--pc-kenar) !important; } html[data-theme="dark"] .popover.bottom > .arrow:after { border-bottom-color: var(--pc-yuzey-3) !important; } html[data-theme="dark"] .popover.left > .arrow { border-left-color: var(--pc-kenar) !important; } html[data-theme="dark"] .popover.left > .arrow:after { border-left-color: var(--pc-yuzey-2) !important; } html[data-theme="dark"] .popover.right > .arrow { border-right-color: var(--pc-kenar) !important; } html[data-theme="dark"] .popover.right > .arrow:after { border-right-color: var(--pc-yuzey-2) !important; } /* ---------------------------------------------------------------- kart başlığı * `.card-header` blade'lerde satır içi `background:#ececec` ile yazılmış (içeri * aktarma modalı, 3 yer) — satır içi stil ancak !important ile eziliyor. */ html[data-theme="dark"] .card-header { background: var(--pc-yuzey-2) !important; border-bottom: 1px solid var(--pc-kenar) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .card-header .card-title, html[data-theme="dark"] .card-header h1, html[data-theme="dark"] .card-header h2, html[data-theme="dark"] .card-header h3, html[data-theme="dark"] .card-header h4 { color: var(--pc-metin) !important; } html[data-theme="dark"] .pc-amount-input { background: var(--pc-yuzey-2) !important; color: var(--pc-metin) !important; } /* ------------------------------------------------- tarih seçici / çeşitli * Bu listeler tarih aralığıyla çalışıyor; takvim açılırı beyaz kalınca koyu temada * ekranın ortasında parlayan bir kutu oluyordu. */ html[data-theme="dark"] .datetimepicker, html[data-theme="dark"] .datepicker, html[data-theme="dark"] .bootstrap-datetimepicker-widget { background-color: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar) !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .datetimepicker td, html[data-theme="dark"] .datetimepicker th, html[data-theme="dark"] .datepicker td, html[data-theme="dark"] .datepicker th { background-color: transparent !important; color: var(--pc-metin) !important; } html[data-theme="dark"] .datetimepicker td.day:hover, html[data-theme="dark"] .datepicker td.day:hover, html[data-theme="dark"] .datetimepicker th:hover { background-color: var(--pc-yuzey-3) !important; } html[data-theme="dark"] .datetimepicker td.old, html[data-theme="dark"] .datetimepicker td.new, html[data-theme="dark"] .datepicker td.old, html[data-theme="dark"] .datepicker td.new { color: var(--pc-metin-3) !important; } html[data-theme="dark"] .pager > li > a, html[data-theme="dark"] .pager > li > span, html[data-theme="dark"] .img-thumbnail { background-color: var(--pc-yuzey-2) !important; border-color: var(--pc-kenar) !important; color: var(--pc-metin-2) !important; } /* Seçili satır — hover'dan (%16) belirgin şekilde koyu, üstüne gelince de kaybolmasın */ /* Seçili satır — hover'dan (#203c4d) belirgin koyu, üstüne gelince de kaybolmasın. Burada da düz renk: saydamlık alttaki katmanla toplanıp açık tona kayıyor. */ html[data-theme="dark"] .table > tbody > tr.active, html[data-theme="dark"] .table > tbody > tr.selected, html[data-theme="dark"] table.dataTable tbody tr.selected, html[data-theme="dark"] .table > tbody > tr.active > td, html[data-theme="dark"] .table > tbody > tr.active > th, html[data-theme="dark"] .table > tbody > tr > td.active, html[data-theme="dark"] .table > tbody > tr.selected > td, html[data-theme="dark"] table.dataTable tbody tr.selected > td, html[data-theme="dark"] table.dataTable tbody tr.selected:hover > td, html[data-theme="dark"] .table-hover > tbody > tr.active:hover > td { background-color: #15547a !important; box-shadow: inset 3px 0 0 #0097e8; } /* select2 pasif durumlar */ html[data-theme="dark"] .select2-container--bootstrap.select2-container--disabled .select2-selection, html[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection { background-color: var(--pc-bg) !important; color: var(--pc-metin-3) !important; } /* ------------------------------------------------- Genel Bakış (.ob-*) * Bu ekran kendi stilini blade içindeki