/* * css/dark-mode.css * حالت شب قالب ناکامان. * فعال‌سازی با افزودن کلاس "dark-mode" روی تگ (توسط js/dark-mode.js). * پالت رنگی تیره طوری انتخاب شده که با رنگ اصلی برند (#65cbbe) هماهنگ بماند * و در تمام صفحات (آرشیو، تک‌پست، خواننده‌ها، نظرات، فرم‌ها) یکدست باشد. */ html.dark-mode { --dm-bg: #14161c; /* پس‌زمینه اصلی صفحه */ --dm-bg-alt: #1c1f26; /* پس‌زمینه هدر / نوار جستجو دسکتاپ */ --dm-surface: #1e2129; /* پس‌زمینه کارت‌ها (پست‌ها، باکس‌ها) */ --dm-surface-2: #262a33; /* پس‌زمینه سطح دوم (هاور، اینپوت‌ها) */ --dm-border: #2e333d; /* خط‌دورها */ --dm-text: #e8eaee; /* متن اصلی */ --dm-text-muted: #9aa1ac; /* متن کم‌رنگ / ثانویه */ --dm-accent: #65cbbe; /* رنگ برند - بدون تغییر */ --dm-accent-dark: #3b9e91; } /* ===================== پایه ===================== */ html.dark-mode body { background: var(--dm-bg); color: var(--dm-text); } /* ===================== دکمه سوییچ حالت شب ===================== */ .dark-mode-toggle { display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; border: 0; background: none; } .dark-mode-toggle svg { display: block; pointer-events: none; } .dark-mode-toggle .icon-sun { display: none; } html.dark-mode .dark-mode-toggle .icon-sun { display: block; } html.dark-mode .dark-mode-toggle .icon-moon { display: none; } /* دکمه در هدر دسکتاپ - بعد از فرم جستجو */ .desktop-dark-toggle { width: 42px; height: 42px; border-radius: 50%; background: #eafbf9; border: 1px solid #d3f2ee; color: #16332f; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease; } .desktop-dark-toggle:hover { background: #65cbbe; border-color: #65cbbe; color: #fff; transform: translateY(-2px); } .desktop-dark-toggle svg { width: 20px; height: 20px; } html.dark-mode .desktop-dark-toggle { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-accent); } html.dark-mode .desktop-dark-toggle:hover { background: var(--dm-accent); border-color: var(--dm-accent); color: #0e2624; } /* بستهٔ آیکون خواننده‌ها + حالت شب در هدر موبایل - همیشه کنار هم */ .mobile-header-actions { display: flex; align-items: center; gap: 14px; } /* دکمه در هدر موبایل - کنار آیکون خواننده‌ها */ .mobile-dark-toggle { width: 26px; height: 26px; color: #fff; } .mobile-dark-toggle svg { width: 22px; height: 22px; } /* ===================== هدر دسکتاپ ===================== */ @media (min-width: 768px) { html.dark-mode header { background: linear-gradient(180deg, var(--dm-bg-alt) 0%, var(--dm-bg) 100%); box-shadow: 0 4px 24px rgba(0, 0, 0, .35); } html.dark-mode .menulink > * { background: var(--dm-surface-2); border-color: var(--dm-border); } html.dark-mode .menulink a { color: var(--dm-text); } html.dark-mode .menulink > *:hover { background: var(--dm-accent); border-color: var(--dm-accent); } html.dark-mode .menulink > *:hover a { color: #0e2624; } html.dark-mode .search { background: var(--dm-surface-2); border-color: var(--dm-border); } html.dark-mode #s { color: var(--dm-text); } html.dark-mode #s::placeholder { color: var(--dm-text-muted); } } /* ===================== هدر و منوی موبایل (از قبل تیره است، فقط هماهنگ‌سازی) ===================== */ html.dark-mode .mobile-search-static { background: var(--dm-bg-alt); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } html.dark-mode .mobile-search-static input { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode .mobile-search-static input:focus { background: var(--dm-surface); } html.dark-mode .mobile-search-static input::placeholder { color: var(--dm-text-muted); } /* ===================== تیترها / نوارهای معرفی ===================== */ html.dark-mode .titr1, html.dark-mode .titr2 { background: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode .tops { background: linear-gradient(180deg, var(--dm-bg) 0%, var(--dm-bg-alt) 100%); } html.dark-mode .tops .toplink a { background: linear-gradient(135deg, var(--dm-surface) 0%, var(--dm-surface-2) 70%); border-color: var(--dm-border); } html.dark-mode .toplink a span { color: var(--dm-text); } html.dark-mode .notic { background: var(--dm-surface); color: var(--dm-text-muted); } html.dark-mode .slider { background: var(--dm-bg); } /* ===================== کارت‌های پست / آرشیو ===================== */ html.dark-mode .bpost { background: var(--dm-surface); color: var(--dm-text); box-shadow: 0 4px 20px rgba(0, 0, 0, .35); } html.dark-mode .bpost p, html.dark-mode .bpost main h2, html.dark-mode .bpost main h3, html.dark-mode .sliderPost main { color: var(--dm-text); } html.dark-mode .song-title a { color: var(--dm-text); } html.dark-mode .song-title a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8eaee'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E"); } html.dark-mode .datainner .post-taxonomy-info { background: var(--dm-surface-2); color: var(--dm-text-muted); border-color: var(--dm-border); } html.dark-mode .svcmp3, html.dark-mode .nkpnvi { background: var(--dm-surface-2); } html.dark-mode .dasteh2 { color: var(--dm-text); } html.dark-mode .related-songs-box, html.dark-mode .category-item, html.dark-mode .tabarch, html.dark-mode .playlist-cover-box, html.dark-mode .nkm-crosssell-item, html.dark-mode #mediaad-y3Yj0 { background: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode .category-item a { color: var(--dm-text); } html.dark-mode .category-item:hover { border-color: var(--dm-border); } /* ===================== سایدبار / باکس‌ها ===================== */ html.dark-mode .box { background: var(--dm-surface); } html.dark-mode .box .boxTitle { color: var(--dm-text); } html.dark-mode .box.category ul li { background: var(--dm-surface); color: var(--dm-text); } html.dark-mode .box.category ul li a, html.dark-mode .box.list a, html.dark-mode .box.artist a { color: var(--dm-text-muted); } html.dark-mode .box.category ul li a:hover, html.dark-mode .box.list a:hover, html.dark-mode .box.artist a:hover { color: var(--dm-accent); } html.dark-mode .box.artist a { background: var(--dm-surface-2); } html.dark-mode .singer { background: var(--dm-surface); } /* ===================== صفحه خواننده‌ها ===================== */ html.dark-mode .nk-singer-letters { background: var(--dm-surface); border-color: var(--dm-border); } html.dark-mode .nk-letter-link { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text-muted); } html.dark-mode .nk-letter-link:first-child { background: var(--dm-surface-2); border-color: var(--dm-border); } html.dark-mode .nk-singer-card { background: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode .nk-singer-avatar { background: var(--dm-surface-2); } html.dark-mode .nk-search-singer-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html.dark-mode .nk-search-singer-card-link:hover { background: var(--dm-surface-2) !important; } html.dark-mode .nk-search-singer-name { color: var(--dm-text) !important; } /* ===================== دکمهٔ لایک ===================== */ html.dark-mode .nk-like-btn { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text-muted); } html.dark-mode .nk-like-btn:hover { border-color: #ff4b5c; color: #ff4b5c; } html.dark-mode .nk-like-btn.is-liked { background: rgba(255, 75, 92, .12); border-color: #ff4b5c; color: #ff4b5c; } /* ===================== فرم‌ها (Gravity Forms و فرم نظر) ===================== */ html.dark-mode .gform_wrapper form { background: var(--dm-surface) !important; color: var(--dm-text) !important; } html.dark-mode .gform_wrapper .gfield_label, html.dark-mode .gform_wrapper .gform-field-label { color: var(--dm-text) !important; } html.dark-mode .gform_wrapper input[type=email], html.dark-mode .gform_wrapper input[type=text] { background: var(--dm-surface-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .comment-form-wrapper { background: linear-gradient(180deg, var(--dm-surface) 0%, var(--dm-bg-alt) 55%); border-color: var(--dm-border); } html.dark-mode #commentform label { color: var(--dm-text); } html.dark-mode #commentform input[type="text"], html.dark-mode #commentform input[type="email"], html.dark-mode #commentform textarea { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode #commentform input::placeholder, html.dark-mode #commentform textarea::placeholder { color: var(--dm-text-muted); } html.dark-mode .commentsbox input[type=text] { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } /* ===================== نظرات ===================== */ html.dark-mode .comments-area { background: var(--dm-bg); } html.dark-mode .comment-body { background: var(--dm-surface); border-color: var(--dm-border); } html.dark-mode .comment-author { color: var(--dm-text); } html.dark-mode .comment-content { color: var(--dm-text-muted); } html.dark-mode .comment-avatar-img { border-color: var(--dm-surface-2); } html.dark-mode .comment-list .children { border-right-color: var(--dm-border); } html.dark-mode .comment-list li.depth-2 > .comment-body { background: var(--dm-surface-2); border-right-color: var(--dm-accent); } html.dark-mode .comment-list li.depth-3 > .comment-body { background: var(--dm-surface-2); border-right-color: #a78bd6; } html.dark-mode .comment-list li.depth-4 > .comment-body, html.dark-mode .comment-list li.depth-5 > .comment-body { background: var(--dm-surface-2); border-right-color: #e08e8e; } html.dark-mode .comment-list li.bypostauthor > .comment-body { background: var(--dm-surface-2); border-color: var(--dm-accent-dark); } /* ===================== فوتر ===================== */ html.dark-mode .copyright { background: linear-gradient(180deg, var(--dm-bg-alt) 0%, var(--dm-bg) 100%); color: var(--dm-text-muted); } /* ===================== فروشگاه / دانلود (EDD) ===================== */ html.dark-mode #edd_checkout_wrap, html.dark-mode #edd_checkout_cart tbody tr, html.dark-mode .edd-table tbody tr { background: var(--dm-surface); color: var(--dm-text); } html.dark-mode .edd-input { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } /* ===================== اسکرول‌بار (اختیاری، برای هماهنگی بیشتر) ===================== */ html.dark-mode ::-webkit-scrollbar-track { background: var(--dm-bg); }