/* Orion tema tokenları — açık / koyu tema tek kaynak * * KURAL: Renk değeri doğrudan CSS dosyalarına YAZILMAZ; buradaki token * kullanılır. Yeni bir renk gerekiyorsa önce buraya token olarak eklenir, * hem açık hem koyu karşılığı tanımlanır. * * Tema, ile seçilir. Bootstrap 5.3 kendi * bileşenlerini bu öznitelikle zaten çeviriyor; buradaki bloklar Orion'a * özel yüzeyleri çevirir. * * Koyu blok `:root[data-bs-theme="dark"]` ile yazılır (özgüllük 0,2,0) — * böylece başka bir dosyadaki `:root` tanımı yükleme sırasından bağımsız * olarak koyu değeri EZEMEZ. */ /* ───────────────────────────────────────────────────────────────────── AÇIK TEMA (varsayılan) ───────────────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* ── Zemin katmanları ── */ --orion-canvas: #faf9f8; /* sayfa zemini */ --orion-surface: #ffffff; /* kart / panel / tablo */ --orion-surface-raised: #ffffff; /* flyout, modal, açılır menü */ --orion-surface-subtle: #f3f2f1; /* zebra satır, başlık şeridi */ --orion-surface-muted: #edebe9; /* pasif / devre dışı alan */ --orion-hover: #f3f2f1; --orion-active: #edebe9; /* Google/Material kökenli ekranların nötrleri (katalog, grid, kullanıcılar) */ --orion-canvas-alt: #f8f9fa; --orion-surface-alt: #f1f3f4; --orion-zebra: #f3f6f9; /* ── Kenarlıklar ── */ --orion-border: #edebe9; --orion-border-strong: #d2d0ce; --orion-border-subtle: #f3f2f1; --orion-border-alt: #e8eaed; /* Material ailesi */ --orion-border-alt-strong: #dadce0; /* ── Metin ── */ --orion-text: #242424; --orion-text-strong: #201f1e; --orion-text-secondary: #605e5c; --orion-text-muted: #8a8886; --orion-text-disabled: #a19f9d; --orion-text-on-accent: #ffffff; --orion-text-alt: #202124; /* Material ailesi gövde */ --orion-text-alt-secondary: #5f6368; --orion-text-alt-muted: #80868b; /* ── Vurgu (mavi) ── -blue : yüzey üstünde metin / ikon / kenarlık vurgusu -blue-fill : içi dolu düğme zemini (üstüne -text-on-accent gelir) -blue-soft : yumuşak vurgu zemini (rozet, seçili satır) */ --orion-blue: #0078d4; --orion-blue-dark: #106ebe; --orion-blue-fill: #0078d4; --orion-blue-fill-hover: #106ebe; --orion-blue-soft: rgba(0, 120, 212, 0.12); --orion-blue-soft-strong: rgba(0, 120, 212, 0.24); --orion-blue-alt: #1a73e8; /* Material mavisi */ --orion-blue-alt-dark: #1557b0; --orion-blue-alt-soft: #e8f0fe; /* ── Durum renkleri ── */ --orion-success: #0b6a0b; --orion-success-fill: #107c10; --orion-success-bg: #dff6dd; --orion-success-border: #b7e0c2; --orion-danger: #a4262c; --orion-danger-fill: #c5221f; --orion-danger-bg: #fde7e9; --orion-danger-border: #eec2c2; --orion-warning: #8a6d00; --orion-warning-fill: #b06000; --orion-warning-bg: #fff4ce; --orion-warning-border: #f0d7a8; --orion-info: #0369a1; --orion-info-fill: #0284c7; --orion-info-bg: #e6f0fb; --orion-info-border: #c7d9f5; /* Material/Tailwind kökenli ekranların durum tonları — Fluent ailesinden hafifçe farklı; açık temada birebir korunsun diye ayrı tutuldu. */ --orion-success-alt: #137333; --orion-success-alt-fill: #34a853; --orion-success-alt-bg: #e6f4ea; --orion-success-alt-border: #ceead6; --orion-danger-alt: #c5221f; --orion-danger-alt-fill: #ea4335; --orion-danger-alt-bg: #fce8e6; --orion-danger-alt-border: #f6aea9; --orion-warning-alt: #b06000; --orion-warning-alt-fill: #e65100; --orion-warning-alt-bg: #fef7e0; --orion-warning-alt-border: #f0d7a8; --orion-blue-alt-fill: #1a73e8; --orion-blue-alt-fill-hover: #1557b0; /* Sınav ekranlarının koyu yeşili (canlı sınav, optik, testmarker) */ --orion-green-deep: #036f53; --orion-green-deep-fill: #036f53; --orion-green-deep-bg: #f4fbf6; /* Mor / macenta vurgular (rol rozetleri, etiketler) */ --orion-purple: #5c2d91; --orion-purple-fill: #5c2d91; --orion-purple-soft: #8764b8; --orion-purple-soft-fill: #8764b8; --orion-magenta: #e3008c; --orion-magenta-fill: #e3008c; /* Ters yüzey — açık temada da koyu duran şerit/hero alanları */ --orion-inverse-surface: #0f172a; --orion-inverse-surface-raised: #1e293b; --orion-inverse-border: #334155; --orion-inverse-text: #f8fafc; --orion-inverse-text-secondary: #94a3b8; /* ── Gölge ── */ --orion-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --orion-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --orion-shadow-flyout: 0 6.4px 14.4px rgba(0, 0, 0, 0.13), 0 1.2px 3.6px rgba(0, 0, 0, 0.11); --orion-shadow-card: 0 1px 2px rgba(60, 64, 67, 0.08), 0 2px 8px rgba(60, 64, 67, 0.06); /* Koyu temada resim/rozet parlaklığını kısan filtre — açıkta etkisiz */ --orion-media-dim: none; } /* ───────────────────────────────────────────────────────────────────── KOYU TEMA ───────────────────────────────────────────────────────────────────── */ :root[data-bs-theme="dark"] { color-scheme: dark; --orion-canvas: #1b1a19; --orion-surface: #242322; --orion-surface-raised: #2d2c2b; --orion-surface-subtle: #2b2a29; --orion-surface-muted: #323130; --orion-hover: #323130; --orion-active: #3b3a39; --orion-canvas-alt: #1f1e1d; --orion-surface-alt: #2b2a29; --orion-zebra: #2a2928; --orion-border: #3b3a39; --orion-border-strong: #55534f; --orion-border-subtle: #2f2e2d; --orion-border-alt: #3b3a39; --orion-border-alt-strong: #55534f; --orion-text: #f3f2f1; --orion-text-strong: #ffffff; --orion-text-secondary: #c8c6c4; --orion-text-muted: #a19f9d; --orion-text-disabled: #7a7876; --orion-text-on-accent: #ffffff; --orion-text-alt: #eceef0; --orion-text-alt-secondary: #c2c6cb; --orion-text-alt-muted: #9aa0a6; --orion-blue: #5cb0f5; --orion-blue-dark: #7cc2ff; --orion-blue-fill: #0f6cbd; --orion-blue-fill-hover: #1a7ed4; --orion-blue-soft: rgba(92, 176, 245, 0.16); --orion-blue-soft-strong: rgba(92, 176, 245, 0.3); --orion-blue-alt: #6cb2f8; --orion-blue-alt-dark: #8cc5ff; --orion-blue-alt-soft: rgba(108, 178, 248, 0.18); --orion-success: #6fce8f; --orion-success-fill: #2c8a4a; --orion-success-bg: rgba(111, 206, 143, 0.16); --orion-success-border: rgba(111, 206, 143, 0.38); --orion-danger: #f88f8f; --orion-danger-fill: #b4302c; --orion-danger-bg: rgba(248, 143, 143, 0.16); --orion-danger-border: rgba(248, 143, 143, 0.38); --orion-warning: #e8b339; --orion-warning-fill: #96650a; --orion-warning-bg: rgba(232, 179, 57, 0.16); --orion-warning-border: rgba(232, 179, 57, 0.38); --orion-info: #63b3e8; --orion-info-fill: #1d6ea3; --orion-info-bg: rgba(99, 179, 232, 0.16); --orion-info-border: rgba(99, 179, 232, 0.38); --orion-success-alt: #6fce8f; --orion-success-alt-fill: #2f7d4a; --orion-success-alt-bg: rgba(111, 206, 143, 0.16); --orion-success-alt-border: rgba(111, 206, 143, 0.38); --orion-danger-alt: #f88f8f; --orion-danger-alt-fill: #bd3a33; --orion-danger-alt-bg: rgba(248, 143, 143, 0.16); --orion-danger-alt-border: rgba(248, 143, 143, 0.38); --orion-warning-alt: #e8b339; --orion-warning-alt-fill: #a35c12; --orion-warning-alt-bg: rgba(232, 179, 57, 0.16); --orion-warning-alt-border: rgba(232, 179, 57, 0.38); --orion-blue-alt-fill: #1a6fd4; --orion-blue-alt-fill-hover: #2b83e8; /* -fill uçları İÇİ DOLU zemin içindir: koyu temada da doygun/koyu kalır ki üstündeki beyaz yazı okunsun. Eksiz uçlar metin/kenarlık içindir ve koyu zeminde okunmak üzere açılır. İkisini karıştırmayın. */ --orion-green-deep: #4fb99a; --orion-green-deep-fill: #0c5f4a; --orion-green-deep-bg: rgba(79, 185, 154, 0.14); --orion-purple: #b99bdd; --orion-purple-fill: #5b3d8c; --orion-purple-soft: #a789cc; --orion-purple-soft-fill: #6b4b9e; --orion-magenta: #ff5cbb; --orion-magenta-fill: #a3216d; /* Ters yüzey koyu temada da koyu kalır; kanvastan ayrışsın diye bir tık açık */ --orion-inverse-surface: #16213a; --orion-inverse-surface-raised: #1f2d4a; --orion-inverse-border: #33415a; --orion-inverse-text: #f1f5f9; --orion-inverse-text-secondary: #a6b4c8; /* Koyu zeminde gölge yerine daha derin siyah + hafif üst ışık */ --orion-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --orion-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.55); --orion-shadow-flyout: 0 6.4px 14.4px rgba(0, 0, 0, 0.6), 0 1.2px 3.6px rgba(0, 0, 0, 0.5); --orion-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4); --orion-media-dim: brightness(0.86) contrast(1.04); } /* ───────────────────────────────────────────────────────────────────── Eski token aileleri — koyu karşılıkları Bu dosyalar zaten kendi değişkenlerini kullanıyor; sadece koyu değerlerini vermek onları bütünüyle çeviriyor. ───────────────────────────────────────────────────────────────────── */ :root[data-bs-theme="dark"] { /* Exam yüzeyleri (exam-theme.css) */ --exam-bg: var(--orion-canvas); --exam-card: var(--orion-surface); --exam-card-border: var(--orion-border); --exam-muted: var(--orion-text-secondary); --exam-accent: var(--orion-blue); --exam-accent-fill: var(--orion-blue-fill); --exam-accent-soft: var(--orion-blue-soft); --exam-shadow: var(--orion-shadow-card); /* Veri ızgarası (orion-data-grid.css) */ --orion-dg-border: var(--orion-border); --orion-dg-muted: var(--orion-text-secondary); --orion-dg-text: var(--orion-text); --orion-dg-hover: var(--orion-hover); --orion-dg-zebra: var(--orion-zebra); --orion-dg-selected: var(--orion-blue-soft); --orion-dg-accent: var(--orion-blue); --orion-dg-accent-fill: var(--orion-blue-fill); --orion-dg-ok: var(--orion-success); --orion-dg-shadow: var(--orion-shadow-card); --orion-dg-header-bg: var(--orion-surface); /* UI standardı (orion-ui-standard.css) */ --orion-ui-border: var(--orion-border); --orion-ui-control-border: var(--orion-border-strong); --orion-ui-primary: var(--orion-blue); /* Öğrenci paneli (ogrenci-panel.css) */ --op-primary: #1f3f75; --op-primary-dark: #16305a; --op-accent: var(--orion-blue); --op-bg: var(--orion-canvas); --op-surface: var(--orion-surface); --op-border: var(--orion-border); --op-muted: var(--orion-text-secondary); --op-text: var(--orion-text); --op-baslik: var(--orion-blue); } /* ───────────────────────────────────────────────────────────────────── VURGU RENGİ ile seçilir; öznitelik yoksa varsayılan Orion mavisi geçerlidir (aşağıda blok yok). Vurgu, mavi ailesinin TAMAMINI değiştirir: --orion-blue* (Fluent) ve --orion-blue-alt* (Material) ile modüllerin kendi uçları. Rol ayrımı burada da geçerli — `-fill` uçları doygun kalır (üstünde beyaz yazı), `-fill`siz uçlar koyu temada açılır. Özgüllük: açık blok (0,2,0) `:root`u ezer; koyu blok (0,3,0) hem açık vurgu bloğunu hem tema bloğunu ezer. ───────────────────────────────────────────────────────────────────── */ :root[data-orion-accent="mor"] { --orion-blue: #6b3fc4; --orion-blue-dark: #5a33a8; --orion-blue-fill: #6b3fc4; --orion-blue-fill-hover: #5a33a8; --orion-blue-soft: rgba(107, 63, 196, 0.12); --orion-blue-soft-strong: rgba(107, 63, 196, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #6b3fc4; --orion-blue-alt-dark: #5a33a8; --orion-blue-alt-soft: rgba(107, 63, 196, 0.14); --orion-blue-alt-fill: #6b3fc4; --orion-blue-alt-fill-hover: #5a33a8; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #6b3fc4; --orion-dg-accent: #6b3fc4; --orion-dg-accent-fill: #6b3fc4; --exam-accent: #6b3fc4; --exam-accent-fill: #6b3fc4; --exam-accent-soft: rgba(107, 63, 196, 0.10); --op-accent: #6b3fc4; --op-baslik: #6b3fc4; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #6b3fc4; --bs-primary-rgb: 107, 63, 196; --bs-link-color: #6b3fc4; --bs-link-color-rgb: 107, 63, 196; --bs-link-hover-color: #5a33a8; } :root[data-orion-accent="mor"][data-bs-theme="dark"] { --orion-blue: #b794f6; --orion-blue-dark: #c9b0fa; --orion-blue-fill: #6d3fc0; --orion-blue-fill-hover: #7d4dd4; --orion-blue-soft: rgba(183, 148, 246, 0.16); --orion-blue-soft-strong: rgba(183, 148, 246, 0.3); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #b794f6; --orion-blue-alt-dark: #c9b0fa; --orion-blue-alt-soft: rgba(183, 148, 246, 0.18); --orion-blue-alt-fill: #6d3fc0; --orion-blue-alt-fill-hover: #7d4dd4; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #b794f6; --orion-dg-accent: #b794f6; --orion-dg-accent-fill: #6d3fc0; --exam-accent: #b794f6; --exam-accent-fill: #6d3fc0; --exam-accent-soft: rgba(183, 148, 246, 0.16); --op-accent: #b794f6; --op-baslik: #b794f6; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #6d3fc0; --bs-primary-rgb: 109, 63, 192; --bs-link-color: #b794f6; --bs-link-color-rgb: 183, 148, 246; --bs-link-hover-color: #c9b0fa; } :root[data-orion-accent="camgobegi"] { --orion-blue: #0f766e; --orion-blue-dark: #115e59; --orion-blue-fill: #0f766e; --orion-blue-fill-hover: #115e59; --orion-blue-soft: rgba(15, 118, 110, 0.12); --orion-blue-soft-strong: rgba(15, 118, 110, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #0f766e; --orion-blue-alt-dark: #115e59; --orion-blue-alt-soft: rgba(15, 118, 110, 0.14); --orion-blue-alt-fill: #0f766e; --orion-blue-alt-fill-hover: #115e59; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #0f766e; --orion-dg-accent: #0f766e; --orion-dg-accent-fill: #0f766e; --exam-accent: #0f766e; --exam-accent-fill: #0f766e; --exam-accent-soft: rgba(15, 118, 110, 0.10); --op-accent: #0f766e; --op-baslik: #0f766e; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #0f766e; --bs-primary-rgb: 15, 118, 110; --bs-link-color: #0f766e; --bs-link-color-rgb: 15, 118, 110; --bs-link-hover-color: #115e59; } :root[data-orion-accent="camgobegi"][data-bs-theme="dark"] { --orion-blue: #5eddd0; --orion-blue-dark: #84e8de; --orion-blue-fill: #0e6b64; --orion-blue-fill-hover: #14847b; --orion-blue-soft: rgba(94, 221, 208, 0.16); --orion-blue-soft-strong: rgba(94, 221, 208, 0.3); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #5eddd0; --orion-blue-alt-dark: #84e8de; --orion-blue-alt-soft: rgba(94, 221, 208, 0.18); --orion-blue-alt-fill: #0e6b64; --orion-blue-alt-fill-hover: #14847b; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #5eddd0; --orion-dg-accent: #5eddd0; --orion-dg-accent-fill: #0e6b64; --exam-accent: #5eddd0; --exam-accent-fill: #0e6b64; --exam-accent-soft: rgba(94, 221, 208, 0.16); --op-accent: #5eddd0; --op-baslik: #5eddd0; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #0e6b64; --bs-primary-rgb: 14, 107, 100; --bs-link-color: #5eddd0; --bs-link-color-rgb: 94, 221, 208; --bs-link-hover-color: #84e8de; } :root[data-orion-accent="yesil"] { --orion-blue: #15803d; --orion-blue-dark: #166534; --orion-blue-fill: #15803d; --orion-blue-fill-hover: #166534; --orion-blue-soft: rgba(21, 128, 61, 0.12); --orion-blue-soft-strong: rgba(21, 128, 61, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #15803d; --orion-blue-alt-dark: #166534; --orion-blue-alt-soft: rgba(21, 128, 61, 0.14); --orion-blue-alt-fill: #15803d; --orion-blue-alt-fill-hover: #166534; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #15803d; --orion-dg-accent: #15803d; --orion-dg-accent-fill: #15803d; --exam-accent: #15803d; --exam-accent-fill: #15803d; --exam-accent-soft: rgba(21, 128, 61, 0.10); --op-accent: #15803d; --op-baslik: #15803d; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #15803d; --bs-primary-rgb: 21, 128, 61; --bs-link-color: #15803d; --bs-link-color-rgb: 21, 128, 61; --bs-link-hover-color: #166534; } :root[data-orion-accent="yesil"][data-bs-theme="dark"] { --orion-blue: #6ee7a0; --orion-blue-dark: #93efba; --orion-blue-fill: #157a3e; --orion-blue-fill-hover: #1b9450; --orion-blue-soft: rgba(110, 231, 160, 0.16); --orion-blue-soft-strong: rgba(110, 231, 160, 0.3); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #6ee7a0; --orion-blue-alt-dark: #93efba; --orion-blue-alt-soft: rgba(110, 231, 160, 0.18); --orion-blue-alt-fill: #157a3e; --orion-blue-alt-fill-hover: #1b9450; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #6ee7a0; --orion-dg-accent: #6ee7a0; --orion-dg-accent-fill: #157a3e; --exam-accent: #6ee7a0; --exam-accent-fill: #157a3e; --exam-accent-soft: rgba(110, 231, 160, 0.16); --op-accent: #6ee7a0; --op-baslik: #6ee7a0; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #157a3e; --bs-primary-rgb: 21, 122, 62; --bs-link-color: #6ee7a0; --bs-link-color-rgb: 110, 231, 160; --bs-link-hover-color: #93efba; } :root[data-orion-accent="turuncu"] { --orion-blue: #c2410c; --orion-blue-dark: #9a3412; --orion-blue-fill: #c2410c; --orion-blue-fill-hover: #9a3412; --orion-blue-soft: rgba(194, 65, 12, 0.12); --orion-blue-soft-strong: rgba(194, 65, 12, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #c2410c; --orion-blue-alt-dark: #9a3412; --orion-blue-alt-soft: rgba(194, 65, 12, 0.14); --orion-blue-alt-fill: #c2410c; --orion-blue-alt-fill-hover: #9a3412; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #c2410c; --orion-dg-accent: #c2410c; --orion-dg-accent-fill: #c2410c; --exam-accent: #c2410c; --exam-accent-fill: #c2410c; --exam-accent-soft: rgba(194, 65, 12, 0.10); --op-accent: #c2410c; --op-baslik: #c2410c; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #c2410c; --bs-primary-rgb: 194, 65, 12; --bs-link-color: #c2410c; --bs-link-color-rgb: 194, 65, 12; --bs-link-hover-color: #9a3412; } :root[data-orion-accent="turuncu"][data-bs-theme="dark"] { --orion-blue: #ffa477; --orion-blue-dark: #ffbb99; --orion-blue-fill: #b8460f; --orion-blue-fill-hover: #d0561a; --orion-blue-soft: rgba(255, 164, 119, 0.16); --orion-blue-soft-strong: rgba(255, 164, 119, 0.3); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #ffa477; --orion-blue-alt-dark: #ffbb99; --orion-blue-alt-soft: rgba(255, 164, 119, 0.18); --orion-blue-alt-fill: #b8460f; --orion-blue-alt-fill-hover: #d0561a; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #ffa477; --orion-dg-accent: #ffa477; --orion-dg-accent-fill: #b8460f; --exam-accent: #ffa477; --exam-accent-fill: #b8460f; --exam-accent-soft: rgba(255, 164, 119, 0.16); --op-accent: #ffa477; --op-baslik: #ffa477; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #b8460f; --bs-primary-rgb: 184, 70, 15; --bs-link-color: #ffa477; --bs-link-color-rgb: 255, 164, 119; --bs-link-hover-color: #ffbb99; } :root[data-orion-accent="macenta"] { --orion-blue: #be185d; --orion-blue-dark: #9d174d; --orion-blue-fill: #be185d; --orion-blue-fill-hover: #9d174d; --orion-blue-soft: rgba(190, 24, 93, 0.12); --orion-blue-soft-strong: rgba(190, 24, 93, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #be185d; --orion-blue-alt-dark: #9d174d; --orion-blue-alt-soft: rgba(190, 24, 93, 0.14); --orion-blue-alt-fill: #be185d; --orion-blue-alt-fill-hover: #9d174d; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #be185d; --orion-dg-accent: #be185d; --orion-dg-accent-fill: #be185d; --exam-accent: #be185d; --exam-accent-fill: #be185d; --exam-accent-soft: rgba(190, 24, 93, 0.10); --op-accent: #be185d; --op-baslik: #be185d; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #be185d; --bs-primary-rgb: 190, 24, 93; --bs-link-color: #be185d; --bs-link-color-rgb: 190, 24, 93; --bs-link-hover-color: #9d174d; } :root[data-orion-accent="macenta"][data-bs-theme="dark"] { --orion-blue: #f9a8d4; --orion-blue-dark: #fcc4e3; --orion-blue-fill: #b02060; --orion-blue-fill-hover: #c92a72; --orion-blue-soft: rgba(249, 168, 212, 0.16); --orion-blue-soft-strong: rgba(249, 168, 212, 0.3); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #f9a8d4; --orion-blue-alt-dark: #fcc4e3; --orion-blue-alt-soft: rgba(249, 168, 212, 0.18); --orion-blue-alt-fill: #b02060; --orion-blue-alt-fill-hover: #c92a72; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #f9a8d4; --orion-dg-accent: #f9a8d4; --orion-dg-accent-fill: #b02060; --exam-accent: #f9a8d4; --exam-accent-fill: #b02060; --exam-accent-soft: rgba(249, 168, 212, 0.16); --op-accent: #f9a8d4; --op-baslik: #f9a8d4; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #b02060; --bs-primary-rgb: 176, 32, 96; --bs-link-color: #f9a8d4; --bs-link-color-rgb: 249, 168, 212; --bs-link-hover-color: #fcc4e3; } /* Yazdırma — kağıda her zaman AÇIK vurgu basılır; koyu tema vurgusunu ezer. */ @media print { :root[data-orion-accent="mor"][data-bs-theme="dark"] { --orion-blue: #6b3fc4; --orion-blue-dark: #5a33a8; --orion-blue-fill: #6b3fc4; --orion-blue-fill-hover: #5a33a8; --orion-blue-soft: rgba(107, 63, 196, 0.12); --orion-blue-soft-strong: rgba(107, 63, 196, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #6b3fc4; --orion-blue-alt-dark: #5a33a8; --orion-blue-alt-soft: rgba(107, 63, 196, 0.14); --orion-blue-alt-fill: #6b3fc4; --orion-blue-alt-fill-hover: #5a33a8; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #6b3fc4; --orion-dg-accent: #6b3fc4; --orion-dg-accent-fill: #6b3fc4; --exam-accent: #6b3fc4; --exam-accent-fill: #6b3fc4; --exam-accent-soft: rgba(107, 63, 196, 0.10); --op-accent: #6b3fc4; --op-baslik: #6b3fc4; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #6b3fc4; --bs-primary-rgb: 107, 63, 196; --bs-link-color: #6b3fc4; --bs-link-color-rgb: 107, 63, 196; --bs-link-hover-color: #5a33a8; } :root[data-orion-accent="camgobegi"][data-bs-theme="dark"] { --orion-blue: #0f766e; --orion-blue-dark: #115e59; --orion-blue-fill: #0f766e; --orion-blue-fill-hover: #115e59; --orion-blue-soft: rgba(15, 118, 110, 0.12); --orion-blue-soft-strong: rgba(15, 118, 110, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #0f766e; --orion-blue-alt-dark: #115e59; --orion-blue-alt-soft: rgba(15, 118, 110, 0.14); --orion-blue-alt-fill: #0f766e; --orion-blue-alt-fill-hover: #115e59; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #0f766e; --orion-dg-accent: #0f766e; --orion-dg-accent-fill: #0f766e; --exam-accent: #0f766e; --exam-accent-fill: #0f766e; --exam-accent-soft: rgba(15, 118, 110, 0.10); --op-accent: #0f766e; --op-baslik: #0f766e; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #0f766e; --bs-primary-rgb: 15, 118, 110; --bs-link-color: #0f766e; --bs-link-color-rgb: 15, 118, 110; --bs-link-hover-color: #115e59; } :root[data-orion-accent="yesil"][data-bs-theme="dark"] { --orion-blue: #15803d; --orion-blue-dark: #166534; --orion-blue-fill: #15803d; --orion-blue-fill-hover: #166534; --orion-blue-soft: rgba(21, 128, 61, 0.12); --orion-blue-soft-strong: rgba(21, 128, 61, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #15803d; --orion-blue-alt-dark: #166534; --orion-blue-alt-soft: rgba(21, 128, 61, 0.14); --orion-blue-alt-fill: #15803d; --orion-blue-alt-fill-hover: #166534; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #15803d; --orion-dg-accent: #15803d; --orion-dg-accent-fill: #15803d; --exam-accent: #15803d; --exam-accent-fill: #15803d; --exam-accent-soft: rgba(21, 128, 61, 0.10); --op-accent: #15803d; --op-baslik: #15803d; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #15803d; --bs-primary-rgb: 21, 128, 61; --bs-link-color: #15803d; --bs-link-color-rgb: 21, 128, 61; --bs-link-hover-color: #166534; } :root[data-orion-accent="turuncu"][data-bs-theme="dark"] { --orion-blue: #c2410c; --orion-blue-dark: #9a3412; --orion-blue-fill: #c2410c; --orion-blue-fill-hover: #9a3412; --orion-blue-soft: rgba(194, 65, 12, 0.12); --orion-blue-soft-strong: rgba(194, 65, 12, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #c2410c; --orion-blue-alt-dark: #9a3412; --orion-blue-alt-soft: rgba(194, 65, 12, 0.14); --orion-blue-alt-fill: #c2410c; --orion-blue-alt-fill-hover: #9a3412; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #c2410c; --orion-dg-accent: #c2410c; --orion-dg-accent-fill: #c2410c; --exam-accent: #c2410c; --exam-accent-fill: #c2410c; --exam-accent-soft: rgba(194, 65, 12, 0.10); --op-accent: #c2410c; --op-baslik: #c2410c; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #c2410c; --bs-primary-rgb: 194, 65, 12; --bs-link-color: #c2410c; --bs-link-color-rgb: 194, 65, 12; --bs-link-hover-color: #9a3412; } :root[data-orion-accent="macenta"][data-bs-theme="dark"] { --orion-blue: #be185d; --orion-blue-dark: #9d174d; --orion-blue-fill: #be185d; --orion-blue-fill-hover: #9d174d; --orion-blue-soft: rgba(190, 24, 93, 0.12); --orion-blue-soft-strong: rgba(190, 24, 93, 0.24); /* Material ailesi de aynı vurguya hizalanır — kullanıcı tek renk seçti. */ --orion-blue-alt: #be185d; --orion-blue-alt-dark: #9d174d; --orion-blue-alt-soft: rgba(190, 24, 93, 0.14); --orion-blue-alt-fill: #be185d; --orion-blue-alt-fill-hover: #9d174d; /* Kendi değişkenini kullanan modüller */ --orion-ui-primary: #be185d; --orion-dg-accent: #be185d; --orion-dg-accent-fill: #be185d; --exam-accent: #be185d; --exam-accent-fill: #be185d; --exam-accent-soft: rgba(190, 24, 93, 0.10); --op-accent: #be185d; --op-baslik: #be185d; /* Bootstrap bağlantı ve birincil düğme */ --bs-primary: #be185d; --bs-primary-rgb: 190, 24, 93; --bs-link-color: #be185d; --bs-link-color-rgb: 190, 24, 93; --bs-link-hover-color: #9d174d; } } /* ───────────────────────────────────────────────────────────────────── Bootstrap ince ayarı Bootstrap 5.3 data-bs-theme ile kendi tokenlarını çeviriyor; aşağıdaki satırlar Orion'un nötr tonlarıyla hizalıyor. ───────────────────────────────────────────────────────────────────── */ :root[data-bs-theme="dark"] { --bs-body-bg: var(--orion-canvas); --bs-body-color: var(--orion-text); --bs-border-color: var(--orion-border); --bs-secondary-bg: var(--orion-surface-subtle); --bs-tertiary-bg: var(--orion-surface-muted); --bs-emphasis-color: var(--orion-text-strong); --bs-secondary-color: var(--orion-text-secondary); --bs-link-color: var(--orion-blue); --bs-link-hover-color: var(--orion-blue-dark); --bs-heading-color: var(--orion-text); } [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .offcanvas, [data-bs-theme="dark"] .list-group-item, [data-bs-theme="dark"] .accordion-item { background-color: var(--orion-surface); border-color: var(--orion-border); color: var(--orion-text); } [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer, [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { background-color: var(--orion-surface-subtle); border-color: var(--orion-border); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text { background-color: var(--orion-surface-raised); border-color: var(--orion-border-strong); color: var(--orion-text); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--orion-text-disabled); } [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled { background-color: var(--orion-surface-muted); color: var(--orion-text-disabled); } [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--orion-text); --bs-table-border-color: var(--orion-border); --bs-table-striped-bg: var(--orion-zebra); --bs-table-hover-bg: var(--orion-hover); } [data-bs-theme="dark"] .btn-light { --bs-btn-bg: var(--orion-surface-muted); --bs-btn-border-color: var(--orion-border-strong); --bs-btn-color: var(--orion-text); --bs-btn-hover-bg: var(--orion-active); --bs-btn-hover-border-color: var(--orion-border-strong); --bs-btn-hover-color: var(--orion-text); } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--orion-text-secondary); --bs-btn-border-color: var(--orion-border-strong); --bs-btn-hover-bg: var(--orion-hover); --bs-btn-hover-color: var(--orion-text); --bs-btn-hover-border-color: var(--orion-border-strong); } /* .btn-outline-dark Bootstrap'te sabit #212529 tasir ve koyu temada ezilmiyordu; koyu zemine karsi kontrast 1.13:1 kaliyor, yani buton tamamen gorunmez oluyordu. Sinav Degerlendir'in Ogrenci/Kurum/Sinif rapor sekmelerindeki karne butonlari bu sinifi kullaniyor. */ [data-bs-theme="dark"] .btn-outline-dark { --bs-btn-color: var(--orion-text); --bs-btn-border-color: var(--orion-border-strong); --bs-btn-hover-bg: var(--orion-hover); --bs-btn-hover-color: var(--orion-text-strong); --bs-btn-hover-border-color: var(--orion-border-strong); --bs-btn-active-bg: var(--orion-active); --bs-btn-active-color: var(--orion-text-strong); --bs-btn-active-border-color: var(--orion-border-strong); --bs-btn-disabled-color: var(--orion-text-disabled); --bs-btn-disabled-border-color: var(--orion-border); } /* .bg-white / .bg-light gibi yardımcı sınıflar koyu temada beyaz kalmasın */ [data-bs-theme="dark"] .bg-white { background-color: var(--orion-surface) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--orion-surface-subtle) !important; } [data-bs-theme="dark"] .text-dark { color: var(--orion-text) !important; } [data-bs-theme="dark"] .text-muted { color: var(--orion-text-secondary) !important; } [data-bs-theme="dark"] .border { border-color: var(--orion-border) !important; } /* Bootstrap'in .btn-primary'si derlenmiş sabit renk taşır (#0d6efd) ve --bs-primary'yi okumaz; vurgu rengine elle bağlıyoruz. */ .btn-primary { --bs-btn-color: var(--orion-text-on-accent); --bs-btn-bg: var(--orion-blue-fill); --bs-btn-border-color: var(--orion-blue-fill); --bs-btn-hover-color: var(--orion-text-on-accent); --bs-btn-hover-bg: var(--orion-blue-fill-hover); --bs-btn-hover-border-color: var(--orion-blue-fill-hover); --bs-btn-active-color: var(--orion-text-on-accent); --bs-btn-active-bg: var(--orion-blue-fill-hover); --bs-btn-active-border-color: var(--orion-blue-fill-hover); --bs-btn-disabled-color: var(--orion-text-on-accent); --bs-btn-disabled-bg: var(--orion-blue-fill); --bs-btn-disabled-border-color: var(--orion-blue-fill); } .btn-outline-primary { --bs-btn-color: var(--orion-blue); --bs-btn-border-color: var(--orion-blue); --bs-btn-hover-color: var(--orion-text-on-accent); --bs-btn-hover-bg: var(--orion-blue-fill); --bs-btn-hover-border-color: var(--orion-blue-fill); --bs-btn-active-color: var(--orion-text-on-accent); --bs-btn-active-bg: var(--orion-blue-fill); --bs-btn-active-border-color: var(--orion-blue-fill); } .form-control:focus, .form-select:focus { border-color: var(--orion-blue); box-shadow: 0 0 0 0.2rem var(--orion-blue-soft); } /* ───────────────────────────────────────────────────────────────────── Tabulator (veri ızgarası kütüphanesi) ───────────────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] .tabulator { background-color: var(--orion-surface); color: var(--orion-text); border-color: var(--orion-border); } /* Tabulator'ın kendi tablo zemini beyaz (#fff) gelir ve koyu temada ezilmediği için satırların ARKASINDA beyaz bir katman kalıyordu. Satırlar opak olduğu sürece görünmüyor; ancak seçili satırın zemini yarı saydam (--orion-blue-soft) olduğundan bu beyaz sızıp satırı açık maviye çeviriyor, açık renkli yazıyla birlikte satır okunamıyordu. */ [data-bs-theme="dark"] .tabulator .tabulator-tableholder, [data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table { background-color: var(--orion-surface); color: var(--orion-text); } [data-bs-theme="dark"] .tabulator .tabulator-header, [data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col, [data-bs-theme="dark"] .tabulator .tabulator-footer { background-color: var(--orion-surface-subtle); color: var(--orion-text); border-color: var(--orion-border); } [data-bs-theme="dark"] .tabulator .tabulator-row { background-color: var(--orion-surface); color: var(--orion-text); border-color: var(--orion-border); } [data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-even { background-color: var(--orion-zebra); } [data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-selectable:hover { background-color: var(--orion-hover); } [data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-selected { background-color: var(--orion-blue-soft); } [data-bs-theme="dark"] .tabulator .tabulator-cell, [data-bs-theme="dark"] .tabulator .tabulator-col-content { border-color: var(--orion-border); } [data-bs-theme="dark"] .tabulator .tabulator-header-filter input, [data-bs-theme="dark"] .tabulator .tabulator-header-filter select { background-color: var(--orion-surface-raised); border: 1px solid var(--orion-border-strong); color: var(--orion-text); } [data-bs-theme="dark"] .tabulator .tabulator-page, [data-bs-theme="dark"] .tabulator .tabulator-paginator label { background-color: var(--orion-surface-raised); color: var(--orion-text); border-color: var(--orion-border); } [data-bs-theme="dark"] .tabulator .tabulator-page.active { background-color: var(--orion-blue-fill); color: var(--orion-text-on-accent); } /* Sürükleme, sıralama ve ara toplam katmanları da kütüphaneden açık renk geliyor; koyu temada ızgaranın ortasında beyaz/gri şeritler bırakıyordu. Ara toplam kuralları kütüphanede !important olduğu için burada da şart. */ [data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-moving, [data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover { background-color: var(--orion-hover); border-color: var(--orion-border); } [data-bs-theme="dark"] .tabulator .tabulator-calcs-holder, [data-bs-theme="dark"] .tabulator .tabulator-calcs-holder .tabulator-row, [data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-calcs { background: var(--orion-surface-subtle) !important; color: var(--orion-text); border-color: var(--orion-border); } [data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-group { background: var(--orion-surface-muted); color: var(--orion-text); border-color: var(--orion-border); } [data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-moving { background: var(--orion-surface-raised); border-color: var(--orion-border-strong); } /* Tabulator ipucu/menü katmanları altına eklenir, .tabulator içinde değildir. Zeminleri beyaz kalıyor, yazı rengi ise koyu temanın açık metnini miras aldığı için beyaz üstünde beyaz yazı çıkıyordu. */ [data-bs-theme="dark"] .tabulator-popup-container { background: var(--orion-surface-raised); border-color: var(--orion-border-strong); color: var(--orion-text); box-shadow: var(--orion-shadow-flyout); } [data-bs-theme="dark"] .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover { background: var(--orion-hover); } [data-bs-theme="dark"] .tabulator-menu .tabulator-menu-separator { border-top-color: var(--orion-border); } [data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item, [data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-group, [data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-placeholder { color: var(--orion-text); } [data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-group { border-bottom-color: var(--orion-border); } [data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item.active, [data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item:hover { background: var(--orion-blue-fill); color: var(--orion-text-on-accent); } /* ───────────────────────────────────────────────────────────────────── Ortak cila ───────────────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] ::selection { background: var(--orion-blue-soft-strong); color: var(--orion-text-strong); } [data-bs-theme="dark"] hr { border-color: var(--orion-border); } /* Koyu temada beyaz zeminli logo/görsel gözü yormasın */ [data-bs-theme="dark"] .orion-brand-logo, [data-bs-theme="dark"] .orion-login-logo, [data-bs-theme="dark"] .orion-home-logo, [data-bs-theme="dark"] .orion-landing-logo, [data-bs-theme="dark"] .orion-product-mark { filter: var(--orion-media-dim); } /* ───────────────────────────────────────────────────────────────────── Yazdırma — çıktı her zaman açık tema Makbuz, senet, ödeme planı, öğrenci belgesi gibi ekranlar kağıda basılır. ───────────────────────────────────────────────────────────────────── */ @media print { :root, :root[data-bs-theme="dark"] { color-scheme: light; --orion-canvas: #ffffff; --orion-surface: #ffffff; --orion-surface-raised: #ffffff; --orion-surface-subtle: #f3f2f1; --orion-surface-muted: #edebe9; --orion-hover: #f3f2f1; --orion-active: #edebe9; --orion-canvas-alt: #ffffff; --orion-surface-alt: #f1f3f4; --orion-zebra: #f3f6f9; --orion-border: #d2d0ce; --orion-border-strong: #a19f9d; --orion-border-subtle: #edebe9; --orion-border-alt: #dadce0; --orion-border-alt-strong: #bdc1c6; --orion-text: #000000; --orion-text-strong: #000000; --orion-text-secondary: #3c4043; --orion-text-muted: #5f6368; --orion-text-disabled: #80868b; --orion-text-alt: #000000; --orion-text-alt-secondary: #3c4043; --orion-text-alt-muted: #5f6368; --orion-blue: #0b5cad; --orion-blue-dark: #084a8c; --orion-blue-fill: #0b5cad; --orion-blue-soft: #e8f0fe; --orion-blue-alt: #1557b0; --orion-blue-alt-soft: #e8f0fe; --orion-success: #0b6a0b; --orion-success-bg: #dff6dd; --orion-success-border: #b7e0c2; --orion-danger: #a4262c; --orion-danger-bg: #fde7e9; --orion-danger-border: #eec2c2; --orion-warning: #8a6d00; --orion-warning-bg: #fff4ce; --orion-warning-border: #f0d7a8; --orion-info: #0369a1; --orion-info-bg: #e6f0fb; --orion-info-border: #c7d9f5; --orion-success-alt: #137333; --orion-success-alt-fill: #34a853; --orion-success-alt-bg: #e6f4ea; --orion-success-alt-border: #ceead6; --orion-danger-alt: #c5221f; --orion-danger-alt-fill: #ea4335; --orion-danger-alt-bg: #fce8e6; --orion-danger-alt-border: #f6aea9; --orion-warning-alt: #b06000; --orion-warning-alt-fill: #e65100; --orion-warning-alt-bg: #fef7e0; --orion-warning-alt-border: #f0d7a8; --orion-blue-alt-fill: #1a73e8; --orion-blue-alt-fill-hover: #1557b0; --orion-green-deep: #036f53; --orion-green-deep-fill: #036f53; --orion-green-deep-bg: #f4fbf6; --orion-purple: #5c2d91; --orion-purple-fill: #5c2d91; --orion-purple-soft: #8764b8; --orion-purple-soft-fill: #8764b8; --orion-magenta: #e3008c; --orion-magenta-fill: #e3008c; --orion-inverse-surface: #0f172a; --orion-inverse-surface-raised: #1e293b; --orion-inverse-border: #334155; --orion-inverse-text: #f8fafc; --orion-inverse-text-secondary: #94a3b8; --orion-shadow-sm: none; --orion-shadow-md: none; --orion-shadow-flyout: none; --orion-shadow-card: none; --orion-media-dim: none; --exam-bg: #ffffff; --exam-card: #ffffff; --exam-card-border: #d2d0ce; --exam-muted: #3c4043; --exam-accent: #0b5cad; --exam-shadow: none; --orion-dg-border: #d2d0ce; --orion-dg-muted: #3c4043; --orion-dg-text: #000000; --orion-dg-hover: #ffffff; --orion-dg-zebra: #f3f6f9; --orion-dg-header-bg: #ffffff; --orion-dg-shadow: none; --op-bg: #ffffff; --op-surface: #ffffff; --op-border: #d2d0ce; --op-muted: #3c4043; --op-text: #000000; } html[data-bs-theme="dark"] body, html[data-bs-theme="dark"] .orion-main, html[data-bs-theme="dark"] .orion-shell { background: #ffffff !important; color: #000000 !important; } }