main pici / tmpl / styles.css
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; }