🎨 Modern UI base files -

api/tacticalrmm/tacticalrmm/static/css/components.css

@@ -0,0 +1,100 @@
+/* Buttons */
+.btn {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 2.25rem;
+  padding: 0 0.875rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  box-shadow: var(--shadow-sm);
+  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
+}
+.btn:hover { box-shadow: var(--shadow-md); }
+.btn:active { transform: translateY(0.5px); }
+.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-primary-contrast);
+  border-color: transparent;
+}
+.btn-ghost {
+  background: transparent;
+  border-color: var(--color-border);
+}
+.btn-danger {
+  background: var(--color-danger);
+  color: #fff;
+  border-color: transparent;
+}
+.btn-sm { height: 1.875rem; padding: 0 0.625rem; border-radius: var(--radius-xs); font-size: var(--text-sm); }
+.btn-lg { height: 2.75rem; padding: 0 1.25rem; border-radius: var(--radius-md); font-size: var(--text-lg); }
+
+/* Inputs */
+.input, select, textarea, input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"] {
+  display: inline-flex;
+  align-items: center;
+  height: 2.25rem;
+  padding: 0 0.75rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+.input:focus, select:focus, textarea:focus, input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
+}
+.is-invalid {
+  border-color: var(--color-danger) !important;
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger) 20%, transparent) !important;
+}
+textarea { min-height: 5rem; padding: 0.5rem 0.75rem; }
+
+/* Cards */
+.card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+.card-header { padding: var(--space-4); border-bottom: 1px solid var(--color-border); font-weight: 600; }
+.card-body { padding: var(--space-4); }
+.card-footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
+
+/* Tables */
+.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
+.table thead th { position: sticky; top: 0; background: var(--color-elevated); text-align: left; font-size: var(--text-sm); color: var(--color-muted); padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--color-border); }
+.table tbody td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--color-border); }
+.table tbody tr:nth-child(odd) { background: color-mix(in oklab, var(--color-surface) 92%, var(--color-text)); }
+.table tbody tr:hover { background: color-mix(in oklab, var(--color-surface) 86%, var(--color-text)); }
+
+/* Badges */
+.badge { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding: 0 0.5rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-elevated); font-size: var(--text-xs); }
+.badge-success { background: color-mix(in oklab, var(--color-success) 18%, var(--color-elevated)); color: #063; border-color: color-mix(in oklab, var(--color-success) 35%, var(--color-border)); }
+.badge-warning { background: color-mix(in oklab, var(--color-warning) 18%, var(--color-elevated)); color: #5a3a00; border-color: color-mix(in oklab, var(--color-warning) 35%, var(--color-border)); }
+.badge-danger { background: color-mix(in oklab, var(--color-danger) 18%, var(--color-elevated)); color: #5a0a0a; border-color: color-mix(in oklab, var(--color-danger) 35%, var(--color-border)); }
+
+/* Alerts */
+.alert { border-radius: var(--radius-md); padding: var(--space-4); border: 1px solid var(--color-border); }
+.alert-info { background: color-mix(in oklab, var(--color-primary) 10%, var(--color-elevated)); }
+.alert-success { background: color-mix(in oklab, var(--color-success) 12%, var(--color-elevated)); }
+.alert-warning { background: color-mix(in oklab, var(--color-warning) 12%, var(--color-elevated)); }
+.alert-danger { background: color-mix(in oklab, var(--color-danger) 12%, var(--color-elevated)); }
+
+/* Tabs */
+.tabs { display: flex; border-bottom: 1px solid var(--color-border); gap: var(--space-2); }
+.tabs a { position: relative; display: inline-flex; padding: var(--space-3) var(--space-4); color: var(--color-muted); text-decoration: none; }
+.tabs a[aria-current="page"], .tabs a.is-active { color: var(--color-text); }
+.tabs a::after { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: -1px; height: 2px; background: transparent; transition: background 160ms ease; }
+.tabs a[aria-current="page"]::after, .tabs a.is-active::after { background: var(--color-primary); }
+
+

api/tacticalrmm/tacticalrmm/static/css/theme.css

@@ -0,0 +1,55 @@
+/*
+  Theme layer: defines light/dark overrides for tokens.
+*/
+
+:root {
+  color-scheme: light dark;
+}
+
+/* Light theme (via media) */
+@media (prefers-color-scheme: light) {
+  :root {
+    --color-bg: #f7f9fc;
+    --color-surface: #ffffff;
+    --color-elevated: #ffffff;
+    --color-border: rgba(2, 6, 23, 0.08);
+    --color-text: #0b1220;
+    --color-muted: #5b6b7a;
+  }
+}
+
+/* Explicit theme classes override media */
+.theme-light {
+  --color-bg: #f7f9fc;
+  --color-surface: #ffffff;
+  --color-elevated: #ffffff;
+  --color-border: rgba(2, 6, 23, 0.08);
+  --color-text: #0b1220;
+  --color-muted: #5b6b7a;
+}
+
+.theme-dark {
+  /* Dark theme uses defaults from tokens; customize if needed */
+}
+
+/* Base document colors */
+html, body {
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  line-height: var(--line);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+

api/tacticalrmm/tacticalrmm/static/css/tokens.css

@@ -0,0 +1,52 @@
+/*
+  Design tokens for TacticalRMM UI
+  These variables are intentionally generic and safe to override per theme.
+*/
+
+:root {
+  /* Colors (dark defaults; light overrides in theme.css) */
+  --color-bg: #0b0f14;
+  --color-surface: #121923;
+  --color-elevated: #1a2532;
+  --color-border: rgba(148, 163, 184, 0.18);
+  --color-text: #e6edf3;
+  --color-muted: #9fb1c1;
+
+  --color-primary: #3b82f6;
+  --color-primary-contrast: #ffffff;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+
+  /* Radius */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.18);
+
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  /* Typography */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-md: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --line: 1.5;
+}
+
+

api/tacticalrmm/tacticalrmm/static/css/utilities.css

@@ -0,0 +1,50 @@
+/* Spacing */
+.p-2 { padding: var(--space-2); }
+.p-3 { padding: var(--space-3); }
+.p-4 { padding: var(--space-4); }
+.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
+.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
+.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
+.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
+.m-0 { margin: 0; }
+.mt-2 { margin-top: var(--space-2); }
+.mt-3 { margin-top: var(--space-3); }
+.mt-4 { margin-top: var(--space-4); }
+.mb-2 { margin-bottom: var(--space-2); }
+.mb-3 { margin-bottom: var(--space-3); }
+.mb-4 { margin-bottom: var(--space-4); }
+
+/* Layout */
+.container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
+.grid { display: grid; gap: var(--space-4); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.flex { display: flex; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); }
+.gap-4 { gap: var(--space-4); }
+
+/* Text */
+.text-xs { font-size: var(--text-xs); }
+.text-sm { font-size: var(--text-sm); }
+.text-md { font-size: var(--text-md); }
+.text-lg { font-size: var(--text-lg); }
+.text-xl { font-size: var(--text-xl); }
+.text-muted { color: var(--color-muted); }
+.text-strong { font-weight: 600; }
+
+/* Surfaces */
+.surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
+.elevated { background: var(--color-elevated); }
+.shadow-sm { box-shadow: var(--shadow-sm); }
+.shadow-md { box-shadow: var(--shadow-md); }
+.shadow-lg { box-shadow: var(--shadow-lg); }
+
+/* Visibility & Focus */
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+.focus-ring:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+
+