/* ========================================================================== Acil Destek - Ikincil tema rengi (koyu lacivert) override'lari -------------------------------------------------------------------------- Ana renk (birincil) TURUNCU #FD7522 olarak kalir; bu dosya ona DOKUNMAZ. Sadece beyaz metin kontrasti dusuk kalan yuzeyleri ve markaya uymayan mor (#5f60b9) artiklarini koyu lacivert ile degistirir. Kontrast (WCAG 2.1, beyaz metin uzerine): #FD7522 turuncu zemin ...... 2.71:1 (esik 4.5:1 - KALIYOR) #221C6B lacivert zemin ..... 14.52:1 (AA + AAA) #2E2789 lacivert hover ..... 11.88:1 (AA + AAA) ONEMLI: backend.css (462 KB) urun guncellemesinde ezilir. Bu yuzden hicbir override oraya yazilmaz; bu ayri dosya backend.css'ten SONRA yuklenir. Yuklendigi yerler: - resources/views/components/master-layout.blade.php (panel) - resources/views/layouts/guest.blade.php (login/auth) ========================================================================== */ :root { --ad-navy: #221c6b; --ad-navy-hover: #2e2789; --ad-navy-rgb: 34, 28, 107; --ad-navy-subtle: rgba(34, 28, 107, 0.08); /* Bootstrap link degiskenleri: mor #5f60b9 -> lacivert */ --bs-link-color: #221c6b; --bs-link-color-rgb: 34, 28, 107; --bs-link-hover-color: #2e2789; --bs-link-hover-color-rgb: 46, 39, 137; } /* -------------------------------------------------------------------------- 1) TABLO BASLIKLARI backend.css: .table thead th,table thead th{background:var(--bs-primary)} Turuncu zemin + beyaz metin = 2.71:1. Lacivert zemin ile 14.52:1. -------------------------------------------------------------------------- */ .table thead th, table thead th, table.dataTable > thead > tr > th, table.dataTable > thead > tr > td { background: var(--ad-navy); color: var(--bs-white); } .table thead th span, table thead th span, .table thead th a, table thead th a, .table thead th i, table thead th i { color: var(--bs-white); } /* -------------------------------------------------------------------------- 2) IKINCIL BUTONLAR (.btn-secondary) backend.css: #8f9fbc + beyaz metin = 2.68:1. Lacivert ile 14.52:1. .btn-primary'ye DOKUNULMAZ - turuncu kalir. -------------------------------------------------------------------------- */ .btn-secondary { --bs-btn-color: #fff; --bs-btn-bg: var(--ad-navy); --bs-btn-border-color: var(--ad-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ad-navy-hover); --bs-btn-hover-border-color: var(--ad-navy-hover); --bs-btn-focus-shadow-rgb: var(--ad-navy-rgb); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ad-navy-hover); --bs-btn-active-border-color: var(--ad-navy-hover); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--ad-navy); --bs-btn-disabled-border-color: var(--ad-navy); } .btn-secondary-subtle { --bs-btn-color: var(--ad-navy); --bs-btn-bg: var(--ad-navy-subtle); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ad-navy-hover); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ad-navy-hover); --bs-btn-disabled-bg: var(--ad-navy); } /* -------------------------------------------------------------------------- 3) AKTIF SEKME / NAV-PILLS VURGUSU .nav-tabs aktif sekme turuncu zemin + beyaz metin idi (2.71:1) -> lacivert. .nav-pills aktif pill: lacivert metin, %8 lacivert zemin (12.45:1). -------------------------------------------------------------------------- */ .nav-tabs { --bs-nav-tabs-link-active-color: var(--bs-white); --bs-nav-tabs-link-active-bg: var(--ad-navy); --bs-nav-tabs-link-active-border-color: var(--ad-navy) var(--ad-navy) var(--ad-navy); } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-item .nav-link.active, .nav-tabs .nav-item.active .nav-link, .nav-tabs .nav-item .nav-link:hover { background-color: var(--ad-navy); color: var(--bs-white); } .nav-pills { --bs-nav-pills-link-active-color: var(--bs-white); --bs-nav-pills-link-active-bg: var(--ad-navy); } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--ad-navy-subtle); color: var(--ad-navy); } .nav-pills .nav-link:hover { color: var(--ad-navy); } /* Ayarlar sayfasindaki dolu (solid) aktif pill */ .setting-pills .nav-pills .nav-link.active { background-color: var(--ad-navy); color: var(--bs-white); } /* style-three: alt cizgi seklindeki sekme vurgusu */ .nav.nav-pills.style-three .nav-link.active:before, .nav.nav-pills.style-three .nav-link:hover:before, .nav.nav-pills.style-three .nav-link:before { background: var(--ad-navy); } /* -------------------------------------------------------------------------- 4) ISARETLI CHECKBOX / RADIO backend.css'te mor #5f60b9 sabit kodlu (kenarlik + SVG tik/nokta). Tablo basligi icindeki kutucuklar backend.css'te beyaz kalir (daha yuksek ozgulluk) - lacivert zemin uzerinde beyaz kutu + lacivert tik olarak okunur. -------------------------------------------------------------------------- */ .form-check-input:checked { border-color: var(--ad-navy); } .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23221C6B' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E"); } .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23221C6B'/%3E%3C/svg%3E"); } .form-check-input[type="checkbox"]:indeterminate { background-color: var(--ad-navy); border-color: var(--ad-navy); } /* -------------------------------------------------------------------------- 5) DUZ LINKLERI Sadece sinifi olmayan (duz) icerik linkleri hedeflenir; sidebar, header, dropdown, buton vb. hepsinin sinifi oldugu icin etkilenmez. -------------------------------------------------------------------------- */ .content-page a:not([class]), .card-body a:not([class]), .table tbody a:not([class]), table tbody a:not([class]), .login-content a:not([class]) { color: var(--ad-navy); } .content-page a:not([class]):hover, .card-body a:not([class]):hover, .table tbody a:not([class]):hover, table tbody a:not([class]):hover, .login-content a:not([class]):hover { color: var(--ad-navy-hover); text-decoration: underline; } /* -------------------------------------------------------------------------- 6) AYARLAR SAYFASI - SOL MENU SABIT (STICKY) Ayarlar sekmesi 16 satira ciktigi icin, sagdaki uzun formlarda asagi inildiginde menu ekranin disinda kaliyordu; sekme degistirmek icin her seferinde basa donmek gerekiyordu. Menu artik ust cubugun altina yapisiyor. Olculer: .iq-top-navbar -> position:fixed, min-height:73px => 90px ust bosluk max-height -> menu ekrana sigmazsa KENDI ICINDE kayar; aksi halde 16 sekmenin sonuncularina hic ulasilamazdi. Yalnizca lg ve uzeri: kucuk ekranda menu zaten icerigin ustunde tek sutun akiyor, orada sabitlemek ters etki yapar. -------------------------------------------------------------------------- */ @media (min-width: 992px) { .setting-sticky { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(var(--ad-navy-rgb), 0.35) transparent; } .setting-sticky::-webkit-scrollbar { width: 6px; } .setting-sticky::-webkit-scrollbar-thumb { background: rgba(var(--ad-navy-rgb), 0.35); border-radius: 3px; } .setting-sticky::-webkit-scrollbar-track { background: transparent; } } /* -------------------------------------------------------------------------- KOYU TEMA (data-bs-theme="dark") - lacivert cok koyu kaldigi icin metin/zemin rollerini biraz acilmis lacivert ile dengele. -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --ad-navy: #3b34a0; --ad-navy-hover: #4a43b8; --ad-navy-rgb: 59, 52, 160; --ad-navy-subtle: rgba(122, 116, 214, 0.18); --bs-link-color: #9b96e8; --bs-link-color-rgb: 155, 150, 232; --bs-link-hover-color: #b3aef0; --bs-link-hover-color-rgb: 179, 174, 240; } [data-bs-theme="dark"] .nav-pills .nav-link.active, [data-bs-theme="dark"] .nav-pills .show > .nav-link { color: #b3aef0; } [data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%239B96E8' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E"); } [data-bs-theme="dark"] .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%239B96E8'/%3E%3C/svg%3E"); }