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

style(admin): tauri sidebar/header dimensions + hover-expand

Browse Source 
Sidebar 243px, collapsed 90px, desktop hover-expand overlay.
Responsive topbar height 56/72/82. Transparent sidebar/header borders in dark.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
2026-07-12 21:40:21 +03:30
co-authored by Claude Opus 4.8
parent 02d53cbab4
commit af2e1179f9
1 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/styles.css
+26 -3
View File
@@ -61,7 +61,8 @@
--gap: 20px;
--card-pad: 22px;
--row-h: 56px;
--sidebar-w: 252px;
--sidebar-w: 243px;
--collapsed-w: 90px;
--topbar-h: 64px;
--ease: cubic-bezier(.22,.61,.36,1);
}
@@ -310,7 +311,7 @@ body {
margin-right: var(--sidebar-w);
transition: margin .28s var(--ease);
}
.app[data-collapsed="true"] .main { margin-right: 76px; }
.app[data-collapsed="true"] .main { margin-right: var(--collapsed-w); }
.content { padding: var(--gap); max-width: 1480px; width: 100%; margin: 0 auto; }
/* ── Sidebar ─────────────────────────────────────────────────── */
@@ -323,7 +324,19 @@ body {
z-index: 40;
transition: width .28s var(--ease);
}
.app[data-collapsed="true"] .sidebar { width: 76px; }
.app[data-collapsed="true"] .sidebar { width: var(--collapsed-w); }
/* hover-expand سایدبار جمع‌شده (فقط دسکتاپ) — مثل clinic-pro-tauri */
@media (min-width: 1025px) {
.app[data-collapsed="true"] .sidebar:hover { width: var(--sidebar-w); box-shadow: var(--shadow-lg); }
.app[data-collapsed="true"] .sidebar:hover .brand-text,
.app[data-collapsed="true"] .sidebar:hover .user-meta { display: flex; }
.app[data-collapsed="true"] .sidebar:hover .nav-item { justify-content: flex-start; padding: 9px 12px; }
.app[data-collapsed="true"] .sidebar:hover .nav-item > span { display: revert; }
.app[data-collapsed="true"] .sidebar:hover .nav-item .badge-count { display: grid; }
.app[data-collapsed="true"] .sidebar:hover .nav-label { text-align: start; padding: 14px 12px 8px; font-size: 11px; }
.app[data-collapsed="true"] .sidebar:hover .nav-item.active::before { display: block; }
}
.sidebar-brand {
height: var(--topbar-h); flex: none;
display: flex; align-items: center; gap: 12px;
@@ -435,6 +448,11 @@ body {
.topbar-crumbs { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
.topbar-crumbs b { color: var(--text); }
/* در dark مرز سایدبار/هدر محو است — مثل clinic-pro-tauri */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar-brand,
[data-theme="dark"] .topbar { border-color: transparent; }
/* ── Generic Card ────────────────────────────────────────────── */
.card {
background: var(--surface); border: 1px solid var(--border);
@@ -727,6 +745,11 @@ html, body { max-width: 100%; overflow-x: hidden; }
.page-head, .toolbar { flex-wrap: wrap; }
}
/* ارتفاع هدر ریسپانسیو مطابق فیگما/tauri (56 → 72 → 82) */
:root { --topbar-h: 56px; }
@media (min-width: 768px) { :root { --topbar-h: 72px; } }
@media (min-width: 1024px) { :root { --topbar-h: 82px; } }
/* صفحه سرویس‌های کلینیک */
.srv-section-row:hover { background: var(--surface-2); }
.srv-section-actions { opacity: 0; transition: opacity 0.15s; }