/* Pixelpipe terminal UI — dark monospace, init.Habits-flavoured. Themes: [data-theme] on swaps the CSS custom properties below. */ :root { --bg: #0c0e0d; --bg-alt: #121513; --fg: #c8d6c0; --fg-dim: #6f7d68; --green: #4ade80; --green-dim: #1f2a21; --amber: #fbbf24; --red: #f87171; --cyan: #67e8f9; --line: #232a23; --row-hover: #141813; --hm-1: #1d4d2b; --hm-2: #2c7a41; --hm-3: #3fae5c; --bg-skip: #2a2417; --bg-fail: #2a1817; --bg-pending: #14252a; --avatar-fg: #0c0e0d; --avatar-bg: var(--green); --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace; } /* ---------------- themes ---------------- */ [data-theme="catppuccin-latte"] { --bg: #eff1f5; --bg-alt: #e6e9ef; --fg: #4c4f69; --fg-dim: #6c6f85; --green: #40a02b; --green-dim: #dce0e8; --amber: #df8e1d; --red: #d20f39; --cyan: #04a5e5; --line: #ccd0da; --row-hover: #e6e9ef; --hm-1: #a5d8a1; --hm-2: #7dc67d; --hm-3: #40a02b; --bg-skip: #f2e2c8; --bg-fail: #f2d5d5; --bg-pending: #d8e9f2; --avatar-fg: #eff1f5; --avatar-bg: #1e66f5; } [data-theme="catppuccin-frappe"] { --bg: #303446; --bg-alt: #292c3c; --fg: #c6d0f5; --fg-dim: #a5adce; --green: #a6d189; --green-dim: #414559; --amber: #e5c890; --red: #e78284; --cyan: #99d1db; --line: #414559; --row-hover: #383c4e; --hm-1: #5b6258; --hm-2: #81a979; --hm-3: #a6d189; --bg-skip: #4a4338; --bg-fail: #4a383b; --bg-pending: #38424a; --avatar-fg: #303446; --avatar-bg: #ca9ee6; } [data-theme="catppuccin-macchiato"] { --bg: #24273a; --bg-alt: #1e2030; --fg: #cad3f5; --fg-dim: #a5adcb; --green: #a6da95; --green-dim: #363a4f; --amber: #eed49f; --red: #ed8796; --cyan: #91d7e3; --line: #363a4f; --row-hover: #2b2f44; --hm-1: #4a5044; --hm-2: #6f8f66; --hm-3: #a6da95; --bg-skip: #423a2e; --bg-fail: #422f34; --bg-pending: #2e3a45; --avatar-fg: #24273a; --avatar-bg: #c6a0f6; } [data-theme="catppuccin-mocha"] { --bg: #1e1e2e; --bg-alt: #181825; --fg: #cdd6f4; --fg-dim: #a6adc8; --green: #a6e3a1; --green-dim: #313244; --amber: #f9e2af; --red: #f38ba8; --cyan: #89dceb; --line: #313244; --row-hover: #262636; --hm-1: #41463f; --hm-2: #618a5e; --hm-3: #a6e3a1; --bg-skip: #403a2c; --bg-fail: #402f35; --bg-pending: #2d3940; --avatar-fg: #1e1e2e; --avatar-bg: #cba6f7; } [data-theme="nord"] { --bg: #2e3440; --bg-alt: #3b4252; --fg: #d8dee9; --fg-dim: #7b88a1; --green: #a3be8c; --green-dim: #434c5e; --amber: #ebcb8b; --red: #bf616a; --cyan: #88c0d0; --line: #434c5e; --row-hover: #3b4252; --hm-1: #4c566a; --hm-2: #7d9a6a; --hm-3: #a3be8c; --bg-skip: #4c4638; --bg-fail: #4c3838; --bg-pending: #38454c; --avatar-fg: #2e3440; --avatar-bg: #81a1c1; } [data-theme="dracula"] { --bg: #282a36; --bg-alt: #21222c; --fg: #f8f8f2; --fg-dim: #6272a4; --green: #50fa7b; --green-dim: #383a46; --amber: #f1fa8c; --red: #ff5555; --cyan: #8be9fd; --line: #44475a; --row-hover: #2f3140; --hm-1: #3a3d4d; --hm-2: #4f7a5a; --hm-3: #50fa7b; --bg-skip: #4a4430; --bg-fail: #4a2f33; --bg-pending: #2f3d4a; --avatar-fg: #282a36; --avatar-bg: #bd93f9; } [data-theme="gruvbox"] { --bg: #282828; --bg-alt: #32302f; --fg: #ebdbb2; --fg-dim: #928374; --green: #b8bb26; --green-dim: #3c3836; --amber: #fabd2f; --red: #fb4934; --cyan: #8ec07c; --line: #504945; --row-hover: #32302f; --hm-1: #504945; --hm-2: #6f7d3a; --hm-3: #b8bb26; --bg-skip: #4a4030; --bg-fail: #4a3028; --bg-pending: #303a3a; --avatar-fg: #282828; --avatar-bg: #d3869b; } [data-theme="tokyonight"] { --bg: #1a1b26; --bg-alt: #16161e; --fg: #c0caf5; --fg-dim: #565f89; --green: #9ece6a; --green-dim: #292e42; --amber: #e0af68; --red: #f7768e; --cyan: #7dcfff; --line: #2f334d; --row-hover: #1f2335; --hm-1: #2f334d; --hm-2: #5c7a52; --hm-3: #9ece6a; --bg-skip: #3a3628; --bg-fail: #3a2830; --bg-pending: #263a44; --avatar-fg: #1a1b26; --avatar-bg: #bb9af7; } [data-theme="onedark"] { --bg: #282c34; --bg-alt: #21252b; --fg: #abb2bf; --fg-dim: #5c6370; --green: #98c379; --green-dim: #2c313a; --amber: #e5c07b; --red: #e06c75; --cyan: #56b6c2; --line: #3e4452; --row-hover: #2c313a; --hm-1: #3e4452; --hm-2: #5c7a62; --hm-3: #98c379; --bg-skip: #403a2c; --bg-fail: #402f33; --bg-pending: #2c3a40; --avatar-fg: #282c34; --avatar-bg: #61afef; } [data-theme="solarized-dark"] { --bg: #002b36; --bg-alt: #073642; --fg: #93a1a1; --fg-dim: #586e75; --green: #859900; --green-dim: #073642; --amber: #b58900; --red: #dc322f; --cyan: #2aa198; --line: #073642; --row-hover: #073642; --hm-1: #073642; --hm-2: #4a6a40; --hm-3: #859900; --bg-skip: #4a3c24; --bg-fail: #4a1f1f; --bg-pending: #1f3a44; --avatar-fg: #002b36; --avatar-bg: #268bd2; } [data-theme="solarized-light"] { --bg: #fdf6e3; --bg-alt: #eee8d5; --fg: #657b83; --fg-dim: #93a1a1; --green: #859900; --green-dim: #eee8d5; --amber: #b58900; --red: #dc322f; --cyan: #2aa198; --line: #d8d4c8; --row-hover: #eee8d5; --hm-1: #d8d4c8; --hm-2: #b8c49a; --hm-3: #859900; --bg-skip: #f0e2c8; --bg-fail: #f0d5d0; --bg-pending: #d8e8ec; --avatar-fg: #fdf6e3; --avatar-bg: #268bd2; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 14px; line-height: 1.45; transition: background .2s ease, color .2s ease; } #topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 8px 14px; background: var(--bg-alt); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .prompt { color: var(--green); font-weight: 700; white-space: nowrap; } .muted, .hint { color: var(--fg-dim); } .hint code { color: var(--cyan); } nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; } button, .fake-btn { font-family: var(--mono); font-size: 13px; background: transparent; color: var(--fg); border: 1px solid var(--line); border-radius: 2px; padding: 4px 10px; cursor: pointer; } button:hover, .fake-btn:hover { border-color: var(--green); color: var(--green); } button.danger:hover { border-color: var(--red); color: var(--red); } .nav-btn.active { color: var(--bg); background: var(--green); border-color: var(--green); } .conn { color: var(--fg-dim); font-size: 12px; } .conn.ok { color: var(--green); } .conn.bad { color: var(--red); } .userchip { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--avatar-fg); background: var(--avatar-bg); border: 1px solid var(--line); user-select: none; } main { max-width: 1200px; margin: 0 auto; padding: 14px; } .view { display: none; } .view.active { display: block; animation: fadein .15s ease; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* -------- stat strip -------- */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; } .stat { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; } .stat .k { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; } .stat .v { font-size: 20px; color: var(--green); } .stat .v.warn { color: var(--amber); } .stat .v.bad { color: var(--red); } /* -------- heatmap -------- */ .heatmap { display: flex; gap: 3px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 4px; } .hm-day { width: 11px; height: 22px; border-radius: 2px; background: var(--line); flex: none; } .hm-day[data-n="1"] { background: var(--hm-1); } .hm-day[data-n="2"] { background: var(--hm-2); } .hm-day[data-n="3"] { background: var(--hm-3); } .hm-day[data-n="4"] { background: var(--green); } .hm-day.failed { background: var(--red) !important; } /* -------- panels -------- */ .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } @media (max-width: 760px) { .row { grid-template-columns: 1fr; } } .panel { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 4px; padding: 12px; margin-bottom: 14px; } .panel-title { color: var(--green); margin-bottom: 8px; font-weight: 700; } .pre { white-space: pre-wrap; word-break: break-word; color: var(--fg); margin: 0; font-size: 13px; } .pre.small { font-size: 12px; color: var(--fg-dim); max-height: 260px; overflow-y: auto; } .dim { color: var(--fg-dim); } /* -------- dropzone -------- */ .dropzone { border: 1px dashed var(--fg-dim); border-radius: 4px; padding: 26px; text-align: center; transition: border-color .15s, background .15s; } .dropzone.drag { border-color: var(--green); background: var(--green-dim); } .dropzone input[type="file"] { display: none; } .upload-progress { margin-top: 10px; display: none; } .progress-bar { height: 14px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 4px; } .progress-fill { height: 100%; width: 0; background: var(--green); transition: width .2s; } .progress-label { color: var(--fg-dim); font-size: 12px; } /* -------- table -------- */ .toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .toolbar select, .panel select, .panel input { font-family: var(--mono); background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 2px; padding: 4px 6px; } .panel label { display: block; margin: 8px 0; color: var(--fg-dim); } .panel textarea, .panel input[type="text"] { font-family: var(--mono); width: 100%; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 2px; padding: 6px; margin-top: 4px; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; } th { color: var(--fg-dim); font-weight: 400; text-transform: uppercase; font-size: 11px; } td.hash { font-size: 11px; color: var(--fg-dim); max-width: 90px; overflow: hidden; text-overflow: ellipsis; } tr:hover td { background: var(--row-hover); } .status { padding: 1px 7px; border-radius: 8px; font-size: 12px; } .status.success { color: var(--green); background: var(--green-dim); } .status.skipped { color: var(--amber); background: var(--bg-skip); } .status.failed, .status.discarded { color: var(--red); background: var(--bg-fail); } .status.pending, .status.hashing, .status.queued { color: var(--cyan); background: var(--bg-pending); } .status.uploading { color: var(--fg); background: var(--line); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: .5; } } .btn-row { display: flex; gap: 8px; margin: 10px 0; } .mini { font-size: 12px; padding: 3px 8px; } footer { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; gap: 14px; flex-wrap: wrap; color: var(--fg-dim); } @media (max-width: 600px) { body { font-size: 13px; } .stat .v { font-size: 16px; } }