/* * تم‌ها و حالت تاریک (themes.css) * --------------------------------------------------------------- * این فایل فقط «متغیرهای CSS» و چند override ظاهری را بر اساس * data-theme و data-mode روی تغییر می‌دهد. ساختار و چیدمان * در styles.css است و دست‌نخورده می‌ماند (جداسازی ساختار از پوسته). * * قاعده ترتیب و specificity: * 1) حالت تاریکِ عمومی (پایه برای سبک مینیمال) * 2) ساختارِ مستقل از حالتِ هر سبک (شعاع/سایه/حاشیه) * 3) رنگ‌های هر سبک به تفکیک روشن/تاریک (با specificity بالاتر) * 4) override اجزای خاص هر سبک (کارت، سلول، دکمه...) */ /* ============================================================ * (۱) حالت تاریکِ عمومی — مبنای سبک مینیمال در دارک‌مود * ============================================================ */ :root[data-mode="dark"] { --color-bg: #14171c; --color-surface: #1d2128; --color-border: #2c313b; --color-text: #e6e8ec; --color-text-muted: #9aa1ad; --input-bg: #262b33; --header-bg: var(--color-surface); --header-text: var(--color-text); --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.6); --status-done-bg: #1c3a2a; --status-done-border: #2f7d56; --status-done-text: #7fe0a6; --status-missed-bg: #3a2020; --status-missed-border: #a14a4a; --status-missed-text: #f0a0a0; --status-unknown-bg: #262b33; --status-unknown-border: #343a44; --status-unknown-text: #7a818d; --app-bg: var(--color-bg); } /* ============================================================ * (۲و۴) سبک متریال (Material) — برجسته، سایه‌دار، هدر رنگی * رنگ‌ها از پیش‌فرض/دارک ارث می‌برند؛ فقط ساختار و اجزا عوض می‌شوند. * ============================================================ */ :root[data-theme="material"] { --radius: 18px; --radius-sm: 12px; --border-width: 0px; --cell-border-width: 0px; --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.10); --card-shadow-hover: 0 10px 22px rgba(0, 0, 0, 0.20); --header-bg: var(--color-accent); --header-text: #ffffff; } /* هدر رنگی: عنوان و آیکن تنظیمات سفید روی رنگ اصلی */ :root[data-theme="material"] .app-header__title { color: var(--header-text); } :root[data-theme="material"] .app-header .icon-btn { background: rgba(255, 255, 255, 0.18); color: var(--header-text); border: none; } /* کارت‌ها و سلول‌ها بدون حاشیه ولی با سایه‌ی عمق */ :root[data-theme="material"] .habit-card, :root[data-theme="material"] .day-cell, :root[data-theme="material"] .icon-btn { border: none; } :root[data-theme="material"] .day-cell { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); } :root[data-theme="material"] .btn--primary { box-shadow: 0 3px 8px color-mix(in srgb, var(--color-accent) 45%, transparent); } /* ============================================================ * (۲و۳و۴) سبک نئومورفیسم (Soft UI) — سطوح هم‌رنگ با سایه دوگانه * ============================================================ */ :root[data-theme="neumorphism"] { --radius: 20px; --radius-sm: 14px; --border-width: 0px; --cell-border-width: 0px; --card-shadow: none; --card-shadow-hover: none; } /* رنگ‌های حالت روشن: پس‌زمینه و سطح هم‌رنگ‌اند */ :root[data-theme="neumorphism"][data-mode="light"] { --color-bg: #e6e9ef; --color-surface: #e6e9ef; --color-border: #e6e9ef; --color-text: #3d4350; --color-text-muted: #7b8190; --input-bg: #e6e9ef; --header-bg: #e6e9ef; --header-text: var(--color-text); --neu-light: #ffffff; /* نور از بالا-چپ */ --neu-dark: #c2c6cf; /* سایه از پایین-راست */ --app-bg: var(--color-bg); } /* رنگ‌های حالت تاریک */ :root[data-theme="neumorphism"][data-mode="dark"] { --color-bg: #2b2f3a; --color-surface: #2b2f3a; --color-border: #2b2f3a; --color-text: #e6e8ec; --color-text-muted: #9aa1ad; --input-bg: #2b2f3a; --header-bg: #2b2f3a; --header-text: var(--color-text); --neu-light: #343a47; --neu-dark: #20242d; --app-bg: var(--color-bg); } /* اجزای برجسته (بیرون‌زده) با سایه دوگانه و بدون حاشیه */ :root[data-theme="neumorphism"] .habit-card, :root[data-theme="neumorphism"] .icon-btn, :root[data-theme="neumorphism"] .btn, :root[data-theme="neumorphism"] .field__input { background: var(--color-surface); border: none; box-shadow: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light); } /* دکمه اصلی همچنان رنگی می‌ماند ولی با سایه نرم */ :root[data-theme="neumorphism"] .btn--primary { background: var(--color-accent); color: var(--color-accent-contrast); } /* سلول‌های روز به‌صورت فرورفته (inset) */ :root[data-theme="neumorphism"] .day-cell { background: var(--color-surface); border: none; box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light); } /* روزهای انجام‌شده/نشده برجسته می‌شوند تا با inset فرق کنند */ :root[data-theme="neumorphism"] .day-cell--done, :root[data-theme="neumorphism"] .day-cell--missed { box-shadow: 4px 4px 8px var(--neu-dark), -4px -4px 8px var(--neu-light); } :root[data-theme="neumorphism"] .progress-bar { box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light); background: transparent; } /* ============================================================ * (۲و۳و۴) سبک گلسمورفیسم (Glass) — شیشه مات روی گرادیان * ============================================================ */ :root[data-theme="glass"] { --radius: 18px; --radius-sm: 14px; --border-width: 1px; --cell-border-width: 1px; --card-shadow: 0 8px 24px rgba(31, 38, 60, 0.18); --card-shadow-hover: 0 12px 30px rgba(31, 38, 60, 0.26); } /* حالت روشن: گرادیان روشن + سطوح نیمه‌شفاف */ :root[data-theme="glass"][data-mode="light"] { --app-bg: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 45%, #fbc2eb 100%); --color-text: #1f2430; --color-text-muted: #46506a; --color-border: rgba(255, 255, 255, 0.45); --glass-bg: rgba(255, 255, 255, 0.35); --header-bg: rgba(255, 255, 255, 0.45); --header-text: var(--color-text); --input-bg: rgba(255, 255, 255, 0.45); } /* حالت تاریک: گرادیان تیره + شیشه تیره */ :root[data-theme="glass"][data-mode="dark"] { --app-bg: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); --color-text: #eef2f7; --color-text-muted: #b6c0cf; --color-border: rgba(255, 255, 255, 0.16); --glass-bg: rgba(255, 255, 255, 0.08); --header-bg: rgba(255, 255, 255, 0.07); --header-text: var(--color-text); --input-bg: rgba(255, 255, 255, 0.10); } /* سطوح شیشه‌ای با بلور پس‌زمینه */ :root[data-theme="glass"] .app-header, :root[data-theme="glass"] .habit-card, :root[data-theme="glass"] .modal, :root[data-theme="glass"] .icon-btn, :root[data-theme="glass"] .day-cell, :root[data-theme="glass"] .field__input { background: var(--glass-bg); border: 1px solid var(--color-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* وضعیت روزها روی شیشه با ته‌رنگ ملایم */ :root[data-theme="glass"] .day-cell--done { background: color-mix(in srgb, #22c55e 32%, var(--glass-bg)); } :root[data-theme="glass"] .day-cell--missed { background: color-mix(in srgb, #ef4444 32%, var(--glass-bg)); } /* ============================================================ * (۲و۳و۴) سبک بروتالیست/رترو — حاشیه ضخیم، سایه توپر، کنتراست بالا * ============================================================ */ :root[data-theme="brutalist"] { --radius: 0px; --radius-sm: 0px; --border-width: 3px; --cell-border-width: 2px; } /* حالت روشن: کاغذی روشن با خطوط مشکی */ :root[data-theme="brutalist"][data-mode="light"] { --color-bg: #f5f3e7; --color-surface: #fffdf2; --color-border: #111111; --color-text: #111111; --color-text-muted: #444444; --input-bg: #fffdf2; --header-bg: var(--color-accent); --header-text: #111111; --card-shadow: 6px 6px 0 #111111; --card-shadow-hover: 8px 8px 0 #111111; --app-bg: var(--color-bg); --status-done-bg: #b9f6ca; --status-done-border: #111111; --status-done-text: #0b5d2a; --status-missed-bg: #ff8a80; --status-missed-border: #111111; --status-missed-text: #7a1010; --status-unknown-bg: #ffffff; --status-unknown-border: #111111; --status-unknown-text: #555555; } /* حالت تاریک: مشکی با خطوط سفید */ :root[data-theme="brutalist"][data-mode="dark"] { --color-bg: #0d0d0d; --color-surface: #1a1a1a; --color-border: #ffffff; --color-text: #ffffff; --color-text-muted: #c9c9c9; --input-bg: #1a1a1a; --header-bg: var(--color-accent); --header-text: #111111; --card-shadow: 6px 6px 0 #ffffff; --card-shadow-hover: 8px 8px 0 #ffffff; --app-bg: var(--color-bg); --status-done-bg: #1f7a44; --status-done-border: #ffffff; --status-done-text: #b9f6ca; --status-missed-bg: #8a2c2c; --status-missed-border: #ffffff; --status-missed-text: #ffd1cc; --status-unknown-bg: #1a1a1a; --status-unknown-border: #ffffff; --status-unknown-text: #c9c9c9; } /* همه اجزا حاشیه ضخیم و فونت بولد و گوشه تیز دارند */ :root[data-theme="brutalist"] .app-header { border-bottom: 3px solid var(--color-border); } :root[data-theme="brutalist"] .app-header__title { color: var(--header-text); font-weight: 700; } :root[data-theme="brutalist"] .btn, :root[data-theme="brutalist"] .icon-btn { border: var(--border-width) solid var(--color-border); box-shadow: 4px 4px 0 var(--color-border); font-weight: 700; } :root[data-theme="brutalist"] .btn:active, :root[data-theme="brutalist"] .icon-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--color-border); } :root[data-theme="brutalist"] .day-cell { border: var(--cell-border-width) solid var(--color-border); box-shadow: none; font-weight: 700; } :root[data-theme="brutalist"] .day-cell--today { box-shadow: inset 0 0 0 2px var(--color-accent); }