/* ============================================================================= artun-ui.css — PLATFORM UI STANDARDI (firma-nötr) ============================================================================= Yükleme yolu: _content/Artun.Platform.UI/css/artun-ui.css NEDEN BURADA (ADR-0009): `.ui-*` sınıfları modül RCL sayfalarının (Sentez.UI, OverdueDebts.UI, EInvoice.UI…) kullandığı ORTAK UI dilidir. Firma app.css'inde dururlarsa modül UI'ı firma CSS'ine bağımlı olur ve "merkezî güncelleme" kırılır: paketi bump'layan firma yeni sayfayı alır ama stilini almaz. Artık paketle iner. YÜKLEME SIRASI (App.razor'da bu sırayla): 1) MudBlazor → bileşen kütüphanesi 2) DevExpress → bileşen kütüphanesi 3) BU DOSYA → platform standardı (kütüphaneleri ezer) 4) firma app.css → firmaya özel (platformu ezer) Sıra bozulursa kütüphane varsayılanları kazanır ve `!important` çöplüğü başlar. FİRMA BUNU DEĞİŞTİRMEZ. Marka rengi token'dan (`--mud-palette-primary`) gelir; firma kendi app.css'inde yalnız KENDİ sınıflarını tanımlar. Kural metni: Artun/docs/rules/UI_STANDARD.md · UI_GRID.md ============================================================================= */ /* ============================================================================= 0. GÖMÜLÜ FONT — Roboto Condensed (dar/uzun; grid + butonlar için) Paketle gelir (offline, on-prem CDN yok). Variable font: tek dosya 100-900 ağırlığın tamamını taşır. latin-ext ZORUNLU: Türkçe ğışçöü İ karakterleri orada — yoksa karışık (fallback) font görünür. ============================================================================= */ @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-condensed-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/roboto-condensed-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================================= 1. TOKEN'LAR — tek kaynak ============================================================================= */ :root { /* --- Tipografi (KARAR: aile = Roboto KALIR; boyut + kalınlık tekilleşir) --- Aile = Roboto (MudBlazor bundle, offline). Header başlıkları ile form alanları AYNI aileyi kullanır → tutarlı. */ --ui-font: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* Dar/uzun aile — VERİ yüzeyleri (grid) + butonlar: uzun metin dar kolonda rahat okunur. */ --ui-font-cond: "Roboto Condensed", var(--ui-font); --ui-fs-xs: .78rem; /* meta / yardım metni (soluk) */ --ui-fs-xxs: .72rem; /* kutu içi yardım metni — düzenleme kutusunda satır araları sıkı (1.150.0) */ --ui-fs-2xs: .72rem; /* 11.5px — PARAMETRE açıklaması (`.ui-param .ui-meta`). 28.07.2026: 12.48px etiketin 13.6px'i yanında fark edilmiyordu ("hangisi açıklama belli değil"). */ --ui-fs-data: .8125rem; /* 13px — KART İÇİ veri satırı (etiket+değer). Veri yüzeyi yoğundur; gövde tabanı orada iri kalıyor (kullanıcı ölçü kararı 25.07.2026). */ --ui-fs-sm: .85rem; /* ikincil gövde / bölüm başlığı */ --ui-fs: .9rem; /* GÖVDE + FORM ALANI (taban) */ --ui-fs-lg: 1.1rem; /* kayıt kimliği (detay orta ad) */ --ui-fs-xl: 1.3rem; /* sayfa / tür başlığı */ --ui-fw-normal: 400; --ui-fw-medium: 600; --ui-fw-bold: 700; /* --- Boşluk: 4'ün katları. Serbest px yazılmaz; ritim buradan gelir. --- */ --ui-sp-1: 4px; --ui-sp-2: 8px; --ui-sp-3: 12px; --ui-sp-4: 16px; --ui-sp-5: 24px; /* --- Köşe: 3 kademe + pill. (Önceden 9 farklı değer vardı: 2,4,6,7,8,9,10,12,999.) --- */ --ui-r-sm: 6px; /* buton, küçük kontrol, rozet kutusu */ --ui-r: 10px; /* kart, panel, çubuk — VARSAYILAN */ --ui-r-lg: 14px; /* dialog / yüzen yüzey */ --ui-r-pill: 999px; /* çip, sayaç */ /* --- Gölge: 3 seviye, İKİ KATMANLI, düşük opaklık --- Kural: yakın+sert katman (temas) + uzak+çok yumuşak katman (yükseklik). Tek katmanlı yüksek opaklıklı gölge (eski `0 2px 4px .22`) kartı "yapıştırılmış" gösteriyordu — modern görünümün büyük kısmı bu üç satırdan geliyor. */ --ui-sh-1: 0 1px 2px rgba(15, 40, 71, .07); /* dinlenme: kart, çubuk */ --ui-sh-2: 0 1px 2px rgba(15, 40, 71, .08), 0 10px 28px -14px rgba(15, 40, 71, .30); /* yükseltilmiş: header, bölüm kartı */ --ui-sh-3: 0 2px 8px rgba(15, 40, 71, .12), 0 24px 60px -20px rgba(15, 40, 71, .45); /* yüzen: dialog, popover */ /* --- Nötrler: hafif MAVİ eğimli slate (marka lacivertıyla akraba). Saf gri "seçilmemiş" görünür; eğimli nötr "seçilmiş" görünür. --- */ --ui-surface: #ffffff; /* kart / panel zemini */ --ui-surface-2: #f6f8fa; /* şerit, başlık zemini, hover */ --ui-surface-3: #eef2f6; /* segment / çip zemini */ --ui-surface-4: #e3e9f0; /* koyu nötr zemin (grid başlığı) — surface-3'ten bir kademe koyu */ --ui-line: #dce2ea; /* görünür kenarlık */ --ui-line-soft: #e9eef3; /* iç ayraç (tablo satırı) */ --ui-line-strong: #c6d0dc; /* belirgin ayraç (grid başlık alt çizgisi) */ --ui-ink: #15202e; /* birincil metin */ --ui-ink-2: #57647a; /* ikincil metin */ --ui-ink-3: #8592a3; /* soluk / meta */ /* --- Durum renkleri: MARKADAN BAĞIMSIZ. "Başarılı/hata/uyarı" anlamı firmaya göre değişmez; marka rengiyle boyanırsa anlam kaybolur (kırmızı olmayan hata gibi). ArtunTheme.cs ile aynı karar. --- */ --ui-danger: #d32f2f; --ui-danger-bg: rgba(211, 47, 47, .10); --ui-ok: #2e7d32; --ui-ok-bg: rgba(46, 125, 50, .12); --ui-warn: #b26a00; --ui-warn-bg: rgba(178, 106, 0, .13); /* --- Marka: GÖMÜLMEZ. Firma TEK renk girer (`Branding.Primary` → MudBlazor `--mud-palette-primary`); 50→900 SKALA buradan `oklch(from …)` ile türetilir. Firma "kırmızı" dediğinde tek parametre değişir, tüm roller uyumlu döner. (Karar: renk skalası + rol eşlemesi, 24.07.2026 — Varyant B "Dengeli".) --- */ --ui-brand-base: var(--mud-palette-primary, #0f2847); --ui-brand-50: oklch(from var(--ui-brand-base) 97.5% calc(c * .18) h); --ui-brand-100: oklch(from var(--ui-brand-base) 94% calc(c * .32) h); --ui-brand-200: oklch(from var(--ui-brand-base) 88% calc(c * .48) h); --ui-brand-300: oklch(from var(--ui-brand-base) 79% calc(c * .70) h); --ui-brand-400: oklch(from var(--ui-brand-base) 66% calc(c * 1.05) h); --ui-brand-500: oklch(from var(--ui-brand-base) 55% calc(c * 1.25) h); --ui-brand-600: oklch(from var(--ui-brand-base) 47% calc(c * 1.30) h); --ui-brand-700: oklch(from var(--ui-brand-base) 39% calc(c * 1.15) h); --ui-brand-800: oklch(from var(--ui-brand-base) 32% c h); --ui-brand-900: oklch(from var(--ui-brand-base) 26% c h); /* --- ROLLER (sabit tasarım kararı — renk değil ROL sabitlenir): üst bar = 900 (sayfadaki TEK koyu öğe; MudBlazor AppBar'ı Branding.AppBar çizer) birincil eylem + aksan (header sol çizgisi, kart şeridi, aktif sekme, ikon) = 600 grid başlığı = 100 tint + 900 yazı · seçili satır = 100 · odak = 600. Her rol 900'e boyanınca hiyerarşi kaybolup göz yoruluyordu (saha geri bildirimi). --- */ --ui-brand: var(--ui-brand-600); /* birincil eylem + aksan */ --ui-brand-strong: var(--ui-brand-900); /* koyu zemin (üst barla akraba) */ --ui-brand-soft: var(--ui-brand-100); /* tint zemin (grid başlığı, seçim) */ --ui-brand-ink: #ffffff; /* marka zemini üstündeki metin (600/900 üstünde) */ /* Koyu marka zemini üstünde İKİNCİL/SOLUK metin — beyazın opaklığından türer, marka tonundan bağımsızdır (her marka renginde okunur kalır). Giriş ekranı hero'su bunları kullanır. */ --ui-brand-ink-2: color-mix(in srgb, var(--ui-brand-ink) 78%, transparent); --ui-brand-ink-3: color-mix(in srgb, var(--ui-brand-ink) 55%, transparent); /* Gradyan bitişi: 900'den bir tık daha koyu (hero zemininde derinlik). */ --ui-brand-950: oklch(from var(--ui-brand-base) 18% c h); --ui-accent: var(--mud-palette-secondary, #22b8cf); --ui-focus: color-mix(in srgb, var(--ui-brand) 22%, transparent); /* Grid'e özel türevler — başlık NÖTR gri, marka yalnız eylem+aksan+seçimde (Varyant C+). Denenen ve beğenilmeyen başlık zeminleri (24.07.2026): 900 koyu (her şey aynı ton, göz yoruyor) → 100/200 tint (seçimle karışıyor / soluk) → 400 orta ton (rahatsız etti) → KARAR: koyu nötr gri (surface-4). Seçili satır marka-50 (açık tint) — başlık nötr olunca seçim tek renkli vurgu olarak ayrışıyor. */ --ui-grid-hdr: var(--ui-surface-4); /* başlık satırı zemini — koyu nötr gri */ --ui-grid-hdr-ink: var(--ui-ink); /* başlık yazı/ikon — nötr koyu */ --ui-grid-hdr-line: var(--ui-line-strong); /* başlık alt çizgisi */ /* Hover + seçim NÖTR slate MERDİVENİ (firma-bağımSIZ; kırmızı markada da grid nötr): satır (beyaz) < hover (çok açık) < seçim (bir tık koyu) < BAŞLIK (en koyu #e3e9f0). Seçim başlığı BASTIRMAZ; marka vurgusu seçili satırın solundaki 3px çizgide yaşar. (Denenen: marka-50 tint seçim gri başlıkla "mavi/yabancı" durdu → nötr merdiven kararı.) */ --ui-grid-row-hover: #f2f5f9; /* hover zemini — çok açık slate */ --ui-grid-row-focus: #e9eef5; /* odaklı/seçili satır — hover'dan koyu, başlıktan açık */ /* SINIFLANDIRMA PALETİ (kategorik) — `.ui-badge-tone-1..8`. DURUM renklerinden (ok/warn/danger) AYRI bir ailedir: bir TÜRÜ ayırt etmek için, iyi/kötü demek için değil. - Neden ayrı: tür rozetine `ok` (yeşil) takılınca kullanıcı onu "başarılı" okuyor ve aynı satırdaki gerçek Durum kolonuyla yarışıyordu (30.07.2026, banka mutabakatı Fiş Tipi). - PASTEL ve düşük doygunluk (kullanıcı kararı): grid veri yoğun bir yüzey, tür rozeti veriyi bastırmamalı. Zeminler beyaz satırda da, seçili satırın slate zemininde de (#e9eef5) ayrışır; yazı aynı rengin koyu eşleniği (kontrast ≥ 4.5:1). - MARKADAN BAĞIMSIZ (grid nötrlüğü gibi): kırmızı markalı firmada da aynı kalır. - Ton NUMARALI, isimsiz: anlamı YÜKLEYEN modüldür (hangi tür hangi ton). Palet burada anlamsız durur → başka modül aynı paleti kendi türleri için kullanabilir. - Sıcak/soğuk ayrımı çağıranın işine yarar: 1/2/5/6 soğuk, 3/4/7/8 sıcak. */ --ui-tone-1-bg: #e6eefb; --ui-tone-1-ink: #1d4e89; /* sky */ --ui-tone-2-bg: #e0f2ef; --ui-tone-2-ink: #10574d; /* teal */ --ui-tone-3-bg: #f8efdc; --ui-tone-3-ink: #7c5310; /* amber */ --ui-tone-4-bg: #fbe9ee; --ui-tone-4-ink: #8d2c43; /* rose */ --ui-tone-5-bg: #efeafb; --ui-tone-5-ink: #4b3690; /* violet*/ --ui-tone-6-bg: #ecf3e0; --ui-tone-6-ink: #47591c; /* lime */ --ui-tone-7-bg: #fbeee2; --ui-tone-7-ink: #8b4a1c; /* clay */ --ui-tone-8-bg: #f0ebe6; --ui-tone-8-ink: #5d4a38; /* stone */ } /* Aile: gövde + MudBlazor + DevExpress + .ui-* aynı (header ↔ form tutarlı). */ body { font-family: var(--ui-font); } .mud-typography, .mud-input, .mud-input-control, .mud-input-slot input, .mud-input-slot textarea, .mud-select, .mud-button-root, .mud-tabs, .mud-table, .mud-chip, .mud-menu, .mud-list, .ui-header-h, .ui-header-sub, .ui-header-id-name, .ui-header-id-meta, .ui-panel-h, .ui-panel-sub, .ui-toolbar-sel, .dxbl-grid, .dxbl-text-edit, input, textarea, select, button { font-family: var(--ui-font) !important; } /* YALNIZ GRID İÇİ dar (condensed) aile — uzun ünvan/açıklama dar kolonda rahat okunur (karar 24.07.2026). Butonlarda ve grid DIŞI metinlerde (seçili kayıt etiketi vb.) DENENDİ ve GERİ ALINDI: grid ile yan yana iki farklı karakter "iki ayrı şey" hissi verdi — condensed'ın sınırı grid'in kendisidir. Form girişleri de normal ailede (yazarken dar font yorucu). Bu kural yukarıdaki genel kuraldan SONRA gelir → aynı özgüllükte kazanır. */ .ui-grid.dxbl-grid, .ui-grid .dxbl-grid-table td, .ui-grid .dxbl-grid-table th { font-family: var(--ui-font-cond) !important; } /* ============================================================================= 2. SAYFA BAŞLIĞI (.ui-header) — UI_STANDARD §1 Liste sayfası: [ikon][başlık]. Detay sayfası: [sol: ikon+tür] [orta: kayıt kimliği] [sağ: geri butonu]. ============================================================================= */ /* TEK SATIR header (karar 24.07.2026): dikey alan grid'in — başlık ve alt-bilgi AYNI satırda ("Cari Kartlar · Canlı ERP (Sentez)"), ikon çipi küçük, dolgu dar. Kimlik + görsellik + doküman erişimi (ℹ) korunur; yükseklik ~yarıya iner. */ .ui-header { display: flex; align-items: center; gap: var(--ui-sp-2); flex-wrap: wrap; background: var(--ui-surface); padding: var(--ui-sp-2) var(--ui-sp-3); border: 1px solid var(--ui-line); /* Sol MARKA aksanı — 1.48.5 CSS taşımasında kaybolmuştu, geri geldi (saha geri bildirimi). */ border-left: 4px solid var(--ui-brand); border-radius: var(--ui-r); box-shadow: var(--ui-sh-2); margin-bottom: var(--ui-sp-2); } .ui-header-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--ui-r-sm); background: var(--ui-brand); color: var(--ui-brand-ink); } .ui-header-icon .mud-icon-root { font-size: 1.05rem; } /* TÜR başlığı ("Cari") bir ETİKETTİR — asıl kimlik ortadaki kayıt adıdır. İkisi de --ui-fs-lg/700 olunca hiyerarşi kayboluyor ve header "fazla büyük" görünüyordu. Ölçü SOL MENÜ ÖĞESİYLE AYNI (--ui-fs-sm): kullanıcı 25.07.2026 — "headerdaki Cari yazısı sol menüdeki menü yazısından büyük görünüyor, aynı boyutta olmalı" (ölçüm onu doğruladı: 14.4 vs 13.6). Ağırlık farkı (600 vs 400) başlık olduğunu söyler. */ .ui-header-h { font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); color: var(--ui-ink); line-height: 1.15; letter-spacing: -.2px; } .ui-header-sub { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-normal); color: var(--ui-ink-3); } /* Başlık+alt-bilgi sarmalayıcısı (ikon çipinin kardeşi, sınıfsız div) SATIRA döşenir; alt-bilgi başlığın devamına "·" ile eklenir. Sayfa markup'ı DEĞİŞMEDEN merkezî tek-satır. */ .ui-header-icon + div { display: flex; align-items: baseline; gap: var(--ui-sp-2); min-width: 0; } /* Başlık KIRILMAZ (mobilde "Alacak / Raporu" iki satıra düşüyordu); uzun alt-bilgi kırpılır. */ .ui-header-icon + div .ui-header-h { white-space: nowrap; } .ui-header-icon + div .ui-header-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; } .ui-header-icon + div .ui-header-sub::before { content: "· "; } /* Alt-bilgi içi eylem ayracı — normal orta noktadan BİRAZ büyük (kullanıcı kararı 24.07.2026). */ .ui-header-sub .ui-sub-sep { font-size: 1.15em; line-height: 1; color: var(--ui-ink-3); padding: 0 5px; } /* --- Detay header ek bölgeleri (temel .ui-header'ı bozmaz) --- */ .ui-header-left { display: flex; align-items: center; gap: var(--ui-sp-3); flex-shrink: 0; } /* Orta kimlik flex:1 ile büyür → geri butonunu doğal olarak sağa iter; tür başlığından KÜÇÜK. */ .ui-header-id { flex: 1 1 auto; min-width: 0; text-align: center; padding: 0 var(--ui-sp-2); } .ui-header-id-name { font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-bold); color: var(--ui-ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ui-header-id-meta { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-normal); color: var(--ui-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } /* Sağda buton görünümlü geri (liste adını taşır). */ .ui-header-back.mud-button-root { /* SAĞA İT (27.07.2026): detay sayfasında ortadaki `.ui-header-id` (flex:1) itiyordu, ama orta bölgesi OLMAYAN sayfalarda (ör. cari açılış) buton alt-yazıya yapışıyordu. `margin-left:auto` her iki düzende de doğru; orta bölge varsa zaten etkisiz. */ margin-left: auto; flex-shrink: 0; text-transform: none !important; font-weight: var(--ui-fw-medium); background: var(--ui-surface-2) !important; color: var(--ui-ink-2) !important; border: 1px solid var(--ui-line) !important; padding: 5px var(--ui-sp-3) !important; border-radius: var(--ui-r-sm); } .ui-header-back.mud-button-root:hover { background: var(--ui-surface-3) !important; color: var(--ui-ink) !important; } /* Doküman "i" tetiği başlık METNİYLE aynı satırda (alt yazıyla değil, tür başlığının yanında). Teknik doküman, açılan dialog içinde SuperAdmin sekmesindedir. */ .ui-title-i { display: inline-flex; align-items: center; gap: var(--ui-sp-2); } /* --- ETİKET–DEĞER SATIRI (.ui-kv) — bölüm kartı içeriğinin taban birimi, 25.07.2026 ----------- `.ui-scard-b` içinde "Etiket ....... Değer" satırı. Her detay sayfası bunu inline style ile yeniden kuruyordu (display:flex;gap:8px;padding:3px 0;min-width:150px…) → §0 ihlali + sayfadan sayfaya kayan ölçüler. Tek sınıf: hizalar her yerde aynı, ölçü token'dan gelir. Durum renkleri MARKADAN BAĞIMSIZ (borç/alacak gibi finansal yön anlamı firmaya göre değişmez). */ /* Ölçü: kart İÇİ veri satırı gövde tabanının bir kademe altında (--ui-fs-sm). Kullanıcı 25.07.2026: "desktopta sayfa yazıları normalden büyük gibi, çok az küçültsek". Kart başlığı da 13.6px olduğundan kart içi tek ölçüye oturur; değeri kalınlık ayırır. */ /* Satır aralığı SIKI (kullanıcı 25.07.2026: "satırlar arası boşluk fazla, biraz daha sıkışık"). Ölçülerek seçildi — satır 26px → 22px, kart %12 kısaldı; daha sıkısı (19px) 13px fontta satırları birbirine yapıştırıyordu. `line-height` ŞART: miras gelen 20px (≈1.54) tek başına satırı şişiriyordu, yalnız dolgu azaltmak yetmiyor. */ .ui-kv { display: flex; gap: var(--ui-sp-2); padding: 2px 0; line-height: 1.35; font-size: var(--ui-fs-data); } .ui-kv-k { min-width: 150px; color: var(--ui-ink-3); flex: 0 0 auto; } .ui-kv-v { font-weight: var(--ui-fw-bold); } /* Sıradan bilgi satırı: değer vurgulanmaz (bakiye/tutar gibi metrikler kalın kalır). */ .ui-kv-v.ui-kv-plain { font-weight: var(--ui-fw-medium); } /* Değeri çip/rozet olan satır: metin taban çizgisi yerine dikey ortalama gerekir. */ .ui-kv.ui-kv-center { align-items: center; } /* Yön renkli tutar — TEK kaynak. Kart satırı (`.ui-kv-v`) ile grid hücresi / serbest metin (`.ui-amt`) aynı üç durumu paylaşır: borç=danger, alacak=ok, sıfır=soluk. Renk MARKADAN BAĞIMSIZ (§0 Durum token'ı) — "borç kırmızı" anlamı firma teması kırmızıya dönse de değişmez. ⚠️ Sentez ekstresi bunu `style="color:#d32f2f"` ile gömüyordu (§0 ihlali, 27.07.2026) → sınıfa çekildi; artık ekstre gridi ile Bakiye kartı AYNI renk kuralını kullanır (ayrışamaz). */ .ui-kv-v.is-neg, .ui-amt.is-neg { color: var(--ui-danger); } /* borç */ .ui-kv-v.is-pos, .ui-amt.is-pos { color: var(--ui-ok); } /* alacak */ .ui-kv-v.is-zero, .ui-amt.is-zero { color: var(--ui-ink-3); } /* Tutar metni: yön rengi + orta kalınlık (sayı, çevresindeki satır metninden ayrışsın). */ .ui-amt { font-weight: var(--ui-fw-medium); } /* Kart içi alt başlık (ör. "Döviz bakiyeleri") — satır grubunu ayırır. */ .ui-kv-group { font-size: var(--ui-fs-xs); color: var(--ui-ink-3); margin-top: var(--ui-sp-2); } /* --- ETİKET–DEĞER LİSTESİ KABI (.ui-kvlist) — 28.07.2026 ------------------------------------- NE İÇİN: alt alta gelen `.ui-kv` satırlarını saran kap (detay popup'ının üst bilgisi, kart içi özet blokları). Satır aralığı `.ui-kv`'nin KENDİ 2px dolgusundan gelir; kap boşluk EKLEMEZ. NEDEN GEREKLİ: bu bloklar `.ui-col` ile sarılıyordu — oranın `gap: 12px`'i KART yığmak için tasarlandı; kv satırlarına uygulanınca üst bilgi dağılıyordu (kullanıcı 28.07.2026: "detay popup üst bilgilerinin arası çok açık"). Ölçü: satır arası 16px → 4px. Kural: `.ui-col` = kart/blok yığma · `.ui-kvlist` = satır yığma. */ .ui-kvlist { display: flex; flex-direction: column; min-width: 0; } /* Listenin ilk öğesi grup başlığıysa üstte fazladan boşluk bırakmaz (blok zaten yeni başlıyor). */ .ui-kvlist > .ui-kv-group:first-child { margin-top: 0; } /* --- KART İÇİ ÖZET TABLOSU (.ui-table) ------------------------------------------------------ NE İÇİN: satırların KAYIT değil ÖZET olduğu küçük tablolar — şirket bazında bakiye, döviz pivotu, toplam bandı. Sabit birkaç satır, filtre/sıralama/sayfalama İSTENMEZ. NE İÇİN DEĞİL: kayıt listesi (adres, yetkili, hareket…) → orası DxGrid (UI_GRID §0/§7). Ayrım şu soruyla yapılır: "satıra tıklanıp bir kayda gidilir mi?" Evetse grid, hayırsa bu tablo. Ölçüler grid ile aynı aileden (condensed, --ui-fs-data) ki iki tablo yan yana yabancı durmasın. */ .ui-table { width: 100%; border-collapse: collapse; font-family: var(--ui-font-cond); font-size: var(--ui-fs-data); } .ui-table th, .ui-table td { padding: 5px var(--ui-sp-2); border-bottom: 1px solid var(--ui-line-soft); } .ui-table thead th { background: var(--ui-grid-hdr); color: var(--ui-grid-hdr-ink); font-weight: var(--ui-fw-bold); text-align: left; white-space: nowrap; border-bottom: 2px solid var(--ui-grid-hdr-line); } /* Sayısal sütun: sağa yaslı + tabular rakam (basamaklar alt alta hizalansın). */ .ui-table th.num, .ui-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .ui-table tbody tr:hover { background: var(--ui-grid-row-hover); } /* TOPLAM satırı — grid'in alt özet bandıyla aynı dil (nötr şerit + kalın). */ .ui-table tfoot td { background: var(--ui-surface-2); font-weight: var(--ui-fw-bold); border-top: 1px solid var(--ui-line-strong); border-bottom: none; } /* Hücre içi İKİNCİL tutar — asıl rakamın ALTINDA, küçük ve solgun (ör. döviz tutarının TL karşılığı). Neden alt satır: her para birimine ikinci bir SÜTUN vermek pivotu iki katına çıkarıyordu (2 döviz = 5 sütun). Bilgi ikincil olduğundan hiyerarşi yatay değil DİKEY kuruldu (kullanıcı kararı 27.07.2026: "belki tutarların altına silik yazılabilir"). */ .ui-amt-sub { display: block; margin-top: 1px; font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-normal); color: var(--ui-ink-3); } /* Dar ekranda tablo kendi içinde yatay kayar — sayfa gövdesi ASLA yatay kaymaz (§8). */ .ui-table-scroll { overflow-x: auto; } /* Kart içinde ROZET/ÇİP satırı (ör. Bayi · VIP · Kara Liste). Sayfada `style="margin-top:10px;display:flex;gap:6px;flex-wrap:wrap"` olarak gömülüydü (§0). */ .ui-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-1); margin-top: var(--ui-sp-2); } /* Çip satırının SAĞ ucuna itilen eylem (ör. "Excel (tüm sayfalar)") — çiplerle karışmasın. */ .ui-chiprow-act { margin-left: auto; } /* --- ROZET (.ui-badge) — GRID SATIRI İÇİN HAFİF ÇİP (29.07.2026) -------------------------------- NE İÇİN: grid hücresinde durum/tür/oran göstermek (Fiş Tipi, güven %, kaynak, Aktif/Pasif). NEDEN MudChip DEĞİL: `MudChip Size.Small` bile ~26-32px yükseklik + kendi dış boşluğunu taşır; DxGrid `SizeMode.Small` satırı bundan alçaktır → satır yüksekliği çipe göre şişiyordu (kullanıcı geri bildirimi: banka mutabakatı satırlarında üç çip yan yana). Bu span metin satırından yüksek DEĞİL: line-height 1.35 + 1px dikey dolgu → hücrenin doğal satır kutusuna oturur, satırı büyütmez. MudChip yalnız dialog/kart gibi bol alanlı yüzeylerde kalır. RENK ROLDÜR: anlam taşımayan rozet nötr; ok/warn/danger durum token'larından (markadan bağımsız, §0), info marka tint'inden gelir. */ .ui-badge { display: inline-flex; align-items: center; vertical-align: middle; padding: 1px 7px; border-radius: var(--ui-r-pill); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-medium); line-height: 1.35; white-space: nowrap; letter-spacing: -.1px; background: var(--ui-surface-3); color: var(--ui-ink-2); } .ui-badge + .ui-badge { margin-left: var(--ui-sp-1); } .ui-badge-ok { background: var(--ui-ok-bg); color: var(--ui-ok); } .ui-badge-warn { background: var(--ui-warn-bg); color: var(--ui-warn); } .ui-badge-danger { background: var(--ui-danger-bg); color: var(--ui-danger); } .ui-badge-info { background: var(--ui-brand-soft); color: var(--ui-brand-strong); } /* TÜR rozeti (sınıflandırma) — pastel ton paleti (§0 token bloğu). Yukarıdaki ok/warn/danger DURUM içindir; tür için onları KULLANMA (yeşil "başarılı" diye okunur, gerçek durum kolonuyla yarışır). Hangi türe hangi ton verileceği ÇAĞIRANIN kararıdır (ör. modülün *Labels sınıfı). */ .ui-badge-tone-1 { background: var(--ui-tone-1-bg); color: var(--ui-tone-1-ink); } .ui-badge-tone-2 { background: var(--ui-tone-2-bg); color: var(--ui-tone-2-ink); } .ui-badge-tone-3 { background: var(--ui-tone-3-bg); color: var(--ui-tone-3-ink); } .ui-badge-tone-4 { background: var(--ui-tone-4-bg); color: var(--ui-tone-4-ink); } .ui-badge-tone-5 { background: var(--ui-tone-5-bg); color: var(--ui-tone-5-ink); } .ui-badge-tone-6 { background: var(--ui-tone-6-bg); color: var(--ui-tone-6-ink); } .ui-badge-tone-7 { background: var(--ui-tone-7-bg); color: var(--ui-tone-7-ink); } .ui-badge-tone-8 { background: var(--ui-tone-8-bg); color: var(--ui-tone-8-ink); } /* Grid hücresinde ÇOK SATIRLI metin — en fazla 2 satır, taşan kısım "…" (tam metin title'da). Grid `TextWrapEnabled="false"` ile hücreye `nowrap` yazar; burada span düzeyinde geri açılır. NEDEN 2: tek satır ellipsis, banka açıklamasında en işe yarar kısmı (sonda gelen PLAKA:/fatura no) keser; sınırsız sarma ise satırı belirsiz yükseklikte bırakır. */ .ui-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.25; word-break: break-word; } /* Grid hücresinde AÇIKLAMA metni — "veri yok, bunun yerine şu geçerli" der (ör. "Masraf/komisyon — cari yok", "Bordro — ERP'de girilir"). Veriden ayrılsın diye soluk + küçük. NEDEN `MudText Typo="caption"` DEĞİL: MudText hücreye `

` basar (kendi blok kutusu + tipografi token'ları) → `SizeMode.Small` satırını yükseltir; bu span satır kutusuna oturur. */ .ui-cellnote { color: var(--ui-ink-3); font-size: var(--ui-fs-sm); } /* Grid hücresinde TIKLANABİLİR içerik sarmalayıcısı — hücrenin kendisi bir detayı açıyorsa (ör. gelen e-Faturada "ERP Faturası" durumuna tıklayınca ERP detay kutusu). NEDEN `.ui-cellnote` DEĞİL: o sınıf "veri yok, bunun yerine şu geçerli" AÇIKLAMASI içindir ve içeriği SOLUKLAŞTIRIR (ink-3) — içine konan durum rozetleri bastırılmış görünürdü. NEDEN buton DEĞİL: hücre içeriği zaten rozet/metin taşıyor; buton kutusu satırı yükseltir ve "eylem" gibi okunur — burada yapılan şey bir eylem değil, DETAYA BAKMAK. Tıklanabilirlik ipucu: imleç + üzerine gelince alt çizgi (renk değiştirmez, rozet renkleri korunur). */ .ui-cellclick { cursor: pointer; display: inline-flex; align-items: center; gap: var(--ui-sp-1); } .ui-cellclick:hover { text-decoration: underline; text-underline-offset: 2px; } .ui-cellclick:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 2px; border-radius: var(--ui-r-sm); } /* Kart/bölüm ALTI meta satırı (ör. "Oluşturma: … · Güncelleme: …") — soluk, küçük, tam satır. Sayfada `Style="color:…;display:block;margin-top:10px"` olarak gömülüydü (§0). */ .ui-meta { display: block; margin-top: var(--ui-sp-2); font-size: var(--ui-fs-xs); color: var(--ui-ink-3); } /* --- ÖNEMLİ NOT (.ui-note) — 28.07.2026 ------------------------------------------------------ NE İÇİN: bir alanın açıklaması DEĞİL, ekranın/bölümün tamamını ilgilendiren uyarı-bilgi ("şu ayar açıkken bunlar etkisiz", "bu liste artık şuradan yönetiliyor"). NEDEN AYRI SINIF: bunlar `.ui-meta` ile yazılıyordu → alan açıklamasıyla AYNI görünüyor ve kullanıcı hangisinin alana ait olduğunu ayırt edemiyordu (geri bildirim 28.07.2026: "parametre, açıklama, önemli notlar hepsi aynı renk aynı büyüklük"). Üç kademeli dil: parametre adı (ink-2) → açıklaması (ink-3, küçük, yapışık) → önemli not (tint zemin + sol aksan). `MudAlert` yerine bu: alert ikon+dolgusuyla form içinde fazla ağır duruyor, tonu tema mavisi. */ .ui-note { display: block; margin: var(--ui-sp-2) 0; padding: var(--ui-sp-2) var(--ui-sp-3); font-size: var(--ui-fs-xs); line-height: 1.45; color: var(--ui-ink-2); background: var(--ui-surface-2); border: 1px solid var(--ui-line-soft); border-left: 3px solid var(--ui-brand); border-radius: var(--ui-r-sm); } /* Dikkat isteyen not (etkisizleşen ayar, geri alınamayan sonuç) — uyarı tonu MARKADAN bağımsız. */ .ui-note-warn { border-left-color: var(--ui-warn); background: var(--ui-warn-bg); color: var(--ui-ink); } /* ENGELLEYİCİ not (.ui-note-danger): işlemin YAPILAMAYACAĞINI söyler — sarı 'dikkat et' ile kırmızı 'yapamazsın' aynı renkte olunca kullanıcı hangisinin durdurucu olduğunu ayıramıyordu (kullanıcı 05.09.2026). */ .ui-note-danger { border-left-color: var(--ui-danger); background: var(--ui-danger-bg); color: var(--ui-ink); } .ui-note b, .ui-note strong { font-weight: var(--ui-fw-medium); color: var(--ui-ink); } /* Taklit şeridi (1.174.0, ImpersonationBanner): ikon · metin · "kendi hesabıma dön" tek satırda; dar ekranda sarar. */ .ui-impersonation { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-sp-2); margin-top: 0; } .ui-impersonation > span { flex: 1 1 auto; } /* Toolbar içinde düz HTML form (çerez yazan BFF uçlarına POST — ör. "Kullanıcı olarak görüntüle"): buton akışı bozulmasın. */ .ui-inline-form { display: inline-flex; margin: 0; } /* Kart başlığındaki eylem (Düzenle/Ekle) — başlığın sağ ucuna iter. Sayfada `style="margin-left:auto"` olarak gömülüydü (§0); birden çok eylem olabildiği için sınıfa çekildi (.ui-scard-h zaten flex). */ /* inline-flex (27.07.2026): birden çok öğe taşıyabilsin + dikey hizası başlıkla otursun. NOT: grid barındıran kartlarda toolbar başlığa DEĞİL gridin üstüne konur (UI_GRID §1.2) — başlıkta denendi, "Ekle" ile yardımcı ikonlar tek küme gibi okundu (kullanıcı 27.07.2026). */ .ui-scard-h-act { margin-left: auto; display: inline-flex; align-items: center; gap: var(--ui-sp-1); } .ui-scard-h-act + .ui-scard-h-act { margin-left: var(--ui-sp-2); } /* Tablo içi AÇILIR alt satır zemini (ör. Şirket Ayarları → kimlik alanları). Sayfada `style="background:#f8fafc"` olarak gömülüydü (§0 ihlali); token'a çekildi. */ .ui-subrow { background: var(--ui-surface-2); } /* İzin ağacı (Yetkiler/Roller) — eylem satırı + tek eylemli alt kaynak zinciri. Kullanıcı geri bildirimi 26.07.2026: dalın KENDİ izinleri alt kategorilerin altında kalıyordu (alfabetik sırada "view" sona düşüyor) ve tek eylemli alt kaynak ("balance › view") için ayrı katlanır seviye açmak gürültüydü. Ölçüler token'dan — sayfaya inline stil yazılmaz (§0). */ /* ⚠️ `.ui-permtree-actions` + `.ui-permtree-chain` KALDIRILDI (28.07.2026): tek eylemli alt kaynağı "balance › görüntüle" zincir satırına indiren kısayol, eylemler düğüm satırına taşınınca gereksizleşti ve aynı şeyin İKİ farklı çizimini doğuruyordu (`aging` zincir ↔ `opening` düğüm satırı). Her kaynak artık tek biçimde çiziliyor; satır eylemleri (ör. "+") de tek yere ekleniyor. */ /* Eylemler KAYNAĞIN KENDİ SATIRINDA (kullanıcı kararı 28.07.2026): eskiden yalnız düğüm açılınca görünüyordu → kapalı ağaçta "card ne yapabiliyor" görünmüyor, her düğümü açmak gerekiyordu. Eylem HEP son segmenttir; bu yüzden kaynaktan (klasör) görsel olarak ayrılabilir: kaynak = katlanır başlık, eylem = çip. Böylece derinlik farkı (2 / 3 / 5 segment) okumayı bozmaz. */ .ui-permtree-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-1); margin-left: var(--ui-sp-2); } /* Kaynak (klasör) satırı + başlığı. Sayfada `style="gap:.3rem; cursor:pointer"` ve başlıkta gömülü `#475569` vardı (§0 ihlali — hook yakaladı 28.07.2026); ölçü/renk token'a çekildi. */ .ui-permtree-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-sp-1); user-select: none; } .ui-permtree-row.is-clickable { cursor: pointer; } .ui-permtree-title { font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); } .ui-permtree-title.is-root { font-weight: var(--ui-fw-bold); color: var(--ui-ink); } /* Toolbar'daki arama kutusu (izin kataloğu) — sabit dar genişlik; sayfaya px yazılmaz (§0). Filtre çubuğundaki `.ui-filter-field` ile aynı ölçü ailesinden. */ .ui-permsearch { flex: 0 0 260px; max-width: 260px; } /* ⚠️ Kaynak × eylem MATRİSİ denendi ve GERİ ALINDI (kullanıcı kararı 28.07.2026): sabit sütunlar (görüntüle/düzenle/yönet) bugünkü dağılıma göre seçilmişti — katalog büyüyüp eylem çeşidi arttıkça "özel eylemler" hücresi çöplüğe dönüşüyor. Ağaç, tekrar eden eylem sözlüğüne bağlı olmadığı için büyümeye dayanıklı. Tekrar önerilmeden önce bu not okunmalı. */ /* Eylem çipi — Yetkiler sayfasındaki yaprak görünümü. Sayfada `style="border:1px solid #e2e8f0; border-radius:6px; …"` olarak gömülüydü (§0 ihlali). */ .ui-permchip { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 var(--ui-sp-1); background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); font-size: var(--ui-fs-xs); color: var(--ui-ink-2); } /* Çip ve içindeki eylem ikonları KÜÇÜLTÜLDÜ (kullanıcı 28.07.2026): bir kaynağın satırında 4-5 çip yan yana durabiliyor; her biri düzenle+sil ikonu taşıdığı için satır ağırlaşıyordu. İzin adı asıl içerik, ikonlar yardımcı → ikonlar addan büyük görünmemeli. */ .ui-permchip-t { font-size: var(--ui-fs-xs); } .ui-permchip .mud-icon-button { padding: 1px; } .ui-permchip .mud-icon-button .mud-icon-root { font-size: .95rem; } /* Düğüm satırındaki bağlamsal "+" — normalde SOLUK, satır hover'ında belirginleşir: her satırda duran bir buton ağacı gürültüye boğardı, ama tamamen gizlemek de keşfedilemez yapardı. */ .ui-permtree-nodeact { display: inline-flex; align-items: center; } .ui-permtree-add.mud-icon-button { padding: 2px; opacity: .35; } .ui-permtree-row:hover .ui-permtree-add.mud-icon-button { opacity: 1; } .ui-permtree-add.mud-icon-button:focus-visible { opacity: 1; outline: 2px solid var(--ui-focus); } /* Kutudaki kural uyarısı (ör. "eylem tek parçadır") — hata değil YÖNLENDİRME: uyarı tonu (§2.4). */ .ui-permchip-warn { color: var(--ui-warn); font-weight: var(--ui-fw-medium); } /* Kullanıcı YETKİ İSTİSNASI hücresi (UserManage): eylem etiketi + üç durumlu seçici. İstisna olan satır GÖRÜNSÜN diye çip durum rengi alır — "bu kullanıcıda normalden sapma var" bilgisi, ağacı tek tek okumadan fark edilmeli. Renk anlamı markadan bağımsız (§0 Durum token'ı). */ .ui-permchip.is-grant { border-color: var(--ui-ok); background: var(--ui-ok-bg); } .ui-permchip.is-deny { border-color: var(--ui-danger); background: var(--ui-danger-bg); } /* Satır içi (kompakt) segment seçici — `.ui-seg` filtre çubuğu ölçüsünde kurulmuştu; izin ağacında eylem başına bir tane bulunduğundan küçültülmüş varyant gerekiyor. Ölçüler token'dan. */ .ui-seg-xs .ui-seg-item { padding: 1px var(--ui-sp-2); font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-normal); } .ui-seg-xs .ui-seg-item.on { font-weight: var(--ui-fw-medium); box-shadow: inset 0 -2px 0 0 var(--ui-brand); } /* Pasif izin: silik ama okunur (boşluk/hata değil, bir DURUM — uyarı rengi kullanılmaz, §2.4). ⚠️ Bu ekranda SOLUKLUK = PASİF demektir; başka hiçbir öğe dekoratif olarak soluk çizilmez (tek eylemli kaynak adı bu yüzden `.ui-permtree-chain`'de normal tona alındı — 28.07.2026). */ .ui-permchip.is-off { opacity: .55; } /* Ham veri bloğu (JSON/teknik metin) — denetim kaydı "Gör" penceresi gibi yerlerde. Sayfaya gömülü hex/px ile kurulmuştu (UI_STANDARD §0 ihlali); token'a çekildi. */ .ui-json { white-space: pre-wrap; word-break: break-word; font-size: var(--ui-fs-data); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 60vh; overflow: auto; background: var(--ui-surface-2); color: var(--ui-ink); padding: var(--ui-sp-3); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); } /* Gönderilen mail gövdesinin ÖNİZLEMESİ (bildirim log detayı). Gövde firma tarafından düzenlenebilen şablondan geldiği için kendi sayfamızda MarkupString ile basılmaz → yalıtılmış `sandbox` iframe. Yükseklik sabit + kendi içinde kayar: uzun mail dialogu şişirmesin. */ .ui-mailview { display: block; width: 100%; height: 55vh; min-height: 260px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: #ffffff; /* mail gövdesi kendi zeminini varsayar — tema koyuysa da beyaz kâğıt gibi görünsün */ } /* BELGE önizlemesi (A4 kâğıt) — gelen e-Fatura'nın gömülü XSLT ile üretilen HTML görüntüsü gibi. `.ui-mailview`den AYRI: mail gövdesi akışkan ve kısadır (55vh yeter), belge ise sabit A4 oranındadır (~794px genişlik) — 55vh'de sayfanın yalnız üst yarısı görünür ve kullanıcı her faturada kaydırmak zorunda kalır. Yükseklik dialog'un dikey alanının çoğunu alır; kaydırma iframe'in KENDİ içindedir, dialog dışarıdan ikinci bir kaydırma çubuğu göstermez. */ .ui-docview { display: block; width: 100%; height: 82vh; min-height: 420px; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: #ffffff; /* belge kendi zeminini varsayar — tema koyuysa da beyaz kâğıt gibi görünsün */ } /* İkincil satır: döviz kırılımı gibi, ana satırdan bir tık hafif. */ .ui-kv.is-sub { padding: 2px 0; } .ui-kv.is-sub .ui-kv-v { font-weight: var(--ui-fw-medium); } /* NOT: `.ui-header-metric` (header'da ana sayısal değer) DENENDİ ve KALDIRILDI 25.07.2026 — cari detayında bakiye header'a çıkarılmıştı; kullanıcı ekranda görüp "bakiye kartta kalsın, header sade olsun" dedi. Dead CSS bırakılmadı (CLAUDE.md §6); gerekirse git geçmişinden (commit e7f5110) geri alınır. */ /* Header sağ nav grubu: AYRI/ilişkili sayfaya götüren (satır-bağımsız) butonlar — ör. "Döviz Bakiyeleri". Grid/satır eylemleri toolbar'da; bu grup "başka sayfaya git" içindir. */ .ui-header-nav { margin-left: auto; display: flex; align-items: center; gap: var(--ui-sp-2); flex-wrap: wrap; } /* Mobil: kimlik alt satıra tam genişlik düşer; üstte [sol grup] [geri butonu] kalır. */ @media (max-width: 700px) { .ui-header-left { order: 1; } .ui-header-back.mud-button-root { order: 2; } .ui-header-id { order: 3; flex: 1 1 100%; text-align: left; padding: 7px 0 0; margin-top: var(--ui-sp-1); border-top: 1px solid var(--ui-line-soft); } } /* Header ALTINDA ayrı satır: scope/filtre kontrolü (ör. çoklu şirket seçici) → header kompakt kalır, çok şirket seçilince tag'lar burada sarar (header'ı yükseltmez). Kutu TAM GENİŞLİK (sabit satır). */ .ui-scopebar { margin: 0 0 var(--ui-sp-2); } .ui-company-box { display: flex; align-items: center; gap: var(--ui-sp-2); padding: 5px var(--ui-sp-3); width: 100%; border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-surface-2); } .ui-company-label { color: var(--ui-ink-2); font-weight: var(--ui-fw-medium); font-size: var(--ui-fs-sm); white-space: nowrap; } /* Eski/geçiş panel başlığı (yeni sayfalar .ui-header kullanır). */ .ui-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-sp-4); flex-wrap: wrap; background: var(--ui-surface); padding: 7px var(--ui-sp-4); border: 1px solid var(--ui-line); border-radius: var(--ui-r); margin-bottom: var(--ui-sp-2); box-shadow: var(--ui-sh-1); } .ui-panel-h { font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); color: var(--ui-ink); line-height: 1.15; } .ui-panel-sub { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-normal); color: var(--ui-ink-3); margin-top: 1px; } /* "i" tetiği: kenarlıklı daire ama İÇİ ŞEFFAF (dolu/renkli değil) — kalın-italik serif. Hover'da büyür (etkileşim sinyali); iç dolgu yok. */ .ui-info-i { display: inline-flex; align-items: center; justify-content: center; /* Küçük ve sessiz (24.07.2026) — başlığın yanında dikkat çekmeden dursun; hover büyütür. */ width: 17px; height: 17px; border-radius: 50%; border: 1.25px solid var(--ui-accent); background: transparent; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: var(--ui-fw-bold); font-size: .78rem; line-height: 1; color: var(--ui-accent); cursor: pointer; user-select: none; transform-origin: center; transition: transform .12s ease, border-color .12s, color .12s; } .ui-info-i:hover { transform: scale(1.12); filter: brightness(.88); } .ui-info-i:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .ui-info-i { transition: none; } .ui-info-i:hover { transform: none; } } /* ============================================================================= 3. ARAÇ ÇUBUĞU (.ui-toolbar) — UI_GRID.md ============================================================================= */ /* Toolbar ŞEFFAF (karar 24.07.2026): beyaz kart dokusu denendi, eylem satırının etrafındaki çerçeve rahatsız etti → geri alındı. Boşluk ritmi: header/dock/toolbar araları --ui-sp-2. */ .ui-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-sp-2); flex-wrap: wrap; /* Toolbar GRİD'E yakın, FİLTREYE uzak durur (01.08.2026, kullanıcı + ölçüm — öncesi tam tersiydi: filtre→toolbar 4px, toolbar→grid 11px). Gerekçe: bu butonlar grid'in SATIRLARI üzerinde çalışır (seçili/odaklı satır), filtrenin değil — yakınlık hangi şeye ait olduğunu söyler (yakınlık ilkesi). ⚠️ Araya `.ui-loading` (3px, kapalıyken de yer kaplar) giriyor → toolbar↔grid = bu değer + 3px. Hedef oran ~2 kat: filtre↔toolbar 12px (sp-3), toolbar↔grid ~5px. Yalnız margin'lere bakıp karar verme, ARADAKİ ÖĞEYİ say (ölç: `--kap .ui-page`). */ margin-bottom: 2px; } .ui-toolbar-left { display: flex; align-items: center; gap: var(--ui-sp-2); flex-wrap: wrap; } /* İnce toolbar: sağ yardımcı ikonlar hafif segment (pill) içinde grupludur. */ .ui-toolbar-right { display: flex; align-items: center; gap: 2px; background: var(--ui-surface-3); border-radius: var(--ui-r-sm); padding: 2px; } /* İkonlar KÜÇÜK (24.07.2026): segment yüksekliği soldaki Size.Small butonlarla hizalı (~30px). */ .ui-toolbar-right .mud-icon-button { padding: 4px; color: var(--ui-ink-2); } .ui-toolbar-right .mud-icon-button .mud-icon-root { font-size: 1.05rem; } .ui-toolbar-right .mud-icon-button:hover { background: var(--ui-line-soft); color: var(--ui-ink); } .ui-toolbar-sel { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: var(--ui-fs); font-weight: var(--ui-fw-medium); color: var(--ui-ink); padding: 0 var(--ui-sp-2); } /* Butonlar — ikincil = outline, birincil = MARKA rengi (gömülü hex değil). */ .ui-btn.mud-button-root { text-transform: none !important; color: var(--ui-ink) !important; border-color: var(--ui-line) !important; background-color: var(--ui-surface) !important; border-radius: var(--ui-r-sm); } .ui-btn.mud-button-root:hover { background-color: var(--ui-surface-2) !important; border-color: var(--ui-ink-3) !important; } .ui-btn-primary.mud-button-root { text-transform: none !important; background-color: var(--ui-brand) !important; color: var(--ui-brand-ink) !important; border: none !important; border-radius: var(--ui-r-sm); font-weight: var(--ui-fw-medium); } .ui-btn-primary.mud-button-root:hover { filter: brightness(1.18); } /* YIKICI eylem (Sil / Geri al / İptal et) — MARKADAN BAĞIMSIZ durum rengi: firma teması kırmızıya dönse bile "sil" ile "kaydet" aynı görünmemeli. Varsayılan outline (yanlışlıkla basmayı zorlaştırır); dolu varyant YALNIZ onay dialog'unun kendi butonunda kullanılır (orada eylem zaten bilinçli). */ .ui-btn-danger.mud-button-root { text-transform: none !important; color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; background-color: var(--ui-surface) !important; border-radius: var(--ui-r-sm); } .ui-btn-danger.mud-button-root:hover { background-color: var(--ui-danger-bg) !important; } .ui-btn-danger.ui-btn-solid.mud-button-root { background-color: var(--ui-danger) !important; color: var(--ui-surface) !important; border: none !important; } .ui-btn-danger.ui-btn-solid.mud-button-root:hover { filter: brightness(1.12); } /* --- BOŞ DURUM (.ui-empty) ------------------------------------------------------------------- Neden: "veri yok" hâli her sayfada ayrı uydurulunca kullanıcı boş grid ile hata arasını ayıramıyor. Tek kalıp: ikon + tek satır başlık + (ops.) açıklama + (ops.) tek eylem. Sessiz ton — boşluk hata değildir; kırmızı/uyarı rengi KULLANILMAZ (yetkisizlik dahil, o da bir durum bildirimidir). */ .ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ui-sp-2); text-align: center; padding: var(--ui-sp-5) var(--ui-sp-4); min-height: 160px; color: var(--ui-ink-3); } .ui-empty .mud-icon-root { font-size: 2.2rem; color: var(--ui-ink-3); opacity: .65; } .ui-empty-h { font-size: var(--ui-fs); font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); } .ui-empty-sub { font-size: var(--ui-fs-sm); color: var(--ui-ink-3); max-width: 420px; } .ui-empty-act { margin-top: var(--ui-sp-2); } /* --- KAYDA BAĞLI EKLER (.ui-attach — , ADR-0024, 1.176.0) --------------------- Yerleşim A (liste). Bırakma alanı = grid'in ÜSTÜNDEKİ toolbar (UI_GRID §1.2 — başlığa değil); kart çağıranın işi. Tür rozeti sınıflandırma paletinden (.ui-badge-tone-N): durum rengi değildir. */ .ui-attach { display: flex; flex-direction: column; gap: var(--ui-sp-2); min-width: 0; } .ui-attach-drop { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-sp-2) var(--ui-sp-3); padding: var(--ui-sp-2) var(--ui-sp-3); border: 1.5px dashed var(--ui-line-strong); border-radius: var(--ui-r); background: var(--ui-surface-2); color: var(--ui-ink-2); font-size: var(--ui-fs-sm); } .ui-attach-drop.is-over { border-color: var(--ui-brand); background: var(--ui-brand-soft); } .ui-attach-hint { color: var(--ui-ink-3); } .ui-attach-opts { margin-left: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--ui-sp-3); } .ui-attach-opt { display: inline-flex; align-items: center; gap: var(--ui-sp-2); } .ui-attach-ret { width: 150px; } .ui-attach-progress { display: flex; flex-direction: column; gap: var(--ui-sp-1); font-size: var(--ui-fs-xs); color: var(--ui-ink-2); } .ui-attach-progress-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 2fr); align-items: center; gap: var(--ui-sp-3); } .ui-attach-progress-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-attach .ui-note ul { margin: var(--ui-sp-1) 0 0; padding-left: var(--ui-sp-5); } .ui-attach-file { display: inline-flex; align-items: center; gap: var(--ui-sp-2); min-width: 0; max-width: 100%; } .ui-attach-type { flex: none; display: inline-grid; place-items: center; width: 34px; height: 22px; border-radius: var(--ui-r-sm); font-family: var(--ui-font-cond); font-size: .66rem; font-weight: var(--ui-fw-medium); letter-spacing: .04em; } .ui-attach-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; background: none; padding: 0; font: inherit; color: var(--ui-ink); cursor: pointer; } .ui-attach-name:hover { color: var(--ui-brand); text-decoration: underline; } .ui-attach-name:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; border-radius: 2px; } .ui-attach-total { font-size: var(--ui-fs-xs); color: var(--ui-ink-3); text-align: right; } /* Önizleme: içerik kutuyu doldurur; PDF tarayıcının kendi görüntüleyicisinde, resim orantılı küçülür. */ .ui-attach-preview { display: grid; place-items: center; background: var(--ui-surface-3); border-radius: var(--ui-r-sm); height: 72vh; overflow: auto; } .ui-attach-preview iframe { width: 100%; height: 100%; border: 0; background: var(--ui-surface); } .ui-attach-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .ui-attach-preview-meta { margin-right: auto; font-size: var(--ui-fs-xs); color: var(--ui-ink-3); } /* DAR KAP (.ui-attach.is-compact — 320px yan panel, 1.179.0): seçenekler alt alta, kolonlar yerine iki satırlık liste. */ .ui-attach.is-compact { padding: var(--ui-sp-2); } .ui-attach.is-compact .ui-attach-hint { display: none; } .ui-attach.is-compact .ui-attach-opts { margin-left: 0; width: 100%; justify-content: space-between; } .ui-attach-list { list-style: none; margin: 0; padding: 0; } .ui-attach-item { display: flex; align-items: flex-start; gap: var(--ui-sp-2); padding: var(--ui-sp-2) 0; border-bottom: 1px solid var(--ui-line-soft); } .ui-attach-item:last-child { border-bottom: 0; } .ui-attach-item-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ui-attach-item-b .ui-attach-name { font-size: var(--ui-fs-data); } .ui-attach-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-1); font-size: var(--ui-fs-xs); color: var(--ui-ink-3); } .ui-attach-item .ui-row-action { flex: none; } @media (max-width: 700px) { .ui-attach-opts { margin-left: 0; } .ui-attach-hint { display: none; } /* telefonda sürükle-bırak yok */ .ui-attach-drop .mud-button-root { min-height: 36px; } .ui-attach-preview { height: calc(100vh - 140px); } .ui-attach-preview-meta { display: none; } } /* --- BAĞLAM ÇUBUĞU (.ui-ctxbar): satır seçilince beliren eylem şeridi ------------------------- Neden: satıra bağlı eylemler (Görüntüle/Ekstre/Düzenle…) toolbar'da SÜREKLİ durursa boş listede pasif buton kalabalığı olur ve eylem sayısı arttıkça 1024px'te taşar. Bunun yerine seçim olunca belirir; ilk birkaç eylem düğme, gerisi "Daha fazla" menüsünde → çubuk BÜYÜMEZ, menü büyür. Sağda seçili kaydın kimliği durur (kullanıcı neyin üzerinde çalıştığını görsün). */ .ui-ctxbar { display: flex; align-items: center; gap: var(--ui-sp-2); flex-wrap: wrap; padding: var(--ui-sp-2) var(--ui-sp-3); background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-accent); border-radius: var(--ui-r); margin-bottom: var(--ui-sp-2); } /* Seçili kaydın kimliği — sağa yaslı, taşarsa kırpılır (çubuğu ikinci satıra itmesin). */ .ui-ctxbar-sel { margin-left: auto; display: flex; flex-direction: column; min-width: 0; text-align: right; } .ui-ctxbar-sel .k { font-size: var(--ui-fs-xs); color: var(--ui-ink-3); } .ui-ctxbar-sel .v { font-size: var(--ui-fs); font-weight: var(--ui-fw-medium); color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; } .ui-ctxbar .mud-button-root { min-height: 30px; } /* ============================================================================= 4. GRID (.ui-grid) — UI_GRID.md ============================================================================= */ /* Başlık satırı — MARKA TİNT zemini (100) + KOYU yazı/ikon (900) + 300 alt çizgi. (Önceden 900 koyu zemin + beyaz yazıydı: üst bar + buton + grid başlığı aynı koyu tona boyanıp göz yoruyordu — Varyant B kararı.) Satırlar SizeMode.Small ile kompakt; başlık satırı onlardan ÇOK AZ daha yüksek dursun. */ .ui-grid-hdr, .ui-grid-hdr th, .ui-grid-hdr td { background-color: var(--ui-grid-hdr) !important; color: var(--ui-grid-hdr-ink) !important; /* Başlık yazısı KALIN (700) + gövdeden bir tık BÜYÜK (.85rem) — condensed ailede 600/küçük boy "koyu olduğu belirsiz" bulundu (saha geri bildirimi 24.07.2026). */ font-weight: var(--ui-fw-bold) !important; font-size: var(--ui-fs-sm) !important; padding-top: 7px !important; padding-bottom: 7px !important; border-bottom: 2px solid var(--ui-grid-hdr-line) !important; } .ui-grid-hdr i, .ui-grid-hdr svg { color: var(--ui-grid-hdr-ink) !important; fill: var(--ui-grid-hdr-ink) !important; } .ui-grid-hdr .dxbl-button, .ui-grid-hdr .dxbl-button i, .ui-grid-hdr button { color: var(--ui-grid-hdr-ink) !important; } /* En sol ve en sağ dikey kenar zeminle aynı — beyaz çizgi yüzünden header dar görünmesin (yalnız başlık satırı). */ .ui-grid-hdr:first-child { border-left: 2px solid var(--ui-grid-hdr) !important; } .ui-grid-hdr:last-child { border-right: 2px solid var(--ui-grid-hdr) !important; } /* GERİ-DÜŞÜŞ: yalnız .ui-page kabına ALINMAMIŞ (eski/geçiş) sayfalar için sabit yükseklik. TERCİH EDİLEN yol aşağıdaki .ui-page + .ui-grid-fill (flex tam-yükseklik) — sihirli sayı GEREKMEZ. */ .ui-grid.dxbl-grid { height: calc(100vh - 188px); min-height: 320px; } /* Tam-yükseklik liste sayfası kabı (UI_GRID.md §Grid yüksekliği) — TÜM grid sayfalarında STANDART. Grid sayfasının içeriğini flex SÜTUNA alır: başlık(.ui-header) + toolbar + scopebar + loading DOĞAL yükseklikte kalır; GRID kalan alanı doldurur → ekran yüksekliğine tam oturur. DevExpress veri alanı içeride kayar, BAŞLIK + PAGER sabit (grid altına yaslı). Header ne kadar yüksek olursa olsun (çoklu-şirket scopebar, nav sarması, mobil) grid kendini ayarlar → "calc(100vh - Npx)" sihirli sayısına GEREK YOK. 72px = AppBar(48, Dense) + MudContainer pt-2(8) + pb-4(16). Kap viewport'a göre ölçülür (parent'tan bağımsız). */ .ui-page { display: flex; flex-direction: column; height: calc(100vh - 72px); min-height: 0; } .ui-page > * { flex: 0 0 auto; } .ui-page > .ui-grid-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .ui-grid-fill > .ui-grid.dxbl-grid { flex: 1 1 auto; height: auto; min-height: 240px; } /* GRID + YAN ÖZET PANELİ (.ui-split) — 07.08.2026. Panel ODAKLI SATIRI takip eden hızlı özet içindir (ör. gelen faturanın kalemleri); belgenin tam görüntüsünün yerine geçmez. Neden ayrı sınıf: `.ui-grid-fill` `.ui-page`'in DOĞRUDAN çocuğu olmak zorunda (yukarıdaki kural) — araya bir satır kabı girince grid ekran yüksekliğine oturmayı bırakıyor. Bu kural o zinciri kabın kendisi üzerinden yeniden kuruyor. */ .ui-page > .ui-split { flex: 1 1 auto; min-height: 0; display: flex; gap: var(--ui-sp-3); } .ui-split > .ui-grid-fill { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* Dar kapta TEK SATIR metin — sığdığı kadar, taşarsa "…". Panelde etiket+değer ızgarası (.ui-kv) genişliğin yarısını etikete verir; 320px'te bu kalan alanı kullanılamaz kılıyordu. */ .ui-oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Özet panelindeki bir kalem: ad tek satır, altında miktar/tutar. Aralarında ince ayraç — kutu/kenarlık değil: 4-5 kalem için kart yığını görsel gürültü olurdu. */ .ui-brief-line { padding: var(--ui-sp-2) 0; border-bottom: 1px solid var(--ui-line-soft); } .ui-brief-line:last-child { border-bottom: 0; } /* Özet panelinin NOT bloğu — kalemlerden ayrılsın diye üstte belirgin ayraç. Not metni SARAR (kalem adının aksine): notun yarısını göstermek çoğu zaman hiç göstermemekle aynı, uzunlukları da öngörülemez. */ .ui-brief-notes { margin-top: var(--ui-sp-3); padding-top: var(--ui-sp-2); border-top: 1px solid var(--ui-line); } .ui-brief-note { font-size: .85rem; color: var(--ui-ink-2); padding: var(--ui-sp-1) 0; word-break: break-word; } /* Gürültü notlar açıldığında görsel olarak GERİDE dursun — bilgi taşımadıkları belli olsun. */ .ui-brief-note.is-muted { opacity: .6; } .ui-split-side { flex: 0 0 320px; min-width: 0; overflow-y: auto; /* uzun kalem listesi PANEL İÇİNDE kayar, sayfa taşmaz */ background: var(--ui-surface); border: 1px solid var(--ui-line); border-left: 3px solid var(--ui-brand); /* kart diliyle aynı marka aksanı */ border-radius: var(--ui-r); box-shadow: var(--ui-sh-1); } @media (max-width: 900px) { /* Dar ekranda yan yana iki sütun ikisini de kullanılamaz kılar → panel grid'in ALTINA iner. Gizlenmez: özet küçük ekranda tam belgeyi açmaya göre daha da değerli. */ .ui-page > .ui-split { flex-direction: column; } .ui-split-side { flex: 0 0 auto; max-height: 38vh; } } /* KATLANMIŞ YAN PANEL (.ui-split-side.is-collapsed) — 14.09.2026, kullanıcı: "fatura özeti açılır kapanır olsun". Satır grid'i geniş (Sipariş Oluştur'da 15+ kolon) → panel kapanınca grid'e yer açılır. Panel TAMAMEN gizlenmez, ince bir şerit kalır: kapatıldığı unutulmasın, tek tıkla geri açılsın, şeritteki eylemler (ör. faturayı göster) kapalıyken de erişilebilir olsun. Durum sayfada saklanır (bileşen işi). */ .ui-split-side.is-collapsed { flex: 0 0 auto; width: 40px; overflow: hidden; } .ui-split-rail { display: flex; flex-direction: column; align-items: center; gap: var(--ui-sp-1); padding-block: var(--ui-sp-2); } /* Dikey başlık — şeridin ne olduğunu söyler; tıklanabilir alanın parçası değildir. */ .ui-split-rail-title { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; margin-top: var(--ui-sp-2); font-size: var(--ui-fs-xs); color: var(--ui-ink-2); } .ui-split-rail .mud-icon-button { color: var(--ui-ink-3); } .ui-split-rail .mud-icon-button:hover { color: var(--ui-brand); } @media (max-width: 900px) { /* Panel grid'in altına indiğinde şerit YATAY olur (40px genişlikte dikey şerit orada anlamsız). */ .ui-split-side.is-collapsed { width: auto; } .ui-split-rail { flex-direction: row; padding-inline: var(--ui-sp-2); } .ui-split-rail-title { writing-mode: horizontal-tb; transform: none; margin-top: 0; } } /* SEKMELİ YAN PANEL (.ui-split-tabbed) — 02.10.2026, kullanıcı: yatay sekme sırası dar panele sığmıyordu ("Ekler" görünmüyordu). Sekmeler + panel eylemleri panelin DIŞ kenarında dikey şerittir (.ui-side-rail); sekme adı 90° çevrilmiş yazılır → sekme sayısı arttıkça panel GENİŞLEMEZ, şerit aşağı uzar. Panel kapanınca yalnız şerit kalır (aynı işaretleme — kapalı/açık için iki ayrı şerit yok). İçerik .ui-split-body'de kendi içinde kayar, şerit sabit. */ .ui-split-side.ui-split-tabbed { display: flex; overflow: hidden; } .ui-split-side.ui-split-tabbed.is-collapsed { width: auto; } .ui-split-body { flex: 1 1 auto; min-width: 0; overflow-y: auto; } /* Dar panelde `.ui-cols-*` detay-sayfası düzeni (3. kolon min 240px "ray") taşırır → eşit, büzülebilir kolonlar (02.10.2026: Satır Düzenle'de Miktar/Fiyat eziliyor, Tutar taşıyordu). `.ui-editpop` ile aynı çözüm. */ .ui-split-body .ui-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-sp-2); } .ui-split-body .ui-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-sp-2); } .ui-side-rail { flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; gap: var(--ui-sp-1); padding-block: var(--ui-sp-2); border-left: 1px solid var(--ui-line); background: var(--ui-surface); } .ui-split-tabbed.is-collapsed .ui-side-rail { border-left: 0; } .ui-side-rail .mud-icon-button { color: var(--ui-ink-3); } .ui-side-rail .mud-icon-button:hover { color: var(--ui-brand); } .ui-side-tab { display: flex; flex-direction: column; align-items: center; gap: var(--ui-sp-1); width: 32px; padding: var(--ui-sp-2) 0; border: 0; border-radius: var(--ui-r-sm); background: transparent; color: var(--ui-ink-3); cursor: pointer; font: inherit; } .ui-side-tab:hover { color: var(--ui-brand); background: var(--ui-brand-soft); } .ui-side-tab.on { color: var(--ui-brand); background: var(--ui-brand-soft); box-shadow: inset 2px 0 0 var(--ui-brand); } .ui-side-tab:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 1px; } /* Yukarıdan aşağı okunur (vertical-rl) — başı yukarıda; yazı ikonun altından başlar. */ .ui-side-tab-label { writing-mode: vertical-rl; white-space: nowrap; font-size: var(--ui-fs-xs); line-height: 1; } .ui-side-rail-sep { width: 20px; border-top: 1px solid var(--ui-line); margin-block: var(--ui-sp-1); } @media (max-width: 900px) { /* Panel grid'in altına inince şerit ÜSTTE yatay sıra olur; sekme adı düz yazılır. */ .ui-split-side.ui-split-tabbed { flex-direction: column; } .ui-side-rail { order: -1; flex: 0 0 auto; flex-direction: row; padding-inline: var(--ui-sp-2); border-left: 0; border-bottom: 1px solid var(--ui-line); } .ui-side-tab { flex-direction: row; width: auto; padding: var(--ui-sp-1) var(--ui-sp-2); } .ui-side-tab.on { box-shadow: inset 0 -2px 0 var(--ui-brand); } .ui-side-tab-label { writing-mode: horizontal-tb; } .ui-side-rail-sep { width: 0; height: 20px; border-top: 0; border-left: 1px solid var(--ui-line); margin-block: 0; margin-inline: var(--ui-sp-1); } } /* GRID KAYDIRMA ÇUBUĞU BELİRGİN (14.09.2026, kullanıcı: "alttaki kaydırma çubuğu daha ön planda olsun"). DevExpress Fluent teması çubuğu 0.2rem (≈3px) + %50 saydam çiziyor ve yalnız üzerine gelince kalınlaşıyor; geniş satır grid'inde (Sipariş Oluştur) sağda kolon olduğu fark edilmiyordu. Tüm `.ui-grid`'lerde aynı: çubuk bir sayfada belirgin, ötekinde silik olursa kullanıcı ikincisinde kaydırılamayacağını sanır. Değişkenler temanın kendi değişkenleri → yalnız ölçü/renk değişir, çubuğun davranışı DevExpress'te kalır. Çubuğa ZEMİN verilmedi: çubuk içeriğin üstüne biner (absolute) — zemin son satırın altını örterdi. */ .ui-grid .dxbl-scroll-viewer { --dxbl-scroll-viewer-hor-scroll-bar-height: .5rem; --dxbl-scroll-viewer-hor-scroll-bar-hover-height: .7rem; --dxbl-scroll-viewer-vert-scroll-bar-width: .5rem; --dxbl-scroll-viewer-vert-scroll-bar-hover-width: .7rem; } .ui-grid .dxbl-scroll-viewer > .dxbl-scroll-viewer-hor-scroll-bar > .dxbl-scroll-viewer-scroll-thumb, .ui-grid .dxbl-scroll-viewer > .dxbl-scroll-viewer-vert-scroll-bar > .dxbl-scroll-viewer-scroll-thumb { background-color: var(--ui-ink-3); opacity: .85; border-radius: .35rem; } /* KART/BÖLÜM İÇİ grid (.ui-grid-inline) — yükseklik İÇERİĞE göre (27.07.2026). Neden: yukarıdaki iki kural SAYFA gridi içindir (ekranı doldurur). Aynı `.ui-grid` sınıfı bir `.ui-scard` gövdesine (cari detayı → Adresler/Yetkililer) ya da alt alta dizilen bloklara (ekstre → her para birimi bir blok) konunca 3 satırlık liste için EKRAN BOYU boşluk açar ve üst üste binen iki dikey kaydırma üretir. Bu modifier o iki kuralı iptal eder: grid kaç satır varsa o kadar yer kaplar, sayfa kendi akışında kayar. ⚠️ `.ui-grid` OLMADAN kullanılmaz — grid tipografisi/başlık rengi oradan gelir (UI_GRID §2.6). */ .ui-grid.ui-grid-inline.dxbl-grid { height: auto; min-height: 0; } /* Satır işlem simgesi — ÇOK kompakt (padding'siz) → SizeMode.Small satır yüksekliğini büyütmez. */ .ui-row-action { display: flex; justify-content: center; align-items: center; } .ui-row-action .mud-icon-button { padding: 1px; min-width: 0; height: 22px; width: 22px; } .ui-row-action .mud-icon-button .mud-icon-root { font-size: 1.05rem; } /* SIRA GİRİŞİ — satır sırasının ANLAM taşıdığı listelerde (kural önceliği, menü sırası) hedef sırayı doğrudan yazmak için (kullanıcı isteği 01.08.2026: "direk sıra numarası yazarak"). Okla taşıma 20 kurallık listede 15 tıklama demekti; kutu tek hamle. ⚠️ Neden ayrı sınıf ŞART: MudBlazor input'u `min-width: 160px` ile gelir — grid hücresinde kolonu patlatır ve okları dışarı iter. Genişlik burada kısılır, `.razor` içine px YAZILMAZ (§0). Kapsam `.ui-row-action` içi: normal formlardaki sayı alanlarına dokunmaz. */ .ui-row-action .ui-grid-order { flex: 0 0 auto; width: 46px; } .ui-row-action .ui-grid-order .mud-input-control, .ui-row-action .ui-grid-order .mud-input { margin: 0; min-width: 0; } .ui-row-action .ui-grid-order input { padding: 1px 2px; text-align: center; font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); } /* Hover zemini — DevExpress'in kendi değişkeni üzerinden token'a bağlanır (tema grisi değil, bizim slate merdiveni). Kapsam .ui-grid: başka DX bileşenlerine sızmaz. */ .ui-grid.dxbl-grid { --dxbl-grid-hover-bg: var(--ui-grid-row-hover); --dxbl-grid-hover-color: var(--ui-ink); } /* Filtre satırı — açık zemin; input kenarlıkları çizgi tonunda. YAZILAN filtre metni MARKA renginde + orta kalınlık: "bu bir veri değil, SORGU" sinyali (karar 24.07.2026). Sabit mavi/kırmızı DEĞİL: kırmızı=hata anlamı rezerve; sabit mavi, mavi-markalı firmada ayırt edilemez. Marka rengi her firmada "etkileşim/dikkat" rolüyle tutarlı. */ .ui-grid-filter, .ui-grid-filter td { background-color: var(--ui-surface-2) !important; } .ui-grid-filter input, .ui-grid-filter .dxbl-edit { border-color: var(--ui-line) !important; } .ui-grid-filter input, .ui-grid-filter .dxbl-text-edit input { color: var(--ui-brand) !important; font-weight: var(--ui-fw-medium); } /* Kolon filtre hunisi — DOLU (aktif filtre) durumda marka rengi: hangi kolonda filtre olduğunu nötr griden ayrıştırır (pasif huni soluk kalır). */ .ui-grid .dxbl-grid-filter-menu-funnel-btn-filled, .ui-grid .dxbl-grid-filter-menu-funnel-btn-filled i, .ui-grid .dxbl-grid-filter-menu-funnel-btn-filled svg, .ui-grid .dxbl-grid-filter-menu-funnel-btn-active, .ui-grid .dxbl-grid-filter-menu-funnel-btn-active i, .ui-grid .dxbl-grid-filter-menu-funnel-btn-active svg { color: var(--ui-brand) !important; fill: var(--ui-brand) !important; } /* FİLTRE PANELİ (grid altı; FilterPanelDisplayMode="Auto" → yalnız filtre AKTİFKEN belirir). "Grid filtreli durumda" sinyali: marka-tint zemin + sol marka çizgisi (.ui-ctxbar kardeşi). Panelde koşul metni (tıkla → Filter Builder), aç/kapa ve temizle var — ikon tek başına "filtre var" der ama NE olduğunu söylemez; panel söyler (karar 24.07.2026). */ .ui-grid .dxbl-grid-filter-panel { background-color: var(--ui-brand-50) !important; border-top: 1px solid var(--ui-brand-200) !important; box-shadow: inset 3px 0 0 0 var(--ui-brand); color: var(--ui-brand-800) !important; font-weight: var(--ui-fw-medium); } .ui-grid .dxbl-grid-filter-panel .dxbl-grid-filter-panel-filter { color: var(--ui-brand-800) !important; } .ui-grid .dxbl-grid-filter-panel i, .ui-grid .dxbl-grid-filter-panel svg { color: var(--ui-brand) !important; fill: var(--ui-brand) !important; } /* Odaklı (seçili) satır — slate zemin + KALIN koyu yazı (seçim yazıdan da okunsun), sol 3px marka çizgisi. */ .ui-grid-focused, .ui-grid-focused td { background-color: var(--ui-grid-row-focus) !important; color: var(--ui-ink) !important; font-weight: var(--ui-fw-medium) !important; } .ui-grid-focused td:first-child { box-shadow: inset 3px 0 0 0 var(--ui-brand); } /* İŞARETLENMİŞ (checkbox) SATIR — `SelectionMode="Multiple"` kullanan grid'ler (30.07.2026, saha). SORUN: DevExpress'in kendi seçim zemini KOYU accent'tır ve yazıyı beyaza çevirir. Bizim nötr merdivenimize hiç uğramadığı için o satırdaki her şey (özellikle `.ui-badge` rozetleri — açık zemin + koyu yazı için tasarlanmış) koyu zeminde okunmaz hâle geliyordu: kullanıcı "seçilen renk koyu zemin, beyaz kalıyor" diye bildirdi (banka mutabakatı, Fiş Tipi kolonu). ÇÖZÜM: hover gibi, DevExpress'in KENDİ değişkeni üzerinden merdivene bağla — `!important` yığmadan, tema güncellemesine dayanıklı. İşaretli satır odaklı satırla aynı basamakta durur; ikisini checkbox'ın kendisi zaten ayırıyor (marka dolgulu tik), ayrı bir ton gerekmiyor. Kapsam `.ui-grid`: başka DevExpress bileşenlerine sızmaz. */ .ui-grid.dxbl-grid { --dxbl-grid-selected-bg: var(--ui-grid-row-focus); --dxbl-grid-selected-color: var(--ui-ink); --dxbl-grid-selected-hover-bg: var(--ui-grid-row-focus); --dxbl-grid-selected-hover-color: var(--ui-ink); } /* Değişkeni okumayan sürümler için doğrudan kural (DX sürüm farkı) — aynı merdiven basamağı. */ .ui-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row, .ui-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row > td { background-color: var(--ui-grid-row-focus) !important; color: var(--ui-ink) !important; } /* Seçim (checkbox) kolonu — checkbox'ı satır fontuyla ORANTILA + başlık zemin/"tümünü seç" görünürlüğü. ⚠️ TUZAK: DevExpress boyut-token tanımı ".dxbl-checkbox:not(-switch):not(-radio)" özgüllüğü (0,3,0); bizim seçici de (0,3,0) → BERABERE. Bu yüzden FINAL width/height/icon değişkenlerini doğrudan + !important ile veriyoruz (16px → 14px kutu, 10px onay ikonu). Değişken .dxbl-checkbox'ta durur; check-element width+min-width+height+min-height'ı miras yoluyla oradan okur. */ .ui-grid .dxbl-grid-selection-cell .dxbl-checkbox { --dxbl-checkbox-check-element-width: .875rem !important; --dxbl-checkbox-check-element-height: .875rem !important; --dxbl-checkbox-check-element-icon-size: .625rem !important; } /* Seçim kolonu BAŞLIK hücresi (thead) — CustomizeElement "HeaderCell" bu hücreyi kapsamayabiliyor + fixed-cell zemini "inherit" → yapısal olarak koyu zemin ver (sabit kolon opak zemin de ister). */ .ui-grid .dxbl-grid-table thead .dxbl-grid-selection-cell { background-color: var(--ui-grid-hdr) !important; } /* "Tümünü seç" checkbox kutusu tint başlıkta belirgin kalsın → marka-300 kenar (yalnız başlık hücresi). */ .ui-grid .dxbl-grid-table thead .dxbl-grid-selection-cell .dxbl-checkbox-check-element { border-color: var(--ui-grid-hdr-line) !important; } /* İŞARETLİ seçim kutusu = MARKA dolgu + BEYAZ tik (24.07.2026): tema varsayılanı (açık accent zemin + beyaz tik) seçili satırın açık zemininde "seçilmemiş gibi" görünüyordu — koyu 600 dolgu her satır zemininde okunur. Indeterminate (kısmi "tümünü seç") aynı dolgu. */ .ui-grid .dxbl-checkbox-checked .dxbl-checkbox-check-element, .ui-grid .dxbl-checkbox-indeterminate .dxbl-checkbox-check-element { background-color: var(--ui-brand) !important; border-color: var(--ui-brand) !important; color: var(--ui-brand-ink) !important; } /* Alt özet bandı (TotalSummary → .dxbl-grid-footer-row): pager'la karışmasın, kendi dokusu olsun — nötr şerit + kalın değer (grid başlığıyla aynı aile, ondan açık). */ .ui-grid .dxbl-grid-footer-row, .ui-grid .dxbl-grid-footer-row td { background-color: var(--ui-surface-2) !important; color: var(--ui-ink) !important; font-weight: var(--ui-fw-medium) !important; font-size: var(--ui-fs-sm) !important; border-top: 1px solid var(--ui-line-strong) !important; } /* ============================================================================= 4b. BÖLÜM BLOĞU (.ui-block) — kart DEĞİL, ayraç çubuklu yığın bölümü ============================================================================= Ne zaman: aynı ekranda AYNI şeyin birden çok örneği alt alta diziliyorsa (ekstrede her para birimi için bir blok: TRY, USD, EUR…). Her örneğe `.ui-scard` vermek kart-içinde-kart üretir; bunun yerine ayraç çubuğu (solda başlık + özet metrikler, sağda grid ikonları) + grid + ayak. ⚠️ Bu sınıflar firma `app.css`'inde `.cari-block-*` adıyla duruyordu → modül RCL'i FİRMA CSS'ine bağımlıydı; ADR-0009'un sözü tam burada kırılıyordu (paketi bump'layan firma sayfayı alır, STİLİNİ ALMAZ). 27.07.2026'da platforma alındı, gömülü hex'ler token'a çevrildi (§0). */ .ui-block { margin-bottom: var(--ui-sp-4); } .ui-block-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--ui-sp-3); flex-wrap: wrap; margin: var(--ui-sp-4) 0 var(--ui-sp-2); padding-bottom: var(--ui-sp-2); border-bottom: 2px solid var(--ui-line-strong); } .ui-block-left { display: flex; align-items: baseline; gap: var(--ui-sp-4); flex-wrap: wrap; } .ui-block-t { font-size: var(--ui-fs-lg); font-weight: var(--ui-fw-bold); color: var(--ui-ink); } .ui-block-sum { font-size: var(--ui-fs-sm); color: var(--ui-ink-3); } .ui-block-foot { display: flex; gap: var(--ui-sp-5); margin-top: var(--ui-sp-2); font-size: var(--ui-fs-sm); color: var(--ui-ink-2); } /* ============================================================================= 4c. YAZDIRMA (A4) — ekran çerçevesini gizle, düz tabloyu göster ============================================================================= Ekstre gibi "ekranda grid / kağıtta düz tablo" gereken sayfalar için. Aynı gerekçe: bu kurallar firma `app.css`'indeydi ve onları ÜRETEN markup modül RCL'inde (Sentez.UI) duruyordu. `.no-print` / `.print-only` adları KORUNDU (yaygın, sayfa-nötr kavramlar); ekstreye özgü olan `.statement-print-*` ise platforma `.ui-print-*` adıyla alındı — platform CSS'i tek bir modülün ekranını adıyla anmaz. */ .print-only { display: none; } @media print { @page { size: A4; margin: 12mm; } /* Uygulama çerçevesi (drawer/appbar/overlay) + ekrana özgü her şey kağıda gitmez. */ .mud-drawer, .mud-appbar, .mud-overlay, .mud-drawer-overlay, .no-print { display: none !important; } .mud-main-content { margin: 0 !important; padding: 0 !important; } .print-only { display: table !important; width: 100%; border-collapse: collapse; font-size: 11px; } .ui-print-table th, .ui-print-table td { border: 1px solid var(--ui-line-strong); padding: 3px 6px; text-align: left; } .ui-print-table th.num, .ui-print-table td.num { text-align: right; } .ui-print-table thead { display: table-header-group; } /* başlık her sayfada tekrar etsin */ /* Yazdırma başlığı: ekran header'ı `.no-print`, onun yerine bu sade satır görünür. */ .ui-print-head { display: block !important; font-size: 13px; font-weight: var(--ui-fw-bold); margin: 0 0 8px; } .ui-print-cur { font-weight: var(--ui-fw-bold); margin: 10px 0 4px; } a[href]::after { content: ""; } /* link URL'lerini bastır */ } /* ============================================================================= 5. BÖLÜM / FORM KARTI (.ui-scard) — UI_STANDARD §2.2 Yuvarlak beyaz kart + kenara YASLI tinted başlık şeridi (solunda ince aksan = MARKA) + gölge. Sayfa header'ı tek koyu-aksanlı öğe kalır (kartlar ona rakip değil). Detay bölümleri VE form grupları bunu kullanır. ⚠️ Firma app.css'inde `.cari-card` AYRI bir sınıftır (Cari Açılış formu); aynı adı kullanınca cascade'de sonraki kazanıp kartı içeri ittiriyordu → standart adı `.ui-scard`. ============================================================================= */ .ui-scard { background: var(--ui-surface); border: 1px solid var(--ui-line); /* Marka aksanı KARTIN TAMAMI boyunca (kullanıcı 25.07.2026): önce yalnız başlık şeridindeydi, kart gövdesi boyunca devam etmeyince "yarım çizgi" gibi duruyordu. */ border-left: 3px solid var(--ui-brand); border-radius: var(--ui-r); overflow: hidden; box-shadow: var(--ui-sh-1); } /* ALT ALTA DİZİLEN KARTLAR ARASINDA BOŞLUK (28.07.2026 — kullanıcı: "kartlar birbirine bitişik gibi duruyor"). Kart KENDİ dış boşluğunu taşımaz, yalnız KARDEŞİNE verir: tek kart bırakıldığında sayfa başında boşluk oluşmaz ve `gap`'li kaplarda çift boşluk olmaz (aşağıdaki sıfırlama). */ .ui-scard + .ui-scard { margin-top: var(--ui-sp-3); } /* `.ui-col` / `.ui-cols-*` zaten `gap` ile diziyor → orada kardeş marjı EKLENMEZ (12+12=24 olurdu). */ .ui-col > .ui-scard + .ui-scard { margin-top: 0; } .ui-scard-h { /* Flex satır: başlık solda, opsiyonel eylem (ör. "Düzenle") sağda `margin-left:auto` ile. Flex değilse eylem alt satıra düşer (bir kez yaşandı). */ display: flex; align-items: center; gap: var(--ui-sp-2); background: var(--ui-surface-2); padding: var(--ui-sp-2) var(--ui-sp-3); border-bottom: 1px solid var(--ui-line-soft); } /* Kart başlığındaki eylem butonu: satırı yükseltmesin (MudButton varsayılanı 36px). */ .ui-scard-h .mud-button-root { min-height: 26px; padding: 2px 8px; } /* Sürüklenebilir/boyutlandırılabilir düzenleme kutusu (DevExpress DxPopup). Sabit px genişlik dar ekranda taşar → viewport'a kırp. Sürükleme başlıktan yapıldığı için başlık imleci "taşınabilir" sinyali vermeli. */ /* ============================================================================= DÜZENLEME KUTUSU STANDARDI (.ui-editpop) — DevExpress DxPopup, 25.07.2026 ----------------------------------------------------------------------------- Neden standart: kutu her modülde ayrı ayrı kuruluyordu → mobilde taşıyor, başlık ne için açıldığını söylemiyor, giriş alanları DevExpress varsayılanında kalıp dar görünüyordu. Bir kez burada tanımlanır, HER düzenleme kutusu otomatik alır. Kullanım: ============================================================================= */ .ui-editpop { max-width: 94vw; max-height: 90vh; } /* UZUN İÇERİK: GÖVDE kayar, ALTLIK (Kaydet/Vazgeç) daima görünür — kullanıcı 12.09.2026: dağıtım anahtarına 18 satır girilince Kaydet ekranın altında kalıyor ve kutu hiç kaymıyordu. Sebep: `.ui-editpop`'un 90vh tavanı KUTUYU sınırlıyor ama gövdede taşma kuralı yoktu → içerik altlığı görünür alanın dışına itiyordu. ⚠️ `min-height: 0` ŞART: flex çocuğunun varsayılanı `min-height: auto`'dur ve içerik kadar BÜYÜR — `overflow-y: auto` tek başına yazılırsa kaydırma çubuğu hiç çıkmaz (klasik flex tuzağı). ⚠️ Sınıf adları tahmin DEĞİL: `.dxbl-modal-content` / `-body` / `-footer` DevExpress temasından doğrulandı (`.dxbl-popup-body` diye bir şey yok — bkz. yukarıdaki not). */ .ui-editpop .dxbl-modal-content { display: flex; flex-direction: column; max-height: 90vh; } .ui-editpop .dxbl-modal-body { overflow-y: auto; min-height: 0; } .ui-editpop .dxbl-modal-footer { flex: 0 0 auto; } /* ⚠️ GÖRÜNÜM DEVEXPRESS DEĞİŞKENLERİYLE VERİLİR — `!important` ile DEĞİL. Canlı DOM'da (25.07.2026) doğrulandı: DxPopup kendi kurallarını `.ui-editpop .dxbl-…` seçicisinden GÜÇLÜ yazıyor → düz CSS ezilmiyordu (üç tur boşa gitti, header bembeyaz kaldı). DevExpress her yüzey için `--dxbl-popup-*` değişkeni sunuyor; doğru yol bu. ⚠️ Sınıf adları da tahmin edilmez: gövde `.dxbl-modal-body`, altlık `.dxbl-modal-footer` (`.dxbl-popup-body`/`-footer` DİYE BİR ŞEY YOK — o seçicilerle yazılan kurallar hiç uygulanmadı). Başlık ise gerçekten `.dxbl-popup-header`. */ .ui-editpop { /* Başlık = MARKA rengi — BİRİNCİL BUTONLA AYNI ton (kullanıcı 25.07.2026). Önce brand-900 (üst bar tonu) denendi; kutu sayfadan kopuk duruyordu. Buton rengi kullanılınca kutu "eylem yüzeyi" diliyle akraba oluyor. ⚠️ Yazı ölçüsü de DEĞİŞKENLE verilir: DevExpress varsayılanı 20px/600 idi — kart başlığı 13.6px iken kutu başlığı devasa duruyordu (kullanıcı: "çok kalın ve büyük"). Gövde ölçüsüne çekildi (.9rem), kalınlık kart başlığıyla aynı (600). */ --dxbl-popup-header-bg: var(--ui-brand); --dxbl-popup-header-color: var(--ui-brand-ink); --dxbl-popup-header-font-size: var(--ui-fs); --dxbl-popup-header-font-weight: var(--ui-fw-medium); --dxbl-popup-header-padding-top: var(--ui-sp-2); --dxbl-popup-header-padding-bottom: var(--ui-sp-2); --dxbl-popup-header-padding-x: var(--ui-sp-3); /* Gövde/altlık dolguları: DevExpress varsayılanı 24px — kutuyu şişiriyordu. */ --dxbl-popup-body-padding-top: var(--ui-sp-3); --dxbl-popup-body-padding-bottom: var(--ui-sp-3); --dxbl-popup-body-padding-x: var(--ui-sp-3); --dxbl-popup-footer-padding-top: var(--ui-sp-2); --dxbl-popup-footer-padding-bottom: var(--ui-sp-2); --dxbl-popup-footer-padding-x: var(--ui-sp-3); --dxbl-popup-footer-bg: var(--ui-surface-2); } .ui-editpop .dxbl-popup-header { cursor: move; font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); } /* Kapat (X) koyu zeminde okunur kalsın. */ .ui-editpop .dxbl-popup-header .dxbl-btn { color: var(--ui-brand-ink); opacity: .8; } .ui-editpop .dxbl-popup-header .dxbl-btn:hover { opacity: 1; } /* Başlıkta EYLEM ADI sönük ek olarak durur: `HeaderText` yalnız KAYDIN/GRUBUN adını taşır ("Finans & Risk"), "düzenle" buraya CSS ile eklenir — küçük, ince, yarı saydam. Neden CSS: DxPopup başlığı düz metin; `HeaderContentTemplate` başlığı tümden yok ediyor. ⚠️ Hedef `.dxbl-modal-title` — başlık METNİNİN kendisi. `.dxbl-modal-header-default`'a bağlanırsa ek, kapat (X) düğmesinin ÖTESİNE, şeridin sağ ucuna düşüyor (ölçüldü). */ .ui-editpop .dxbl-modal-title::after { /* \00a0 = kırılmaz boşluk: düz " " HTML'de sıkışıp başlığa bitişik görünüyordu. */ content: "\00a0\00a0· düzenle"; font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-normal); opacity: .72; } /* SALT-OKUNUR kutu (.is-view): aynı kutu iskeleti ama içeride DÜZENLEME YOK — ERP karşılığı, fatura görüntüsü, kayıt detayı gibi yalnız bakılan yüzeyler. ⚠️ "· düzenle" eki YANILTICIYDI (kullanıcı bildirdi 05.08.2026): kutuda düzenlenecek hiçbir şey yokken başlık "düzenle" diyordu. Ek "görüntüle" ile değiştirilir — kutunun ne olduğunu söyler, yalan söylemez. */ .ui-editpop.is-view .dxbl-modal-title::after { content: "\00a0\00a0· görüntüle"; } /* DÜZ kutu (.is-plain): ne düzenleme ne görüntüleme — SEÇİM / OLUŞTURMA kutuları ("Cari Seç", "Elle Belge Aç"). Başlık eki YOK: kutu zaten ne yaptığını söylüyor, "· düzenle" eklemek yalan olur (aynı gerekçe .is-view'da; kullanıcı 05.09.2026). */ .ui-editpop.is-plain .dxbl-modal-title::after { content: none; } /* ============================================================================= MUDBLAZOR FORM ALANI ÖLÇÜSÜ — TEK KAYNAK (1.145.0, kullanıcı 05.09.2026) ============================================================================= Sorun: kompakt ölçü yalnız `.ui-filterbar` kapsamında tanımlıydı. Aynı bileşen filtre çubuğunda ~36px/0.9rem, bir KART GÖVDESİNDE (`.ui-scard-b`) ya da formda MudBlazor varsayılanıyla ~40px/1rem çiziliyordu → kullanıcı "fatura oluşturma ve parametre sayfaları incoming'deki gibi küçük standartta değil" diye bildirdi. Çözüm: ölçü, alanın BULUNDUĞU KABA bağlanır (form · kart gövdesi · düzenleme kutusu) — sayfaya ölçü YAZILMAZ, paket bump'ı tüm sayfaları birden düzeltir. `.ui-dxform` (DevExpress) bunun kardeşidir; ikisi aynı yüksekliği hedefler. ⚠️ Yardım metni `.ui-filterbar`daki gibi GİZLENMEZ: formda o metin anlam taşır (ör. "Boş → ekstre toplamı esas alınır") — yalnız küçültülür. ============================================================================= */ .ui-form .mud-input-control, .ui-scard-b .mud-input-control, .ui-editpop .mud-input-control { margin: 0; } /* ⚠️ `!important` ŞART (05.09.2026, saha): MudBlazor kendi ölçüsünü `.mud-input.mud-input-outlined input` gibi ÜÇ SINIFLI seçicilerle yazıyor; iki sınıflı `.ui-scard-b .mud-input-slot` kuralı ÖZGÜLLÜKTE yeniliyordu. Sonuç: kutu yüksekliği düzeldi ama İÇİNDEKİ YAZI 1rem kaldı — kullanıcı "bileşenlerin içindeki yazılar büyük, diğer yerlerle aynı değil" diye bildirdi. `.ui-filterbar` bloğu bu yüzden zaten `!important` kullanıyor; aynı aileden olsun diye burada da kullanılır. Kapsam: yazılan değer (input/textarea), SEÇİLİ metin (`.mud-select-input`, `.mud-input-slot`), etiket ve açılır liste öğeleri — biri atlanınca alan içinde iki farklı ölçü görünüyor. */ .ui-form input, .ui-form textarea, .ui-form .mud-input-slot, .ui-form .mud-select-input, .ui-form .mud-input-label, .ui-form .mud-input-label-inputcontrol, .ui-scard-b input, .ui-scard-b textarea, .ui-scard-b .mud-input-slot, .ui-scard-b .mud-select-input, .ui-scard-b .mud-input-label, .ui-scard-b .mud-input-label-inputcontrol, .ui-editpop input, .ui-editpop textarea, .ui-editpop .mud-input-slot, .ui-editpop .mud-select-input, .ui-editpop .mud-input-label, .ui-editpop .mud-input-label-inputcontrol { font-size: var(--ui-fs) !important; } /* Açılır liste (seçici menüsü) gövdeyle aynı ölçüde olmalı: kutuda 0.9rem, listede 1rem görünmesi aynı alanın iki ayrı ölçüsü demek. Menü portal ile BODY altına taşınır → kap seçicisiyle yakalanamaz; MudBlazor'ın kendi menü sınıfı hedeflenir. */ .mud-popover .mud-list-item-text, .mud-popover .mud-list-item { font-size: var(--ui-fs); } /* ETİKET (boş alanda placeholder gibi durur) — 1.150.0, MudBlazor CSS'i OKUNARAK yazıldı. Ölçülen gerçek kurallar: boş (dense): .mud-input-label-outlined.mud-input-label-margin-dense { translate(14px, 12px) scale(1) } dolu/odakta : .mud-shrink~label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined { translate(14px, -6px) scale(.75) } ⚠️ TUZAK (saha 05.09.2026): "yukarı taşınmış" hâlin işareti ETİKETTE değil, GİRİŞTE (`.mud-shrink ~ label`). `:not(.mud-input-label-shrink)` diye yazılan filtre bu yüzden hiçbir şeyi dışarıda bırakmadı; `!important` ile verilen boş-hâl konumu DOLU alanlara da uygulandı → değerin üstünde etiket durdu, kutu uzadı. Çözüm: iki hâl de Mud'ın KENDİ seçici şekliyle, kap sınıfı eklenerek yazılır (özgüllük bizde, `!important` gerekmez); yalnız font boyutunda genel kuralı yenmek için `!important` kalır. */ /* 1) BOŞ hâl: kutu 36px'e indiği için 12px çok aşağıda kalıyordu → 8px + bir tık küçük yazı. */ .ui-form .mud-input-label-outlined.mud-input-label-margin-dense, .ui-scard-b .mud-input-label-outlined.mud-input-label-margin-dense, .ui-editpop .mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(14px, 8px) scale(1); font-size: var(--ui-fs-sm) !important; } /* 2) DOLU / ODAKTA hâl: Mud'ın konumu AYNEN korunur; ölçü onun `scale(.75)`inden gelsin diye taban 1rem. */ .ui-form .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .ui-form .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .ui-scard-b .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .ui-scard-b .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .ui-editpop .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .ui-editpop .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined { transform: translate(14px, -6px) scale(0.75); font-size: 1rem !important; /* ÇERÇEVE ÇİZGİSİNİ ETİKETİN ALTINDAN GİZLE (07.09.2026 saha: "KDV oranı nereden / Tek KDV Oranı gibi alanlarda başlığın altındaki çizgi görünüyor, okuma zorlaşıyor"). Outlined alanda çizgi boşluğunu MudBlazor `fieldset > legend` genişliğiyle açar; bu mekanizma MudTextField'da çalışıyor ama MudSelect/MudNumericField'da açılmıyordu (etiketi yukarı biz taşıdığımız hâllerde legend dar kalıyor) → çizgi yazının içinden geçiyordu. ⚠️ Legend'i zorlamak yerine ETİKETE ZEMİN veriliyor: MudBlazor'ın iç DOM'una (fieldset/legend sınıf adlarına) bağlanmak sürüm yükseltmesinde sessizce kırılır; zemin maskesi bileşen türünden BAĞIMSIZ çalışır (metin · seçici · sayı · tarih hepsinde aynı). Zemin kart gövdesiyle aynı token — alan her zaman `--ui-surface` üzerinde durur. */ background: var(--ui-surface); padding: 0 4px; } /* DÜZENLEME KUTUSUNDA SIKI DÜZEN (1.150.0, kullanıcı 05.09.2026: "alt açıklamalar daha küçük, satır araları daha sıkı olsun — parametre ekranındaki gibi"). Kutuda alan sayısı fazla; sayfadaki nefes payı burada gereksiz yer yiyor. Yalnız `.ui-editpop` kapsamı — sayfa formları değişmez. */ .ui-editpop .ui-form { gap: var(--ui-sp-2); } .ui-editpop .ui-cols-2, .ui-editpop .ui-cols-3 { gap: var(--ui-sp-2); } .ui-editpop .mud-input-helper-text { font-size: var(--ui-fs-xxs); margin-top: 1px; line-height: 1.25; } /* ⚠️ AŞAĞIDAKİ KURALLAR BİR DÜZELTME SIRASINDA SİLİNMİŞTİ (05.09.2026): etiket bloğu yeniden yazılırken bölge değiştirildi ve dolgu/açılır kart/tablo genişlikleri de gitti — alanlar MudBlazor varsayılanına (40px) döndü, açılır kart başlığı düğme gibi görünmeyi bıraktı. Ders: bölge değiştirirken kesilen aralığın TAMAMI okunmalı; "sondan başlığa kadar" gibi geniş kesim komşu kuralları da götürür. */ /* Dikey dolgu: dense+outlined varsayılanı ~40px → ~32px (1.151.0; kullanıcı "biraz daha küçülsün"). Etiketin boş-hâl konumu (yukarıda, 8px) bu yüksekliğe göredir — biri değişirse diğeri de gözden geçirilir. */ .ui-form .mud-input.mud-input-outlined .mud-input-slot, .ui-form .mud-input-outlined input, .ui-scard-b .mud-input.mud-input-outlined .mud-input-slot, .ui-scard-b .mud-input-outlined input, .ui-editpop .mud-input.mud-input-outlined .mud-input-slot, .ui-editpop .mud-input-outlined input { padding-top: 4px; padding-bottom: 4px; } /* Yardım metni sayfa formlarında da küçük ve sıkı (kutuda daha da sıkı — yukarıdaki kural). */ .ui-form .mud-input-helper-text, .ui-scard-b .mud-input-helper-text { font-size: var(--ui-fs-xs); margin-top: 2px; line-height: 1.3; } /* Alan içi ikon (büyüteç/takvim) varsayılan 24px → 18px; dolgusu daralır. */ .ui-form .mud-input-adornment .mud-icon-root, .ui-scard-b .mud-input-adornment .mud-icon-root, .ui-editpop .mud-input-adornment .mud-icon-root { font-size: 18px; } .ui-form .mud-input-adornment .mud-button-root, .ui-scard-b .mud-input-adornment .mud-button-root, .ui-editpop .mud-input-adornment .mud-button-root { padding: 3px; } /* İŞARETLİ ONAY KUTUSU MARKA RENGİNDE (1.151.0, kullanıcı: "işaretli checkbox gri, pasif gibi duruyor"). MudBlazor'a `Color="Color.Primary"` yazmak yerine `.ui-check` kapsamında merkezî — işaretsiz hâl nötr kalır, işaretli hâl markadan okunur. */ .ui-check .mud-icon-button.mud-checked .mud-icon-root, .ui-check .mud-checkbox .mud-checked .mud-icon-root { color: var(--ui-brand); } /* ============================================================================= AÇILIR/KAPANIR BÖLÜM KARTI (.ui-scard.is-collapsible) — 1.145.0 Kart başlığı düğmeye dönüşür: tıkla → gövde açılır/kapanır, sağda chevron. Görsel dil `.ui-filterdock` ile aynı, kart kimliği (aksan + başlık) korunur. Varsayılan açıklık SAYFADA belirlenir. ============================================================================= */ .ui-scard.is-collapsible > .ui-scard-h { width: 100%; cursor: pointer; border: none; background: var(--ui-surface-2); font: inherit; text-align: left; } .ui-scard.is-collapsible > .ui-scard-h:hover { background: var(--ui-surface-3); } .ui-scard-chev { margin-left: auto; flex-shrink: 0; color: var(--ui-ink-3); } /* TABLO KOLON GENİŞLİKLERİ — sayfaya `style="width:70px"` yazmak §0 ihlali; ölçü sınıfla verilir. */ .ui-table .ui-w-icon { width: 44px; } .ui-table .ui-w-xs { width: 70px; } .ui-table .ui-w-sm { width: 110px; } .ui-table .ui-w-md { width: 150px; } .ui-table .ui-w-lg { width: 220px; } /* ============================================================================= DEVEXPRESS FORM STANDARDI (.ui-dxform) — HER YERDE AYNI (27.07.2026) ============================================================================= ⚠️ Bu kurallar 25.07.2026'da `.ui-editpop` KAPSAMINA yazılmıştı → yalnız düzenleme kutusunda geçerliydi. Sonuç: aynı bileşenler bir SAYFAYA konunca kutu 24px/12px'e düşüyor, Mud alanlarının yanında "başka bir uygulama" gibi duruyordu; her yeni ekranda aynı ölçüler yeniden konuşuluyordu (kullanıcı: "her defasında aynı şeyleri düzeltmek zorunda kalmayalım, zaman kaybı"). Kural artık YÜZEYDEN BAĞIMSIZ tek sınıfta. Kullanım: DevExpress girişi barındıran her kap `.ui-dxform` alır (form, kart gövdesi, düzenleme kutusu). `.ui-editpop` seçicide TUTULDU — kutu içinde DxFormLayout kullanmayan eski/yeni bir alan kalırsa yine de doğru görünsün (geri-düşüş). Ölçüm (25.07.2026): DevExpress SizeMode.Small varsayılanı kutu 24px / font 12px → 30px / 14.4px (--ui-fs). `--dxbl-text-edit-padding-y-s` değişkeni bu yolda ETKİ ETMİYOR (denendi, ölçüldü); yükseklik input dolgusu + sarmalayıcı min-height ile verilir. */ .ui-dxform .dxbl-text-edit-input, .ui-editpop .dxbl-text-edit-input { padding-top: 5px; padding-bottom: 5px; font-size: var(--ui-fs); } .ui-dxform .dxbl-text-edit, .ui-editpop .dxbl-text-edit { min-height: 30px; } /* Etiket (DxFormLayout caption ya da `.ui-field-l`) — NORMAL kalınlık, ikincil ton. Kalın etiket denendi ve geri alındı (27.07.2026): alan sayısı çok olan formda başlıklar değerlerden baskın çıkıp ekranı gürültülü yapıyordu → kalınlık 400'de KALIR. ⚠️ RENK bir kademe koyulaştı (--ui-ink-3 → --ui-ink-2, 28.07.2026): etiket ile ALTINDAKİ AÇIKLAMA birebir aynı renkteydi (ölçüm: ikisi de rgb(133,146,163)) ve boyut farkı 13.6↔12.5px fark edilmiyordu → kullanıcı "parametre adı, açıklama, önemli not hepsi aynı görünüyor, hangi açıklama kime ait anlaşılmıyor" dedi. Artık hiyerarşi RENKLE kurulur: ad ink-2, açıklama ink-3. */ .ui-dxform .dxbl-fl-cpt, .ui-dxform label, .ui-dxform .ui-field-l { font-size: var(--ui-fs-sm); color: var(--ui-ink-2); font-weight: var(--ui-fw-normal); } /* Açıklama ALANINA YAPIŞIR (28.07.2026): ölçümde alan→açıklama 10px, açıklama→sonraki parametre de ~10px çıkıyordu; eşit boşluk sahipliği belirsiz bırakıyordu. Artık 2px yapışık + satır aralığı sıkı, parametreler arası boşluk aşağıdaki `.ui-field` alt dolgusundan gelir (yakınlık = aitlik). */ .ui-dxform .ui-field .ui-meta { margin-top: 2px; line-height: 1.3; font-size: var(--ui-fs-xs); color: var(--ui-ink-3); } /* Parametreler arası ayrım: alan kutusunun ALTINA boşluk (MudGrid oluğu üstüne biner) → "ad+açıklama" bloğu tek parça görünür, komşu parametre belirgin şekilde ayrılır. */ .ui-dxform .ui-field { padding-bottom: var(--ui-sp-2); } /* --- SEÇİCİ SATIRI: KOD + AÇIKLAMA (.ui-permopt) — 29.07.2026 -------------------------------- NE İÇİN: aranabilir seçicide (izin, ikon vb.) satır iki bilgi taşır — makine değeri (izin kodu) ve insan karşılığı. Yönetici KODLA arar (`[HasPermission]` onunla eşleşir), ama ne açtığını AÇIKLAMADAN anlar. İkisi aynı ağırlıkta yazılınca satır okunmuyordu. Hiyerarşi renkle: kod ink-1 (asıl değer), açıklama ink-3 (yardımcı). */ /* --- İKON PALETİ (.ui-iconpick-*) — 29.07.2026 ----------------------------------------------- NE İÇİN: ikon GÖRSEL bir seçimdir — kullanıcı adını bilmez, seti gözle tarar. Açılır listede tek sütun aktığı ve kutu seçili öğeye kaydırılmış açıldığı için "set" hiç görünmüyordu. Palet tüm seti ızgarada verir; ~2000 ikon satır bazında sanallaştırılır. */ .ui-iconpick-i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: transparent; color: var(--ui-ink-2); border: 1px solid transparent; border-radius: var(--ui-r-sm); cursor: pointer; } .ui-iconpick-i:hover { background: var(--ui-surface-3); color: var(--ui-ink); } /* Seçili: yalnız zemin DEĞİL kenarlık da — soluk zemin tek başına hover'dan ayırt edilemiyordu. */ .ui-iconpick-i.on { background: var(--ui-brand-soft); border-color: var(--ui-brand); color: var(--ui-brand); } /* Kaydırma kabı — `Virtualize` yalnız yüksekliği SINIRLI bir kapta çalışır (kap büyürse hepsi DOM'a basılır, kilitlenme geri gelir). ⚠️ KAP DÜZ BLOK OLMALI, flex DEĞİL (29.07.2026 — kullanıcı "kaydırma güzel çalışmıyor" dedi): `Virtualize` listenin başına/sonuna görünmez DOLGU elemanları koyar ve yüksekliklerini ItemSize × öğe sayısı ile hesaplar. Kap `display:flex; flex-wrap:wrap; gap` iken bu dolgular da birer flex öğesi olur, aralarına `gap` girer ve gerçek satır adımı ItemSize'ı aşar → sanal yükseklik ile gerçek yükseklik ayrışır, kaydırma zıplar/sürüklenir. Blok akışta adım = satır yüksekliği, hesap birebir tutar. */ .ui-iconpick-lg { display: block; max-height: 380px; overflow-y: auto; padding: var(--ui-sp-2); background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); } /* Satır: SABİT sütun sayısı → sabit satır yüksekliği (Virtualize ItemSize ile BİREBİR: 38px). Dikey boşluk `row-gap` ile DEĞİL satır yüksekliği içinde verilir; row-gap adımı büyütürdü. */ .ui-iconpick-row { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--ui-sp-1); height: 38px; align-items: center; justify-items: center; } /* Seçili ikonun form içindeki satırı: önizleme + ad + eylemler. */ .ui-iconfield { display: flex; align-items: center; gap: var(--ui-sp-2); } .ui-iconfield-p { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); color: var(--ui-ink-2); } .ui-iconfield-n { flex: 1 1 auto; min-width: 0; font-size: var(--ui-fs-sm); color: var(--ui-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Kutu içi küçük boş durum — `.ui-empty` tam sayfa kalıbı, dar kapta fazla yer kaplıyor. */ .ui-empty-sm { padding: var(--ui-sp-5); text-align: center; color: var(--ui-ink-3); font-size: var(--ui-fs-sm); } .ui-permopt { display: flex; align-items: baseline; gap: var(--ui-sp-2); min-width: 0; } .ui-permopt-c { color: var(--ui-ink-1); } .ui-permopt-m { flex: 1 1 auto; min-width: 0; font-size: var(--ui-fs-xs); color: var(--ui-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- PARAMETRE SATIRI (.ui-param) — 28.07.2026, kullanıcı geri bildirimiyle ------------------ NE İÇİN: ayar/parametre ekranları. Orada alanın ADI ekranın İÇERİĞİdir (yanında bir "değer" yoktur), açıklaması ise ikincildir → hiyerarşi form ekranlarının tersidir. NEDEN AYRI SINIF: `.ui-dxform`ın genel kuralı etiketi bilinçli olarak SOLUK + NORMAL tutar (27.07.2026 kararı: cari açılış gibi çok alanlı VERİ formlarında kalın etiket değerleri bastırıyor). O kararı bozmadan parametre ekranlarına ayrı bir kademe verilir: seçenek adı → koyu (--ui-ink) + orta kalınlık (600) açıklaması → 11.5px, soluk (--ui-ink-3), 2px YAPIŞIK (kime ait olduğu boşluktan okunur) önemli not → `.ui-note` (tint zemin + sol aksan) Kullanıcı 28.07.2026: "Silinenleri gizle seçeneği ile açıklaması aynı büyüklük ve renk, açıklama çok altta, bağ kurmak zor." Ölçüm doğruladı: ikisi de rgb(133,146,163) / 13.6 ↔ 12.5px / 16px arayla. */ .ui-dxform .ui-param label, .ui-dxform .ui-param .ui-field-l, .ui-dxform .ui-param .dxbl-checkbox label { color: var(--ui-ink); font-weight: var(--ui-fw-medium); } .ui-dxform .ui-param .ui-meta { margin-top: 1px; font-size: var(--ui-fs-2xs); line-height: 1.35; color: var(--ui-ink-3); } /* Blok olarak ayrılsın: içi sıkı, komşusundan uzak (yakınlık = aitlik ilkesi). */ .ui-dxform .ui-param { padding-bottom: var(--ui-sp-3); } /* Alanlar arası boşluk SIKI — DevExpress form yerleşimi kendi dolgusunu da ekliyor. */ .ui-dxform .dxbl-fl-item { padding-bottom: var(--ui-sp-1); } /* Gövdenin ilk satırındaki amaç cümlesi. */ .ui-editpop-sub { font-size: var(--ui-fs-xs); color: var(--ui-ink-3); margin-bottom: var(--ui-sp-2); } /* Eylem şeridi: sağa yaslı (Vazgeç · Kaydet). */ .ui-editpop-actions { display: flex; gap: var(--ui-sp-2); justify-content: flex-end; width: 100%; } /* Formun 560px tavanını kaldırır (geniş kutu / tam genişlik kart içindeki formlar). ⚠️ SEÇİCİ İKİ SINIFLI OLMAK ZORUNDA (07.09.2026 saha): `.ui-form-wide` BURADA, `.ui-form` ise AŞAĞIDA (~satır 1533) tanımlı. İkisi de tek sınıf = AYNI ÖZGÜLLÜK → cascade'de SONRA gelen kazanır ve `max-width: 560px` geri geliyordu. Yani `.ui-form-wide` sessizce ÖLÜYDÜ: sınıfı yazan her form (senaryo düzenleme, düzenleme kutuları) 560px'e sıkışıyor, alanlar alt alta iniyor ve sayfa gereksiz uzuyordu — kullanıcı "kartın sağı bomboş, içerik alt alta" diye bildirdi. `.ui-form.ui-form-wide` sıradan BAĞIMSIZ kazanır; kural taşınırsa da bozulmaz. */ .ui-form.ui-form-wide { max-width: none; } /* Alanlar arası boşluk SIKI: DevExpress form yerleşimi kendi dolgusunu da ekliyor, ikisi üst üste binince kutu gereksiz uzuyordu (kullanıcı: "bileşenler arası çok boşluk"). */ .ui-editpop .ui-form { gap: var(--ui-sp-2); } /* NOT: alan yüksekliği/font/etiket/aralık kuralları artık `.ui-dxform`'da (yukarıda) — yüzeyden bağımsız. Burada YALNIZ kutuya özgü şeyler kalır. */ .ui-editpop .dxbl-fl-item { padding-bottom: var(--ui-sp-1); } .ui-editpop .dxbl-fl-cpt, .ui-editpop label { font-size: var(--ui-fs-sm); color: var(--ui-ink-2); } /* --- MOBİL: DAR ve ORTALI ---------------------------------------------------- İki tur yanlış gitti, canlı ölçümle çözüldü: 1) `inset:0` ile tam ekran → DxPopup'un JS konumunu bozdu, kutu sola kaydı. 2) `width: 92vw` → kutunun kendi `margin: 28px`'i ile toplanınca sağa yapıştı (ölçüm: sol 28px / sağ 3px). Kök sebep: konum `margin` ile kuruluyor. Doğru yol → genişliği SABİTLEME, `width:auto` bırak ve MARGIN'i eşitle: sol/sağ 12px → kutu kendiliğinden ortalanır (ölçüm: 12/12). */ @media (max-width: 700px) { .ui-editpop { width: auto !important; /* Width="560px" özniteliğini ezer */ max-width: none; margin: var(--ui-sp-3) !important; max-height: 88dvh; } .ui-editpop .dxbl-popup-header { cursor: default; } /* sürükleme anlamsız */ } .ui-scard-title { display: flex; align-items: center; gap: var(--ui-sp-2); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); color: var(--ui-ink); } .ui-scard-title .ui-scard-ico { color: var(--ui-brand); } .ui-scard-title .ui-scard-ico.mud-icon-root { font-size: 1.15rem; } .ui-scard-count { color: var(--ui-ink-3); font-weight: var(--ui-fw-normal); font-size: var(--ui-fs-xs); } /* Kart başlığındaki EYLEM ("Düzenle") ikincil bir davettir, başlıkla yarışmaz: küçük + soluk (kullanıcı 25.07.2026 — "farklı renk ve daha küçük olsun"). Tıklanınca zaten koyulaşır; sayfada 5-6 kart varken bu ibareler dikkat dağıtıyordu. */ .ui-scard-h .mud-button-root, .ui-scard-h .mud-button-root .mud-button-label, .ui-scard-h .mud-button-root .mud-icon-root { color: var(--ui-ink-3) !important; } .ui-scard-h .mud-button-root { font-size: var(--ui-fs-xs); font-weight: var(--ui-fw-normal); } .ui-scard-h .mud-button-root .mud-icon-root { font-size: 1rem !important; } .ui-scard-h .mud-button-root:hover, .ui-scard-h .mud-button-root:hover .mud-button-label, .ui-scard-h .mud-button-root:hover .mud-icon-root { color: var(--ui-brand) !important; } .ui-scard-b { padding: var(--ui-sp-3); } /* ============================================================================= 5.0b YAN BÖLME (.ui-panes) — dar sol liste + geniş sağ çalışma alanı UI_GRID §8 "yan-yana bölmeler mobilde alt alta yığılır" kuralının MERKEZÎ karşılığı. Önce sayfada `IsMobile ? "d-flex flex-column" : "d-flex"` + satır içi stil (gömülü #hex/px) ile kuruluyordu (§0 ihlali) ve her sayfa kendi breakpoint'ini taşıyordu. Artık CSS hallediyor: markup tek yapı yazar, mobil davranışı buradan gelir (§8 "sayfa içinde ayrı medya sorgusu yazılmaz"). ============================================================================= */ .ui-panes { display: flex; gap: var(--ui-sp-4); align-items: flex-start; } .ui-pane-side { flex: 0 0 25%; max-width: 25%; min-width: 0; border-right: 1px solid var(--ui-line); padding-right: var(--ui-sp-3); } .ui-pane-main { flex: 1 1 auto; min-width: 0; } @media (max-width: 700px) { .ui-panes { flex-direction: column; gap: var(--ui-sp-3); } .ui-pane-side { flex: 1 1 auto; max-width: none; border-right: none; padding-right: 0; border-bottom: 1px solid var(--ui-line); padding-bottom: var(--ui-sp-3); } } /* ============================================================================= 5.1 KART KOLONLARI (.ui-cols-2 + .ui-col) — detay sayfası bölüm düzeni MudGrid satır-öncelikli dizer: yan yana iki kart farklı yükseklikteyse satır en uzununa göre açılır ve altta tırtıklı boşluklar kalır. Burada kolonlar BAĞIMSIZ akar → kartları satır sayılarına göre dengeli dağıtabilirsin (ör. sol 6+3+2, sağ 7+4 = ikisi de 11 satır). Dar ekranda (<900px kap) tek kolona iner. ============================================================================= */ .ui-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-sp-3); align-items: start; } .ui-col { display: flex; flex-direction: column; gap: var(--ui-sp-3); min-width: 0; } /* ÜÇ KOLON + YAPIŞKAN RAY (27.07.2026 — cari açılış formu). Son kolon dar bir "ray": form uzadıkça kaydırılırken görünürde kalması gereken şeyler (üretilecek cari kodu, sabit/kilitli değerler) oraya konur. `position: sticky` YALNIZ geniş ekranda; dar ekranda kolonlar alt alta indiği için yapışkanlık anlamsızlaşır ve içeriği örter. */ .ui-cols-3 { display: grid; grid-template-columns: 1fr 1fr minmax(240px, .8fr); gap: var(--ui-sp-3); align-items: start; } .ui-col-rail { position: sticky; top: var(--ui-sp-3); } /* ============================================================================= 5.1b OTOMATİK ALAN IZGARASI (.ui-fields) — KISA form alanları için `.ui-cols-2/3` sütun sayısını SABİTLER; kısa alanlarda (Senaryo Adı, Anahtar, Depo Kodu, Sıra, Fiş Tipi…) bu, geniş ekranda sağı boş bırakıp formu gereksiz uzatıyor. Burada sütun sayısını KAP GENİŞLİĞİ belirler: dar ekranda 1-2, orta 3-4, geniş 6+. Kullanıcı 07.09.2026: "sütun verileri çok uzun değil, ekran genişliğine göre 3-4-6 sütuna kadar çıkarsak". `auto-fill` (auto-fit DEĞİL): son satırda kalan 2 alan, boş izleri yutup DEV genişliğe yayılmasın — alan genişliği satırdan satıra değişirse form dağınık okunur. Uzun alanlar (VKN listesi, açıklama) `.ui-span-2` ile iki iz kaplar. ⚠️ `.ui-form`'un 560px tavanıyla birlikte kullanılırsa hiçbir işe yaramaz → kap `.ui-form.ui-form-wide` olmalı (bkz. cascade tuzağı notu). */ .ui-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-fields-min, 210px), 100%), 1fr)); gap: var(--ui-sp-3); align-items: start; } .ui-fields > .ui-span-2 { grid-column: span 2; } /* Dar ekranda iki iz kaplamak taşmaya yol açar — tek ize döner. */ @media (max-width: 700px) { .ui-fields > .ui-span-2 { grid-column: auto; } } /* ============================================================================= 5.2 OTOMATİK KART IZGARASI (.ui-cardgrid) — sayısı belli olmayan EŞ kartlar `.ui-cols-*` kolon SAYISINI sabitler (detay sayfası düzeni: solda 3 kart, sağda 2). Burada kart sayısı veriden gelir (açık oturumlar, cihazlar, bağlantılar) ve kartlar birbirinin EŞİDİR → kolon sayısını KAP genişliği belirler: kart taban ölçüsünün altına inmez, sığdığı kadar yan yana dizilir. Neden `auto-fill` (auto-fit DEĞİL): tek kart kaldığında `auto-fit` onu tüm satıra yayar; 1400px ekranda tek oturum kartı sayfa boyu bir şerit oluyordu (kullanıcı 07.09.2026: "kartlar tam ekranı kapatmadan biraz daha dar halde olsa"). `auto-fill` boş kolonu boş bırakır → kart genişliği kaç tane olduğuna göre DEĞİŞMEZ. `min()` şart: dar ekranda sabit 320px'lik iz, 360px'lik telefonda yatay taşma yapardı. Taban ölçü `--ui-cardgrid-min` ile sayfa bazında ayarlanabilir (px sayfaya YAZILMAZ, §0). */ .ui-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-cardgrid-min, 340px), 100%), 1fr)); gap: var(--ui-sp-3); align-items: start; } /* Izgara zaten `gap` ile diziyor → kardeş marjı EKLENMEZ (12+12=24 olurdu; `.ui-col` ile aynı gerekçe). */ .ui-cardgrid > .ui-scard + .ui-scard { margin-top: 0; } /* ENGELLEYİCİ İŞLEM örtüsü içeriği (§A) — koyu örtü üzerinde okunur metin. `--ui-brand-ink` değil sabit beyaz: örtü zemini temadan bağımsız koyudur. */ .ui-blocking { text-align: center; color: #fff; } .ui-blocking-h { margin-top: var(--ui-sp-3); font-weight: var(--ui-fw-bold); } .ui-blocking-sub { font-size: var(--ui-fs-sm); opacity: .85; } /* Doğrulama hatası listesi (MudAlert içinde) — madde imi hizası. */ .ui-errlist { margin: 0; padding-left: 18px; } /* Büyük tek değer (ör. otomatik üretilecek cari kodu) — kart içinde ortalanmış vurgu. */ .ui-bigval { text-align: center; font-size: var(--ui-fs-xl); font-weight: var(--ui-fw-bold); font-family: var(--ui-font-cond); letter-spacing: .5px; color: var(--ui-ink); } /* DevExpress girişini Mud formunda ETİKETLEMEK: DxComboBox/DxTagBox'ın Mud gibi yüzen etiketi yoktur. Aynı formda Mud alanlarıyla yan yana dururken hizası tutsun diye ortak sarmalayıcı. */ /* DevExpress bileşenini kabına yay — `Style="width:100%"` gömmek yerine (§0). */ .ui-w-full { width: 100%; } .ui-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Etiket SOLUK ve NORMAL kalınlıkta (kullanıcı 27.07.2026: "kalın olmasın"): alanın kendisi (girilen değer) öne çıkmalı, etiket yalnız yönlendirir. Kalın etiket formu gürültülü yapıyordu. */ .ui-field-l { font-size: var(--ui-fs-xs); color: var(--ui-ink-3); font-weight: var(--ui-fw-normal); } @media (max-width: 960px) { .ui-cols-2 { grid-template-columns: 1fr; } .ui-cols-3 { grid-template-columns: 1fr; } .ui-col-rail { position: static; } } /* ============================================================================= 6. SEKME STANDARDI (.ui-tabs) Segment kontrolü: gri zeminli çerçeveli grup. Seçili = beyaz zemin + kalın yazı + marka alt çizgisi. Dikey çizgi yalnız segmentler ARASINDA. ============================================================================= */ .ui-tabs .mud-tabs-tabbar { background: transparent; margin-bottom: var(--ui-sp-3); } .ui-tabs .mud-tabs-tabbar-inner { min-height: unset; } .ui-tabs .mud-tabs-tabbar-wrapper { gap: 0; background: var(--ui-surface-2); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); overflow: hidden; } .ui-tabs .mud-tab { /* GENİŞLİK DİNAMİK (27.07.2026, kullanıcı: "dinamik olsa hepsi sığar"). İki aşama gerekti: 1) `width:auto` + `min-width:0` → MudBlazor'ın 160px varsayılanı kalkar, sekme İÇERİK kadar olur. 2) `flex: 0 1 auto` + ellipsis → içerik kadar bile SIĞMIYORSA (dar kolondaki kart, uzun şirket adı) sekmeler ORANTILI DARALIR ve üç nokta ile kısalır. Yalnız (1) yapılınca 3 şirkette hâlâ taşıp kaydırma okları çıkıyordu. Sonuç: sekmeler hiçbir zaman taşmaz → kaydırma okuna gerek kalmaz (aşağıda gizli). */ /* ⚠️ `!important` ŞART: MudBlazor'ın kendi `min-width: 160px` kuralı aynı özgüllükte değil, DAHA GÜÇLÜ geliyor — `min-width: 0` sade haliyle uygulanmadı (ölçüldü: sekmeler 160px kaldı, 3 şirkette üçüncüsü kayboldu). */ flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 40px; padding: var(--ui-sp-2) var(--ui-sp-2); border-radius: 0; border: none; border-left: 1px solid var(--ui-line); background: transparent; /* Sekme etiketi de gövde-altı ölçüde (--ui-fs-sm): sol menü ve kart başlığıyla aynı satırda okunuyor; 14.4px iken sayfa "iri" görünüyordu (kullanıcı 25.07.2026). */ text-transform: none; font-weight: var(--ui-fw-medium); font-size: var(--ui-fs-sm); letter-spacing: normal; line-height: 1.2; color: var(--ui-ink-2); } /* ⚠️ TUZAK: MudBlazor her tab'ı .mud-tooltip-root içine sarar → her .mud-tab kendi sarmalayıcısının :first-child'ı olur. Bu yüzden `.mud-tab:first-child` HEPSİNE uyar (border'ı hepsinden siler). İlk çizgiyi yalnız GERÇEK ilk tab'dan kaldırmak için sarmalayıcı düzeyinde :first-child hedefle. */ .ui-tabs .mud-tabs-tabbar-wrapper > .mud-tooltip-root:first-child .mud-tab, .ui-tabs .mud-tabs-tabbar-wrapper > .mud-tab:first-child { border-left: none; } .ui-tabs .mud-tab:hover:not(.mud-tab-active) { color: var(--ui-ink); background: var(--ui-surface-3); } .ui-tabs .mud-tab.mud-tab-active { color: var(--ui-brand) !important; font-weight: var(--ui-fw-bold); background: var(--ui-surface) !important; box-shadow: inset 0 -3px 0 0 var(--ui-brand); } .ui-tabs .mud-tab .mud-icon-root { font-size: 1.1rem; } .ui-tabs .mud-tab-slider { display: none !important; } /* Kaydırma okları HER ZAMAN gizli: sekmeler yukarıdaki `flex: 0 1 auto` ile daraldığı için asla taşmaz → ok yalnız yer kaplar. (Mobilde zaten gizliydi; kural yukarı alındı.) */ .ui-tabs .mud-tabs-scroll-button { display: none; } /* Sekme şeridi tek satır ve kapsayıcıya sığar. */ .ui-tabs .mud-tabs-tabbar-wrapper { display: flex; flex-wrap: nowrap; min-width: 0; } /* ============================================================================= 7. FORM (.ui-form) — tek tip, kompakt Alan aralığı container gap'ten gelir (alanlara tek tek mb verilmez); yükseklik Margin.Dense ile kısılır. ============================================================================= */ .ui-form { display: flex; flex-direction: column; gap: var(--ui-sp-3); max-width: 560px; } .ui-form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-sp-3); flex-wrap: wrap; margin-top: 2px; } .ui-form .mud-input-control { margin-top: 0; margin-bottom: 0; } /* Form tipografisi — tek boy/kalınlık (etiket boyutu MudBlazor'da bırakılır: outlined notch bozulmasın). */ .mud-input-slot input, .mud-input-slot textarea { font-size: var(--ui-fs); font-weight: var(--ui-fw-normal); } .ui-form .mud-input-helper-text { font-size: var(--ui-fs-xs); } .ui-form .mud-typography-subtitle2 { font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); } .ui-form .mud-typography-body2 { font-size: var(--ui-fs-sm); } /* Placeholder + boş-durum etiketi gerçek (yazılan) metinle AYNI boy — "placeholder daha büyük" sorunu. MudBlazor'da boş-durum etiketinin font'u .mud-input-label-inputcontrol (1rem) sınıfında; float transform scale(.75) ile yapıldığından font-size'ı .9rem'e çekmek notch'u BOZMAZ. */ .mud-input-slot input::placeholder, .mud-input-slot textarea::placeholder { font-size: var(--ui-fs); opacity: .55; } .ui-form .mud-input-label-inputcontrol { font-size: var(--ui-fs) !important; } /* ============================================================================= 7.5 SEGMENT SEÇİCİ (.ui-seg) — MOD/KAPSAM seçimi (24.07.2026) İki-üç durumlu seçim (ör. "Geçmiş | Gelecek") BUTON DEĞİLDİR: eylem yapmaz, kapsam değiştirir. Butonla aynı çizilirse kullanıcı "hangisi eylem" ayıramıyor (saha). Görsel dil .ui-tabs ile aynı: gri kap, aktif = beyaz + marka alt çizgi + kalın. ============================================================================= */ /* Seçili = AÇIK GRİ tint zemin (surface-3) + koyu kalın yazı + altta MAVİ çizgi; seçilmemiş = beyaz. (Karar yolculuğu 24.07.2026: v1 "aktif beyaz/pasif gri" ters bulundu → v2 marka-900 koyu zemin fazla koyu bulundu → v3 KARAR: zemin = eski kabın grisi.) */ /* Segment seçicinin ADI — seçicinin ÜSTÜNDE, ortalı ("Fatura", "Sipariş", "Sahiplik"). MudBlazor alanları etiketini kendi içinde taşır, segment seçici taşımaz → adlandırılmadığında iki seçici yan yana "neyin seçicisi?" sorusunu doğuruyordu. ⚠️ ETİKET NEDEN YANDA DEĞİL, ÜSTTE (kullanıcı kararı 05.08.2026): yan yazıldığında filtre çubuğunun `align-items: flex-end` hizası yüzünden seçicinin ALTINA kayıyordu ve her etiket için ayrı telafi (margin) gerekiyordu — kırılgan. Üstte+ortalı yerleşim hizayı seçicinin kendisine bırakır, telafiye gerek kalmaz ve etiket adlandırdığı gruba görsel olarak bağlanır. Böylece birden çok seçici TEK SATIRA sığar (önce "ERP'de" gibi bir grup öncüsü + ikinci satır gerekiyordu; öncü kaldırıldı — her etiket kendi grubunu zaten adlandırıyor). */ .ui-seg-group { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; } .ui-seg-cap { white-space: nowrap; line-height: 1.2; /* Aile AÇIKÇA verilir: `button` kuralı `!important` ile korunurken (§ üstte) düz metin MudBlazor'ın global gövde fontuna düşüyor → etiket, hemen altındaki butonlardan FARKLI yazı tipinde çıkıyordu (ölçüldü 05.08.2026: etiket "Helvetica Neue", butonlar "Roboto"). Etiket adlandırdığı seçiciyle aynı tipografide olmalı. */ font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); } .ui-seg { display: inline-flex; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); overflow: hidden; } .ui-seg-item { border: none; border-left: 1px solid var(--ui-line); background: transparent; padding: 6px 14px; font: inherit; font-size: var(--ui-fs); font-weight: var(--ui-fw-medium); color: var(--ui-ink-2); cursor: pointer; line-height: 1.2; white-space: nowrap; } .ui-seg-item:first-child { border-left: none; } .ui-seg-item:hover:not(.on) { background: var(--ui-surface-2); color: var(--ui-ink); } .ui-seg-item.on { background: var(--ui-surface-3); color: var(--ui-ink); font-weight: var(--ui-fw-bold); box-shadow: inset 0 -3px 0 0 var(--ui-brand); } .ui-seg-item:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; } /* Filtre çubuğunda alan kutuları/butonlarla ALTTAN hizalı (buton kuralıyla aynı telafi). */ .ui-filterbar .ui-seg { margin-bottom: 6px; } /* Başlıklı grupta telafi GRUBUN kendisine uygulanır — seçiciye ayrıca uygulanırsa etiketle arasındaki boşluk açılır ve etiket seçiciden kopuk görünür. */ .ui-filterbar .ui-seg-group { margin-bottom: 6px; } .ui-filterbar .ui-seg-group .ui-seg { margin-bottom: 0; } /* ============================================================================= 7.6 FİLTRE DOCK'U (.ui-filterdock) — açılır/kapanır parametre alanı (24.07.2026) Kapalı: tek satır ÖZET ("Geçmiş (Geciken) • 24.07.2026 • 30 gün") + aşağı ok. Açık: altında normal .ui-filterbar içerikleri (kart dokusu dock'tan gelir). Mobil uygulama hissi: seçim yap → Uygula → kapanır; grid'e dikey alan kalır. ============================================================================= */ .ui-filterdock { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); /* sp-3 (01.08.2026): filtre↔toolbar mesafesi, toolbar↔grid mesafesinden AÇIKÇA büyük olmalı — toolbar grid'in eylem şeridi, filtrenin değil (yakınlık ilkesi). Ölçülen: 12px ↔ 7px. sp-2 denendi, loading çubuğunun payıyla birlikte ikisi EŞİT görünüyordu (kullanıcı bildirdi). */ box-shadow: var(--ui-sh-1); margin-bottom: var(--ui-sp-3); overflow: hidden; } .ui-filterdock-head { display: flex; align-items: center; gap: var(--ui-sp-2); width: 100%; border: none; background: transparent; padding: 7px var(--ui-sp-3); font: inherit; font-size: var(--ui-fs); color: var(--ui-ink); cursor: pointer; text-align: left; } .ui-filterdock-head:hover { background: var(--ui-surface-2); } .ui-filterdock-head .mud-icon-root { color: var(--ui-ink-2); font-size: 1.1rem; } /* ⚠️ `inline-flex` DEĞİL `block` (01.08.2026, mobil ölçüm): `text-overflow: ellipsis` flex KAPSAYICIDA çalışmaz — kırpma flex ÖĞELERİNE uygulanmaz. Sonuç: dar ekranda özet "…" olmadan sert kesiliyordu ("Yalnız bekleyenler" → "Yal") ve bozuk görünüyordu. Blok + nowrap ile satır içi içerik normal şekilde kırpılır; dikey ortalama zaten `.ui-filterdock-head`'in flex'inden gelir. */ .ui-filterdock-sum { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--ui-fw-medium); } .ui-filterdock-sum .sep { color: var(--ui-ink-3); font-size: 1.1em; padding: 0 5px; } .ui-filterdock-chev { margin-left: auto; flex-shrink: 0; } /* Dock içindeki filtre çubuğu KENDİ kart dokusunu bırakır (çift çerçeve olmasın); alan/buton hizalama kuralları .ui-filterbar'dan aynen çalışır. */ .ui-filterdock .ui-filterbar { border: none; border-radius: 0; box-shadow: none; margin: 0; border-top: 1px solid var(--ui-line-soft); } /* ============================================================================= 8. FİLTRE ÇUBUĞU (.ui-filterbar) — UI_STANDARD §2.1 Beyaz kart; alan = SABİT 150px flex öğesi (satırı DOLDURMAZ). Tarih = MudDatePicker (yüzen etiket, küçük takvim ikonu). Alttan hizalı (flex-end). Uç eylem (Yazdır) en sağa. ============================================================================= */ .ui-filterbar { display: flex; align-items: flex-end; gap: var(--ui-sp-2); flex-wrap: wrap; background: var(--ui-surface); padding: var(--ui-sp-2) var(--ui-sp-3); border: 1px solid var(--ui-line); border-radius: var(--ui-r); /* sp-3 → sp-2 (24.07.2026): çubuk grid'e uzak, header'a yakın duruyordu — dikey ritim eşitlendi. */ margin-bottom: var(--ui-sp-2); box-shadow: var(--ui-sh-1); } /* Çubuktaki BUTON yazısı alan/checkbox yazısıyla AYNI boy ve düz aralıklı — "farklı font" hissi MudButton'ın küçük boyu (.8125rem) + letter-spacing'inden geliyordu (24.07.2026). */ .ui-filterbar .mud-button-root { font-size: var(--ui-fs); letter-spacing: normal; } .ui-filterbar .mud-input-control { margin: 0; } /* Değer + etiket fontu sayfa gövdesiyle AYNI — büyük görünmesin. */ .ui-filterbar input, .ui-filterbar .mud-input-slot, .ui-filterbar .mud-input-label, .ui-filterbar .mud-input-label-inputcontrol { font-size: var(--ui-fs) !important; } /* Alt yardım/hata satırı yer kaplamasın (kutu = görünür yükseklik). */ .ui-filterbar .mud-input-helper-text { display: none; } /* Alan YÜKSEKLİĞİ butonlarla uyumlu (dense outlined ~40px fazla → ~36px): dikey dolguyu azalt. */ .ui-filterbar .mud-input.mud-input-outlined .mud-input-slot, .ui-filterbar .mud-input-outlined input { padding-top: 6px !important; padding-bottom: 6px !important; } /* Tarih alanı: sarmalayıcı div SABİT 150px flex öğesi → BÜYÜMEZ, satırı doldurmaz; picker içi doldurur. */ .ui-filter-field { flex: 0 0 150px; } /* Çoklu-seçim / arama alanı: "3 şirket", "2 tür", "Ara (belge no / ETTN / VKN…)" 150px'e sığmaz ve metin kırpılır. 31.07.2026'da EInvoice.UI'ın sayfa-kapsamlı CSS'inden BURAYA taşındı (§0: `.ui-*` kuralları platformdadır; orada "sıradaki platform bump'ında taşınmalı" notuyla duruyordu). */ .ui-filter-field-wide { flex: 0 0 210px; } .ui-filter-field .mud-picker, .ui-filter-field .mud-input-control { width: 100% !important; min-width: 0 !important; } /* Takvim ikonu KÜÇÜK (varsayılan ~24px çok büyük) + adornment dolgusu daralt. */ .ui-filterbar .mud-input-adornment .mud-icon-root { font-size: 18px !important; } .ui-filterbar .mud-input-adornment .mud-button-root { padding: 3px !important; } /* Uç eylemi en sağa iten kural FLEX ÖĞESİNE yazılır — `.mud-button-root` şartı YOKTUR. ⚠️ 01.08.2026 (canlı ölçüm): sınıf iki farklı şekilde veriliyor — doğrudan butona (EInvoice giden kontrol: ``) ya da butonu saran MudTooltip'e (BankRecon mutabakat: `` → `.mud-tooltip-root`). Eski `.ui-filter-print.mud-button-root` seçicisi İKİNCİ hâlde hiç eşleşmiyordu: "Bankadan Çek / Yeniden Hesapla" sağa gitmiyor, tarih alanlarına yapışık duruyordu ve sağda boşluk kalıyordu. Aynı tuzağın kardeşi `.ui-check`te de yaşandı (aşağıda) — kural: çubuğun DOĞRUDAN çocuğunu hedefle. ⚠️ TOOLTIP'TE SINIF `Class` İLE VERİLMEZ: MudBlazor `MudTooltip.Class`'ı tooltip BALONUNA uygular; flex öğesi olan sarmalayıcı için `RootClass` kullanılır. Ölçümde flex öğesinin sınıfı "mud-tooltip-root mud-tooltip-inline" çıktı — `ui-filter-print` DOM'da hiç yoktu, yani seçiciyi düzeltmek TEK BAŞINA yetmedi; razor tarafı da `RootClass`'a geçirildi. */ .ui-filterbar > .ui-filter-print { margin-left: auto; } /* MudDatePicker kutusunun ALTINDA kalan küçük rezerve boşluğu telafi: butonları o kadar yukarı al → buton alt kenarı tarih KUTUSUNUN alt çizgisiyle aynı hizaya gelir (flex-end). */ .ui-filterbar .ui-btn.mud-button-root, .ui-filterbar .ui-btn-primary.mud-button-root { margin-bottom: 6px; } /* Çubuktaki onay kutusu, satırdaki BUTON ve ALAN KUTUSU ile AYNI dikey merkezde durmalı. ⚠️ CANLI ÖLÇÜM (Chrome CDP): buton merkezi 172.7 · alan kutusu 172.5 · checkbox 179 → 6.4px AŞAĞIDA kalıyordu. Sebep: çubuğun flex öğesi `.ui-check` DEĞİL, onu saran `.mud-tooltip-root`; iç öğeye verilen margin-bottom öğeyi yerinden oynatmaz (yalnız sarmalayıcıyı büyütür) → hizalama kuralı SARMALAYICIYA yazılır. */ .ui-filterbar > .mud-tooltip-root, .ui-filterbar > .ui-check { display: inline-flex; align-items: center; height: 31px; margin-bottom: var(--ui-sp-1); } /* ============================================================================= 9. ONAY KUTUSU / LOADING / KPI ============================================================================= */ /* Toolbar/filtre onay kutuları (MudCheckBox) — etiket, satırdaki ALANLARLA birebir aynı boyut ve renkte. ⚠️ TUZAK — ata öğeye font-size yazmak İŞE YARAMAZ: MudBlazor etikete `.mud-typography-body1` basar ve font-size/aile/kalınlık/letter-spacing'i AÇIKÇA tanımlar → miras kazanmaz. Etiketin KENDİSİ hedeflenmeli. */ .ui-check .mud-checkbox-span, .ui-check .mud-typography { font-size: var(--ui-fs); font-weight: var(--ui-fw-normal); line-height: 1.2; letter-spacing: normal; color: var(--ui-ink); } /* Kutunun kendisi: .mud-icon-button varsayılanı padding:12px + 1.5rem ikon → satırı şişirir. */ .ui-check .mud-icon-button { padding: 2px; } .ui-check .mud-icon-root { font-size: 18px; } .ui-check .mud-checkbox { gap: 3px; } /* Loading standardı — ince belirsiz çubuk; kapalıyken görünmez ama yeri korunur (layout zıplamaz). Alt boşluk sp-1: üst bloğun sp-1'i ile birlikte toplam ~sp-2 → dikey ritim bozulmaz (24.07.2026). */ /* ⚠️ ALT BOŞLUK YOK (01.08.2026): bu çubuk toolbar ile grid'in ARASINDA duruyor ve kapalıyken de (`visibility:hidden`) yer kaplıyor → toolbar↔grid mesafesi 4+3+4 = 11px'e çıkıp filtre↔toolbar'ın (8px) ÜSTÜNE geçiyordu. "Toolbar gride yakın" kuralı yalnız margin'lere bakınca doğru görünüyor ama araya giren bu 7px hesaba katılmazsa yanlış sonuç verir — mesafe ÖLÇÜLEREK doğrulanır (FIELD-19). */ .ui-loading { height: 3px; border-radius: 2px; margin: 0; } .ui-loading-off { visibility: hidden; } /* Sıkı sayfa modifikatörü (opt-in): toolbar + loading çubuğu grid'e daha yakın. */ .ui-tight .ui-toolbar { margin-bottom: 2px; } .ui-tight .ui-loading { margin: 0 0 2px; } /* ============================================================================= 10. SOL MENÜ (drawer) + MOBİL KENAR BOŞLUKLARI (24.07.2026) ============================================================================= */ /* Sol menü İNCE tipografi: menü yazısı gövde-altı boyda, ikonlar orantılı → daraltılmış drawer'da (tema DrawerWidthLeft, ArtunTheme) uzun Türkçe başlıklar sığar. */ .mud-drawer .mud-nav-link { min-height: 34px; } .mud-drawer .mud-nav-link .mud-nav-link-text { font-size: var(--ui-fs-sm); } .mud-drawer .mud-nav-link .mud-icon-root { font-size: 1.15rem; } .mud-drawer .mud-nav-group .mud-nav-group-title .mud-typography { font-size: var(--ui-fs-sm); } /* Mobil: sol/sağ dış boşluk DAR — küçük ekranda yatay alan veriye kalsın. Sol menü satırları da SIKI (24.07.2026 saha geri bildirimi: "satır araları çok fazla"). */ @media (max-width: 700px) { .mud-container { padding-left: var(--ui-sp-2) !important; padding-right: var(--ui-sp-2) !important; } .mud-drawer .mud-nav-link { min-height: 30px; padding-top: 2px; padding-bottom: 2px; } /* FORM mobilde tam genişlik: 560px tavanı küçük ekranda sağda ölü alan bırakıyordu. Aksiyon satırı tek satırda kalır (Kaydet sağda), sarmaz. */ .ui-form { max-width: 100%; } .ui-form-actions { flex-wrap: nowrap; } /* Filtre çubuğu mobilde SARAR (toolbar'ın tersi): eylem şeridi değil VERİ GİRİŞİdir, alan kutusu yatay kaydırmada okunamaz. ⚠️ SARMAK ≠ HER ÖĞEYİ TAM GENİŞLİK YAPMAK (01.08.2026, kullanıcı + ölçüm). Önceki kural her alanı ve her butonu `flex: 1 1 100%` yapıyordu → banka mutabakatında 6 öğe = 6 SATIR, oysa genişlik yan yana yetiyordu. Doğrusu: her bileşen kendi TABAN genişliğiyle (flex-basis) sarar; satıra kaç tane sığacağını EKRAN belirler. 390px'te kullanılabilir ~358px: · tarih (140 taban) → 2 tane (140·2+8 = 288) · tablette 3 tane (140·3+16 = 436) · buton (%50-4) → 2 tane yan yana · şirket seçici + onay kutusu → tam satır (uzun metin, kırpılmasın) Sonuç: 6 satır → 4 satır. Taban ölçüler masaüstündeki `flex: 0 0 px` ile AYNI aileden (150/210) — mobil ayrı bir tasarım değil, aynı bileşenin dar ekrandaki hâli. */ .ui-filterbar { flex-wrap: wrap; } .ui-filterbar .ui-filter-field { flex: 1 1 140px; } /* Geniş alan (çoklu seçim / arama): kalan yeri alır ama ONAY KUTUSUNA yer bırakır. 160 taban → yanına ~180px'lik bir onay kutusu sığar (160+8+180 = 348 ≤ ~358 kullanılabilir). */ .ui-filterbar .ui-filter-field-wide { flex: 1 1 160px; } /* Onay kutusu KENDİ İÇERİĞİ kadar yer kaplar ve geniş alanın YANINA oturur (01.08.2026, kullanıcı): tam satır verilince tek başına bir satır yiyor ve ortada asılı duruyordu. Etiket kırpılmasın diye küçülmez (`flex-shrink: 0`); sığmazsa alta iner — sarma zaten çubuğun davranışı. */ .ui-filterbar > .ui-check { flex: 0 0 auto; } /* Butonlar İKİŞER: tek başına tam satır kaplamaları dikey alanı boşa harcıyordu. Sarmalayıcı tooltip flex öğesi olduğundan buton onu doldurmalı, yoksa yarım kutuda sola yapışır. */ .ui-filterbar > .mud-tooltip-root { flex: 1 1 calc(50% - var(--ui-sp-1)); } .ui-filterbar > .mud-tooltip-root > .mud-button-root { width: 100%; } /* Uç eylem masaüstünde margin-left:auto ile en sağdaydı; tek satıra düşen mobilde bu kural onu ekranın sağına iterek birincil butondan koparıyordu → sarmada sıfırlanır. */ .ui-filterbar .ui-filter-print { margin-left: 0; } /* Dokunma hedefi: Size.Small butonlar masaüstünde ~30px — parmak için taban 36px. Filtre çubuğu/dock'u da dahil: orası da parmakla kullanılan bir eylem yüzeyi (§8). */ .ui-toolbar .mud-button-root, .ui-toolbar .mud-icon-button, .ui-ctxbar .mud-button-root, .ui-form-actions .mud-button-root, .ui-filterbar .mud-button-root, .ui-filterdock-head { min-height: 36px; } /* Header mobilde KESİN tek satır: alt-bilgi gizli (içeriği zaten ℹ dokümanında) — ikon + başlık + ℹ kalır; "yazılar ikonun altına düştü" sarması biter. */ .ui-header-icon + div .ui-header-sub { display: none; } /* GERİ BUTONU mobilde İKON-ONLY (25.07.2026, saha): metinli buton ("Cari Kartlar") satıra sığmayıp alta kayıyor, header iki satıra bölünüyordu. Mobilde metin gizlenir, ok ikonu üstte sağda kalır → header tek satır. Erişilebilirlik: buton title/aria taşıdığı sürece metin gizlemek güvenli; ok tek başına "geri" evrensel işaretidir. */ .ui-header-back.mud-button-root { min-width: 38px; min-height: 38px; padding-left: 8px; padding-right: 8px; font-size: 0; /* metin DÜZ METİN düğümü — display:none ile gizlenemez */ /* Ok EN SAĞDA kalır (kullanıcı 25.07.2026): başlığın yanına çekmek denendi, beğenilmedi — geri eylemi sağ üst köşede aranıyor. */ margin-left: auto; } .ui-header-back.mud-button-root .mud-icon-root { font-size: 1.25rem; } .ui-header-back.mud-button-root .mud-button-icon-start { margin: 0; } /* HEADER NAVİGASYONU mobilde İKON-ONLY (01.08.2026, kullanıcı kararı — geri butonuyla AYNI desen). Ölçüm (390px, banka mutabakatı): metinli iki buton satıra sığmayıp `flex-wrap` ile ALT SATIRA düşüyor, header 46px yerine 84.8px oluyordu — dikey alan grid'in (UI_GRID §1/§2.5). ⚠️ Buton `title` TAŞIMALI: metin gizlendiğinde anlamı yalnız ikon veriyor ve mobilde hover yok (uzun basış ipucu gösterir). Bu yüzden kural UI_GRID §1'de "title zorunlu" ile birlikte yazılıdır. */ .ui-header-nav { flex-wrap: nowrap; gap: 4px; flex-shrink: 0; } .ui-header-nav .mud-button-root { min-width: 38px; min-height: 38px; padding-left: 8px; padding-right: 8px; font-size: 0; /* metin DÜZ METİN düğümü — display:none ile gizlenemez */ } .ui-header-nav .mud-button-root .mud-icon-root { font-size: 1.25rem; } .ui-header-nav .mud-button-root .mud-button-icon-start { margin: 0; } /* Başlık kısalabilsin: nav sabit genişlikte kaldığı için uzun başlık taşırmasın. */ .ui-header-icon + div { min-width: 0; } .ui-header-icon + div .ui-header-h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* SEKMELER mobilde: ok düğmeleri YERİNE serbest yatay kaydırma (kullanıcı 25.07.2026 — "sol sağ çok boşluk ve ok işaretleri"). MudBlazor sığmayınca iki ok düğmesi basıyor; bunlar hem yer yiyor hem her dokunuşta tek sekme kaydırıyor. Parmakla kaydırma daha hızlı ve tanıdık: oklar gizlenir, şerit kayar, sekme kenara HİZALANIR (scroll-snap). */ /* ⚠️ ANAHTAR: MudBlazor kaydırmayı `.mud-tabs-tabbar-content`'e OVERFLOW:HIDDEN koyup JS ile yönetiyor → yalnız `-inner`'a `overflow-x:auto` vermek İŞE YARAMAZ (denendi, ölçüldü: içerik 435px iken scrollWidth 260'ta takılı kaldı, parmakla kaymadı). Kaydırmayı serbest bırakmak için content'in overflow'u AÇILIR ve genişliği içeriğe bırakılır; ancak o zaman `-inner` gerçek kaydırma kabı olur. */ .ui-tabs .mud-tabs-scroll-button { display: none; } .ui-tabs .mud-tabs-tabbar-inner { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ui-tabs .mud-tabs-tabbar-inner::-webkit-scrollbar { display: none; } .ui-tabs .mud-tabs-tabbar-content { overflow: visible; flex: 0 0 auto; width: max-content; } .ui-tabs .mud-tabs-tabbar-wrapper { width: max-content; } .ui-tabs .mud-tab { scroll-snap-align: start; min-width: auto; padding-left: var(--ui-sp-3); padding-right: var(--ui-sp-3); } /* Kaydırma ipucu ORTAK DESENDE (aşağıda) — toolbar ile sekme şeridi aynı görünümü paylaşır. */ /* TOOLBAR mobilde TEK SATIR eylem şeridi — GRIDİN ÜSTÜNDE kalır (alt-sabit denendi, kullanıcı üstte istedi 24.07.2026). Sığmayan eylem sarmaz, şerit İÇİNDE yatay kayar. */ .ui-toolbar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; } .ui-toolbar-left { flex-wrap: nowrap; } .ui-toolbar .mud-button-root { white-space: nowrap; flex-shrink: 0; } .ui-toolbar-right { margin-left: auto; flex-shrink: 0; } /* Sağ ikon grubu (Excel / Kolonlar / Sütun genişliği) — ÖLÇÜLDÜ 31.07.2026, saha geri bildirimi "gri zemin yüksekliği çok fazla": dokunma hedefi kuralı yalnız `min-height` veriyordu → buton 36×24.8px (dar-uzun dikdörtgen) oluyor, üstüne pill'in 2px dolgusu binince gri zemin 40px'e çıkıyordu; yanındaki KPI 24.6px olduğundan şerit dengesiz görünüyordu. Düzeltme: hedef KARE olur (36×36 — 36 yükseklik zaten §8'in tabanı) ve pill mobilde kendi dolgusunu bırakır → gri zemin tam 36px, butonu sarar, şişmez. */ .ui-toolbar-right { padding: 0; } .ui-toolbar-right .mud-icon-button { min-width: 36px; } /* KAYDIRMA İPUCU (24.07.2026): sağ kenarda hafif sağa "nabız atan" ok — şeridin devamı olduğunu söyler (yarım kesilen ikonla birlikte). Scroll-driven animation: kaydırdıkça SÖNER; içerik TAŞMIYORSA timeline çalışmaz → taban opacity 0 = ok hiç görünmez. Desteklemeyen tarayıcıda da güvenli: animasyon uygulanmaz, ok görünmez. */ } /* ============================================================================= KAYDIRMA İPUCU — TEK DESEN (25.07.2026, kullanıcı: "ikisi de aynı olsun") ----------------------------------------------------------------------------- Yatay kayan HER şerit aynı ipucunu kullanır: grid toolbar'ı ve sekme şeridi. Önceden ikisi ayrıydı (biri koyu nötr + yanıp sönme + kenar soldurma, diğeri yok). Kurallar (hepsi saha geri bildirimiyle oturdu): · İKİ YÖNLÜ — solda "‹", sağda "›": kullanıcı her iki yöne de kaydırabileceğini görsün. · Zemin BUTON RENGİ (--ui-brand) + beyaz ok: eylem yüzeyi diliyle akraba. · Ok DAİRENİN ORTASINDA: flex ortalama + line-height:1 (grid+place-items ile karakter baseline'dan dolayı yukarı kayıyordu). · KENAR SOLDURMA YOK: içeriği açan gölge gereksiz bulundu, kaldırıldı. · YANIP SÖNME YOK: dikkat dağıtıyordu; sade opaklık geçişi yeterli. · Taşma yoksa GÖRÜNMEZ: taban `opacity:0`; scroll-driven animasyon ancak gerçek taşma varsa çalışır (desteklemeyen tarayıcıda da güvenli — ok hiç çıkmaz). ============================================================================= */ @media (max-width: 700px) { .ui-toolbar::before, .ui-toolbar::after, .ui-tabs .mud-tabs-tabbar-inner::before, .ui-tabs .mud-tabs-tabbar-inner::after { position: sticky; flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--ui-r-pill); /* OK ARTIK YAZI DEĞİL, ÇİZİM (27.07.2026 — kullanıcı: "ok yuvarlağın altında görünüyor"). Sebep: `content:"›"` bir GLİF; yazı tipi onu em kutusunun ortasına değil, rakam/küçük harf hizasına göre yerleştirir → flex ortalama em kutusunu ortalasa bile MÜREKKEP aşağıda kalır. Daha önce ters yönde de yaşandı (grid+place-items ile yukarı kayıyordu, 25.07.2026) — yani sorun ortalama yöntemi değil, glifin kendisiydi; her denemede yazı tipi metriğine bağımlı kalıyorduk. SVG maskesi geometrik olarak ortalanır: yazı tipinden BAĞIMSIZ, iki yönde de kesin. Renk `background-color`'dan gelir → maske sayesinde token'a bağlı kalır (§0: gömülü renk yok). */ background-color: var(--ui-brand); box-shadow: var(--ui-sh-2); content: ""; /* z-index ŞART: sekmeler/butonlar sözde-öğeden sonra boyandığı için ipucu ALTLARINDA kalıyordu (kullanıcı 25.07.2026: "soldaki ok tab menünün altında kalıyor"). */ z-index: 2; opacity: 0; pointer-events: none; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(nearest inline); } /* Ok çizimi ORTAK: 24'lük viewBox'ta chevron, geometrik merkezde. Beyaz (`%23fff`) SVG'ye gömülüdür — `--ui-brand-ink` zaten "marka dolgusu üzerindeki okunur renk" rolüdür ve bir ikonun zeminiyle kontrastı tema değişse de korunmalıdır (§0 Durum/rol token mantığı). */ .ui-toolbar::before, .ui-toolbar::after, .ui-tabs .mud-tabs-tabbar-inner::before, .ui-tabs .mud-tabs-tabbar-inner::after { background-repeat: no-repeat; background-position: center center; background-size: 11px 11px; } /* SOL: başta gizli, kaydırdıkça belirir ("geri dönebilirsin"). */ .ui-toolbar::before, .ui-tabs .mud-tabs-tabbar-inner::before { left: 0; order: -1; margin-right: var(--ui-sp-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E"); animation-name: ui-scrollhint-left; } /* SAĞ: başta görünür, sona gelince söner ("devamı var"). */ .ui-toolbar::after, .ui-tabs .mud-tabs-tabbar-inner::after { right: 0; margin-left: var(--ui-sp-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); animation-name: ui-scrollhint-right; } } /* ← @media (max-width: 700px): ipucu YALNIZ mobilde. Masaüstünde toolbar sarıyor, sekmeler sığıyor; oradaki sözde-öğeler opaklık 0 olsa bile 2×22px yer kaplardı. */ /* Kaydırma ipucu animasyonları — scroll-driven (zaman değil, KAYDIRMA konumu sürer). */ @keyframes ui-scrollhint-left { from { opacity: 0; } 12% { opacity: .95; } to { opacity: .95; } } @keyframes ui-scrollhint-right { from { opacity: .95; } 88% { opacity: 0; } to { opacity: 0; } } /* KPI rozetleri — rapor toolbar'ının solunda özet göstergeler. TEK SATIR: "Bulgu: 44" (kullanıcı kararı 31.07.2026). Önceden etiket üstte / değer altta iki satırdı; rozet toolbar'ın diğer öğelerinden ~10px yüksek duruyor ve şeridi kalınlaştırıyordu. Yan yana dizilim hem alçak hem doğal okunur — ":" ayracı etiketten CSS ile gelir (markup'ta ayrı düğüm yok; sayfalar `Bulgu44` yazmaya devam eder → 4 sayfanın hiçbiri değişmedi). */ .ui-kpi { display: inline-flex; flex-direction: row; align-items: baseline; gap: 5px; line-height: 1.15; padding: 3px var(--ui-sp-2); border: 1px solid var(--ui-line); border-radius: var(--ui-r-sm); background: var(--ui-surface); } .ui-kpi-label { font-size: var(--ui-fs-xs); color: var(--ui-ink-3); white-space: nowrap; } .ui-kpi-label::after { content: ":"; } .ui-kpi-val { font-size: var(--ui-fs); font-weight: var(--ui-fw-bold); color: var(--ui-ink); } /* Uyarı tonu (ör. kur farkı kalıntısı) — durum rengi markadan bağımsız. */ .ui-kpi-warn { background: var(--ui-warn-bg); border-color: var(--ui-warn); } .ui-kpi-warn .ui-kpi-label, .ui-kpi-warn .ui-kpi-val { color: var(--ui-warn); } /* ============================================================================= 10. SAYFA İÇİ