/* * 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) */ --omni-primary: #4d7fd4; --omni-primary-hover: #3d6cc0; --omni-primary-pressed: #2c5282; --omni-primary-on: #ffffff; --omni-success: #22c55e; --omni-warning: #f59e0b; --omni-danger: #ef4444; --omni-info: #38bdf8; --omni-accent: #7c3aed; /* Nötrler (kilitli) */ --omni-background: #f4f5f7; --omni-surface: #ffffff; --omni-on-surface: #0f172a; --omni-muted: #64748b; --omni-border: #e2e8f0; --omni-divider: rgba(15, 23, 42, 0.10); /* Spacing (8pt grid) — sabit, temayla değişmez */ --omni-space-1: 4px; --omni-space-2: 8px; --omni-space-3: 12px; --omni-space-4: 16px; --omni-space-6: 24px; --omni-space-8: 32px; --omni-space-12: 48px; /* Radius */ --omni-radius-input: 8px; --omni-radius-card: 12px; /* Tipografi */ --omni-font-family: 'Roboto', 'Inter', sans-serif; --omni-font-size-h1: 24px; --omni-font-size-h2: 18px; --omni-font-size-h3: 16px; --omni-font-size-body: 14px; --omni-font-size-caption: 12px; --omni-font-weight-regular: 400; --omni-font-weight-medium: 500; } /* ── OmniChip — durum rozeti (Seans 85) ─────────────────────────────── */ /* !important — MudBlazor.min.css'in td/span global stillerinin altta kalmasını garanti eder (Seans 85 — Geliştirici screenshot fix). */ .omni-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) */ .omni-chip-success { background: #16a34a; color: #ffffff; } .omni-chip-warning { background: #d97706; color: #ffffff; } .omni-chip-danger { background: #dc2626; color: #ffffff; } .omni-chip-info { background: #0284c7; color: #ffffff; } .omni-chip-primary { background: var(--omni-primary); color: #ffffff; } .omni-chip-muted { background: #94a3b8; color: #0f172a; } .mud-theme-dark .omni-chip-success { background: #22c55e; color: #052e16; } .mud-theme-dark .omni-chip-warning { background: #f59e0b; color: #1e1003; } .mud-theme-dark .omni-chip-danger { background: #ef4444; color: #2a0606; } .mud-theme-dark .omni-chip-info { background: #0ea5e9; color: #051e2e; } .mud-theme-dark .omni-chip-muted { background: #475569; color: #f1f5f9; } /* ── Dark tema override ─────────────────────────────────────────────── */ .mud-theme-dark { --omni-primary: #60a5fa; --omni-primary-hover: #3b82f6; --omni-primary-pressed: #2563eb; --omni-primary-on: #0f172a; --omni-success: #4ade80; --omni-warning: #fbbf24; --omni-danger: #f87171; --omni-info: #38bdf8; --omni-accent: #a78bfa; --omni-background: #0f172a; --omni-surface: #1e293b; --omni-on-surface: #f1f5f9; --omni-muted: #94a3b8; --omni-border: #334155; --omni-divider: rgba(255, 255, 255, 0.10); }