kyle
c9e74b236d
Go + SQLite web app, server-rendered, hackerman theme. Projects with descriptions, searchable notes, todo/doing/done task tracking. Bcrypt login sessions, hashed api keys, full /api/v1 crud. Deploys on straylight via configs/tracker.nix (prebuilt binary).
369 lines
9.7 KiB
CSS
369 lines
9.7 KiB
CSS
/* ── tracker :: hackerman theme ─────────────────────────────
|
|
palette lifted from omarchy/hackerman.nvim
|
|
bg #0B0C16 · panel #080911 · line #1a1d2b
|
|
fg #ddf7ff · muted #6a6e95 · neon #50f872 · cyan #7cf8f7
|
|
─────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
--bg: #0B0C16;
|
|
--bg-deep: #080911;
|
|
--bg-line: #1a1d2b;
|
|
--fg: #ddf7ff;
|
|
--muted: #6a6e95;
|
|
--neon: #50f872;
|
|
--cyan: #7cf8f7;
|
|
--yellow: #7cf8d4;
|
|
--glow: 0 0 8px rgba(80, 248, 114, .55);
|
|
--glow-cyan: 0 0 8px rgba(124, 248, 247, .45);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html { color-scheme: dark; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: radial-gradient(ellipse at 50% -20%, #101426 0%, var(--bg) 55%, #05060c 100%);
|
|
color: var(--fg);
|
|
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, "SF Mono", Menlo, monospace;
|
|
font-size: 15px;
|
|
line-height: 1.55;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* crt scanlines + flicker */
|
|
.scanlines {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 999;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
|
|
mix-blend-mode: multiply;
|
|
animation: flicker 4s infinite;
|
|
}
|
|
@keyframes flicker {
|
|
0%, 100% { opacity: .9; }
|
|
92% { opacity: .9; }
|
|
93% { opacity: .55; }
|
|
94% { opacity: .9; }
|
|
97% { opacity: .75; }
|
|
98% { opacity: .9; }
|
|
}
|
|
|
|
::selection { background: var(--bg-line); color: var(--neon); }
|
|
|
|
a { color: var(--cyan); text-decoration: none; }
|
|
a:hover { text-shadow: var(--glow-cyan); }
|
|
|
|
/* ── topbar ── */
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
padding: .8rem 1.5rem;
|
|
border-bottom: 1px solid var(--bg-line);
|
|
background: rgba(8, 9, 17, .85);
|
|
position: sticky;
|
|
top: 0;
|
|
backdrop-filter: blur(6px);
|
|
z-index: 10;
|
|
}
|
|
.logo {
|
|
font-weight: 700;
|
|
color: var(--neon);
|
|
text-shadow: var(--glow);
|
|
letter-spacing: .05em;
|
|
white-space: nowrap;
|
|
}
|
|
.cursor { animation: blink 1.1s steps(1) infinite; }
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
|
|
.searchbar { flex: 1; }
|
|
.searchbar input {
|
|
width: 100%;
|
|
max-width: 420px;
|
|
}
|
|
|
|
/* ── layout ── */
|
|
.wrap {
|
|
max-width: 860px;
|
|
margin: 2rem auto 4rem;
|
|
padding: 0 1.25rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.panel {
|
|
background: linear-gradient(180deg, var(--bg-deep), rgba(11,12,22,.6));
|
|
border: 1px solid var(--bg-line);
|
|
border-radius: 6px;
|
|
padding: 1.25rem 1.5rem 1.5rem;
|
|
box-shadow: 0 0 0 1px rgba(80,248,114,.04), 0 12px 40px rgba(0,0,0,.5);
|
|
position: relative;
|
|
}
|
|
.panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -1px; left: 1.5rem;
|
|
width: 4rem; height: 1px;
|
|
background: var(--neon);
|
|
box-shadow: var(--glow);
|
|
}
|
|
|
|
h1, h2 {
|
|
font-size: 1rem;
|
|
text-transform: lowercase;
|
|
letter-spacing: .08em;
|
|
margin: 0 0 1rem;
|
|
}
|
|
.glow { color: var(--neon); text-shadow: var(--glow); }
|
|
.muted { color: var(--muted); }
|
|
|
|
.description {
|
|
white-space: pre-wrap;
|
|
margin: 0;
|
|
color: var(--fg);
|
|
}
|
|
|
|
.row { display: flex; align-items: center; gap: .75rem; }
|
|
.spread { justify-content: space-between; }
|
|
.push { margin-left: auto; }
|
|
|
|
/* ── stats ── */
|
|
.stats {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.stat {
|
|
flex: 1;
|
|
min-width: 90px;
|
|
border: 1px solid var(--bg-line);
|
|
border-radius: 6px;
|
|
background: var(--bg-deep);
|
|
padding: .75rem 1rem;
|
|
text-align: center;
|
|
}
|
|
.stat .num {
|
|
display: block;
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
color: var(--neon);
|
|
text-shadow: var(--glow);
|
|
}
|
|
.stat.doing .num { color: var(--yellow); text-shadow: 0 0 8px rgba(124,248,212,.5); animation: pulse 2s infinite; }
|
|
.stat.done .num { color: var(--cyan); text-shadow: var(--glow-cyan); }
|
|
.stat .label { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .15em; }
|
|
@keyframes pulse { 50% { opacity: .55; } }
|
|
|
|
/* ── forms ── */
|
|
input, textarea {
|
|
width: 100%;
|
|
background: #05060c;
|
|
border: 1px solid var(--bg-line);
|
|
border-radius: 4px;
|
|
color: var(--fg);
|
|
font: inherit;
|
|
padding: .55rem .8rem;
|
|
outline: none;
|
|
transition: border-color .15s, box-shadow .15s;
|
|
}
|
|
input:focus, textarea:focus {
|
|
border-color: var(--neon);
|
|
box-shadow: var(--glow), inset 0 0 12px rgba(80,248,114,.06);
|
|
}
|
|
input::placeholder, textarea::placeholder { color: #3d4160; }
|
|
textarea { resize: vertical; }
|
|
|
|
.stack { display: flex; flex-direction: column; gap: .75rem; }
|
|
.inline-form {
|
|
display: flex;
|
|
gap: .75rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.inline-form input { flex: 1; }
|
|
.big-search input { font-size: 1.1rem; }
|
|
label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .4rem;
|
|
color: var(--muted);
|
|
font-size: .8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: .1em;
|
|
}
|
|
|
|
/* ── buttons ── */
|
|
.btn {
|
|
display: inline-block;
|
|
background: transparent;
|
|
border: 1px solid var(--bg-line);
|
|
border-radius: 4px;
|
|
color: var(--cyan);
|
|
font: inherit;
|
|
font-size: .85rem;
|
|
padding: .45rem 1rem;
|
|
cursor: pointer;
|
|
transition: all .15s;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:hover {
|
|
border-color: var(--cyan);
|
|
box-shadow: var(--glow-cyan);
|
|
text-shadow: var(--glow-cyan);
|
|
}
|
|
.btn.primary { color: var(--neon); border-color: rgba(80,248,114,.35); }
|
|
.btn.primary:hover { border-color: var(--neon); box-shadow: var(--glow); text-shadow: var(--glow); }
|
|
.btn.danger { color: #ff5c8a; border-color: rgba(255,92,138,.35); }
|
|
.btn.danger:hover { border-color: #ff5c8a; box-shadow: 0 0 8px rgba(255,92,138,.5); }
|
|
.btn.ghost { border: none; padding: .2rem .5rem; color: var(--muted); font-size: .8rem; }
|
|
.btn.ghost:hover { color: #ff5c8a; text-shadow: none; box-shadow: none; }
|
|
|
|
/* ── project list ── */
|
|
.project-list { list-style: none; margin: 0; padding: 0; }
|
|
.project-list li {
|
|
padding: .8rem .25rem;
|
|
border-bottom: 1px dashed var(--bg-line);
|
|
}
|
|
.project-list li:last-child { border-bottom: none; }
|
|
.project-link {
|
|
color: var(--fg);
|
|
font-weight: 700;
|
|
}
|
|
.project-link:hover { color: var(--neon); text-shadow: var(--glow); }
|
|
.project-link .arrow { color: var(--neon); }
|
|
.project-list p { margin: .2rem 0 0; font-size: .85rem; }
|
|
|
|
/* ── tasks ── */
|
|
.task-list { list-style: none; margin: 0; padding: 0; }
|
|
.task {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .75rem;
|
|
padding: .45rem .25rem;
|
|
border-bottom: 1px dashed var(--bg-line);
|
|
}
|
|
.task:last-child { border-bottom: none; }
|
|
.task form { margin: 0; }
|
|
.task-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
|
|
.task-title.done { color: var(--muted); text-decoration: line-through; }
|
|
.status {
|
|
border: 1px solid var(--bg-line);
|
|
border-radius: 3px;
|
|
background: transparent;
|
|
font: inherit;
|
|
font-size: .72rem;
|
|
letter-spacing: .08em;
|
|
padding: .25rem .55rem;
|
|
cursor: pointer;
|
|
transition: all .15s;
|
|
min-width: 5.2rem;
|
|
text-align: left;
|
|
}
|
|
.status.todo { color: var(--muted); }
|
|
.status.doing { color: var(--yellow); border-color: rgba(124,248,212,.4); text-shadow: 0 0 6px rgba(124,248,212,.5); animation: pulse 2s infinite; }
|
|
.status.done { color: var(--neon); border-color: rgba(80,248,114,.4); text-shadow: 0 0 6px rgba(80,248,114,.5); }
|
|
.status:hover { border-color: currentColor; }
|
|
|
|
/* ── notes ── */
|
|
.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
|
|
.note {
|
|
border: 1px solid var(--bg-line);
|
|
border-left: 2px solid var(--cyan);
|
|
border-radius: 4px;
|
|
background: #05060c;
|
|
padding: .7rem 1rem;
|
|
}
|
|
.note .row { margin-bottom: .2rem; }
|
|
.note-body {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* ── search hits ── */
|
|
.hit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
|
|
.hit {
|
|
border-bottom: 1px dashed var(--bg-line);
|
|
padding-bottom: 1rem;
|
|
}
|
|
.hit:last-child { border-bottom: none; padding-bottom: 0; }
|
|
.hit .badge {
|
|
font-size: .68rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: .12em;
|
|
border: 1px solid;
|
|
border-radius: 3px;
|
|
padding: .1rem .5rem;
|
|
margin-right: .6rem;
|
|
}
|
|
.badge.project { color: var(--neon); border-color: rgba(80,248,114,.4); }
|
|
.badge.note { color: var(--cyan); border-color: rgba(124,248,247,.4); }
|
|
.badge.task { color: var(--yellow); border-color: rgba(124,248,212,.4); }
|
|
.hit-title { color: var(--fg); font-weight: 700; }
|
|
.hit-title:hover { color: var(--neon); text-shadow: var(--glow); }
|
|
.snippet { margin: .3rem 0 0; font-size: .85rem; }
|
|
|
|
/* ── auth / keys ── */
|
|
.nav { display: flex; align-items: center; gap: .9rem; }
|
|
.nav a { color: var(--muted); font-size: .85rem; }
|
|
.nav a:hover { color: var(--neon); }
|
|
.nav form { margin: 0; }
|
|
|
|
.login-panel { max-width: 420px; margin: 15vh auto 0; }
|
|
.error-msg {
|
|
color: #ff5c8a;
|
|
border: 1px solid rgba(255,92,138,.4);
|
|
border-left: 2px solid #ff5c8a;
|
|
border-radius: 4px;
|
|
background: rgba(255,92,138,.06);
|
|
padding: .6rem 1rem;
|
|
margin: 0 0 1rem;
|
|
font-size: .85rem;
|
|
}
|
|
|
|
.keybox {
|
|
background: #05060c;
|
|
border: 1px solid rgba(80,248,114,.4);
|
|
box-shadow: var(--glow), inset 0 0 20px rgba(80,248,114,.05);
|
|
border-radius: 4px;
|
|
padding: .9rem 1.2rem;
|
|
color: var(--neon);
|
|
text-shadow: var(--glow);
|
|
overflow-wrap: anywhere;
|
|
user-select: all;
|
|
}
|
|
|
|
.key-list { list-style: none; margin: 1rem 0 0; padding: 0; }
|
|
.key-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: .55rem .25rem;
|
|
border-bottom: 1px dashed var(--bg-line);
|
|
font-size: .88rem;
|
|
}
|
|
.key-row:last-child { border-bottom: none; }
|
|
.key-row form { margin: 0; }
|
|
.key-name { color: var(--cyan); text-shadow: var(--glow-cyan); }
|
|
|
|
code {
|
|
background: #05060c;
|
|
border: 1px solid var(--bg-line);
|
|
border-radius: 3px;
|
|
padding: .05rem .35rem;
|
|
font-size: .85em;
|
|
color: var(--yellow);
|
|
}
|
|
|
|
/* ── footer ── */
|
|
.foot {
|
|
text-align: center;
|
|
color: var(--muted);
|
|
font-size: .75rem;
|
|
padding: 1rem 0 2rem;
|
|
letter-spacing: .1em;
|
|
}
|