/* ================================================================ 361 Platform - Base CSS (m.css) BuildAllCSS Source #1 - Minimal safe enhancements v3 Loaded BEFORE meta.xml ElementStyles - lowest specificity layer NOTE: Do NOT add global resets (margin/padding/border on * or tags) ElementStyles already handle all element-specific styling ================================================================ */ /* ---- Barcode Fonts ---- */ @font-face { font-family: 'BarCode'; font-display: swap; src: url('/fonts/BarCode.ttf'); } @font-face { font-family: 'Code39'; font-display: swap; src: url('/fonts/LibreBarcode39Text-Regular.ttf'); } @font-face { font-family: 'Code128'; font-display: swap; src: url('/fonts/LibreBarcode128Text-Regular.ttf'); } @font-face { font-family: 'EAN13'; font-display: swap; font-feature-settings: "calt" 1; src: url('/fonts/LibreBarcodeEAN13Text-Regular.ttf'); } /* ---- CSS Custom Properties & System Hints ---- */ :root { --font-sans: 'HankenGrotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Spacing Scale */ /* ⛔ 2026-09-02 (backlog L17030) — rem DEGIL px. --text-* ile AYNI kok (2026-08-28 kullanici karari, commit baf5b4a6f): olcek 16px kok varsayimiyla yazilmisti, platform koku `html{font-size:11px}` => bosluk olcegi %31 dar cozuluyordu. OLCULDU (kok 11px -> 16px tabani px): --space-1 0,25rem = 2,75px -> 4px · --space-2 0,50rem = 5,50px -> 8px --space-3 0,75rem = 8,25px -> 12px · --space-4 1rem = 11px -> 16px Tuketici: yalniz zz-itemview-kart.css (42 kullanim; dosyanin kendi yorumu zaten "8px kartlar arasi / 12px kart ici" diye px NIYETINI yaziyor). px oldugu icin kok punto degisse bile olcek KAYMAZ. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Typography Scale */ /* ⛔ 2026-08-28 — rem DEGIL px. Bu olcek 16px kok varsayimiyla yazilmisti; platformun koku `html{font-size:11px}` => TUM olcek %31 kucuk cozuluyordu: --text-xs 0,75rem = 8,25px · sm = 8,94 · base = 9,62 · lg = 11,00 yani bir GOVDE olcusu (base) 9,6px'e dusuyor ve dordu de 12px okunabilirlik barinin ALTINDA kaliyordu. Olculdu: canli finans, 390px, 117 bulgu. KARAR (kullanici, 2026-08-28): platform YOGUNLUGUNA gore px'e sabitle — kartlar 12px barini gecer ama cevredeki 11px platform metnini EZMEZ. px oldugu icin kok punto degisse bile olcek KAYMAZ. */ --text-xs: 12px; --text-sm: 12px; --text-base: 13px; --text-lg: 14px; --text-xl: 16px; --text-2xl: 18px; --text-3xl: 20px; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; accent-color: var(--primaryColor, #3b82f6); color-scheme: light dark; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- Performance: content-visibility for off-screen content ---- */ .EntityTypeView > .ViewBody > *:not(:first-child), .EntityTypeView .MiddleRight > *:not(:first-child), .SingleItem .ItemBody > *:not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 200px; } /* ---- Kanban WIP Limits ---- */ .KanbanWIPBadge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.4); margin-left: auto; white-space: nowrap; } .KanbanColumnNearWIP .KanbanWIPBadge { background: rgba(245,158,11,0.12); color: #d97706; } .KanbanColumnOverWIP .KanbanColumnCount, .KanbanColumnOverWIP .KanbanWIPBadge { color: #dc2626; font-weight: 700; } .KanbanColumnOverWIP { border-top-color: #dc2626 !important; } /* ---- Gantt Critical Path ---- */ .GanttBar.GanttCriticalPath { border: 2px solid #dc2626 !important; box-shadow: 0 2px 8px rgba(220,38,38,0.3); } .GanttBar.GanttCriticalPath .GanttBarProgress { background: rgba(220,38,38,0.5); } /* ---- Gantt Drag & Resize ---- */ .GanttBar { cursor: grab; transition: box-shadow 0.15s ease; } .GanttBar:active { cursor: grabbing; } .GanttBar.GanttBarDragging { opacity: 0.7; box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 100; } .GanttBar.GanttBarResizing { box-shadow: 0 0 0 2px #1976d2; z-index: 100; } .GanttResizeHandle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 5; background: transparent; } .GanttResizeHandle:hover { background: rgba(255,255,255,0.4); } .GanttResizeHandleLeft { right: auto; left: 0; } /* ---- Screen Reader Only Utility ---- */ .sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- Focus Styles (Modern - keyboard only) ---- */ *:focus-visible { outline: 2px solid var(--focusColor, rgb(10, 110, 185)); outline-offset: 1px; } *:focus:not(:focus-visible) { outline: none; } .Nav:focus, .Nav:focus-visible { outline: none; } /* ---- Scrollbar Styling (Webkit) ---- */ ::-webkit-scrollbar { width: 10px; /* C4 (2026-06-13): 6px was hard to grab as a drag handle; 10px is a comfortable pointer target */ height: 10px; } ::-webkit-scrollbar-track { background: var(--scrollbarTrackColor, transparent); } ::-webkit-scrollbar-thumb { background: var(--scrollbarThumbColor, rgba(127,127,127,0.3)); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: rgba(127,127,127,0.5); } /* ---- Scrollbar Styling (Firefox) ---- */ html { scrollbar-width: thin; scrollbar-color: var(--scrollbarThumbColor, rgba(127,127,127,0.3)) var(--scrollbarTrackColor, transparent); } /* ---- Text Selection ---- */ ::selection { background: var(--selectionColor, rgba(0,158,247,0.2)); } /* ---- Message Types (semantic colors) ---- */ .info, .error, .warning, .success { padding: 8px 12px; text-align: center; margin: 2px; border-radius: 4px; } .info { background: rgba(0,158,247,0.1); color: var(--infoColor, #009ef7); border: 1px solid rgba(0,158,247,0.2); } .error { background: rgba(220,38,38,0.1); color: var(--errorColor, #dc2626); border: 1px solid rgba(220,38,38,0.25); } .warning { background: rgba(255,152,0,0.1); color: var(--warningColor, #ff9800); border: 1px solid rgba(255,152,0,0.2); } .success { background: rgba(70,215,76,0.1); color: var(--successColor, #46d74c); border: 1px solid rgba(70,215,76,0.2); } /* ---- DatePicker Calendar Icon Clickable ---- */ span.DatePicker::after { pointer-events: auto !important; cursor: pointer; } /* ---- Toast Message Container ---- */ #messagediv { background-size: 40px 40px; background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 75%, transparent 75%, transparent); width: 320px; margin-left: auto; margin-right: auto; padding: 15px; left: 0; right: 0; position: fixed; animation: animate-bg 5s linear infinite; bottom: 10px; z-index: var(--zToast, 9999); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* ---- Animations ---- */ @keyframes animate-bg { from { background-position: 0 0; } to { background-position: -80px 0; } } @keyframes pulse { 0% { transform: scale(1.0); } 25% { transform: scale(1.2); } 50% { transform: scale(1.0); } 75% { transform: scale(0.8); } 100% { transform: scale(1); } } .faa-pulse.animated, .faa-pulse.animated-hover:hover { animation: pulse 2s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } /* ---- CSS Containment for Performance ---- */ .EntityTypeViewBody, .ByFieldsRight { contain: layout style; } /* ---- Card Hover Effects ---- */ .CardItem { transition: box-shadow 0.2s ease, transform 0.2s ease; } .CardItem:hover { box-shadow: 0 2px 8px var(--shadowColor, rgba(0,0,0,0.1)); transform: translateY(-1px); } /* ---- SingleItem Form Transitions ---- */ .SingleItem .Field { transition: background-color 0.2s ease; } .SingleItem .Choice { transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .SingleItem .Choice:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.08); transform: translateY(-1px); } .SingleItem .Choice:active { transform: translateY(0); box-shadow: none; } /* ---- Selection Dropdown Transitions ---- */ .SelectionItem { transition: background-color 0.12s ease; } /* ---- ItemSelection Hover ---- */ .SingleItem .ItemSelection { transition: border-color 0.15s ease, box-shadow 0.15s ease; } .SingleItem .ItemSelection:hover { border-color: var(--activeBorderColor, rgb(10,110,185)); box-shadow: 0 0 0 2px rgba(10,110,185,0.08); } /* ---- FieldSet/Panel Visual Grouping ---- */ .SingleItem .FieldSetPanel { border-radius: 0; } /* ---- SingleItem CSS Containment for Performance ---- */ .SingleItem { contain: layout style; } .SingleItem .FieldSetPanel { contain: layout style; } /* ---- ItemBottom Premium Separator ---- */ .SingleItem > .ItemBottom { border-top: 1px solid rgba(127,127,127,0.1); padding-top: 4px; } /* ---- Empty Field Display Mode Enhancement ---- */ .SingleItem .FieldIsEmpty.Mode_Display .FieldValue { border-bottom: 1px dashed rgba(127,127,127,0.15); } /* ---- FieldLabel Weight Override ---- */ /* Overrides domain CSSSelector: body .FieldLabel { font-weight: 300 !important } */ .SingleItem .Field .FieldLabel { font-weight: 500 !important; letter-spacing: 0.01em; } .SingleItem .Field.Mode_Edit:focus-within > .FieldLabel { font-weight: 600 !important; } /* ---- Smooth Input Focus Transition ---- */ .SingleItem .Field.Mode_Edit input, .SingleItem .Field.Mode_Edit select, .SingleItem .Field.Mode_Edit textarea { transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* ---- ManyFields Performance ---- */ .FieldSetPanel.ManyFields { contain: content; } /* ---- Reduced Motion (Accessibility) ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; /* C4 (2026-06-13): smooth-scroll jumps were unguarded for vestibular users */ } } /* ---- Print Styles ---- */ @media print { body { background: white; } .PageZone_LeftNavs, .PageZone_AppsButton { display: none; } .MainContent { margin: 0; padding: 0; } } /* cb 1787125463 */ /* cb 1787132146 */ /* cb 1787132343 */ /* ================================================================ Premium UI Enhancements v4 ================================================================ */ /* ---- Unified Input Focus Ring ---- */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select:focus { border-color: var(--inputFocusBorderColor, rgb(10, 110, 185)); box-shadow: 0 0 0 3px rgba(10, 110, 185, 0.12); outline: none; } /* ---- Button Press Effect ---- */ .Button:active { transform: scale(0.97); } /* ---- ItemView Hover ---- */ .ItemView { transition: box-shadow 0.2s ease, background-color 0.2s ease; } .ItemView:hover { background-color: var(--hoverBackColor, rgba(0,0,0,0.04)); } /* ---- Smooth Scroll ---- */ html { scroll-behavior: smooth; } /* ---- Toast Slide-in Animation ---- */ #messagediv { animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes toastSlideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ---- Responsive Typography ---- */ body.Mobile { font-size: var(--mobileTextSize, 14px); } /* ---- Touch Target Minimums (Mobile) ---- */ body.Mobile .Button, body.Mobile .NavButton, body.Mobile .MicroButton { min-height: 44px; min-width: 44px; } body.Mobile .PanelHeader { min-height: 48px; } /* ---- SingleItem Mobile Stack ---- */ body.Mobile .SingleItem > .ItemBody { flex-direction: column; border-radius: var(--radiusMd, 8px); } body.Mobile .SingleItem .Field { padding: var(--space3, 12px); } /* ---- Dark Theme Scrollbar ---- */ html.dark-theme ::-webkit-scrollbar-thumb, html.auto-theme ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); } html.dark-theme ::-webkit-scrollbar-thumb:hover, html.auto-theme ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); } /* ---- Dark Theme Input Styling ---- */ html.dark-theme input, html.dark-theme textarea, html.dark-theme select, html.auto-theme input, html.auto-theme textarea, html.auto-theme select { color: var(--textColor); border-color: var(--borderColor); } html.dark-theme, html.auto-theme { color-scheme: dark; } /* ---- Skeleton Shimmer Keyframe (shared) ---- */ @keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================================ AKILLI VARSAYILANLAR — sunum kararını SEMANTİKTEN türet ============================================================================ Kullanıcı direktifi (2026-08-18): "UI varsayılan seçimleri (size, alignment etc) farklı ihtiyaçlar için akıllı seçilebilir, akıllı mantıklı hale getirilse baya iş azalır." NEDEN BU DOSYA VAR ------------------ Hiza bugün domain XML'inde ALAN ALAN yazılıyor. Ölçüldü (demo.360bir.com, canlı DOM, 2026-08-18): .FieldInteger 17/17 center ← sayı ortalanmış (taranamaz) .FieldDate 139/139 center .FieldText 470 341 sol / 129 orta ← AYNI TİP, İKİ FARKLI HİZA Yerel 361.xml'de tip dağılımı (62.030 alan): Number 5.863 · Integer 5.109 · Money 3.996 => 14.968 sayısal alan Date 5.985 · Bool 2.883 Bu kararların her biri elle veriliyor. Tipten türetilince tek kural binlerce alanı aynı anda doğrular ve YENİ modüller onu bedavaya alır. MEKANİZMA ZATEN VAR — eksik olan TÜKETİCİYDİ -------------------------------------------- Platform sınıfı zaten yayıyor: Framework/js/et.js:1913 tdi.className = "Field" + field.Type; Framework/js/et.js:2855 td.className = "Field" + field.Type; => FieldNumber / FieldInteger / FieldMoney / FieldDate / FieldBool … Yani JS'e dokunmaya GEREK YOK; yalnız bu sınıfları kullanan CSS eksikti. ÖNCELİK SÖZLEŞMESİ (kritik — 7.12 ezilebilirlik kapısı) ------------------------------------------------------- Bu dosya `NN-*` katmanında ERKEN yüklenir (15 → 20/30/50/70'ten önce) ve HİÇBİR kuralda `!important` KULLANMAZ. Sonuç: · mirasa KAZANIR (doğrudan kural, miras edilen değeri ezer) · `.AlignCenter`/`.AlignRight`/`.AlignLeft`'e KAYBEDER (onlar !important) · domain CSSSelectors'a KAYBEDER (daha geç katman) Yani varsayılan bir DAYATMA değil, BAŞLANGIÇ NOKTASIDIR. Açık yazılmış her hiza kazanmaya devam eder ve çalışan hiçbir ekran bozulmaz. ⛔ KAPSAM BİLEREK DAR: yalnız TABLO HÜCRESİ (`td`). Sınıf iki yerden yayılıyor (liste `td` ve öğe görünümü `div`); `div` tarafı kart/form düzenidir ve orada sağa hizalama okunabilirliği BOZAR. Genişletmek istenirse ÖNCE ölç. ============================================================================ */ /* --- SAYISAL: sağa hizala ------------------------------------------------- Gerekçe: sayılar basamak hizasıyla karşılaştırılır; sola/ortaya hizalı sayı sütununda büyüklük taranamaz. İstemcinin kendi tanımı (a.js:8010) NUMERIC_FIELD_TYPES = { Money, Number, Integer } — o listeye SADIK kalındı, paralel ikinci bir tip sınıflandırıcı YAZILMADI. Currency/Counter ayrıca eklendi: 361.xml'de 290 + 341 kullanım var ve ikisi de sayısal gösterilir. */ td.FieldNumber, td.FieldInteger, td.FieldMoney, td.FieldCurrency, td.FieldCounter { text-align: right; font-variant-numeric: tabular-nums; /* basamaklar dikey hizalanır */ } /* --- TARİH: KURAL YAZILMADI (bilerek) ------------------------------------- İlk sürümde `td.FieldDate { text-align:right }` yazılmıştı ve ÖLÇÜLDÜ Kİ HİÇ UYGULANMIYOR. Kazanan kural servis edilen core.css'te bulundu: @439359 /* META : .Base.ItemStyles.SingleItem.Field.FieldDate * / td.FieldDate, td.FieldDateTime { text-align: center !important; } Bu, meta.xml'deki bir ElementStyle'dan ÜRETİLİYOR ve `!important` taşıyor — yani tarihlerin ortalanması BİLİNÇLİ BİR PLATFORM KARARIDIR, kaza değil. Ölü bir kural bırakmak yerine kaldırıldı: çalışan bir kararı CSS hilesiyle dövmek "çalışanı bozma" kuralının ihlalidir. Değişmesi isteniyorsa doğru yer meta.xml ElementStyle'dır (derleme + tüm kiracılar => ayrı karar). ⭐ BURADAN ÇIKAN MİMARİ BULGU: Meta CSS zaten bir "tip bazlı varsayılan" katmanıdır. Yani akıllı varsayılanların ASIL EVİ meta.xml ElementStyle'dır; bu CSS dosyası yalnız Meta'nın kural YAZMADIĞI tiplerde etkilidir (ölçüldü: FieldNumber'da Meta kuralı yok => varsayılanım uygulandı). */ /* --- BOOL: ortala --------------------------------------------------------- Gerekçe: tek işaret (✓/✗) — sütun içinde ortalanınca taranabilir. */ td.FieldBool { text-align: center; } /* --- METİN: sola hizala --------------------------------------------------- Gerekçe: ölçülen tutarsızlığın kaynağı (341 sol / 129 orta). Metin daima sola hizalanır; ortalanmış metin sütunu okuma hattını kırar. NOT: bu kural mirasa kazanır ama açık `.AlignCenter`'a kaybeder — yani bilerek ortalanmış bir metin hücresi ORTALANMIŞ KALIR. */ td.FieldText, td.FieldTextArea, td.FieldChoice { text-align: left; } /* --- DOKUNMA HEDEFİ TABANI (WCAG 2.2 AA · 2.5.8) -------------------------- Gerekçe: her etkileşimli öğede 24x24 CSS px taban. Tek kural, tüm yüzey. `min-*` kullanılır ki daha büyük hedefler KÜÇÜLMESİN; satır-içi metin bağlantıları (WCAG'ın açık istisnası) KAPSAM DIŞI bırakılmıştır. */ button, [role="button"], input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; } /* zz-mobil-baslik-tasma.css yeniden derlemesi icin tetik (izleyici NN-*.css degisimini izler) */ /* tetik: zz-a11y-typography.css kontrast duzeltmesi icin yeniden derleme */ /* tetik: zz-mobil-baslik-tasma ozgulluk duzeltmesi */ /* tetik: ListFieldTitles ulasilamaz icerik duzeltmesi */ /* tetik: zz-masaustu-tasma.css */ /* tetik: MicroButton 24px */ /* tetik: ListFieldTitles ozgulluk */ /* tetik: 20-uxcx-v5 geri alimi */ /* tetik: masaustu D1 */ /* tetik: D1 span */ /* tetik: D1 span v2 */ /* tetik: yan ray kaydirma */ /* tetik: D11 yatay kaydirma */ /* tetik: UserTable geri alimi */ /* tetik: ListFooter */ /* tetik: liste kaplari her kadraj */ /* tetik: zz-rozet-nav-serit.css */ /* tetik: zz-from-361 yazim hatasi + rozet katmani */ /* tetik: no-op kurallar kaldirildi + rakip hover geri alindi */ /* tetik: yorum dengesi onarildi (Action_New kurali geri) */ /* tetik: AggregateEmpty bos rozet katmani */ /* tetik: AggregateEmpty bos rozet katmani */ /* --- GÖRÜNÜM SEÇİCİ: sıfır öğeliyse ÖLÜ KONTROL --------------------------- axe-core (130 modül) `aria-command-name` altında 34 düğüm bildirdi ve örnek hedef `` çıktı. ÖLÇÜLDÜ (localhost, /mPropertyProperty): .EntityTypeLists.ItemCount_0 -> 1 adet, GÖRÜNÜR, 73×54 px metin "" · aria-label yok · title yok tıklandığında açılan menü -> 0 menü / 0 öğe aynı ekranda yönetim düğmesi -> 0 Yani yer kaplayan, adsız ve HİÇBİR ŞEY YAPMAYAN bir kontrol. Ekran okuyucu onu "button" diye okuyor ve ne yaptığını söyleyemiyor. ⛔ Neden AD vermek değil GİZLEMEK: bu dosyanın kardeş kuralı (AddMicroButton, a-aggregate/atom.js) diyor ki *"ad türetilemiyorsa DOKUNULMAZ — uydurma bir ad adsızlıktan kötüdür"*. Sıfır öğeli bir seçiciye ad vermek, işe yaramayan bir kontrolü meşrulaştırır. ⛔ Neden "yol kapatmıyor": menü ÖLÇÜLDÜ ve boş; yönetim ayrı kontrolde. `ItemCount_N` (N>0) olanlar DOKUNULMAZ — onlar çalışıyor ("Aktifler"). -------------------------------------------------------------------------- */ .EntityTypeLists.ItemCount_0 { display: none; } /* tetik: AggregateEmpty display:none -> visibility:hidden (rozet tavuk-yumurta) */ /* ═══════════════════════════════════════════════════════════════════════════ 16-eksik-tokenlar.css — ÇEKİRDEĞİN KULLANDIĞI AMA SAHİBİ OLMADIĞI TOKEN'LAR + ÖLÇÜLMÜŞ WCAG 2.2 AA DÜZELTMELERİ ═══════════════════════════════════════════════════════════════════════════ NEDEN VAR (2026-08-18, uçtan uca ekran denetimi — 1539 ekran): Servis edilen pakette **14 token yedeksiz `var(--x)` ile okunuyor ama hiçbir yerde tanımlı değil** ⇒ o **49 bildirim** CSS motorunca GEÇERSİZ sayılıyor ve HİÇ UYGULANMIYOR. Hata yok, konsol temiz, kural dosyada duruyor — ama ölü. EN AĞIR SONUÇ — `--white` (23 ölü bildirim): `.Content > .EntityTypeView > … > .PanelHeader { color: var(--white) }` Tasarım, modül renginin üstüne BEYAZ başlık istiyor. Token tanımsız olduğu için bildirim ölü kaldı ve başlık meta.xml'deki `--panelHeaderTextColor: #000080` (LACİVERT) değerini devraldı. Zemin ise modülün kendi rengi (`Entity/@Color`, ör. Kartvizitler `#4B0082` MOR). ⇒ **1.24:1** kontrast (AA eşiği büyük metin 3:1) — başlık okunmuyor. Beyaz/mor = **12.95:1**. DEĞERLER UYDURULMADI: `--tab*` ve `--bs-*` değerleri domain XML'inde (`OUTPUT/361.xml` CSSSelector) zaten yazılıydı; çekirdeğe terfi eden kurallar (`zz-from-361.css`) tanımları geride bıraktığı için ölü kaldılar. Burada kural ile tanım aynı katmana getiriliyor. ⛔ KAPSAM DIŞI BIRAKILANLAR — bilerek: `--TopbackColor`, `--PageZone_LRNavs`. Kapının ilk sürümü bunları da "ölü" saymıştı; ölçüldü ki kullanımları `zz-mobile-drawer.css` içindeki AÇIKLAMA YORUMLARININ içinde. Tanımlansalardı masaüstü rayına `max-width:104px` gelecek ve ÇALIŞAN düzen bozulacaktı. Kapı artık yorumları ayıklıyor (sınav 11/11). KURAL: çekirdek katman, sahibi olmadığı bir token'a YEDEKSİZ bağımlı olamaz. KAPI : node scripts/ui/ui-kapilari.js · 0 TAMAM · 1 BULGU · 2 ÖLÇÜLEMEDİ ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── temel renkler ─────────────────────────────────────────────────── */ --white: #ffffff; --black: #000000; /* ── AA-güvenli birincil ton (aynı H/S, L 0.48 → 0.38) ────────────── Beyaz metin `#009ef7` üstünde 2.90:1 ölçüldü (AA 4.5 ister). `#007cc2` ile 4.50:1 — marka tonu korunur, okunabilirlik sağlanır. */ --primaryAA: #007cc2; /* ── Bootstrap kalıntısı: FORM DOĞRULAMA geri bildirimi ölüydü ────── `.InvalidField .Choices a { background: rgba(var(--bs-danger-rgb),.1) }` hiç uygulanmıyordu ⇒ geçersiz alan kullanıcıya HİÇ gösterilmiyordu. */ --bs-danger-rgb: 241, 65, 108; --bs-green: #198754; /* ── sekme görünümü (domain'den terfi eden kurallar bunları arıyor) ── */ --tabbg: transparent; --tabborder: solid 1px rgba(127, 127, 127, 0); --tabfontcolor: inherit; --tabfontweight: 500; --tabselectedbg: transparent; /* 2026-08-19 · WCAG 1.4.3: #039BE5 secili sekme metni, #f5f7fa zeminde 2.86:1 olculdu (esik 4.5) — axe-core, 130 modul. Bu deger bir TASARIM KARARI DEGIL, bu katmanin eksik-token DOLGUSUYDU (yorumda yaziyor: "domain-den terfi eden kurallar bunlari ariyor"); dolayisiyla AA seviyesine cekmek marka kimligine dokunmaz. Kullanici karariyla AYNI ilke uygulandi (dugme paleti): TONU KORU, paletin kendi koyu adimina cek. Material Light Blue 900 => #01579B / #f5f7fa = 6.89:1. Secili sekme, tabani (opaklik .62 ile ~#5e5e5e) karsisinda hala VURGU rengi olarak okunur. */ --tabselectedfontcolor: #01579B; --tabspanopacity: 1; /* ── select alanının aşağı oku (ikon fontundan) ────────────────────── Ölüyken `content:` geçersizdi ⇒ açılır alanlarda ok HİÇ çizilmiyordu. */ --ChevronDown: var(--icon-Chevron-Down, "\e91d"); /* ── DAVRANIŞI DEĞİŞTİRMEYEN tanımlar ──────────────────────────────── Bu ikisinin TASARLANMIŞ değeri bilinmiyor; bugünkü (ölü) davranışı birebir koruyan değer veriliyor. Böylece "ölü bildirim" sınıfı kapanır ama görsel HİÇBİR ŞEY değişmez. Gerçek değer belirlenince burada güncellenir — kural artık tek yerde. */ --neoShadow: none; --bg: var(--backColor, #e8ebf8); } /* ═══════════════════════════════════════════════════════════════════════════ WCAG 2.2 AA — HEPSİ CANLI DOM'DA HESAPLANDI (gözle değil) Eşik: normal metin 4.5:1 · büyük metin (≥24px | ≥18.66px+700) 3:1 ═══════════════════════════════════════════════════════════════════════════ */ /* ⛔⛔ ÖLÜ SEÇİCİ — `--white` tanımlandıktan SONRA ölçülünce ortaya çıktı. `layout.css` beyaz başlığı şu zincirle veriyor: … > .PanelHeader > .TopCenter > .EntityTypeViewTitle > .EntityTypeViewTitleBody Ama 2026-06-30 "TitleLeft" yeniden tasarımından beri başlık **`.TopLeft`** içinde çiziliyor (ölçüldü: `div.EntityTypeViewTitleBody < div.EntityTypeViewTitle < div.TopLeft < div.Top.PanelHeader`). ⇒ Kural **0 element eşliyor**; token tanımlansa bile başlık beyaz olmuyor ve `.EntityTypeViewTitle`'ın devraldığı `--panelHeaderTextColor` (#000080 LACİVERT) kazanmaya devam ediyordu. Çare: zinciri Top-zone'dan BAĞIMSIZ yaz (torun seçici). Kapsam yine yalnız modül renkli içerik başlığı — iç panellerin açık zeminli başlıkları etkilenmez. */ /* ⭐ GENELLEME (2026-08-20) — asagidaki liste yalniz BILINEN torunlari sayiyordu ve listeye alinmamis her yeni yuzey ayni kusuru yeniden uretiyordu (olculdu: /SurveyManagement/mSurveys, `span.ButtonText` "Varsayilan" sari baslikta 1.67:1). Cozum listeyi uzatmak degil: rengi KABA ver, DEVRALMA calissin. Kendi zemini olan dugmeler zaten kendi `color`'ini yaziyor (`zz-from-361.css:213` -> #ffffff), yani onlar ETKILENMEZ. */ .Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader { color: var(--contentHeaderForeground, inherit); } .Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeViewTitle, .Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeViewTitleBody, .Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeViewTitleIcon, .Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .EntityTypeLists, .Content > .EntityTypeView > .EntityTypeViewBody > .Center > .PanelHeader .ToggleMenu { /* ⭐ AKILLI VARSAYILAN: ön plan ZEMİNDEN türetilir (m.js `$BaslikPaleti`). Sabit beyaz, AÇIK renkli modüllerde 2.43:1 veriyordu (AA 3:1 ister). Yedek `--white`: JS henüz koşmadıysa bugünkü davranış korunur. */ color: var(--contentHeaderForeground, var(--white)); } /* Zaman tüneli kartı — #868e96 / beyaz 3.32:1 → #5f6672 = 5.78:1 */ .TimelineCardField .TimelineFieldLabel, .TimelineCardFooter .TimelineCardDate { color: #5f6672; } /* Zaman tüneli sayacı — #6c757d / #f8f9fa 4.45:1 → #5a6169 = 5.95:1 */ .TimelineHeader .TimelineCount { color: #5a6169; } /* İkonlu buton başlığı — #7e8299 / beyaz 3.79:1 → #5e6278 = 6.01:1 */ .Button.HasImage > .ButtonTitle, .LoginForm .UserImage, .LoginForm div.UserPassword > a.PasswordIcon { color: #5e6278; } /* ⛔⛔ 2026-08-20 — YUKARIDAKİ KURAL ZEMİNİ BEYAZ VARSAYIYOR (yorumu da öyle diyor: "#5e6278 = 6.01:1" — BEYAZ üzerinde). Renkli butonda zemin beyaz DEĞİLDİR ve aynı renk okunmaz hale gelir. ÖLÇÜLDÜ (/SurveyManagement, "Kopyala" düğmesi): buton zemini `btn-secondary` = #6c757d · butonun KENDİ color'ı = beyaz (4.7:1 ✓) ama `.ButtonTitle` onu #5e6278'e eziyor ⇒ 1.28:1 (ekran görüntüsüyle doğrulandı: metin gri düğmede okunmuyor). Bu, kayıtlı dersin bir örneği daha: SABİT ÖN PLAN, DEĞİŞKEN ZEMİNDE HER ZAMAN YANLIŞTIR. Çare rengi yeniden seçmek değil — renkli düğme ön planını ZATEN doğru biliyor, başlık onu MİRAS ALMALI. Kapsam bilerek dar: yalnız `.btn` (kendi paletini taşıyan düğmeler). Paletsiz ikonlu düğmeler yukarıdaki koyu rengi korur (beyaz zeminde doğru olan odur). ÖLÇÜM: /SurveyManagement düşen 7 → 5 (en kötü 1.28 → 3.13); kalan 5 vaka YEREL FİKSTÜR SAPMASIDIR — canlıda `Style[@Name="btn"]` paleti zaten koyulaştırılmış (#007bff→#0069d9, #28a745→#1e7e34, #17a2b8→#117a8b; canlıda eski renk 0 geçiş). Diğer 4 ekranda gerileme YOK (0 → 0). */ .Button.HasImage.btn > .ButtonTitle { color: inherit; } /* 2026-11-11 — AYNI KUSURUN FORM İÇİ HÂLİ. Kayıt formunda bölümün doğrudan çocuğu olan simgeli düğme `btn` paleti taşımaz ama zemini beyaz da DEĞİLDİR: `.Button` zemini `--buttonBackColor` jetonundan gelir. ÖLÇÜLDÜ (yerel, Anket formu "Önizle"): düğme zemini rgb(48,48,48), düğmenin kendi rengi beyaz, başlık #5e6278 ⇒ yazı okunmuyor; yanındaki simgesiz düğme aynı zeminde beyaz. Başlık düğmenin kendi rengini miras alır; böylece simgeli ve simgesiz kardeş düğmeler aynı görünür. Kapsam dar: yalnız kayıt formu bölümünün doğrudan çocuğu olan düğmeler. */ .SingleItem .FieldSet > .Button.HasImage > .ButtonTitle { color: inherit; } /* Parametre etiketi — #78909c / #f0f1f6 2.97:1 → #546670 = 5.30:1 */ :root { --labelcolor: #546670; } /* Birincil zemin üstünde beyaz metin — 2.90:1 → 4.50:1 (yalnız beyaz METİN taşıyan iki yüzey; marka rengi başka yerde değişmez) */ .TopLeft .Actions a, .EntityTypeLists a.Selected .Aggregate { background-color: var(--primaryAA) !important; } /* ⛔ YAZIM HATASI KUSURU — `zz-from-361.css:414` `.EntityTypeLists a:hover { backgraund-color: #8eff8e; }` Özellik adı yanlış yazıldığı için görünüm değiştiricinin ÜZERİNE GELME geri bildirimi HİÇ çalışmıyordu. Doğru ad + palete uyumlu ton: */ .EntityTypeLists a:hover { background-color: rgba(0, 158, 247, 0.12); } /* ═══════════════════════════════════════════════════════════════════════════ YAN RAY GRUPLARI — eşik aşılınca (m.js `$_NavView.Preview`) çizilir ═══════════════════════════════════════════════════════════════════════════ Ray 104px geniştir; modül ana sayfasının grup başlığı stili burada çok yer yer. Kompakt, sessiz bir ayıraç: küçük büyük-harf başlık + ince çizgi. ⛔ Yalnız `.NavGrouped` altında geçerli ⇒ eşik altındaki (bugün sorunsuz) raylar HİÇ ETKİLENMEZ. */ .NavView.NavGrouped .NavGroupTitle { font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.75; padding: 6px 4px 2px; text-align: center; line-height: 1.2; word-break: break-word; /* 2026-09-21 (kullanıcı emri): "`.NavView.NavGrouped .NavGroupTitle` border-top kaldır bozuyor, özellikle MyPage Left ve Right gruplamalarında". Ayırma işini grubun kendi nefesi (margin-top) yapar; çizgi rayda fazladan bir yatay kural üretiyor ve dar rayda başlıkla çakışıyordu. */ margin-top: 4px; } /* İlk grubun üstünde ek boşluk olmaz (ray başlığıyla çakışır). */ .NavView.NavGrouped > .NavGroup:first-child > .NavGroupTitle, .NavView.NavGrouped > .NavGroupBody_Free:first-child + .NavGroup > .NavGroupTitle { margin-top: 0; } .NavView.NavGrouped .NavGroupBody { display: flex; flex-direction: column; gap: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ YAN RAY ETİKETİ — KELİME ORTASINDAN KIRILMASIN ═══════════════════════════════════════════════════════════════════════════ ÖLÇÜLDÜ (2026-08-18, ekran görüntüsüyle yakalandı — hiçbir kapı görmedi): ray etiketleri `overflow-wrap: anywhere` ile çiziliyor ve 86px genişlikte kelimeyi ORTADAN kırıyor: "Onay Bekleyenler" → "BEKLEYENLE / R", "Zimmetlerim" → "ZİMMETLERİ / M". Okunabilir ama cilasız; "premium" ölçütünü düşüren tam bu sınıf. BİLGİ KAYBI YOK — ölçüldü: 15/15 etikette ebeveyn `tooltip` TAM METNİ taşıyor. Bu yüzden 2 satıra sığmayanı üç nokta ile kısaltmak GÜVENLİDİR. ⛔ KAPSAM YALNIZ RAY: `overflow-wrap:anywhere` başka yüzeylerde (uzun e-posta, URL, kod) DOĞRU davranıştır — oralara dokunulmaz. */ #PageZone_LeftNavs .NavTitle, #PageZone_RightNavs .NavTitle, #PageZone_LeftNavs .NavTitle > span, #PageZone_RightNavs .NavTitle > span { overflow-wrap: break-word; /* yalnız TEK kelime sığmıyorsa kır */ word-break: normal; hyphens: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* ⭐ DOKUNMA HEDEFİ — ALAN DEĞERLERİ, YALNIZ MOBİLDE (2026-08-19, KULLANICI KARARI) Süpürmede `KUCUK_DOKUNMA` 1018 bulgu. Kimlik ölçüldü: hepsi FORM/IZGARA ALANI DEĞERİdir (`FieldDate` 105 · `FieldInteger` 36 · `FieldChoice` 22 · `FieldPerson` · `FieldOrganization` · `FieldWorkingPeriod` · `FieldText`), yükseklik **16-17px**; WCAG 2.2 AA (2.5.8) 24×24 ister. ⛔ "Satır-içi" muafiyeti GEÇERSİZ: ölçüldü, 356 hedefin 0'ı cümle içinde. ⛔⛔ ÖNCE GÖRÜNMEZ VURUŞ ALANI DENENDİ ve ÖLÇÜLEREK ETKİSİZ ÇIKTI: `::after` ile 24px'e büyütme, hücre (`td.FieldCounter`) kırptığı için `elementFromPoint` ±10px'te hedefi DEĞİL hücreyi döndürdü. Yani kutuyu büyütmeden hedef büyümüyor — kural geri alındı, ölü kural bırakılmadı. ⇒ Kullanıcı kararı (2026-08-19): **yalnız mobilde** kutu 24px'e çıkar. Kapsam ≤768px BİLEREK: masaüstü/tablet veri yoğunluğu AYNEN korunur (fare hassas; bu sınıfın şiddeti orada 1). Bedel kabul edildi: mobilde ekrana sığan satır sayısı ~%33 azalır. ⚠️ Tıklama çalma riski ÖLÇÜLDÜ: ardışık hedefler arası en az dikey boşluk 21px; 16 → 24px büyüme üste+alta 4'er px ekler ⇒ güvenli. */ @media (max-width: 768px) { /* ⚠️ `body` çapası BİLEREK: ilk sürümde `min-height`/`display` TUTTU ama `min-width` başka bir kural tarafından 0'a çekildi (ölçüldü: computed min-width 0px, kutu 22x24). Beraberliği tip seçicisi bozar. */ body [class*="Field"] > a { display: inline-block; min-height: 24px; min-width: 24px; line-height: 24px; vertical-align: middle; } } /* 2026-08-19 · çekirdek yeniden derleme tetikleyicisi: zz-view-calendar.css kontrast düzeltmesi (axe 41→30). Yeni/degisen zz-* dosyasi TEK BASINA cekirdegi yeniden derletmez — bir NN-* dosyasinda ICERIK degisikligi gerekir. */ /* kontrast: 0.65 ailesi de .72 seviyesine hizalandi (140901) */ /* kontrast: sekme basligi opakligi (153303) */ /* sabotaj tetigi 165123 */ /* geri koyma tetigi 165134 */ /* ============================================================================ 17-content-ritmi.css — CONTENT NEFES VE OKUMA RİTMİ (platform katmanı) ---------------------------------------------------------------------------- NEDEN BURADA (kullanıcı kararı D1, 2026-08-25): "Genel özellikleri modüle özel değiştirme; sistemin default CSS'i ile yaparsan Consistency sağlarız." Bir modüle yazılan nefes kuralı yalnız o modülü düzeltir ve platformu daha da tutarsız yapar. ÖLÇÜLDÜ (kontrol grubu, aynı domain): TaxAdvisoryHome panel arası 0 / 1 / 12px (tutarsız) Turquality* panel arası 0px (hiç yok) ⇒ Kural modül CSS'inden ALINDI ve buraya, herkesin aldığı katmana taşındı. ÖLÇEK (12px em tabanı — platformun kendi ritmi): Content dış kenar 12px · PANEL ARASI 16px · panel içi 10-12px · kart arası 7px GESTALT: gruplar arası boşluk > grup içi boşluk (16 > 7). Bu oran bozulursa kullanıcı iki ayrı paneli tek liste sanar. ⛔ DOKUNULMAYANLAR (bilerek): - Zemini/başlık şeridi olan bileşenlere DIŞARIDAN dolgu verilmez (ölçüldü: `.Panel > .EntityTypeView{padding-top}` PanelHeader'ın mor bandının üstünde beyaz şerit bıraktı — kullanıcı ekranda gördü). - Header/KPI panelleri (`Panel_h`, `Panel_hl`, `Panel_kpis`) flex:0'dır, yükseklik bütçesine tabi değildir. - Satır içi `Style` (özgüllük 1000) burayı zaten yener; bu katman yalnız KURAL YAZILMAMIŞ yüzeylere ritim verir. ============================================================================ */ /* --- 1. Panel arası: gruplar arası en büyük boşluk ------------------------- */ .Content > .Panel { margin-bottom: 16px; } .Content > .Panel:last-child { margin-bottom: 0; } /* Başlık şeridinden sonra bölüm geçişi biraz daha geniş */ .Content > .Panel_h, .Content > .Panel.ContentHeader { margin-bottom: 20px; } /* --- 2. Panel içi nefes: başlık ve gövde kabuğa yapışmasın ----------------- */ /* Panelin KENDİSİNE verilir — içindeki görünüme değil (ölçüldü: ETV'ye verilen dolgu panelin dolgusunu doldurmaz ve başlık şeridini bozar). */ .Content > .Panel { padding: 10px 12px; } /* --- 4. Kanban kabı kenarlardan nefes alsın -------------------------------- */ .KanbanContainer { padding: 6px 4px; } /* Mobile spacing only. Worklist height comes from responsive layout/content, * never an arbitrary per-view minimum-height budget. */ @media (max-width: 767px) { .Content > .Panel { padding: 8px 10px; margin-bottom: 14px; } } /* ============================================================================ KANONİK CONTENT MİMARİSİ & DASHBOARD RİTMİ (2026-09-04) ---------------------------------------------------------------------------- Kural: Modül veya Content'e özel CSS'lerden kurtulmak için evrensel dashboard bileşenleri platform katmanında tanımlanır. ============================================================================ */ /* --- 5. ContentHeader: Başlık şeridi + dikey akış — TEK OTORİTE zz-zz-contentheader-yasasi.css (2026-10-02: bu kopya budandı) --- */ /* --- 6. QuickActionsBar: Hızlı Aksiyon Araç Çubuğu (Tier 2 Sözleşmesi) -------- */ .Content .QuickActionsBar { display: flex !important; flex-direction: row !important; gap: 10px !important; margin-top: 14px !important; flex-wrap: wrap !important; align-items: center !important; } .Content .QuickActionsBar .URLForBots { display: none !important; } .Content .BtnQuickAction { display: inline-flex !important; align-items: center !important; height: 38px !important; padding: 0 16px !important; border-radius: 20px !important; cursor: pointer !important; text-decoration: none !important; box-sizing: border-box !important; transition: all 0.2s ease !important; user-select: none !important; } .Content .BtnPrimary { background: #2563eb !important; border: 1px solid #1d4ed8 !important; box-shadow: 0 1px 3px rgba(37,99,235,0.2) !important; } .Content .BtnPrimary:hover { background: #1d4ed8 !important; border-color: #1e40af !important; transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(37,99,235,0.3) !important; } .Content .BtnPrimary .ButtonTitle, .Content .BtnPrimary span { color: #ffffff !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } .Content .BtnOutline { background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.3) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; } .Content .BtnOutline:hover { background: rgba(255,255,255,0.22) !important; border-color: rgba(255,255,255,0.55) !important; transform: translateY(-1px) !important; } .Content .BtnOutline .ButtonTitle, .Content .BtnOutline span { color: #ffffff !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; } /* --- 7. Panel_hdrkpi: Gövde KPI Izgarası (ContentHeader TEK OTORİTE zz-zz-contentheader-yasasi.css) --- */ .Content .Panel_hdrkpi, .Content > .Panel_kpis:not(.ContentHeader *) { width: 100% !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 12px !important; margin-top: 14px !important; box-sizing: border-box !important; } /* 3'lu TABAN ama SABIT DEGIL: kart sigmayinca satir sarar ve flex-grow ile kalan kartlar satiri DOLDURUR -> son satirda bos hucre kalmaz. */ .Content .Panel_hdrkpi > *, .Content > .Panel_kpis:not(.ContentHeader *) > * { flex: 0 1 142px !important; width: 142px !important; min-width: 130px !important; max-width: 152px !important; box-sizing: border-box !important; } /* SISTEM GENELI AGGREGATEVIEW 152PX TAVANI (HARD RULE) Kullanici emri 2026-09-06: Sistem genelinde Tum Modullerde hicbir AggregateView 152px'i gecemez. ContentHeader altındaki kartlar min-width: 130px ile shrink-to-fit flex daralmalarına karşı korunur. */ .AggregateView, .AggregateView.Aggregate, .Content .Panel_hdrkpi > .AggregateView, .Content .Panel_hdrkpi > .AggregateView.Aggregate, .Content .ContentHeader .Panel_kpis > .AggregateView, .Content .ContentHeader .Panel_kpis > .AggregateView.Aggregate, .Content .ContentHeader .AggregateView, .Content .ContentHeader .AggregateView.Aggregate { width: 142px !important; min-width: 130px !important; max-width: 152px !important; max-height: 150px !important; box-sizing: border-box !important; } /* --- 7b. DORT KARTLIK SERIT: 3'lu taban 3+1 SARAR (olculdu 2026-09-05) ------- Ustteki `/3` tabani panellerin YALNIZ %11'i icin dogrudur. Canli dagilim (satis, 2126 panel): 1 kart 473 . 2 kart 954 . 3 kart 238 . **4 kart 265** . 5-6 kart 168 . 7-8 kart 28. 4 kartta sarma MATEMATIKSEL olarak kacinilmazdir; ustelik `max-width:300px` bir ust kuraldaki "flex-grow satiri DOLDURUR" vaadini GECERSIZ kilar: son satirdaki tek kart 300px'de durur, sag-dayali hizada SOLDA olu bosluk kalir ve ContentHeader'in yuksekligi 2 katina cikar. OLCULDU (1600x950, mCustomer360Account): kap 969px . kart 300/300/300/300 . satir 2 . son satirda 669px OLU BOSLUK. (-) Kap payini buyutmek COZMEZ - ilk hipotezdi, olcumle curudu: taban %33,33 oldugu icin satira DAIMA 3 kart girer, kap ne kadar genis olursa olsun. CARE: kart sayisini SECICIDEN OKU (nth-last-child) ve tabani ondan TURET. Ozgulluk (0,5,0) > ustteki (0,3,0) ⇒ yalniz bu baglamda kazanir. KAPSAM BILEREK DAR: . 2 kart (en buyuk kova, 954): /2 ile /3 AYNI sonucu verir cunku tavan 300px kirpiyor ⇒ dokunmak ETKISIZ olurdu, yazilmadi. . 3 . 5 . 6 kart: 3 / 3+2 / 3+3 zaten dengeli. . 7-8 kart (28 panel): OLCULMEDI ⇒ dokunulmadi. MOBIL KORUNUR: <=768px'teki 2'li kural degismesin diye blok `min-width:769px` ile sinirli (mobilde 4'lu serit 233px'e sigmaz). */ /* IKI KIRILIM — tek bir taban YETMEZ, olcumle kanitlandi: genis kadrajda 4'lu istiyoruz ⇒ min-width 190px yuzunden kap >= 4*190+36 = 796px olmali orta kadrajda (kap 628-705) 4*190+36 > kap ⇒ 3 kart girer, 4.'su TEK BASINA sarar ve tavan 300px yuzunden satiri dolduramaz ⇒ 328-405px OLU BOSLUK (olculdu). Iki kisit CELISIR: 1600@895 icin min <= 214 gerekirken 1200@705'te 2+2 icin min > 227. ⇒ Cozum tabani KIRILIMA baglamak; mobildeki (<=768px) 2'li kuralla da TUTARLI: dar 2 sutun · orta 2 sutun (simetrik, olu bosluk yok) · genis 4 sutun. ESIK 1520px OLCULDU, tahmin DEGIL: kap = kadraj - sabit pay (sol ray + baslik). Olculen pay 595-705px; 4'lu icin kap >= 4*190+36 = 796 gerekir ⇒ en DAR ekranda kadraj >= 1501. 1400 esigi denendi ve YETMEDI: kap 761px'te 3+1 sardi VE etiket KIRPILDI ("SATIS TEKLIFLERI NET TUT...", 201px kart) — kirpma SIFIR TOLERANSTIR. */ @media (min-width: 769px) and (max-width: 1519px) { .Content .Panel_hdrkpi > *:first-child:nth-last-child(4), .Content .Panel_hdrkpi > *:first-child:nth-last-child(4) ~ * { flex-basis: calc((100% - 12px) / 2) !important; } } @media (min-width: 1520px) { .Content .Panel_hdrkpi > *:first-child:nth-last-child(4), .Content .Panel_hdrkpi > *:first-child:nth-last-child(4) ~ * { flex-basis: calc((100% - 36px) / 4) !important; } } .Content .Panel_hdrkpi .Aggregate, .Content .ContentHeader .Panel_kpis .Aggregate, .Content .Panel_kpis .Aggregate { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: space-between !important; text-align: left !important; position: relative !important; width: auto !important; padding: 0.65em 0.8em !important; min-height: 7em !important; box-sizing: border-box !important; } .Content .Panel_hdrkpi .AggregateLabel, .Content .ContentHeader .Panel_kpis .AggregateLabel, .Content .Panel_kpis .AggregateLabel { order: 1 !important; width: 100% !important; text-align: left !important; justify-content: flex-start !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; font-size: 12px !important; font-weight: 600 !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.25em !important; min-height: 2.5em !important; max-height: 2.5em !important; flex: 0 0 2.5em !important; margin: 0 0 0.35em 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .Content .Panel_hdrkpi .Aggregate.AggregateLink > .AggregateLabel, .Content .ContentHeader .Panel_kpis .Aggregate.AggregateLink > .AggregateLabel, .Content .Panel_kpis .Aggregate.AggregateLink > .AggregateLabel { padding-right: 14px !important; } .Content .Panel_hdrkpi .AggregateValue, .Content .Panel_hdrkpi .AggregateNumber, .Content .ContentHeader .Panel_kpis .AggregateValue, .Content .ContentHeader .Panel_kpis .AggregateNumber, .Content .Panel_kpis .AggregateValue, .Content .Panel_kpis .AggregateNumber { order: 2 !important; width: 100% !important; text-align: right !important; justify-content: center !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; font-size: clamp(17.5px, 1.55em, 23px) !important; font-weight: 800 !important; line-height: 1.2em !important; min-height: 1.4em !important; margin: auto 0 2px 0 !important; box-sizing: border-box !important; padding-right: 0 !important; padding-left: 0 !important; } .Content .Panel_hdrkpi .Aggregate.AggType_Money > .AggregateValue, .Content .ContentHeader .Panel_kpis .Aggregate.AggType_Money > .AggregateValue, .Content .Panel_kpis .Aggregate.AggType_Money > .AggregateValue, .Content .Panel_kpis .Aggregate > .AggregateValue.AggValLong, .Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='₺'], .Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='TL'] { font-size: clamp(15px, 1.38em, 18px) !important; letter-spacing: -0.03em; } .Content .Panel_hdrkpi .Aggregate > .AggregateValue.AggValXLong, .Content .ContentHeader .Panel_kpis .Aggregate > .AggregateValue.AggValXLong, .Content .Panel_kpis .Aggregate > .AggregateValue.AggValXLong { font-size: clamp(14px, 1.25em, 16.5px) !important; letter-spacing: -0.035em; } /* Para Alan Tipleri — Koyu Para Yeşili (#047857) (kullanıcı kuralı 2026-09-07) */ .Content .Panel_hdrkpi .Aggregate.AggType_Money > .AggregateValue, .Content .ContentHeader .Panel_kpis .Aggregate.AggType_Money > .AggregateValue, .Content .Panel_kpis .Aggregate.AggType_Money > .AggregateValue, .Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='₺'], .Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='TL'], .Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='$'], .Content .Panel_kpis .Aggregate > .AggregateValue[suffix*='€'] { color: #047857 !important; } /* --- 8. ActionQueue_View: Müdahale Bekleyen Süreç Havuzları (Tier 4) ---------- */ .Content .ActionQueue_View.View_List { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; height: auto !important; margin-bottom: 20px !important; display: flex !important; flex-direction: column !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important; } /* Sekmeli panelde secili olmayan liste gizli kalir: yukaridaki display:flex uielements.css `.TabBody > div { display:none !important }` kuralini eziyordu (olculdu: ikinci sekmede liste 358 pikselden 179'a iniyordu). */ .Content .TabBody > .ActionQueue_View.View_List:not(.Selected) { display: none !important; } /* DisableOverflow istisnası (2026-10-29, layout.css Panel_b ile AYNI sözleşme): views.css CssKey=252 `.DisableOverflow { height:auto }` tabansızlık ister; 300/200px taban akıştaki ETV'ye sahte boşluk basar. */ .Content .ActionQueue_View.View_List:where(:not(.DisableOverflow)) { min-height: 300px !important; } .Content .ActionQueue_View.View_List .EntityTypeViewBody, .Content .ActionQueue_View.View_List .Center.Panel { height: auto !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; } .Content .ActionQueue_View.View_List:where(:not(.DisableOverflow)) .EntityTypeViewBody, .Content .ActionQueue_View.View_List:where(:not(.DisableOverflow)) .Center.Panel { min-height: 300px !important; } .Content .ActionQueue_View.View_List .Middle { height: auto !important; flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: auto !important; } .Content .ActionQueue_View.View_List:where(:not(.DisableOverflow)) .Middle { min-height: 200px !important; } /* --- 9. Panel_charts / Panel_tier4: Çoklu Sütun Analitik Paneller ------------ */ .Content .Panel_charts, .Content .Panel_tier4, .Content .Panel_columns { width: 100% !important; min-height: 320px !important; gap: 16px !important; display: flex !important; flex-direction: row !important; margin-bottom: 20px !important; } .Content .Panel_charts > .EntityTypeView, .Content .Panel_tier4 > .EntityTypeView, .Content .Panel_columns > .EntityTypeView { flex: 1 1 0 !important; min-width: 0 !important; } .Content .Panel_charts > .EntityTypeView:where(:not(.DisableOverflow)), .Content .Panel_tier4 > .EntityTypeView:where(:not(.DisableOverflow)), .Content .Panel_columns > .EntityTypeView:where(:not(.DisableOverflow)) { min-height: 320px !important; } /* --- 10. EntityTypeView Başlık ve Liste Seçici Hizası ------------------------ */ .Content .EntityTypeView .Top { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; } .Content .EntityTypeView .Top .TopLeft { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; } .Content .EntityTypeView .Top .EntityTypeViewTitleBody { font-size: 13px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .Content .EntityTypeView .Top .TopRight { flex: 0 0 auto !important; position: static !important; } .Content .EntityTypeView .Top .EntityTypeLists { font-size: 12px !important; } /* --- 11. Dashboard EntityTypeView Middle Esneme Güvencesi -------------------- 2026-10-02: `.Content.DashboardFlow` öneki KALDIRILDI (dosya silindi; kapsam .Content genel hâli — etv-yukseklik-yasası ile uyumlu, taban orada görüntü tipinden). 2026-10-29: min-height tabanı :where(:not(.DisableOverflow))'a kilitlendi — views.css CssKey=252 akış sözleşmesi DisableOverflow ETV'ye taban koymaz (240/200px sahte boşluk kusurdu); konum/esneme bildirimleri TÜM görünümlerde aynen kalır. */ .Content .EntityTypeViewBody, .Content .EntityTypeViewBody > .Center, .Content .EntityTypeViewBody > .Center > .Middle, .Content .EntityTypeView .Middle { position: relative !important; inset: auto !important; height: auto !important; flex: 1 0 auto !important; overflow: visible !important; } .Content .EntityTypeView:where(:not(.DisableOverflow)) .EntityTypeViewBody, .Content .EntityTypeView:where(:not(.DisableOverflow)) .EntityTypeViewBody > .Center, .Content .EntityTypeView:where(:not(.DisableOverflow)) .EntityTypeViewBody > .Center > .Middle, .Content .EntityTypeView:where(:not(.DisableOverflow)) .Middle { min-height: 240px !important; } .Content .EntityTypeView .MiddleCenter { height: auto !important; } .Content .EntityTypeView:where(:not(.DisableOverflow)) .MiddleCenter { min-height: 200px !important; } /* --- 12. Mobil Ritim ve Duyarlı Düzen (max-width: 768px) --------------------- */ @media (max-width: 768px) { /* Mobilde de hiçbir AggregateView 152px'i aşamaz (kullanıcı emri 2026-09-06). */ .Content .Panel_hdrkpi > .AggregateView.Aggregate, .Content .ContentHeader .Panel_kpis > .AggregateView.Aggregate { max-width: min(100%, 152px) !important; } .Content .Panel_hdrkpi, .Content .ContentHeader .Panel_kpis { gap: 8px !important; } .Content .Panel_hdrkpi > .AggregateView, .Content .ContentHeader .Panel_kpis > .AggregateView { flex: 1 1 calc((100% - 8px) / 2) !important; min-width: 140px !important; max-width: 152px !important; } .Content .Panel_charts, .Content .Panel_tier4, .Content .Panel_columns { flex-direction: column !important; height: auto !important; } .Content .Panel_charts > .EntityTypeView, .Content .Panel_tier4 > .EntityTypeView, .Content .Panel_columns > .EntityTypeView { flex: 1 0 auto !important; } .Content .Panel_charts > .EntityTypeView:where(:not(.DisableOverflow)), .Content .Panel_tier4 > .EntityTypeView:where(:not(.DisableOverflow)), .Content .Panel_columns > .EntityTypeView:where(:not(.DisableOverflow)) { min-height: 280px !important; } .Content .QuickActionsBar { flex-direction: column !important; align-items: stretch !important; } .Content .QuickActionsBar > * { width: 100% !important; } .Content .QuickActionsBar .Button.BtnQuickAction, .Content .QuickActionsBar .Text.BtnQuickAction { width: 100% !important; justify-content: center !important; } } /* --- 7c. UC KARTLIK SERIT: DAR KAPTA 2+1 SARIYOR, 261px OLU BOSLUK (2026-09-06) ---- Madde 7b (`f96536006`) "3 kart zaten dengeli" demisti — o hukum GENIS kap icindi. Dar kapta 3x190+24 = 594 > kap ⇒ 2 kart girer, 3.'su TEK BASINA sarar ve `max-width:300px` yuzunden satiri dolduramaz. ⛔ KADRAJ TABANLI MEDIA QUERY BURADA YANLIS ARACTIR — kap genisligi kadrajla MONOTON DEGIL (localhost, #OrgPersonsHome, kadraj -> kap): 1600->895 1200->628 1100->561(BOZUK) 1024->644 900->561(BOZUK) 1024 SAGLAM ama 1100 BOZUK (sol ray <=1024'te kapaniyor ve genislik aciliyor). `max-width:1300px` gibi bir esik 1024'u de gereksizce vururdu. ⇒ Kosul KABIN KENDISINE baglandi: `@container (max-width: 593px)` = 3x190+24-1. ⛔ "TAVANI KALDIR" (max-width:none) DENENDI ve REDDEDILDI: yukaridaki 7. maddenin KENDI olcumu `none`'un yanlis oldugunu yaziyor ("kart ~409px'e sisiyordu") ve canli deney bunu DOGRULADI — 2560px kadrajda kart 300 -> **498px**. Tavan OLCULMUS bir karardir; geri alinmaz. Bu yuzden tavan YALNIZ dar kapta kalkar. CANLI IKI YONLU DENEY (localhost, 6 kadraj; enjekte -> GERI AL -> tabana dondu): kadraj TABAN CARE C 2560 300,300,300 olu 635 BIREBIR AYNI 1600 285,285,285 olu 40 BIREBIR AYNI 1200 196,196,196 olu 40 BIREBIR AYNI 1100 267,267,300 olu 261 267,267,545 olu 16 1024 201,201,201 olu 40 BIREBIR AYNI 900 267,267,300 olu 261 267,267,545 olu 16 Kirpik metin: TUM kadrajlarda 0 -> 0. Ek SATIR yok (2 satir kaliyor). Genis kadrajda hicbir sey degismedigi icin gerileme yuzeyi YOKTUR. 2026-09-22 KOK Duzeltmesi (Panel_kpis w=16, SalesHome/1600): `container-type: inline-size` size-containment + zz-dashboard-flow.css'deki `@media(min-width:1280px) .Panel_kpis { flex:0 0 auto; width:auto }` etkilesimi paneli 16px'e (yalniz padding) bucukluyordu — rect ile olculdu: normal→620px. CARE C (@container 593px) 1100/900 dar kadrajda LAZIM; orada flex kurali PASIF (yalniz >=1280). Yani: Panel_kpis container-type'ı YALNIZ <1280'de; Panel_hdrkpi her yerde kalir (flex hedefi degil). >=1280'de containment yok → w normal. */ .Content .Panel_hdrkpi { container-type: inline-size; } @container (max-width: 593px) { .Content .Panel_hdrkpi > *:first-child:nth-last-child(3), .Content .Panel_hdrkpi > *:first-child:nth-last-child(3) ~ * { max-width: 152px !important; flex-grow: 1 !important; } } /* ============================================================================ 2026-10-02 (kullanıcı kararı): ContentHeader yerleşim blokları BUDANDI — TEK OTORİTE: Framework/css/core/zz-zz-contentheader-yasasi.css (§5 dikey akış · §7 KPIızgara · yerleşim yasası 2026-09-10 · taban koruma · DirectionVer row · 5+/4-KPI istisnaları · mobil <768 hükümleri tamamı orada; zz-dashboard-flow.css DOSYASI SİLİNDİ, rakip seçiciler yok) Bu dosyada KALAN: ritim (§1-§4), QuickActionsBar (§6), ActionQueue (§8), Panel_charts (§9), ET başlığı (§10-11), FlowCard/FlowRow (§14, taşındı), KPI kontratı. ============================================================================ */ /* --- 14. FlowCard & FlowRow (zz-dashboard-flow.css'ten taşındı — TEK EV) ---- */ /* FlowCard: kart görünümü — iç PanelHeader şeffaf, gövde akışta; iç içe kart yok */ .Content .EntityTypeView.FlowCard, .Content .Panel.FlowCard { background: rgba(248, 250, 252, 0.85) !important; backdrop-filter: blur(8px) !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; flex: 0 0 auto !important; } /* FlowCard BASLIK (PanelHeader) kimligi BURADA TANIMLANMAZ - 2026-10-07: FlowCard basligi duz ETV basligiyla AYNIDIR (panel.css `.Panel > .PanelHeader::after` bandi, 4px dolgu, 13px buyuk harf). Sekiz FlowCard baslik blogu (kabuk, ::after, baslik, simge, TopRight, cipler, ViewActions) BUDANDI; modul/kiraci CSSText sizintilari zz-zz-panelheader-yasasi.css'te kapatilir. Yeni FlowCard baslik gorunumu panel.css tabanina yazilir. */ /* FlowRow: çok kolonlu satır düzeni — FlowCard'lar yanyana; mobilde alt alta */ .Content .FlowRow, .Content .FlowRow_2Col, .Content .FlowRow_3Col { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: 100% !important; gap: 16px !important; box-sizing: border-box !important; } .Content .FlowRow > .FlowCard, .Content .FlowRow_2Col > *, .Content .FlowRow_3Col > * { flex: 1 1 0% !important; min-width: 0 !important; } @media (max-width: 768px) { .Content .FlowRow, .Content .FlowRow_2Col, .Content .FlowRow_3Col { flex-direction: column !important; } } /* --- KPI KONTRATI (zz-dashboard-flow §15 generic'ten taşındı — TEK EV) ------- */ /* ContentHeader KPI şeridi anti-squish: kart 148px/96px bandı, etiket 11.5px. ch-yasası flex 1:3 paylaşımını taşır; burada yalnız KART ölçüsü kontratı. */ .Content .ContentHeader .Panel_kpis > .AggregateView, .Content .ContentHeader > .Panel:has(> .AggregateView) > .AggregateView, .Content .ContentHeader .DirectionFloat > .AggregateView, .Content .Panel_kpis > .AggregateView { flex: 0 1 148px !important; width: 148px !important; min-width: 120px !important; max-width: 152px !important; min-height: 7em !important; box-sizing: border-box !important; } .Content .Panel_kpis .AggregateLabel, .AggregateView .AggregateLabel { font-size: 11.5px !important; line-height: 1.25 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; letter-spacing: normal !important; } /* --- 15. KART FABRİKA IZGARASI (DF §11'den taşındı — TEK EV, 2026-10-02) ----- ÖLÇÜM (TO DO slayt 5, canlı sales; kapsam genelde DOĞRUYDU): ItemView='Card' ETV 5312, bunun yalnız 166'sı DF içi (%97 DIŞARIDA) ⇒ DF öneki kalkar, kapsam .Content genel. Kart basis 360 (max 480 / min 280) 2-3 kolon bandı üretir; mobilde 1 kolon. --itemCard* değişkeni Content/Panel Style ile özelleştirilir. KARE KABUL (mEMailManagement sonrası): 4 hesap kartı 1 sütuna düşünce ölçüldü. */ .Content .ViewBody_ItemView_Card, .Content .ActionQueue_View .ViewBody_ItemView, .Content .ActionQueue_View .ETWBody { display: flex !important; flex-flow: row wrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: var(--itemCardGap, 16px) !important; width: 100% !important; box-sizing: border-box !important; } .Content .ViewBody_ItemView_Card > .ItemView, .Content .ActionQueue_View .ViewBody_ItemView > .ItemView { flex: 1 1 var(--itemCardBasis, 330px) !important; max-width: var(--itemCardMax, 440px) !important; min-width: var(--itemCardMin, 280px) !important; width: auto !important; height: auto !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; margin: 0 !important; } @media (max-width: 720px) { .Content .ViewBody_ItemView_Card > .ItemView, .Content .ActionQueue_View .ViewBody_ItemView > .ItemView { flex: 1 1 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* ================================================================ UX/CX Enhancements v5 ================================================================ */ /* ---- Loading Overlay on View ---- */ .ViewLoading .ViewBody, .ViewLoading .ListBody, .ViewLoading .ItemsContainer { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; } /* ---- Empty State ---- */ .EmptyState { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; min-height: 200px; } .EmptyStateIcon { font-size: 48px; margin-bottom: 16px; opacity: 0.25; } .EmptyStateTitle { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--textColor); } .EmptyStateMessage { font-size: 13px; color: rgba(var(--textRGB, 48, 48, 48), 0.62); /* C3 (2026-06-13): was rgba(48,48,48,.5) — ~2.5:1 fail + dark-blind. Adaptive var + AA alpha. */ max-width: 320px; line-height: 1.5; } /* 2026-09-21 (kullanıcı emri): "EntityTypeView içindeki EmptyStateAction EntityTypeView:hover'da gözüksün." Boş durum eylemi (ör. "+ Yeni") artık sürekli değil, görünüme yaklaşıldığında davet eder — FAB'ın masaüstü hover-reveal deseniyle (30-item-forms.css) AYNI sözleşme. ⚠️ Kapsam YALNIZ `.EntityTypeView` içi: EntityTypeView dışındaki boş durumlarda (araç sayfaları, paneller) hover atası yoktur, eylem sürekli görünür kalır — aksi hâlde ERİŞİLEMEZ olurdu (361-ui: "gizlemek ≠ erişilmez kılmak"). */ .EmptyStateAction { margin-top: var(--space6, 24px); display: flex; justify-content: center; align-items: center; width: 100%; } .Desktop .EntityTypeView .EmptyStateAction { opacity: 0; pointer-events: none; transition: opacity .2s ease .25s; } .Desktop .EntityTypeView:hover .EmptyStateAction, .Desktop .EntityTypeView .EmptyStateAction:hover, .Desktop .EntityTypeView .EmptyStateAction:focus-within { opacity: 1; pointer-events: auto; transition-delay: 0s; } /* ⛔ DOKUNMATİKTE `:hover` YOKTUR — gizli bırakmak eylemi kalıcı olarak erişilmez yapardı (ölçülmüş sınıf: zz-dokunmatik-hover-affordans.css, Paging %10 opaklıkta kalmıştı). */ @media (hover: none) { .Desktop .EntityTypeView .EmptyStateAction { opacity: 1; pointer-events: auto; } } .EmptyStateActionButton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; /* 2026-08-18 A11Y (kullanıcı onaylı: "aynı ton ailesinde koyulaştır"). ÖLÇÜLDÜ: beyaz metin #3b82f6 üzerinde 3,67:1 — WCAG 2.1 AA eşiği 4,5. #2563eb (blue-600) ≈5,2:1 · aynı mavi ailesi, kimlik korunur. ⛔ İLK DENEME GERİ ALINDI: yalnız `background` değiştirilmişti ve axe 11 → 42'ye ÇIKTI (puan 74 → 64). Geri alım değerleri birebir geri getirdi, yani sıçrama bu değişiklikten geliyordu. Ders: bir rengi değiştirirken AYNI KURALIN TÜREVLERİ de o rengi taşır ve tek başına bırakılırsa çelişir. Bu sürümde üçü BİRLİKTE ele alınıyor: · background #3b82f6 -> #2563eb · box-shadow rgba (59,130,246) -> (37,99,235) aynı renk · :hover brightness KALDIRILDI — koyulaştırılan zemini tekrar AÇIYORDU ve kontrastı eşiğin altına geri düşürüyordu. Yerine aynı ailede bir ton daha koyu zemin (#1d4ed8) kullanılıyor; hover geri bildirimi korunur, kontrast DÜŞMEZ. */ background: var(--primaryColor, #2563eb); /* 2026-09-02 (backlog "WCAG AA kontrast: birincil dugme 3,67:1"): on plan ZEMINDEN turetilir — m.js motoru (`$BaslikPaleti`) `--primaryColor`dan `--primaryOnPlan` uretir (beyaz/koyu, kontrasti yuksek olan). Zemin ve on plan AYNI token zincirine bagli: token TANIMLIYSA ikisi de motordan gelir (tutarli); TANIMSIZSA (olculdu: meta.xml'de `primaryColor` YOK) geri dusus #2563eb + beyaz = 5,2:1 AA. Yalniz on plani baglayip zemini baska geri dususte birakmak GERILEME uretirdi (koyu metin #2563eb uzerinde 3,2:1). */ color: var(--primaryOnPlan, #fff); border: none; border-radius: var(--radiusMd, 8px); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25); } .EmptyStateActionButton:hover { background: var(--primaryColorDark, #1d4ed8); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); transform: translateY(-1px); } .EmptyStateActionButton:active { transform: scale(0.97); } /* ---- Error Card ---- */ .ErrorCard { display: flex; flex-direction: column; align-items: center; padding: 32px; border-radius: var(--radiusLg, 12px); background: rgba(235, 49, 49, 0.04); border: 1px solid rgba(235, 49, 49, 0.12); margin: 8px; } .ErrorCardIcon { font-size: 32px; margin-bottom: 12px; opacity: 0.6; } .ErrorCardMessage { font-size: 14px; color: var(--errorColor, #eb3131); margin-bottom: 16px; text-align: center; line-height: 1.4; } .ErrorCardRetry { cursor: pointer; padding: 8px 24px; border-radius: var(--radiusMd, 8px); background: var(--errorColor, #eb3131); color: white; font-weight: 500; font-size: 13px; transition: opacity 0.2s; } .ErrorCardRetry:hover { opacity: 0.85; } /* ---- Save Feedback ---- */ .Field.Saving { opacity: 0.6; transition: opacity 0.2s ease; } .Field.Saved .FieldValue { animation: saveFlash 1.5s ease; } @keyframes saveFlash { 0% { background: rgba(70, 215, 76, 0.15); } 100% { background: transparent; } } @keyframes aggregateValueFlash { 0% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.75); border-radius: 3px; } 60% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.2); border-radius: 3px; } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .AggregateValueChanged { animation: aggregateValueFlash 1.2s ease-out; } /* ---- Field Focus Highlight ---- */ .Field.FieldFocused { background: rgba(10, 110, 185, 0.03); border-radius: var(--radiusSm, 4px); transition: background 0.15s ease; } /* ---- Row Selection Animation ---- */ .ItemView.Selecting { background: rgba(10, 110, 185, 0.06); transition: background 0.2s ease; } /* ---- Keyboard Focus for List Rows ---- */ .ItemView.KbFocused { outline: 2px solid var(--focusColor, rgb(10, 110, 185)); outline-offset: -2px; z-index: 10; } /* ---- Bottom Sheet (Mobile) ---- */ .BottomSheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--backColor); border-radius: var(--radiusXl, 16px) var(--radiusXl, 16px) 0 0; box-shadow: var(--shadowXl, 0 -4px 20px rgba(0,0,0,0.15)); z-index: var(--zModal, 1000); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .BottomSheet.BottomSheet-Open { transform: translateY(0); } .BottomSheetHandle { width: 36px; height: 4px; border-radius: 2px; background: rgba(127, 127, 127, 0.3); margin: 12px auto 8px; } /* ---- Pull to Refresh ---- */ .PullToRefresh::before { content: "↻"; display: block; text-align: center; padding: 16px; font-size: 24px; animation: ptrSpin 1s linear infinite; } @keyframes ptrSpin { to { transform: rotate(360deg); } } /* ---- Breadcrumb ---- */ .Breadcrumb { display: flex; align-items: center; gap: 4px; padding: 6px 16px; font-size: 12px; color: rgba(var(--textRGB, 48, 48, 48), 0.6); /* C3 (2026-06-13): adaptive + AA (was rgba(48,48,48,.45)) */ flex-wrap: wrap; } .BreadcrumbItem { cursor: pointer; transition: color 0.15s; } .BreadcrumbItem:hover { color: var(--primaryColor, #3b82f6); } .BreadcrumbSep { opacity: 0.3; user-select: none; } /* Breadcrumb on mobile — always visible, compact */ body.Mobile .Breadcrumb { padding: 4px 12px; font-size: 11px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: var(--backColor, #fff); border-bottom: 1px solid rgba(0, 0, 0, 0.05); position: sticky; top: 0; z-index: 5; } body.Mobile .Breadcrumb::-webkit-scrollbar { display: none; } /* ---- Inline Field Validation ---- */ /* Gated on .FieldTouched: the red inline-validation border appears only after the user has focused and left the field (blur → m.js adds .FieldTouched), never on a pristine, never-touched new-record form. Save-attempt errors use the separate .FieldError class. */ .Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue input:not(:focus):not(:placeholder-shown), .Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue textarea:not(:focus):not(:placeholder-shown), .Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue select:not(:focus) { border-color: var(--errorColor, #dc2626); box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15); } .Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue input:not(:focus):not(:placeholder-shown)::placeholder, .Field.Required.FieldIsEmpty.Mode_Edit.FieldTouched .FieldValue textarea:not(:focus):not(:placeholder-shown)::placeholder { color: var(--errorColor, #dc2626); opacity: 0.6; } /* ---- Card / Panel Polish ---- */ .ItemView { border-radius: var(--radius-lg, 12px); background: var(--backColor, #fff); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)); border: 1px solid rgba(0, 0, 0, 0.04); transition: box-shadow var(--transition-fast, 0.15s ease); } .SingleItem .FieldSetPanel { border-radius: 0; background: var(--backColor, #fff); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)); border: 1px solid rgba(0, 0, 0, 0.04); transition: box-shadow var(--transition-fast, 0.15s ease); } .SingleItem .FieldSetPanel .FieldSetPanel { border-radius: 0; background: 0; box-shadow: 0 0 0 ; border: 0; transition: none; } .ItemView:hover { box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.07)); } .Panel { border-radius: var(--radius-md, 8px); } .PanelHeader { border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0; } .TabPanel { border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); } .TabHeader { border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0; } /* ---- Recent Items ---- */ .RecentItems { padding: 8px 0; } .RecentItemsTitle { font-size: 11px; font-weight: 700; text-transform: uppercase; color: rgba(var(--textRGB, 48, 48, 48), 0.4); padding: 4px 16px; letter-spacing: 0.5px; } .RecentItem { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; transition: background 0.1s; font-size: 13px; } .RecentItem:hover { background: rgba(var(--textRGB, 48, 48, 48), 0.04); } .RecentItemET { font-size: 11px; opacity: 0.45; } /* ---- Swipe Back Indicator ---- */ .SwipeBackIndicator { position: fixed; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 60px; background: var(--primaryColor, #3b82f6); border-radius: 0 4px 4px 0; opacity: 0; transition: opacity 0.2s, width 0.2s; z-index: 9999; } .SwipeBackIndicator.Active { opacity: 0.6; width: 20px; } /* ---- View Transition Fade ---- */ .Opacity100 { animation: contentFadeIn 0.25s ease-out; } @keyframes contentFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---- Drag and Drop Feedback ---- */ .Dragging { opacity: 0.4; transform: scale(0.98); } .DropTarget { outline: 2px dashed var(--focusColor, rgb(10, 110, 185)); outline-offset: 2px; background: rgba(10, 110, 185, 0.04); } /* ---- Focus Visible (WCAG 2.4.7) — strengthened ---- */ :focus-visible { outline: 2px solid #1ec46d !important; outline-offset: 2px !important; border-radius: 3px; } button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #1ec46d !important; outline-offset: 2px !important; box-shadow: 0 0 0 3px rgba(30, 196, 109, 0.2) !important; } /* ---- Loading Skeleton ---- */ .loading-skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 4px; min-height: 20px; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ListBody:empty::before, .ItemsContainer:empty::before { content: ''; display: block; min-height: 60px; background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: 4px; margin: 8px 0; } /* ---- Mobile Responsive Sidebar ---- */ @media (max-width: 768px) { .NavSideBar, .complementary[aria-label="Yan menü"], .complementary[role="complementary"] { position: fixed !important; left: -100%; top: 0; bottom: 0; width: 280px; max-width: 85vw; z-index: 10000; transition: left 0.25s ease; overflow-y: auto; box-shadow: 2px 0 12px rgba(0,0,0,0.15); } .NavSideBar.mobile-open, .complementary[aria-label="Yan menü"].mobile-open, .complementary[role="complementary"].mobile-open { left: 0; } .ListBody, .Grid, .ItemsContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ETWMenu .FilterPanel { flex-direction: column !important; width: 100% !important; } .ETWMenu .FilterPanel > * { width: 100% !important; margin-bottom: 8px; } button, select, input[type="text"], input[type="email"], input[type="tel"] { min-height: 44px; min-width: 44px; } } /* WCAG 2.1 AA High Contrast Shell Enhancements (4.5:1 ratio) */ a[href="#PageZone_m"], .SkipLink { color: #0f172a !important; background: #ffffff !important; font-weight: 700; border: 1px solid #0f172a; } .UserToolButton-badge { background: #0f172a !important; color: #ffffff !important; font-weight: 700; } .ETCount { color: #475569 !important; font-weight: 600; } .StatusBar, #StatusBar { color: #334155 !important; font-weight: 500; } .LoginFooter, .LoginCopyright { color: #475569 !important; font-weight: 500; } /* Bulk Action Dock Layout & Non-Overlapping Padding */ .BulkActionBar { animation: bulkBarSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes bulkBarSlideUp { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (min-width: 1024px) { .BulkActionBar { bottom: 28px; padding: 10px 24px; gap: 16px; } } /* ListAll Viewport Max Height & Internal Scroll Guard */ .ListAll { display: flex !important; flex-direction: row !important; width: 100% !important; height: 100% !important; max-height: 100% !important; flex: 1 1 0% !important; min-height: 0 !important; overflow: hidden !important; position: relative !important; } .EntityTypeView.View_List .ListAll, .EntityTypeView.View_Tree .ListAll, .EntityTypeView.View_Tree2 .ListAll { height: 100% !important; max-height: 100% !important; flex: 1 1 0% !important; min-height: 0 !important; } .ListLeft, .ListMiddle { height: 100% !important; max-height: 100% !important; min-height: 0 !important; } .ListMiddle .ListBody { flex: 1 1 0% !important; min-height: 0 !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .ListLeft .ListBody { flex: 1 1 0% !important; min-height: 0 !important; max-height: 100% !important; overflow-y: hidden !important; overflow-x: auto !important; } /* Explicit Override: Prevent any Mobile/SupportsTouch 420px height clamping */ .Mobile .EntityTypeView.View_List:not(.MicroView) .ListAll, .Mobile .EntityTypeView.View_Tree:not(.MicroView) .ListAll, .Mobile .EntityTypeView.View_Tree2:not(.MicroView) .ListAll, .SupportsTouch .EntityTypeView.View_List:not(.MicroView) .ListAll, .SupportsTouch .EntityTypeView.View_Tree:not(.MicroView) .ListAll, .SupportsTouch .EntityTypeView.View_Tree2:not(.MicroView) .ListAll { height: 100% !important; min-height: 280px !important; max-height: 100% !important; flex: 1 1 auto !important; } .Mobile .EntityTypeView.View_List:not(.MicroView) .ListBody, .SupportsTouch .EntityTypeView.View_List:not(.MicroView) .ListBody, body.Mobile .EntityTypeView.View_List .ListBody { min-height: 240px !important; } /* 2026-09-14 — mobil 280px taban YALNIZ dolu liste/agacta (90b755a0e'nin amaci: mobil LISTE cokmesi). OLCULDU: genis secici (0,4,1) views.css sozlesmesine (0,5,0) listede KAYBEDIYOR (PersonDasboard mobil govde 53px, 4 ic ice scroll), sozlesme disindaki DisableOverflow ItemView'lerde KAZANIP icerigi 0 olan 280px bos blok basiyordu (MyPage mobil x4). Genis secici artik sifirlar; taban kazanan ozgullukle yalniz dolu List/Tree/Tree2'de. A/B: PersonDasboard 246->526px + ic ice scroll 0, MyPage mobil 4->0 bosluk. */ body.Mobile .EntityTypeViewBody > .Center > .Middle { min-height: 0 !important; } body.Mobile .EntityTypeView:is(.View_List, .View_Tree, .View_Tree2):not(.MicroView):not(.NoItems):not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle { min-height: 280px !important; } /* 2026-09-14 — MOBIL TAKVIM COKUYOR, ICERIGI ALTTAKI GORUNUMUN USTUNE BINIYORDU. OLCULDU (satis SessionsHome, 390x844): Panel_right icinde satir ici `flex:1 1 0%; height:auto` tasiyan View_Calendar ETV 46px'e cokuyor; mutlak .ETWBody yuksekligi 0, scrollHeight 344 ⇒ takvim arac cubugu ve gunu 592px asagidaki infografigin USTUNE ciziliyordu (masaustunde ETV 610px, sorun yok). A/B: govde akis icinde ⇒ ETV 664px, tasma 616 -> 0, CalendarBody 451px; `min-height:420px` alternatifi yetmedi (tasma 196px); kural kaldirilinca taban geri geliyor. Kart gorunumu deseni (views.css:1416). */ body.Mobile .Content .EntityTypeView.View_Calendar:not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle { height: auto !important; } body.Mobile .Content .EntityTypeView.View_Calendar:not(.DisableOverflow) > .EntityTypeViewBody > .Center > .Middle > .ETWBody { position: relative !important; inset: auto !important; height: auto !important; min-height: 0 !important; flex: 1 1 auto !important; } /* Durum serididi (StatesBar) — 2026-08-19 DUZELTILDI. OLCULDU: bu blok ("Item 41") yatay HAP tasarimi varsayiyordu, ama Meta CSS ayni siniflara bir ADIM-RAYI cizer (her durum bir sutun; `div:before/:after` = baglanti cizgisi; `a:before` = nokta). Iki tasarim ayni anda canliydi ve birbirini bozuyordu: · `content:"→" !important` Meta'nin `content:""` baglanti cizgisini EZIYOR -> ok, cizginin yerine `top:0`da asili kaliyor, etiketten kopuk. ("oklar bozuk") · hap dolgusu + gecis dugmesi olan/olmayan sutunlar -> YUKSEKLIK FARKI 36px, etiket merkezleri 18px kacik. ("heightler bozuk") · CurrentState `color:#fff` seffaf zeminde GORUNMEZ metin uretiyordu. Karar: ADIM-RAYI korunur (platform semasinin tasarimi), bu blok ona HIZALANIR. */ .StatesBar { display: flex !important; align-items: stretch !important; /* sutunlar esit yukseklik */ /* Meta `justify-content:center` diyor; TASAN icerikte ortalama, tasmayi IKI YANA dagitir ve sol yari KAYDIRILAMAZ (scrollLeft 0'in solu erisilemez). Olculdu (390px): ilk sutun -23..63, etiketin 30px'i ULASILAMAZ. `> div{flex:1}` oldugu icin sigan durumda flex-start ile ortalama arasinda fark YOKTUR. */ justify-content: flex-start !important; gap: 0 !important; /* ray kesintisiz olsun (8px bosluk rayi kesiyordu) */ padding: 16px 14px 10px !important;/* ustteki nokta (top:-7px) kirpilmasin */ background: #f8fafc !important; /* 2026-10-29 kullanıcı emri: ".StatesBar { border: 0 } tüm css'lerde" — dış çerçeve (ve onunla birlikte gelen 12px köşe yuvarlaması) kaldırıldı; durum rayı çerçevesiz bir zemindir. Bu katman (NN-*) Meta'dan ÖNCE yüklenir; kazanan katman zz-*.css'tir, ama kural TÜM bildirimlerde tutarlı tutulur. */ border: 0 !important; border-radius: 0 !important; margin: 0 !important; overflow-x: auto !important; } .StatesBar > div { display: flex !important; align-items: center !important; justify-content: flex-start !important; /* etiketler ayni yerden baslar */ gap: 0 !important; padding: 0 !important; font-size: 12px !important; font-weight: 600 !important; position: relative !important; } /* Meta `.StatesBar a{flex:1}` diyor; sutun (column) yonunde bu, ETIKETI DIKEYDE buyutur -> gecis dugmesi OLMAYAN sutunlarda etiket asagi kayiyordu (14px fark). Etiket kendi yuksekligi kadar yer alir, gecis dugmesi ALTA sabitlenir. */ .StatesBar > div > a { flex: 0 0 auto !important; /* OLCULDU: mevcut durumun halkasi (Meta `.CurrentState a:after` top:-12px/25px) raya ortelenir, yani alt kenari `a.top+13`e iner; etiket ise `a.top+8`de basliyordu -> halka etiketi 5px ORTUYORDU. Ust dolgu TUM durumlarda esit artirilir; boylece hem ortusme biter hem etiket hizasi (0px) korunur. */ padding-top: 14px !important; } .StatesBar > div > .Transition { margin-top: auto !important; } /* Hap zeminleri rayi bozuyordu; vurgu artik RENK + KALINLIK + nokta ile veriliyor. Renkler #f8fafc zemininde WCAG AA: #475569 7.5:1 · #1d4ed8 6.3:1 · #64748b 4.6:1 (onceki NextState rengi #94a3b8 = 2.6:1 idi, AA'yi gecmiyordu). */ .StatesBar > div.PrevState, .StatesBar > div.CurrentState, .StatesBar > div.NextState { background: transparent !important; border: 0 !important; box-shadow: none !important; } .StatesBar > div.PrevState { color: #475569 !important; } .StatesBar > div.CurrentState { color: #1d4ed8 !important; } .StatesBar > div.NextState { color: #64748b !important; } /* Gecis dugmesi sutunun etiket rengini MIRAS ALMAZ: `.NextState` sutununun #64748b degeri dugmenin kendi (inline, durum rengi) zemininde okunmuyordu — OLCULDU satis AssetCard Detail masaustu "Kur": #64748b / forestgreen = 1,08:1. Mobilde sutun kurali yok ve metin #000 (4,78:1) — masaustu AYNI degere cekilir; `var(--textColor)` (#303030) 3,01:1 verdi, AA'yi gecmedi (olculdu). */ .StatesBar > div > .Transition, .StatesBar > div > .Transition > span { color: #000 !important; } /* Birincil gecis — 2026-10-27 (kalite dokuman plani T-KD-15: "duruma gore TEK ana eylem"). XML'de Transition/@Class="TransitionPrimary" ile BILDIRILIR (veri; kod hangi gecisin ana oldugunu bilmez). Platform `.PrimaryButton` KULLANILMADI: tema yesili (#7ABC13) + beyaz yazi 2,3:1 — AA'yi gecmez. #1d4ed8 / #fff = 6,7:1. Ayni durumdaki diger gecisler GIZLENMEZ (erisim kaybolmaz); cerceveli, zeminsiz ikincil gorunume iner. Kimlik ve tiklama yolu degismez — ayni m-transition dugmesidir. */ .Transition.TransitionPrimary, .StatesBar > div > .Transition.TransitionPrimary { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; padding: 0 16px !important; background-color: #1d4ed8 !important; border: 1px solid #1d4ed8 !important; font-weight: 700 !important; } .Transition.TransitionPrimary, .Transition.TransitionPrimary > span, .StatesBar > div > .Transition.TransitionPrimary, .StatesBar > div > .Transition.TransitionPrimary > span { color: #fff !important; } .StatesBar:has(.Transition.TransitionPrimary) > div > .Transition:not(.TransitionPrimary), .Transactions:has(> .Transition.TransitionPrimary) > .Transition:not(.TransitionPrimary) { background-color: transparent !important; border: 1px solid #94a3b8 !important; } /* Mevcut durumun etiketi digerleriyle AYNI hizada dursun. Meta `.StatesBar .CurrentState a{padding:16px 4px !important;height:100%}` diyor; burada (0,3,1) ozgullukle hizalaniyor. */ .StatesBar > div.CurrentState > a { height: auto !important; padding: 14px 8px 2px !important; } /* `::after` Meta'da baglanti cizgisinin SAG YARISIDIR — ok karakteri oraya YAZILMAZ. */ .StatesBar > div:not(:last-child)::after { content: "" !important; margin-left: 0 !important; } /* Sekme govdesindeki BOS DURUM GORUNMUYORDU — 2026-08-19 (olculdu: /mCRM "Satis Hunisi"). `.NoRecordsFound` MUTLAK konumludur (position:absolute), yani yuksekliğe KATKI VERMEZ; sekme govdesinin `min-height:100%` degeri ise yuksekligi tanimsiz bir ebeveynde cozulemez. Sonuc: panel yalnizca akistaki tek ogesi ("Hepsi" acilir listesi) kadar, 37px kaliyor ve "Satis Asamalari Yok" metni panelin 21px DISINDA, bir sonraki panelin altinda kayboluyordu — kullanici bos bir serit goruyordu. Kural yalnizca BOS sekmelerde (.NoItems) devreye girer; dolu gorunumlerin yuksekligi degismez. Ozgulluk (0,3,1) > Meta'nin (0,2,1) kurali. */ .TabBody > div.Selected.NoItems { min-height: 5em !important; } .SearchNavRow { display: flex; align-items: center; min-width: 0; } .SearchNavRow > .Nav { flex: 1 1 auto; min-width: 0; } .SearchFavoriteToggle { flex: 0 0 auto; min-width: 36px; min-height: 36px; margin-inline-start: auto; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted, #7e8299); font-size: 18px; line-height: 1; cursor: pointer; } .SearchFavoriteToggle:hover, .SearchFavoriteToggle:focus-visible { background: rgba(0, 158, 247, 0.10); outline: 2px solid transparent; } .SearchFavoriteToggle.IsFavorite { color: #f6b100; } .SearchPersonalEmpty { padding: 12px 14px; color: var(--text-muted, #7e8299); font-size: 12px; line-height: 1.5; } .SearchRecentQuery { width: 100%; border: 0; background: transparent; text-align: start; font: inherit; cursor: pointer; } .SearchRecentTime { flex: 0 0 auto; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted, #7e8299); font-size: 10px; } .SearchRecentClear { min-height: 38px; margin-top: 6px; padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted, #7e8299); font: inherit; text-align: start; cursor: pointer; } .SearchRecentClear:hover, .SearchRecentClear:focus-visible { background: rgba(0, 158, 247, 0.10); color: var(--primaryColor, #009ef7); outline: 2px solid transparent; } /* ================================================================ ItemHeader & ItemFooter UX Fixes ================================================================ */ /* Section tabs stay pinned to the top of the scrolling form body instead of floating away mid-scroll (KİŞİSEL/AİLE/İLETİŞİM/SAĞLIK etc.). Horizontal tab bars only — vertical (TabVer) tab rails are excluded. `Canvas` adapts to light/dark so content doesn't bleed through the pinned bar. */ .SingleItem:not(.NoStickyTabs) .TabPanel:not(.TabPanel_TabVer) > .TabHeader { position: sticky; top: 0; z-index: 6; /* Use the app's own surface token (theme-managed light/dark), NOT the OS `Canvas` system colour — Canvas followed the user's OS dark mode and rendered the bar black. var keeps it consistent with the form surface. */ background: var(--singleItemBackColor, #f0f1f6); } /* Live completeness meter — floats as a non-intrusive overlay pill just ABOVE the Save cluster (the footer is too cramped to host it inline). Amber while required fields remain; hidden once complete so it never crowds "Kaydet Kapat". Click jumps to the first empty required field (wired in atom.js). */ .RequiredMeter { position: absolute; /* anchors to .SingleItem; bottom set in atom.js */ right: 16px; bottom: 72px; /* fallback; JS overrides from real footer height */ z-index: 40; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8em; font-weight: 600; color: #b26a00; background: #fff8e6; border: 1px solid rgba(255, 193, 7, 0.7); border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); transition: background 0.15s ease, transform 0.12s ease; } .RequiredMeter::before { content: "\26A0"; /* ⚠ */ font-size: 0.9em; opacity: 0.85; } .RequiredMeter:hover { background: #fff2cc; transform: translateY(-1px); } /* Complete → no indicator needed; keep the footer clean. */ .RequiredMeter.RequiredMeterDone { display: none; } .RequiredMeter:empty { display: none; } /* UXPEAK #4 — Goal Gradient completion bar inside the meter chip */ .RequiredMeterBar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0%; background: linear-gradient(90deg, #34a853, #4285f4); border-bottom-left-radius: 999px; border-bottom-right-radius: 999px; transition: width 0.3s ease; } .RequiredMeterText { position: relative; z-index: 1; } /* Placement variants (RequiredMeterPosition per Object/Domain). AboveFooter is the default and uses the base rule + JS-computed bottom. */ .RequiredMeter.RequiredMeterPos_TopRight { top: 8px; bottom: auto; right: 16px; } .RequiredMeter.RequiredMeterPos_FooterInline { position: static; bottom: auto; right: auto; box-shadow: none; margin-left: 8px; } /* ⛔ 2026-08-27 — MOBİLDE ÖRTÜŞME. Varsayılan (AboveFooter) çip `position:absolute` ve `bottom` JS'ten hesaplanıyor; dar kadrajda form alanının ÜSTÜNE biniyordu. ÖLÇÜLDÜ (finance, Pixel7 emülasyonu, TaxFilingRun formu): "5 zorunlu alan kaldı" bandı y=685/h=14 konumundaydı ve `elementsFromPoint` bandın MERKEZİNDE `FieldLabel` döndürdü — yani çip bir form etiketini örtüyordu. POLİTİKA (361-ui): yüzer/sabit yüzeyin istenmeyen kesişimi 0 px2 olmalı. ÇARE: dar kadrajda çip AKIŞA alınır — yer kaplar, hiçbir şeyi örtmez. Geniş kadrajda davranış DEĞİŞMEZ (orada örtüşme ölçülmedi ve yüzer çip yerden tasarruf ediyor). ⚠️ `static` DEĞİL `relative`: içindeki `.RequiredMeterBar` absolute'tur; ebeveyn positioned olmazsa bar en yakın konumlanmış ataya (SingleItem) göre yerleşir ve ilerleme çubuğu bozulurdu. Bu, "bir şeyi düzeltirken çalışanı bozma" sınıfıdır. */ @media (max-width: 768px) { .RequiredMeter.RequiredMeterPos_AboveFooter { position: relative; bottom: auto; right: auto; display: flex; width: fit-content; max-width: calc(100% - 24px); margin: 8px 12px 4px auto; box-shadow: none; } } /* #3 Searchable combobox for large native selects (ValueFieldType enums). */ .SiCombo { position: relative; flex: 1; min-width: 0; } .SiComboInput { width: 100%; border: var(--inputBorder); border-radius: var(--inputRadius, 6px); padding: var(--inputPadding); } .SiComboList { display: none; position: absolute; z-index: 50; left: 0; right: 0; top: 100%; margin-top: 2px; max-height: 260px; overflow: auto; background: var(--singleItemBackColor, #f0f1f6); border: 1px solid rgba(127, 127, 127, 0.3); border-radius: 8px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); } .SiCombo.SiComboOpen .SiComboList { display: block; } .SiComboOpt { display: block; padding: 7px 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--labelColor, #3d5986); } .SiComboOpt:hover { background: rgba(10, 110, 185, 0.10); } .SiComboOptSel { font-weight: 600; background: rgba(10, 110, 185, 0.06); } .SiComboMore { padding: 6px 12px; font-size: 0.8em; opacity: 0.6; } /* #13 Drag-and-drop file/image drop-zone highlight. */ .Field.Mode_Edit .FieldValue.SiDragOver, .Field.Mode_Edit .SiDragOver { outline: 2px dashed var(--activeBorderColor, #0a6eb9); outline-offset: -2px; background: rgba(10, 110, 185, 0.06); border-radius: var(--inputRadius, 6px); } /* ItemHeader: PreviewButton always visible (not hover-only) */ .ItemHeader > .Right .ItemPreviewButton { opacity: 0.4; transition: opacity 0.2s ease; } .ItemHeader:hover > .Right .ItemPreviewButton { opacity: 1; } /* ItemHeader: mobile back button */ .ItemHeader .MobileBackBtn { display: none; } body.Mobile .ItemHeader .MobileBackBtn { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; cursor: pointer; font-size: 20px; opacity: 0.6; transition: opacity 0.15s; border: none; background: transparent; } body.Mobile .ItemHeader .MobileBackBtn:hover, body.Mobile .ItemHeader .MobileBackBtn:active { opacity: 1; } /* ItemHeader: animation on mount */ .ItemHeader { animation: headerSlideIn 0.25s ease-out; } @keyframes headerSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* ItemFooter: ByUserDate always visible at reduced opacity */ .ByUserDate { opacity: 0.4 !important; position: static !important; transition: opacity 0.2s ease; } .ItemFooter:hover .ByUserDate { opacity: 0.7 !important; } .ItemFooter:hover .ByUserDate:hover { opacity: 1.0 !important; } /* ItemFooter: larger submit buttons with visual feedback */ .ItemSubmit { opacity: 1 !important; } .ItemSubmit a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; min-width: 6em !important; max-width: 8em !important; opacity: 1 !important; border-radius: var(--radiusSm, 4px) !important; transition: all 0.15s ease; min-height: 44px; } .ItemSubmit a:active { transform: scale(0.95); } /* SaveButton (Kaydet — save & stay): a clear SECONDARY action beside the green primary "Kaydet Kapat" (OkButton). Was near-invisible — transparent bg, 10.8px text, mislabeled with the view title (B1). Now readable, outlined, distinct. */ .ItemSubmit > a.SaveButton { cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 1em; font-weight: 600; color: var(--activeBorderColor, #0a6eb9); background: color-mix(in srgb, var(--activeBorderColor, #0a6eb9) 10%, transparent); border: 1px solid color-mix(in srgb, var(--activeBorderColor, #0a6eb9) 42%, transparent); } .ItemSubmit > a.SaveButton:hover { opacity: 1 !important; background: color-mix(in srgb, var(--activeBorderColor, #0a6eb9) 18%, transparent); box-shadow: 0 2px 8px rgba(10, 110, 185, 0.28); } /* OkButton (Kaydet Kapat — primary submit action with checkmark icon) */ .ItemSubmit > a.OkButton { cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 1em; font-weight: 600; color: #fff !important; background-color: #00a74e !important; border: 1px solid #00a74e !important; } .ItemSubmit > a.OkButton:hover { opacity: 1 !important; background-color: #009646 !important; box-shadow: 0 2px 8px rgba(0, 167, 78, 0.35); } .ItemSubmit > a.CancelButton { cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 1em; font-weight: 500; } .ItemSubmit > a.CancelButton:hover { opacity: 1 !important; box-shadow: 0 2px 8px rgba(167, 0, 78, 0.2); } /* SaveAndNewButton (Kaydet & Yeni — save then reset to a blank form). A tinted accent action for rapid sequential entry, visually between the secondary Save and the green primary "Kaydet Kapat". */ .ItemSubmit > a.SaveAndNewButton { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 1em; font-weight: 600; color: #fff; background: var(--activeBorderColor, #0a6eb9); border: 1px solid var(--activeBorderColor, #0a6eb9); } .ItemSubmit > a.SaveAndNewButton:hover { opacity: 1 !important; filter: brightness(1.06); box-shadow: 0 2px 10px rgba(10, 110, 185, 0.35); } /* When a form footer occupies the bottom-right, lift the transient bottom-right #INFOMessages toasts (e.g. "Kaydedilemedi") so they don't land on the save cluster (B5). Scoped via :has() to ONLY when a SingleItem footer is present — the global bottom:1em position is untouched for every other screen. */ body:has(.SingleItem > .ItemFooter) .INFOMessages { bottom: 5.5em; } body.Mobile:has(.SingleItem) .INFOMessages { bottom: 7em; } /* New form header: the HeaderForm renders key fields (Öğrenci No, Sınıf…) which are empty on a brand-new record, so the dotted label-leaders read as broken placeholders (B9). In New mode, drop the leader and dim the empty header field so it reads as a clean "new record" state rather than a wall of dots. */ .SingleItemNew .ItemHeader .Field.FieldIsEmpty .FieldLabel:after { opacity: 0; } .SingleItemNew .ItemHeader .Field.FieldIsEmpty { opacity: 0.5; } /* ItemBottom: mobile sticky with safe area */ body.Mobile .ItemBottom { position: sticky; bottom: 0; z-index: 100; padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -2px 8px rgba(0,0,0,0.08); background: var(--backColor); border-top: 1px solid rgba(127, 127, 127, 0.15); } body.Mobile .ItemBottom > .Left, body.Mobile .ItemBottom > .Right { min-height: 48px; } /* ItemFooter: animation on mount */ .ItemFooter { animation: footerSlideIn 0.2s ease-out; } @keyframes footerSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* SingleItem: open animation */ .SingleItem { animation: singleItemOpen 0.3s ease-out; } @keyframes singleItemOpen { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } body.Mobile .SingleItem { animation-name: singleItemOpenMobile; } @keyframes singleItemOpenMobile { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } #SchemaStaleBanner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #37474f; color: #fff; font-size: 13px; } #SchemaStaleBanner span { flex: 1; } #SchemaStaleBannerReload { padding: 4px 14px; border: 1px solid rgba(255,255,255,0.4); border-radius: 3px; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; font-size: 12px; } #SchemaStaleBannerReload:hover { background: rgba(255,255,255,0.3); } #SchemaStaleBannerClose { border: none; background: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; } #SchemaStaleBannerClose:hover { color: #fff; } .ETWNewItemsBadge { display: block; width: 100%; padding: 5px 12px; background: #e8f5e9; border: none; border-bottom: 1px solid #a5d6a7; color: #2e7d32; font-size: 12px; text-align: center; cursor: pointer; position: sticky; top: 0; z-index: 200; } .ETWNewItemsBadge:hover { background: #c8e6c9; } .ItemStaleBanner { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fff8e1; border-bottom: 1px solid #ffe082; font-size: 13px; color: #5d4037; } .ItemStaleBanner span { flex: 1; } .ItemStaleBannerBtn { padding: 3px 10px; border: 1px solid #ffe082; border-radius: 3px; background: #fff3cd; color: #5d4037; cursor: pointer; font-size: 12px; } .ItemStaleBannerBtn:hover { background: #ffe082; } .ItemStaleBannerClose { border: none; background: none; cursor: pointer; font-size: 16px; color: #9e9e9e; line-height: 1; padding: 0 2px; } .ItemStaleBannerClose:hover { color: #333; } /* EditLock (S2): pessimistic edit-lock warning banner — record opened read-only because another user is editing it (m-editlock.js). */ .EditLockBanner { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: #fdecea; border-bottom: 1px solid #f5c6cb; font-size: 13px; color: #842029; } .EditLockBannerIcon { flex: none; } .EditLockBannerText { flex: 1; } .EditLockBannerRetry { padding: 3px 10px; border: 1px solid #f5c6cb; border-radius: 3px; background: #fff; color: #842029; cursor: pointer; font-size: 12px; } .EditLockBannerRetry:hover { background: #f8d7da; } /* Doküman kasası (m-vault.js): kasa kaydında durum + check-out / check-in bandı. Durum rengi bir olaydır: serbest = nötr, kilit sende = mavi, başkasında = amber, süresi dolmuş/hata = kırmızı. */ .VaultBar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 8px; padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #0f172a; font-size: 13px; line-height: 1.4; max-width: 100%; } .VaultBar.is-mine { border-color: #93c5fd; background: #eff6ff; } .VaultBar.is-other { border-color: #fcd34d; background: #fffbeb; } .VaultBar.is-expired, .VaultBar.is-error { border-color: #fca5a5; background: #fef2f2; } .VaultChip { flex: none; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e2e8f0; color: #334155; } .VaultBar.is-mine .VaultChip { background: #dbeafe; color: #1d4ed8; } .VaultBar.is-other .VaultChip { background: #fef3c7; color: #92400e; } .VaultBar.is-expired .VaultChip, .VaultBar.is-error .VaultChip { background: #fee2e2; color: #b91c1c; } .VaultBarText { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; } .VaultBarText b { font-weight: 700; } .VaultBarSub { display: block; color: #475569; font-size: 12px; } .VaultBarActions { display: flex; flex-wrap: wrap; gap: 8px; } .VaultBtn { white-space: nowrap; flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #0f172a; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .VaultBtn:hover { background: #f1f5f9; } .VaultBtn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .VaultBtn.is-primary { background: #2563eb; border-color: #2563eb; color: #fff; } .VaultBtn.is-primary:hover { background: #1d4ed8; } .VaultBtn[disabled] { opacity: .55; cursor: default; } /* Q17 (2026-10-28): bağlı belge değişti uyarısı — kehribar, metin AA kontrastlı. */ .VaultBtn.is-warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; } .VaultBtn.is-warning:hover { background: #fef3c7; } .VaultLinkAdd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .VaultLinkAdd input { flex: 1 1 160px; min-width: 0; min-height: 38px; } /* "Diğer" taşma menüsü (2026-10-28, Drive QMS Q37): seyrek eylemler bir tık arkada; tek birincil eylem görünür kalır. */ .VaultMore { position: relative; flex: 0 0 auto; } .VaultMore > summary { list-style: none; gap: 6px; } .VaultMore > summary::-webkit-details-marker { display: none; } .VaultMore > summary::after { content: "\25BE"; font-size: 11px; color: #475569; } .VaultMore[open] > summary { background: #f1f5f9; } .VaultMoreMenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, .14); } .VaultMoreMenu .VaultBtn { width: 100%; justify-content: flex-start; border-color: transparent; } .VaultPanel { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid #e2e8f0; min-width: 0; } .VaultPanel label { font-size: 12px; font-weight: 600; color: #475569; } .VaultPanel input[type=file], .VaultPanel textarea { width: 100%; min-height: 40px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; font: inherit; } .VaultMsg { color: #b91c1c; font-weight: 600; } .VaultRevList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .VaultRevList li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid #f1f5f9; } .VaultRevNo { font-weight: 800; min-width: 44px; } .VaultRevMeta { color: #475569; font-size: 12px; } @media (max-width: 640px) { .VaultBar { padding: 10px; } .VaultBarActions { width: 100%; } .VaultBtn { min-height: 42px; flex: 1 1 45%; } .VaultMore { flex: 1 1 45%; } .VaultMore > summary { width: 100%; } .VaultMoreMenu { left: 0; right: 0; min-width: 0; } .VaultMoreMenu .VaultBtn { flex: 0 0 auto; } } /* 2026-10-31 Belge-Önce Doküman Çalışma Alanı (UX-01..UX-41, WCAG AA >= 4.5:1) */ .VaultBar.is-released { border-color: #86efac; background: #f0fdf4; } .VaultBar.is-released .VaultChip { background: #dcfce7; color: #166534; } .VaultBar.is-review { border-color: #93c5fd; background: #f8fafc; } .VaultBar.is-review .VaultChip { background: #dbeafe; color: #1e40af; } .VaultBar.is-empty { border-color: #c7d2fe; background: #f8fafc; } .VaultBar.is-empty .VaultChip { background: #e0e7ff; color: #3730a3; } .VaultBtn.is-accent { background: #eef2ff; border-color: #6366f1; color: #312e81; font-weight: 700; } .VaultBtn.is-accent:hover { background: #e0e7ff; } .VaultBtnSmall { min-height: 30px; padding: 4px 10px; font-size: 12px; } .VaultPulseReady { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.24); } .VaultRequiredPulse { outline: 2px solid #dc2626 !important; outline-offset: 3px; border-radius: 6px; background: #fef2f2 !important; transition: background 0.3s ease; } .VaultDocWorkspace { display: flex; flex-direction: column; gap: 0; margin: 0 0 14px; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffff; overflow: hidden; } .VaultWsTabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 8px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; } .VaultWsTab { border-color: transparent; background: transparent; color: #475569; font-weight: 600; border-radius: 6px; min-height: 30px; padding: 4px 12px; } /* Okuma/eğitim şeridi sekme satırında: tek bant (ayrı kutu + boşluk yok). */ .VaultWsTabs > .VaultAckSlot { flex: 1 1 320px; min-width: 0; display: flex; justify-content: flex-end; } .VaultWsTabs > .VaultAckSlot:empty { display: none; } .VaultWsTabs > .VaultAckSlot .VaultAckBar { flex: 1 1 auto; margin: 0; padding: 2px 10px; border-radius: 6px; gap: 4px 10px; justify-content: flex-end; } .VaultWsTabs > .VaultAckSlot .VaultAckInfo { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 8px; } .VaultWsTab:hover { background: #e2e8f0; color: #0f172a; } .VaultWsTab.is-active { background: #ffffff; border-color: #cbd5e1; color: #0f172a; font-weight: 700; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .VaultControlledPill { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #dcfce7; color: #166534; border: 1px solid #86efac; } .ItemBody.VaultKunyeCollapsed { display: none !important; } .VaultPreviewPane { display: flex; flex-direction: column; min-height: 440px; background: #f1f5f9; } .VaultPreviewPane.is-split-quiz { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 0; align-items: stretch; } .VaultPreviewHost { min-width: 0; width: 100%; } .VaultPreviewFallback { padding: 28px; text-align: center; } .VaultQuizPane { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: #ffffff; border-left: 1px solid #cbd5e1; max-height: 640px; overflow-y: auto; } .VaultQuizHdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .VaultQuizClose { min-height: 32px; padding: 2px 10px; } .VaultQuizQ { margin: 0; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; display: flex; flex-direction: column; gap: 6px; } .VaultQuizQ legend { font-weight: 700; font-size: 13px; color: #0f172a; padding: 0 4px; } .VaultQuizOpt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #1e293b; } .VaultQuizOpt:hover { background: #eef2ff; } .VaultQuizSrc { padding: 8px 10px; border-left: 3px solid #2563eb; background: #eff6ff; color: #1e3a8a; font-size: 12px; border-radius: 0 6px 6px 0; } .VaultAckBar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; margin: 0 12px; border-radius: 8px; border: 1px solid #cbd5e1; background: #f8fafc; } .VaultAckBar.is-pending { border-color: #93c5fd; background: #eff6ff; } .VaultAckBar.is-complete { border-color: #86efac; background: #f0fdf4; } .VaultAckBar.is-overdue { border-color: #fcd34d; background: #fffbeb; } .VaultAckInfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .VaultAckMeta { font-size: 12px; color: #475569; } .VaultLinkPicker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .VaultSelect { flex: 1 1 200px; min-width: 0; min-height: 38px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #ffffff; color: #0f172a; font-size: 13px; } .VaultDocLink { color: #1d4ed8; font-weight: 600; text-decoration: none; } .VaultDocLink:hover { text-decoration: underline; } .VaultDiffWrap { display: flex; flex-direction: column; gap: 8px; } .VaultDiffOut { display: flex; flex-direction: column; gap: 6px; } .VaultDiffSum { font-weight: 700; font-size: 12.5px; color: #0f172a; padding: 6px 10px; background: #f1f5f9; border-radius: 6px; } .VaultDiffItem { padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #ffffff; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; } .VaultDiffBadges { display: flex; gap: 6px; align-items: center; } .VaultDiffKind { font-weight: 700; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: #e2e8f0; color: #1e293b; } .VaultDiffItem.is-added .VaultDiffKind { background: #dcfce7; color: #166534; } .VaultDiffItem.is-removed .VaultDiffKind { background: #fee2e2; color: #991b1b; } .VaultDiffItem.is-changed .VaultDiffKind { background: #dbeafe; color: #1e40af; } .VaultDiffNumBadge { font-weight: 700; padding: 1px 8px; border-radius: 999px; font-size: 11px; background: #fef3c7; color: #92400e; } .VaultDiffBefore { color: #991b1b; background: #fef2f2; padding: 4px 8px; border-radius: 4px; } .VaultDiffAfter { color: #166534; background: #f0fdf4; padding: 4px 8px; border-radius: 4px; } @media (max-width: 900px) { .VaultPreviewPane.is-split-quiz { grid-template-columns: 1fr; } .VaultQuizPane { border-left: 0; border-top: 1px solid #cbd5e1; max-height: none; } } @media (max-width: 640px) { .VaultControlledPill { margin-left: 0; } .VaultAckSlot { position: sticky; bottom: 0; z-index: 15; background: #ffffff; padding: 4px 0; } .VaultAckBar.is-pending .VaultBtn { width: 100%; min-height: 44px; } } .LazyNavLoading { padding: 2rem; text-align: center; color: #888; font-size: 14px; } .ContentViewLoading { min-height: 1em; } /* O1 (2026-08-07): lazy content hydrate beklerken gri skeleton shimmer. Yalniz m.js ContentViewLoading ekliyken gorunur; hydrate bitince class kaldirilir ve icerik render edilir. CSS-only, JS degisikligi yok. */ .ContentViewLoading::before { content: ""; display: block; height: 120px; margin: 8px 0; border-radius: 8px; background: linear-gradient(90deg, rgba(var(--shadowRGB, 0, 0, 0), 0.05) 25%, rgba(var(--shadowRGB, 0, 0, 0), 0.12) 50%, rgba(var(--shadowRGB, 0, 0, 0), 0.05) 75%); background-size: 200% 100%; animation: ContentViewShimmer 1.2s ease-in-out infinite; } @keyframes ContentViewShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---- New Item FAB (Floating Action Button) ---- */ /* ⛔ 2026-09-21 (KULLANICI EMRİ): "FAB New Action Button EntityTypeView'ın DIŞINA çıkabiliyor, position:relative olması lazım, New Action Button EntityTypeView içinde kalmalı, Page'de de gözüküyor." KÖK NEDEN (ölçüldü): `position: fixed` düğmeyi EKRANA bağlar. Bugün onu listenin kutusunda tutan tek şey `.EntityTypeView { contain: layout }` (views.css:1309) — ve bu kısıt `(DF dosyasi silindi — FAB absolute)` (zz-dashboard-flow.css:365) ile KALDIRILIYOR. O görünümlerde FAB konum kabını kaybedip sayfanın üstüne taşıyordu. `contain`'e bağlı kalmak kırılgandır: kısıtı kaldıran her yeni kural FAB'ı yeniden kaçırır. ÇARE: FAB `absolute` olur ⇒ konum kabı daima en yakın konumlu ata, yani `.EntityTypeView { position: relative }` (views.css:1304). `contain` olsun olmasın düğme görünümün İÇİNDE kalır. Bu aynı zamanda AGENTS.md "Yüzen Aksiyon Düğmesi (FAB) Yasağı" (2026-09-17) kuralının gereğidir: serbest yüzen `position: fixed` buton sayfa kontrollerini ezer. */ .NewItemFAB { position: absolute; bottom: 30px; right: 30px; width: 56px; height: 56px; border-radius: 50%; background: var(--primaryColor, #0a6eb9); color: var(--primaryOnPlan, #fff); /* 2026-09-02: on plan zeminden (m.js motoru); token yoksa beyaz/#0a6eb9 = 6,1:1 */ border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.25); z-index: 100; display: flex; align-items: center; justify-content: center; font-size: 22px; transition: transform 0.2s, box-shadow 0.2s, opacity 0.15s ease; padding: 0; } /* 2026-08-29 — FAB VARSAYILAN + DESKTOP HOVER-REVEAL (kullanıcı kararı): New butonu default olarak FAB'tır; Desktop'ta EntityTypeView hover'ında belirir. Mobil/Tablet'te hover olmadığından FAB her zaman görünür kalır (kural yalnız .Desktop). Klavye kullanıcıları için focus-visible'da da görünür olur (erişilebilirlik). */ .Desktop .EntityTypeView > .NewItemFAB { opacity: 0; pointer-events: none; transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s ease 0.35s, pointer-events 0s linear 0.35s; } .Desktop .EntityTypeView:hover > .NewItemFAB, .Desktop .EntityTypeView > .NewItemFAB:hover, .Desktop .EntityTypeView > .NewItemFAB:focus-visible { opacity: 1; pointer-events: auto; transition-delay: 0s; } /* KAYIT YOK → TEK BUTON: NoItems durumunda NoRecordsFound boş-durum bileşeninin kendi "+ Yeni" butonu tek CTA'dır; FAB ikinci buton etmemek için tamamen gizlenir. (NoItems class'ı kayıt sayısı 0'a düşünce etwdiv'e eklenir; kayıt gelince kalkar — FAB DOM'da kalır, bu kural görünümü anında açar/kapar.) */ .NoItems .NewItemFAB { display: none !important; } /* C4 (2026-06-13): was outline:none (suppressed keyboard focus). Restore a ring for keyboard users. */ .NewItemFAB:focus-visible { outline: 2px solid var(--focusColor, rgb(10, 110, 185)); outline-offset: 3px; } .NewItemFAB:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.35); } .NewItemFAB:active { transform: scale(0.95); } body.Mobile .NewItemFAB { bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 20px; } .NewItemFAB i { line-height: 1; } /* 2026-09-21 — KONUM KABI GÜVENCESİ: FAB `absolute` olduğu için taşıyan görünümün konumlu olması ŞART. `.EntityTypeView` zaten `position: relative` (views.css:1304), ama FAB başka bir kapta (Page/Panel) çizildiğinde de kaçmasın diye kap açıkça çapalanır. */ .EntityTypeView:has(> .NewItemFAB), .Panel:has(> .NewItemFAB), .ViewBody:has(> .NewItemFAB) { position: relative; } /* ---- Confirm Modal Overlay ---- */ .ConfirmBox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; z-index: var(--zModal, 1000); animation: fadeIn 0.15s ease; /* A5 (2026-06-13): backdrop blur removed — the rgba(0,0,0,.35) scrim already reads as modal; blur over a large list/dashboard DOM caused measured ~13s first-frame stalls (designer-modal lesson). */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .ConfirmWindow { background: var(--backColor, #fff); color: var(--textColor, #303030); border-radius: var(--radiusLg, 12px); box-shadow: var(--shadowXl, 0 20px 60px rgba(0, 0, 0, 0.2)); padding: 24px; min-width: 320px; max-width: 440px; width: 90%; animation: confirmSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes confirmSlideIn { from { transform: translateY(16px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .ConfirmTitle { font-size: 1rem; font-weight: 500; margin-bottom: 20px; line-height: 1.5; } .ConfirmButtons { display: flex; gap: 10px; justify-content: flex-end; } .ConfirmCancel, .ConfirmOk { padding: 8px 20px; border-radius: var(--radiusMd, 8px); font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: background 0.15s ease, transform 0.1s ease; } .ConfirmCancel { background: rgba(127, 127, 127, 0.1); color: var(--textColor, #303030); } .ConfirmCancel:hover { background: rgba(127, 127, 127, 0.2); } .ConfirmOk { /* 2026-09-02 (backlog "WCAG AA kontrast: birincil dugme 3,67:1"): beyaz metin #3b82f6 uzerinde 3,67:1 idi. Zemin geri dususu ayni ton ailesinde #2563eb (5,2:1, .EmptyStateActionButton ile AYNI zincir); on plan m.js motorundan (`--primaryOnPlan`, `--primaryColor` tanimliysa) — zemin ve on plan AYNI kaynak. Hover: brightness(1.1) koyulastirilan zemini geri ACIYORDU (olculmus sinif, 20-uxcx-v5.css) — yerine ayni ailede bir ton koyu zemin. */ background: var(--primaryColor, #2563eb); color: var(--primaryOnPlan, #fff); } .ConfirmOk:hover { background: var(--primaryColor, #1d4ed8); } .ConfirmCancel:active, .ConfirmOk:active { transform: scale(0.97); } /* ================================================================ ItemFooter — Left, Center, Right Action Button & Icon Contract ---------------------------------------------------------------- • Center: STRICTLY TEXT ONLY — NO IMAGES / ICONS (display: none). • Left: Utility buttons (Edit, New, Del, Copy, Docs, Relations) MUST show images/icons at uniform 16x16 scale. • Right: Submit & preview buttons (Kaydet, Kaydet Kapat, Kapat, Önizleme) MUST show images/icons at uniform 16x16 scale. ================================================================ */ /* Left & Right & ItemSubmit: Uniform 16x16 action icon scale */ .ItemFooter .Left a .ImageSpan[class*="icon-"]:not(.icon-Empty), .ItemFooter .Left a > span:first-child:not(.ButtonText), .ItemFooter .Right a .ImageSpan[class*="icon-"]:not(.icon-Empty), .ItemFooter .Right a > span:first-child:not(.ButtonText), .ItemSubmit a .ImageSpan[class*="icon-"]:not(.icon-Empty), .ItemSubmit a > span:first-child:not(.ButtonText) { font-size: 16px !important; line-height: 1 !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-height: 16px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; vertical-align: middle !important; box-sizing: content-box !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; } /* 1. ItemFooter .Left — Images MUST BE VISIBLE */ .ItemFooter .Left a .ImageSpan, .ItemFooter .Left a img, .ItemFooter .Left a svg, .ItemFooter .Left a .ImageClass, .ItemFooter .Left a [class*="icon-"], .ItemFooter .Left a > span:first-child:not(.ButtonText), .ItemFooter .Left .ItemActions a .ImageSpan, .ItemFooter .Left .ItemActions a img, .ItemFooter .Left .ItemActions a svg, .ItemFooter .Left .ItemActions a .ImageClass, .ItemFooter .Left .ItemActions a [class*="icon-"], .SingleItem .ItemActions a.Action_Documents .ImageSpan, .SingleItem .ItemActions a.Action_Relations .ImageSpan { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } .ItemFooter .Left a > .ImageSpan[class*="icon-"]:not(.icon-Empty) + .ButtonText, .ItemFooter .Left a > span:first-child:not(.ButtonText) + .ButtonText { margin-left: 6px !important; } /* 2. ItemFooter .Right — Images MUST BE VISIBLE (Overrides old itemstyles.css:840 hiding OkButton icon) */ .ItemFooter .Right a .ImageSpan, .ItemFooter .Right a img, .ItemFooter .Right a svg, .ItemFooter .Right a .ImageClass, .ItemFooter .Right a [class*="icon-"], .ItemFooter .Right a > span:first-child:not(.ButtonText), .ItemFooter .Right .ItemSubmit a .ImageSpan, .ItemFooter .Right .ItemSubmit a img, .ItemFooter .Right .ItemSubmit a svg, .ItemFooter .Right .ItemSubmit a .ImageClass, .ItemFooter .Right .ItemSubmit a [class*="icon-"], .ItemFooter .Right .ItemSubmit a > span:first-child:not(.ButtonText), .ItemFooter .Right .ItemPreviewButton .ImageSpan, .ItemFooter .Right .ItemPreviewButton img, .ItemFooter .Right .ItemPreviewButton svg, .ItemSubmit a .ImageSpan, .ItemSubmit a img, .ItemSubmit a svg, .ItemSubmit a .ImageClass, .ItemSubmit a [class*="icon-"], .ItemSubmit a > span:first-child:not(.ButtonText), .ItemSubmit .OkButton > span:first-child, .ItemSubmit .CancelButton > span:first-child, .ItemSubmit .SaveButton > span:first-child, .ItemSubmit .SaveAndNewButton > span:first-child { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; } .ItemSubmit a > span:first-child:not(.ButtonText) + .ButtonText, .ItemSubmit a > .ImageSpan + .ButtonText { margin-left: 6px !important; } .ItemSubmit a > .ButtonText, .ItemSubmit .SaveButton > .ButtonText, .ItemSubmit .CancelButton > .ButtonText, .ItemSubmit .OkButton > .ButtonText { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* 3. ItemFooter .Center — Images MUST NOT BE VISIBLE (Strictly text-only buttons) */ .ItemFooter .Center a > .ImageSpan, .ItemFooter .Center a > img, .ItemFooter .Center a > svg, .ItemFooter .Center a > .ImageClass, .ItemFooter .Center a > [class*="icon-"], .ItemFooter .Center a > span[class*="icon-"], .ItemFooter .Center a > span:first-child:not(.ButtonText), .ItemFooter .Center .ItemActions a > .ImageSpan, .ItemFooter .Center .ItemActions a > img, .ItemFooter .Center .ItemActions a > svg, .ItemFooter .Center .ItemActions a > .ImageClass, .ItemFooter .Center .ItemActions a > [class*="icon-"], .ItemFooter .Center .ItemActions a > span[class*="icon-"], .ItemFooter .Center .ItemActions a > span:first-child:not(.ButtonText), .ItemFooter .Center button > .ImageSpan, .ItemFooter .Center button > img, .ItemFooter .Center button > svg, .ItemFooter .Center button > .ImageClass, .ItemFooter .Center button > [class*="icon-"] { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Reset margin-left on Center button labels since images are removed */ .ItemFooter .Center a > .ButtonText, .ItemFooter .Center .ItemActions a > .ButtonText { margin-left: 0 !important; } /* --------------------------------------------------------------------------- SingleItem Aksiyon Merkezi (2026-09-14) — FormsTrack carousel'inin yerine. Sol-alt "Tüm İşlemler" başlatıcısı + ortada hızlı erişim çubuğu + gruplu panel. Plan: .claude/plans/2026-09-14-singleitem-aksiyon-baslatici.md --------------------------------------------------------------------------- */ .ItemFooter, .SingleItem > .ItemFooter { height: auto !important; min-height: 52px !important; max-height: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; box-sizing: border-box !important; padding: 6px 12px !important; white-space: nowrap !important; overflow: visible !important; gap: 12px !important; background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; } body:not(.Mobile) .ItemFooter > .Left, body:not(.Mobile) .ItemFooter > .Right { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 4px !important; padding: 0 !important; } body:not(.Mobile) .ItemFooter > .Center { flex: 1 1 auto !important; min-width: 0 !important; height: auto !important; min-height: 40px !important; max-height: none !important; overflow: visible !important; display: flex !important; align-items: center !important; padding: 0 !important; box-sizing: border-box !important; position: relative !important; } /* 1. Başlatıcı düğmesi — nötr (birincil vurgu Kaydet Kapat'ta kalır) */ .ItemActionLauncherHost { display: flex; align-items: center; flex: 0 0 auto; } .ItemFooter .ItemActionLauncher, .ItemBottom .ItemActionLauncher { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 12px 0 10px !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; background: #ffffff !important; color: #0f172a !important; font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; cursor: pointer !important; box-sizing: border-box !important; box-shadow: none !important; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; } .ItemFooter .ItemActionLauncher:hover, .ItemBottom .ItemActionLauncher:hover { background: #f1f5f9 !important; border-color: #94a3b8 !important; } .ItemFooter .ItemActionLauncher:focus-visible, .ItemBottom .ItemActionLauncher:focus-visible { outline: 2px solid var(--primaryColor, #0284c7) !important; outline-offset: 2px !important; } .ItemFooter .ItemActionLauncher.MenuOpen, .ItemBottom .ItemActionLauncher.MenuOpen { border-color: var(--primaryColor, #0284c7) !important; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important; } .ItemActionLauncher .IAL_Icon { display: inline-flex !important; color: var(--primaryColor, #0284c7) !important; } .ItemActionLauncher .IAL_Count { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; height: 20px !important; padding: 0 6px !important; border-radius: 10px !important; background: #e2e8f0 !important; color: #334155 !important; font-size: 11px !important; font-weight: 700 !important; box-sizing: border-box !important; } .ItemActionLauncher .IAL_Chevron { font-size: 10px !important; color: #64748b !important; transition: transform 0.2s ease !important; } .ItemActionLauncher.MenuOpen .IAL_Chevron { transform: rotate(180deg) !important; } /* 2. Hızlı erişim çubuğu — sığmayan çip kırpılmaz, gizlenir (+N) */ .ItemFooter .ItemQuickBar { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; gap: 6px !important; overflow: hidden !important; padding: 2px 2px 2px 12px !important; margin: 0 !important; border-left: 1px solid #e2e8f0 !important; box-sizing: border-box !important; } .ItemFooter .Center .ItemQuickBar a.IAQ_Hidden { display: none !important; } .ItemFooter .Center .ItemQuickBar a.IAQ_Temp { border-style: dashed !important; } .ItemFooter .Center .ItemQuickBar a.IAQ_More { } /* Sistem aksiyonları ikon çipi — Center'ın "ikon yok" kuralını (744-763) BİLEREK ezer */ .ItemFooter .Center .ItemQuickBar a.IAQ_Icon { width: 38px !important; min-width: 38px !important; max-width: 38px !important; padding: 0 !important; justify-content: center !important; } .ItemFooter .Center .ItemQuickBar a.IAQ_Icon > *:not(.Aggregate) { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; font-size: 17px !important; line-height: 1 !important; color: inherit !important; /* itemstyles.css .ImageSpan position:absolute veriyor — çipin DIŞINA taşıyor, üç ikon üst üste biniyordu (ölçüldü: üç span aynı rect 273,896; çipler boş). İkon çipin içinde akar. */ position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; min-height: 0 !important; max-height: none !important; max-width: none !important; } .ItemFooter .Center .ItemQuickBar a.IAQ_Icon svg, .ItemFooter .Center .ItemQuickBar a.IAQ_Icon img { width: 18px !important; height: 18px !important; display: block !important; } .ItemFooter .Center .ItemQuickBar .IAQ_Sep { flex: 0 0 1px; width: 1px; height: 24px; margin: 0 4px; background: #e2e8f0; } /* SADE DÜĞME (kullanıcı kararı 2026-09-14): başlatıcı + hızlı erişim düğmeleri sağdaki Kaydet/Kapat gibi — kenarlık/zemin/köşe YOK, aralarında boşluk YOK (basılabilir alan en geniş), yalnız sağda ince ayraç çizgisi; tam çubuk yüksekliği (48px). Seçili olan: birincil renk + altta 2px çizgi. */ .ItemFooter .Center .ItemQuickBar { gap: 0 !important; padding: 0 !important; border-left: 0 !important; align-self: stretch !important; align-items: stretch !important; min-height: 48px !important; } .ItemFooter .Center .ItemQuickBar .IAQ_Sep { display: none !important; /* düğmeler zaten sağ çizgiyle ayrılır */ } .ItemFooter .Center .ItemQuickBar a.IAQ_Chip, .ItemFooter .Center .ItemQuickBar a.IAQ_More { height: auto !important; min-height: 48px !important; padding: 0 14px !important; margin: 0 !important; border: 0 !important; border-right: 1px solid #e2e8f0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #4f4f52 !important; font-size: 12px !important; font-weight: 500 !important; } .ItemFooter .Center .ItemQuickBar a.IAQ_Chip.IAQ_Icon { width: 46px !important; min-width: 46px !important; max-width: 46px !important; padding: 0 !important; } .ItemFooter .Center .ItemQuickBar a.IAQ_Chip:hover, .ItemFooter .Center .ItemQuickBar a.IAQ_More:hover { background: rgba(15, 23, 42, 0.05) !important; color: #0f172a !important; } .ItemFooter .Center .ItemQuickBar a.IAQ_Chip.SelectedAction { background: transparent !important; color: var(--primaryColor, #0284c7) !important; font-weight: 700 !important; box-shadow: inset 0 -2px 0 var(--primaryColor, #0284c7) !important; } .ItemFooter .Center .ItemQuickBar a.IAQ_More { border-style: solid !important; min-width: 48px !important; color: #475569 !important; font-weight: 700 !important; } .ItemFooter .ItemActionLauncher { height: 48px !important; min-height: 48px !important; padding: 0 14px 0 10px !important; border: 0 !important; border-right: 1px solid #e2e8f0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .ItemFooter .ItemActionLauncher:hover { background: rgba(15, 23, 42, 0.05) !important; } .ItemFooter .ItemActionLauncher.MenuOpen { border-color: #e2e8f0 !important; box-shadow: inset 0 -2px 0 var(--primaryColor, #0284c7) !important; } .ItemFooter .Center .ItemQuickBar a:focus-visible { outline: 2px solid var(--primaryColor, #0284c7) !important; outline-offset: 2px !important; } /* KAYIT EYLEMLERİ (ItemSubmit) — SADE DÜĞME DİLİ (kullanıcı kararı 2026-09-15) Ölçüldü (satis PersonTag + başlık formlu Profession, 1600x950): aynı Kaydet/Kapat/Kaydet Kapat kümesi başlıkta VE alt çubukta çiziliyordu; başlıkta zz-from-361 Kaydet'i çerçeveli kutu, alt çubukta itemstyles `visibility:hidden` — iki farklı görünüm. Alt düğmeler 65x48 ikon-üstte, "Kaydet Kapat" 86px'e sığmayıp 2 satır; "Değiştiren" tarihi (absolute top:0) üç düğmenin üstüne 5px biniyordu. Karar: kayıt eylemleri yalnız alt çubukta (atom.js HeaderSubmit=None). Kaydet/Kapat hızlı erişim çubuğunun sade dilinde — zeminsiz, gri, 48px, ince ayraç; hover'da Kaydet birincil mavi, Kapat kırmızı. Kaydet Kapat tek birincil eylem: yeşil dolgu, tek satır. Tarih bilgisi sağda iki satırlık grup. A/B (TG enjeksiyonu): tarih çakışması 3→0, çubuk dışı taşma 0, mobil değerler birebir aynı. Mobil (ItemBottom) BİLEREK kapsam dışı — dde77ab4f/febfbded6 390px ayarı korunur. */ body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit { display: flex !important; flex-direction: row !important; align-items: center !important; align-self: stretch !important; gap: 0 !important; height: auto !important; opacity: 1 !important; } body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; height: 48px !important; min-height: 48px !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; border: 0 !important; border-left: 1px solid #e2e8f0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #4f4f52 !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; text-shadow: none !important; visibility: visible !important; opacity: 1 !important; cursor: pointer !important; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important; } body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a > .ButtonText { margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: 1.2 !important; white-space: nowrap !important; } body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a:not(.OkButton) > span:first-child:not(.ButtonText) { color: inherit !important; } body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a:is(.SaveButton, .SaveAndNewButton):hover { background: rgba(2, 132, 199, 0.08) !important; color: var(--primaryColor, #0284c7) !important; } body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a.CancelButton:hover { background: rgba(190, 18, 60, 0.07) !important; color: #be123c !important; } body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a:focus-visible { outline: 2px solid var(--primaryColor, #0284c7) !important; outline-offset: -2px !important; } body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a.OkButton { height: 40px !important; min-height: 40px !important; margin: 0 0 0 10px !important; padding: 0 18px !important; border: 0 !important; border-radius: 8px !important; background: #00a74e !important; color: #ffffff !important; font-size: 13px !important; font-weight: 600 !important; } body:not(.Mobile) .SingleItem :is(.ItemFooter, .ItemHeader) .ItemSubmit > a.OkButton:hover { background: #009646 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 167, 78, 0.35) !important; } /* Önizleme: Kaydet/Kapat ile AYNI sade düğme — ikon + metin, 48px (kullanıcı isteği 2026-09-15: 46px ikon-only kare ikonu üste kaymış, komşularından küçük görünüyordu) */ body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; border: 0 !important; border-left: 1px solid #e2e8f0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #4f4f52 !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1 !important; white-space: nowrap !important; opacity: 1 !important; cursor: pointer !important; transition: background-color 0.15s ease, color 0.15s ease !important; } body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton > :is(.ImageSpan, img, svg, span:first-child:not(.ButtonText)) { position: static !important; top: auto !important; left: auto !important; transform: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-height: 16px !important; margin: 0 !important; padding: 0 !important; font-size: 16px !important; color: inherit !important; } body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton > .ButtonText { margin: 0 !important; padding: 0 !important; font-size: inherit !important; line-height: 1.2 !important; white-space: nowrap !important; } body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton:hover { background: rgba(2, 132, 199, 0.08) !important; color: var(--primaryColor, #0284c7) !important; } body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton:focus-visible { outline: 2px solid var(--primaryColor, #0284c7) !important; outline-offset: -2px !important; } /* Alt çubuk ve blokları TEK satır (kullanıcı isteği 2026-09-15). Şerit çubuğun içindeyken verilen flex-wrap, çok hızlı erişim düğmeli kayıtta (Cari: +12) Left/Center/Right'ı üç satıra bölüyordu. Sığmayan çip +N'e düşer. */ body:not(.Mobile) .SingleItem > .ItemFooter, body:not(.Mobile) .SingleItem > .ItemFooter > :is(.Left, .Center, .Right) { flex-wrap: nowrap !important; } /* Kaydet ve Önizleme yalnız ikon (kullanıcı isteği 2026-09-15): metin gizli, ad title/aria-label'da (SaveButton atom.js SaveButton'da, ItemPreviewButton atom.js ItemPreviewButton'da). Kare 46x48 — hızlı erişim ikon düğmeleriyle aynı ölçü. Kapat ve Kaydet Kapat metinli kalır. */ body:not(.Mobile) .SingleItem .ItemFooter .ItemSubmit > a.SaveButton > .ButtonText, body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton > .ButtonText { display: none !important; } body:not(.Mobile) .SingleItem .ItemFooter .ItemSubmit > a.SaveButton, body:not(.Mobile) .SingleItem .ItemFooter > .Right > .ItemPreviewButton { width: 46px !important; min-width: 46px !important; max-width: 46px !important; padding: 0 !important; gap: 0 !important; } /* Kayıt bilgisi şeridi (ItemMetaStrip): alt çubuğun HEMEN ÜSTÜNDE ince, sola yaslı bant (kullanıcı isteği 2026-09-15 — "ortası değil"; sağda RequiredMeter yüzer ve şeridin üstüne çıkar). atom.js şeridi ItemFooter'ın önüne KARDEŞ olarak koyar; .SingleItem flex sütunu olduğu için akışta çubuğun üstünde durur. */ body:not(.Mobile) .SingleItem > .ItemMetaStrip { flex: 0 0 auto !important; width: 100% !important; margin: 8px 0 0 0 !important; /* 2026-10-19: eskiden top:-8px idi; ItemFooter'ın aynı negatif kaymasını taklit ederek şeridi gövdenin son 8px'ine bindiriyordu (ölçüldü: şerit 811–835, gövde 214–819). Footer artık akışta (top:0), şerit de akışta kalır; çakışma yok. Boşluk negatif offset yerine margin ile. */ position: relative !important; top: 0 !important; /* Oluşturan solda, Değiştiren sağda; zemin saydam, şerit hafif soluk — hover'da netleşir (kullanıcı isteği 2026-09-15) */ border: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; height: 24px !important; padding: 0 16px !important; box-sizing: border-box !important; background: transparent !important; opacity: 0.75 !important; transition: opacity 0.15s ease !important; font-size: 11px !important; line-height: 1 !important; color: #64748b !important; white-space: nowrap !important; overflow: hidden !important; } body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate { position: static !important; top: auto !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 14px !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; overflow: visible !important; font-size: inherit !important; } body:not(.Mobile) .SingleItem > .ItemMetaStrip:hover { opacity: 1 !important; } body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span { display: inline-flex !important; padding: 0 !important; flex: 0 0 auto !important; justify-content: flex-start !important; } /* sıra: etiket · tarih · kullanıcı (DOM: etiket, kullanıcı, tarih) */ body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(1) { order: 1 !important; color: #94a3b8 !important; font-weight: 500 !important; letter-spacing: 0.01em !important; } body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(3) { order: 2 !important; color: #475569 !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; } body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(2) { order: 3 !important; gap: 2px !important; color: #64748b !important; } /* Kullanıcı çözülmediyse (iki iç span boş) kullanıcı parçası ve sahipsiz ":" çizilmez */ body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(2):not(:has(> span:not(:empty))) { display: none !important; } body:not(.Mobile) .SingleItem > .ItemMetaStrip > .ByUserDate > span:nth-child(2) > span:first-child:empty::after { content: none !important; } /* HeaderSubmit="Hover": başlıktaki küme yalnız başlık hover/odakta görünür */ .ItemHeader.HeaderSubmitHover > .Right .ItemSubmit { opacity: 0 !important; transition: opacity 0.15s ease !important; } .ItemHeader.HeaderSubmitHover:is(:hover, :focus-within) > .Right .ItemSubmit { opacity: 1 !important; } /* Mobil: itemstyles.css .ItemFooter{position:relative;top:-8px} çubuğu ItemBottom'un altına sokuyor, "Oluşturan / Değiştiren" satırı okunmuyordu (ölçüldü satis PersonTag iPhone 13: ItemBottom 496-565, ItemFooter 557-609, tarih 558-568). A/B enjeksiyon: ItemFooter 565-617, tarih 566-576 tam görünür, SingleItem yüksekliği ve masaüstü değişmedi. */ body.Mobile .SingleItem > .ItemFooter { top: 0 !important; } /* Legacy SingleItemFormsView="List": düz, yatay kaydırılan düğme şeridi */ .ItemFooter > .Center .ItemActions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; height: auto !important; min-height: 40px !important; padding: 2px !important; margin: 0 !important; border: none !important; background: transparent !important; box-sizing: border-box !important; } /* Çipler (hızlı erişim + legacy liste) */ .ItemFooter .Center a, .ItemFooter .Center .ItemActions a { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; height: 36px !important; min-height: 36px !important; padding: 0 12px !important; min-width: auto !important; max-width: 240px !important; border-radius: 6px !important; border: 1px solid #cbd5e1 !important; background-color: #ffffff !important; color: #334155 !important; font-size: 12px !important; font-weight: 500 !important; white-space: nowrap !important; cursor: pointer !important; flex: 0 0 auto !important; box-sizing: border-box !important; transition: all 0.15s ease !important; margin: 0 !important; } .ItemFooter .Center a:hover { background-color: #f1f5f9 !important; border-color: #94a3b8 !important; color: #0f172a !important; } .ItemFooter .Center a.SelectedAction, .ItemFooter .Center .ItemActions a.SelectedAction { background-color: rgba(2, 132, 199, 0.12) !important; border-color: var(--primaryColor, #0284c7) !important; color: var(--primaryColor, #0284c7) !important; font-weight: 700 !important; box-shadow: none !important; position: static !important; } .ItemFooter .Center a.SelectedAction .ButtonText, .ItemFooter .Center .ItemActions a.SelectedAction .ButtonText { color: var(--primaryColor, #0284c7) !important; font-weight: 700 !important; } .ItemFooter .Center a .Aggregate { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important; font-size: 10px !important; font-weight: 700 !important; border-radius: 9px !important; background: #e2e8f0 !important; color: #475569 !important; margin-left: 6px !important; line-height: 1 !important; box-sizing: border-box !important; border: none !important; } .ItemFooter .Center a.SelectedAction .Aggregate { background: var(--primaryColor, #0284c7) !important; color: #ffffff !important; } .ItemFooter .Center a > .ButtonText { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.2 !important; font-size: inherit !important; color: inherit !important; padding: 0 !important; margin: 0 !important; } /* 3. Gruplu aksiyon paneli (masaüstü: başlatıcının üstünde; ≤640px: alt çekmece) */ .ItemActionPanel { position: fixed; z-index: 100000; display: flex; flex-direction: column; background: #ffffff; color: #0f172a; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.28), 0 6px 12px -6px rgba(15, 23, 42, 0.16); overflow: hidden; font-family: inherit; white-space: normal; } .ItemActionPanel .IAP_Head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; border-bottom: 1px solid #f1f5f9; background: #f8fafc; } .ItemActionPanel .IAP_Title { font-size: 13px; font-weight: 700; color: #0f172a; } .ItemActionPanel .IAP_Close { margin-left: auto; flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: #475569; font-size: 20px; line-height: 1; cursor: pointer; } .ItemActionPanel .IAP_Close:hover { background: #e2e8f0; } .ItemActionPanel .IAP_SearchWrap { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; } .ItemActionPanel .IAP_Search { width: 100%; height: 36px; padding: 0 10px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 6px; outline: none; } .ItemActionPanel .IAP_Search:focus { border-color: var(--primaryColor, #0284c7); box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15); } .ItemActionPanel .IAP_List { overflow-y: auto; padding: 6px 6px 8px; overscroll-behavior: contain; } .ItemActionPanel .IAP_Section + .IAP_Section { border-top: 1px solid #e2e8f0; margin-top: 6px; padding-top: 6px; } .ItemActionPanel .IAP_Row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 4px 0 10px; border-radius: 6px; font-size: 13px; color: #334155; cursor: pointer; outline: none; } .ItemActionPanel .IAP_Row:hover, .ItemActionPanel .IAP_Row:focus { background: #f1f5f9; color: #0f172a; } .ItemActionPanel .IAP_Row:focus-visible { box-shadow: inset 0 0 0 2px var(--primaryColor, #0284c7); } .ItemActionPanel .IAP_Row.Active { background: rgba(2, 132, 199, 0.10); color: var(--primaryColor, #0284c7); font-weight: 600; } .ItemActionPanel .IAP_RowText { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ItemActionPanel .IAP_Current { font-weight: 800; } /* Sayaç tutucusu: görünmez ama DOM'a bağlı ve kesişir (tembel sorgu + kayıt bağı için ŞART) */ .IAH_AggHolder { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; overflow: visible; opacity: 0; pointer-events: none; } /* Her sayaç AYNI noktada kendi 1x1 kutusunda: alt alta dizilince yalnız ilki tutucunun görünen alanına düşüyor, diğerleri kırpılıp IntersectionObserver'da "görünmez" kalıyor ve tembel sorgu HİÇ koşmuyordu (ölçüldü Organization: Kişiler 11 geldi, İş Yerleri/Şubeler/Sözleşmeler/Açık Rıza "-"). */ .IAH_AggHolder > div { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; } /* Sıfır sayaç soluk — nav rozetiyle aynı dil (nav.css .Nav .Aggregate.AggregateZero) */ .ItemFooter .Center a .Aggregate.IAH_AggMirror.AggregateZero, .ItemActionPanel .IAP_Agg .Aggregate.IAH_AggMirror.AggregateZero { opacity: 0.5 !important; } .ItemFooter .Center a .Aggregate.IAH_AggEmpty, .ItemActionPanel .IAP_Agg .Aggregate.IAH_AggEmpty, .IAH_AggMirror.IAH_AggEmpty { display: none !important; } .ItemActionPanel .IAP_Agg .Aggregate { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e2e8f0; color: #475569; font-size: 10.5px; font-weight: 700; } .ItemActionPanel .IAP_Pin { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; font-size: 17px; line-height: 1; cursor: pointer; } .ItemActionPanel .IAP_Pin:hover { background: #e2e8f0; color: #b45309; } .ItemActionPanel .IAP_Pin.On { color: #d97706; } .ItemActionPanel .IAP_Row.Danger { color: #b91c1c; } .ItemActionPanel .IAP_Row.Danger:hover, .ItemActionPanel .IAP_Row.Danger:focus { background: #fef2f2; color: #991b1b; } .ItemActionPanel .IAP_Empty { padding: 14px; font-size: 12.5px; color: #64748b; text-align: center; } .IAP_Scrim { position: fixed; inset: 0; z-index: 99999; background: rgba(15, 23, 42, 0.38); } .ItemActionPanel.IAP_Sheet { left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: auto !important; max-height: 78vh !important; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom, 0); } .ItemActionPanel.IAP_Sheet .IAP_Row { min-height: 44px; font-size: 14px; } .ItemActionPanel.IAP_Sheet .IAP_Pin, .ItemActionPanel.IAP_Sheet .IAP_Close { width: 44px; height: 44px; } /* Mobil alt çubuk: başlatıcı aktif formu gösterir, çubuk yüksekliğini doldurur */ body.Mobile .ItemBottom .ItemActionLauncherHost { align-self: stretch; } body.Mobile .ItemBottom .ItemActionLauncher { height: 48px !important; min-height: 48px !important; border-radius: 0 !important; border-width: 0 1px 0 0 !important; } body.Mobile .ItemBottom .ItemActionLauncher .IAL_Text { overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; } /* 2026-09-14 olculdu (makina #PLMCosting/.../CST001, 390x844): alt cubuk 378 px'e sigmiyordu — sag ItemSubmit 3x84=252 px x=162'den basliyor, "Kaydet Kapat" 24 px ekran DISINDA kirpiliyordu; baslatici 60vw sabit tavani sol kutudan tasiyordu (ok simgesi x=176, kutu sonu 158). Care: sag blok sabit, sol blok kalan alani ESNEYEREK alir ve kuculebilir; baslatici kabina sigar, metin zaten ellipsis. Hicbir dugme dusurulmez. */ body.Mobile .ItemBottom > .Right { flex: 0 0 auto !important; } body.Mobile .ItemBottom > .Left { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; } body.Mobile .ItemBottom .ItemActionLauncherHost { min-width: 0 !important; max-width: 100% !important; } body.Mobile .ItemBottom .ItemActionLauncher { max-width: 100% !important; min-width: 0 !important; } /* Ikinci olcum: sag blok sabitlenince .ItemSubmit a { min-width:6em } uc dugmeyi ~88 px'e kilitledi, baslaticiya 95 px kaldi ve IAL_Text sozcuk basina ALT ALTA sarildi ("P.. U.. M..", 17 px, okunmaz). Mobil alt cubukta gonder dugmeleri 68 px (ikon + iki satir etiket sigar), baslatici metni TEK SATIR + ellipsis -> baslaticiya ~160 px. */ body.Mobile .ItemBottom .ItemSubmit > a { min-width: 0 !important; width: 68px !important; max-width: 68px !important; flex: 0 0 68px !important; } body.Mobile .ItemBottom .ItemActionLauncher .IAL_Text { white-space: nowrap !important; } /* Named actions with no real icon emit an empty placeholder glyph that still reserves ~13px of advance width, shoving labels off-centre. Collapse it so text-only actions read as clean, centred labels. */ .ItemFooter .ImageSpan.icon-Empty, .ItemActions .ImageSpan.icon-Empty { display: none !important; } /* Record-context actions (Documents / Relations) stay as icon buttons per the 2026-07-02 UI decision, but now have a stable 36px hit area and a subtle record-context accent so users can recognise them as "this record" tools. */ .SingleItem .ItemActions a.Action_Documents, .SingleItem .ItemActions a.Action_Relations { width: 50px !important; min-width: 50px !important; max-width: 50px !important; /* TO DO 06.07.2026 (yeni slayt "Aksiyon düğmeleri çok yer kaplıyor"): 66px bu iki buton yüzünden TÜM ItemActions barını yükseltiyordu; kullanıcının istediği 44px (dokunma hedefi için yeterli) ile bar kompaktlaşır. */ height: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 8px !important; flex: 0 0 50px !important; align-items: center !important; justify-content: center !important; position: relative; } .SingleItem .ItemActions a.Action_Documents:hover, .SingleItem .ItemActions a.Action_Relations:hover, .SingleItem .ItemActions a.Action_Documents.SelectedAction, .SingleItem .ItemActions a.Action_Relations.SelectedAction { background: rgba(var(--primaryColorRGB, 59, 130, 246), 0.10) !important; color: var(--primaryColor, #3b82f6) !important; } .SingleItem .ItemActions a.Action_Documents::after, .SingleItem .ItemActions a.Action_Relations::after { content: ""; position: absolute; right: 7px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--primaryColor, #3b82f6); opacity: 0.68; pointer-events: none; } /* ---------------------------------------------------------------- Contact-shortcut links (call / SMS / mail) — #20 ---------------------------------------------------------------- These sit next to a phone/e-mail field value (header banner, field values, list cells). They used raw OS emoji (📞 💬 📧) that rendered at OS-dependent sizes/colours and clashed with the crisp 361 icon font everywhere else. Now they emit `.ImageSpan.icon-{Call,Chat, Envelop}` — style them at one uniform size with a muted accent that lifts to the primary colour on hover. */ .LinkTo { text-decoration: none; } .LinkTo > .ImageSpan[class*="icon-"] { font-size: 15px; line-height: 1; color: var(--mutedTextColor, #6b7280); opacity: 0.85; transition: color 0.12s ease, opacity 0.12s ease; } .LinkTo:hover > .ImageSpan[class*="icon-"], .LinkTo:focus-visible > .ImageSpan[class*="icon-"] { color: var(--primaryColor, #3b82f6); opacity: 1; } /* ---------------------------------------------------------------- Mobile SingleItem footer reflow (#18) ---------------------------------------------------------------- On phones the footer kept its 3-zone nowrap row, so Left (edit/new/del/copy) + Right (Save/Cancel) ate the width and the Center secondary actions were crushed to ~18px → overlapping, unreadable text. Wrap the bar: Left + Right share the top row (Save/Cancel right-aligned, primary), and the Center secondary actions drop to their own full-width, horizontally-scrollable strip where each keeps its natural width. */ body.Mobile .SingleItem .ItemFooter { flex-wrap: wrap !important; gap: 6px; padding: 8px; align-items: center; } body.Mobile .SingleItem .ItemFooter > .Left { order: 1; flex: 0 0 auto; } body.Mobile .SingleItem .ItemFooter > .Right { order: 2; flex: 1 1 auto; justify-content: flex-end; } body.Mobile .SingleItem .ItemFooter > .Center { order: 3; flex: 1 0 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; gap: 6px; padding-bottom: 2px; scrollbar-width: thin; } body.Mobile .SingleItem .ItemFooter > .Center a { flex: 0 0 auto; /* keep natural width — never squish the labels */ white-space: nowrap; } /* Side-by-side field groups (DirectionVer / DirectionFloat = horizontal rows) overflow a phone viewport (e.g. a 4-up group ran 483px wide on a 390px screen). Stack them to a single full-width column on mobile. */ body.Mobile .SingleItem .DirectionVer, body.Mobile .SingleItem .FieldSet.DirectionVer, body.Mobile .SingleItem .FieldSet.DirectionFloat { flex-direction: column !important; flex-wrap: nowrap !important; /* 2026-09-14 (TG A/B olculdu, satis SalesTargetMonthly Detail mobil): layout.css `.DirectionFloat { justify-content:center }` sutun yonunde KALIYORDU -> sabit yukseklikli (253px, overflow:auto) sekme govdesinde tasan icerik IKI YONE ortalandi, ust kismi kaydirilamayan negatif tasmaya dustu: infografik top -221px, ilk alan (Temsilci) -77px, scrollTop=0 degistirmiyordu. flex-start enjeksiyonu: infografik = kap ustu, scrollHeight 727 -> 1201 (474px icerik erisilir oldu). */ justify-content: flex-start !important; } body.Mobile .SingleItem .DirectionVer > .Field, body.Mobile .SingleItem .FieldSet.DirectionVer > .Field, body.Mobile .SingleItem .FieldSet.DirectionFloat > .Field { width: 100% !important; flex: 1 1 auto !important; max-width: 100% !important; } /* ---------------------------------------------------------------- Pixel-uniform edit controls (#21) ---------------------------------------------------------------- Lookup widgets (.ItemSelection) rendered ~2px shorter (31px) than text inputs/selects (33px), so a lookup placed beside a text box did not line up. Pin the lookup to the same 33px box height. FieldCoordinate is excluded — its lat/long micro-inputs intentionally use a compact split control, not the standard field height. */ .SingleItem .Field.Mode_Edit:not(.FieldCoordinate) .ItemSelection { min-height: 33px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; } /* ── B1: per-record "Documents" (Drive-backed /Drive///) ─────────── 2026-07-02: inline collapsible bölüm KALDIRILDI (form içinde yer kaplayıp UI'ı bozuyordu); artık ItemActions sonundaki "Belgeler" butonuyla açılan TAM-ALAN aksiyon görünümü. */ .ItemDocs.full { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 480px; height: 100%; border: 1px solid var(--Line, #e2e8f0); border-radius: 10px; overflow: hidden; background: var(--backColor, #fff); margin: 8px 0; } .ItemCenter_Documents { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .ItemDocsFrame { width: 100%; height: 100%; border: 0; display: block; flex: 1 1 auto; } /* ---------------------------------------------------------------- Dark mode for form widgets that ship hardcoded light colours (4.2). The amber RequiredMeter pill and the SiCombo dropdown otherwise glared on a dark surface. Mirrors the platform mechanism: html.dark-theme (explicit) + html.auto-theme under OS prefers-color-scheme: dark. (SaveButton / SaveAndNewButton already use color-mix tokens → adapt.) ---------------------------------------------------------------- */ html.dark-theme .RequiredMeter { color: #ffcf70; background: #3a2f14; border-color: rgba(255, 193, 7, 0.45); } html.dark-theme .RequiredMeter:hover { background: #4a3c1a; } html.dark-theme .SiComboList { background: #2a2e38; border-color: rgba(255, 255, 255, 0.14); } html.dark-theme .SiComboOpt { color: #cbd5e1; } html.dark-theme .SiComboOpt:hover { background: rgba(120, 170, 255, 0.14); } @media (prefers-color-scheme: dark) { html.auto-theme .RequiredMeter { color: #ffcf70; background: #3a2f14; border-color: rgba(255, 193, 7, 0.45); } html.auto-theme .RequiredMeter:hover { background: #4a3c1a; } html.auto-theme .SiComboList { background: #2a2e38; border-color: rgba(255, 255, 255, 0.14); } html.auto-theme .SiComboOpt { color: #cbd5e1; } html.auto-theme .SiComboOpt:hover { background: rgba(120, 170, 255, 0.14); } } /* ======================================================================== Field-type Display polish (Edit mode has dedicated editors already). These make Color / code / URL fields read correctly when shown read-only. ======================================================================== */ /* Color field — swatch + hex, instead of a blank row. */ .FieldValue.ColorFieldValue { display: inline-flex; align-items: center; gap: 8px; } .ColorSwatch { width: 18px; height: 18px; border-radius: 4px; flex: 0 0 auto; background: var(--swatch-color, transparent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.12); } .ColorFieldValue .InputSpan a { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* Code field (XML/SVG/CSS/JSON/JS) — readable, escaped, scrollable source. */ pre.CodeDisplay { margin: 0; max-height: 320px; overflow: auto; padding: 10px 12px; border-radius: 8px; background: var(--codeBackColor, #f6f8fa); border: 1px solid var(--borderColor, rgba(0, 0, 0, 0.1)); font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace; font-size: 0.85em; line-height: 1.5; white-space: pre; tab-size: 2; color: var(--foreColor, #24292f); } /* URL field — now a real link; give it the affordance of one. */ .FieldValue a.ExternalLink { color: var(--activeBorderColor, #0a6eb9); text-decoration: none; cursor: pointer; word-break: break-all; } .FieldValue a.ExternalLink:hover { text-decoration: underline; } /* FieldFile (Dosya) display (#8/#9, 2026-07-03) — dosya adi + sag indirme butonu. Dosya adi target=_blank link degil; tiklayinca programatik indirir (iOS standalone fix). */ .InputSpan.FieldFileValue { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; } .InputSpan.FieldFileValue .FieldFileName { color: var(--activeBorderColor, #0a6eb9); cursor: pointer; text-decoration: none; word-break: break-all; overflow: hidden; text-overflow: ellipsis; } .InputSpan.FieldFileValue .FieldFileName:hover { text-decoration: underline; } .FieldFileDownload { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; color: var(--activeBorderColor, #0a6eb9); opacity: 0.8; transition: background-color 0.15s ease, opacity 0.15s ease; } .FieldFileDownload:hover { opacity: 1; background: var(--hoverBackColor, rgba(10, 110, 185, 0.1)); } .FieldFileDownload:focus-visible { outline: 2px solid var(--activeBorderColor, #0a6eb9); outline-offset: 1px; } .FieldFileDownload svg { width: 18px; height: 18px; display: block; } html.dark-theme pre.CodeDisplay { background: #1e222a; border-color: rgba(255, 255, 255, 0.12); color: #d6dae2; } @media (prefers-color-scheme: dark) { html.auto-theme pre.CodeDisplay { background: #1e222a; border-color: rgba(255, 255, 255, 0.12); color: #d6dae2; } } /* MOBIL-TEKIL-TEK-KAYDIRMA (2026-09-15, TG A/B olculdu: makina 5 SingleItem ekrani, iPhone 13). Kusur: .ItemBody > .Fields satir ici