/* hackery.dev console theme — sits on top of pico.min.css. * * Strategy: * 1. Override Pico's CSS variables for the dark palette so every * existing page (login, consent, admin, ...) inherits the new * look with no markup changes. * 2. Add a handful of additive classes (.stats, .pill, .app-grid, * .card-header, etc.) for patterns Pico doesn't ship. * * All pages already set , so we target that. * Light theme is out of scope for v1. */ :root[data-theme="dark"] { /* — surfaces ——————————————————————————————————————————— */ /* Chrome (topbar + sidebar) is an off-black with a faint purple * cast — picks up the brand without dominating. The main "panel" * sits a few stops lighter as a neutral gray so the rounded inset * reads clearly against the purple-tinted chrome. */ --pico-background-color: #0d0a14; --panel-background-color: #1a1a1d; --pico-card-background-color: #232327; --pico-card-sectioning-background-color: #232327; --pico-dropdown-background-color: #1a1a1f; --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.72); --pico-code-background-color: #1c1c1f; /* — borders (stronger than hairline so cards stand off the bg) — */ --pico-border-color: rgba(255, 255, 255, 0.20); --pico-card-border-color: rgba(255, 255, 255, 0.14); --pico-muted-border-color: rgba(255, 255, 255, 0.14); --pico-dropdown-border-color: rgba(255, 255, 255, 0.20); /* — text ——————————————————————————————————————————————— */ --pico-color: #ededed; --pico-h1-color: #f5f5f5; --pico-h2-color: #f5f5f5; --pico-h3-color: #ededed; --pico-h4-color: #ededed; --pico-h5-color: #ededed; --pico-h6-color: #ededed; --pico-muted-color: #a1a1aa; --pico-code-color: #d4d4d8; /* — primary buttons fill off-white (high-contrast CTA); * the purple stays for accents (links, focus, brand splashes) * so it doesn't dominate the UI. — */ --pico-primary: #c084fc; /* link / focus accent */ --pico-primary-background: #fafafa; /* button fill */ --pico-primary-border: #fafafa; --pico-primary-hover: #d8b4fe; --pico-primary-hover-background: #e4e4e7; --pico-primary-hover-border: #e4e4e7; --pico-primary-focus: rgba(192, 132, 252, 0.30); --pico-primary-inverse: #0a0a0a; /* text on the off-white button */ --pico-primary-underline: rgba(192, 132, 252, 0.5); /* — secondary (outlined / ghost — used for non-CTAs) ——————— */ --pico-secondary: #ededed; --pico-secondary-background: transparent; --pico-secondary-border: rgba(255, 255, 255, 0.24); --pico-secondary-hover: #fafafa; --pico-secondary-hover-background: rgba(255, 255, 255, 0.06); --pico-secondary-hover-border: rgba(255, 255, 255, 0.36); --pico-secondary-focus: rgba(255, 255, 255, 0.14); --pico-secondary-inverse: #ededed; /* — forms ————————————————————————————————————————————— */ --pico-form-element-background-color: #0e0e11; --pico-form-element-border-color: rgba(255, 255, 255, 0.10); --pico-form-element-color: #ededed; --pico-form-element-placeholder-color: #52525b; --pico-form-element-active-background-color: #0e0e11; --pico-form-element-active-border-color: var(--pico-primary); --pico-form-element-focus-color: rgba(0, 217, 119, 0.18); /* — shape ——————————————————————————————————————————— */ --pico-border-radius: 8px; --pico-box-shadow: none; --pico-card-box-shadow: none; --pico-button-box-shadow: none; --pico-button-hover-box-shadow: none; /* — typography ————————————————————————————————————————— */ --pico-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, sans-serif; --pico-font-family: var(--pico-font-family-sans-serif); --pico-font-size: 15px; } /* Same overrides at :root for pages that haven't set data-theme yet * but rely on prefers-color-scheme: dark. Belt + suspenders. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pico-background-color: #0d0a14; --pico-card-background-color: #232327; --pico-primary: #c084fc; --pico-primary-background: #fafafa; --pico-primary-hover: #d8b4fe; --pico-primary-hover-background: #e4e4e7; --pico-primary-inverse: #0a0a0a; --pico-color: #ededed; --pico-muted-color: #a1a1aa; --pico-card-border-color: rgba(255, 255, 255, 0.14); --pico-border-radius: 8px; --pico-box-shadow: none; --pico-card-box-shadow: none; } } /* ============================================================ * Additive component patterns * ============================================================ */ /* — stats row — page-top summary of metrics — */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; padding: 1.5rem; background: var(--pico-card-background-color); border: 1px solid var(--pico-card-border-color); border-radius: var(--pico-border-radius); margin-block: 1.5rem; } .stat-label { font-size: 0.875rem; color: var(--pico-muted-color); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; } .stat-value { font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--pico-color); } .stat-unit { color: var(--pico-muted-color); font-size: 0.875rem; font-weight: 400; margin-left: 0.25rem; } /* — pill — status / metadata chip — */ .pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.5rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--pico-card-border-color); border-radius: 999px; font-size: 0.75rem; font-weight: 500; color: var(--pico-muted-color); line-height: 1.5; vertical-align: middle; } .pill-ok { color: #10b981; } .pill-warn { color: #f59e0b; } .pill-err { color: #ef4444; } .pill-accent { color: var(--pico-primary); } .pill-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* — card-header — title left, action right (used inside
) — */ .card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; } .card-header h3, .card-header h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--pico-color); } .card-action { font-size: 0.875rem; color: var(--pico-muted-color); text-decoration: none; white-space: nowrap; } .card-action:hover { color: var(--pico-color); } /* — app-grid — listing of apps as cards — */ .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; margin-block: 1.5rem; } .app-card { background: var(--pico-card-background-color); border: 1px solid var(--pico-card-border-color); border-radius: var(--pico-border-radius); padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color 0.12s, background 0.12s; } .app-card:hover { border-color: rgba(255, 255, 255, 0.14); background: #16161a; } .app-card-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--pico-color); } .app-card-url { font-size: 0.8rem; color: var(--pico-muted-color); font-family: var(--pico-font-family-monospace); margin: 0 0 0.75rem; word-break: break-all; } .app-card-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; font-size: 0.8rem; color: var(--pico-muted-color); } /* — section labels (uppercase muted, like Neon's sidebar headers) — */ .label-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; font-weight: 500; margin-block: 1rem 0.5rem; } /* — page-header — title left, action buttons right — */ .page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.5rem; } .page-header h1, .page-header h2 { margin: 0; } .page-header-actions { display: flex; gap: 0.5rem; align-items: center; } /* — toast — server-rendered success messages (?toast=...) — */ .toast { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.20); color: var(--pico-color); padding: 0.6rem 1rem; border-radius: var(--pico-border-radius); margin-block-end: 1rem; font-size: 0.875rem; } /* ============================================================ * Console layout — full-width topbar + fixed sidebar + main. * Pages that include the nav partial emit both .topbar and * .sidebar; login + other standalone pages emit neither, so * .sidebar~main rules don't apply to them. * ============================================================ */ :root { --topbar-height: 52px; --sidebar-width: 14rem; } /* full-width header strip across the top */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-height); background: var(--pico-background-color); display: flex; align-items: center; padding: 0 1.25rem; z-index: 20; } .topbar-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none !important; color: var(--pico-color) !important; } .topbar-brand img { display: block; width: 28px; height: 28px; border-radius: 6px; } .topbar-brand-name { font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; color: #ffffff; } /* sidebar starts below the topbar */ .sidebar { position: fixed; top: var(--topbar-height); left: 0; bottom: 0; width: var(--sidebar-width); padding: 1rem 0.75rem; background: var(--pico-background-color); overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; z-index: 10; } .sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; } .sidebar-nav a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 8px; font-size: 1rem; color: #ededed !important; text-decoration: none !important; } .sidebar-nav a:hover { background: rgba(255, 255, 255, 0.04); } .sidebar-nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.08); color: #fafafa !important; font-weight: 500; } .sidebar-section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; font-weight: 500; padding: 0 0.65rem; margin-top: 0.5rem; } /* user-menu — clickable account row at the bottom of the sidebar that * pops a Claude-style menu above it. Uses
for a no-JS * toggle. Two-line label (display name + subtitle), big circular * avatar, popover has an email header + icon-prefixed menu items * separated by hairline dividers. */ .user-menu { position: relative; margin-top: auto; margin-bottom: 0; } .user-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.5rem; border-radius: 10px; color: var(--pico-color); } .user-menu > summary::-webkit-details-marker { display: none; } .user-menu > summary::marker { content: ""; } /* Pico decorates every
summary with a CSS-only chevron via * ::after — kill it here so it doesn't duplicate the inline SVG caret * we render in the markup. */ .user-menu > summary::after { content: none; display: none; } .user-menu > summary:hover { background: rgba(255, 255, 255, 0.04); } .user-menu[open] > summary { background: rgba(255, 255, 255, 0.04); /* Pico applies margin-bottom: var(--pico-spacing) to details[open] > summary; * it pushes the row up when the popover opens. Kill it. */ margin-bottom: 0; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: #e4e4e7; color: #18181b; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 600; flex-shrink: 0; text-transform: uppercase; } .user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; } .user-name { color: var(--pico-color); font-size: 0.95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-sub { color: var(--pico-muted-color); font-size: 0.78rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-caret { color: var(--pico-muted-color); display: inline-flex; align-items: center; flex-shrink: 0; } .user-menu-items { position: absolute; bottom: calc(100% + 0.5rem); left: 0; right: 0; background: #2a2a2e; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.05rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } .user-menu-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 0.3rem 0.5rem; } .user-menu-items a, .user-menu-items button { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: 8px; text-align: left; font-size: 0.95rem; color: var(--pico-color) !important; text-decoration: none !important; background: transparent; border: none; cursor: pointer; width: 100%; font-family: inherit; font-weight: 400; } .user-menu-items a:hover, .user-menu-items button:hover { background: rgba(255, 255, 255, 0.06); } .user-menu-items .user-menu-icon { color: var(--pico-muted-color); flex-shrink: 0; } .user-menu-items form { margin: 0; } /* main is the rounded "panel" — slightly lighter than the chrome * (sidebar/topbar) with a generous top-left radius where it meets * the sidebar+topbar corner, mirroring the OpenAI/Vercel-style * console layout. The radius only renders on the top and left * edges because the panel runs to the viewport's right/bottom. */ .sidebar ~ main { margin-left: var(--sidebar-width); margin-top: var(--topbar-height); background: var(--panel-background-color); border-top-left-radius: 14px; padding-inline: 2rem; padding-block: 1.75rem 4rem; min-height: calc(100vh - var(--topbar-height)); } /* Pico's .container caps width at a fixed breakpoint, which fights the * console layout — the panel already provides the gutter via padding, * so let main fill all remaining horizontal space and let inner grids * (.app-grid, .stats, .grid) handle their own responsive collapsing. */ .sidebar ~ main.container, .sidebar ~ main.container-fluid { max-width: none; width: auto; } /* Mobile: drop the sidebar to a strip below the topbar, kill the * margin offsets. */ @media (max-width: 720px) { .topbar { padding: 0 0.75rem; } .sidebar { position: static; width: 100%; height: auto; flex-direction: row; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; background: var(--pico-background-color); } .sidebar-nav { flex-direction: row; gap: 0.1rem; flex: 1; } .sidebar-nav a { padding: 0.3rem 0.55rem; } .sidebar-section { display: none; } .user-menu { margin-top: 0; } .user-menu > summary { padding: 0.3rem 0.5rem; gap: 0.4rem; } .user-meta { display: none; } .user-avatar { width: 28px; height: 28px; font-size: 0.8rem; } .user-menu-items { right: 0.5rem; left: auto; min-width: 12rem; } .sidebar ~ main { margin-left: 0; margin-top: 0; border-top-left-radius: 14px; border-top-right-radius: 14px; padding-inline: 1rem; } } /* ============================================================ * Targeted overrides — Pico defaults that fight the console look * ============================================================ */ /* Pico's
ships with extra padding + box-shadow we don't * want for our card-as-section pattern. */ [data-theme="dark"] article { box-shadow: none; padding: 1.5rem; } /* Pico's defaults look heavier than we want. */ [data-theme="dark"] :is(table) { --pico-table-border-color: var(--pico-card-border-color); } [data-theme="dark"] th { color: var(--pico-muted-color); font-weight: 500; font-size: 0.8rem; text-transform: none; } /* Buttons: tighter padding for the console feel. */ [data-theme="dark"] button, [data-theme="dark"] [type="submit"], [data-theme="dark"] [type="button"], [data-theme="dark"] [role="button"] { font-size: 0.875rem; padding: 0.45rem 0.85rem; } /* Outline / secondary buttons — minimal */ [data-theme="dark"] button.secondary.outline, [data-theme="dark"] [role="button"].secondary.outline { background: transparent; border-color: var(--pico-secondary-border); color: var(--pico-secondary); } [data-theme="dark"] button.secondary.outline:hover { background: var(--pico-secondary-hover-background); border-color: var(--pico-secondary-hover-border); color: var(--pico-secondary-hover); } /* Inputs: subtle border, tighter padding, accent focus ring. */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { --pico-form-element-spacing-vertical: 0.5rem; --pico-form-element-spacing-horizontal: 0.75rem; } /* Links: accent color only on real links, not on every action button */ [data-theme="dark"] a:not([role="button"]):not(.app-card) { color: var(--pico-primary); text-decoration: none; } [data-theme="dark"] a:not([role="button"]):not(.app-card):hover { text-decoration: underline; text-underline-offset: 2px; } /* nav.html partial uses