diff --git a/assets/admin/styles.css b/assets/admin/styles.css index 49e3663d..2473f784 100644 --- a/assets/admin/styles.css +++ b/assets/admin/styles.css @@ -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; }