still tuning server settings section

This commit is contained in:
onysd 2026-08-26 01:54:19 +03:00
parent 66f9c0bc1e
commit 80bc8d352c
11 changed files with 510 additions and 164 deletions

View file

@ -1059,3 +1059,125 @@
.restart-overlay-actions {
justify-content: center;
}
/* Server Settings' Settings/Services tab bar. */
.tab-bar {
display: flex;
gap: 4px;
padding: 4px;
margin-bottom: 18px;
background: var(--surface-soft);
border: 1px solid var(--line);
border-radius: var(--radius);
width: fit-content;
}
.tab-btn {
appearance: none;
border: none;
background: transparent;
color: var(--text-soft);
font-size: 13px;
font-weight: 600;
padding: 7px 16px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn:hover {
color: var(--text);
}
.tab-btn.active {
background: var(--panel);
color: var(--text);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Live Docker/process status cards -- Services tab. */
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.service-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
}
.service-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: none;
border-radius: var(--radius-sm);
background: var(--surface-soft);
color: var(--text-soft);
}
.service-card-body {
flex: 1;
min-width: 0;
}
.service-card-name {
font-weight: 700;
font-size: 13px;
color: var(--text);
text-transform: capitalize;
}
.service-card-detail {
font-size: 11.5px;
color: var(--muted);
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
margin-top: 1px;
}
.service-card-status {
display: flex;
align-items: center;
gap: 5px;
flex: none;
font-size: 12px;
font-weight: 700;
text-transform: capitalize;
padding: 4px 9px;
border-radius: 999px;
}
.service-card.tone-good .service-card-icon { color: var(--good); }
.service-card.tone-good .service-card-status {
color: var(--good);
background: var(--good-tint);
border: 1px solid var(--good-border);
}
.service-card.tone-warn .service-card-icon { color: var(--warn); }
.service-card.tone-warn .service-card-status {
color: var(--warn);
background: var(--warn-tint);
border: 1px solid var(--warn-border);
}
.service-card.tone-danger .service-card-icon { color: var(--danger); }
.service-card.tone-danger .service-card-status {
color: var(--danger);
background: var(--danger-tint);
border: 1px solid var(--danger-border);
}
.service-card.tone-idle .service-card-status {
color: var(--muted);
background: var(--surface-soft);
border: 1px solid var(--line);
}