change style css
This commit is contained in:
hamed
@@ -0,0 +1,139 @@
|
||||
# رفع بهمریختگی کامل پنل ادمین روی iPhone 8 (Safari/Chrome iOS)
|
||||
|
||||
## پروژه
|
||||
|
||||
`clinicpro` (فقط CSS پنل ادمین React — بدون تغییر backend یا API)
|
||||
|
||||
## زمینه
|
||||
|
||||
پنل ادمین (`https://clinic-pro.ddev.site/admin`) روی دسکتاپ و موبایلهای جدید درست است، اما روی **iPhone 8** با **هر دو مرورگر Chrome و Safari** کامل بهمریخته دیده میشود (رنگها، پسزمینهها، دکمهها، بوردرها خراب).
|
||||
|
||||
نکته کلیدی: Chrome روی iOS هم از موتور **WebKit** استفاده میکند (نه Blink). پس «هر دو مرورگر خراب» یعنی مشکل از **موتور WebKit قدیمیِ iPhone 8** است، نه مرورگر. iPhone 8 حداکثر به iOS 16.7 میرسد و بسیاری از کاربران روی iOS ۱۵.x یا ۱۶.۰–۱۶.۱ میمانند.
|
||||
|
||||
## مشکل / هدف
|
||||
|
||||
استایل پنل بهشدت به توابع رنگ مدرن CSS وابسته است که روی WebKit قدیمی پشتیبانی نمیشوند و مقدارشان **نامعتبر** میشود → مرورگر مقدار را دور میریزد → رنگ به transparent/سیاه/ارثی میافتد → کل UI بهم میریزد:
|
||||
|
||||
- **`oklch()`** — فقط Safari 15.4+ . روی iOS 15.0–15.3 خراب.
|
||||
- **`color-mix()`** — فقط Safari 16.2+ . روی iOS 15.x و 16.0/16.1 خراب. (**۳۰ مورد** در فایل)
|
||||
- **Tailwind v4** — رسماً فقط Safari 16.4+ را هدف میگیرد (`@property`, cascade layers, oklch). روی iPhone 8 قدیمی base/reset ناقص اجرا میشود.
|
||||
|
||||
هدف: افزودن fallback رنگ sRGB و گارد `@supports` تا پنل روی WebKit قدیمی هم صحیح رندر شود (progressive enhancement — روی مرورگر جدید دقیقاً مثل الان بماند).
|
||||
|
||||
## فایلهای مرتبط
|
||||
|
||||
| فایل | نقش |
|
||||
|------|-----|
|
||||
| `clinicpro/assets/admin/styles.css` | تمام متغیرهای رنگ + ۳۰ مورد `color-mix` + `oklch` |
|
||||
| `clinicpro/templates/admin/index.html.twig` | shell پنل (viewport موجود و درست) |
|
||||
| `clinicpro/package.json` | Tailwind v4 (`tailwindcss@^4`, `@tailwindcss/postcss@^4`) |
|
||||
|
||||
## وضعیت فعلی
|
||||
|
||||
هیچ fallback و هیچ `@supports` وجود ندارد (`grep -c "@supports" = 0`).
|
||||
|
||||
متغیرهای رنگ فقط با `oklch` تعریف شدهاند (خط ۳۰ و ۸۵):
|
||||
|
||||
```css
|
||||
/* :root روشن */
|
||||
--primary: oklch(0.55 var(--brand-c) var(--brand-h));
|
||||
--primary-600: oklch(0.49 var(--brand-c) var(--brand-h));
|
||||
--primary-700: oklch(0.43 var(--brand-c) var(--brand-h));
|
||||
--primary-soft: oklch(0.95 0.03 var(--brand-h));
|
||||
--primary-soft2: oklch(0.90 0.05 var(--brand-h));
|
||||
--ring: color-mix(in oklch, var(--primary) 32%, transparent);
|
||||
```
|
||||
|
||||
تم تیره (خط ۸۵+) کلاً روی `color-mix` سوار است → روی iOS قدیمی کامل خراب:
|
||||
|
||||
```css
|
||||
[data-theme="dark"] {
|
||||
--primary: oklch(0.66 var(--brand-c) var(--brand-h));
|
||||
--primary-soft: color-mix(in oklch, var(--primary) 16%, var(--surface));
|
||||
--success-bg: color-mix(in oklch, var(--success) 18%, var(--surface));
|
||||
--warning-bg: color-mix(in oklch, var(--warning) 18%, var(--surface));
|
||||
/* ... danger-bg, info-bg, violet-bg, accent-bg, stat-*-bg همه color-mix */
|
||||
}
|
||||
```
|
||||
|
||||
استفاده inline در قوانین (خط ۴۶۹–۴۷۳ و بلوک settings جدید):
|
||||
|
||||
```css
|
||||
.appt-status.status-green { border-color: color-mix(in srgb, var(--success) 25%, transparent); }
|
||||
.toggle-row.on { border-color: color-mix(in oklch, var(--primary) 40%, var(--border)); }
|
||||
.save-bar.ok { border-color: color-mix(in oklch, var(--success) 45%, var(--border)); }
|
||||
.gw-card ... /* و موارد مشابه */
|
||||
```
|
||||
|
||||
## وظایف
|
||||
|
||||
### ۱. fallback هگز sRGB برای متغیرهای رنگِ مبتنی بر oklch
|
||||
|
||||
برای هر متغیری که با `oklch()` تعریف شده، یک خط هگز sRGB **قبل** از خط oklch بگذار. مرورگر قدیمی خط oklch را نامعتبر میبیند و خط هگز قبلی را نگه میدارد؛ مرورگر جدید oklch را استفاده میکند.
|
||||
|
||||
الگو (در `:root` روشن):
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* primary = تقریب sRGB از brand-h:256 brand-c:0.15 */
|
||||
--primary: #5b5ef0; /* fallback */
|
||||
--primary: oklch(0.55 var(--brand-c) var(--brand-h));
|
||||
--primary-600: #4a4dd6; /* fallback */
|
||||
--primary-600: oklch(0.49 var(--brand-c) var(--brand-h));
|
||||
--primary-700: #3d40b8; /* fallback */
|
||||
--primary-700: oklch(0.43 var(--brand-c) var(--brand-h));
|
||||
--primary-soft: #eceafd; /* fallback */
|
||||
--primary-soft: oklch(0.95 0.03 var(--brand-h));
|
||||
--primary-soft2: #d9d5fb; /* fallback */
|
||||
--primary-soft2: oklch(0.90 0.05 var(--brand-h));
|
||||
--ring: rgba(91,94,240,.32); /* fallback */
|
||||
--ring: color-mix(in oklch, var(--primary) 32%, transparent);
|
||||
}
|
||||
```
|
||||
|
||||
- مقادیر هگز باید چشمی به رنگ oklch نزدیک باشند (با ابزار تبدیل oklch→sRGB بگیر؛ `--brand-h: 256`, `--brand-c: 0.15`).
|
||||
- همین کار را برای **تم تیره** (`[data-theme="dark"]`) تکرار کن: `--primary`, `--primary-600/700`, و همه `*-soft`/`*-bg` که با color-mix ساخته شدهاند، هرکدام یک هگز fallback قبل از خط color-mix بگیرند (رنگ تیره مناسب سطح تیره).
|
||||
|
||||
### ۲. fallback برای color-mix در قوانین inline
|
||||
|
||||
هرجا `color-mix()` مستقیم داخل یک قانون استفاده شده (نه در تعریف متغیر)، یک خط رنگ ساده **قبل** از آن بگذار:
|
||||
|
||||
```css
|
||||
.appt-status.status-green {
|
||||
border-color: rgba(21,163,90,.25); /* fallback */
|
||||
border-color: color-mix(in srgb, var(--success) 25%, transparent);
|
||||
}
|
||||
.toggle-row.on {
|
||||
border-color: var(--border-2); /* fallback */
|
||||
border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
|
||||
}
|
||||
.save-bar.ok {
|
||||
border-color: var(--success); /* fallback */
|
||||
border-color: color-mix(in oklch, var(--success) 45%, var(--border));
|
||||
}
|
||||
```
|
||||
|
||||
- کل ۳۰ مورد `color-mix` را پیدا کن (`grep -n "color-mix" assets/admin/styles.css`) و برای هرکدام fallback مناسب اضافه کن.
|
||||
- `color-mix(in srgb, ...)` هم روی iOS < 16.2 خراب است؛ پس اینها هم باید fallback بگیرند.
|
||||
|
||||
### ۳. تصمیم درباره Tailwind v4
|
||||
|
||||
Tailwind v4 فقط Safari 16.4+ را هدف میگیرد. بررسی کن پنل چقدر به utilityهای Tailwind وابسته است (بهنظر کم — بیشتر استایلها inline یا کلاسهای design-system سفارشیاند: `grep -rho 'className="[^"]*"' assets/admin | grep -oE '(flex|grid|text-|bg-|p-[0-9]|gap-|rounded)'`).
|
||||
|
||||
- اگر وابستگی کم بود: کافی است وظیفه ۱ و ۲ انجام شود؛ مشکل اصلی رنگهاست.
|
||||
- اگر جایی از رنگهای Tailwind (`bg-*`, `text-*`) استفاده شده که oklch تولید میکنند و روی iOS قدیمی خرابند، همانها را با کلاس design-system سفارشی (که حالا fallback دارد) جایگزین کن.
|
||||
- در فایل پرامپت خروجی، حداقل نسخهٔ پشتیبانیشده را مستند کن.
|
||||
|
||||
### ۴. تست
|
||||
|
||||
- با Safari دسکتاپ: Develop → Enter Responsive Design Mode → iPhone 8 و نسخهی WebKit قدیمی؛ یا BrowserStack با iOS 15.x.
|
||||
- چک کن: رنگ primary دکمهها، پسزمینه کارتها، بوردرها، تم تیره، chipهای وضعیت، صفحه `/admin/settings` (toggleها و gw-cardها).
|
||||
- مطمئن شو روی مرورگر جدید هیچ تغییری در ظاهر ایجاد نشده (fallback فقط روی قدیمی فعال میشود).
|
||||
|
||||
## نکات مهم
|
||||
|
||||
- **ترتیب اعلانها حیاتی است:** خط fallback باید *قبل* از خط مدرن بیاید. CSS اعلان نامعتبر را دور میریزد و آخرین اعلانِ معتبر را نگه میدارد.
|
||||
- تغییر فقط در `assets/admin/styles.css` (و در صورت نیاز جزئی در twig برای `theme-color`). backend/API دست نخورد → نیاز به migration یا آپدیت `docs/api/` نیست.
|
||||
- بعد از تغییر CSS: `ddev exec yarn dev` بزن و کامپایل موفق را تأیید کن (خطای شناختهشدهٔ `lightningcss.linux-arm64-gnu` روی ddev بیربط است).
|
||||
- مراقب باش fallbackها با تم تیره تداخل نکنند؛ `[data-theme="dark"]` مقادیر خودش را دارد و باید fallback تیره بگیرد نه روشن.
|
||||
- viewport در twig درست است (`width=device-width, initial-scale=1`) — دست نزن.
|
||||
Reference in New Issue
Block a user