move towards this
This commit is contained in:
@@ -36,11 +36,15 @@ export function AppLayout() {
|
||||
}, [theme]);
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<header className="topbar">
|
||||
<div className="mx-auto max-w-7xl p-4">
|
||||
<header className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h1>Wakey Operator UI</h1>
|
||||
<p>Find devices fast and wake them reliably</p>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Wakey Operator UI
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Find devices fast and wake them reliably
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
@@ -54,13 +58,20 @@ export function AppLayout() {
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
<nav className="tabs">
|
||||
<nav className="mb-3 flex flex-wrap gap-2">
|
||||
{navItems.map(([to, label]) => (
|
||||
<NavLink
|
||||
key={to}
|
||||
to={to}
|
||||
end={to === "/"}
|
||||
className={({ isActive }) => `tab ${isActive ? "active" : ""}`}
|
||||
className={({ isActive }) =>
|
||||
[
|
||||
"rounded-full border px-3 py-1.5 text-sm transition-colors",
|
||||
isActive
|
||||
? "border-primary/60 bg-primary/10 text-foreground"
|
||||
: "border-border bg-card text-muted-foreground hover:text-foreground",
|
||||
].join(" ")
|
||||
}
|
||||
>
|
||||
{label}
|
||||
</NavLink>
|
||||
|
||||
+31
-16
@@ -1,4 +1,6 @@
|
||||
import type { Agent } from "@/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
type Props = {
|
||||
agents: Agent[];
|
||||
@@ -8,21 +10,34 @@ type Props = {
|
||||
|
||||
export function AgentsPage({ agents, selectedAgentId, onSelectAgent }: Props) {
|
||||
return (
|
||||
<section className="card">
|
||||
<h2>Agents</h2>
|
||||
<div className="list">
|
||||
{agents.map((agent) => (
|
||||
<button
|
||||
key={agent.agent_id}
|
||||
className={`row ${selectedAgentId === agent.agent_id ? "selected" : ""}`}
|
||||
onClick={() => onSelectAgent(agent.agent_id)}
|
||||
>
|
||||
<span>{agent.agent_id}</span>
|
||||
<span>{agent.connected ? "connected" : "offline"}</span>
|
||||
</button>
|
||||
))}
|
||||
{!agents.length && <div className="empty">No agents enrolled</div>}
|
||||
</div>
|
||||
</section>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Agents</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-2">
|
||||
{agents.map((agent) => (
|
||||
<Button
|
||||
key={agent.agent_id}
|
||||
variant={
|
||||
selectedAgentId === agent.agent_id ? "secondary" : "outline"
|
||||
}
|
||||
className="flex h-auto w-full items-center justify-between px-3 py-2 text-left"
|
||||
onClick={() => onSelectAgent(agent.agent_id)}
|
||||
>
|
||||
<span>{agent.agent_id}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{agent.connected ? "connected" : "offline"}
|
||||
</span>
|
||||
</Button>
|
||||
))}
|
||||
{!agents.length && (
|
||||
<div className="px-1 py-2 text-sm text-muted-foreground">
|
||||
No agents enrolled
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -53,9 +53,9 @@ export function CommandsPage({
|
||||
<CardTitle>Command Runner</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form className="form" onSubmit={submit}>
|
||||
<label>
|
||||
Agent
|
||||
<form className="grid gap-3" onSubmit={submit}>
|
||||
<label className="grid gap-1 text-sm text-muted-foreground">
|
||||
<span>Agent</span>
|
||||
<Select
|
||||
value={selectedAgentId}
|
||||
onValueChange={(value) => {
|
||||
@@ -76,8 +76,8 @@ export function CommandsPage({
|
||||
</Select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Command
|
||||
<label className="grid gap-1 text-sm text-muted-foreground">
|
||||
<span>Command</span>
|
||||
<Select
|
||||
value={kind}
|
||||
onValueChange={(value) => setKind(value as CommandKind)}
|
||||
@@ -94,8 +94,8 @@ export function CommandsPage({
|
||||
</Select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Query
|
||||
<label className="grid gap-1 text-sm text-muted-foreground">
|
||||
<span>Query</span>
|
||||
<Input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
@@ -108,7 +108,11 @@ export function CommandsPage({
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<Textarea className="output" value={output} readOnly />
|
||||
<Textarea
|
||||
className="mt-3 max-h-80 min-h-48 overflow-auto rounded-md border bg-muted/40 p-3 font-mono text-xs"
|
||||
value={output}
|
||||
readOnly
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,12 @@
|
||||
import type { Agent, Alert, AlertTransition } from "@/api";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
|
||||
type Props = {
|
||||
agents: Agent[];
|
||||
@@ -17,35 +25,50 @@ export function DashboardPage({
|
||||
}: Props) {
|
||||
const connected = agents.filter((a) => a.connected).length;
|
||||
return (
|
||||
<section className="card-grid">
|
||||
<div className="card stat">
|
||||
<h3>Agents</h3>
|
||||
<strong>{agents.length}</strong>
|
||||
</div>
|
||||
<div className="card stat">
|
||||
<h3>Connected</h3>
|
||||
<strong>{connected}</strong>
|
||||
</div>
|
||||
<div className="card stat">
|
||||
<h3>Active Alerts</h3>
|
||||
<strong>{alerts.length}</strong>
|
||||
</div>
|
||||
<div className="card stat">
|
||||
<h3>Transitions</h3>
|
||||
<strong>{transitions.length}</strong>
|
||||
</div>
|
||||
<div className="card span-full">
|
||||
<div className="row-head">
|
||||
<h2>Overview</h2>
|
||||
<button onClick={onRefresh} disabled={loading}>
|
||||
<section className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Agents</CardDescription>
|
||||
<CardTitle className="text-2xl">{agents.length}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Connected</CardDescription>
|
||||
<CardTitle className="text-2xl">{connected}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Active Alerts</CardDescription>
|
||||
<CardTitle className="text-2xl">{alerts.length}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>Transitions</CardDescription>
|
||||
<CardTitle className="text-2xl">{transitions.length}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card className="sm:col-span-2 lg:col-span-4">
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0">
|
||||
<CardTitle>Overview</CardTitle>
|
||||
<Button
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
{loading ? "Refreshing..." : "Refresh"}
|
||||
</button>
|
||||
</div>
|
||||
<p className="muted">
|
||||
Use tabs to run commands, inspect audits, and monitor alerts in real
|
||||
time.
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Use tabs to run commands, inspect audits, and monitor alerts in real
|
||||
time.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -288,9 +288,9 @@ export function DevicesPage({
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="two-col">
|
||||
<section className="grid gap-3 xl:grid-cols-[2fr_1fr]">
|
||||
<Card>
|
||||
<CardHeader className="row-head">
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||
<CardTitle>Devices</CardTitle>
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -303,9 +303,9 @@ export function DevicesPage({
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<div className="grid-3 compact">
|
||||
<label>
|
||||
Agent
|
||||
<div className="mt-2 grid gap-2 sm:grid-cols-3">
|
||||
<label className="grid gap-1 text-sm text-muted-foreground">
|
||||
<span>Agent</span>
|
||||
<Select
|
||||
value={selectedAgentId}
|
||||
onValueChange={(value) => {
|
||||
@@ -326,8 +326,8 @@ export function DevicesPage({
|
||||
</Select>
|
||||
</label>
|
||||
|
||||
<label className="span-2">
|
||||
Search
|
||||
<label className="grid gap-1 text-sm text-muted-foreground sm:col-span-2">
|
||||
<span>Search</span>
|
||||
<Input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
@@ -404,13 +404,21 @@ export function DevicesPage({
|
||||
>
|
||||
Clear selection
|
||||
</Button>
|
||||
{copyStatus && <span className="muted">{copyStatus}</span>}
|
||||
{copyStatus && (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{copyStatus}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="muted">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Showing {filtered.length} of {rows.length}
|
||||
</p>
|
||||
{error && <pre className="error">{error}</pre>}
|
||||
{error && (
|
||||
<pre className="max-h-80 overflow-auto rounded-md border border-destructive/60 bg-destructive/10 p-3 text-xs text-destructive">
|
||||
{error}
|
||||
</pre>
|
||||
)}
|
||||
|
||||
<DeviceInventoryTable
|
||||
rows={filtered}
|
||||
|
||||
+93
-53
@@ -6,6 +6,17 @@ import {
|
||||
issueEnrollToken,
|
||||
revokeEnrollToken,
|
||||
} from "@/api";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
function formatUnix(unix: number): string {
|
||||
return new Date(unix * 1000).toLocaleString();
|
||||
@@ -77,74 +88,103 @@ export function TokensPage() {
|
||||
}, [includeExpired]);
|
||||
|
||||
return (
|
||||
<section className="two-col">
|
||||
<div className="card">
|
||||
<div className="row-head">
|
||||
<h2>Enroll Tokens</h2>
|
||||
<button onClick={() => void load()} disabled={busy}>
|
||||
<section className="grid gap-3 xl:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-3 space-y-0">
|
||||
<CardTitle>Enroll Tokens</CardTitle>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => void load()}
|
||||
disabled={busy}
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
<div className="form">
|
||||
<label>
|
||||
Include expired
|
||||
<select
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<label className="grid gap-1 text-sm text-muted-foreground">
|
||||
<span>Include expired</span>
|
||||
<Select
|
||||
value={includeExpired ? "yes" : "no"}
|
||||
onChange={(e) => setIncludeExpired(e.target.value === "yes")}
|
||||
onValueChange={(value) => setIncludeExpired(value === "yes")}
|
||||
>
|
||||
<option value="no">No</option>
|
||||
<option value="yes">Yes</option>
|
||||
</select>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Choose option" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="no">No</SelectItem>
|
||||
<SelectItem value="yes">Yes</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</label>
|
||||
</div>
|
||||
<p className="muted">
|
||||
{activeCount} active, {tokens.length} shown
|
||||
</p>
|
||||
<div className="list">
|
||||
{tokens.map((token) => (
|
||||
<div className="row" key={token.enroll_token}>
|
||||
<div>
|
||||
<strong>{token.enroll_token}</strong>
|
||||
<div className="muted">
|
||||
expires: {formatUnix(token.expires_at_unix)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{activeCount} active, {tokens.length} shown
|
||||
</p>
|
||||
<div className="grid gap-2">
|
||||
{tokens.map((token) => (
|
||||
<div
|
||||
className="flex items-start justify-between gap-3 rounded-md border bg-card px-3 py-2"
|
||||
key={token.enroll_token}
|
||||
>
|
||||
<div>
|
||||
<strong>{token.enroll_token}</strong>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
expires: {formatUnix(token.expires_at_unix)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={token.expired ? "destructive" : "secondary"}>
|
||||
{token.expired ? "expired" : "active"}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => void onRevoke(token.enroll_token)}
|
||||
disabled={busy}
|
||||
>
|
||||
Revoke
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="token-actions">
|
||||
<span className={`pill ${token.expired ? "error" : "ready"}`}>
|
||||
{token.expired ? "expired" : "active"}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => void onRevoke(token.enroll_token)}
|
||||
disabled={busy}
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
))}
|
||||
{!tokens.length && (
|
||||
<div className="px-1 py-2 text-sm text-muted-foreground">
|
||||
No tokens found
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{!tokens.length && <div className="empty">No tokens found</div>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="card">
|
||||
<h2>Issue Token</h2>
|
||||
<div className="form">
|
||||
<label>
|
||||
TTL seconds
|
||||
<input
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Issue Token</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-3">
|
||||
<label className="grid gap-1 text-sm text-muted-foreground">
|
||||
<span>TTL seconds</span>
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={ttlSeconds}
|
||||
onChange={(e) => setTtlSeconds(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<button onClick={() => void onIssue()} disabled={busy}>
|
||||
<Button onClick={() => void onIssue()} disabled={busy}>
|
||||
Issue
|
||||
</button>
|
||||
</div>
|
||||
{status && <pre className="output">{status}</pre>}
|
||||
{error && <pre className="error">{error}</pre>}
|
||||
</div>
|
||||
</Button>
|
||||
{status && (
|
||||
<pre className="max-h-80 overflow-auto rounded-md border bg-muted/40 p-3 text-xs">
|
||||
{status}
|
||||
</pre>
|
||||
)}
|
||||
{error && (
|
||||
<pre className="max-h-80 overflow-auto rounded-md border border-destructive/60 bg-destructive/10 p-3 text-xs text-destructive">
|
||||
{error}
|
||||
</pre>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -43,8 +43,8 @@ export function DeviceInventoryTable({
|
||||
onCopyValue,
|
||||
}: Props) {
|
||||
return (
|
||||
<div className="list device-list">
|
||||
<div className="row plain device-row device-header">
|
||||
<div className="device-list grid gap-2">
|
||||
<div className="device-row device-header rounded-md border bg-muted/60 px-3 py-2 text-sm">
|
||||
<span className="device-cell device-select">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -83,7 +83,10 @@ export function DeviceInventoryTable({
|
||||
</div>
|
||||
|
||||
{rows.map((row) => (
|
||||
<div className="row plain device-row" key={row.id}>
|
||||
<div
|
||||
className="device-row rounded-md border bg-card px-3 py-2 text-sm"
|
||||
key={row.id}
|
||||
>
|
||||
<span className="device-cell device-select" data-label="Pick">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -96,14 +99,14 @@ export function DeviceInventoryTable({
|
||||
{row.name}
|
||||
</span>
|
||||
<span
|
||||
className="device-cell muted"
|
||||
className="device-cell text-muted-foreground"
|
||||
data-label="IP"
|
||||
title={row.ips.join(", ") || "-"}
|
||||
>
|
||||
{summarize(row.ips)}
|
||||
</span>
|
||||
<span
|
||||
className="device-cell muted"
|
||||
className="device-cell text-muted-foreground"
|
||||
data-label="MAC"
|
||||
title={row.macs.join(", ") || "-"}
|
||||
>
|
||||
@@ -157,7 +160,11 @@ export function DeviceInventoryTable({
|
||||
</div>
|
||||
))}
|
||||
|
||||
{!rows.length && <div className="empty">No devices found</div>}
|
||||
{!rows.length && (
|
||||
<div className="px-1 py-2 text-sm text-muted-foreground">
|
||||
No devices found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,28 +13,30 @@ type Props = {
|
||||
export function WakeHistoryCard({ events, onClear }: Props) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="row-head">
|
||||
<CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||
<CardTitle>Recent Wake Actions</CardTitle>
|
||||
<Button variant="outline" size="sm" onClick={onClear}>
|
||||
Clear
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="list">
|
||||
<div className="grid gap-2">
|
||||
{events.map((event, idx) => (
|
||||
<div
|
||||
className="row plain"
|
||||
className="flex items-start justify-between gap-3 rounded-md border bg-card px-3 py-2"
|
||||
key={`${event.ts}-${event.target}-${idx}`}
|
||||
>
|
||||
<div>
|
||||
<strong>{event.target}</strong>
|
||||
<div className="muted">
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{new Date(event.ts).toLocaleString()} on {event.agentId}
|
||||
</div>
|
||||
<div className="muted">{event.detail}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{event.detail}
|
||||
</div>
|
||||
{event.requestId && (
|
||||
<Link
|
||||
className="muted linkish"
|
||||
className="linkish text-xs text-muted-foreground"
|
||||
to={`/audit?q=${encodeURIComponent(event.requestId)}`}
|
||||
>
|
||||
View related audit ({event.requestId})
|
||||
@@ -48,7 +50,11 @@ export function WakeHistoryCard({ events, onClear }: Props) {
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
{!events.length && <div className="empty">No wake actions yet</div>}
|
||||
{!events.length && (
|
||||
<div className="px-1 py-2 text-sm text-muted-foreground">
|
||||
No wake actions yet
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -60,7 +60,6 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
background: var(--surface-strong);
|
||||
}
|
||||
|
||||
.device-cell {
|
||||
|
||||
+6
-246
@@ -6,18 +6,8 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--bg: #f5f8f2;
|
||||
--bg-accent: #e7efe4;
|
||||
--card: oklch(1 0 0);
|
||||
--line: #ced7ce;
|
||||
--text: #1c2620;
|
||||
--muted: oklch(0.96 0.004 145);
|
||||
--surface: #ffffff;
|
||||
--surface-muted: #f3f7f2;
|
||||
--surface-strong: #e8f0e7;
|
||||
--card-bg-a: rgba(255, 255, 255, 0.98);
|
||||
--card-bg-b: rgba(243, 248, 242, 0.9);
|
||||
--tab-active-border: #6a9a7f;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.23 0.02 155);
|
||||
--card-foreground: oklch(0.23 0.02 155);
|
||||
@@ -50,232 +40,6 @@
|
||||
--sidebar-ring: oklch(0.62 0.08 156);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
background: radial-gradient(circle at 20% 10%, var(--bg-accent) 0%, var(--bg) 45%);
|
||||
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
.app {
|
||||
padding: 1rem;
|
||||
}
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.topbar h1 {
|
||||
margin: 0;
|
||||
}
|
||||
.topbar p {
|
||||
margin: 0.35rem 0 0;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.65rem;
|
||||
text-decoration: none;
|
||||
color: var(--muted-foreground);
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--text);
|
||||
border-color: var(--tab-active-border);
|
||||
}
|
||||
|
||||
.pill {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.7rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.pill.ready {
|
||||
color: #86efac;
|
||||
border-color: #14532d;
|
||||
}
|
||||
.pill.loading {
|
||||
color: #fde68a;
|
||||
border-color: #713f12;
|
||||
}
|
||||
.pill.error {
|
||||
color: #fca5a5;
|
||||
border-color: #7f1d1d;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
.stat h3 {
|
||||
margin: 0;
|
||||
color: var(--muted-foreground);
|
||||
font-weight: 500;
|
||||
}
|
||||
.stat strong {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
|
||||
}
|
||||
|
||||
.two-col {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
|
||||
}
|
||||
.card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, var(--card-bg-a), var(--card-bg-b));
|
||||
padding: 0.8rem;
|
||||
}
|
||||
.span-2 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.row-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.muted {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
button {
|
||||
padding: 0.45rem 0.65rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
border-color: var(--tab-active-border);
|
||||
}
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.55rem;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
.form label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
}
|
||||
|
||||
.grid-3.compact {
|
||||
margin-top: 0.65rem;
|
||||
}
|
||||
|
||||
.grid-3 label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
padding: 0.45rem 0.55rem;
|
||||
text-align: left;
|
||||
}
|
||||
.row.selected {
|
||||
border-color: var(--tab-active-border);
|
||||
}
|
||||
.row.plain {
|
||||
cursor: default;
|
||||
}
|
||||
.token-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
}
|
||||
.empty {
|
||||
color: var(--muted-foreground);
|
||||
padding: 0.35rem 0.2rem;
|
||||
}
|
||||
|
||||
.output {
|
||||
margin: 0.65rem 0 0;
|
||||
background: var(--surface-muted);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 0.7rem;
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
font-size: 0.84rem;
|
||||
}
|
||||
.output.small {
|
||||
max-height: 230px;
|
||||
}
|
||||
.error {
|
||||
border: 1px solid #7f1d1d;
|
||||
background: rgba(127, 29, 29, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 0.7rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-heading: var(--font-sans);
|
||||
--font-sans: 'Inter Variable', sans-serif;
|
||||
@@ -320,17 +84,7 @@ select {
|
||||
}
|
||||
|
||||
.dark {
|
||||
--bg: #0f1712;
|
||||
--bg-accent: #1a271f;
|
||||
--line: #2d3d33;
|
||||
--text: #e7edf7;
|
||||
--muted: oklch(0.25 0.01 156);
|
||||
--surface: #122119;
|
||||
--surface-muted: #15271d;
|
||||
--surface-strong: #1a2d21;
|
||||
--card-bg-a: rgba(20, 33, 25, 0.92);
|
||||
--card-bg-b: rgba(20, 33, 25, 0.72);
|
||||
--tab-active-border: #63a47f;
|
||||
--background: oklch(0.19 0.02 156);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.24 0.015 156);
|
||||
@@ -369,6 +123,12 @@ select {
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
background-image: radial-gradient(
|
||||
circle at 20% 10%,
|
||||
color-mix(in oklab, var(--primary) 12%, var(--background)) 0%,
|
||||
var(--background) 45%
|
||||
);
|
||||
margin: 0;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
|
||||
Reference in New Issue
Block a user