326 lines
7.9 KiB
CSS
326 lines
7.9 KiB
CSS
:root {
|
|
color: #19213d;
|
|
background: #eef3ff;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(circle at 12% 8%, rgba(112, 139, 255, 0.26), transparent 26%),
|
|
radial-gradient(circle at 88% 14%, rgba(85, 213, 190, 0.24), transparent 30%),
|
|
linear-gradient(135deg, #f8fbff 0%, #edf3ff 48%, #e8f1ff 100%);
|
|
}
|
|
|
|
button, a { font: inherit; }
|
|
button { cursor: pointer; }
|
|
|
|
.app-shell {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: 76px 320px minmax(0, 1fr);
|
|
}
|
|
|
|
.rail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 18px;
|
|
padding: 22px 12px;
|
|
background: #ffffffcc;
|
|
border-right: 1px solid rgba(111, 130, 180, 0.18);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 16px;
|
|
color: white;
|
|
font-weight: 900;
|
|
letter-spacing: -0.05em;
|
|
background: linear-gradient(135deg, #7b61ff, #36d2b6);
|
|
box-shadow: 0 18px 42px rgba(90, 99, 255, 0.28);
|
|
}
|
|
|
|
.rail-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border: 0;
|
|
border-radius: 15px;
|
|
color: #72809f;
|
|
background: transparent;
|
|
}
|
|
|
|
.rail-icon.active,
|
|
.rail-icon:hover {
|
|
color: #3154ff;
|
|
background: #eef2ff;
|
|
}
|
|
|
|
.wallet-panel {
|
|
padding: 26px;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
border-right: 1px solid rgba(111, 130, 180, 0.18);
|
|
backdrop-filter: blur(22px);
|
|
}
|
|
|
|
.brand-row,
|
|
.topbar,
|
|
.panel-heading,
|
|
.account-topline,
|
|
.top-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 6px;
|
|
color: #7a88a8;
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
}
|
|
|
|
h1, h2, h3, p { margin-top: 0; }
|
|
h1 { margin-bottom: 0; font-size: 24px; line-height: 1.1; }
|
|
h2 { margin-bottom: 0; font-size: 30px; letter-spacing: -0.04em; }
|
|
h3 { margin-bottom: 0; font-size: 18px; }
|
|
|
|
.status-dot,
|
|
.feature-status,
|
|
.risk {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.status-dot,
|
|
.feature-status { color: #3154ff; background: #edf1ff; }
|
|
|
|
.account-card,
|
|
.panel,
|
|
.balance-card,
|
|
.metric-card {
|
|
border: 1px solid rgba(111, 130, 180, 0.18);
|
|
border-radius: 28px;
|
|
background: rgba(255, 255, 255, 0.82);
|
|
box-shadow: 0 20px 60px rgba(65, 78, 128, 0.12);
|
|
}
|
|
|
|
.account-card {
|
|
margin: 24px 0;
|
|
padding: 22px;
|
|
background: linear-gradient(145deg, #22305b, #11172c);
|
|
color: white;
|
|
box-shadow: 0 22px 60px rgba(24, 35, 78, 0.28);
|
|
}
|
|
|
|
.account-card p { color: #aebbe2; }
|
|
.account-card strong { font-size: 21px; }
|
|
|
|
.account-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 8px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.account-actions button,
|
|
.primary,
|
|
.secondary,
|
|
.ghost-button {
|
|
border: 0;
|
|
border-radius: 14px;
|
|
padding: 10px 14px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.account-actions button,
|
|
.primary {
|
|
color: white;
|
|
background: linear-gradient(135deg, #6f64ff, #35ceb4);
|
|
}
|
|
|
|
.secondary { color: #3154ff; background: #eef2ff; }
|
|
.ghost-button { color: #647194; background: #f3f6ff; }
|
|
.account-card .ghost-button { color: white; background: rgba(255, 255, 255, 0.12); }
|
|
|
|
.side-list { display: grid; gap: 10px; }
|
|
.side-list a {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 14px 16px;
|
|
color: #62708f;
|
|
text-decoration: none;
|
|
border-radius: 16px;
|
|
}
|
|
.side-list a.active,
|
|
.side-list a:hover { color: #24345f; background: #f2f5ff; }
|
|
|
|
.content {
|
|
min-width: 0;
|
|
padding: 30px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.topbar { margin-bottom: 24px; }
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr repeat(2, minmax(180px, 0.7fr));
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.balance-card,
|
|
.metric-card,
|
|
.panel { padding: 22px; }
|
|
.balance-card { color: white; background: linear-gradient(145deg, #4e64ff, #8c62ff); }
|
|
.balance-card p,
|
|
.balance-card span { color: rgba(255, 255, 255, 0.76); }
|
|
.balance-card strong { display: block; font-size: 42px; letter-spacing: -0.05em; }
|
|
.metric-card strong { display: block; font-size: 36px; letter-spacing: -0.04em; }
|
|
.metric-card p,
|
|
.metric-card span { color: #7a88a8; }
|
|
.metric-card.warning strong { color: #ff7a45; }
|
|
|
|
.two-column {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.asset-list,
|
|
.approval-list,
|
|
.activity-list,
|
|
.settings-grid,
|
|
.feature-grid { margin-top: 18px; }
|
|
|
|
.asset-row,
|
|
.approval-row,
|
|
.activity-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 14px 0;
|
|
border-top: 1px solid #edf1fb;
|
|
}
|
|
|
|
.asset-row:first-child,
|
|
.approval-row:first-child,
|
|
.activity-row:first-child { border-top: 0; }
|
|
|
|
.coin-mark {
|
|
width: 42px;
|
|
height: 42px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
font-weight: 900;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #35ceb4, #3154ff);
|
|
}
|
|
|
|
.asset-row span,
|
|
.approval-row span,
|
|
.activity-row small { display: block; color: #8390ad; }
|
|
.asset-value { margin-left: auto; text-align: right; }
|
|
|
|
.risk.high,
|
|
.risk.critical { color: #b94b18; background: #fff0e8; }
|
|
.risk.medium { color: #8a6500; background: #fff6d8; }
|
|
.risk.low { color: #147a58; background: #e5fbf3; }
|
|
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.settings-grid div {
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
background: #f7f9ff;
|
|
}
|
|
.settings-grid span { display: block; color: #7d89a5; font-size: 12px; }
|
|
|
|
.vault-form {
|
|
margin-top: 18px;
|
|
padding-top: 18px;
|
|
border-top: 1px solid #edf1fb;
|
|
}
|
|
.vault-form label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #4a5878;
|
|
font-weight: 800;
|
|
}
|
|
.vault-row { display: flex; gap: 8px; }
|
|
.vault-row input {
|
|
min-width: 0;
|
|
flex: 1;
|
|
border: 1px solid #dfe6f7;
|
|
border-radius: 14px;
|
|
padding: 10px 12px;
|
|
color: #24345f;
|
|
background: #f8faff;
|
|
}
|
|
.vault-form small {
|
|
display: block;
|
|
margin-top: 10px;
|
|
color: #7d89a5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.feature-card {
|
|
padding: 16px;
|
|
border-radius: 20px;
|
|
background: #f8faff;
|
|
border: 1px solid #edf1fb;
|
|
}
|
|
.feature-card strong { display: block; margin: 12px 0 8px; }
|
|
.feature-card p { color: #6c7895; margin-bottom: 0; }
|
|
.doc-link { color: #3154ff; text-decoration: none; font-weight: 800; }
|
|
|
|
@media (max-width: 1080px) {
|
|
.app-shell { grid-template-columns: 68px 1fr; }
|
|
.wallet-panel { display: none; }
|
|
.hero-grid,
|
|
.two-column { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
|
|
.terminal-panel { margin-bottom: 16px; }
|
|
.terminal-form { margin-top: 18px; display: grid; gap: 12px; }
|
|
.terminal-form input { width: 100%; border: 1px solid #dfe6f6; border-radius: 14px; padding: 12px 14px; color: #253052; background: #f8faff; font: 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
|
|
.terminal-form pre { min-height: 120px; margin: 0; padding: 16px; border-radius: 18px; color: #b9fbcf; background: #12182b; white-space: pre-wrap; overflow: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
|
|
|
|
|
|
.settings-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf1fb; display: grid; gap: 8px; }
|
|
.settings-form label { color: #62708f; font-weight: 800; }
|
|
.settings-form select { flex: 1; min-width: 0; border: 1px solid #dfe6f6; border-radius: 14px; padding: 11px 12px; color: #253052; background: #f8faff; }
|
|
|
|
|
|
.ssh-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 0.7fr 1.2fr; gap: 10px; }
|
|
.ssh-grid input { min-width: 0; border: 1px solid #dfe6f6; border-radius: 14px; padding: 12px 14px; color: #253052; background: #f8faff; }
|
|
.runtime-output { min-height: 100px; margin: 12px 0 0; padding: 16px; border-radius: 18px; color: #b9fbcf; background: #12182b; white-space: pre-wrap; overflow: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
|
|
@media (max-width: 720px) { .ssh-grid { grid-template-columns: 1fr; } }
|