josh
82c314f85c
Each event is now one row: label · old → new on the left, timestamp right-aligned. Nothing is far from anything else. State changes use the existing badge component for immediate visual recognition. The created event reads 'instance created' in accent. Middle-dot separator keeps field label and change value clearly associated without forced spacing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
702 lines
15 KiB
CSS
702 lines
15 KiB
CSS
*, *::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-btn {
|
|
background: none;
|
|
border: 1px solid var(--border2);
|
|
color: var(--text2);
|
|
border-radius: 6px;
|
|
padding: 4px 8px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
margin-left: 10px;
|
|
line-height: 1;
|
|
}
|
|
.nav-btn:hover { border-color: var(--accent); color: var(--accent); }
|
|
|
|
.nav-divider { color: var(--border2); }
|
|
|
|
.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;
|
|
text-align: center;
|
|
}
|
|
|
|
.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; }
|
|
|
|
/* ── HISTORY TIMELINE ── */
|
|
.tl-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
padding: 9px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.tl-item:last-child { border-bottom: none; }
|
|
.tl-event { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
|
|
.tl-label { color: var(--text2); }
|
|
.tl-sep { color: var(--text3); user-select: none; }
|
|
.tl-old { color: var(--text3); text-decoration: line-through; font-size: 12px; }
|
|
.tl-arrow { color: var(--text3); font-size: 11px; }
|
|
.tl-new { color: var(--text); font-weight: 500; }
|
|
.tl-time { color: var(--text3); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
|
|
.tl-deployed { color: var(--accent); }
|
|
.tl-testing { color: var(--amber); }
|
|
.tl-degraded { color: var(--red); }
|
|
.tl-created .tl-event { color: var(--accent); font-weight: 500; }
|
|
.tl-empty { color: var(--text3); font-size: 12px; padding: 8px 0; }
|
|
|
|
/* ── SETTINGS MODAL ── */
|
|
#settings-modal .modal-body { padding-top: 0; }
|
|
.settings-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
|
|
.settings-section:last-child { border-bottom: none; padding-bottom: 0; }
|
|
.settings-section-title {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--text3);
|
|
margin-bottom: 8px;
|
|
}
|
|
.settings-desc { font-size: 12px; color: var(--text2); margin: 0 0 14px; line-height: 1.6; }
|
|
.settings-row { display: flex; align-items: center; gap: 12px; }
|
|
.settings-label { font-size: 13px; color: var(--text2); white-space: nowrap; min-width: 80px; }
|
|
.settings-select { flex: 1; }
|
|
.import-row { display: flex; gap: 10px; align-items: center; }
|
|
.import-file-input { flex: 1; }
|
|
|
|
.btn-secondary {
|
|
background: var(--bg3);
|
|
border-color: var(--border2);
|
|
color: var(--text);
|
|
}
|
|
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
|
|
|
|
.btn-danger { background: var(--red2); border-color: var(--red); color: var(--text); }
|
|
.btn-danger:hover { background: var(--red); }
|
|
|
|
/* ── 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; }
|
|
}
|