/** * NECOX — MOBIL FILTRE PANELI (MFP: tetikleyici + overlay + drawer) * * v8.3.603 — BU BLOK `search-results.css` (satir 3220-3868) ICINDEN AYNEN TASINDI. * KOPYALANMADI, TASINDI = TEK KAYNAK (paralel sistem uretilmedi). * * SEBEP (kullanici ölçüm turunda bulundu): drawer UC yerde render ediliyor — * preset-1.php, preset-2.php ve **sellers/helpers.php (uyeler sayfasi)** — ama * stilleri yalnizca `search-results.css` tasiyordu ve o dosya uyeler sayfasinda * ENQUEUE EDILMIYOR. Sonuc (canli olcum, /uyeler/ @390px): "Filtreleri Goster" * butonu gorunuyor ve calisiyor, JS `is-open` + body scroll lock uyguluyor, ama * drawer `visibility:hidden` + `position:static` kaldigi icin PANEL ACILMIYOR; * body `position:fixed` oldugundan SAYFA KILITLENIYOR (scrollTo(1500) -> 0). * Kacis yollari da kapali: mobilde ESC tusu yok, overlay `position:static` ve * yuksekligi 0 (tiklanamaz), kapat (x) butonu gorunmez -> tek cikis sayfayi yenilemek. * * ⛔ NEDEN `search-results.css` UYELER SAYFASINA EKLENMEDI (aday F, OLCUMLE ELENDI): * gercek dosya /uyeler/ sayfasina enjekte edilip once/sonra karsilastirildi -> * incelenen 874 elemanin 490'i (%56) degisti: tetikleyici 48px->42px, ikonu * 24px->18px, sayfa yuksekligi 4528->4464, panel 6px kaydi. Ciddi gorsel regresyon. * * ⛔ `sellers.css:1062-1110` KASITLI OLARAK KALDIRILMADI (dokunma kurali): oradaki * `.necox-page-sellers` kapsamli kurallar (0,2,0) bu dosyanin (0,1,0) kurallarini * ezerek uyeler sayfasinin KENDI tetikleyici gorunumunu korur — F adayinda bozulan * tam olarak buydu. ⚠️ Bu dosya sellers.css'ten SONRA enqueue edilmelidir: * `.necox-page-sellers .necox-mfp-drawer{visibility:hidden}` (0,2,0) ile * `.necox-mfp-drawer--anim-slide.is-open{visibility:visible}` (0,2,0) ESIT * ozgullukte; esitlikte KAYNAK SIRASI karar verir, sonra gelen kazanir. * * @package Necox * @since 8.3.603 */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* v6.3.0 — MOBIL FILTRE PANELI (Drawer + FAB Buton, ZIP 1) */ /* v6.4.0 — Gorsel zenginlestirme (gradient, cam, resim, golge,*/ /* overlay blur), drawer header/body, FAB hover/tipografi. */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* CSS variable defaults — admin K2'den override edilir */ :root { /* ZIP 1 — temel davranis + kabuk + FAB temel */ --necox-mfp-width: 85%; --necox-mfp-height: 80%; --necox-mfp-anim-duration: 300ms; --necox-mfp-overlay-color: #000000; --necox-mfp-overlay-opacity: 0.50; --necox-mfp-panel-bg: #ffffff; --necox-mfp-panel-border-color: transparent; --necox-mfp-panel-border-width: 0; --necox-mfp-panel-radius: 0; --necox-mfp-panel-padding: 16px; /* v6.5.9 - FAB CSS variables (--necox-mfp-fab-size, -bg, -color) KALDIRILDI. */ /* ZIP 2 — drawer kabuk gelismis */ --necox-mfp-panel-bg-alpha: 1; /* 0..1 — solid BG'ye alpha (cam KAPALI iken) */ --necox-mfp-glass-blur: blur(0); /* cam acikken backdrop-filter degeri */ --necox-mfp-glass-bg: transparent; /* cam acikken yarim saydam katman */ --necox-mfp-panel-gradient: none; /* gradient acikken linear-gradient(...) */ --necox-mfp-panel-bg-image: none; /* arka plan resmi acikken url(...) */ --necox-mfp-panel-bg-size: cover; --necox-mfp-panel-bg-repeat: no-repeat; --necox-mfp-panel-bg-position: center center; --necox-mfp-panel-shadow: 0 0 24px 0 rgba(0,0,0,0.15); --necox-mfp-overlay-blur: blur(0); /* ZIP 2 — drawer header */ --necox-mfp-header-bg: transparent; --necox-mfp-header-title-color: inherit; --necox-mfp-header-close-color: inherit; --necox-mfp-header-padding: 12px; --necox-mfp-header-border-color: rgba(0,0,0,0.08); --necox-mfp-header-font-family: inherit; --necox-mfp-header-font-size: 16px; --necox-mfp-header-font-weight: 600; /* ZIP 2 — drawer body */ --necox-mfp-body-bg: transparent; --necox-mfp-body-padding: 16px; --necox-mfp-body-label-font-family: inherit; --necox-mfp-body-label-font-size: 13px; --necox-mfp-body-label-font-weight: 500; --necox-mfp-body-label-color: inherit; /* v6.5.9 - FAB gelismis CSS variables (--necox-mfp-fab-hover-*, -border-*, -font-*, -letter-spacing) KALDIRILDI. ZIP 4B'de yerine --necox-mft-* gelecek. */ /* ZIP 3 — drawer footer + buton + sayac + easing */ --necox-mfp-anim-easing: ease-out; --necox-mfp-footer-bg: rgba(255, 255, 255, 0.96); --necox-mfp-footer-padding: 12px; --necox-mfp-footer-border-color: rgba(0, 0, 0, 0.08); --necox-mfp-footer-border-width: 1px; --necox-mfp-apply-bg: var(--necox-primary, #2271b1); --necox-mfp-apply-color: #ffffff; --necox-mfp-apply-radius: 6px; --necox-mfp-apply-padding-y: 12px; --necox-mfp-reset-bg: transparent; --necox-mfp-reset-color: inherit; --necox-mfp-reset-border-color: rgba(0, 0, 0, 0.15); --necox-mfp-counter-font-size: 14px; --necox-mfp-counter-color: inherit; } /* v6.5.6 — Sadece masaustu (≥1025px): drawer + trigger sistemi tamamen gizli */ /* v6.5.9 — .necox-mfp-fab cikarildi (FAB tamamen silindi) */ /* v6.6.0 — .necox-mft-wrap + overlay masaustunde gizli (mobil @media display:block ile acilir). */ /* v7.17.23 — KRITIK: .necox-mfp-drawer bu gruptan AYRILDI! display:none->visibility:hidden degisikligi gruba uygulaninca .necox-mft-wrap (Filtreleri Goster butonu) da visibility:hidden olup mobilde GORUNMEZ kaldi (kullanici: "Filtreleri Goster butonu gorunmuyor"). wrap+overlay ESKI display:none davranisinda kalir (mobil @media display:block override eder). */ .necox-mft-wrap, .necox-mfp-overlay { display: none; } /* v7.17.23 — SADECE drawer: display:none -> visibility:hidden (ilk-tik fix). display:none -> is-open(transform) gecisinde ilk tikta transition tetiklenmiyordu ("ilk tik olu, 2. tik acar"). Artik drawer DAIMA DOM'da; kapaliyken visibility:hidden+pointer-events:none, is-open'da gorunur. */ .necox-mfp-drawer { visibility: hidden; pointer-events: none; } /* v6.5.6 — Mobile + Tablet (≤1024px): drawer sistemi aktif. Eski breakpoint ≤767px idi; tablette sidebar 220px sikisik kaliyordu (T1) ve Preset 2'de tamamen kayboluyordu (T2). Tablette de FAB drawer ile filtre erisilir hale getirildi (mobil ile ayni UX). */ @media (max-width: 1024px) { /* v6.5.9 — FAB CSS BLOKLARI TAMAMEN KALDIRILDI. v6.6.0 ile yerini .necox-mft aldi. */ /* ─── v6.6.0 — Mobil/Tablet Trigger Buton (.necox-mft) ─── */ /* Wrapper (breadcrumb altinda, sayfa marginleri ile hizali) */ .necox-mft-wrap { display: block; /* masaustu display:none'i override eder */ margin: 12px 0 16px 0; /* v7.17.5 — padding:0 16px butonu kart kenarindan 16px ICERIDE birakiyordu (buton 310px, kart 342px). Wrapper ZATEN kartla ayni genislikte (342px, parent grid kenarinda) -> padding'i KALDIR ki buton kart genisligine yayilsin (kullanici: Filtreleri Goster genisligi = ilan karti). */ padding: 0; } /* Buton — preset uyumlu CSS variable cascade fallback: admin verirse mfp_trigger_*, vermezse sr_filter_btn_* (preset), o da yoksa --necox-primary, son care #2271b1 */ .necox-mft { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border: 0; cursor: pointer; line-height: 1; font-family: inherit; font-size: 14px; font-weight: 500; /* v7.14.10 — MFT cascade direkt primary'e bagli (sr-filter-btn-bg orphan'lardan kacar). Filtre form submit butonundan ayri kimlikte — preset karakteristik vurgu rengi. */ background: var(--necox-mft-bg, var(--necox-primary, #2271b1)); color: var(--necox-mft-color, var(--necox-primary-fg, #ffffff)); border-radius: var(--necox-mft-radius, 8px); transition: transform 0.15s ease, opacity 0.15s ease, background 0.18s ease, color 0.18s ease; } .necox-mft:active { transform: scale(0.98); } .necox-mft:hover { opacity: 0.92; } /* Tam genislik */ .necox-mft-wrap--full-width { /* v7.17.5 — padding 0 16px butonu kart kenarindan 16px iceride birakiyordu; --full-width class'i daha spesifik oldugu icin genel .necox-mft-wrap{padding:0}'i EZIYORDU = asil suclu. Sifirla -> buton kart genisligine yayilir (kullanici: Filtreleri Goster genisligi = ilan karti, kenarlari hizali). */ padding: 0; } .necox-mft--full-width { width: 100%; } /* Ikon ve metin */ .necox-mft__icon { display: inline-flex; align-items: center; justify-content: center; } .necox-mft__icon svg { width: 18px; height: 18px; } .necox-mft__text { white-space: nowrap; } /* ─── v6.6.1 — Inline Mode (Adifier mantigi - akordeon) ─── */ /* Mode = inline iken trigger butonun altinda sidebar form akordeon olarak acilir/kapanir. DOM tasima YOK, drawer hic acilmaz. JS sadece sidebar wrapper'a .is-open class swap yapar; CSS max-height transition ile slide. */ /* Inline mode aktifken: sidebar mobilde gozuksun (mevcut display:none override). Body'ye .necox-mft-inline-mode class JS tarafindan eklenir (sayfa yuklenince trigger data-mode="inline" ise). */ body.necox-mft-inline-mode .necox-search--preset-1 .necox-search__sidebar, body.necox-mft-inline-mode .necox-search--preset-2 .necox-search__sidebar { display: block; } /* Inline akordeon — kapali state (default) */ body.necox-mft-inline-mode .necox-filter-sidebar { max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; transition: max-height 0.32s ease-out, opacity 0.22s ease-out, padding 0.22s ease-out, margin 0.22s ease-out; } /* Inline akordeon — acik state */ body.necox-mft-inline-mode .necox-filter-sidebar.is-open { max-height: 9999px; opacity: 1; padding-top: 8px; padding-bottom: 8px; } /* Inline mode: sidebar wrapper margin'lari sayfa kenarlarina yapismayalim */ body.necox-mft-inline-mode .necox-search--preset-1 .necox-search__sidebar, body.necox-mft-inline-mode .necox-search--preset-2 .necox-search__sidebar { margin: 0 16px 16px 16px; } /* Inline mode trigger butonu acikken kucuk gorsel ipucu (icon dondurme istege bagli) */ .necox-mft--mode-inline[aria-expanded="true"] .necox-mft__icon svg { transform: rotate(180deg); transition: transform 0.22s ease-out; } .necox-mft--mode-inline .necox-mft__icon svg { transition: transform 0.22s ease-out; } /* ━━━ v7.15.1 INLINE MODE LAYOUT FIX ━━━ Sorun: search wrapper + sidebar/results paralel sticky kaliyor. Inline mode'da sidebar accordion acilinca ilanlar yan tarafta kalip cakisma yapiyor (kullanici raporlanan bug). Cozum: Inline mode aktifken sticky devre disi + block layout zorla. Sidebar accordion acilinca ilanlar dogal sekilde asagi itilir. */ body.necox-mft-inline-mode .necox-search, body.necox-mft-inline-mode .necox-search__sidebar, body.necox-mft-inline-mode .necox-search__main, body.necox-mft-inline-mode .necox-search__results, body.necox-mft-inline-mode .necox-search__wrap { position: static !important; top: auto !important; } /* Inline mode'da search wrapper artik flex/grid degil block — sidebar ust, ilanlar alt */ body.necox-mft-inline-mode .necox-search--preset-1, body.necox-mft-inline-mode .necox-search--preset-2 { display: block !important; grid-template-columns: none !important; } body.necox-mft-inline-mode .necox-search--preset-1 .necox-search__sidebar, body.necox-mft-inline-mode .necox-search--preset-2 .necox-search__sidebar { width: 100% !important; max-width: 100% !important; flex: none !important; } body.necox-mft-inline-mode .necox-search--preset-1 .necox-search__main, body.necox-mft-inline-mode .necox-search--preset-2 .necox-search__main { width: 100% !important; max-width: 100% !important; flex: none !important; margin-top: 0; } /* ─── Overlay (drawer arkasi) ─── */ .necox-mfp-overlay { position: fixed; inset: 0; z-index: 9998; background: var(--necox-mfp-overlay-color); opacity: 0; visibility: hidden; transition: opacity var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing), visibility var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing); display: block; /* v6.4.0 — Backdrop blur (admin'den ayarlanabilir, default blur(0)) */ backdrop-filter: var(--necox-mfp-overlay-blur); -webkit-backdrop-filter: var(--necox-mfp-overlay-blur); } .necox-mfp-overlay.is-open { opacity: var(--necox-mfp-overlay-opacity); visibility: visible; } /* v6.5.0 — Overlay animasyonu drawer'dan ayri tetiklensin (mfp_overlay_anim_separate). Acilirken: overlay once goruner (delay yok), drawer ~50ms sonra slide eder. Kapanirken: drawer once kayar, overlay ~80ms sonra fade eder. Kademeli efekt. */ body.necox-mfp-overlay-separate .necox-mfp-drawer { transition-delay: 50ms; /* acilirken drawer biraz geri */ } body.necox-mfp-overlay-separate .necox-mfp-overlay { transition-delay: 0ms; } /* Kapanirken (is-open YOK iken) tersine cevir: overlay geri, drawer once */ body.necox-mfp-overlay-separate .necox-mfp-drawer:not(.is-open) { transition-delay: 0ms; } body.necox-mfp-overlay-separate .necox-mfp-overlay:not(.is-open) { transition-delay: 80ms; } /* ─── Drawer Panel (kabuk) ─── */ .necox-mfp-drawer { position: fixed; z-index: 9999; background: var(--necox-mfp-panel-bg); border-color: var(--necox-mfp-panel-border-color); border-style: solid; border-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; visibility: hidden; /* v7.14.7 — WP admin bar varsa drawer onun altinda baslar ki kapat butonu ve baslik admin bar'in altina sigmasin. Admin bar mobile'da 46px, desktop'ta 32px. body.admin-bar selector ile kosullu (WP otomatik ekler login durumunda). */ } body.admin-bar .necox-mfp-drawer { top: 46px; height: calc(100% - 46px); } body.admin-bar .necox-mfp-overlay { top: 46px; height: calc(100% - 46px); } @media screen and (min-width: 783px) { body.admin-bar .necox-mfp-drawer { top: 32px; height: calc(100% - 32px); } body.admin-bar .necox-mfp-overlay { top: 32px; height: calc(100% - 32px); } } /* v6.4.0 — Drawer BG efekt onceligi: cam > resim > gradient > solid+alpha CSS K-43 patterni: state-class'lar sira ile soldan saga override eder. En genel solid BG en altta, en spesifik (cam) en ustte. */ /* 1. Solid + alpha (cam KAPALI, resim/gradient yokken) */ .necox-mfp-drawer { background-color: var(--necox-mfp-panel-bg); } /* 2. Gradient (cam KAPALI, resim YOK iken) — gradient solid BG'yi gizler */ .necox-mfp-drawer { background-image: var(--necox-mfp-panel-gradient); } /* 3. Arka plan resmi (cam KAPALI iken) — gradient ustune binebilir (kullanici hem gradient hem resim acarsa: resim ustte sari ozellikleri ile) */ .necox-mfp-drawer--has-bg-image { background-image: var(--necox-mfp-panel-bg-image), var(--necox-mfp-panel-gradient); background-size: var(--necox-mfp-panel-bg-size); background-repeat: var(--necox-mfp-panel-bg-repeat); background-position: var(--necox-mfp-panel-bg-position); } /* 4. Cam efekti (en yuksek oncelik — solid/gradient/resim'in ustune yarim saydam katman + backdrop-filter blur uygular) */ .necox-mfp-drawer--glass { background-color: var(--necox-mfp-glass-bg); background-image: none; /* gradient/resim cam aciksa gizlenir */ backdrop-filter: var(--necox-mfp-glass-blur); -webkit-backdrop-filter: var(--necox-mfp-glass-blur); } /* v6.4.0 — Solid BG icin alpha uygulamak icin trick: Modern tarayicilarda color-mix kullanilabilir, ama eski tarayicilara fallback icin once display'in opacity yontemi kullaniyoruz: panel BG solid renkken --necox-mfp-panel-bg-alpha 0..1 arasi olabilir. Cam / gradient / resim acilirsa bu kural gormezden gelinir. */ .necox-mfp-drawer:not(.necox-mfp-drawer--glass):not(.necox-mfp-drawer--has-bg-image) { background-color: color-mix(in srgb, var(--necox-mfp-panel-bg) calc(var(--necox-mfp-panel-bg-alpha) * 100%), transparent); } /* v6.4.0 — Drawer Golge (toggle ile aktif olur) */ .necox-mfp-drawer--shadow { box-shadow: var(--necox-mfp-panel-shadow); } /* Yon: Soldan acilan drawer */ .necox-mfp-drawer--left { top: 0; left: 0; bottom: 0; width: var(--necox-mfp-width); max-width: 100vw; border-right-width: var(--necox-mfp-panel-border-width); border-top-right-radius: var(--necox-mfp-panel-radius); border-bottom-right-radius: var(--necox-mfp-panel-radius); } /* Yon: Sagdan acilan drawer */ .necox-mfp-drawer--right { top: 0; right: 0; bottom: 0; width: var(--necox-mfp-width); max-width: 100vw; border-left-width: var(--necox-mfp-panel-border-width); border-top-left-radius: var(--necox-mfp-panel-radius); border-bottom-left-radius: var(--necox-mfp-panel-radius); } /* Yon: Alttan acilan drawer (bottom sheet) */ .necox-mfp-drawer--bottom { left: 0; right: 0; bottom: 0; height: var(--necox-mfp-height); max-height: 100vh; border-top-width: var(--necox-mfp-panel-border-width); border-top-left-radius: var(--necox-mfp-panel-radius); border-top-right-radius: var(--necox-mfp-panel-radius); } /* ─── Animasyon: Slide ─── */ .necox-mfp-drawer--anim-slide { transition: transform var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing), visibility var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing); } .necox-mfp-drawer--anim-slide.necox-mfp-drawer--left { transform: translateX(-100%); } .necox-mfp-drawer--anim-slide.necox-mfp-drawer--right { transform: translateX(100%); } .necox-mfp-drawer--anim-slide.necox-mfp-drawer--bottom { transform: translateY(100%); } .necox-mfp-drawer--anim-slide.is-open { transform: translate(0, 0); visibility: visible; pointer-events: auto; /* v7.17.23 — base'teki pointer-events:none'i geri ac */ } /* ─── Animasyon: Fade ─── */ .necox-mfp-drawer--anim-fade { opacity: 0; transition: opacity var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing), visibility var(--necox-mfp-anim-duration) var(--necox-mfp-anim-easing); } .necox-mfp-drawer--anim-fade.is-open { opacity: 1; visibility: visible; pointer-events: auto; /* v7.17.23 — base'teki pointer-events:none'i geri ac */ } /* ─── Drawer Header ─── */ .necox-mfp-drawer__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--necox-mfp-header-padding) var(--necox-mfp-panel-padding); background: var(--necox-mfp-header-bg); /* v6.4.0 — Border-bottom toggle ile aktif (default kapali) */ border-bottom: 0 solid var(--necox-mfp-header-border-color); } /* v6.4.0 — Header alt sinir cizgisi (toggle aktifken 1px) */ .necox-mfp-drawer__header--bordered { border-bottom-width: 1px; } .necox-mfp-drawer__title { margin: 0; font-family: var(--necox-mfp-header-font-family); font-size: var(--necox-mfp-header-font-size); font-weight: var(--necox-mfp-header-font-weight); color: var(--necox-mfp-header-title-color); line-height: 1.3; } /* v7.14.8 — Kapat butonu preset cascade'e tam bagli. Normal: 2px border primary + X icon primary, bg transparent (preset karakteristik). Hover: border + bg primary-hover + X icon primary-fg (beyaz) — dolu inverse. Tum presetlerde ayni mantik. */ .necox-mfp-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 2px solid var(--necox-primary, #2A3254); cursor: pointer; color: var(--necox-primary, #2A3254); border-radius: 50%; transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .necox-mfp-drawer__close svg { width: 18px; height: 18px; stroke-width: 2.5; stroke: currentColor; transition: transform 0.18s ease; } .necox-mfp-drawer__close:hover { background: var(--necox-primary-hover, var(--necox-primary, #2A3254)); border-color: var(--necox-primary-hover, var(--necox-primary, #2A3254)); color: var(--necox-primary-fg, #fff); } .necox-mfp-drawer__close:hover svg { transform: rotate(90deg); } .necox-mfp-drawer__close:active { transform: scale(0.92); } .necox-mfp-drawer__close:focus-visible { outline: 2px solid var(--necox-primary-hover, var(--necox-primary, #2A3254)); outline-offset: 2px; } /* ─── Drawer Body (sidebar buraya tasinacak) ─── */ .necox-mfp-drawer__body { flex: 1 1 auto; padding: var(--necox-mfp-body-padding); background: var(--necox-mfp-body-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; /* KULLANICI: "drawerde 2 farkli scroll var, cok cirkin bir gorunum". KOK NEDEN (canli olcum): mobile-filter-drawer.js sidebar'i drawer'a tasidiktan sonra Select2'yi dropdownParent=drawer ile yeniden kurar; Select2 orijinal