/* ─── kj-tracker style.css ─── Design language: mirrors life-well-spent. Dark surface by default, light via [data-theme="light"] on . Cards with thin borders, monospace headings, single accent colour, no shadows. The custom CSS in this file is for things Tailwind can't express as utilities: per-element layout like the toolbar, the form grid, the history chart's ticks. Component variants (cards, buttons, fields) are Tailwind utility classes in index.html — the tokens they use (--color-surface, --color-border, etc.) come from theme.css. */ /* ─── Layout ─── */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .app-main { flex: 1; max-width: var(--container-page); width: 100%; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; display: flex; flex-direction: column; gap: 1.5rem; } @media (min-width: 640px) { .app-main { padding: 2rem 1.5rem 5rem; gap: 2rem; } } /* ─── Header ─── */ .app-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); } .app-header-inner { max-width: var(--container-page); margin: 0 auto; padding: 0.875rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .app-brand { display: flex; align-items: baseline; gap: 0.625rem; text-decoration: none; color: inherit; } .app-brand-mark { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--color-accent) 0%, color-mix(in oklab, var(--color-accent) 60%, #1a1a24) 100%); display: inline-grid; place-items: center; color: var(--color-accent-fg); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; line-height: 1; letter-spacing: 0; flex: 0 0 auto; align-self: center; box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 25%, transparent), 0 0 8px 0 var(--color-accent-glow); } .app-brand-name { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); } .app-brand-tag { font-size: 0.75rem; color: var(--color-text-mute); letter-spacing: 0.02em; } .app-header-right { display: flex; align-items: center; gap: 0.5rem; } .app-status { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-mute); } .app-status[data-state="ready"] { color: var(--color-accent); } .app-status[data-state="error"] { color: var(--color-danger); } /* ─── Section / card ─── */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; transition: border-color 0.15s, box-shadow 0.15s; } .card:hover { border-color: color-mix(in oklab, var(--color-accent) 25%, var(--color-border)); } @media (min-width: 640px) { .card { padding: 1.5rem; } } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .card-title { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); } .card-sub { font-size: 0.75rem; color: var(--color-text-mute); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } /* ─── Form ─── */ .form-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; } @media (min-width: 640px) { .form-grid--two { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: 0.375rem; } .field-label { font-size: 0.75rem; color: var(--color-text-dim); font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; } .field-input, .field-select, .field-textarea { width: 100%; padding: 0.625rem 0.75rem; font-size: 0.95rem; font-family: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; transition: border-color 0.15s, background 0.15s; } .field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--color-accent); background: var(--color-surface); } .field-input::placeholder, .field-textarea::placeholder { color: var(--color-text-mute); } .field-textarea { min-height: 2.5rem; resize: vertical; } .form-actions { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.5rem; } /* ─── Typeahead dropdown ─── */ .typeahead { position: relative; z-index: 30; } .typeahead-list { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; z-index: 30; max-height: 16rem; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); } .typeahead-item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0.125rem; } .typeahead-item:last-child { border-bottom: 0; } .typeahead-item:hover, .typeahead-item[aria-selected="true"] { background: var(--color-surface-hover); } .typeahead-item-name { font-size: 0.9rem; color: var(--color-text); } .typeahead-item-meta { font-size: 0.7rem; color: var(--color-text-mute); font-family: var(--font-mono); letter-spacing: 0.02em; } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 0.875rem; font-size: 0.85rem; font-family: inherit; font-weight: 500; line-height: 1.2; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; user-select: none; text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: linear-gradient(180deg, var(--color-accent) 0%, color-mix(in oklab, var(--color-accent) 85%, #000) 100%); color: var(--color-accent-fg); border-color: var(--color-accent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 30%, transparent), 0 1px 0 0 color-mix(in oklab, var(--color-accent) 50%, transparent); } .btn-primary:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 50%, transparent), 0 0 12px 0 var(--color-accent-glow); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover:not(:disabled) { background: var(--color-surface-hover); border-color: var(--color-text-mute); } .btn-ghost { background: transparent; color: var(--color-text-dim); border-color: transparent; padding: 0.4rem 0.6rem; } .btn-ghost:hover:not(:disabled) { color: var(--color-text); background: var(--color-surface); } .btn-danger { background: transparent; color: var(--color-danger); border-color: var(--color-border); } .btn-danger:hover:not(:disabled) { background: var(--color-danger); color: var(--color-danger-fg); border-color: var(--color-danger); } .btn-sm { padding: 0.3rem 0.55rem; font-size: 0.75rem; } .btn-icon { width: 1.875rem; height: 1.875rem; padding: 0; display: inline-grid; place-items: center; background: transparent; color: var(--color-text-dim); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .btn-icon:hover { color: var(--color-text); background: var(--color-surface-hover); } .btn-icon:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } .btn-icon svg { display: block; } /* ─── Day card: total kJ + macro split ─── */ .day-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .day-total-number { font-family: var(--font-mono); font-size: 2.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1; } .day-total-unit { font-family: var(--font-mono); font-size: 0.95rem; color: var(--color-text-dim); margin-left: 0.25rem; font-weight: 400; } .day-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .day-macro { display: flex; flex-direction: column; gap: 0.125rem; } .day-macro-label { font-size: 0.7rem; color: var(--color-text-mute); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .day-macro-value { font-size: 0.95rem; color: var(--color-text); font-variant-numeric: tabular-nums; font-family: var(--font-mono); } /* ─── Entries list ─── */ .entries { display: flex; flex-direction: column; } .entries-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0; font-size: 0.7rem; color: var(--color-text-mute); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; } .entries-empty { padding: 1.25rem 0; color: var(--color-text-mute); font-size: 0.85rem; text-align: center; } .entry { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--color-border); } .entry-main { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .entry-name { font-size: 0.9rem; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entry-meta { font-size: 0.7rem; color: var(--color-text-mute); font-family: var(--font-mono); letter-spacing: 0.02em; } .entry-kj { font-family: var(--font-mono); font-size: 0.9rem; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .entry-kj-unit { color: var(--color-text-mute); margin-left: 0.125rem; font-size: 0.75rem; } .entry-actions { display: flex; gap: 0.25rem; } /* ─── History chart ─── */ .history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; } .history-range { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .history-range button { background: transparent; color: var(--color-text-dim); border: 0; padding: 0.3rem 0.625rem; font-size: 0.75rem; font-family: var(--font-mono); letter-spacing: 0.04em; cursor: pointer; transition: background 0.12s, color 0.12s; } .history-range button + button { border-left: 1px solid var(--color-border); } .history-range button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-fg); } .history-range button:hover:not([aria-pressed="true"]) { background: var(--color-surface-hover); color: var(--color-text); } .history-chart { width: 100%; height: 9rem; display: block; } .history-empty { padding: 2.5rem 0; text-align: center; color: var(--color-text-mute); font-size: 0.85rem; } /* ─── Backup card ─── */ .backup-help { font-size: 0.8rem; color: var(--color-text-dim); line-height: 1.5; margin-bottom: 1rem; } .backup-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* ─── Footer ─── */ .app-footer { text-align: center; padding: 1.5rem 1.25rem 2rem; font-size: 0.7rem; color: var(--color-text-mute); font-family: var(--font-mono); letter-spacing: 0.04em; } .app-footer a { color: var(--color-text-dim); text-decoration: underline; text-underline-offset: 0.2em; } .app-footer a:hover { color: var(--color-text); } /* ─── Theme toggle ─── */ .theme-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .theme-toggle button { background: transparent; color: var(--color-text-dim); border: 0; padding: 0.3rem 0.5rem; font-size: 0.7rem; font-family: var(--font-mono); letter-spacing: 0.04em; cursor: pointer; } .theme-toggle button + button { border-left: 1px solid var(--color-border); } .theme-toggle button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); } .theme-toggle button:hover:not([aria-pressed="true"]) { color: var(--color-text); }