/* TimeSaver — light theme first, dark as one more block, exactly as this file was built to take. Which block wins: the media query follows the device and is skipped once an explicit "light" choice is stamped on ; the [data-theme="dark"] block below it wins whenever an explicit dark choice is stamped, whatever the device says. public/app.js does the stamping, and stamps nothing at all until someone actually chooses — which is what leaves the device in charge by default. `color-scheme` sits inside each block that sets a dark palette, so on any browser that knows the property the UA's own canvas, scrollbars and select popups are told the same theme the variables paint. Older browsers do not know it, and there the dark palette still applies — custom properties and an attribute selector are all it needs — while that UA furniture stays light. Following the device needs `prefers-color-scheme` too, so the device path is affected only in the narrow window where one is known and the other is not (Firefox 67–95, Chrome 76–80, Safari 12.1); an explicit choice keeps working, and so keeps this residual, much further back. Scrollbars could be dressed with `scrollbar-color` or `::-webkit-scrollbar`; the select popup could not. Neither is done here. The dark values appear twice, in the two blocks below, because CSS cannot share one declaration block between a media-gated and a plain selector. tools/check_html.js fails the build if the two ever declare different things — they tie on specificity, so a drift would silently give "dark by device" and "dark by choice" two different themes. */ :root { color-scheme: light; --bg: #f6f7fb; --surface: #ffffff; --text: #1c2333; --text-muted: #5b6577; --border: #dde2ec; --accent: #2f6fed; --accent-text: #ffffff; --danger: #c93b3b; --danger-text: #ffffff; /* on a filled --danger button: 4.9:1 */ --backdrop: rgba(20, 30, 60, 0.45); --success: #1f8f4e; --success-text: #1a7a43; /* 5:1 on --bg — --success is 3.8:1, too faint for small text */ --switch-off: #838b9c; /* 3.4:1 on --surface — a control boundary needs 3:1 (WCAG 1.4.11) */ --knob-shadow: rgba(20, 30, 60, 0.25); --shadow: 0 1px 2px rgba(20, 30, 60, 0.06), 0 4px 16px rgba(20, 30, 60, 0.06); --radius: 10px; --bar-height: 8px; --gap: 12px; --control-height: 41px; /* a text field's height: 15px text at 1.5 line-height + padding + border */ --checkbox-size: 18px; --gutter-narrow: 16px; --button-pad-narrow: 4px 8px; /* an entry row's buttons below 640px */ --font-small: 13px; --stat-caption-line: 18px; /* the dates line atop the This week tile, and the matching space atop its neighbours */ --chip-pad: 1px 8px; /* a tag chip in the entry list */ --chip-pad-narrow: 1px 5px; /* the same below 640px, where the Note column is tight */ --font-hero: 40px; /* Today's total, atop the timesheet */ --rate-width: 6.5em; /* the By project card's hourly rate field */ /* Chart series: Okabe–Ito hues, deepened until each is >= 3:1 on --surface (WCAG 1.4.11). */ --chart-1: #0072b2; --chart-2: #b86e00; --chart-3: #00836a; --chart-4: #b2508a; --chart-5: #d0490f; --chart-other: #7d7d7d; --chart-height: 180px; --week-bar: #7f8aa0; /* a day's bar in the Timesheet's week chart: 3.5:1 on --surface */ --week-chart-height: 160px; --week-bar-width: 48px; --week-bar-radius: 4px; --week-baseline: 2px; --week-bar-stub: 3px; /* a day with no time still shows a sliver on the baseline */ --chart-bar-width: 72px; --font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* The device's preference — unless an explicit light choice has been stamped. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #10141d; --surface: #171d29; --text: #e6eaf2; --text-muted: #9aa5b8; --border: #2a3242; --accent: #5b8dfb; --accent-text: #0b101a; --danger: #ff8080; --danger-text: #0b101a; --backdrop: rgba(0, 0, 0, 0.6); --success: #4ade80; --success-text: #4ade80; --switch-off: #6b7488; /* 3.6:1 on --surface */ --knob-shadow: rgba(0, 0, 0, 0.5); --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.35); --chart-1: #56b4e9; --chart-2: #e69f00; --chart-3: #1fb58a; --chart-4: #e089bc; --chart-5: #f07f3c; --chart-other: #8f8f8f; --week-bar: #6b7488; } } /* An explicit dark choice, which the device cannot override. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #10141d; --surface: #171d29; --text: #e6eaf2; --text-muted: #9aa5b8; --border: #2a3242; --accent: #5b8dfb; --accent-text: #0b101a; --danger: #ff8080; --danger-text: #0b101a; --backdrop: rgba(0, 0, 0, 0.6); --success: #4ade80; --success-text: #4ade80; --switch-off: #6b7488; --knob-shadow: rgba(0, 0, 0, 0.5); --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.35); --chart-1: #56b4e9; --chart-2: #e69f00; --chart-3: #1fb58a; --chart-4: #e089bc; --chart-5: #f07f3c; --chart-other: #8f8f8f; --week-bar: #6b7488; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); } a { color: var(--accent); } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: 0.2px; color: var(--text); text-decoration: none; } .brand .logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-text); display: inline-grid; place-items: center; font-size: 14px; } nav a { margin-left: 18px; color: var(--text-muted); text-decoration: none; font-weight: 500; } nav a[aria-current="page"] { color: var(--text); border-bottom: 2px solid var(--accent); padding-bottom: 4px; } main { max-width: 880px; margin: 28px auto; padding: 0 20px; display: grid; gap: 20px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; } .card h2 { margin: 0 0 12px; font-size: 16px; } /* A card's heading with a control at its far end, e.g. the entry list's Sort by; wraps under it when narrow. */ .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gap); } .card-head h2 { margin: 0; } /* The entry list's Tag filter and Sort by, side by side, wrapping under each other when narrow. */ .card-tools { display: flex; flex-wrap: wrap; gap: var(--gap); } /* A label that sits beside its control rather than above it. */ label.inline-field { display: flex; align-items: center; gap: calc(var(--gap) / 2); } label.inline-field select { padding: calc(var(--gap) / 3) calc(var(--gap) * 2 / 3); } .timer { display: grid; grid-template-columns: 1fr 1fr 1fr auto auto; gap: 12px; align-items: end; } /* "Add “Name” as a project": a quiet link-style action under the Project field — row 2, column 1 on a wide screen, so Note and Start stay beside the field. The ☆ Favourite toggle shares the look and the slot: app.js never shows the two at once. */ .timer .add-project { grid-row: 2; grid-column: 1; justify-self: start; margin-top: calc(var(--gap) / -2); padding: 2px 0; background: transparent; color: var(--accent); font-size: var(--font-small); font-weight: 600; max-width: 100%; overflow-wrap: anywhere; text-align: left; } .timer .add-project:hover { text-decoration: underline; } .timer .add-project:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } label { display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); } /* The timer's Billable checkbox: box and word side by side, as tall as the fields beside it. */ .timer label.billable-toggle { display: flex; align-items: center; gap: calc(var(--gap) / 2); min-height: var(--control-height); color: var(--text); font-size: inherit; cursor: pointer; } input[type="checkbox"]:not(.switch) { width: var(--checkbox-size); height: var(--checkbox-size); margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; } input, select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; } input.hours { width: 7em; text-align: right; } input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } button { font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; background: var(--accent); color: var(--accent-text); cursor: pointer; } button.secondary { background: transparent; color: var(--text); border-color: var(--border); } button.danger { background: transparent; color: var(--danger); border-color: var(--border); padding: 4px 10px; font-weight: 500; } /* The small buttons in an entry row. */ button.compact { padding: 4px 10px; font-weight: 500; } button.destructive { background: var(--danger); color: var(--danger-text); } button:disabled { opacity: 0.5; cursor: default; } .running { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--border); } .running .elapsed { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; } .running .label { color: var(--text-muted); } /* One click empties the running timer's note: a quiet link under the title, like "Add project". */ .running .clear-note { margin-top: 2px; padding: 2px 0; background: transparent; border: 0; color: var(--accent); font-size: var(--font-small); font-weight: 600; } .running .clear-note:hover { text-decoration: underline; } .running .clear-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The "forgot to stop it?" nudge: a full-width line under the timer, muted so it reminds without alarming. */ .running { flex-wrap: wrap; gap: var(--gap); } .long-run { flex-basis: 100%; margin: 0; padding-top: var(--gap); border-top: 1px dashed var(--border); color: var(--text-muted); font-size: var(--font-small); } /* Today's total heads the timesheet: its label, the figure large beneath it, then the daily goal. */ .card.today h2.label { margin: 0; color: var(--text-muted); font-size: var(--font-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .today .value { font-family: var(--mono); font-size: var(--font-hero); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; } .today .goal { margin-top: var(--gap); } .today .goal-caption { font-size: var(--font-small); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .stat { padding: 14px; border-radius: 8px; background: var(--bg); } .stat .value { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; } /* "This week" carries its billable part under its label, so every tile's value and label stay in line. */ .stat .billable-week { color: var(--success-text); font-size: var(--font-small); font-variant-numeric: tabular-nums; } .stat .label { color: var(--text-muted); font-size: 13px; } /* "This week" names its dates above its value; the other tiles keep an equal blank line on top, so the values in a row still line up. One column below 640px has no row to line up, so the blank goes. */ .stat .week-dates, .stats .stat:not(.this-week)::before { display: block; font-size: var(--font-small); line-height: var(--stat-caption-line); } .stat .week-dates { color: var(--text-muted); font-variant-numeric: tabular-nums; } .stats .stat:not(.this-week)::before { content: "\00a0"; } /* This week's chart, below the totals: one column per day — hours above a bar above the day's name. The plot's height is fixed so the bars share one scale; today's bar and figures take the accent. */ .week-chart-sub { margin: calc(var(--gap) * -2 / 3) 0 var(--gap); color: var(--text-muted); font-size: var(--font-small); } .week-chart { list-style: none; margin: 0; padding: 0; display: flex; } .week-day { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; } .week-plot { height: var(--week-chart-height); padding-top: calc(var(--gap) * 2); width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: var(--week-baseline) solid var(--text); } /* The figure rides on its bar's top edge; the plot's top padding keeps room for the tallest one. */ .week-hours { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: calc(var(--gap) / 3); font-size: var(--font-small); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .week-bar { position: relative; flex: none; width: 60%; max-width: var(--week-bar-width); min-height: var(--week-bar-stub); border-radius: var(--week-bar-radius) var(--week-bar-radius) 0 0; background: var(--week-bar); } .week-name { padding-top: calc(var(--gap) / 2); font-size: var(--font-small); font-weight: 700; } .week-day.today .week-bar { background: var(--accent); } .week-day.today .week-hours { color: var(--accent); } /* Read by screen readers, never shown. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .goal { margin-top: 10px; } /* The track's edge is --switch-off, a 3:1 boundary, so the bar's full length reads even near 0%. */ .goal-track { height: var(--bar-height); border-radius: 999px; background: var(--border); box-shadow: inset 0 0 0 1px var(--switch-off); overflow: hidden; } .goal-fill { height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width 0.3s ease; } .goal.reached .goal-fill { background: var(--success); } .goal-caption { margin-top: 6px; color: var(--text-muted); font-size: 12px; } .goal.reached .goal-caption { color: var(--success-text); font-weight: 600; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); } th { color: var(--text-muted); font-weight: 500; font-size: 13px; } td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } th.num { text-align: right; } /* The By project card's rate field: a short right-aligned number that fits the column, not a full-width input. */ input.rate { width: var(--rate-width); padding: 4px 8px; text-align: right; font-family: var(--mono); } .by-project td.rate-cell { padding-block: 4px; } .by-project tfoot th, .by-project tfoot td { border-bottom: 0; color: var(--text); font-weight: 600; } /* The entry list's Billable column: just a checkbox, centred under its heading. */ th.billable-col, td.billable-col { text-align: center; width: 1%; } /* Its stand-in on a phone: box and word side by side among the row's buttons. Hidden until 640px. */ .row-actions label.row-billable { display: none; align-items: center; gap: calc(var(--gap) / 3); color: var(--text); font-size: var(--font-small); cursor: pointer; } tr.live td { color: var(--success); } /* An entry row's buttons sit together at the end of the row, and wrap under each other when narrow. */ .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--gap) / 2); } /* A row being edited: Project and Note share one cell, side by side, wrapping to a stack when narrow. */ tr.editing td { color: var(--text); } .edit-fields { display: flex; flex-wrap: wrap; gap: calc(var(--gap) / 2); min-width: 22em; } .edit-fields input { flex: 1 1 10em; width: 0; min-width: 6em; padding: 4px 8px; } /* A day's heading row in the entry list: reads as a label for the rows beneath it, not a column header. */ tr.day-row th { color: var(--text); font-weight: 600; font-size: 14px; padding-top: calc(var(--gap) * 2); } /* Its total follows the date (or project), quieter, in the same mono digits as the Duration column. */ tr.day-row .day-total { color: var(--text-muted); font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; } .empty { color: var(--text-muted); padding: 16px 0; text-align: center; } .help-note { margin: var(--gap) 0 0; color: var(--text-muted); font-size: var(--font-small); } /* An entry's tags: small chips under its note, wrapping onto new lines — never clipped. */ .tag-list { display: flex; flex-wrap: wrap; gap: calc(var(--gap) / 3); margin-top: calc(var(--gap) / 3); } .tag-chip { padding: var(--chip-pad); border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font-size: var(--font-small); line-height: 1.5; overflow-wrap: break-word; /* whole words, like a project name — split only when a tag is wider than the column */ } tr.day-row .tag-chip { font-weight: 600; } /* Reports: the week toolbar, then the week's stat tile above its per-project table. */ .report-toolbar { display: grid; gap: var(--gap); } .week-nav { display: grid; grid-template-columns: auto 1fr auto; gap: var(--gap); align-items: center; } .week-nav .week-label { margin: 0; text-align: center; } .export { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); } .export .help { color: var(--text-muted); font-size: 13px; } .report-stat { margin-bottom: var(--gap); } /* Project names wrap, whole — never clipped — even a long name with no spaces in it. */ td.project { overflow-wrap: anywhere; } tfoot th, tfoot td { color: var(--text); font-size: inherit; font-weight: 600; border-bottom: 0; } /* Reports chart: four columns, each a total above a stacked bar above its week's date. The plot's height is fixed, so bars share one scale; the total rides on its bar's top edge. */ .chart-plot { display: flex; gap: var(--gap); padding: calc(var(--gap) / 3) calc(var(--gap) / 3) 0; } .chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--gap) * 2) calc(var(--gap) / 3) calc(var(--gap) / 3); border-radius: 8px; } .chart-area { height: var(--chart-height); width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--switch-off); } /* column-reverse: the first series sits on the baseline, later ones stack above it. */ .chart-bar { position: relative; width: 60%; max-width: var(--chart-bar-width); display: flex; flex-direction: column-reverse; } .chart-seg { flex: none; } .chart-seg + .chart-seg { border-top: 1px solid var(--surface); } .chart-seg:last-child { border-radius: 4px 4px 0 0; } .chart-total { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: calc(var(--gap) / 3); font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; } .chart-week { padding-top: calc(var(--gap) / 2); color: var(--text-muted); font-size: 13px; text-align: center; } .chart-col.selected { outline: 2px solid var(--accent); outline-offset: -2px; } .chart-col.selected .chart-week, .chart-col.selected .chart-total { color: var(--text); font-weight: 700; } .chart-legend { list-style: none; margin: var(--gap) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--gap) * 2 / 3) var(--gap); } /* display: flex would otherwise beat the UA [hidden] rule and leave an empty list announced. */ .chart-legend[hidden] { display: none; } .chart-legend li { display: flex; align-items: baseline; gap: calc(var(--gap) / 2); min-width: 0; max-width: 100%; font-size: 13px; } .chart-name { overflow-wrap: anywhere; } .chart-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; align-self: center; } /* The project's colour beside its name in the entry list; the hue comes from a .chart-slot-N class. */ .project-label { display: flex; align-items: center; gap: calc(var(--gap) * 2 / 3); overflow-wrap: break-word; } .project-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; } /* In a project's heading row the name runs inline, so the group's total follows it on the same line. */ tr.day-row .project-label { display: inline-flex; vertical-align: middle; } .chart-slot-1 { background: var(--chart-1); } .chart-slot-2 { background: var(--chart-2); } .chart-slot-3 { background: var(--chart-3); } .chart-slot-4 { background: var(--chart-4); } .chart-slot-5 { background: var(--chart-5); } .chart-slot-other { background: var(--chart-other); } .settings-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); } .settings-row:last-child { border-bottom: 0; } .settings-row .title { font-weight: 600; } .settings-row .help { color: var(--text-muted); font-size: 13px; } /* A row title that labels a control is a