/* * Dark Mode — JustVideo teması * Aktif olduğunda ile tetiklenir. */ /* ── Geçiş animasyonu ─────────────────────────────────────────── */ html { transition: background-color 0.25s ease, color 0.25s ease; } /* ══════════════════════════════════════════════════════════════════ TOGGLE BUTONU KONUMU .header-toggles masaüstünde position:absolute right:5px — search barın üstüne düşüyor. Masaüstünde float:right yaparak search'ün soluna taşıyoruz. ══════════════════════════════════════════════════════════════════ */ /* Her ekran boyutunda görünür */ .header-toggles { display: block !important; } /* Masaüstü: flow içine al, float right; hamburger gizle */ @media (min-width: 960px) { .header-toggles { position: relative !important; float: right !important; right: auto !important; top: auto !important; line-height: 60px !important; } .header-toggles .nav-toggle { display: none !important; } } .jv-dm-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: 0 6px; border: none !important; background: transparent !important; box-shadow: none !important; cursor: pointer; color: #666; line-height: 1; vertical-align: middle; border-radius: 50% !important; transition: color 0.2s, background 0.2s; } .jv-dm-btn:hover { background: rgba(0, 153, 229, 0.1) !important; color: #0099e5 !important; opacity: 1 !important; } /* Açık modda: ay görünür */ .jv-dm-btn .jv-dm-sun { display: none; } .jv-dm-btn .jv-dm-moon { display: block; } /* Koyu modda: güneş görünür */ [data-theme="dark"] .jv-dm-btn .jv-dm-sun { display: block; } [data-theme="dark"] .jv-dm-btn .jv-dm-moon { display: none; } [data-theme="dark"] .jv-dm-btn { color: #aaa !important; } [data-theme="dark"] .jv-dm-btn:hover { color: #fff !important; background: rgba(255, 255, 255, 0.1) !important; } /* ══════════════════════════════════════════════════════════════════ KOYU MOD — CSS DEĞİŞKENLERİ Tema bu değişkenleri her yerde kullandığı için sadece bunları geçersiz kılmak tüm elementleri otomatik günceller. ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --justvideo-bg: #0f1012; --justvideo-surface: #1a1c1f; --justvideo-border: #2a2d32; --justvideo-text: #e0e2e6; --justvideo-muted: #7a8494; --justvideo-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } /* ── Body & Sayfa ─────────────────────────────────────────────── */ [data-theme="dark"] body { background: var(--justvideo-bg) !important; color: var(--justvideo-text) !important; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #eef0f3 !important; } /* Bağlantılar: accent rengi korunur, visited biraz soluk */ [data-theme="dark"] a:visited { color: var(--justvideo-muted) !important; } /* ── Header ───────────────────────────────────────────────────── */ [data-theme="dark"] .site-header { background-color: rgba(20, 22, 25, 0.97) !important; border-bottom-color: var(--justvideo-border) !important; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4) !important; } /* Logo başlık */ [data-theme="dark"] .site-branding .site-title a, [data-theme="dark"] .site-branding .site-title a:visited { color: var(--justvideo-text) !important; } /* Arama kutusu */ [data-theme="dark"] .header-search { background: #22252a !important; border-color: var(--justvideo-border) !important; overflow: hidden !important; /* submit buton taşmasını önler */ } [data-theme="dark"] .header-search .search-input { background: transparent !important; color: var(--justvideo-text) !important; } [data-theme="dark"] .header-search .search-input::placeholder { color: var(--justvideo-muted) !important; } [data-theme="dark"] .header-search .search-submit { background-color: var(--justvideo-accent, #0099e5) !important; position: absolute !important; right: 0 !important; top: 0 !important; } /* Birincil menü */ [data-theme="dark"] #primary-menu li a, [data-theme="dark"] #primary-menu li a:visited { color: var(--justvideo-text) !important; } [data-theme="dark"] #primary-menu > li > a:hover, [data-theme="dark"] #primary-menu li.current-menu-item > a { border-bottom-color: var(--justvideo-accent, #0099e5) !important; } [data-theme="dark"] #primary-menu ul, [data-theme="dark"] #primary-menu li li { background-color: #1a1c1f !important; border-color: var(--justvideo-border) !important; } /* ── Sol Kenar Çubuğu ─────────────────────────────────────────── */ [data-theme="dark"] .left-sidebar { background-color: #141618 !important; border-right: 1px solid var(--justvideo-border) !important; scrollbar-color: #3a3d42 transparent !important; } [data-theme="dark"] .left-sidebar::-webkit-scrollbar-thumb { background-color: #3a3d42 !important; } [data-theme="dark"] .left-sidebar::-webkit-scrollbar-thumb:hover { background-color: #555 !important; } [data-theme="dark"] #left-menu li a, [data-theme="dark"] #left-menu li a:visited { color: var(--justvideo-text) !important; } [data-theme="dark"] #left-menu li.sfHover a, [data-theme="dark"] #left-menu li a:hover { background-color: #22252a !important; color: var(--justvideo-accent, #0099e5) !important; } /* ── Dikey ayraç çizgisi ──────────────────────────────────────── */ [data-theme="dark"] .home .site-content:before, [data-theme="dark"] .archive .site-content:before, [data-theme="dark"] .search .site-content:before { border-left-color: var(--justvideo-border) !important; } /* ── Post Kartları — CSS değişkenleri zaten halleder ──────────── */ /* Ek: başlık ve meta renkleri */ [data-theme="dark"] .entry-title a, [data-theme="dark"] .entry-title a:visited, [data-theme="dark"] .content-loop .entry-title a, [data-theme="dark"] .content-block-1 .hentry .entry-title a { color: var(--justvideo-text) !important; } [data-theme="dark"] .content-loop .entry-title a:hover, [data-theme="dark"] .content-block-1 .hentry .entry-title a:hover { color: var(--justvideo-accent, #0099e5) !important; } /* ── İlgili Yazılar (Sidebar) ─────────────────────────────────── */ [data-theme="dark"] .sidebar .widget .widget-title, [data-theme="dark"] .sidebar .widgettitle { color: #eef0f3 !important; } [data-theme="dark"] .sidebar .widget a { color: var(--justvideo-text) !important; } [data-theme="dark"] .sidebar .widget a:hover { color: var(--justvideo-accent, #0099e5) !important; } [data-theme="dark"] .sidebar .widget .entry-meta, [data-theme="dark"] .sidebar .widget .entry-date { color: var(--justvideo-muted) !important; } /* ── Tekil Yazı İçeriği ───────────────────────────────────────── */ [data-theme="dark"] .single .site-main, [data-theme="dark"] .page .site-main, [data-theme="dark"] .error404 .site-main { background: var(--justvideo-surface) !important; border-color: var(--justvideo-border) !important; } [data-theme="dark"] .entry-content, [data-theme="dark"] .entry-content p { color: var(--justvideo-text) !important; } [data-theme="dark"] .entry-content a { color: var(--justvideo-accent, #0099e5) !important; } /* Tekil yazı meta */ [data-theme="dark"] .single .entry-header .entry-category a, [data-theme="dark"] .entry-author a, [data-theme="dark"] .entry-date, [data-theme="dark"] .entry-comment a { color: var(--justvideo-muted) !important; } /* ── Footer ───────────────────────────────────────────────────── */ /* --justvideo-surface değişkeni zaten #site-bottom'u kapsar. Ek override: border-top rengi */ [data-theme="dark"] #site-bottom { border-top-color: var(--justvideo-border) !important; } /* ── Form öğeleri ─────────────────────────────────────────────── */ [data-theme="dark"] input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="url"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: #22252a !important; border-color: var(--justvideo-border) !important; color: var(--justvideo-text) !important; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus { border-color: #555 !important; } /* ── Yorum alanı ──────────────────────────────────────────────── */ [data-theme="dark"] .comment-list .comment-body, [data-theme="dark"] #respond { background-color: var(--justvideo-surface) !important; border-color: var(--justvideo-border) !important; } /* ── Pagination ───────────────────────────────────────────────── */ [data-theme="dark"] .pagination .page-numbers { background-color: var(--justvideo-surface) !important; color: var(--justvideo-text) !important; border-color: var(--justvideo-border) !important; } [data-theme="dark"] .pagination .page-numbers:hover { background-color: #252830 !important; color: var(--justvideo-accent, #0099e5) !important; border-color: var(--justvideo-accent, #0099e5) !important; } [data-theme="dark"] .pagination .page-numbers.current { background-color: var(--justvideo-accent, #0099e5) !important; color: #fff !important; border-color: var(--justvideo-accent, #0099e5) !important; } [data-theme="dark"] .pagination .page-numbers.dots { background: transparent !important; color: var(--justvideo-muted) !important; border-color: transparent !important; } /* ── Mobil menü modalı ────────────────────────────────────────── */ /* .menu-modal ve .menu-modal-inner #fff hardcoded — her ikisi override */ [data-theme="dark"] .menu-modal, [data-theme="dark"] .menu-modal-inner { background: #141618 !important; } [data-theme="dark"] .menu-modal a, [data-theme="dark"] .menu-modal a:visited, [data-theme="dark"] .menu-modal .toggle-text, [data-theme="dark"] .menu-modal .close-nav-toggle, [data-theme="dark"] .modal-menu a, [data-theme="dark"] .modal-menu a:visited { color: var(--justvideo-text) !important; } [data-theme="dark"] .menu-modal .modal-menu li, [data-theme="dark"] .modal-menu li { border-color: var(--justvideo-border) !important; } [data-theme="dark"] button.sub-menu-toggle { border-color: var(--justvideo-border) !important; background: transparent !important; color: var(--justvideo-text) !important; } [data-theme="dark"] button.sub-menu-toggle svg { fill: var(--justvideo-text) !important; } [data-theme="dark"] button.close-nav-toggle svg { fill: var(--justvideo-text) !important; } /* ── Hamburger ikon rengi ─────────────────────────────────────── */ [data-theme="dark"] .header-toggles .toggle-icon svg { fill: var(--justvideo-text) !important; } [data-theme="dark"] .header-toggles .toggle-text { color: var(--justvideo-text) !important; } /* ── Tablo ────────────────────────────────────────────────────── */ [data-theme="dark"] table { color: var(--justvideo-text) !important; border-color: var(--justvideo-border) !important; } [data-theme="dark"] table th, [data-theme="dark"] table td { border-color: var(--justvideo-border) !important; } /* ── Etiket bulutları ─────────────────────────────────────────── */ [data-theme="dark"] .widget_tag_cloud .tagcloud a { color: var(--justvideo-text) !important; border-color: var(--justvideo-border) !important; background: var(--justvideo-surface) !important; }