fix(web): контент app-shell на всю ширину, как в MikrotikManager

Убран max-w-[1480px] mx-auto у контейнера содержимого в portal-shell. Ширина сайдбара (240px / 18rem / 3rem), высота шапки (min-h-12) и отступы (px-4 md:px-6, py-4 md:py-5) уже совпадали. Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
feat(ui): палитра токенов как в MikrotikManager (light/dark)
2026-10-23 18:16:02 +07:00 · 2026-10-23 18:11:29 +07:00
2 changed files with 76 additions and 43 deletions
@@ -200,7 +200,7 @@ export function PortalShell({ children }: { children: ReactNode }) {
            <PortalSidebar />
            <SidebarInset id="main-content" className="min-w-0">
              <PortalHeader />
-              <div className="mx-auto flex w-full min-w-0 max-w-[1480px] flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">{children}</div>
+              <div className="flex w-full min-w-0 flex-1 flex-col gap-4 px-4 py-4 md:gap-6 md:px-6 md:py-5">{children}</div>
            </SidebarInset>
            <CommandPalette />
          </SidebarProvider>
@@ -8,37 +8,37 @@

 :root {
  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(0.973 0.004 247.858);
+  --foreground: oklch(0.141 0.006 264.0);
  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.141 0.006 264.0);
  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.141 0.006 264.0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
+  --secondary: oklch(0.958 0.005 247.858);
  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
+  --muted: oklch(0.958 0.005 247.858);
+  --muted-foreground: oklch(0.520 0.010 264.0);
+  --accent: oklch(0.942 0.016 264.376);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --border: oklch(0.904 0.006 264.0);
+  --input: oklch(0.904 0.006 264.0);
+  --ring: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.546 0.215 264.376);
+  --chart-2: oklch(0.527 0.154 150.069);
+  --chart-3: oklch(0.625 0.162 41.500);
+  --chart-4: oklch(0.591 0.224 296.400);
+  --chart-5: oklch(0.577 0.245  27.325);
+  --sidebar: oklch(0.152 0.010 264.376);
+  --sidebar-foreground: oklch(0.920 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-accent: oklch(0.240 0.012 264.376);
+  --sidebar-accent-foreground: oklch(0.950 0 0);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.488 0.243 264.376);
  --destructive-foreground: var(--color-red-800);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-900);
@@ -50,40 +50,55 @@
  --invert-foreground: var(--color-zinc-50);
  --focus: var(--color-blue-500);
  --focus-foreground: var(--color-blue-900);
+  --chart-line-1: oklch(0.527 0.154 150.069);
+  --chart-line-2: oklch(0.546 0.215 264.376);
+  --chart-line-3: oklch(0.625 0.162  41.500);
+  --chart-line-4: oklch(0.591 0.224 296.400);
+  --chart-rx: oklch(0.527 0.154 150.069);
+  --chart-tx: oklch(0.546 0.215 264.376);
+  --status-online: oklch(0.527 0.154 150.069);
+  --status-offline: oklch(0.577 0.245  27.325);
+  --status-degraded: oklch(0.666 0.179  58.318);
+  --status-online-fg: oklch(0.437 0.149 150.069);
+  --status-online-bg: oklch(0.527 0.154 150.069 / 0.10);
+  --status-offline-fg: oklch(0.505 0.213  27.325);
+  --status-offline-bg: oklch(0.577 0.245  27.325 / 0.10);
+  --status-degraded-fg: oklch(0.555 0.163  58.318);
+  --status-degraded-bg: oklch(0.666 0.179  58.318 / 0.10);
 }

 .dark {
-  --background: oklch(0.145 0 0);
+  --background: oklch(0.133 0.011 264.376);
  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
+  --card: oklch(0.191 0.011 264.376);
  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
+  --popover: oklch(0.191 0.011 264.376);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
+  --secondary: oklch(0.252 0.010 264.376);
  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
+  --muted: oklch(0.252 0.010 264.376);
+  --muted-foreground: oklch(0.648 0.008 264.376);
+  --accent: oklch(0.285 0.022 264.376);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
+  --ring: oklch(0.488 0.243 264.376);
+  --chart-1: oklch(0.637 0.222 264.376);
+  --chart-2: oklch(0.696 0.170 151.328);
+  --chart-3: oklch(0.713 0.176  47.600);
+  --chart-4: oklch(0.714 0.173 303.900);
+  --chart-5: oklch(0.704 0.191  22.216);
+  --sidebar: oklch(0.191 0.011 264.376);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent: oklch(0.262 0.014 264.376);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --sidebar-ring: oklch(0.488 0.243 264.376);
  --destructive-foreground: var(--color-red-600);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-600);
@@ -95,6 +110,21 @@
  --invert-foreground: var(--color-zinc-50);
  --focus: var(--color-blue-500);
  --focus-foreground: var(--color-blue-600);
+  --chart-line-1: oklch(0.696 0.170 151.328);
+  --chart-line-2: oklch(0.637 0.222 264.376);
+  --chart-line-3: oklch(0.713 0.176  47.600);
+  --chart-line-4: oklch(0.714 0.173 303.900);
+  --chart-rx: oklch(0.696 0.170 151.328);
+  --chart-tx: oklch(0.637 0.222 264.376);
+  --status-online: oklch(0.527 0.154 150.069);
+  --status-offline: oklch(0.577 0.245  27.325);
+  --status-degraded: oklch(0.666 0.179  58.318);
+  --status-online-fg: oklch(0.696 0.170 151.328);
+  --status-online-bg: oklch(0.527 0.154 150.069 / 0.12);
+  --status-offline-fg: oklch(0.704 0.191  22.216);
+  --status-offline-bg: oklch(0.577 0.245  27.325 / 0.12);
+  --status-degraded-fg: oklch(0.769 0.149  70.080);
+  --status-degraded-bg: oklch(0.666 0.179  58.318 / 0.12);
 }

@theme inline {
@@ -129,10 +159,13 @@
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
  --color-invert-foreground: var(--invert-foreground);
  --color-invert: var(--invert);
  --color-warning-foreground: var(--warning-foreground);
Author	SHA1	Message	Date
DenozordecandClaude Sonnet 5.5	11a0b56be5	fix(web): контент app-shell на всю ширину, как в MikrotikManager quality / changes (push) Successful in 6s Details quality / api (push) Skipped Details quality / commitlint (push) Skipped Details quality / web (push) Successful in 47s Details quality / docker-check (push) Successful in 1m15s Details CD / quality (push) Successful in 2m10s Details CD / publish (push) Successful in 1m37s Details Убран max-w-[1480px] mx-auto у контейнера содержимого в portal-shell. Ширина сайдбара (240px / 18rem / 3rem), высота шапки (min-h-12) и отступы (px-4 md:px-6, py-4 md:py-5) уже совпадали. Co-Authored-By: Claude Sonnet 5.5 <[email protected]>	2026-10-23 18:16:02 +07:00
DenozordecandClaude Sonnet 5.5	09c9531ad9	feat(ui): палитра токенов как в MikrotikManager (light/dark) quality / changes (push) Successful in 7s Details quality / api (push) Skipped Details quality / commitlint (push) Skipped Details quality / web (push) Successful in 46s Details quality / docker-check (push) Successful in 1m19s Details CD / quality (push) Successful in 2m13s Details CD / publish (push) Successful in 1m21s Details packages/ui/src/styles/globals.css: значения :root/.dark перенесены из MikrotikManager app/globals.css (background, card, primary, secondary, muted, accent, destructive, border, input, ring, chart-1..5, sidebar-, success/info/ warning/invert). Добавлены токены MM: chart-line-1..4, chart-rx/tx, status- (online/offline/degraded + fg/bg). Шкала радиусов -sm..-4xl как в MM (множители от --radius 0.625rem). Имена токенов ReUI/shadcn сохранены, --focus* оставлены (используются ReUI). Co-Authored-By: Claude Sonnet 5.5 <[email protected]>	2026-10-23 18:11:29 +07:00