/* * فونت پنل. * * فونت **خودِ پنل** است و ربطی به فونت برنامه‌های اندروید و ویندوز ندارد — * آن یکی از پنل کنترل می‌شود، این یکی ثابت است. * * فایل‌ها کنار همین CSS هستند (assets/fonts/) تا پنل بدون اینترنت هم درست * نوشته شود. اگر این فایل‌ها نباشند، مرورگر بی‌صدا به فونت پیش‌فرض * می‌افتد و کسی متوجه نمی‌شود — برای همین font-display: swap گذاشته‌ایم و * نسخه‌ی محلی هم کنارش داریم. */ @font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazirmatn'; src: url('fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --bg: #0f0e14; --surface: #1a1824; --surface2: #232130; --line: #322e42; --fg: #f2f0f8; --muted: #9c98ae; --accent: #7c5cff; --ok: #22b573; --err: #e5484d; --radius: 12px; } /* تم روشن. فقط متغیرهای رنگ عوض می‌شوند، پس همه قواعد بالا بدون تغییر کار می‌کنند. انتخاب تم در localStorage ذخیره می‌شود (بدون نیاز به دیتابیس). برای جلوگیری از فلاش سفید هنگام بارگذاری، رنگ پس‌زمینه از قبل در ست می‌شود. */ html[data-theme="light"] { --bg: #f4f6fb; --surface: #ffffff; --surface2: #eef1f8; --line: #d6dbe8; --fg: #17203a; --muted: #5d6a85; --accent: #6244e8; --ok: #1a9e5f; --err: #d33a3f; } html[data-theme="light"] .alert.ok { color: #0f6b41; } html[data-theme="light"] .alert.error { color: #a12529; } html[data-theme="light"] .login { box-shadow: 0 10px 40px rgba(23, 32, 58, .10); } html[data-theme="light"] .group, html[data-theme="light"] .login { box-shadow: 0 2px 10px rgba(23, 32, 58, .06); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif; font-size: 15px; line-height: 1.7; } body.centered { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; } /* ------------------------------------------------------------- هدر */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 12px; } .brand strong { display: block; font-size: 16px; } .brand span { display: block; color: var(--muted); font-size: 12.5px; } .logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: var(--surface2); } .logo.big { width: 68px; height: 68px; } .topbar nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* سوییچ روشن/خاموش برنامه در هدر */ .appswitch { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 10px; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; } .appswitch .switchlabel { white-space: nowrap; } .alert.flash { margin: 16px auto 0; max-width: 980px; } main { max-width: 980px; margin: 0 auto; padding: 24px; } .foot { max-width: 980px; margin: 0 auto; padding: 8px 24px 40px; color: var(--muted); font-size: 12.5px; } /* ------------------------------------------------------------ دکمه */ .btn { display: inline-block; border: 1px solid var(--line); background: var(--surface2); color: var(--fg); padding: 9px 16px; border-radius: 10px; text-decoration: none; font: inherit; font-size: 14px; cursor: pointer; transition: filter .15s ease; } .btn:hover { filter: brightness(1.15); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .btn.ghost { background: transparent; } .btn.block { width: 100%; } /* ------------------------------------------------------------ فرم */ .login { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; text-align: center; } .login h1 { font-size: 19px; margin: 14px 0 4px; } .login .sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; } .login label { display: block; text-align: right; margin-bottom: 14px; font-size: 13px; } .settings { display: flex; flex-direction: column; gap: 20px; } .group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 8px; } .group h2 { display: flex; align-items: baseline; gap: 8px; font-size: 16px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .group h2 .ico { font-size: 18px; } .group h2 small { color: var(--muted); font-weight: 400; font-size: 12px; } .group-help { color: var(--muted); font-size: 13px; margin: 10px 0 0; } .field { margin: 16px 0; } .lbl { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; } .help { color: var(--muted); font-size: 12.5px; margin: 4px 0 0; } input[type=text], input[type=password], input[type=number], input[type=file], textarea { width: 100%; background: var(--surface2); border: 1px solid var(--line); color: var(--fg); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 14px; } input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } textarea { resize: vertical; line-height: 1.7; } textarea.code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; } /* ------------------------------------------- فیلد دوزبانه */ .langs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .langbox { position: relative; } .langtag { position: absolute; top: 7px; inset-inline-end: 10px; font-size: 11px; color: var(--muted); pointer-events: none; z-index: 1; } .langbox input, .langbox textarea { padding-top: 22px; } .langbox.en input, .langbox.en textarea { direction: ltr; text-align: left; } @media (max-width: 640px) { .langs { grid-template-columns: 1fr; } } /* -------------------------------------------------------- سوییچ */ .switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .track { width: 46px; height: 26px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line); position: relative; transition: background .18s ease, border-color .18s ease; flex: 0 0 auto; } .thumb { position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .18s ease, background .18s ease; } .switch input:checked + .track { background: var(--accent); border-color: var(--accent); } .switch input:checked + .track .thumb { background: #fff; transform: translateX(-20px); } .switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; } .switchlabel { font-size: 13px; color: var(--muted); } /* دکمه‌های دو حالته (فعال / غیرفعال) */ .statebtns { display: flex; gap: 8px; flex-wrap: wrap; } .statebtn { cursor: pointer; } .statebtn input { position: absolute; opacity: 0; width: 0; height: 0; } .statebtn span { display: inline-block; padding: 8px 16px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface2); color: var(--muted); font-size: 13.5px; user-select: none; transition: all .15s ease; } .statebtn.on span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .statebtn input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } /* --------------------------------------------------------- لوگو */ .imagepick { display: flex; flex-direction: column; gap: 10px; } .imagepick .preview { width: 96px; height: 96px; border-radius: 14px; object-fit: contain; background: var(--surface2); border: 1px solid var(--line); } /* -------------------------------------------------------- هشدار */ .alert { border-radius: 10px; padding: 11px 14px; margin: 0 0 18px; font-size: 13.5px; border: 1px solid; } .alert.ok { background: rgba(34, 181, 115, .12); border-color: var(--ok); color: #7fe0b0; } .alert.error { background: rgba(229, 72, 77, .12); border-color: var(--err); color: #ffa0a2; } .alert code { display: block; margin-top: 6px; font-size: 12px; opacity: .85; } .savebar { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px 0; background: linear-gradient(to top, var(--bg) 65%, transparent); } .savebar .btn { min-width: 140px; } /* ---------- انتخابگر رنگ (فیلدهای تم) ---------- */ .colorrow { display: flex; gap: 8px; align-items: center; } .colorpick { width: 46px; height: 34px; padding: 2px; cursor: pointer; border: 1px solid #c9d2e3; border-radius: 8px; background: #fff; } .colortxt { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; text-align: left; direction: ltr; }