/* ========================================================================== حالت تیره -------------------------------------------------------------------------- ویژگی data-kh-theme روی نشسته و پیش از رنگ‌آمیزی توسط اسکریپت درون‌خطی ست می‌شود، پس هیچ پرش رنگی وجود ندارد. الگوی انتخابگر: [data-kh-theme="dark"] body.kh-site ویژگی (0,3,1) که هم از تعریف پایه body.kh-site (0,1,1) و هم از [data-kh-skin="x"] body.kh-site (0,3,1) — به‌خاطر ترتیب بارگذاری — جلو می‌زند. فایل عمداً بعد از kh-skins.css بارگذاری می‌شود. اصول پالت: ۱. مشکی خالص نیست. #0F1115 به‌جای #000: کنتراست خالص سیاه/سفید باعث «هاله» (halation) می‌شود — متن روی زمینه کاملاً سیاه در چشم لرزان دیده می‌شود، مخصوصاً برای افراد آستیگمات. ۲. متن سفید خالص نیست. #E6E8EC: کاهش شدت، همان دلیل بالا. ۳. سطوح با روشنایی از هم جدا می‌شوند نه با سایه. سایه در تاریکی دیده نمی‌شود؛ هرچه عنصر «بالاتر» باشد روشن‌تر است. ۴. اکسنت هر پوسته حفظ می‌شود ولی روشن‌تر: رنگ‌های اشباع‌شده روی زمینه تیره کنتراست کافی نمی‌دهند و باید یک پله روشن‌تر شوند. ========================================================================== */ [data-kh-theme="dark"] body.kh-site { /* --- سطوح: هرچه بالاتر، روشن‌تر --- */ --kh-bg: #0F1115; /* زمینه صفحه */ --kh-bg-soft: #171A20; /* بخش‌های متمایز */ --kh-paper: #1B1F27; /* کارت‌ها و پنل‌ها */ --kh-field-bg: #171A20; --kh-tag-bg: #242933; /* --- متن --- */ --kh-ink: #E6E8EC; --kh-ink-soft: #D2D6DD; --kh-body-text: #B4BAC5; --kh-muted: #8B93A1; --kh-nav-link: #C3C9D3; --kh-tag-text: #C3C9D3; /* * «navy» در پالت روشن رنگ تیترها بود. در حالت تیره باید معنایش * برعکس شود وگرنه تیترها روی زمینه تیره ناپدید می‌شوند. */ --kh-navy: #F2F4F7; --kh-navy-2: #C9CFD9; --kh-navy-deep: #0B0D11; --kh-line: #2B313C; /* --- اکسنت: همان رنگ پوسته، یک پله روشن‌تر --- */ --kh-gold: #E0AC5C; --kh-gold-light: #F0CB94; --kh-gold-soft: rgba(224, 172, 92, .14); --kh-accent-2: var(--kh-gold); --kh-accent-2-soft: var(--kh-gold-soft); --kh-success: #3FD09A; /* --- فوتر: در تاریکی باید از بدنه جدا بماند --- */ --kh-footer-bg: #0B0D11; --kh-footer-text: #9AA3B1; --kh-footer-title: #F2F4F7; --kh-footer-line: rgba(255, 255, 255, .08); --kh-footer-panel: rgba(255, 255, 255, .04); /* سایه‌ها در تاریکی تقریباً بی‌اثرند؛ عمق با خط و روشنایی ساخته می‌شود */ --kh-shadow-xs: none; --kh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --kh-shadow-card: 0 2px 10px rgba(0, 0, 0, .45); --kh-shadow-nav: 0 6px 22px rgba(0, 0, 0, .55); --kh-shadow-deep: 0 12px 34px rgba(0, 0, 0, .6); --kh-focus: 0 0 0 3px rgba(224, 172, 92, .42); background-image: none; color-scheme: dark; } /* --- اکسنت هر پوسته در حالت تیره --- */ [data-kh-theme="dark"][data-kh-skin="fresh"] body.kh-site { --kh-gold: #2DD4B0; --kh-gold-light: #6FE7CD; --kh-gold-soft: rgba(45, 212, 176, .14); --kh-accent-2: #A98CFF; --kh-accent-2-soft: rgba(169, 140, 255, .16); --kh-focus: 0 0 0 3px rgba(45, 212, 176, .42); } [data-kh-theme="dark"][data-kh-skin="editorial"] body.kh-site { --kh-gold: #FF7A45; --kh-gold-light: #FF9E75; --kh-gold-soft: rgba(255, 122, 69, .14); --kh-accent-2: #FF7A45; --kh-accent-2-soft: rgba(255, 122, 69, .14); --kh-focus: 0 0 0 3px rgba(255, 122, 69, .42); } /* ========================================================================== اصلاح اجزایی که رنگ ثابت دارند ========================================================================== */ /* تصاویر و تصویرهای شاخص کمی کم‌نورتر می‌شوند تا از زمینه بیرون نزنند. ۰.۹ عمدی است — پایین‌تر از آن، عکس‌ها گِل‌آلود می‌شوند. */ [data-kh-theme="dark"] body.kh-site .kh-thumb img, [data-kh-theme="dark"] body.kh-site .kh-card img, [data-kh-theme="dark"] body.kh-site .kh-stage__img { filter: brightness(.9); } /* کارت‌ها با خط از هم جدا شوند، نه با سایه */ [data-kh-theme="dark"] body.kh-site .kh-card, [data-kh-theme="dark"] body.kh-site .kh-voice, [data-kh-theme="dark"] body.kh-site .kh-offer, [data-kh-theme="dark"] body.kh-site .kh-service, [data-kh-theme="dark"] body.kh-site .kh-path, [data-kh-theme="dark"] body.kh-site .kh-project, [data-kh-theme="dark"] body.kh-site .kh-podcast-list, [data-kh-theme="dark"] body.kh-site .kh-hero-card { background: var(--kh-paper); border-color: var(--kh-line); } /* هدر شیشه‌ای: شفافیت روشن روی زمینه تیره، سفیدِ مه‌آلود می‌سازد */ [data-kh-theme="dark"] body.kh-site .kh-navbar { background: rgba(27, 31, 39, .82); border-color: var(--kh-line); } /* نوار پایین موبایل هم شیشه‌ای است و زمینه‌اش در فایل پایه مقدار ثابت سفید دارد (نه توکن)، پس اینجا جا افتاده بود و در حالت تیره یک نوار سفید ته صفحه می‌ماند. خط بالایش از قبل توکن می‌گیرد و خودش تیره می‌شود. */ [data-kh-theme="dark"] body.kh-site .kh-bottomnav { background: rgba(27, 31, 39, .88); /* سایه در تاریکی دیده نمی‌شود؛ جدایی را همان خط بالا می‌سازد */ box-shadow: none; } /* سوییچر پوسته (فقط مدیر می‌بیند) — همان مشکل نوار پایین: زمینه‌اش در فایل پوسته‌ها مقدار ثابت سفید دارد. */ [data-kh-theme="dark"] body.kh-site .kh-skin-switch { background: rgba(27, 31, 39, .92); border-color: var(--kh-line); } /* در پالت تیره ‎--kh-navy‎ برعکس می‌شود و تقریباً سفید است؛ با color:#fff پایه، قرص فعال سفیدِ روی سفید و نامرئی می‌شد. */ [data-kh-theme="dark"] body.kh-site .kh-skin-switch a.is-active { color: var(--kh-navy-deep); } /* دکمه روشن باید در تاریکی هم «روشن» بماند، نه سفیدِ کورکننده */ [data-kh-theme="dark"] body.kh-site .kh-btn--soft { background: var(--kh-paper); border-color: var(--kh-line); color: var(--kh-ink); } [data-kh-theme="dark"] body.kh-site .kh-btn--dark { background: var(--kh-gold); color: #14161B; } [data-kh-theme="dark"] body.kh-site .kh-btn--dark:hover { background: var(--kh-gold-light); } /* بخش‌هایی که در حالت روشن عمداً تیره بودند — نباید دوباره تیره شوند وگرنه از زمینه قابل تشخیص نیستند */ [data-kh-theme="dark"] body.kh-site .kh-cta, [data-kh-theme="dark"] body.kh-site .kh-podcast-feature { background: var(--kh-bg-soft); border: 1px solid var(--kh-line); } /* فیلدها */ [data-kh-theme="dark"] body.kh-site input, [data-kh-theme="dark"] body.kh-site textarea, [data-kh-theme="dark"] body.kh-site select { background: var(--kh-field-bg); border-color: var(--kh-line); color: var(--kh-ink); } [data-kh-theme="dark"] body.kh-site ::placeholder { color: var(--kh-muted); } /* کد داخل مقاله */ [data-kh-theme="dark"] body.kh-site pre, [data-kh-theme="dark"] body.kh-site code { background: #12151A; border-color: var(--kh-line); color: #DCE1E8; } /* لکه تزیینی پس‌زمینه در تاریکی نباید روشن باشد */ [data-kh-theme="dark"] body.kh-site .kh-split--blob::before { background: var(--kh-bg-soft); } /* -------------------------------------------------------------------------- قاب مرورگر در کارت نمونه‌کار نوار و صفحه این قاب رنگ ثابت روشن دارند (`#F1F2F3` و `#F5F6F6`) و از توکن پیروی نمی‌کنند، چون قرار است «یک مرورگر» را تصویر کنند. ولی در حالت تیره نتیجه‌اش دو مستطیل سفیدِ تخت وسط صفحه بود که مثل چراغ‌قوه می‌زد و کل بخش نمونه‌کارها را خراب می‌کرد. اینجا خودِ قاب تیره می‌شود ولی همچنان از کارت پشتش روشن‌تر است، پس هنوز «صفحه‌نمایش» خوانده می‌شود. -------------------------------------------------------------------------- */ [data-kh-theme="dark"] body.kh-site .kh-browser-frame__bar { background: #1B1B22; border-block-end-color: rgba(255, 255, 255, .07); } [data-kh-theme="dark"] body.kh-site .kh-browser-frame__screen { background: #15151A; } [data-kh-theme="dark"] body.kh-site .kh-browser-frame__url { background: rgba(255, 255, 255, .05); color: var(--kh-muted); } /* ========================================================================== دکمه تعویض حالت ========================================================================== */ .kh-theme-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--kh-r-pill); border: 1px solid var(--kh-footer-line); background: var(--kh-footer-panel); } .kh-theme-toggle button { display: grid; place-items: center; inline-size: 34px; block-size: 34px; padding: 0; border: 0; border-radius: var(--kh-r-pill); background: none; color: var(--kh-footer-text); cursor: pointer; transition: background-color var(--kh-t-fast), color var(--kh-t-fast); } .kh-theme-toggle button svg { inline-size: 16px; block-size: 16px; } .kh-theme-toggle button:hover { color: var(--kh-footer-title); } .kh-theme-toggle button[aria-pressed="true"] { background: var(--kh-gold); color: #14161B; } /* بیرون از فوتر (مثلاً داخل کشوی موبایل) رنگ‌ها را از متن اطراف بگیرد */ .kh-drawer .kh-theme-toggle, .kh-side-nav .kh-theme-toggle { border-color: var(--kh-line); background: var(--kh-bg-soft); } .kh-drawer .kh-theme-toggle button { color: var(--kh-body-text); } /* ========================================================================== چاپ -------------------------------------------------------------------------- یک سایت مرجع چاپ و PDF می‌شود. بدون این، خروجی چاپ شامل هدر شناور، فوتر، دکمه‌ها و کل ناوبری است و مقاله در چند صفحه گم می‌شود. ========================================================================== */ @media print { .kh-topbar, .kh-header, .kh-footer, .kh-bottomnav, .kh-theme-toggle, .kh-skin-switch, .kh-to-top, .kh-share, .kh-cta, .kh-drawer, .kh-search-panel, .kh-read-progress, .kh-rail__nav, .kh-rail__dots, .kh-article-layout__aside { display: none !important; } body.kh-site { background: #fff !important; color: #000 !important; font-size: 12pt; } .kh-article-layout { display: block !important; } .kh-prose { max-inline-size: none !important; } /* آدرس لینک‌ها چاپ شود — روی کاغذ نمی‌شود کلیک کرد */ .kh-prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; } .kh-prose a[href^="#"]::after { content: ""; } /* تیتر از محتوایش جدا نیفتد */ .kh-prose h2, .kh-prose h3 { break-after: avoid; } .kh-prose img, .kh-prose pre, .kh-prose table { break-inside: avoid; } }