/* * OMNI Tasarım Sistemi v2 — CSS token'ları * docs/design/OMNI_Design_System_Spec_v2.md Bölüm 2'ye göre. * * Kullanım: MudBlazor dışında (ham HTML / app.css / sayfa-içi style) renk/spacing/radius * sabit yazılmaz; bu değişkenlerden okunur. Light/dark MudThemeProvider IsDarkMode'una * göre 'e eklenen 'mud-theme-light' / 'mud-theme-dark' class'ları ile otomatik * geçiş yapar. */ :root { /* ── Light tema (default) — Spec Bölüm 2.1 tablosu ──────────────── */ /* Semantik (kullanıcı bazlı tema değiştirebilir) */ --ikadro-primary: #4d7fd4; --ikadro-primary-hover: #3d6cc0; --ikadro-primary-pressed: #2c5282; --ikadro-primary-on: #ffffff; --ikadro-success: #22c55e; --ikadro-warning: #f59e0b; --ikadro-danger: #ef4444; --ikadro-info: #38bdf8; --ikadro-accent: #7c3aed; /* Nötrler (kilitli) */ --ikadro-background: #f4f5f7; --ikadro-surface: #ffffff; --ikadro-on-surface: #0f172a; --ikadro-muted: #64748b; --ikadro-border: #e2e8f0; --ikadro-divider: rgba(15, 23, 42, 0.10); /* Spacing (8pt grid) — sabit, temayla değişmez */ --ikadro-space-1: 4px; --ikadro-space-2: 8px; --ikadro-space-3: 12px; --ikadro-space-4: 16px; --ikadro-space-6: 24px; --ikadro-space-8: 32px; --ikadro-space-12: 48px; /* Radius */ --ikadro-radius-input: 8px; --ikadro-radius-card: 12px; /* Tipografi */ --ikadro-font-family: 'Roboto', 'Inter', sans-serif; --ikadro-font-size-h1: 24px; --ikadro-font-size-h2: 18px; --ikadro-font-size-h3: 16px; --ikadro-font-size-body: 14px; --ikadro-font-size-caption: 12px; --ikadro-font-weight-regular: 400; --ikadro-font-weight-medium: 500; } /* ── IkadroChip — durum rozeti (Seans 85) ─────────────────────────────── */ /* !important — MudBlazor.min.css'in td/span global stillerinin altta kalmasını garanti eder (Seans 85 — Geliştirici screenshot fix). */ .ikadro-chip { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 3px 12px !important; border-radius: 999px !important; /* tam pill */ font-size: 11px !important; font-weight: 600 !important; line-height: 1.4 !important; white-space: nowrap !important; vertical-align: middle !important; box-sizing: content-box !important; overflow: visible !important; height: auto !important; /* İçerik daralmasın, chip'ten taşmasın */ flex: 0 0 auto !important; min-width: max-content !important; width: max-content !important; } /* Beyaz metin için daha doygun zeminler (Seans 85 kontrast revize) */ .ikadro-chip-success { background: #16a34a; color: #ffffff; } .ikadro-chip-warning { background: #d97706; color: #ffffff; } .ikadro-chip-danger { background: #dc2626; color: #ffffff; } .ikadro-chip-info { background: #0284c7; color: #ffffff; } .ikadro-chip-primary { background: var(--ikadro-primary); color: #ffffff; } .ikadro-chip-muted { background: #94a3b8; color: #0f172a; } .mud-theme-dark .ikadro-chip-success { background: #22c55e; color: #052e16; } .mud-theme-dark .ikadro-chip-warning { background: #f59e0b; color: #1e1003; } .mud-theme-dark .ikadro-chip-danger { background: #ef4444; color: #2a0606; } .mud-theme-dark .ikadro-chip-info { background: #0ea5e9; color: #051e2e; } .mud-theme-dark .ikadro-chip-muted { background: #475569; color: #f1f5f9; } /* ── IkadroNoticeBar — tek satır uyarı/aksiyon şeridi (Seans 314, geri bildirim #16) ── Eskiden her uyarı ayrı bir MudAlert bandıydı ve üç uyarı ekranın üç satırını yerdi. Şerit aynı bilgiyi tek satırda taşır: solda fonksiyon ikonları, sağda uyarı ikonları, metin tooltip'te. */ .ikadro-notice-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 2px 4px; margin-bottom: 12px; border-bottom: 1px solid var(--ikadro-border); } .ikadro-notice-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .ikadro-notice-group-end { justify-content: flex-end; } .ikadro-notice-item { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px; padding: 0; line-height: 1; background: transparent; } .ikadro-notice-clickable { cursor: pointer; transition: background-color .12s ease, transform .12s ease; } .ikadro-notice-clickable:hover { transform: translateY(-1px); } .ikadro-notice-clickable:focus-visible { outline: 2px solid var(--ikadro-primary); outline-offset: 2px; } /* Renk semantiği chip paletiyle aynı; zemin yerine soft dolgu (şerit sakin kalsın) */ .ikadro-notice-success { color: #16a34a; background: rgba(22, 163, 74, .10); } .ikadro-notice-warning { color: #d97706; background: rgba(217, 119, 6, .12); } .ikadro-notice-danger { color: #dc2626; background: rgba(220, 38, 38, .12); } .ikadro-notice-info { color: #0284c7; background: rgba(2, 132, 199, .10); } .ikadro-notice-primary { color: var(--ikadro-primary); background: rgba(37, 99, 235, .10); } .ikadro-notice-muted { color: #64748b; background: rgba(100, 116, 139, .10); } .ikadro-notice-success.ikadro-notice-clickable:hover { background: rgba(22, 163, 74, .20); } .ikadro-notice-warning.ikadro-notice-clickable:hover { background: rgba(217, 119, 6, .22); } .ikadro-notice-danger.ikadro-notice-clickable:hover { background: rgba(220, 38, 38, .22); } .ikadro-notice-info.ikadro-notice-clickable:hover { background: rgba(2, 132, 199, .20); } .ikadro-notice-primary.ikadro-notice-clickable:hover { background: rgba(37, 99, 235, .20); } .ikadro-notice-muted.ikadro-notice-clickable:hover { background: rgba(100, 116, 139, .20); } .mud-theme-dark .ikadro-notice-success { color: #22c55e; background: rgba(34, 197, 94, .16); } .mud-theme-dark .ikadro-notice-warning { color: #f59e0b; background: rgba(245, 158, 11, .18); } .mud-theme-dark .ikadro-notice-danger { color: #ef4444; background: rgba(239, 68, 68, .18); } .mud-theme-dark .ikadro-notice-info { color: #0ea5e9; background: rgba(14, 165, 233, .16); } .mud-theme-dark .ikadro-notice-muted { color: #94a3b8; background: rgba(148, 163, 184, .16); } /* ── Dark tema override ─────────────────────────────────────────────── */ .mud-theme-dark { --ikadro-primary: #60a5fa; --ikadro-primary-hover: #3b82f6; --ikadro-primary-pressed: #2563eb; --ikadro-primary-on: #0f172a; --ikadro-success: #4ade80; --ikadro-warning: #fbbf24; --ikadro-danger: #f87171; --ikadro-info: #38bdf8; --ikadro-accent: #a78bfa; --ikadro-background: #0f172a; --ikadro-surface: #1e293b; --ikadro-on-surface: #f1f5f9; --ikadro-muted: #94a3b8; --ikadro-border: #334155; --ikadro-divider: rgba(255, 255, 255, 0.10); } /* ── S299 "Firma & Şubeler" hiyerarşik kademe zeminleri ───────────────────── İç içe seviyeleri (firma banka / şube / SGK dosyaları / şube banka) sol renk şeridi + hafif ton ile ayırır. Renkler semantik token'lardan; açık/koyu uyumlu. Tonlar kasıtlı düşük opaklık (görsel gürültü değil, nazik kademe ipucu). */ .ikadro-hier-section { border-radius: 8px; padding: 10px 14px; } .ikadro-hier-bank-company { border-left: 3px solid var(--ikadro-info); background: rgba(56, 189, 248, 0.06); } .ikadro-hier-branch { border-left: 3px solid var(--ikadro-primary); } .ikadro-hier-sgk { border-left: 3px solid var(--ikadro-warning); background: rgba(245, 158, 11, 0.07); } .ikadro-hier-bank-branch { border-left: 3px solid var(--ikadro-success); background: rgba(34, 197, 94, 0.07); } .mud-theme-dark .ikadro-hier-bank-company { background: rgba(56, 189, 248, 0.11); } .mud-theme-dark .ikadro-hier-sgk { background: rgba(245, 158, 11, 0.13); } .mud-theme-dark .ikadro-hier-bank-branch { background: rgba(34, 197, 94, 0.13); }