/* =============================================================== لایه‌ی پروژه. style.css همان قالب Mobilekit در PWA/ است، با این تفاوت که رنگ‌های ثابتش به توکن تبدیل شده‌اند (tokenize.php این کار را از روی نسخه‌ی خام تکرار می‌کند). هر چیزی که مخصوص این پروژه است اینجا می‌آید و چون بعد از قالب بارگذاری می‌شود، رویش را می‌گیرد. دو کار می‌کند: ۱. رنگ‌های ثابت قالب را به توکن وصل می‌کند (مقادیر از جدول setting) ۲. روی دسکتاپ برنامه را داخل یک قاب موبایل وسط صفحه نشان می‌دهد =============================================================== */ /* --------------------------------------------------------------- ۱) پالت توکن‌ها را تابع THEME() در چاپ می‌کند. اینجا فقط سطح‌های اصلی قالب به آن توکن‌ها وصل می‌شوند. --------------------------------------------------------------- */ /* تخصیص عمداً با body.dark-mode-active برابر است، وگرنه قاعده‌ی خود قالب (که همان تخصیص را دارد و !important هم دارد) برنده می‌شود. */ body, body.dark-mode-active { background: var(--bg) !important; color: var(--fg-muted); } /* روی موبایل با زمینه یکی است؛ در حالت دسکتاپ پایین‌تر عوض می‌شود تا قاب از پس‌زمینه جدا دیده شود. بدون !important تا قاعده‌ی media بتواند رویش را بگیرد. */ html { background: var(--bg); } /* کپسول باید تمام ارتفاع را پر کند وگرنه زیرش رنگ body لخت دیده می‌شود. */ #appCapsule { background: var(--bg); min-height: 100vh; } /* صفحه‌ی بارگذاری اولیه — قالب رنگ سرمه‌ای و اسپینر آبی خودش را دارد. */ #loader, body.dark-mode-active #loader { background: var(--bg); } #loader .spinner-border { color: var(--accent) !important; } /* نوار دکمه‌ی ثابت پایین فرم‌ها (صفحه‌ی ورود و ۲FA) */ .form-button-group, body.dark-mode-active .form-button-group { background: var(--surface); border-top: 1px solid var(--line); } /* نوار بالا و پایین */ .appHeader, body.dark-mode-active .appHeader, .appBottomMenu, body.dark-mode-active .appBottomMenu, .extraHeader, body.dark-mode-active .extraHeader { background: var(--surface); border-color: var(--line); color: var(--fg); } .appHeader .pageTitle, body.dark-mode-active .appHeader .pageTitle, .appHeader .left .headerButton, .appHeader .right .headerButton, body.dark-mode-active .appHeader .left .headerButton, body.dark-mode-active .appHeader .right .headerButton { color: var(--fg); } /* متن‌ها */ h1, h2, h3, h4, h5, h6, body.dark-mode-active h1, body.dark-mode-active h2, body.dark-mode-active h3, body.dark-mode-active h4, body.dark-mode-active h5, body.dark-mode-active h6 { color: var(--fg); } /* سطح‌ها */ .card, body.dark-mode-active .card, .listview, body.dark-mode-active .listview, .wide-block, body.dark-mode-active .wide-block, .section-title { background: var(--surface); color: var(--fg); border-color: var(--line); } .section-title { background: transparent; color: var(--fg-muted); } /* فرم‌ها */ .form-group.boxed .form-control, body.dark-mode-active .form-group.boxed .form-control, .form-control, body.dark-mode-active .form-control { background: var(--surface); color: var(--fg); border-color: var(--line); } .form-control:focus { border-color: var(--accent); box-shadow: none; } .form-control::placeholder { color: var(--fg-muted); } /* دکمه‌ی اصلی */ .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-fg) !important; } .btn-outline-primary { background: transparent !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* حالت فعال منوی پایین */ .appBottomMenu .item.active i.bi, .appBottomMenu .item.active strong, body.dark-mode-active .appBottomMenu .item.active i.bi, body.dark-mode-active .appBottomMenu .item.active strong { color: var(--accent); } .appBottomMenu .item i.bi, .appBottomMenu .item strong, body.dark-mode-active .appBottomMenu .item i.bi, body.dark-mode-active .appBottomMenu .item strong { color: var(--fg-muted); } /* حباب چت */ .message-item .bubble { direction: rtl; text-align: right; background: var(--surface); color: var(--fg); } /* پیشوند body.dark-mode-active عمدی است: قاعده‌ی خود قالب «body.dark-mode-active .message-item .bubble» یک واحد ویژگی بیشتر دارد و بدون این پیشوند، متنِ حباب خودی رنگ متن عادی را می‌گیرد — روی رنگ شاخصِ روشنِ حالت تیره خوانا نیست. */ .message-item.user .bubble, body.dark-mode-active .message-item.user .bubble { background: var(--accent); color: var(--accent-fg); } /* امضای سازنده */ .credit-link { font-size: 9pt; color: var(--fg-muted); text-decoration: none; } .credit-link:hover, .credit-link:focus { color: var(--fg); text-decoration: underline; } /* --------------------------------------------------------------- ۲) حالت دسکتاپ — قاب موبایل وسط صفحه قالب برای عرض موبایل ساخته شده و روی مانیتور کشیده و بدریخت می‌شود. به‌جای بستن دسترسی دسکتاپ، برنامه داخل یک قاب با عرض موبایل نشان داده می‌شود. نوارهای position:fixed هم به همان قاب محدود می‌شوند. --------------------------------------------------------------- */ @media (min-width: 768px) { /* پس‌زمینه‌ی بیرون قاب — کمی روشن‌تر از خود قاب تا لبه‌هایش دیده شود. */ html { background: var(--surface-alt); } html:not(.dark-mode-active) { background: #E8E8E8; } body { /* قاب: عرض موبایل، وسط صفحه، با ارتفاع کامل */ width: var(--frame); max-width: 100%; min-height: 100vh; margin: 0 auto; position: relative; overflow-x: hidden; border-left: 1px solid var(--line); border-right: 1px solid var(--line); box-shadow: 0 0 40px rgba(0, 0, 0, .18); } /* عنصرهای fixed نسبت به viewport می‌چسبند، نه به قاب. با تبدیل مختصاتشان به همان عرض، داخل قاب می‌مانند. هر عنصر position:fixed جدیدی که اضافه شد باید به این فهرست هم بیاید. */ .appHeader, .extraHeader, .poll-modal, .chat-panel, .appBottomMenu, .chatFooter, .form-button-group, .fab-button.bottom-center, .notification-box, #loader { width: var(--frame) !important; max-width: 100%; left: 50% !important; right: auto !important; transform: translateX(-50%); } /* آفکانواس و مودال‌ها هم داخل قاب */ .offcanvas.offcanvas-bottom, .action-sheet { width: var(--frame) !important; max-width: 100%; left: 50% !important; right: auto !important; transform: translateX(-50%); } .modal-dialog { max-width: var(--frame); } /* قاب‌های تمام‌صفحه‌ی مسابقه هم محدود شوند */ .quiz-frame, .quiz-actions, .quiz-viewers, .touch-disabled { max-width: var(--frame); left: 50% !important; right: auto !important; transform: translateX(-50%); } .quiz-frame { width: calc(var(--frame) - 32px); } .quiz-actions { width: calc(var(--frame) - 40px); } /* کشوی کناری نسبت به viewport می‌چسبد؛ به لبه‌ی قاب منتقلش می‌کنیم. بدون این، منو ته صفحه‌ی دسکتاپ باز می‌شد و از برنامه جدا به نظر می‌رسید. style.css قالب در حالت راست‌چین start را سمت راست می‌گذارد و end را چپ، پس نگاشت اینجا هم همان است. */ .offcanvas.offcanvas-start { right: calc(50% - var(--frame) / 2) !important; left: auto !important; } .offcanvas.offcanvas-end { left: calc(50% - var(--frame) / 2) !important; right: auto !important; } } /* --------------------------------------------------------------- ۴) اصلاح‌های موضعی --------------------------------------------------------------- */ /* توگل‌ها: در تم سیاه‌وسفید، رنگ شاخص سفید است. اگر دستگیره هم سفید بماند روی مسیر سفید ناپدید می‌شود. دستگیره را به رنگ متن‌روی‌شاخص می‌بریم. */ .form-check-input:checked ~ .form-check-label:after, body.dark-mode-active .form-check-input:checked ~ .form-check-label:after, .form-switch .form-check-input:checked ~ .form-check-label:after, body.dark-mode-active .form-switch .form-check-input:checked ~ .form-check-label:after { background-color: var(--accent) !important; border-color: var(--accent) !important; } .form-switch .form-check-input:checked ~ .form-check-label:before, body.dark-mode-active .form-switch .form-check-input:checked ~ .form-check-label:before { background: var(--accent-fg) !important; } .form-switch .form-check-label:before, body.dark-mode-active .form-switch .form-check-label:before { background: var(--fg-muted); } .form-switch .form-check-label:after, body.dark-mode-active .form-switch .form-check-label:after { background-color: var(--surface-alt); border-color: var(--line) !important; } /* دکمه‌ی تغییر تم روشن/تیره در نوار بالا */ .themeToggle { background: none; border: 0; padding: 0 6px; color: var(--fg); font-size: 20px; line-height: 1; cursor: pointer; } /* =============================================================== لایه‌ی پروژه عمداً آخرین بخش فایل است: اُوِرایدهای تولیدشده‌ی بالا با انتخابگرهایی مثل «body.dark-mode-active .form-group.boxed .form-control» ویژگی (0,4,1) دارند و هر قاعده‌ی هم‌وزنی که قبل از آنها بیاید را می‌بازانند. با آخر بودن، قاعده‌های این بخش در تساوی ویژگی برنده می‌شوند. =============================================================== */ /* --------------------------------------------------------------- نظرسنجی چت. استایلش قبلاً در شیت برندشده بود و با حذف آن از بین رفت، برای همین بدون هیچ قاعده‌ای وسط جریان صفحه می‌افتاد و از کادر می‌زد بیرون. جاوااسکریپت صفحه به ارتفاعش paddingTop می‌دهد، یعنی انتظار دارد چسبیده و روی محتوا باشد — همان کاری که اینجا انجام می‌شود. --------------------------------------------------------------- */ .poll-modal { position: fixed; /* درست زیر appHeader — که روی iPhone نصب‌شده خودش زیر نوار وضعیت است (top: safe-area)؛ بدون آن، نظرسنجی روی نیمه‌ی پایین سربرگ می‌افتاد. */ top: calc(56px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 1020; padding: 12px 16px 14px; background: var(--surface); border-bottom: 1px solid var(--line); } :is(.poll-modal, .dash-poll) .poll-question { margin: 0 0 10px; font-size: 12.5px; font-weight: 500; line-height: 1.7; text-align: center; color: var(--fg-muted); } /* گزینه‌ها از تنظیمات می‌آیند و تعدادشان ثابت نیست، پس به‌جای ستون‌های ثابت بوت‌استرپ از flex استفاده می‌شود که ۲ تا ۶ گزینه را جا بدهد. */ :is(.poll-modal, .dash-poll) .poll-options { display: flex; flex-wrap: wrap; gap: 8px; } :is(.poll-modal, .dash-poll) .poll-option { position: relative; flex: 1 1 calc(50% - 8px); min-width: 96px; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 13px; font-weight: 600; background: var(--surface-alt); border: 1px solid var(--line); color: var(--fg); overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 6px; transition: transform 120ms ease, background 120ms ease; } /* نوار درصد پشت متن می‌نشیند تا سهم هر گزینه در یک نگاه دیده شود. */ :is(.poll-modal, .dash-poll) .poll-bar { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0; background: var(--accent); opacity: .16; transition: width 320ms cubic-bezier(.22, .61, .36, 1); pointer-events: none; } :is(.poll-modal, .dash-poll) .poll-label, :is(.poll-modal, .dash-poll) .poll-count { position: relative; /* روی نوار */ white-space: nowrap; } :is(.poll-modal, .dash-poll) .poll-count { font-size: 10.5px; font-weight: 500; color: var(--fg-muted); font-variant-numeric: tabular-nums; } :is(.poll-modal, .dash-poll) .poll-option.is-picked .poll-count { color: var(--accent-fg); } :is(.poll-modal, .dash-poll) .poll-option.is-picked .poll-bar { opacity: 0; } :is(.poll-modal, .dash-poll) .poll-option:active { transform: scale(.96); } :is(.poll-modal, .dash-poll) .poll-option.is-picked { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } :is(.poll-modal, .dash-poll) .poll-option.is-busy { opacity: .55; pointer-events: none; } /* --------------------------------------------------------------- انیمیشن‌ها قواعد به صورت عادی نوشته شده‌اند و فقط زیر prefers-reduced-motion: reduce خاموش می‌شوند. حالت برعکس (no-preference) روی مرورگری که این پرسش رسانه‌ای را نمی‌شناسد هیچ انیمیشنی نمی‌داد. --------------------------------------------------------------- */ /* جهت حرکت. در راست‌چین برعکس چپ‌چین است تا حس «هل دادن» درست بماند. */ :root { --spa-shift: -12px; } html[dir="rtl"] { --spa-shift: 12px; } /* --- جابه‌جایی بین صفحه‌ها --- قبلاً کل #spa-root (با هدر و منوی پایین) تا جواب سرور به شفافیت صفر می‌رفت و روی سرور کند، صفحه چند لحظه سفید می‌ماند. حالا هدر و منو سر جایشان می‌مانند، فقط محتوا کم‌رنگ و کمی جابه‌جا می‌شود و نوار باریک بالای صفحه نشان می‌دهد که صفحه‌ی بعد در راه است. ترنسفورم عمداً روی #spa-root نیست: عنصرهای position:fixed داخلش مرجعشان عوض می‌شد و می‌پریدند؛ اسلاید فقط روی #appCapsule است. */ #spa-root.spa-leave #appCapsule { opacity: .45; transform: translateX(var(--spa-shift)); transition: opacity 140ms ease, transform 140ms ease-in; pointer-events: none; } #spa-root.spa-leave::before { content: ""; position: fixed; z-index: 10000; top: env(safe-area-inset-top); inset-inline-start: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: 100% 50%; animation: spaBar 1.6s cubic-bezier(.1, .7, .3, 1) forwards; } html[dir="ltr"] #spa-root.spa-leave::before { transform-origin: 0 50%; } @keyframes spaBar { from { transform: scaleX(0); } to { transform: scaleX(.9); } } #spa-root.spa-enter #appCapsule { animation: spaEnter 260ms cubic-bezier(.22, .61, .36, 1); } /* صفحه‌ای که دکمه‌ی شناور دارد فقط محو می‌شود — چون آن دکمه position:fixed است و با ترنسفورمِ #appCapsule مرجعش عوض می‌شود. */ #spa-root.spa-no-slide.spa-leave #appCapsule, #spa-root.spa-no-slide.spa-enter #appCapsule { transform: none; transition: none; animation: none; } @keyframes spaEnter { from { opacity: .45; transform: translateX(calc(var(--spa-shift) * -1.4)); } to { opacity: 1; transform: none; } } /* --- ورود پیام تازه در چت --- فقط به پیام‌هایی داده می‌شود که در تازه‌سازی قبلی نبودند، وگرنه هر ۷ ثانیه کل گفت‌وگو دوباره انیمیت می‌شد. */ .message-item.msg-enter { animation: msgEnter 300ms cubic-bezier(.22, .61, .36, 1); } @keyframes msgEnter { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } /* --- بازخورد لمس دکمه‌ی ارسال --- */ #send-chat-btn { transition: transform 120ms ease; } #send-chat-btn:active { transform: scale(.86); } /* کاربری که در سیستم‌عاملش کاهش حرکت را روشن کرده، هیچ‌کدام را نمی‌بیند. */ @media (prefers-reduced-motion: reduce) { #spa-root, #spa-root.spa-leave, #spa-root.spa-leave #appCapsule, #spa-root.spa-enter #appCapsule, .message-item.msg-enter, #send-chat-btn, #send-chat-btn:active { transition: none; animation: none; transform: none; } #spa-root.spa-leave #appCapsule { opacity: 1; } #spa-root.spa-leave::before { animation: none; transform: scaleX(.6); } } /* --------------------------------------------------------------- صفحه‌های ورود و ثبت‌نام بدون کارت و بدون قاب: محتوا وسط صفحه می‌نشیند و دکمه‌ی اصلی پایین می‌چسبد — همان الگویی که برنامه‌های موبایل دارند. --------------------------------------------------------------- */ .auth-page { min-height: 100vh; min-height: 100dvh; /* روی موبایل نوار آدرس را حساب می‌کند */ display: flex; flex-direction: column; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; } /* بخش وسط: هرچه فضای آزاد هست را می‌گیرد و محتوایش را وسط می‌گذارد. */ .auth-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 340px; margin: 0 auto; } /* نشان جای لوگو — حرف اول عنوان برنامه. چون پروژه سفیدبرچسب است هیچ تصویر ثابتی اینجا نمی‌گذاریم. */ .auth-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .auth-mark { overflow: hidden; width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 18px; background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; line-height: 1; user-select: none; } .auth-title { margin: 0 0 5px; font-size: 20px; font-weight: 700; text-align: center; color: var(--fg); } .auth-sub { margin: 0 0 26px; font-size: 12.5px; text-align: center; color: var(--fg-muted); } /* هشدارها: فقط ته‌رنگ و لبه، با رنگ از توکن‌های معنایی. */ .auth-page .alert { padding: 11px 13px; margin-bottom: 18px; font-size: 12px; line-height: 1.7; border-radius: 12px; background: var(--surface-alt); border: 1px solid var(--line); color: var(--fg); } .auth-page .alert-success { background: color-mix(in srgb, var(--ok) 15%, var(--bg)); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .auth-page .alert-danger { background: color-mix(in srgb, var(--danger) 15%, var(--bg)); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .auth-page .alert-warning { background: color-mix(in srgb, var(--warn) 15%, var(--bg)); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .auth-page .alert::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 7px; vertical-align: middle; background: var(--fg-muted); } .auth-page .alert-success::before { background: var(--ok); } .auth-page .alert-danger::before { background: var(--danger); } .auth-page .alert-warning::before { background: var(--warn); } .auth-page .form-group.boxed { margin-bottom: 16px; } /* قاعده‌ی عمومی قالب «body.dark-mode-active .form-group.boxed .form-control» ویژگی (0,4,1) دارد؛ برای همین انتخابگر اینجا هم باید هم‌وزن باشد، وگرنه فیلدها پس‌زمینه‌ی پُر می‌گرفتند و شکل کارتی می‌ماندند. */ body .auth-page .form-group.boxed .form-control, body .auth-page .form-control { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; height: 46px; padding: 0 2px; color: var(--fg); } body .auth-page .form-group.boxed .form-control:focus, body .auth-page .form-control:focus { border-bottom-color: var(--accent); box-shadow: none; } /* تکمیل خودکار مرورگر رنگ آبی خودش را تحمیل می‌کند و فیلد از پالت بیرون می‌زند. */ .auth-page .form-control:-webkit-autofill, .auth-page .form-control:-webkit-autofill:hover, .auth-page .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--fg); -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; caret-color: var(--fg); } .auth-page .form-label { font-size: 11px; color: var(--fg-muted); margin-bottom: 4px; } /* بخش پایین: دکمه‌ی اصلی و لینک‌ها، چسبیده به کف صفحه. */ .auth-bottom { flex: 0 0 auto; width: 100%; max-width: 340px; margin: 24px auto 0; } .auth-page .btn-block { width: 100%; height: 50px; border-radius: 14px; font-size: 15px; font-weight: 700; } .auth-alt { margin: 0 0 14px; font-size: 12.5px; text-align: center; color: var(--fg-muted); } .auth-alt a { font-weight: 700; color: var(--accent); } .auth-hint { margin: 10px 0 0; font-size: 10.5px; line-height: 1.9; text-align: center; color: var(--fg-muted); } .auth-foot { margin-top: 10px; text-align: center; } /* --------------------------------------------------------------- تخته‌ی ایموجی و استیکر پیام‌رسان --------------------------------------------------------------- */ .chat-panel { position: fixed; bottom: 64px; /* بالای نوار نوشتن پیام */ left: 0; right: 0; z-index: 1030; max-height: 46vh; overflow-y: auto; padding: 12px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .6); } .chat-panel-grid { display: grid; gap: 6px; } .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); } .sticker-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .emoji-item { height: 40px; padding: 0; border: 0; border-radius: 9px; background: transparent; /* فونت متن فارسی برنامه ایموجی ندارد و مربع خالی نشان می‌داد؛ اینجا صراحتاً فونت ایموجی سیستم خواسته می‌شود. */ font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", sans-serif; font-size: 23px; line-height: 1; cursor: pointer; transition: background 120ms ease, transform 120ms ease; } .emoji-item:hover { background: var(--surface-alt); } .emoji-item:active { transform: scale(.88); } .sticker-item { padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-alt); aspect-ratio: 1 / 1; cursor: pointer; transition: transform 120ms ease; } .sticker-item:active { transform: scale(.92); } .sticker-item img { width: 100%; height: 100%; object-fit: contain; display: block; } /* پیامی که خودش فقط یک نشانی تصویر است، به‌جای متن نشان داده می‌شود. */ .message-item .bubble img.sticker-in-chat { display: block; width: 128px; max-width: 100%; height: auto; border-radius: var(--radius); } /* حبابی که فقط یک استیکر دارد، حباب نیست: قاب رنگی دورش استیکر را شبیه دکمه نشان می‌داد. پیشوند body لازم است تا از قاعده‌ی خود قالب جلو بزند. */ body .message-item .bubble:has(> img.sticker-in-chat), body.dark-mode-active .message-item .bubble:has(> img.sticker-in-chat) { background: none; padding: 0; box-shadow: none; } /* --------------------------------------------------------------- مدیریت گزینه‌های نظرسنجی و استیکرها در صفحه‌ی تنظیمات --------------------------------------------------------------- */ /* ردیف گزینه خودش یک form-group boxed است تا فیلدش دقیقاً مثل بقیه‌ی صفحه‌های تنظیمات دیده شود؛ دکمه‌ی حذف کنارش می‌نشیند. */ .option-row { display: flex; align-items: flex-end; gap: 6px; } .option-row .input-wrapper { flex: 1 1 auto; } .option-remove { flex: 0 0 34px; height: 42px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg-muted); font-size: 13px; cursor: pointer; } .option-remove:hover { background: var(--surface-alt); color: var(--danger); } /* با دو گزینه، حذف معنا ندارد و دکمه‌اش خاموش می‌شود. */ #poll-option-list.at-minimum .option-remove { opacity: .3; pointer-events: none; } #add-option { margin-top: 4px; } #add-option:disabled { opacity: .4; } .sticker-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; } .sticker-card { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-alt); overflow: hidden; } .sticker-card img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; } .sticker-del { position: absolute; top: 5px; left: 5px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; cursor: pointer; } /* خانه‌ی «افزودن» هم‌اندازه‌ی بقیه است تا شبکه یکدست بماند. */ .sticker-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; aspect-ratio: 1 / 1; border: 1px dashed var(--line); border-radius: 14px; color: var(--fg-muted); font-size: 11px; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; } .sticker-add:hover { border-color: var(--accent); color: var(--accent); } .sticker-add i { font-size: 17px; } .sticker-empty { margin: 12px 0 0; font-size: 12px; color: var(--fg-muted); } /* --------------------------------------------------------------- نوار نوشتن پیام دکمه‌های ایموجی و استیکر با کلاس btn-secondary قالب، مربع‌های خاکستریِ بی‌ربط به پالت می‌شدند. اینجا هم‌شکل و هم‌اندازه‌ی دکمه‌ی ارسال می‌شوند. --------------------------------------------------------------- */ .chatFooter .chat-tool { flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--line); color: var(--fg-muted); font-size: 17px; line-height: 1; transition: color 120ms ease, transform 120ms ease, border-color 120ms ease; } .chatFooter .chat-tool:hover { color: var(--accent); border-color: var(--accent); } .chatFooter .chat-tool:active { transform: scale(.9); } /* دکمه‌ی باز، حالت فعال بگیرد تا معلوم باشد کدام تخته باز است. */ .chatFooter .chat-tool.is-open { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .chatFooter #send-chat-btn { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; } /* فاصله‌ی یکدست بین دکمه‌ها و کادر متن */ .chatFooter form { display: flex; align-items: center; gap: 7px; } .chatFooter .form-group.boxed { flex: 1 1 auto; margin-bottom: 0; } /* --------------------------------------------------------------- پخش زنده --------------------------------------------------------------- */ .stream-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; /* به‌جای ترفند padding-top */ background: #000; } .stream-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .stream-bad, .stream-empty { margin: 0; padding: 18px; font-size: 12.5px; line-height: 1.9; text-align: center; color: var(--fg-muted); } /* شبکه‌ی انتخاب کانال وقتی بیش از یکی تعریف شده. */ .stream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; } .stream-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--fg); text-decoration: none; } .stream-tile-art { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-alt); overflow: hidden; transition: border-color 120ms ease, transform 120ms ease; } .stream-tile:active .stream-tile-art { transform: scale(.95); } .stream-tile:hover .stream-tile-art { border-color: var(--accent); } .stream-tile-art img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .stream-tile-art i { font-size: 26px; color: var(--fg-muted); } .stream-tile span { font-size: 11.5px; text-align: center; line-height: 1.5; } /* نوار کانال‌های دیگر، زیر پخش جاری. */ .stream-strip { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; -webkit-overflow-scrolling: touch; } .stream-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 70px; color: var(--fg); text-decoration: none; font-size: 10.5px; text-align: center; } .stream-chip img, .stream-chip i { width: 54px; height: 54px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-alt); object-fit: contain; padding: 6px; } .stream-chip i { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--fg-muted); } /* دکمه‌های ردیف کانال در صفحه‌ی مدیریت. */ .stream-actions { display: flex; gap: 4px; } .stream-btn { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--fg-muted); font-size: 13px; cursor: pointer; } .stream-btn:hover { background: var(--surface-alt); color: var(--accent); } .stream-btn-danger:hover { color: var(--danger); } /* --------------------------------------------------------------- مودال‌ها قالب برای dialogbox فقط عرض را محدود می‌کند، نه ارتفاع را؛ پس مودالی که محتوایش بلند بود تا کف صفحه کش می‌آمد و عملاً تمام‌صفحه می‌شد. اینجا ارتفاع سقف می‌گیرد و فقط بدنه اسکرول می‌شود، تا سربرگ و دکمه‌ها همیشه دیده شوند. modalbox و stories عمداً تمام‌صفحه‌اند و دست نمی‌خورند. --------------------------------------------------------------- */ .modal.dialogbox .modal-dialog, .modal.action-sheet .modal-dialog { max-width: 340px; margin: auto; /* وسط افقی و عمودی */ } .modal.dialogbox .modal-dialog { display: flex; align-items: center; min-height: calc(100% - 32px); } .modal.dialogbox .modal-content { width: 100%; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; } .modal.dialogbox .modal-header, .modal.dialogbox .modal-footer { flex: 0 0 auto; } .modal.dialogbox .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* فرم داخل مودال همان شکل بقیه‌ی صفحه‌ها را داشته باشد. */ .modal.dialogbox .modal-body .form-group.boxed:last-of-type { margin-bottom: 6px; } /* --------------------------------------------------------------- دکمه‌های هدر قاعده‌ی .headerButton قالب برای نوشته شده و پس‌زمینه/حاشیه را ریست نمی‌کند. هر