/* ============================================================= dark.css — Karanlık tema (additive) tokens.css → base.css → components.css → dark.css sırasıyla yüklenir. Açık temaya HİÇ dokunmaz; yalnızca [data-theme="dark"] altında çalışır. ile etkinleşir. ============================================================= */ :root[data-theme="dark"] { /* ---- Yüzeyler / zemin (soğuk lacivert-siyah) ---- */ --bg: #0A1120; --surface: #131D30; --surface-alt: #1C2942; --border: #2B3A56; /* ---- Metin ---- */ --text-primary: #EAF0F8; --text-muted: #94A6C0; /* ---- Link/ikon mavisini koyu zeminde okunur yap ---- */ --brand-sky-dark: #5CC7FB; /* ---- Gölgeler (koyu zemine uygun) ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 4px 14px rgba(0,0,0,.5); --shadow-lg: 0 14px 36px rgba(0,0,0,.6); /* Tarayıcı kontrolleri (scrollbar, form) koyu render etsin */ color-scheme: dark; /* NOT: --brand-deep, --accent-gold, --accent-* DEĞİŞMEZ — gradient, geri-sayım kutusu ve altın-üstü-metin için lacivert korunur. */ } /* ============================================================= (b) Açık zeminde "koyu metin" olarak brand-deep kullanan yerler → karanlıkta açık renge çevrilir (yüzey artık koyu). ============================================================= */ :root[data-theme="dark"] .app-navbar .navbar-brand, :root[data-theme="dark"] .app-navbar .user-trigger, :root[data-theme="dark"] .match-card__score, :root[data-theme="dark"] .leader-row__pts, :root[data-theme="dark"] .score-card__pts, :root[data-theme="dark"] .stat-card__num, :root[data-theme="dark"] .score-input, :root[data-theme="dark"] .league-position-card__rank, :root[data-theme="dark"] .match-result__score, :root[data-theme="dark"] .match-locked-note .pred, :root[data-theme="dark"] .advance-auto-info b, :root[data-theme="dark"] .advance-locked-note b, :root[data-theme="dark"] .league-card__rank .place, :root[data-theme="dark"] .invite-code__box, :root[data-theme="dark"] .leader-card__total, :root[data-theme="dark"] .pred-row__pred, :root[data-theme="dark"] .pred-row__real, :root[data-theme="dark"] .pred-row__pts, :root[data-theme="dark"] .scoring-hint-box b, :root[data-theme="dark"] .score-note b, :root[data-theme="dark"] .md-match__score, :root[data-theme="dark"] .matchday__arrow, :root[data-theme="dark"] .countdown--hero .countdown-box__num { color: var(--text-primary); } /* Hero geri sayım etiketini koyu kutuda biraz parlat */ :root[data-theme="dark"] .countdown--hero .countdown-box__label { color: var(--accent-gold); } /* ============================================================= Açık-ALTIN vurgulu yüzeyler (dark'ta da açık kalır) → metin KOYU 1. sıra leaderboard kartı, doğru tahmin satırı vb. ============================================================= */ :root[data-theme="dark"] .leader-card--1 .leader-card__name, :root[data-theme="dark"] .leader-card--1 .leader-card__total, :root[data-theme="dark"] .pred-row.correct .pred-row__match, :root[data-theme="dark"] .pred-row.correct .pred-row__pred, :root[data-theme="dark"] .pred-row.correct .pred-row__real { color: var(--brand-deep); } :root[data-theme="dark"] .leader-card--1 .leader-card__breakdown, :root[data-theme="dark"] .leader-card--1 .leader-card__name .tag { color: color-mix(in oklab, var(--brand-deep) 72%, transparent); } /* ============================================================= Sabit açık renkli (hardcoded) küçük yüzeyler ============================================================= */ /* Gri durum rozetleri */ :root[data-theme="dark"] .badge-locked, :root[data-theme="dark"] .badge-zero { background: rgba(255,255,255,.08); color: var(--text-muted); } /* Yanlış tahmin satırı (açık gri yerine koyu) */ :root[data-theme="dark"] .pred-row.wrong { background: var(--surface-alt); } :root[data-theme="dark"] .pred-row.wrong .pred-row__pts { color: var(--text-muted); } /* Google butonu hover */ :root[data-theme="dark"] .btn-google:hover { background: var(--surface-alt); border-color: var(--border); } /* ============================================================= Bootstrap bileşenleri (varsayılan beyaz zeminler) ============================================================= */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--surface); color: var(--text-primary); border-color: var(--border); } :root[data-theme="dark"] .form-control::placeholder { color: color-mix(in oklab, var(--text-muted) 80%, transparent); } :root[data-theme="dark"] .input-group-text { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); } :root[data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-lg); } :root[data-theme="dark"] .dropdown-item { color: var(--text-primary); } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background: var(--surface-alt); color: var(--text-primary); } :root[data-theme="dark"] .dropdown-divider { border-color: var(--border); } :root[data-theme="dark"] .modal-content { background: var(--surface); color: var(--text-primary); } :root[data-theme="dark"] .form-check-input { background-color: var(--surface); border-color: var(--border); } :root[data-theme="dark"] .form-check-input:checked { background-color: var(--brand-sky); border-color: var(--brand-sky); } /* ============================================================= Tema değiştirme butonu (navbar) ============================================================= */ .theme-toggle { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted); font-size: 1.05rem; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .theme-toggle:hover { color: var(--brand-sky-dark); border-color: var(--brand-sky); } /* ikon değişimi */ .theme-toggle .bi-sun-fill { display: none; } .theme-toggle .bi-moon-stars-fill { display: inline-block; } :root[data-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; } :root[data-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }