/* =================================================================== ScoutGS — Dark Mode (Koyu Tema) ------------------------------------------------------------------- Bu dosya index.css'in ÜZERİNE yüklenir ve hiçbir stok/marka kuralını değiştirmez. Tüm kurallar ile kapsanmıştır; bu sınıf scripts/darkmode.js tarafından, kullanıcının tercihine göre (localStorage veya işletim sistemi tercihi) sayfa çizilmeden ÖNCE index.template.php içindeki küçük satır-içi script ile eklenir (aksi halde kısa bir "beyaz yanıp sönme" — FOUC — görülür). Tasarım kararı: Üst başlık (#top_section, altın #fdb614) ve kategori çubukları (.cat_bar, bordo #a32638) marka rengini KORUR — koyu modda da aynı kalır. Bu, birçok sitede koyu temada bile renkli üst çubuğun korunmasıyla aynı mantık; istenirse bu da koyulaştırılabilir. =================================================================== */ html.theme-dark { --dm-bg-page: #120b0c; --dm-bg-surface: #1b1b1b; --dm-bg-surface-alt: #212121; --dm-bg-hover: #2a2a2a; --dm-border: #3a3a3a; --dm-border-light: #474747; --dm-text: #dcdcdc; --dm-text-secondary: #adadad; --dm-text-muted: #8a8a8a; --dm-link: #ff6b82; --dm-link-hover: #ff8fa1; --dm-maroon: #a32638; --dm-gold: #fdb614; --dm-row-even: #241c14; --dm-row-odd: #1e1810; --dm-row-hover: #34281a; --dm-row-target: #4a3510; --dm-input-bg: #232323; --dm-input-border: #4a4a4a; --dm-input-text: #e2e2e2; color-scheme: dark; } /* --- Sayfa zemini ve gövde --- */ html.theme-dark, html.theme-dark body { background: var(--dm-bg-page); } html.theme-dark body { color: var(--dm-text); } html.theme-dark ::selection { background: #5a3a12; color: #fff; } html.theme-dark #wrapper { background: var(--dm-bg-surface); border-color: var(--dm-border); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } html.theme-dark #footer { background: #1b2733; border-top-color: var(--dm-border-light); } /* --- Başlıklar, vurgular --- */ html.theme-dark h1, html.theme-dark h2, html.theme-dark h3, html.theme-dark h4, html.theme-dark h5, html.theme-dark h6, html.theme-dark strong, html.theme-dark .strong { color: #eee; } html.theme-dark hr { background: var(--dm-bg-page); box-shadow: 0 1px 0 var(--dm-border) inset; } html.theme-dark fieldset { border-color: var(--dm-border); } html.theme-dark fieldset legend { color: var(--dm-text-secondary); } /* --- Bağlantılar (marka bordosu koyu zeminde okunmuyor, canlı bir kırmızıya çekildi) --- */ html.theme-dark a, html.theme-dark a:visited { color: var(--dm-link); } html.theme-dark a:hover { color: var(--dm-link-hover); } html.theme-dark .bbc_link:hover { border-bottom-color: var(--dm-link); } html.theme-dark .dropmenu li:hover li a, html.theme-dark .dropmenu li li a { color: var(--dm-link); } /* --- Formlar --- */ html.theme-dark input, html.theme-dark button, html.theme-dark select, html.theme-dark textarea { color: var(--dm-input-text); background: var(--dm-input-bg); border-color: var(--dm-input-border); box-shadow: none; } html.theme-dark input:hover, html.theme-dark textarea:hover, html.theme-dark button:hover, html.theme-dark select:hover { border-color: #6a6a6a; } html.theme-dark textarea:hover { background: #262626; } html.theme-dark input:focus, html.theme-dark textarea:focus, html.theme-dark button:focus, html.theme-dark select:focus { border-color: var(--dm-gold); background: #262626; } html.theme-dark input[disabled], html.theme-dark textarea[disabled], html.theme-dark select[disabled], html.theme-dark .button.disabled, html.theme-dark .button[disabled]:hover { background: #2a2a2a; color: #6f6f6f; border-color: #444; } html.theme-dark .valid_input { background: #16301a; } html.theme-dark .invalid_input { background: #3a1616; } /* --- Alıntı / kod kutuları --- */ html.theme-dark blockquote { border-color: #3a3a3a; background: var(--dm-bg-surface-alt); } html.theme-dark blockquote cite { border-bottom-color: rgba(255, 255, 255, 0.12); color: var(--dm-text-secondary); } html.theme-dark blockquote cite::before { color: var(--dm-text-muted); } html.theme-dark .bbc_standard_quote { background-color: #202838; } html.theme-dark .bbc_alternate_quote { background-color: #17262b; } html.theme-dark .bbc_code { background: #191919; border-color: #3a3a3a; border-top-color: #4a4a4a; border-bottom-color: #555; color: #d6d6d6; } html.theme-dark .codeheader, html.theme-dark .quoteheader { color: var(--dm-text-secondary); } /* --- Üst çubuk içi (menü, arama vb.) — masthead altın rengi korunuyor, sadece açık gri gölgeler yumuşatılıyor --- */ html.theme-dark #inner_wrap { border-bottom-color: rgba(0, 0, 0, 0.2); } /* --- "Tarih / Okunmamış İletiler" çubuğu ve breadcrumb — stokta beyazdı, koyu modda koyu yüzeye çekiliyor --- */ html.theme-dark #inner_section { background: var(--dm-bg-surface-alt); } html.theme-dark .navigate_section ul { background: var(--dm-bg-surface-alt); border-color: var(--dm-border); box-shadow: none; } html.theme-dark .navigate_section ul li { color: var(--dm-text-secondary); text-shadow: none; } html.theme-dark .navigate_section ul li .dividers { color: var(--dm-text-muted); } /* --- Kategori / başlık çubukları --- */ html.theme-dark .roundframe { background: var(--dm-bg-surface-alt); border-color: var(--dm-border); } html.theme-dark .title_bar { background: var(--dm-bg-surface-alt); border-color: var(--dm-border); color: var(--dm-text-secondary); } html.theme-dark .sub_bar { border-bottom-color: var(--dm-border); box-shadow: 0 -1px 0 #555 inset; } html.theme-dark h3.titlebg, html.theme-dark h4.titlebg, html.theme-dark .titlebg, html.theme-dark h3.subbg, html.theme-dark h4.subbg, html.theme-dark .subbg, html.theme-dark .titlebg a, html.theme-dark .subbg a { background: none; color: var(--dm-text-secondary); } html.theme-dark .information { background: var(--dm-bg-surface-alt); border-color: var(--dm-border); } html.theme-dark #display_head p { color: var(--dm-text-muted); } /* --- Mesaj satırları (windowbg) — açık modda sıcak sarı tonlardı, koyu modda aynı sıcak karakteri koruyan koyu kehribar tonlarına çekildi --- */ html.theme-dark .generic_list_wrapper, html.theme-dark .windowbg, html.theme-dark .approvebg, html.theme-dark .approvebg2 { background: var(--dm-row-even); border-color: var(--dm-border); } html.theme-dark .windowbg:nth-of-type(even), html.theme-dark .bg.even { background: var(--dm-row-even); } html.theme-dark .windowbg:nth-of-type(odd), html.theme-dark .bg.odd { background: var(--dm-row-odd); } html.theme-dark .windowbg:target { background: var(--dm-row-target); } html.theme-dark tr.windowbg:hover { background: var(--dm-row-hover); } html.theme-dark .windowbg.locked { background: #23262b; } html.theme-dark .windowbg.sticky { background: #1c2530; } html.theme-dark .windowbg.sticky.locked { background: #262322; } html.theme-dark .windowbg.approvetopic { background: #3a2416; } html.theme-dark .windowbg.approvepost { background: #3a1e1e; } html.theme-dark .approvebg { color: var(--dm-text); background: #3a1e1e; } html.theme-dark .approvebg2 { color: var(--dm-text); background: #331c1c; } html.theme-dark .list_posts { border-top-color: var(--dm-border); box-shadow: none; } html.theme-dark .inner, html.theme-dark .signature, html.theme-dark .attachments, html.theme-dark .under_message, html.theme-dark .custom_fields_above_signature, html.theme-dark .custom_fields_below_signature { border-top-color: var(--dm-border); box-shadow: none; } html.theme-dark #topic_container .windowbg { border-color: var(--dm-border); } /* --- Yazar/gönderi bilgisi renkleri --- */ html.theme-dark .poster h4, html.theme-dark .poster h4 a, html.theme-dark .poster li:hover h4 a, html.theme-dark .poster h4 a:hover, html.theme-dark .poster li h4 a, html.theme-dark .poster h4 a:focus, html.theme-dark .poster li.poster_online a { color: #ff9e57; } html.theme-dark .keyinfo .postinfo a, html.theme-dark .keyinfo .postinfo a strong, html.theme-dark .page_number { color: #e0a24f; } html.theme-dark .keyinfo .postinfo .modified, html.theme-dark .subject_title a, html.theme-dark #ic_recentposts .recenttime strong, html.theme-dark #post_draft_options .settings strong, html.theme-dark #detailedinfo dt, html.theme-dark #tracking dt, html.theme-dark dl.addrules dt.floatleft { color: var(--dm-text-secondary); } html.theme-dark .info .subject { color: #e0a24f; } /* #top_section altın zeminde kalıyor (bkz. dosya başındaki not); genel ".theme-dark a" bağlantı rengi kuralı buraya sızmasın diye forum başlığı orijinal #a85400 rengine sabitleniyor — zaten altın zeminde okunaklı, koyu modda değişmesine gerek yok. */ html.theme-dark h1.forumtitle a { color: #a85400; } /* Aynı nedenle #top_section içindeki tüm bağlantılar (Profil, Mesajlar, Uyarılar vb.) da orijinal bordo rengiyle kalsın — masthead koyu modda da ışık modundakiyle birebir aynı görünsün. */ html.theme-dark #top_section a, html.theme-dark #top_section a:visited { color: #a32638; } html.theme-dark .current_page { color: #e0a24f; } html.theme-dark .counter { color: var(--dm-text-secondary); } /* --- Butonlar --- */ html.theme-dark .button, html.theme-dark .quickbuttons > li > a, html.theme-dark .inline_mod_check { color: var(--dm-text); border-color: #444 #333 #2a2a2a #444; background: var(--dm-bg-surface-alt); background-image: linear-gradient(#2a2a2a 0%, #202020 70%); box-shadow: none; } html.theme-dark .button:hover, html.theme-dark .button:focus, html.theme-dark .quickbuttons > li:hover > a, html.theme-dark .quickbuttons > li > a:focus, html.theme-dark #search_form .button:hover, html.theme-dark .quickbuttons li:hover { color: var(--dm-gold); background: #262626; background-image: linear-gradient(to bottom, #2a2a2a 0%, #333 70%); box-shadow: none; } html.theme-dark .pagesection .button { color: var(--dm-link); } html.theme-dark .button.active { background: var(--dm-maroon); color: #fff; border-color: var(--dm-maroon); } html.theme-dark .button.active:hover, html.theme-dark .button.active:focus { color: var(--dm-gold); background: var(--dm-maroon); } /* --- Açılır menüler / popup pencereler (bu, açık modda paylaşılan gri-mavi gradyanı kullanıyordu — koyu yüzeye çekildi) --- */ html.theme-dark .dropmenu li ul, html.theme-dark .top_menu, html.theme-dark .dropmenu li li:hover, html.theme-dark .dropmenu li li:hover > a, html.theme-dark .dropmenu li li a:focus, html.theme-dark .dropmenu li li a:hover, html.theme-dark .quickbuttons li ul, html.theme-dark .quickbuttons li ul li a:hover, html.theme-dark .quickbuttons ul li a:focus, html.theme-dark .popup_window, html.theme-dark .post_options ul, html.theme-dark .post_options ul a:hover, html.theme-dark .post_options ul a:focus, html.theme-dark .notify_dropdown a:hover, html.theme-dark .notify_dropdown a:focus { background: var(--dm-bg-surface-alt); background-image: linear-gradient(#242424 0%, #1c1c1c 70%); border-color: #444; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6); } html.theme-dark .dropmenu li strong { color: #eee; } html.theme-dark .dropmenu li li:hover > a, html.theme-dark .dropmenu li li a:focus, html.theme-dark .dropmenu li li a:hover { border-color: #4a4a4a; } html.theme-dark .dropmenu > li:hover > a, html.theme-dark .dropmenu > li > a:focus, html.theme-dark #top_info > li:hover > a, html.theme-dark #top_info > li > a:focus, html.theme-dark #top_info > li > a.open { background: #3a3a3a; border-color: #4a4a4a; color: #fff; box-shadow: none; } html.theme-dark .popup_content, html.theme-dark .up_contain { background: var(--dm-bg-surface-alt); background-image: linear-gradient(to bottom, #212121 0%, #1a1a1a 95%); color: var(--dm-text); border-color: #444; } html.theme-dark .popup_container { background: rgba(0, 0, 0, 0.7); } html.theme-dark .popup_heading { color: var(--dm-gold); } html.theme-dark .popup_window, html.theme-dark #main_menu .popup_window, html.theme-dark #genericmenu .popup_window, html.theme-dark #adm_submenus .popup_window { border-color: #555; } html.theme-dark .tooltip { color: var(--dm-text); background: #2a2a2a; border-color: #555; } html.theme-dark .auto_suggest_div { border-color: #4a4a4a; background: #232323; } html.theme-dark .auto_suggest_item { background: #2c2c2c; color: var(--dm-text); } html.theme-dark .auto_suggest_item_hover { background: #3a3a3a; color: #fff; } html.theme-dark .notify_dropdown a:hover, html.theme-dark .notify_dropdown a:focus { border-color: #4a4a4a; } html.theme-dark .unread_notify { border-bottom-color: #3a3a3a; } html.theme-dark .unread_notify:hover { background: #262626; } html.theme-dark .pm_unread, html.theme-dark .alerts_unread { border-top-color: #3a3a3a; } html.theme-dark .atwho-view { background: #232323; border-color: #444; } html.theme-dark .atwho-view ul li { border-bottom-color: #3a3a3a; } html.theme-dark .atwho-view small { color: var(--dm-text-muted); } /* --- Bilgi / uyarı / hata kutuları --- */ html.theme-dark .errorbox { background-color: #3a1616; color: #ffb3b3; border-color: #a33; } html.theme-dark .noticebox { color: #f0dca0; background: #3a3014; border-color: #b38f00; } html.theme-dark .infobox { color: #b9e6b9; background: #16301a; border-color: #2a7a2a; } html.theme-dark .descbox { border-color: #4a4a4a; } html.theme-dark .errorfile_table { background: #202020; } html.theme-dark .errorfile_table td { background: #262626; } html.theme-dark .errorfile_table .current { background: #3a1e1e; } html.theme-dark .errorfile_table .file_line.current { background: #5a2424; } html.theme-dark .errorfile_table .file_line { background: #2a2a2a; } html.theme-dark .coppa_contact { background: #232323; color: var(--dm-text); border-color: #555; } /* --- Çubuklar, ilerleme göstergeleri --- */ html.theme-dark .generic_bar, html.theme-dark .progress_bar { background: #232323; border-color: #4a4a4a; color: var(--dm-text-secondary); } html.theme-dark .activity_stats li span { background: #262626; border-color: #555; } html.theme-dark #personal_messages .capacity_bar { background: #232323; border-color: #555; } /* --- Tablolar / listeler --- */ html.theme-dark .stripes:nth-of-type(even), html.theme-dark .alternative { background-color: #232323; } html.theme-dark .stripes:nth-of-type(odd) { background-color: #1d1d1d; } html.theme-dark .alternative2 { background-color: #262626; } html.theme-dark .boardslist a { border-bottom-color: #4a4a4a; } html.theme-dark .boardslist a:hover { border-bottom-color: var(--dm-link); } html.theme-dark #pick_theme .selected { background: #2a3a4a; } html.theme-dark #detailedinfo dl, html.theme-dark #tracking dl { border-bottom-color: #3a3a3a; } html.theme-dark #ic_recentposts td { border-top-color: #2e2e2e; } html.theme-dark #info_center .sub_bar, html.theme-dark .children, html.theme-dark .up_contain, html.theme-dark #helpmain, html.theme-dark .boardindex_table .board_stats p, html.theme-dark .backtrace:not(:last-child) { border-color: #3a3a3a; } html.theme-dark .unread_pm { background: #16301a; } html.theme-dark .tfacode { background: #1c2c3a; } /* --- Diğer küçük dokunuşlar --- */ html.theme-dark #ajax_in_progress { background: #1b1b1b; } html.theme-dark .toggle_up::before, html.theme-dark .toggle_down::before { background-color: #262626; border-color: #4a4a4a; box-shadow: none; } html.theme-dark .toggle_up:hover:before, html.theme-dark .toggle_down:hover:before { background-color: #3a3a3a; } html.theme-dark .off { background: #555; border-color: #666; } /* Kaydırma çubuğu (isteğe bağlı ama koyu temada göze batmaması için) */ html.theme-dark { scrollbar-color: #4a4a4a #1b1b1b; } html.theme-dark ::-webkit-scrollbar { width: 12px; height: 12px; } html.theme-dark ::-webkit-scrollbar-track { background: #1b1b1b; } html.theme-dark ::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 6px; } html.theme-dark ::-webkit-scrollbar-thumb:hover { background: #5a5a5a; } /* =================================================================== Tema değiştirme düğmesi (sağ alt köşe, sabit) — her iki modda da görünür, ScoutGS marka renkleriyle. =================================================================== */ .theme_toggle_btn { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fdb614; background: #a32638; color: #fdb614; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, background 0.2s ease; padding: 0; } .theme_toggle_btn:hover { transform: scale(1.08); } .theme_toggle_btn .theme_toggle_icon_dark { display: none; } html.theme-dark .theme_toggle_btn { background: #1b1b1b; border-color: #fdb614; color: #fdb614; } html.theme-dark .theme_toggle_btn .theme_toggle_icon_light { display: none; } html.theme-dark .theme_toggle_btn .theme_toggle_icon_dark { display: block; } @media (max-width: 640px) { .theme_toggle_btn { width: 40px; height: 40px; right: 12px; bottom: 12px; font-size: 17px; } } /* =================================================================== Genel Puan Tablosu — "Siz" satırı ------------------------------------------------------------------- Bu tabloyu ekleyen mod, satırı ScoutGS temasının değil, kendi PHP kodunun ürettiği satır-içi bir stille boyuyor: Satır-içi stil normal CSS kurallarından her zaman daha güçlü olduğu için, burada hem o rengi (#fff8dc) hedefleyen bir öznitelik seçici hem de !important kullanmak gerekiyor. =================================================================== */ tr.windowbg[style*="fff8dc" i] { background: #cccccc !important; } html.theme-dark tr.windowbg[style*="fff8dc" i] { background: #333333 !important; } /* =================================================================== Mobil görünümde alt "Forum" dolaşım çubuğunu (breadcrumb) geri getir ------------------------------------------------------------------- Stok SMF, responsive.css içinde 720px altı ekranlarda konu/başlık sayfalarının EN ALTINDAKİ dolaşım çubuğunu (#main_content_section .navigate_section) bilinçli olarak gizliyor — üstteki ile aynı bilgi olduğu için. Kullanıcı bunu istemiyor, aşağıdakini geri açıyoruz. Bu kural mod'dan/temadan bağımsız, hem açık hem koyu modda geçerli olduğu için html.theme-dark ile sınırlandırılmadı. =================================================================== */ @media screen and (max-width: 720px) { #main_content_section .navigate_section { display: block !important; } }