diff --git a/src/app/layouts/admin-layout/admin-layout.css b/src/app/layouts/admin-layout/admin-layout.css index 3ede811..9b63491 100644 --- a/src/app/layouts/admin-layout/admin-layout.css +++ b/src/app/layouts/admin-layout/admin-layout.css @@ -18,43 +18,89 @@ min-height: 0; /* unico contenitore scrollabile della console admin: header + sidebar + contenuto scorrono insieme */ + gap: 14px; + padding: 16px clamp(14px, 2.5vw, 32px) 24px; + background: #f8fafc; overflow-y: auto; overflow-x: hidden; } .admin-shell__header { display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 16px; - padding: 6px 4px 10px; + align-items: center; + gap: 12px; + padding: 14px 16px; + border-bottom: 1px solid #e2e8f0; + background: #fff; +} + +.admin-shell__brand-mark { + display: grid; + flex: 0 0 auto; + width: 36px; + height: 36px; + place-items: center; + border-radius: 10px; + background: #eff6ff; + color: #2563eb; +} + +.admin-shell__brand-mark mat-icon { + width: 20px; + height: 20px; + font-size: 20px; +} + +.admin-shell__header-copy { + min-width: 0; + flex: 1; } .admin-shell__eyebrow { - color: #2563eb; - font-size: 12px; + color: #64748b; + font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .admin-shell__title { - margin: 4px 0 0; + margin: 2px 0 0; color: #0f172a; - font-size: 26px; - font-weight: 800; + font-size: 22px; + font-weight: 700; } .admin-shell__subtitle { - margin: 6px 0 0; + margin: 3px 0 0; color: #64748b; - font-size: 14px; + font-size: 13px; +} + +.admin-shell__header-status { + display: inline-flex; + align-items: center; + gap: 6px; + flex: 0 0 auto; + padding: 6px 9px; + border: 1px solid #dbeafe; + border-radius: 999px; + background: rgba(255, 255, 255, 0.76); + color: #1d4ed8; + font-size: 12px; + font-weight: 700; +} + +.admin-shell__header-status mat-icon { + width: 16px; + height: 16px; + font-size: 16px; } .admin-shell__body { display: grid; - grid-template-columns: 240px minmax(0, 1fr); - gap: 18px; + grid-template-columns: 224px minmax(0, 1fr); + gap: 14px; flex: 1 0 auto; min-height: 0; } @@ -62,23 +108,26 @@ .admin-shell__sidebar { display: flex; flex-direction: column; - gap: 14px; - padding: 18px 14px; - border: 1px solid rgba(148, 163, 184, 0.2); - border-radius: 22px; - background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%); - box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06); + gap: 12px; + padding: 12px 10px; + border: 1px solid #e2e8f0; + border-radius: 14px; + background: #fff; + position: sticky; + top: 0; + align-self: start; } .admin-shell__menu-group { display: flex; flex-direction: column; - gap: 10px; + gap: 8px; } .admin-shell__sidebar-title { - color: #0f172a; - font-size: 12px; + padding: 0 8px; + color: #64748b; + font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; @@ -94,14 +143,14 @@ display: flex; align-items: center; gap: 10px; - padding: 12px 14px; - border-radius: 16px; - border: 1px solid rgba(148, 163, 184, 0.24); + padding: 9px 10px; + border-radius: 9px; + border: 1px solid #e2e8f0; color: #0f172a; font-size: 14px; font-weight: 700; text-decoration: none; - background: rgba(255, 255, 255, 0.78); + background: #fff; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } @@ -115,24 +164,34 @@ display: flex; align-items: center; gap: 10px; - padding: 12px 14px; - border-radius: 16px; + padding: 9px 10px; + border-radius: 9px; color: #334155; - font-size: 14px; - font-weight: 700; + font-size: 13px; + font-weight: 600; text-decoration: none; - transition: background-color 120ms ease, color 120ms ease, transform 120ms ease; + position: relative; + transition: background-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease; } .admin-shell__nav-link:hover { - background: rgba(37, 99, 235, 0.08); + background: #eff6ff; color: #1d4ed8; } .admin-shell__nav-link--active { + background: #eff6ff; + color: #1d4ed8; +} + +.admin-shell__nav-link--active::before { + position: absolute; + left: 0; + width: 3px; + height: 20px; + border-radius: 999px; background: #2563eb; - color: #fff; - box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2); + content: ''; } .admin-shell__content { @@ -147,10 +206,15 @@ .admin-shell__sidebar { padding: 14px; + position: static; } .admin-shell__nav { flex-direction: row; flex-wrap: wrap; } + + .admin-shell__header-status { + display: none; + } } diff --git a/src/app/layouts/admin-layout/admin-layout.html b/src/app/layouts/admin-layout/admin-layout.html index 8484fe5..ebb776e 100644 --- a/src/app/layouts/admin-layout/admin-layout.html +++ b/src/app/layouts/admin-layout/admin-layout.html @@ -6,10 +6,17 @@
Manage users and admin-only operations from a dedicated workspace.
+Users, access and service health in one focused workspace.
+Review existing users, change roles, reset passwords and remove accounts.