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

style(admin): align design tokens to clinic-pro-tauri

Browse Source 
Match the admin panel's visual system to the tauri source app:
- neutralize color tokens (border/surface-2/3, text 1-3) from the
  bluish indigo tint to tauri's neutral grays (#efefef/#3b3b3b/#7e7e7e/#a1a1a1)
- add --nav-active-bg (#f8f8ff light) for the sidebar active item,
  matching tauri active-link-side
- enable Vazirmatn ss02 stylistic set on body (tauri typography)
- responsive topbar heights 56/67/79/90 exactly as tauri

Settings sub-sidebar active orange (#f17732 = rgb(241,119,50)) and
ClinicPro branding/section grouping kept per product decision.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hamed
2026-07-15 16:48:25 +03:30
co-authored by Claude Opus 4.8
parent 5c15a4dd7f
commit 0a78bf7a6b
1 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/styles.css
+16 -11
View File
@@ -20,13 +20,15 @@
--bg: #fafafa; --bg: #fafafa;
--bg-2: #f2f2f5; --bg-2: #f2f2f5;
--surface: #ffffff; --surface: #ffffff;
--surface-2: #f6f8fc; --surface-2: #f5f5f5;
--surface-3: #eef2f8; --surface-3: #ececf1;
--border: #e4e9f1; --border: #efefef;
--border-2: #d6dde8; --border-2: #e1e1e1;
--text: #0f1b2e; --text: #3b3b3b;
--text-2: #56657c; --text-2: #7e7e7e;
--text-3: #8a98ad; --text-3: #a1a1a1;
/* پس‌زمینه آیتم فعال سایدبار — مطابق active-link-side در clinic-pro-tauri */
--nav-active-bg: #f8f8ff;
/* مقادیر sRGB پایه (fallback WebKit قدیمی iPhone 8)؛ نسخه oklch در @supports پایین فایل */ /* مقادیر sRGB پایه (fallback WebKit قدیمی iPhone 8)؛ نسخه oklch در @supports پایین فایل */
--primary: #5559CE; --primary: #5559CE;
--primary-600: #494CB3; --primary-600: #494CB3;
@@ -84,6 +86,7 @@
--text: #D7D8ED; --text: #D7D8ED;
--text-2: #A1A1A1; --text-2: #A1A1A1;
--text-3: #6d6e82; --text-3: #6d6e82;
--nav-active-bg: var(--primary-soft);
/* مقادیر sRGB پایه (fallback WebKit قدیمی)؛ نسخه oklch/color-mix در @supports پایین فایل */ /* مقادیر sRGB پایه (fallback WebKit قدیمی)؛ نسخه oklch/color-mix در @supports پایین فایل */
--primary: #6B6FD6; --primary: #6B6FD6;
--primary-600: #5c60cf; --primary-600: #5c60cf;
@@ -148,6 +151,7 @@ body {
color: var(--text); color: var(--text);
font-size: 15px; font-size: 15px;
line-height: 1.6; line-height: 1.6;
font-feature-settings: 'ss02';
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
transition: background .3s var(--ease), color .3s var(--ease); transition: background .3s var(--ease), color .3s var(--ease);
@@ -372,7 +376,7 @@ body {
} }
.nav-item svg { flex-shrink: 0; } .nav-item svg { flex-shrink: 0; }
.nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--primary-soft); color: var(--primary-700); font-weight: 700; } .nav-item.active { background: var(--nav-active-bg); color: var(--primary-700); font-weight: 700; }
.nav-item.active::before { .nav-item.active::before {
content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
width: 4px; height: 22px; border-radius: 99px; background: var(--primary); width: 4px; height: 22px; border-radius: 99px; background: var(--primary);
@@ -747,10 +751,11 @@ html, body { max-width: 100%; overflow-x: hidden; }
.page-head, .toolbar { flex-wrap: wrap; } .page-head, .toolbar { flex-wrap: wrap; }
} }
/* ارتفاع هدر ریسپانسیو مطابق فیگما/tauri (56 → 72 → 82) */ /* ارتفاع هدر ریسپانسیو دقیقاً مطابق clinic-pro-tauri (56 → 67 → 79 → 90) */
:root { --topbar-h: 56px; } :root { --topbar-h: 56px; }
@media (min-width: 768px) { :root { --topbar-h: 72px; } } @media (min-width: 640px) { :root { --topbar-h: 67px; } }
@media (min-width: 1024px) { :root { --topbar-h: 82px; } } @media (min-width: 768px) { :root { --topbar-h: 79px; } }
@media (min-width: 1024px) { :root { --topbar-h: 90px; } }
/* صفحه سرویس‌های کلینیک */ /* صفحه سرویس‌های کلینیک */
.srv-section-row:hover { background: var(--surface-2); } .srv-section-row:hover { background: var(--surface-2); }