/* ============================================================ Tema Ayarları — kullanıcı tercih merkezi (6 sekme) İki bölümden oluşur: 1) Sayfanın kendi düzen sınıfları (.segmented-*, .tema-*) 2) TÜM UYGULAMAYA uygulanan tercih kancaları (html[data-ui-*], html[data-a11y-*]) — bu dosya index.html'de koşulsuz yüklendiği için sayfa açık olmasa da geçerlidir; kancaları core/ui-prefs.js üzerine yazar. Renk/boşluk/yarıçap DEĞERİ YOK — hepsi core/variables.css token'ı. ============================================================ */ /* ── Segmented (radio grubu) — tasarımın taşıyıcı kontrolü ───────── */ .segmented-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--space-2); } .segmented-option { position: relative; display: flex; align-items: center; justify-content: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; user-select: none; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .segmented-option:hover { border-color: var(--brand-light); } .segmented-option input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; border: 0; } .seg-content { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); transition: color .12s; } .seg-content svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--text-muted); } .segmented-option.is-checked, .segmented-option:has(input:checked) { border-color: var(--brand); background: var(--brand-glow); box-shadow: 0 0 0 3px var(--brand-glow); } .segmented-option.is-checked .seg-content, .segmented-option.is-checked .seg-content svg, .segmented-option:has(input:checked) .seg-content, .segmented-option:has(input:checked) .seg-content svg { color: var(--brand); } .segmented-option:has(input:focus-visible) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); } /* Renk noktası (Ana Renk seçenekleri) */ .seg-dot { width: 14px; height: 14px; border-radius: var(--radius-full); flex: 0 0 auto; border: 1px solid var(--border-strong); } .segmented-option[disabled], .segmented-option.is-disabled { opacity: .55; cursor: not-allowed; } /* ── Sayfa düzeni ────────────────────────────────────────────────── */ .tema-page { width: 100%; max-width: none; } .tema-tabs { margin-bottom: var(--space-4); flex-wrap: wrap; gap: 6px; } /* Alan ızgarası — dar ekranda kendiliğinden tek kolona düşer */ .tema-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); } /* Bölüm içi ayraç (üstte ince çizgi) */ .tema-sub { padding-top: var(--space-4); border-top: 1px solid var(--border); margin-top: var(--space-4); } /* Yan yana iki select (sıralama alanı + yön) */ .tema-row { display: flex; gap: var(--space-2); } .tema-row > .input { flex: 1 1 auto; min-width: 0; } .tema-row .tema-dir { flex: 0 0 118px; max-width: 130px; } .tema-row .tema-dir .input { width: 100%; } .tema-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--space-4); } /* Ürün Listesi sekmesi: solda kontroller, sağda canlı önizleme */ .tema-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--space-6); align-items: start; } /* ── Canlı önizleme paneli ───────────────────────────────────────── */ .tema-prev { position: sticky; top: 76px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); } .tema-prev-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .tema-prev-title { font-size: var(--fs-sm); font-weight: 800; color: var(--navy); } .tema-prev-head .badge { margin-left: auto; } .tema-prev-box { background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; } .tema-prev-th { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border); } .tema-prev-tr { display: flex; align-items: center; gap: var(--space-2); padding: 9px var(--space-3); font-size: 11px; border-bottom: 1px solid var(--border); } .tema-prev-tr:last-child { border-bottom: 0; } .tema-prev--compact .tema-prev-tr { padding-top: 5px; padding-bottom: 5px; } .tema-prev-img { width: 26px; height: 26px; flex: 0 0 auto; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .tema-prev-img img { width: 100%; height: 100%; object-fit: contain; } .tema-prev-name { flex: 1 1 auto; min-width: 0; } .tema-prev-n { font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tema-prev-c { font-size: 10px; color: var(--text-faint); } .tema-prev-cat { flex: 0 0 56px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tema-prev-price { flex: 0 0 72px; text-align: right; white-space: nowrap; } .tema-prev-stock { flex: 0 0 34px; text-align: right; color: var(--text-muted); } /* Kart modu */ .tema-prev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .tema-prev-card { background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; } .tema-prev-card-img { height: 64px; background: var(--surface-alt); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .tema-prev-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; } .tema-prev-card-body { padding: 6px var(--space-2) var(--space-2); font-size: 11px; } .tema-prev-foot { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); } /* ── Yapışkan kaydet çubuğu ──────────────────────────────────────── */ .tema-savebar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .tema-savebar-note { font-size: var(--fs-sm); color: var(--text-muted); flex: 1 1 240px; margin: 0; } .tema-savebar-ok { color: var(--green); font-weight: 700; font-size: var(--fs-sm); } /* ═══ TÜM UYGULAMAYA UYGULANAN TERCİH KANCALARI ═══════════════════ Değerleri core/ui-prefs.js üzerine yazar. Yalnız açıkça seçildiğinde devreye girer → varsayılan davranış değişmez. */ /* Görünüm → Davranış */ html[data-ui-motion="reduce"] *, html[data-ui-motion="reduce"] *::before, html[data-ui-motion="reduce"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html[data-ui-intro="0"] .page-intro { display: none; } /* Tablo başlığı VARSAYILAN olarak yapışkandır (tables.css) → tercih KAPATILDIĞINDA sökülür. Böylece anahtarın iki yönü de gerçek bir etki üretir. */ html:not([data-ui-stickyhead]) .data-table thead th { position: static; } /* Toplam satırını en altta sabitle (tercih) — yalnız tfoot varsa anlamlı. */ html[data-ui-stickytotals="1"] .data-table tfoot.tbl-totals td { position: sticky; bottom: 0; z-index: 1; } /* Listeler & Tablolar → Tablo davranışı */ html[data-ui-zebra="1"] .data-table tbody tr:nth-child(even) > td { background: var(--surface-alt); } html[data-ui-zebra="1"] .data-table tbody tr.is-clickable:hover > td { background: var(--row-hover); } /* Borç/alacak renklendirmesi — cari listeleri + cari ekstresi ORTAK sınıfları (.bal-credit borç, .bal-advance alacak; musteri.css'te tanımlı). Kapalıyken borç marka renginde kalır; açıkken kırmızıya döner (alacak zaten yeşil). */ html[data-ui-balcolor="1"] .bal-credit { color: var(--red); } /* Erişilebilirlik */ /* Yalnız token'ları birbirine bağlar → koyu tema kendiliğinden doğru çalışır. */ html[data-a11y-contrast="1"] { --border: var(--border-strong); --text-muted: var(--text); --text-faint: var(--text); } html[data-a11y-bold="1"] .money, html[data-a11y-bold="1"] .data-table td.col-num, html[data-a11y-bold="1"] .data-table td.col-num .money { font-weight: 700; } html[data-a11y-focus="1"] :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } html[data-a11y-targets="1"] .btn { min-height: 44px; } html[data-a11y-targets="1"] .btn--sm { min-height: 40px; } html[data-a11y-targets="1"] .check { padding: 10px 0; } html[data-a11y-targets="1"] .check input { width: 20px; height: 20px; } html[data-a11y-underline="1"] a:not(.btn) { text-decoration: underline; } @media (max-width: 640px) { .tema-prev { position: static; } .tema-savebar { padding: var(--space-3); } }