194 lines
5.0 KiB
CSS
194 lines
5.0 KiB
CSS
/* FIPS management page — sovereign://fips
|
|
* Imports the shared sovereign:// base theme, then adds FIPS-specific
|
|
* layout for status cards, the peers table, and the add-peer form. */
|
|
@import url("sovereign://sovereign-base.css");
|
|
|
|
.card {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 12px 16px;
|
|
margin: 10px 0 20px;
|
|
}
|
|
|
|
.card .actions {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.mono {
|
|
font-family: var(--font);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.err-text {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* State indicator dot. */
|
|
.state-dot {
|
|
display: inline-block;
|
|
width: 8px; height: 8px;
|
|
border-radius: 50%;
|
|
margin-left: 6px;
|
|
vertical-align: middle;
|
|
background: var(--muted);
|
|
}
|
|
.state-dot.ready { background: var(--primary); }
|
|
.state-dot.failed { background: var(--accent); }
|
|
.state-dot.starting,
|
|
.state-dot.stopping,
|
|
.state-dot.bootstrapping,
|
|
.state-dot.discovering,
|
|
.state-dot.attaching { background: var(--accent); animation: pulse 1s infinite; }
|
|
|
|
/* Peers table. */
|
|
#peers-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 10px 0;
|
|
}
|
|
#peers-table th,
|
|
#peers-table td {
|
|
text-align: left;
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 13px;
|
|
}
|
|
#peers-table th {
|
|
color: var(--muted);
|
|
font-weight: bold;
|
|
border-bottom: 2px solid var(--primary);
|
|
}
|
|
#peers-table td.mono { word-break: break-all; }
|
|
|
|
.peer-state-connected { color: var(--primary); }
|
|
.peer-state-connecting,
|
|
.peer-state-disconnected { color: var(--muted); }
|
|
.peer-state-failed { color: var(--accent); }
|
|
|
|
#refresh-btn { margin-left: 12px; }
|
|
|
|
/* Tab navigation. */
|
|
.tabs {
|
|
display: flex; gap: 4px;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: 16px;
|
|
}
|
|
.tab-btn {
|
|
background: var(--bg); color: var(--muted);
|
|
border: 1px solid transparent; border-bottom: none;
|
|
border-radius: var(--radius) var(--radius) 0 0;
|
|
padding: 6px 16px; cursor: pointer;
|
|
font-family: var(--font); font-size: 13px; font-weight: bold;
|
|
margin-left: 0; min-width: auto;
|
|
transition: color 0.2s, border-color 0.2s;
|
|
}
|
|
.tab-btn:hover { color: var(--primary); }
|
|
.tab-btn.active {
|
|
color: var(--primary);
|
|
border-color: var(--border);
|
|
border-bottom: 1px solid var(--bg);
|
|
margin-bottom: -1px;
|
|
}
|
|
.tab-panel { display: none; }
|
|
.tab-panel.active { display: block; }
|
|
|
|
/* Known-nodes / tree-peers tables. */
|
|
#nodes-table, #tree-peers-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 10px 0;
|
|
}
|
|
#nodes-table th, #nodes-table td,
|
|
#tree-peers-table th, #tree-peers-table td {
|
|
text-align: left;
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 13px;
|
|
}
|
|
#nodes-table th, #tree-peers-table th {
|
|
color: var(--muted);
|
|
font-weight: bold;
|
|
border-bottom: 2px solid var(--primary);
|
|
}
|
|
#nodes-table td.mono, #tree-peers-table td.mono { word-break: break-all; }
|
|
|
|
/* Direct-peer badge in the known-nodes table. */
|
|
.peer-badge {
|
|
display: inline-block; width: 8px; height: 8px;
|
|
border-radius: 50%; background: var(--primary);
|
|
}
|
|
.peer-badge.indirect { background: var(--muted); }
|
|
|
|
/* Staleness coloring for last-seen. */
|
|
.last-seen-fresh { color: var(--primary); }
|
|
.last-seen-stale { color: var(--muted); }
|
|
.last-seen-old { color: var(--muted); font-style: italic; }
|
|
|
|
/* Tree role tags. */
|
|
.tree-role { font-size: 11px; padding: 1px 6px; border-radius: 3px;
|
|
border: 1px solid var(--border); }
|
|
.tree-role.root { color: var(--accent); border-color: var(--accent); }
|
|
.tree-role.parent { color: var(--primary); }
|
|
.tree-role.child { color: var(--muted); }
|
|
|
|
/* Directory tab — compact one-line rows, wider table, smaller font. */
|
|
body.wide { max-width: 1400px; }
|
|
#tab-directory { max-width: 100%; }
|
|
#dir-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 10px 0;
|
|
table-layout: fixed;
|
|
}
|
|
#dir-table th, #dir-table td {
|
|
text-align: left;
|
|
padding: 3px 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
#dir-table th {
|
|
color: var(--muted);
|
|
font-weight: bold;
|
|
border-bottom: 2px solid var(--primary);
|
|
}
|
|
/* Column widths: badge | npub | endpoint | connect */
|
|
#dir-table th:nth-child(1), #dir-table td:nth-child(1) { width: 20px; }
|
|
#dir-table th:nth-child(3), #dir-table td:nth-child(3) { width: 35%; }
|
|
#dir-table th:nth-child(4), #dir-table td:nth-child(4) { width: 80px; }
|
|
#dir-table td.mono {
|
|
font-family: var(--font);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Pinned "this is you" row — highlighted border. */
|
|
#dir-table tr.dir-ours-row {
|
|
border: 2px solid var(--accent);
|
|
background: rgba(255, 0, 0, 0.05);
|
|
}
|
|
#dir-table tr.dir-ours-row td {
|
|
border-bottom: 2px solid var(--accent);
|
|
font-weight: bold;
|
|
}
|
|
.dir-ours-tag {
|
|
color: var(--accent);
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
border: 1px solid var(--accent);
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Connect as clickable text, not a button. */
|
|
.dir-connect-link {
|
|
color: var(--accent);
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
.dir-connect-link:hover { text-decoration: none; }
|