/* Shared control-panel styles — one file, linked from every page's via head-assets.php, so a style change only ever needs to happen here. The font is self-hosted (fonts/roboto-condensed-var.woff2, latin subset only — this panel is English-only) rather than pulled from Google's CDN: same look, but no external network round-trip and no async media=print/all swap trick, which was one plausible contributor to the cross-browser freeze. font-display: swap gets the same "don't block first paint" behavior natively. */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/roboto-condensed-var.woff2') format('woff2'); } /* Design tokens live in :root. */ :root { --bg: #08090b; --surface: #090a0d; --surface-hover: #0f1114; --border: #191c21; --text: #e4e6eb; --text-muted: #8b93a1; --text-dim: #5c6470; --accent: #7c8cf8; --accent-strong: #96a4ff; --accent-soft: rgba(124, 140, 248, 0.16); --accent-border: rgba(124, 140, 248, 0.4); /* Nav-only — deliberately a muted slate-blue-gray, not another shade of --accent (already used for row-target highlights/link hovers) or --running (status blue), so the nav's own highlight doesn't echo a color used anywhere else in the app. */ --nav-accent: #7c8ba3; --radius: 7px; --radius-sm: 5px; --success: #3ecf8e; --warning: #f5a623; --error: #f16063; --hang: #f0883e; --running: #58a6ff; --font: 'Roboto Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* Belt-and-suspenders on both html and body: nothing in this app should ever need the page itself to scroll horizontally — any element wide enough to threaten that (the category nav strip below, previously) should contain its own overflow instead. Browsers propagate body's overflow to the viewport when html doesn't set its own, which should already cover this on its own, but the propagation rule is exactly the kind of cross-browser inconsistency worth not relying on alone — setting both removes the ambiguity. */ html { overflow-x:hidden; } * { box-sizing:border-box; } body { background:var(--bg); color:var(--text); font-family:var(--font); font-weight:300; letter-spacing:0.02em; line-height:1.5; margin:0 auto; padding:32px 24px; font-size:16px; max-width:1100px; overflow-x:hidden; } /* Section headers — sized relative to the list rows below them (currently 14px) rather than a fixed value, so the relationship holds if that ever changes. No more uppercase/wide tracking: that was tuned for all-caps text specifically, and fights normal-case labels like "Recent Runs" once it's removed. */ h1 { font-size:calc(14px + 0.3rem); font-weight:600; color:var(--nav-accent); margin:0 0 16px; } /* Actions/Numbers/Projects' actual page-title h1 (as opposed to a section header like Overdue) — a bit more prominent now that it's the only heading on those pages at all. */ .page-title { font-size:calc(14px + 0.4rem); } p.muted { color:var(--text-muted); font-size:14px; } section { margin-bottom:32px; } .site-header { display:flex; justify-content:center; margin-bottom:12px; } .site-logo { display:block; max-width:100%; height:auto; } /* Anchors are list-row content first, "click here" prose second — no default browser blue/purple anywhere except the deliberate nav styling below. */ a { color:inherit; text-decoration:none; } /* Both nav rows are swipeable single-row strips, not flex-wrap — the primary nav is only 4 items today, but more panels are coming, and the category filter nav already needed this: with enough items, flex-wrap either grows into a multi-row block tall enough to push real content down a lot, or (the worse case) doesn't wrap cleanly and drags the whole page into horizontal scroll. A contained, scrollable single row never does either, at any width. */ nav { display:flex; align-items:center; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--border); max-width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } nav::-webkit-scrollbar { display:none; } nav a { display:flex; align-items:center; gap:8px; padding:9px 14px; font-size:14px; font-weight:300; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; flex-shrink:0; transition:color 0.5s ease; } nav a i { font-size:14px; } nav a:hover { color:var(--nav-accent); } nav a.active { color:var(--text); border-bottom-color:var(--nav-accent); } /* the secondary category-filter nav on actions.php: same links, lighter treatment */ nav + nav { border-bottom:none; margin-top:-8px; margin-bottom:20px; gap:4px; } nav + nav a { padding:4px 10px; border:1px solid var(--border); border-radius:999px; font-size:13px; margin-bottom:0; } nav + nav a:hover { border-color:var(--text-dim); color:inherit; } nav + nav a.active { color:var(--text); background:color-mix(in srgb, var(--nav-accent) 16%, transparent); border-color:color-mix(in srgb, var(--nav-accent) 40%, transparent); } @media (max-width: 700px) { nav a .nav-label { display:none; } nav a i { font-size:30px; margin-top:-4px; } nav a { padding:6px 10px; } } /* font-size must stay >=16px — same iOS Safari auto-zoom-on-focus issue as the toolbar fields above, applies to every text field (e.g. rolldown edits on mobile). */ input[type=text], input[type=number], input[type=color], select, textarea { background:var(--surface); color:var(--text); border:1px solid var(--border); padding:7px 10px; font-family:inherit; font-size:16px; border-radius:var(--radius-sm); transition:border-color .15s, box-shadow .15s; } input[type=text]:focus, input[type=number]:focus, select:focus, textarea:focus { outline:none; border-color:var(--border); box-shadow:none; } input[type=number] { width:80px; } input[type=color] { width:36px; height:30px; padding:2px; cursor:pointer; } input.wide { width:100%; max-width:320px; } /* Custom checkbox, styled to match the run-now button (same dark --surface fill, --border outline) instead of the browser-default checkbox appearance. */ input[type=checkbox] { appearance:none; -webkit-appearance:none; width:20px; height:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; flex-shrink:0; position:relative; transition:background .15s, border-color .15s; } input[type=checkbox]:hover { background:var(--surface-hover); } input[type=checkbox]:checked { background:#000; border-color:var(--text-dim); } input[type=checkbox]:checked::after { content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--text); border-width:0 2px 2px 0; transform:rotate(45deg); } button { font-family:inherit; font-size:14px; font-weight:500; border-radius:var(--radius-sm); border:1px solid transparent; padding:7px 14px; cursor:pointer; transition:background .15s, border-color .15s, color .15s; background:var(--surface); color:var(--text); border-color:var(--border); } button:hover { background:var(--surface-hover); } button:disabled { opacity:0.5; cursor:default; } button:disabled:hover { background:var(--surface); } /* Save (and Add, on projects.php) — an icon instead of a filled pill, matching the same plain-icon-button treatment as .delete-btn below (same shape, just colored for "confirm" instead of "destroy"). */ button[type=submit] { background:none; border:none; color:var(--nav-accent); opacity:0.85; font-size:16px; line-height:1; padding:4px 8px; border-radius:var(--radius-sm); } button[type=submit]:hover { opacity:1; background:color-mix(in srgb, var(--nav-accent) 12%, transparent); } /* Soft, outlined tag style for user-colored category/project chips — a colored --chip-color custom property tints background/border/text, instead of the old solid-fill pills (which read as a lot of loud, disconnected colors at once). */ .chip { --chip-color: var(--text-dim); display:inline-flex; align-items:center; padding:0 5px; border-radius:3px; font-size:12px; font-weight:500; white-space:nowrap; background:color-mix(in srgb, var(--chip-color) 16%, transparent); color:color-mix(in srgb, var(--chip-color) 65%, white); border:1px solid color-mix(in srgb, var(--chip-color) 38%, transparent); } /* The dashboard's big current-value badge is a real KPI readout, not a tag — keeps a bold solid fill on purpose so it still reads at a glance. */ .value-badge { display:inline-block; padding:0 8px; border-radius:var(--radius-sm); font-size:17px; font-weight:600; color:#0b0d10; } .muted { color:var(--text-muted); } .from-file { color:var(--text-dim); font-style:italic; } .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; flex-shrink:0; } .status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; } /* Tiles used to be content-width only, wrapping raggedly and leaving the right quarter of the row empty once there weren't quite enough of them to reach the edge — flex-grow now has each one claim its share of whatever's left instead of sizing to content alone. Each calc() below accounts for its share of the row gap so N tiles + the gaps between them land on exactly 100%: 2-up on phones (the default), 4-up on tablets, 6-up back at desktop width. */ .numbers { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px; } .number-tile { background:var(--surface); border:1px solid var(--border); border-left:3px solid #444; border-radius:var(--radius); padding:12px 16px; flex:1 1 calc(50% - 6px); min-width:140px; } .number-tile .value { font-size:28px; font-weight:600; color:#ededed; } .number-tile .label { font-size:14px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; } .number-tile .subtitle { font-size:15px; color:var(--text-dim); margin-top:2px; } @media (min-width: 701px) and (max-width: 1000px) { .number-tile { flex-basis: calc(25% - 9px); } } @media (min-width: 1001px) { .number-tile { flex-basis: calc(16.6666% - 10px); } } /* Charts (charts.php): each card is its own bordered box (not a shared-border .list like actions/numbers) — min-width alone handles mobile (wraps to one column). The chart itself stays always visible; Project/ChartType/SortOrder editing rides the usual expandable .item-detail, tucked below it. */ .chart-grid { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; } .chart-card { flex:1 1 calc(50% - 8px); min-width:280px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; padding-top:5px; } .chart-card:last-child { border-bottom:1px solid var(--border); } /* override .item:last-child — every card keeps its own full border, not just the list's last row */ .chart-title { font-size:14px; font-weight:600; color:var(--text); transition:color 0.5s ease; } .chart-title:hover { color:var(--nav-accent); } .chart-canvas-wrap { position:relative; height:220px; padding:4px 12px 14px; } .chart-card p.muted { padding:4px 12px 14px; margin:0; } .toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .toolbar button { background:var(--surface); color:var(--text-muted); border:1px solid var(--border); padding:5px 12px; font-size:15px; border-radius:var(--radius-sm); font-weight:500; } .toolbar button.active { background:var(--surface-hover); border-color:var(--text-dim); color:var(--text); } .toolbar button.active[data-status-filter="fail"] { background:color-mix(in srgb, var(--error) 20%, var(--surface)); border-color:var(--error); color:var(--text); } .toolbar button.active[data-status-filter="hang"] { background:color-mix(in srgb, var(--hang) 20%, var(--surface)); border-color:var(--hang); color:var(--text); } .toolbar button.active[data-status-filter="running"] { background:color-mix(in srgb, var(--running) 20%, var(--surface)); border-color:var(--running); color:var(--text); } .toolbar button .count-badge { opacity:0.7; font-variant-numeric:tabular-nums; } /* font-size must stay >=16px — iOS Safari auto-zooms the viewport on focus of any input/select below that, which was firing on these toolbar fields. */ .toolbar select, .toolbar input[type=text] { font-size:16px; padding:6px 10px; } .toolbar input[type=text] { width:240px; } /* The shown/total count (actions.php/numbers.php) now lives in the page-title h1 itself — "Actions (184/184)" — rather than trailing the search box, where it used to fold down onto its own line on narrow screens. Light weight so it reads as a subordinate detail next to the (600-weight) heading text. */ .count-paren { font-weight:200; } /* .delete-btn is a