@omnizap-system/omnizap 2.5.12

package/public/css/systemadm/admin.css

@@ -0,0 +1,474 @@
+.hero {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-lg);
+  background: rgba(13, 22, 38, 0.84);
+  box-shadow: var(--shadow-card);
+  padding: var(--space-6);
+  display: grid;
+  gap: var(--space-3);
+}
+
+h1 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: clamp(var(--fs-24), 3.2vw, var(--fs-32));
+  letter-spacing: -0.02em;
+  line-height: 1.08;
+  color: var(--text-main);
+}
+
+.lead {
+  margin: 0;
+  color: var(--text-soft);
+  line-height: 1.65;
+  font-size: var(--fs-16);
+  max-inline-size: 76ch;
+}
+
+.status {
+  margin: 0;
+  color: #d7e6fb;
+  font-size: var(--fs-14);
+}
+
+.error {
+  margin: 0;
+  border: 1px solid rgba(239, 68, 68, 0.5);
+  background: rgba(78, 24, 31, 0.56);
+  border-radius: var(--radius-sm);
+  color: #ffdbe0;
+  padding: 10px 12px;
+  font-size: var(--fs-14);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.grid {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.metric {
+  background: rgba(14, 24, 40, 0.84);
+  padding: var(--space-4);
+  min-block-size: 136px;
+  display: grid;
+  gap: var(--space-2);
+}
+
+.metric-label,
+.admin-metric-label {
+  margin: 0;
+  color: var(--text-soft);
+  font-size: var(--fs-12);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.metric-value,
+.admin-metric-value {
+  margin: 0;
+  font-size: clamp(var(--fs-24), 2.2vw, 2.1rem);
+  line-height: 1.05;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-main);
+}
+
+.metric-foot {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.trend {
+  font-size: var(--fs-12);
+  font-weight: 700;
+  border: 1px solid;
+  border-radius: 999px;
+  padding: 2px 8px;
+}
+
+.trend.up {
+  border-color: rgba(34, 197, 94, 0.42);
+  background: rgba(20, 66, 49, 0.54);
+  color: #b9f7d3;
+}
+
+.trend.warn {
+  border-color: rgba(245, 158, 11, 0.48);
+  background: rgba(78, 53, 18, 0.56);
+  color: #ffe0ac;
+}
+
+.trend.down {
+  border-color: rgba(239, 68, 68, 0.46);
+  background: rgba(81, 25, 36, 0.54);
+  color: #ffd1d8;
+}
+
+.sparkline {
+  inline-size: 100%;
+  block-size: 24px;
+}
+
+.sparkline path {
+  stroke: rgba(96, 165, 250, 0.9);
+  stroke-width: 2;
+  fill: none;
+}
+
+.sparkline .fill {
+  fill: rgba(96, 165, 250, 0.12);
+}
+
+.summary {
+  border: 1px solid rgba(96, 165, 250, 0.32);
+  border-radius: var(--radius-md);
+  background: rgba(14, 29, 50, 0.52);
+  padding: var(--space-3);
+  display: grid;
+  gap: var(--space-2);
+  color: #d7e7ff;
+  font-size: var(--fs-14);
+}
+
+.summary strong {
+  color: var(--text-main);
+}
+
+.admin-toolbar {
+  position: static;
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-md);
+  background: rgba(10, 19, 34, 0.9);
+  padding: var(--space-3);
+  display: grid;
+  gap: var(--space-2);
+}
+
+.admin-toolbar-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.admin-carousel-nav {
+  display: none !important;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.admin-carousel-btn {
+  border: 1px solid var(--line-soft);
+  border-radius: var(--radius-xs);
+  background: rgba(17, 34, 60, 0.9);
+  color: #e3eeff;
+  font-size: var(--fs-12);
+  font-weight: 700;
+  padding: 6px 10px;
+  cursor: pointer;
+}
+
+.admin-carousel-btn:hover {
+  border-color: var(--line-strong);
+}
+
+.admin-carousel-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.admin-carousel-counter {
+  margin: 0;
+  color: var(--text-soft);
+  font-size: var(--fs-12);
+  font-weight: 700;
+  min-inline-size: 56px;
+  text-align: center;
+}
+
+.admin-last-updated {
+  margin: 0;
+  font-size: var(--fs-12);
+  color: var(--text-soft);
+}
+
+body.compact .admin-layout.is-carousel {
+  display: grid;
+  gap: var(--space-2);
+  block-size: auto;
+  overflow: visible;
+  scroll-snap-type: none;
+}
+
+body.compact .admin-layout.is-carousel > .section {
+  block-size: auto;
+  min-inline-size: 0;
+  overflow: visible;
+}
+
+body.compact .metric-card,
+body.compact .admin-metric {
+  min-block-size: 124px;
+}
+
+body.compact .section-kpis .admin-grid,
+body.compact .section-health .health-grid {
+  grid-template-columns: none;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(220px, 1fr);
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+  scrollbar-width: thin;
+  padding-block-end: var(--space-1);
+}
+
+body.compact .section-kpis .admin-grid > *,
+body.compact .section-health .health-grid > * {
+  scroll-snap-align: start;
+}
+
+.security-strip {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.security-pill {
+  border: 1px solid var(--line-soft);
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: var(--fs-12);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: #d8e8ff;
+  background: rgba(14, 27, 47, 0.7);
+}
+
+.risk-strip {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.risk-pill {
+  border: 1px solid var(--line-soft);
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: var(--fs-12);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #c2d5f2;
+  background: rgba(14, 24, 40, 0.86);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.risk-pill::before {
+  content: '';
+  inline-size: 7px;
+  block-size: 7px;
+  border-radius: 50%;
+  background: #6ea0dd;
+}
+
+.risk-pill.warn {
+  border-color: rgba(245, 158, 11, 0.5);
+  color: #ffe2b1;
+  background: rgba(76, 49, 16, 0.6);
+}
+
+.risk-pill.warn::before {
+  background: var(--status-warning);
+}
+
+.risk-pill.danger {
+  border-color: rgba(239, 68, 68, 0.52);
+  color: #ffd5db;
+  background: rgba(74, 24, 34, 0.62);
+}
+
+.risk-pill.danger::before {
+  background: var(--status-error);
+}
+
+.admin-grid {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.section-kpis {
+  border-color: rgba(96, 165, 250, 0.32);
+}
+
+.section-health {
+  border-color: rgba(52, 211, 153, 0.28);
+}
+
+.section-security {
+  border-color: rgba(245, 158, 11, 0.28);
+}
+
+.section-users {
+  border-color: rgba(167, 139, 250, 0.3);
+}
+
+.section-governance {
+  border-color: rgba(148, 163, 184, 0.32);
+}
+
+.metric-card,
+.admin-metric {
+  min-block-size: 154px;
+  padding: var(--space-4);
+  display: grid;
+  gap: var(--space-2);
+}
+
+.metric-card {
+  background: rgba(14, 25, 42, 0.88);
+}
+
+.metric-card.system {
+  background: rgba(12, 34, 42, 0.84);
+}
+
+.metric-card.security {
+  background: rgba(44, 24, 31, 0.72);
+}
+
+.metric-card.users {
+  background: rgba(30, 24, 48, 0.76);
+}
+
+.metric-card.critical {
+  border-color: rgba(239, 68, 68, 0.52);
+}
+
+.metric-card.warning {
+  border-color: rgba(245, 158, 11, 0.48);
+}
+
+.metric-context {
+  margin: 0;
+  color: var(--text-soft);
+  font-size: var(--fs-12);
+}
+
+.health-grid {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.health-card {
+  min-block-size: 126px;
+  background: rgba(10, 19, 34, 0.9);
+  padding: var(--space-3);
+  display: grid;
+  gap: var(--space-2);
+}
+
+.health-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.health-meter {
+  block-size: 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+}
+
+.health-meter > span {
+  display: block;
+  block-size: 100%;
+  inline-size: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #34d399, #86efac);
+  transition: inline-size 0.25s ease;
+}
+
+.health-meter > span.warn {
+  background: linear-gradient(90deg, #f59e0b, #fcd34d);
+}
+
+.health-meter > span.danger {
+  background: linear-gradient(90deg, #ef4444, #fb7185);
+}
+
+.health-meta {
+  margin: 0;
+  color: var(--text-soft);
+  font-size: var(--fs-12);
+}
+
+.db-badge {
+  border: 1px solid rgba(96, 165, 250, 0.44);
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-size: var(--fs-12);
+  font-weight: 700;
+  color: #d8e8ff;
+  background: rgba(22, 46, 78, 0.58);
+}
+
+.db-badge.healthy {
+  border-color: rgba(34, 197, 94, 0.46);
+  color: #c6ffe2;
+  background: rgba(16, 62, 49, 0.56);
+}
+
+.db-badge.degraded {
+  border-color: rgba(245, 158, 11, 0.5);
+  color: #ffe2b1;
+  background: rgba(74, 53, 18, 0.58);
+}
+
+.db-badge.down {
+  border-color: rgba(239, 68, 68, 0.48);
+  color: #ffd5db;
+  background: rgba(78, 25, 36, 0.56);
+}
+
+@media (max-width: 920px) {
+  .admin-toolbar {
+    position: static;
+    top: auto;
+  }
+
+  .topbar,
+  .sidebar {
+    backdrop-filter: none;
+  }
+}
+
+@media (max-width: 680px) {
+  .hero {
+    padding: var(--space-4);
+  }
+
+  .metric,
+  .metric-card,
+  .health-card {
+    min-block-size: auto;
+  }
+
+  body.compact .section-kpis .admin-grid,
+  body.compact .section-health .health-grid {
+    grid-auto-columns: minmax(180px, 82vw);
+  }
+}

package/public/css/systemadm/base.css

@@ -0,0 +1,73 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  font-size: var(--fs-16);
+  line-height: var(--lh-body);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  color: var(--text-main);
+  background: radial-gradient(44rem 22rem at 8% -16%, rgba(72, 132, 220, 0.2), transparent 65%), linear-gradient(180deg, #070d18 0%, #081122 100%);
+}
+
+[hidden] {
+  display: none !important;
+}
+
+body[data-admin-busy='true'] .top-status-dot {
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+body.compact .section {
+  padding: var(--space-3);
+}
+
+body.compact .metric-card,
+body.compact .health-card,
+body.compact .admin-item {
+  padding: var(--space-3);
+}
+
+body.compact .panel-title {
+  font-size: var(--fs-14);
+}
+
+mark {
+  background: rgba(94, 169, 255, 0.22);
+  color: var(--text-main);
+  border-radius: var(--space-1);
+  padding: 0 var(--space-1);
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(1.28);
+    opacity: 0.5;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}