633
css/app.css
Normal file
633
css/app.css
Normal file
@@ -0,0 +1,633 @@
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #0a0b0d;
|
||||
--bg1: #0f1114;
|
||||
--bg2: #151820;
|
||||
--bg3: #1c2030;
|
||||
--border: #1e2535;
|
||||
--border2: #2a3347;
|
||||
--text: #c8d0e0;
|
||||
--text2: #7a8599;
|
||||
--text3: #4a5568;
|
||||
--accent: #00d4aa;
|
||||
--accent2: #0a8c72;
|
||||
--blue: #4a9eff;
|
||||
--blue2: #1a4a80;
|
||||
--amber: #f0a030;
|
||||
--amber2: #7a5010;
|
||||
--red: #e05060;
|
||||
--red2: #6a2030;
|
||||
--green: #50d090;
|
||||
--green2: #1a5535;
|
||||
--purple: #9060f0;
|
||||
--purple2: #3a2070;
|
||||
--mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#app { display: flex; flex-direction: column; min-height: 100vh; }
|
||||
|
||||
/* ── NAV ── */
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
background: var(--bg1);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0 24px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav-logo::before {
|
||||
content: '⬡';
|
||||
font-size: 18px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.nav-sep { flex: 1; }
|
||||
|
||||
.nav-status {
|
||||
font-size: 11px;
|
||||
color: var(--text3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
/* ── LAYOUT ── */
|
||||
main { flex: 1; }
|
||||
|
||||
.page { display: none; }
|
||||
.page.active { display: block; }
|
||||
|
||||
/* ── DASHBOARD ── */
|
||||
.dash-header {
|
||||
padding: 28px 32px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg1);
|
||||
}
|
||||
|
||||
.dash-title {
|
||||
font-size: 11px;
|
||||
color: var(--text3);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.dash-headline {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg1);
|
||||
}
|
||||
|
||||
.stat-cell {
|
||||
flex: 1;
|
||||
padding: 14px 24px;
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stat-cell:last-child { border-right: none; }
|
||||
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
color: var(--text3);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stat-value { font-size: 20px; font-weight: 500; color: var(--text); }
|
||||
.stat-value.accent { color: var(--accent); }
|
||||
.stat-value.amber { color: var(--amber); }
|
||||
.stat-value.red { color: var(--red); }
|
||||
|
||||
/* ── TOOLBAR ── */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 32px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border2);
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
flex: 1;
|
||||
max-width: 380px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.search-wrap:focus-within { border-color: var(--accent); }
|
||||
|
||||
.search-icon { color: var(--text3); font-size: 12px; }
|
||||
|
||||
.search-wrap input {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--text);
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-wrap input::placeholder { color: var(--text3); }
|
||||
|
||||
select {
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border2);
|
||||
color: var(--text);
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
select:focus { border-color: var(--accent); }
|
||||
|
||||
.toolbar-right { margin-left: auto; display: flex; gap: 8px; }
|
||||
|
||||
.btn {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border2);
|
||||
background: var(--bg2);
|
||||
color: var(--text2);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
|
||||
.btn.primary {
|
||||
border-color: var(--accent2);
|
||||
background: var(--accent2);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
|
||||
|
||||
.btn.danger {
|
||||
border-color: var(--red2);
|
||||
color: var(--red);
|
||||
background: var(--red2);
|
||||
}
|
||||
|
||||
.btn.danger:hover { background: var(--red); color: var(--bg); border-color: var(--red); }
|
||||
|
||||
/* ── INSTANCE GRID ── */
|
||||
.instance-grid {
|
||||
padding: 24px 32px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.instance-card {
|
||||
background: var(--bg1);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 16px 18px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.instance-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0; bottom: 0;
|
||||
width: 3px;
|
||||
background: var(--border2);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.instance-card.state-deployed::before { background: var(--accent); }
|
||||
.instance-card.state-testing::before { background: var(--amber); }
|
||||
.instance-card.state-degraded::before { background: var(--red); }
|
||||
|
||||
.instance-card:hover { border-color: var(--border2); background: var(--bg2); }
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-name { font-size: 14px; font-weight: 500; color: var(--text); }
|
||||
.card-vmid { font-size: 11px; color: var(--text3); margin-top: 2px; }
|
||||
|
||||
.badge {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge.deployed { background: var(--accent2); color: var(--accent); }
|
||||
.badge.testing { background: var(--amber2); color: var(--amber); }
|
||||
.badge.degraded { background: var(--red2); color: var(--red); }
|
||||
.badge.production { background: rgba(74,158,255,0.15); color: var(--blue); }
|
||||
.badge.development { background: var(--bg3); color: var(--text2); }
|
||||
|
||||
.card-services { display: flex; gap: 4px; align-items: center; }
|
||||
|
||||
.svc-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--border2);
|
||||
}
|
||||
|
||||
.svc-dot.on { background: var(--accent); }
|
||||
.svc-label { font-size: 10px; color: var(--text3); margin-left: 2px; }
|
||||
|
||||
.card-ip { font-size: 10px; color: var(--text3); font-family: var(--mono); margin-top: 6px; }
|
||||
.card-ip span { color: var(--text2); }
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 80px 32px;
|
||||
color: var(--text3);
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.empty-state .empty-icon { font-size: 32px; margin-bottom: 12px; }
|
||||
.empty-state p { font-size: 12px; }
|
||||
|
||||
/* ── DETAIL PAGE ── */
|
||||
.detail-page { max-width: 900px; margin: 0 auto; padding: 32px; }
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 11px;
|
||||
color: var(--text3);
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--text3);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover { color: var(--accent); }
|
||||
.breadcrumb .sep { color: var(--text3); }
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.detail-name {
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.detail-sub {
|
||||
font-size: 12px;
|
||||
color: var(--text3);
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.detail-sub span { display: flex; gap: 4px; }
|
||||
.detail-sub .lbl { color: var(--text3); }
|
||||
.detail-sub .val { color: var(--text2); }
|
||||
|
||||
.detail-actions { display: flex; gap: 8px; }
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
background: var(--bg1);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.detail-section.full { grid-column: 1 / -1; }
|
||||
|
||||
.section-title {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text3);
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.kv-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.kv-row:last-child { border-bottom: none; }
|
||||
.kv-key { color: var(--text3); }
|
||||
.kv-val { color: var(--text2); }
|
||||
.kv-val.highlight { color: var(--text); }
|
||||
.kv-val.on { color: var(--accent); }
|
||||
.kv-val.off { color: var(--text3); }
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.svc-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.svc-name { color: var(--text2); }
|
||||
|
||||
.svc-status {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
padding: 2px 7px;
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.svc-status.on { background: rgba(0,212,170,0.12); color: var(--accent); }
|
||||
.svc-status.off { background: var(--bg3); color: var(--text3); }
|
||||
|
||||
/* ── MODAL ── */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
background: rgba(0,0,0,0.7);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-overlay.open { display: flex; }
|
||||
|
||||
.modal {
|
||||
background: var(--bg1);
|
||||
border: 1px solid var(--border2);
|
||||
border-radius: 8px;
|
||||
width: 540px;
|
||||
max-width: 95vw;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 22px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-title { font-size: 13px; font-weight: 500; color: var(--text); }
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text3);
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
.modal-close:hover { color: var(--text); }
|
||||
|
||||
.modal-body { padding: 22px; }
|
||||
|
||||
.form-group { margin-bottom: 16px; }
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text3);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border2);
|
||||
color: var(--text);
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.form-input:focus { border-color: var(--accent); }
|
||||
|
||||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
|
||||
.form-check { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
.form-check input[type=checkbox] {
|
||||
accent-color: var(--accent);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.form-check label { font-size: 12px; color: var(--text2); cursor: pointer; }
|
||||
|
||||
.toggle-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 16px 22px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* ── TOAST ── */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
z-index: 300;
|
||||
background: var(--bg2);
|
||||
border: 1px solid var(--border2);
|
||||
border-radius: 6px;
|
||||
padding: 12px 18px;
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transform: translateY(100px);
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast.show { transform: translateY(0); opacity: 1; }
|
||||
.toast.success { border-color: var(--accent2); }
|
||||
.toast.error { border-color: var(--red2); }
|
||||
|
||||
.toast-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toast.error .toast-dot { background: var(--red); }
|
||||
|
||||
/* ── CONFIRM DIALOG ── */
|
||||
.confirm-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 250;
|
||||
background: rgba(0,0,0,0.6);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-overlay.open { display: flex; }
|
||||
|
||||
.confirm-box {
|
||||
background: var(--bg1);
|
||||
border: 1px solid var(--border2);
|
||||
border-radius: 8px;
|
||||
width: 380px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.confirm-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.confirm-msg {
|
||||
font-size: 12px;
|
||||
color: var(--text2);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
|
||||
|
||||
/* ── SCROLLBAR ── */
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
|
||||
|
||||
/* ── CURSOR BLINK ── */
|
||||
.cursor-blink {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 14px;
|
||||
background: var(--accent);
|
||||
animation: blink 1s step-end infinite;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
Reference in New Issue
Block a user