138 lines
3.8 KiB
CSS
138 lines
3.8 KiB
CSS
:host {
|
|
display: block;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
color: #cdd6f4;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
/* ── Sections ─────────────────────────────────────────────────────────────── */
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #6c7086;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #313244;
|
|
}
|
|
|
|
/* ── Fields ───────────────────────────────────────────────────────────────── */
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #a6adc8;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
input, select {
|
|
background: #181825;
|
|
border: 1px solid #313244;
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
color: #cdd6f4;
|
|
font-size: 13px;
|
|
font-family: monospace;
|
|
outline: none;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
input:focus, select:focus { border-color: #89b4fa; }
|
|
input::placeholder { color: #45475a; }
|
|
input[readonly] { color: #6c7086; cursor: not-allowed; }
|
|
|
|
/* ── Disk list ────────────────────────────────────────────────────────────── */
|
|
|
|
.disk-row {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.disk-row input { min-width: 0; }
|
|
|
|
/* ── Buttons ──────────────────────────────────────────────────────────────── */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
padding: 8px 14px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background 0.12s, opacity 0.12s;
|
|
}
|
|
|
|
.btn-primary { background: #89b4fa; color: #1e1e2e; }
|
|
.btn-primary:hover { background: #b4d0fa; }
|
|
.btn-danger { background: transparent; border: 1px solid #f38ba8; color: #f38ba8; }
|
|
.btn-danger:hover { background: rgba(243,139,168,0.1); }
|
|
.btn-ghost { background: #313244; color: #a6adc8; padding: 6px 10px; font-size: 12px; }
|
|
.btn-ghost:hover { background: #45475a; }
|
|
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
/* ── Status ───────────────────────────────────────────────────────────────── */
|
|
|
|
.status {
|
|
font-size: 13px;
|
|
padding: 10px 14px;
|
|
border-radius: 6px;
|
|
display: none;
|
|
}
|
|
.status.error { background: #1e1e2e; border: 1px solid #f38ba8; color: #f38ba8; display: block; }
|
|
.status.success { background: #1e1e2e; border: 1px solid #a6e3a1; color: #a6e3a1; display: block; }
|
|
.status.loading { color: #6c7086; display: block; }
|
|
|
|
/* ── Toggle ───────────────────────────────────────────────────────────────── */
|
|
|
|
.toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: #89b4fa;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-label { font-size: 13px; color: #a6adc8; text-transform: none; letter-spacing: 0; }
|