/* App-local styles for Invoices. * * The app is built from @ecosystem/design components; what lives here is the * four shapes no existing component covers — a page heading with an action on * the end, a line editor that is a grid of inputs, a figures table, and a row * of stat tiles. * * Per packages/design/README.md this file may consume semantic tokens but must * not redefine any .ds-* component, and must not reach for a primitive ramp or * a raw value. * * This app's accent lives in @ecosystem/design — css/app-themes.css, keyed on * the `data-app` slug the shell puts on , along with every other app's. */ /* --- A page heading with one thing on the end ----------------------------- */ .inv-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-4); flex-wrap: wrap; } /* --- Lists ---------------------------------------------------------------- */ .inv-link { color: inherit; text-decoration: none; } .inv-link:hover { color: var(--ds-accent); text-decoration: underline; } /* Tabular figures, so a column of amounts lines up on the decimal point rather than jittering with the digits. The one place proportional numerals actively make a list harder to read. */ .inv-amount { font-variant-numeric: tabular-nums; font-weight: var(--ds-weight-semibold); white-space: nowrap; } /* A late invoice is the only row in this app that is worth colouring, and it gets an edge rather than a fill — a red row is an alarm, and half a client book being late is a normal week. */ .inv-row--late { box-shadow: inset 3px 0 0 0 var(--ds-danger); } /* --- The line editor ------------------------------------------------------ */ /* Description takes what is left; the four numeric columns are sized to their content so they stay aligned down the list. Below the breakpoint the grid collapses to one column per field, which is the only honest thing a five-column table can do on a phone. */ .inv-lines { display: flex; flex-direction: column; gap: var(--ds-space-2); } .inv-lines__head, .inv-line { display: grid; grid-template-columns: minmax(8rem, 1fr) 5rem 7rem 5rem 7rem 2.5rem; gap: var(--ds-space-2); align-items: center; } .inv-lines__head { padding-inline: var(--ds-space-1); } .inv-line__num { text-align: right; font-variant-numeric: tabular-nums; } .inv-line__total { text-align: right; font-variant-numeric: tabular-nums; color: var(--ds-text-muted); } .inv-editor__foot { margin-top: var(--ds-space-4); justify-content: space-between; } @media (max-width: 46rem) { .inv-lines__head { display: none; } .inv-line { grid-template-columns: 1fr 1fr 2.5rem; } /* The description spans the row it is the subject of. */ .inv-line > :first-child { grid-column: 1 / -1; } .inv-line__total { grid-column: 1 / 3; text-align: left; } } /* --- The figures on a document that has been sent ------------------------- */ .inv-table { width: 100%; border-collapse: collapse; } .inv-table th, .inv-table td { padding: var(--ds-space-2) var(--ds-space-1); text-align: left; vertical-align: top; } .inv-table thead th { border-bottom: var(--ds-border-width) solid var(--ds-border); font-size: var(--ds-text-sm); color: var(--ds-text-muted); font-weight: var(--ds-weight-medium); } .inv-table tbody td { border-bottom: var(--ds-border-width) solid var(--ds-border); } .inv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .inv-totals { margin-left: auto; margin-top: var(--ds-space-4); min-width: 16rem; display: flex; flex-direction: column; gap: var(--ds-space-1); } .inv-totals > div { display: flex; justify-content: space-between; gap: var(--ds-space-4); font-variant-numeric: tabular-nums; } .inv-totals__grand { font-weight: var(--ds-weight-semibold); border-top: var(--ds-border-width) solid var(--ds-border); padding-top: var(--ds-space-2); margin-top: var(--ds-space-1); } /* --- A document's own details --------------------------------------------- */ .inv-meta { display: grid; gap: var(--ds-space-2); margin-bottom: var(--ds-space-4); } .inv-meta > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--ds-space-3); align-items: start; } @media (max-width: 34rem) { .inv-meta > div { grid-template-columns: 1fr; gap: 0; } } .inv-actions { flex-wrap: wrap; } /* --- The money screen ----------------------------------------------------- */ .inv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--ds-space-4); } .inv-stat { display: flex; flex-direction: column; gap: var(--ds-space-1); padding: var(--ds-space-3); border-radius: var(--ds-radius-md); background: var(--ds-surface-sunken); } .inv-stat__value { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); font-variant-numeric: tabular-nums; } .inv-stat__label { font-size: var(--ds-text-sm); color: var(--ds-text-muted); } /* Only two tiles are ever coloured, and they are the two that mean something has to happen or has stopped having to: what is late, and what came in. */ .inv-stat--bad .inv-stat__value { color: var(--ds-danger); } .inv-stat--good .inv-stat__value { color: var(--ds-success); } /* --- Settings ------------------------------------------------------------- */ .inv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ds-space-4); } /* --- The clock ------------------------------------------------------------- A row rather than a card of its own shape: it sits at the top of the timesheet and has to read as part of it, not as a widget bolted above. */ .inv-timer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-4); } /* The one element in the app that changes while somebody watches it, so it is the one worth colouring. Tabular figures because it ticks — proportional numerals make the whole line jump when 9 becomes 10. */ .inv-timer--on { border-color: var(--ds-accent); } .inv-timer--on .ds-list__title { color: var(--ds-accent); font-variant-numeric: tabular-nums; font-size: var(--ds-text-xl); }