OXYGENHUB
◆ v0.1.0 spectra / crates / radar / assets / style.css
4.9 KiB · CSS · last changed Radar: Live, channels, threads and the log for the owner, signed in by a CLI-signed link; ledger writes survive a cancelled caller (#10) 2 days ago source blame history raw
1 
/* Radar's look: OxygenHub's (Primer colours, system fonts, rounded boxes,
2 
   underline navigation, sentence case), light or dark with the system. */
3 
:root {
4 
  --bg:#ffffff; --soft:#f6f8fa; --ink:#1f2328; --mute:#59636e; --line:#d1d9e0; --dim:#818b98;
5 
  --acc:#0969da; --ok:#1a7f37; --bad:#d1242f; --warn:#9a6700; --busy:#8250df;
6 
  --header:#f6f8fa; --btn:#f6f8fa; --btn-line:#d1d9e0; --primary:#1f883d; --primary-ink:#ffffff; --banner:#fff8c5;
7 
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
8 
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
9 
  color-scheme: light;
10 
}
11 
@media (prefers-color-scheme: dark) {
12 
  :root {
13 
    --bg:#0d1117; --soft:#151b23; --ink:#f0f6fc; --mute:#9198a1; --line:#3d444d; --dim:#656c76;
14 
    --acc:#4493f8; --ok:#3fb950; --bad:#f85149; --warn:#d29922; --busy:#a371f7;
15 
    --header:#010409; --btn:#212830; --btn-line:#3d444d; --primary:#238636; --banner:#3b2e00;
16 
    color-scheme: dark;
17 
  }
18 
}
19 
* { box-sizing: border-box; }
20 
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); }
21 
a { color: var(--acc); text-decoration: none; }
22 
a:hover { text-decoration: underline; }
23 
code, pre, .mono { font-family: var(--mono); font-size: 12px; }
24 
header { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--header); border-bottom: 1px solid var(--line); }
25 
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 16px; }
26 
.brand svg { height: 28px; width: auto; }
27 
header .grow { flex: 1; }
28 
header .who { color: var(--mute); }
29 
nav.band { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--header); }
30 
nav.band a { padding: 8px 12px; color: var(--ink); border-bottom: 2px solid transparent; }
31 
nav.band a.now { border-bottom-color: #fd8c73; font-weight: 600; }
32 
nav.band a:hover { text-decoration: none; background: var(--soft); border-radius: 6px 6px 0 0; }
33 
.banner { background: var(--banner); border-bottom: 1px solid var(--line); padding: 6px 24px; color: var(--ink); font-size: 13px; }
34 
main { max-width: 1180px; margin: 0 auto; padding: 24px; }
35 
h1 { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
36 
h2 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
37 
.box { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
38 
.box > .row { padding: 8px 16px; border-top: 1px solid var(--line); }
39 
.box > .row:first-child { border-top: 0; }
40 
.box > .head { padding: 8px 16px; background: var(--soft); border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; font-weight: 600; }
41 
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
42 
.card { border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; }
43 
.card .name { font-weight: 600; font-size: 15px; }
44 
.mute { color: var(--mute); }
45 
.dim { color: var(--dim); }
46 
.pill { display: inline-block; padding: 0 8px; border-radius: 2em; border: 1px solid var(--line); font-size: 12px; line-height: 20px; color: var(--mute); }
47 
.p-online { color: var(--ok); border-color: var(--ok); }
48 
.p-busy { color: var(--busy); border-color: var(--busy); }
49 
.p-blocked, .p-paused { color: var(--warn); border-color: var(--warn); }
50 
.ok { color: var(--ok); }
51 
.bad { color: var(--bad); }
52 
.msg { display: flex; flex-direction: column; gap: 2px; }
53 
.msg .meta { color: var(--mute); font-size: 12px; }
54 
.msg .body p { margin: 4px 0; }
55 
.msg .body pre { background: var(--soft); padding: 8px; border-radius: 6px; overflow-x: auto; }
56 
.redacted { color: var(--dim); font-style: italic; }
57 
form.compose { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
58 
textarea { width: 100%; min-height: 80px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; }
59 
button { padding: 5px 16px; border: 1px solid var(--btn-line); border-radius: 6px; background: var(--btn); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }
60 
button.primary { background: var(--primary); border-color: rgba(31,35,40,.15); color: var(--primary-ink); align-self: flex-start; }
61 
details > summary { cursor: pointer; list-style: none; }
62 
details[open] > summary { margin-bottom: 6px; }
63 
pre.payload { background: var(--soft); padding: 8px 12px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
64 
table.facts td { padding: 2px 12px 2px 0; vertical-align: top; }
65 
table.facts td:first-child { color: var(--mute); white-space: nowrap; }
66 
form.inline { display: inline; }
67 
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
68 
.filters a { padding: 2px 10px; border: 1px solid var(--line); border-radius: 2em; color: var(--ink); font-size: 12px; }
69 
.filters a.now { background: var(--acc); border-color: var(--acc); color: #fff; }
70 
footer { max-width: 1180px; margin: 24px auto; padding: 0 24px; color: var(--dim); font-size: 12px; }