initial config manager
This commit is contained in:
Martino Ferrari
@@ -3858,3 +3858,285 @@ kbd {
|
||||
background: #2563eb;
|
||||
}
|
||||
.panel-btn-primary:hover { background: #3b82f6; }
|
||||
|
||||
/* ── Configuration manager ─────────────────────────────────────────────── */
|
||||
.cfg-tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.cfg-tab {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
color: #94a3b8;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cfg-tab:hover { color: #e2e8f0; background: #232a3a; }
|
||||
.cfg-tab-active {
|
||||
color: #e2e8f0;
|
||||
background: #2d3748;
|
||||
border-color: #3d4a63;
|
||||
}
|
||||
.cfg-badge {
|
||||
display: inline-block;
|
||||
min-width: 1.1rem;
|
||||
text-align: center;
|
||||
font-size: 0.7rem;
|
||||
color: #94a3b8;
|
||||
background: #232a3a;
|
||||
border-radius: 8px;
|
||||
padding: 0 0.35rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.cfg-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
padding: 0.75rem 1rem;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.cfg-edit-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.cfg-edit-bar .panel-btn { flex: 0 0 auto; }
|
||||
|
||||
.cfg-section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.5rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: 1px solid #2d3748;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
.cfg-section-head .panel-btn { flex: 0 0 auto; }
|
||||
|
||||
.cfg-params {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.cfg-param {
|
||||
background: #151a26;
|
||||
border: 1px solid #232a3a;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
position: relative;
|
||||
}
|
||||
.cfg-param-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.cfg-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.cfg-field > label {
|
||||
font-size: 0.68rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: #64748b;
|
||||
}
|
||||
.cfg-field-key { width: 8rem; }
|
||||
.cfg-field-label { flex: 1; min-width: 8rem; }
|
||||
.cfg-field-type { width: 7rem; }
|
||||
.cfg-field-target { flex: 2; min-width: 12rem; }
|
||||
.cfg-field-default { width: 8rem; }
|
||||
.cfg-field-enum { flex: 1; min-width: 10rem; }
|
||||
.cfg-field-num { width: 6rem; }
|
||||
|
||||
.cfg-mandatory {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.75rem;
|
||||
color: #94a3b8;
|
||||
white-space: nowrap;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.cfg-param-del {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
.cfg-param-del:hover { color: #f87171; }
|
||||
|
||||
.cfg-unit {
|
||||
font-size: 0.72rem;
|
||||
color: #64748b;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Instance values ───────────────────────────────────────────────────── */
|
||||
.cfg-values {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.cfg-value-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.3rem 0.4rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.cfg-value-row:hover { background: #151a26; }
|
||||
.cfg-value-label {
|
||||
width: 14rem;
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.82rem;
|
||||
color: #cbd5e1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cfg-req { color: #f87171; margin-left: 0.15rem; }
|
||||
.cfg-value-input { width: 10rem; flex: 0 0 auto; }
|
||||
.cfg-value-target {
|
||||
font-size: 0.72rem;
|
||||
color: #64748b;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── Apply result ──────────────────────────────────────────────────────── */
|
||||
.cfg-apply-result {
|
||||
border: 1px solid #232a3a;
|
||||
border-radius: 6px;
|
||||
margin-top: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cfg-apply-head {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: #151a26;
|
||||
font-size: 0.8rem;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
.cfg-apply-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.cfg-apply-table th,
|
||||
.cfg-apply-table td {
|
||||
text-align: left;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-top: 1px solid #1e2433;
|
||||
}
|
||||
.cfg-apply-table th { color: #64748b; font-weight: 500; }
|
||||
.cfg-ok { color: #4ade80; }
|
||||
.cfg-fail { color: #f87171; }
|
||||
|
||||
/* ── Version panel ─────────────────────────────────────────────────────── */
|
||||
.cfg-versions {
|
||||
border-top: 1px solid #2d3748;
|
||||
margin-top: 0.5rem;
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
.cfg-versions-toggle {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
.cfg-versions-toggle:hover { color: #e2e8f0; }
|
||||
.cfg-versions-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.cfg-version-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.25rem 0.4rem;
|
||||
border: 1px solid #232a3a;
|
||||
border-radius: 5px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.cfg-version-current {
|
||||
border-color: #2563eb;
|
||||
background: #15203a;
|
||||
}
|
||||
.cfg-version-num { font-weight: 600; color: #cbd5e1; min-width: 3rem; }
|
||||
.cfg-version-tag { color: #94a3b8; flex: 1; }
|
||||
.cfg-version-time { color: #64748b; font-size: 0.72rem; }
|
||||
.cfg-compare {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.4rem;
|
||||
font-size: 0.78rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* ── Diff modal ────────────────────────────────────────────────────────── */
|
||||
.cfg-diff-modal {
|
||||
background: #1a1f2e;
|
||||
border: 1px solid #2d3748;
|
||||
border-radius: 10px;
|
||||
width: min(760px, 92vw);
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.cfg-diff-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.6rem 1rem;
|
||||
border-bottom: 1px solid #2d3748;
|
||||
font-size: 0.85rem;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.cfg-diff-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.78rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.cfg-diff-table th,
|
||||
.cfg-diff-table td {
|
||||
text-align: left;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-top: 1px solid #1e2433;
|
||||
vertical-align: top;
|
||||
}
|
||||
.cfg-diff-table th { color: #64748b; font-weight: 500; }
|
||||
.cfg-diff-status {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.cfg-diff-added { background: rgba(34, 197, 94, 0.08); }
|
||||
.cfg-diff-added .cfg-diff-status { color: #4ade80; }
|
||||
.cfg-diff-removed { background: rgba(239, 68, 68, 0.08); }
|
||||
.cfg-diff-removed .cfg-diff-status { color: #f87171; }
|
||||
.cfg-diff-changed { background: rgba(234, 179, 8, 0.08); }
|
||||
.cfg-diff-changed .cfg-diff-status { color: #facc15; }
|
||||
.cfg-diff-unchanged .cfg-diff-status { color: #64748b; }
|
||||
|
||||
Reference in New Issue
Block a user