feat(dashboard): tab Infrastructura, panouri colapsabile si compacte
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KddsXCqEbKMhdFJDYbAsx8
This commit is contained in:
Claude Agent
@@ -1,4 +1,5 @@
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
[hidden] { display: none !important; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
@@ -358,3 +359,114 @@ input[type="password"]:focus { outline: none; border-color: var(--border-focus);
|
||||
.actions { grid-template-columns: 1fr; }
|
||||
.metrics { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
|
||||
/* ── doua coloane (tab Infrastructura) ────────────────────────────────── */
|
||||
.cols { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); align-items: start; }
|
||||
.col { display: grid; gap: var(--space-4); min-width: 0; }
|
||||
.tscroll { overflow-x: auto; }
|
||||
.psub { color: var(--text-muted); font-size: var(--text-xs); }
|
||||
|
||||
/* ── tab-uri (Punte / Maria / Infrastructura) ─────────────────────────── */
|
||||
.tabs { display: flex; gap: 2px; }
|
||||
.tab {
|
||||
padding: 2px var(--space-3);
|
||||
border-radius: 999px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-xs);
|
||||
border: 1px solid transparent;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tab.on { color: var(--text-primary); border-color: var(--border-focus); background: var(--accent-subtle); }
|
||||
.tabpage { display: none; }
|
||||
.tabpage.on { display: grid; }
|
||||
|
||||
/* ── panouri colapsabile (details.card inlocuieste vechiul section.card) ── */
|
||||
details.card { padding: 0; }
|
||||
details.card.danger { border-color: rgba(239, 68, 68, 0.5); }
|
||||
details.card > summary {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2) var(--space-3);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
user-select: none;
|
||||
border-radius: var(--radius-lg);
|
||||
margin: 0;
|
||||
}
|
||||
details.card > summary::-webkit-details-marker { display: none; }
|
||||
details.card > summary:hover { background: var(--bg-surface-hover); }
|
||||
details.card > summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
|
||||
details.card .chev { width: 14px; color: var(--text-muted); transition: transform .15s; flex: none; font-size: 10px; }
|
||||
details.card[open] > summary .chev { transform: rotate(90deg); }
|
||||
details.card .ptitle { font-weight: 600; color: var(--text-primary); font-size: var(--text-base); }
|
||||
.pbody { padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-4); border-top: 1px solid var(--border); }
|
||||
.pbody > :first-child { margin-top: var(--space-4); }
|
||||
@media (prefers-reduced-motion: reduce) { details.card .chev { transition: none; } }
|
||||
|
||||
/* ── banda de metrici compacta (stare cluster) ────────────────────────── */
|
||||
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
|
||||
.strip > div { padding: var(--space-2) var(--space-3); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; }
|
||||
.strip .l { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
|
||||
.strip .v { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
|
||||
.strip .s { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.strip .warn .v { color: var(--warning); }
|
||||
|
||||
/* ── randuri de actiune (UPS, DR VM109) ───────────────────────────────── */
|
||||
.rows { display: grid; }
|
||||
.row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px solid var(--border); }
|
||||
.row:first-child { border-top: 0; }
|
||||
.row .t { font-weight: 600; color: var(--text-primary); }
|
||||
.row .d { color: var(--text-muted); font-size: var(--text-xs); }
|
||||
|
||||
/* ── pasi numerotati (oprire/pornire) ─────────────────────────────────── */
|
||||
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; }
|
||||
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 18px 1fr; gap: var(--space-2); padding: 3px 0; font-size: var(--text-xs); }
|
||||
ol.steps li::before { content: counter(s); color: var(--text-muted); font-family: var(--font-mono); text-align: right; }
|
||||
ol.steps li.dies { color: var(--error); }
|
||||
ol.steps li.dies::before { content: "!"; color: var(--error); font-weight: 700; }
|
||||
ol.steps li.here::before { content: "▸"; color: var(--accent); }
|
||||
.cmt { color: var(--text-muted); }
|
||||
|
||||
/* ── banner de job activ ──────────────────────────────────────────────── */
|
||||
.banner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; background: var(--accent-subtle); border: 1px solid var(--border-focus); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
|
||||
.hint { font-size: var(--text-xs); color: var(--text-muted); }
|
||||
.hint.warn { color: var(--warning); }
|
||||
|
||||
/* ── fisa de operatie (failover/failback) ─────────────────────────────── */
|
||||
details.op { border-top: 1px solid var(--border); }
|
||||
details.op:first-of-type { border-top: 0; }
|
||||
details.op > summary {
|
||||
list-style: none; cursor: pointer;
|
||||
display: grid; grid-template-columns: 14px 1fr auto; gap: var(--space-2); align-items: center;
|
||||
padding: var(--space-3) 0; margin: 0;
|
||||
}
|
||||
details.op > summary::-webkit-details-marker { display: none; }
|
||||
details.op > summary .t { font-weight: 600; color: var(--text-primary); }
|
||||
details.op > summary .d { display: block; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
|
||||
details.op > summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
|
||||
.sheet { margin: 0 0 var(--space-3) 22px; display: grid; grid-template-columns: 110px 1fr; gap: var(--space-2) var(--space-3); font-size: var(--text-xs); background: var(--bg-surface-hover); border-radius: var(--radius); padding: var(--space-3); }
|
||||
.sheet dt { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; margin: 0; }
|
||||
.sheet dd { margin: 0; }
|
||||
.sheet dd.risk { color: var(--error); }
|
||||
.sheet .foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: var(--space-2); margin-top: 2px; }
|
||||
.obsolete { background: rgba(239, 68, 68, 0.06); }
|
||||
:root[data-theme="light"] .obsolete { background: rgba(220, 38, 38, 0.05); }
|
||||
|
||||
/* ── ajutor Discord /infra ─────────────────────────────────────────────── */
|
||||
.cmds { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); font-size: var(--text-xs); }
|
||||
.cmds code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-primary); white-space: nowrap; }
|
||||
.cmds span { color: var(--text-muted); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.row { grid-template-columns: 1fr; }
|
||||
.sheet { grid-template-columns: 1fr; margin-left: 0; }
|
||||
.sheet dt { padding-top: var(--space-1); }
|
||||
.cmds { grid-template-columns: 1fr; }
|
||||
.cmds span { margin-bottom: var(--space-1); }
|
||||
details.card > summary { padding: var(--space-3) var(--space-4); }
|
||||
.pbody { padding: 0 var(--space-4) var(--space-4); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user