hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change style css

Browse Source
This commit is contained in:
hamed
2026-07-02 10:51:48 +03:30
parent 6d594822bf
commit fb90e447d8
13 changed files with 6704 additions and 2068 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/styles.css
+63 -29
View File
@@ -27,11 +27,12 @@
--text: #0f1b2e;
--text-2: #56657c;
--text-3: #8a98ad;
--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));
/* مقادیر sRGB پایه (fallback WebKit قدیمی iPhone 8)؛ نسخه oklch در @supports پایین فایل */
--primary: #5457dd;
--primary-600: #464ac9;
--primary-700: #3b3eae;
--primary-soft: #ecedfb;
--primary-soft2: #d9dbf6;
--on-primary: #ffffff;
--success: #15a35a;
--success-bg: #e6f6ed;
@@ -52,7 +53,7 @@
--stat-violet-bg: rgba(85,89,206,0.08); --stat-violet-fg: #5559CE;
--stat-green-bg: rgba(0,157,121,0.10); --stat-green-fg: #009D79;
--stat-pink-bg: rgba(241,119,50,0.10); --stat-pink-fg: #F17732;
--ring: color-mix(in oklch, var(--primary) 32%, transparent);
--ring: rgba(84,87,221,.32);
--shadow-sm: 0 1px 2px rgba(15,27,46,.06), 0 1px 3px rgba(15,27,46,.05);
--shadow: 0 2px 6px rgba(15,27,46,.06), 0 8px 24px rgba(15,27,46,.06);
--shadow-lg: 0 12px 32px rgba(15,27,46,.12), 0 4px 10px rgba(15,27,46,.06);
@@ -82,29 +83,61 @@
--text: #e9eef7;
--text-2: #9eb0c6;
--text-3: #67788e;
--primary: oklch(0.66 var(--brand-c) var(--brand-h));
--primary-600: oklch(0.60 var(--brand-c) var(--brand-h));
--primary-700: oklch(0.54 var(--brand-c) var(--brand-h));
--primary-soft: color-mix(in oklch, var(--primary) 16%, var(--surface));
--primary-soft2: color-mix(in oklch, var(--primary) 26%, var(--surface));
/* مقادیر sRGB پایه (fallback WebKit قدیمی)؛ نسخه oklch/color-mix در @supports پایین فایل */
--primary: #7a7cf1;
--primary-600: #686ae6;
--primary-700: #565ad9;
--primary-soft: #222a49;
--primary-soft2: #2c335d;
--on-primary: #07101f;
--success-bg: color-mix(in oklch, var(--success) 18%, var(--surface));
--warning-bg: color-mix(in oklch, var(--warning) 18%, var(--surface));
--danger-bg: color-mix(in oklch, var(--danger) 18%, var(--surface));
--info-bg: color-mix(in oklch, var(--info) 18%, var(--surface));
--violet-bg: color-mix(in oklch, var(--violet) 20%, var(--surface));
--success-bg: #123332;
--warning-bg: #352e23;
--danger-bg: #36202f;
--info-bg: #162d48;
--violet-bg: #262751;
--accent: #f0763d;
--accent-600: #e0651f;
--accent-bg: color-mix(in oklch, var(--accent) 18%, var(--surface));
--stat-amber-bg: color-mix(in oklch, var(--warning) 16%, var(--surface)); --stat-amber-fg: var(--warning);
--stat-violet-bg: color-mix(in oklch, var(--violet) 18%, var(--surface)); --stat-violet-fg: var(--violet);
--stat-green-bg: color-mix(in oklch, var(--success) 16%, var(--surface)); --stat-green-fg: var(--success);
--stat-pink-bg: color-mix(in oklch, var(--accent) 16%, var(--surface)); --stat-pink-fg: var(--accent);
--accent-bg: #392b2d;
--stat-amber-bg: #312c24; --stat-amber-fg: var(--warning);
--stat-violet-bg: #24264d; --stat-violet-fg: var(--violet);
--stat-green-bg: #123031; --stat-green-fg: var(--success);
--stat-pink-bg: #35292c; --stat-pink-fg: var(--accent);
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow: 0 2px 8px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.35);
--shadow-lg: 0 18px 44px rgba(0,0,0,.55);
}
/* ── رنگ‌های مدرن (فقط مرورگرهای با پشتیبانی oklch/color-mix) ──────
iPhone 8 و WebKit قدیمی این بلوک را نادیده می‌گیرند و مقادیر sRGB بالا را
نگه می‌دارند؛ مرورگر مدرن این نسخه‌های oklch را استفاده می‌کند (بدون تغییر ظاهر). */
@supports (color: color-mix(in oklch, red, blue)) {
: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);
}
[data-theme="dark"] {
--primary: oklch(0.66 var(--brand-c) var(--brand-h));
--primary-600: oklch(0.60 var(--brand-c) var(--brand-h));
--primary-700: oklch(0.54 var(--brand-c) var(--brand-h));
--primary-soft: color-mix(in oklch, var(--primary) 16%, var(--surface));
--primary-soft2: color-mix(in oklch, var(--primary) 26%, 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: color-mix(in oklch, var(--danger) 18%, var(--surface));
--info-bg: color-mix(in oklch, var(--info) 18%, var(--surface));
--violet-bg: color-mix(in oklch, var(--violet) 20%, var(--surface));
--accent-bg: color-mix(in oklch, var(--accent) 18%, var(--surface));
--stat-amber-bg: color-mix(in oklch, var(--warning) 16%, var(--surface));
--stat-violet-bg: color-mix(in oklch, var(--violet) 18%, var(--surface));
--stat-green-bg: color-mix(in oklch, var(--success) 16%, var(--surface));
--stat-pink-bg: color-mix(in oklch, var(--accent) 16%, var(--surface));
}
}
/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { font-family: var(--font-sans); box-sizing: border-box; }
html { scroll-behavior: smooth; }
@@ -366,6 +399,7 @@ body {
height: var(--topbar-h); flex: none; position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 12px;
padding: 0 var(--gap);
background: var(--bg); /* fallback WebKit قدیمی */
background: color-mix(in srgb, var(--bg) 85%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
@@ -466,11 +500,11 @@ body {
white-space: nowrap; border: 1.5px solid transparent; letter-spacing: 0.01em;
}
.appt-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.appt-status.status-green { color: var(--success); background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.appt-status.status-amber { color: var(--warning); background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.appt-status.status-red { color: var(--danger); background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.appt-status.status-blue { color: var(--info); background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.appt-status.status-violet { color: var(--violet); background: var(--violet-bg); border-color: color-mix(in srgb, var(--violet) 25%, transparent); }
.appt-status.status-green { color: var(--success); background: var(--success-bg); border-color: rgba(21,163,90,.25); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.appt-status.status-amber { color: var(--warning); background: var(--warning-bg); border-color: rgba(217,138,9,.25); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.appt-status.status-red { color: var(--danger); background: var(--danger-bg); border-color: rgba(224,57,74,.25); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.appt-status.status-blue { color: var(--info); background: var(--info-bg); border-color: rgba(43,134,216,.25); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.appt-status.status-violet { color: var(--violet); background: var(--violet-bg); border-color: rgba(124,92,240,.25); border-color: color-mix(in srgb, var(--violet) 25%, transparent); }
.appt-status.status-gray { color: var(--text-2); background: var(--surface-3); border-color: var(--border); }
/* field-label utility */
@@ -492,7 +526,7 @@ body {
.btn.soft:hover { background: var(--primary-soft2); }
.btn.danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.btn.danger:hover { filter: brightness(.97); }
.btn.accent { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 35%, transparent); }
.btn.accent { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(240,104,42,.35); box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 35%, transparent); }
.btn.accent:hover { background: var(--accent-600); }
.btn.outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn.outline:hover { background: var(--primary-soft); }
@@ -751,7 +785,7 @@ table.t tbody tr:last-child td { border-bottom: none; }
border: 1px solid var(--border); background: var(--surface-2); transition: .15s;
}
.toggle-row + .toggle-row { margin-top: 10px; }
.toggle-row.on { border-color: color-mix(in oklch, var(--primary) 40%, var(--border)); background: var(--primary-soft); }
.toggle-row.on { border-color: var(--border-2); border-color: color-mix(in oklch, var(--primary) 40%, var(--border)); background: var(--primary-soft); }
.toggle-row.warn.on { border-color: var(--warning); background: var(--warning-bg); }
.toggle-row .tr-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.toggle-row .tr-desc { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.6; }
@@ -776,7 +810,7 @@ table.t tbody tr:last-child td { border-bottom: none; }
}
.save-bar .sb-msg { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.save-bar .sb-actions { display: flex; gap: 10px; }
.save-bar.ok { border-color: color-mix(in oklch, var(--success) 45%, var(--border)); }
.save-bar.ok { border-color: var(--success); border-color: color-mix(in oklch, var(--success) 45%, var(--border)); }
@media (max-width: 900px) {
.settings-layout { grid-template-columns: 1fr; }