/* ============================================================ * Forum Tema Sistemi — forum-themes.css * ------------------------------------------------------------ * Kullanım: ya da üzerinde * data-forum-theme="indigo|ocean|emerald|sunset|rose|slate" * data-forum-mode="light|dark" * ayarlanır. Mode verilmezse sistem tercihine (prefers-color-scheme) * uyulur. Tema verilmezse 'indigo' (varsayılan) kullanılır. * * Her tema hem açık hem koyu varyant tanımlar. Değişkenler forum.css * içindeki --forum-* değişkenlerini override eder. * ============================================================ */ /* Ortak (temadan bağımsız) */ :root { --forum-radius: 14px; --forum-radius-sm: 10px; --forum-like: #e0245e; } /* ============================================================ * 1) INDIGO (varsayılan) * ============================================================ */ [data-forum-theme="indigo"], :root { --forum-border: rgba(0,0,0,.08); --forum-surface: #ffffff; --forum-surface-2: #f7f8fa; --forum-card: #ffffff; --forum-text: #1f2330; --forum-text-muted: #6b7280; --forum-accent: #4f46e5; --forum-accent-soft: #eef2ff; --forum-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06); } [data-forum-theme="indigo"][data-forum-mode="dark"] { --forum-border: rgba(255,255,255,.10); --forum-surface: #1b1e27; --forum-surface-2: #232735; --forum-card: #1b1e27; --forum-text: #e7e9ee; --forum-text-muted: #9aa1ad; --forum-accent: #8b85f0; --forum-accent-soft: #2a2747; --forum-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35); } /* ============================================================ * 2) OCEAN (mavi-camgöbeği) * ============================================================ */ [data-forum-theme="ocean"] { --forum-border: rgba(0,0,0,.08); --forum-surface: #ffffff; --forum-surface-2: #f0f7fb; --forum-card: #ffffff; --forum-text: #0f2330; --forum-text-muted: #5b7286; --forum-accent: #0891b2; --forum-accent-soft: #e0f5fa; --forum-shadow: 0 1px 2px rgba(8,40,56,.05), 0 4px 16px rgba(8,40,56,.08); } [data-forum-theme="ocean"][data-forum-mode="dark"] { --forum-border: rgba(255,255,255,.10); --forum-surface: #0e1b24; --forum-surface-2: #14252f; --forum-card: #0e1b24; --forum-text: #e2eef3; --forum-text-muted: #8aa2b0; --forum-accent: #22d3ee; --forum-accent-soft: #123540; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } /* ============================================================ * 3) EMERALD (yeşil) * ============================================================ */ [data-forum-theme="emerald"] { --forum-border: rgba(0,0,0,.08); --forum-surface: #ffffff; --forum-surface-2: #f0fbf4; --forum-card: #ffffff; --forum-text: #122a1d; --forum-text-muted: #5c7567; --forum-accent: #059669; --forum-accent-soft: #d9f5e7; --forum-shadow: 0 1px 2px rgba(8,56,32,.05), 0 4px 16px rgba(8,56,32,.08); } [data-forum-theme="emerald"][data-forum-mode="dark"] { --forum-border: rgba(255,255,255,.10); --forum-surface: #0d1f17; --forum-surface-2: #13291e; --forum-card: #0d1f17; --forum-text: #e0f1e8; --forum-text-muted: #88a596; --forum-accent: #34d399; --forum-accent-soft: #123c2b; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } /* ============================================================ * 4) SUNSET (turuncu-amber) * ============================================================ */ [data-forum-theme="sunset"] { --forum-border: rgba(0,0,0,.08); --forum-surface: #ffffff; --forum-surface-2: #fff6ef; --forum-card: #ffffff; --forum-text: #2e1c12; --forum-text-muted: #8a6f5c; --forum-accent: #ea580c; --forum-accent-soft: #ffeada; --forum-shadow: 0 1px 2px rgba(80,40,8,.05), 0 4px 16px rgba(80,40,8,.08); } [data-forum-theme="sunset"][data-forum-mode="dark"] { --forum-border: rgba(255,255,255,.10); --forum-surface: #221610; --forum-surface-2: #2c1d14; --forum-card: #221610; --forum-text: #f3e7df; --forum-text-muted: #b09586; --forum-accent: #fb923c; --forum-accent-soft: #3d2616; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } /* ============================================================ * 5) ROSE (pembe-magenta) * ============================================================ */ [data-forum-theme="rose"] { --forum-border: rgba(0,0,0,.08); --forum-surface: #ffffff; --forum-surface-2: #fdf2f6; --forum-card: #ffffff; --forum-text: #2c1420; --forum-text-muted: #8a6675; --forum-accent: #e11d72; --forum-accent-soft: #fce0ec; --forum-shadow: 0 1px 2px rgba(80,8,40,.05), 0 4px 16px rgba(80,8,40,.08); } [data-forum-theme="rose"][data-forum-mode="dark"] { --forum-border: rgba(255,255,255,.10); --forum-surface: #21121a; --forum-surface-2: #2b1722; --forum-card: #21121a; --forum-text: #f3e0ea; --forum-text-muted: #b08699; --forum-accent: #f472b6; --forum-accent-soft: #3d1628; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } /* ============================================================ * 6) SLATE (nötr gri — kurumsal) * ============================================================ */ [data-forum-theme="slate"] { --forum-border: rgba(0,0,0,.10); --forum-surface: #ffffff; --forum-surface-2: #f1f5f9; --forum-card: #ffffff; --forum-text: #1e293b; --forum-text-muted: #64748b; --forum-accent: #475569; --forum-accent-soft: #e2e8f0; --forum-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06); } [data-forum-theme="slate"][data-forum-mode="dark"] { --forum-border: rgba(255,255,255,.10); --forum-surface: #0f172a; --forum-surface-2: #1e293b; --forum-card: #0f172a; --forum-text: #e2e8f0; --forum-text-muted: #94a3b8; --forum-accent: #94a3b8; --forum-accent-soft: #1e293b; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } /* ============================================================ * Sistem tercihine uyum (mode belirtilmediğinde) * Yalnız data-forum-mode YOKKEN prefers-color-scheme devreye girer. * Her tema için koyu varyant tekrarlanır. * ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-forum-mode]), [data-forum-theme="indigo"]:not([data-forum-mode]) { --forum-border: rgba(255,255,255,.10); --forum-surface: #1b1e27; --forum-surface-2: #232735; --forum-card: #1b1e27; --forum-text: #e7e9ee; --forum-text-muted: #9aa1ad; --forum-accent: #8b85f0; --forum-accent-soft: #2a2747; --forum-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35); } [data-forum-theme="ocean"]:not([data-forum-mode]) { --forum-border: rgba(255,255,255,.10); --forum-surface: #0e1b24; --forum-surface-2: #14252f; --forum-card: #0e1b24; --forum-text: #e2eef3; --forum-text-muted: #8aa2b0; --forum-accent: #22d3ee; --forum-accent-soft: #123540; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } [data-forum-theme="emerald"]:not([data-forum-mode]) { --forum-border: rgba(255,255,255,.10); --forum-surface: #0d1f17; --forum-surface-2: #13291e; --forum-card: #0d1f17; --forum-text: #e0f1e8; --forum-text-muted: #88a596; --forum-accent: #34d399; --forum-accent-soft: #123c2b; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } [data-forum-theme="sunset"]:not([data-forum-mode]) { --forum-border: rgba(255,255,255,.10); --forum-surface: #221610; --forum-surface-2: #2c1d14; --forum-card: #221610; --forum-text: #f3e7df; --forum-text-muted: #b09586; --forum-accent: #fb923c; --forum-accent-soft: #3d2616; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } [data-forum-theme="rose"]:not([data-forum-mode]) { --forum-border: rgba(255,255,255,.10); --forum-surface: #21121a; --forum-surface-2: #2b1722; --forum-card: #21121a; --forum-text: #f3e0ea; --forum-text-muted: #b08699; --forum-accent: #f472b6; --forum-accent-soft: #3d1628; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } [data-forum-theme="slate"]:not([data-forum-mode]) { --forum-border: rgba(255,255,255,.10); --forum-surface: #0f172a; --forum-surface-2: #1e293b; --forum-card: #0f172a; --forum-text: #e2e8f0; --forum-text-muted: #94a3b8; --forum-accent: #94a3b8; --forum-accent-soft: #1e293b; --forum-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.4); } } /* Yumuşak geçiş (tema değişiminde) */ .forum-wrap, .forum-card, .forum-post, .forum-btn, .forum-input, .forum-topic-row, .forum-mod-item, .forum-form-card { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } /* ============================================================ * SAYFA ZEMİNİ — tema tüm sayfaya uygulanır (sadece kartlara değil). * data-forum-theme attribute'u üzerinde olduğundan, body ve * forum kapsayıcıları tema yüzey rengini alır. * ============================================================ */ html[data-forum-theme] body { background-color: var(--forum-surface-2); color: var(--forum-text); } /* Forum içeriğini saran bölge tam zemini kaplasın */ html[data-forum-theme] .forum-wrap, html[data-forum-theme] .forum-wrap-wide { background-color: transparent; color: var(--forum-text); } /* Sayfa genelinde metin/bağlantı tonları temaya uysun */ html[data-forum-theme] .container { color: var(--forum-text); } html[data-forum-theme] .text-muted { color: var(--forum-text-muted) !important; } /* ============================================================ * Tema değiştirici bileşeni (header'a yerleşir) * ============================================================ */ .forum-theme-switcher { display: inline-flex; align-items: center; gap: 8px; position: relative; } .forum-theme-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer; background: var(--forum-surface-2); color: var(--forum-text); border: 1px solid var(--forum-border); font-size: .85rem; } .forum-theme-btn:hover { border-color: var(--forum-accent); } .forum-theme-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; background: var(--forum-surface); border: 1px solid var(--forum-border); border-radius: var(--forum-radius-sm); box-shadow: var(--forum-shadow); padding: 12px; min-width: 240px; display: none; } .forum-theme-menu.open { display: block; } .forum-theme-menu h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--forum-text-muted); margin: 4px 2px 8px; } .forum-theme-palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .forum-theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 6px; border-radius: 8px; border: 2px solid transparent; font-size: .72rem; color: var(--forum-text-muted); } .forum-theme-swatch:hover { background: var(--forum-surface-2); } .forum-theme-swatch.active { border-color: var(--forum-accent); color: var(--forum-text); } .forum-theme-dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--forum-border); } .forum-mode-toggle { display: flex; gap: 6px; border-top: 1px solid var(--forum-border); padding-top: 10px; } .forum-mode-opt { flex: 1; text-align: center; padding: 6px; border-radius: 8px; cursor: pointer; font-size: .78rem; border: 1px solid var(--forum-border); color: var(--forum-text-muted); } .forum-mode-opt.active { background: var(--forum-accent-soft); color: var(--forum-accent); border-color: var(--forum-accent); }