Eric Bower
·
2026-05-08
1/* pici monitor — shared styles (Catppuccin Mocha palette) */
2* { box-sizing: border-box; }
3
4body {
5 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
6 margin: 0;
7 padding: 1.5rem;
8 background: #1e1e2e;
9 color: #cdd6f4;
10 font-size: 14px;
11 line-height: 1.5;
12}
13
14h1 {
15 font-size: 1rem;
16 font-weight: 600;
17 margin: 0 0 1rem 0;
18 color: #89b4fa;
19 display: flex;
20 align-items: center;
21 gap: 0.75rem;
22 flex-wrap: wrap;
23}
24
25h2 {
26 font-size: 0.9rem;
27 font-weight: 600;
28 margin: 2rem 0 0.75rem 0;
29 color: #89b4fa;
30}
31
32.meta {
33 color: #bac2de;
34 font-size: 0.85rem;
35 margin-bottom: 1rem;
36 display: flex;
37 gap: 1.5rem;
38 flex-wrap: wrap;
39}
40
41.meta span { display: flex; align-items: center; gap: 0.3rem; }
42
43/* Status badges */
44.status, .pill {
45 display: inline-block;
46 padding: 0.15rem 0.5rem;
47 border-radius: 4px;
48 font-size: 0.75rem;
49 font-weight: 600;
50}
51
52.status-running, .pill-running { background: #89b4fa33; color: #89b4fa; }
53.status-success, .pill-success { background: #a6e3a133; color: #a6e3a1; }
54.status-failed, .pill-failed { background: #f38ba833; color: #f38ba8; }
55
56/* Tables */
57table {
58 border-collapse: collapse;
59 width: 100%;
60 max-width: 800px;
61}
62
63th {
64 text-align: left;
65 padding: 0.5rem 0.75rem;
66 border-bottom: 2px solid #313244;
67 font-size: 0.8rem;
68 text-transform: uppercase;
69 color: #a6adc8;
70}
71
72td {
73 padding: 0.5rem 0.75rem;
74 border-bottom: 1px solid #313244;
75}
76
77/* Pre / code output */
78pre {
79 background: #11111b;
80 border-radius: 8px;
81 padding: 1rem;
82 overflow-x: auto;
83 margin: 0;
84 border: 1px solid #313244;
85}
86
87pre code { font-size: 13px; }
88
89code {
90 background: #313244;
91 color: #f5c2e7;
92 padding: 0.1em 0.35em;
93 border-radius: 4px;
94 font-size: 0.85em;
95}
96
97.zmx-output {
98 white-space: pre-wrap;
99 word-break: break-word;
100 background: #11111b;
101 border: 1px solid #313244;
102 border-radius: 8px;
103 padding: 1rem;
104 overflow-x: auto;
105 margin: 1rem 0;
106 font-size: 13px;
107}
108
109/* Links */
110a { color: #89b4fa; text-decoration: none; }
111a:hover { text-decoration: underline; }
112
113.back-link { margin: 0 0 0.5rem 0; font-size: 0.85rem; }
114.links { margin-top: 1rem; color: #a6adc8; font-size: 0.85rem; }