@charset "UTF-8"; /* | Nortical KABUK yamasi -- main.css'ten SONRA yuklenir. | | Bu dosya temanin bir parcasi degil, temayi panele oturtan ara katmandir. | Uc isi vardir: | | 1. BOOTSTRAP 4 -> 5 farkini kapatmak. | Tema Bootstrap 4.5 uzerine yazilmisti; panel Bootstrap 5.3 kullanir. | main.css'in bicimledigi bazi kancalar BS5'te BASKA bir sinif adiyla | gelir (select icin .form-select, modal kapatma icin .btn-close). | Bunlar burada temanin gorunumune baglanir. | | 2. Temada KARSILIGI OLMAYAN kabuk parcalarini eklemek. | Tema kenar cubugu duz 10 baglantiydi; bizim menumuz 6 grup / 18 | baglantidir ve destek rozeti tasir. Grup basligi, rozet, bakiye | rozeti, kullanici menusu, duyuru seridi -- hicbiri temada yok. | | 3. main.css'in TEK ekran icin yazilmis asiri genis kurallarini | kabuk ogelerinde geri almak. En onemlisi .dropdown-menu: main.css | onu siparis formundaki kategori listesine gore ayarlamis | (width:100%, transform:translate3d(0,50px,0)!important, kaydirma | cubugu). Ust bardaki kullanici menusu bu kurallarla ekranin yarisini | kaplar; .n-menu bunu geri alir. | | | ==== IZOLASYON ==== | | Bootstrap sinif adlarini ezen HER kural [data-nortical] altina alinmistir. | data-nortical yalnizca layouts/nortical* duzenlerinin etiketinde | bulunur. Bu dosya kazara ki-admin sayfasina baglansa bile hicbir kurali | eslesmez -- yonetim paneline sizmasi FIZIKSEL olarak mumkun degildir. | | Yeni sinif adlari `n-` on ekini tasir (n-alert, n-menu, n-balance...); | bunlar zaten benzersiz oldugu icin ayrica kapsanmalari gerekmez. */ /* ============================================================ | 1. Bootstrap 5 taban degiskenleri | | Tema TEK koyu temadir (#101627). BS5 bilesenlerinin (dropdown, modal, | offcanvas, close dugmesi) koyu varyanti | ile gelir; asagidaki degiskenler o varyantin gri tonlarini temanin | lacivert paletine cekiyor. ============================================================ */ [data-nortical] { --n-bg: #101627; --n-surface: #19213a; --n-surface-2: #141a2e; --n-field: #192139; --n-line: #202a4a; --n-primary: #185bdc; --n-primary-2: #315dff; --n-text: #ffffff; --n-muted: rgba(255, 255, 255, 0.6); --n-radius: 10px; --bs-body-bg: #101627; --bs-body-color: #ffffff; --bs-border-color: #202a4a; --bs-emphasis-color: #ffffff; --bs-secondary-color: rgba(255, 255, 255, 0.6); --bs-link-color: #4d80f5; --bs-link-hover-color: #6f9bff; --bs-link-color-rgb: 77, 128, 245; --bs-dropdown-bg: #19213a; --bs-dropdown-color: #ffffff; --bs-dropdown-border-color: #202a4a; --bs-dropdown-link-color: #ffffff; --bs-dropdown-link-hover-bg: #202a4a; --bs-dropdown-link-hover-color: #ffffff; --bs-dropdown-link-active-bg: #185bdc; --bs-dropdown-divider-bg: #202a4a; --bs-modal-bg: #141a2e; --bs-modal-border-color: #202a4a; --bs-tertiary-bg: #192139; } /* Temanin kendi kaydirma cubugu kurallari govde disina cikar; yalnizca bu | duzenlerin cizildigi sayfalarda yuklendigi icin yonetim tarafina degmez. */ [data-nortical] body { color: var(--n-text); } /* ============================================================ | 2. BS4 -> BS5 kanca farklari ============================================================ */ /* | select. BS4'te .form-control yeterdi ve main.css onu bicimliyordu; BS5 | select'i .form-select ile bicimler. Ayni gorunum burada bagllanir -- | aksi halde tum acilir listeler beyaz zeminli cikar. */ [data-nortical] .form-select { background-color: var(--n-field); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); border: none; outline: none; color: var(--n-text); font-size: 14px; font-weight: 600; height: auto; padding: 23px 40px 23px 14px; border-radius: 7px; flex: 1; } [data-nortical] .form-select:focus { background-color: var(--n-field); border: none; box-shadow: none; color: var(--n-text); } [data-nortical] .form-select option { background: var(--n-field); color: var(--n-text); } /* .form-group icinde duran select, .form-control gibi ikon payini alir. */ [data-nortical] .fc-icon + .form-select { padding-left: 66px; } /* textarea .form-control kurallarini alir ama satir yuksekligi kilidi | (line-height:100%!important) cok satirli metni ust uste bindirir. */ [data-nortical] textarea.form-control { line-height: 1.6 !important; padding: 16px 14px; min-height: 120px; } /* Yer tutucu metni: main.css hicbir renk vermiyor, tarayici koyu gri | basiyor ve koyu zeminde okunmuyor. */ [data-nortical] .form-control::placeholder, [data-nortical] .form-select::placeholder { color: rgba(255, 255, 255, 0.35); font-weight: 500; } /* | Modal kapatma dugmesi. BS4'te .close (metin "x"), BS5'te .btn-close | (SVG maskesi). BS5'in koyu varyanti data-bs-theme ile geliyor ama | tema modallerinin zemini daha koyu oldugu icin filtre elle veriliyor. */ [data-nortical] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.6; } [data-nortical] .btn-close:hover { opacity: 1; } /* Isaret kutusu / radyo: BS4'te tema .checkpoint span'i ile ciziyordu, | BS5 kendi kutusunu cizer. Koyu zemine uyarlanir. */ [data-nortical] .form-check-input { background-color: var(--n-field); border-color: var(--n-line); width: 1.15em; height: 1.15em; margin-top: 0.2em; } [data-nortical] .form-check-input:checked { background-color: var(--n-primary); border-color: var(--n-primary); } [data-nortical] .form-check-input:focus { border-color: var(--n-primary-2); box-shadow: 0 0 0 0.2rem rgba(49, 93, 255, 0.25); } [data-nortical] .form-check-label { color: var(--n-text); font-size: 14px; font-weight: 500; } /* BS5'te .btn-block yok; genislige w-100 ile ulasilir. Tema .btn'e sabit | dolgu verdigi icin blok dugmelerde metin ortalanmali. */ [data-nortical] .btn.w-100 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* BS5 .btn odak halkasi tema dugmelerinde kayiyor. */ [data-nortical] .btn:focus-visible { box-shadow: 0 0 0 0.2rem rgba(49, 93, 255, 0.4); outline: none; } /* Temada karsiligi olmayan iki uyari tonu (BS5'te var, main.css'te yok). */ [data-nortical] .alert.alert-warning { background-color: rgba(255, 171, 90, 0.16); color: #ffab5a; } [data-nortical] .alert.alert-primary, [data-nortical] .alert.alert-info { background-color: rgba(24, 91, 220, 0.16); color: #7ea6ff; } /* ============================================================ | 3. .n-menu -- ust bardaki acilir menuler | | main.css'teki .dropdown-menu kurallari SIPARIS FORMU icin yazilmistir: | width: 100%; max-height: 43.6vh; overflow-y: scroll; | margin-top: 15px; transform: translate3d(0, 50px, 0) !important; | Kullanici menusune uygulandiginda menu ekranin yarisini kaplar, 50px | asagi kayar ve gereksiz kaydirma cubugu tasir. Burada geri alinir. | | transform: none KURALI !important TASIMAK ZORUNDA -- main.css'teki | translate3d de !important tasiyor. Bu yuzden .n-menu tasiyan her acilir | menu Popper'siz calisir: dugmesine data-bs-display="static" yazilir ve | konum salt CSS ile (.dropdown position:relative + .dropdown-menu-end) | belirlenir. Popper acik birakilsaydi hesapladigi inline transform | main.css tarafindan zaten eziliyor, menu 50px asagi kayiyordu. ============================================================ */ [data-nortical] .dropdown-menu.n-menu { width: auto; min-width: 240px; max-height: none; overflow: visible; margin-top: 8px; transform: none !important; padding: 8px; background: var(--n-surface); border: 1px solid var(--n-line) !important; border-radius: var(--n-radius); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); } [data-nortical] .n-menu .dropdown-item { border-radius: 8px; color: var(--n-text); font-size: 14px; font-weight: 500; padding: 9px 12px; display: flex; align-items: center; gap: 10px; white-space: nowrap; background: transparent; border: none; width: 100%; text-align: left; } [data-nortical] .n-menu .dropdown-item:hover, [data-nortical] .n-menu .dropdown-item:focus { background: var(--n-line); color: var(--n-text); } [data-nortical] .n-menu .dropdown-item.active { background: var(--n-primary); color: #fff; } [data-nortical] .n-menu .dropdown-item.n-danger { color: #fb3f77; } [data-nortical] .n-menu .dropdown-item.n-danger:hover { background: rgba(236, 62, 114, 0.2); color: #fb3f77; } /* main.css: `.dropdown button { background:#192139; border-top:none }` | Menu icindeki form dugmelerini (cikis, dil) de yakaliyor. */ [data-nortical] .n-menu button.dropdown-item { background: transparent; } [data-nortical] .n-menu button.dropdown-item:hover { background: var(--n-line); } [data-nortical] .n-menu-head { padding: 6px 12px 10px; border-bottom: 1px solid var(--n-line); margin-bottom: 6px; } [data-nortical] .n-menu-head .n-menu-name { color: #fff; font-size: 14px; font-weight: 600; margin: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-nortical] .n-menu-head .n-menu-mail { color: var(--n-muted); font-size: 12px; margin: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-nortical] .n-menu-label { color: var(--n-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.6px; padding: 8px 12px 4px; text-transform: uppercase; } [data-nortical] .n-menu hr { border-color: var(--n-line); margin: 6px 0; opacity: 1; } /* ============================================================ | 4. Kenar cubugu -- gruplu menu | | Tema kenar cubugu 10 duz baglantiydi. Bizimki 6 grup / 18 baglanti | tasir; temanin `li { margin-bottom: 10px }` + `ul { margin: 50px 0 }` | olculeriyle liste 1100 pikseli asiyor ve ekrana sigmiyor. ============================================================ */ .app-sidebar .sidebar-content { overflow-x: hidden; overflow-y: auto; } .app-sidebar .sidebar-menu { margin: 18px 0 30px; } .app-sidebar .sidebar-menu li { margin-bottom: 2px; } .app-sidebar .sidebar-menu li a.menu-link { align-items: center; display: flex; font-size: 14.5px; padding: 9px 16px; } .app-sidebar .sidebar-menu li a.menu-link .menu-icon { flex-shrink: 0; font-size: 18px; margin-right: 12px; } .app-sidebar .sidebar-menu li a.menu-link .menu-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Grup basligi -- temada yok. */ .app-sidebar .sidebar-menu .menu-group-title { color: rgba(255, 255, 255, 0.38); font-size: 11px; font-weight: 600; letter-spacing: 0.8px; margin: 18px 0 6px; padding: 0 18px; text-transform: uppercase; } .app-sidebar .sidebar-menu .menu-group-title:first-child { margin-top: 0; } /* Okunmamis destek talebi rozeti -- temada yok. */ .app-sidebar .sidebar-menu .menu-badge { background: #ec3e72; border-radius: 22px; color: #fff; flex-shrink: 0; font-size: 11px; font-weight: 700; line-height: 18px; min-width: 20px; padding: 0 6px; text-align: center; } /* | Daraltilmis kenar cubugu (80px). Tema bu modda .menu-text'i gizler ama | grup basligini ve rozeti bilmez: baslik 80px kolonda satir satir kirilir, | rozet ikonu ekrandan iter. Baslik cizgiye, rozet noktaya doner. */ @media (max-width: 1199.98px) { .app-sidebar:not(.sidebar-inact) .sidebar-menu .menu-group-title { color: transparent; height: 1px; margin: 14px 20px; overflow: hidden; padding: 0; background: rgba(255, 255, 255, 0.12); } .app-sidebar:not(.sidebar-inact) .sidebar-menu li a.menu-link { display: block; padding: 10px 0; } .app-sidebar:not(.sidebar-inact) .sidebar-menu li a.menu-link .menu-icon { margin-right: 0; } .app-sidebar:not(.sidebar-inact) .sidebar-menu .menu-badge { border-radius: 50%; color: transparent; height: 8px; min-width: 8px; overflow: hidden; padding: 0; position: absolute; right: 18px; top: 8px; width: 8px; } .app-sidebar:not(.sidebar-inact) .sidebar-menu li { position: relative; } } @media (min-width: 1200px) { .app-sidebar.sidebar-inact .sidebar-menu .menu-group-title { color: transparent; height: 1px; margin: 14px 20px; overflow: hidden; padding: 0; background: rgba(255, 255, 255, 0.12); } .app-sidebar.sidebar-inact .sidebar-menu li { position: relative; } .app-sidebar.sidebar-inact .sidebar-menu li a.menu-link { display: block; } .app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-icon { margin-right: 0; } .app-sidebar.sidebar-inact .sidebar-menu .menu-badge { border-radius: 50%; color: transparent; height: 8px; min-width: 8px; overflow: hidden; padding: 0; position: absolute; right: 18px; top: 8px; width: 8px; } } /* Marka alani: yonetimden yuklenen logo yoksa panel adi yaziyla cizilir. | Hem kenar cubugunda hem misafir ust barinda kullanilir. */ .n-brand-text { color: #fff; display: inline-block; font-size: 20px; font-weight: 700; letter-spacing: 0.4px; line-height: 50px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Daraltilmis modda uzun panel adi 80px'e sigmaz; bas harfe duser. */ .app-sidebar .sidebar-header .n-brand-initial { background: var(--n-primary); border-radius: 12px; color: #fff; display: none; font-size: 20px; font-weight: 700; height: 44px; line-height: 44px; margin: 3px auto; width: 44px; } @media (max-width: 1199.98px) { .app-sidebar:not(.sidebar-inact) .sidebar-header .n-brand-text { display: none; } .app-sidebar:not(.sidebar-inact) .sidebar-header .n-brand-initial { display: block; } } @media (min-width: 1200px) { .app-sidebar.sidebar-inact .sidebar-header .n-brand-text { display: none; } .app-sidebar.sidebar-inact .sidebar-header .n-brand-initial { display: block; } } /* | Daraltma tutamaklari. Temada ikisi de
idi: klavyeyle | odaklanilamiyor, ekran okuyucuya dugme oldugunu soylemiyordu.