/* A marked-up paper (ADR 0072). The interface speaks Inter, people's words appear in Times, figures in JetBrains Mono. Red is what you did and what waits on you, pale yellow the highlighter, and nothing larger than a fingertip has depth. The highlighter is where you are and what is chosen: the nav's page and the chosen view, the chosen place, the row under the keys, the field in focus. A red asterisk after a name is what you changed, and Save carries one while a change is in hand (ADR 0104); a refused field is edged in red. Blue is the browser's, for links only (ADR 0093). */ :root { --ink: #111; --soft: #474743; --rule: #c9c9c9; --red: #a8261d; --hi: #fff7c4; --stroke: linear-gradient(transparent 14%, var(--hi) 14%, var(--hi) 86%, transparent 86%); --quote: "Times New Roman", Times, serif; --sans: Inter, InterVariable, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; /* the nav's type size, which a list's strip and every table's headings share */ --nav: 13px; --leader: #a5a5a0; --tear: #8f8f8a; --faint: #8a8a85; --aqua: var(--ink); --ease: cubic-bezier(.2,.8,.2,1); /* the side gutter, easing with the window from 12px on a phone to 30px at a desk; everything that bleeds to the edge bleeds by it */ --gutter: clamp(8px, 1.6vw, 16px); --stipple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23111' fill-opacity='0.2'/%3E%3C/svg%3E"); } /* the sheet */ html { background: #fff; } /* the nav and the bands bleed past the body's gutter by design; clipped here so the page never scrolls sideways, which a phone would zoom out to fit */ html { overflow-x: clip; } body { font: 14.5px/1.4 var(--sans); font-feature-settings: "cv11", "ss01"; color: var(--ink); background: #fff; max-width: 840px; margin: 0 auto; padding: 0 var(--gutter) 18px; min-height: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.10); } /* centred on the window's whole width, the scroll bar over its right margin, so nothing shifts when a page grows past the window */ body { position: relative; left: clamp(0px, (100vw - 100%) / 2, (100% - 840px) / 2); } ::selection { background: #fff0a0; } /* prose */ h1 { font: 700 23px/1.15 var(--sans); letter-spacing: -0.01em; margin: 0; } h2, legend { font: 650 13px var(--sans); margin: 14px 0 3px; padding: 0; } legend { margin-bottom: 6px; } h2.first { margin-top: 0; } /* a section heading is its word on the left and its count alone on the right; its acts stay beside the word, as the line they always were */ h2 { display: flex; align-items: baseline; } h2:has(> span.beside) { display: block; } h2 span { font: 400 11.5px var(--mono); color: var(--soft); margin-left: 6px; } h2 > span:not(.beside) { margin-left: auto; padding-left: 12px; white-space: nowrap; } h2 span a { font-family: var(--sans); } h2 progress { margin-left: 4px; } .byline { font-style: italic; font-size: 14px; margin: 1px 0 6px; } /* the crumbs are the page's only head (ADR 0115), the h1 at the nav's size: the earlier crumbs links, a record's own name the nav's current page, the purple word in the highlighter's pill */ h1.crumbs { font: 400 var(--nav)/1.4 var(--sans); letter-spacing: 0; margin: 2px 0 1px; } h1.crumbs a { color: LinkText; text-decoration: underline; } h1.crumbs a[aria-current] { background: var(--hi); color: #551a8b; box-shadow: 0 0 0 3px var(--hi); border-radius: 1px; } h1.crumbs .sep { color: var(--soft); margin: 0 4px; } /* a record inside another the nav does not reach names that one above its heading, small, in the link's colour (issue 0421) */ p.up { font: 12.5px/1.4 var(--sans); margin: 2px 0 -1px; } p.up a { color: LinkText; } /* one facts line under a list's crumbs, always one line high, so nothing under it moves from page to page */ .facts { font-size: 14px; line-height: 1.4; height: 1.4em; margin: 1px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .facts .all { font-size: 13px; } /* what a record's page refused, under its crumbs */ .lamps { font-size: 14px; margin: 1px 0 6px; } /* one size for every acts line, a list's and a record's (ADR 0111) */ .acts-row { font: 14px/1.4 var(--sans); margin: -3px 0 8px; } .abstract { font-size: 14px; margin: 6px 0 10px; text-align: justify; hyphens: auto; } .abstract b, .lab { font: 700 12.5px var(--sans); } .lab2 { font: 650 12.5px var(--sans); } .fn { font-size: 13px; line-height: 1.35; } small { font-size: 13.5px; line-height: 1.35; } a { text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; transition: text-decoration-thickness .12s, text-underline-offset .12s; } a:hover { text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; } sup { font-size: 10px; line-height: 0; } del { color: var(--soft); } ins { text-decoration: none; font-weight: 650; } mark { background: var(--stroke); padding: 0 2px; } address { font-style: normal; } kbd { padding: 0 5px; border-radius: 4px; background: linear-gradient(180deg, #fff, #ececea); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(0,0,0,.4), 0 1.5px 0 rgba(0,0,0,.22); } td.n, td time, a.id, kbd, .num { font: 12px/1.3 var(--mono); font-feature-settings: normal; letter-spacing: -0.01em; } .lamp { color: var(--red); white-space: nowrap; } /* a lamp that is a sentence of its paragraph wraps with it, so a refusal never runs past a phone's edge */ p > .lamp { white-space: normal; } /* a difference the merchant knows about is marked so, in the soft ink; it counts as passed until it changes or is forgotten */ .known { color: var(--soft); white-space: nowrap; } hr { border: 0; height: 1px; margin: 14px 0 4px; box-shadow: inset 0 0.5px 0 var(--ink); } /* a short page keeps its footer on the window's bottom edge, a long one after its last line */ body:has(> main) { display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; } body > main { flex: 1 0 auto; } footer { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; font: var(--nav) var(--sans); color: var(--soft); } /* the footer's acts are links as every other (issue 0422): no icons, LinkText underlined, wrapping onto a new line rather than running off the page; the version plain, in the figures' mono, and who is signed in plain words */ footer > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; } footer .ver { font: 11px var(--mono); letter-spacing: -0.01em; } footer .say-at { display: flex; } footer .act { color: LinkText; } footer .act.who { color: var(--soft); } footer .act.lamp { color: var(--red); } /* What's new while a line is unread: a dot of the link blue after its word (ADR 0157; lost with 0390's rewrite, back with 0422) */ footer .act.news .dot { display: inline-block; width: 6px; height: 6px; margin-left: 4px; vertical-align: 0.15em; border-radius: 50%; background: LinkText; } footer .act.news[aria-current] { color: #551a8b; background: var(--hi); box-shadow: 0 0 0 2px var(--hi); } footer button.act { all: unset; color: LinkText; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; cursor: pointer; } /* Feedback (issue 0154): the link after the version, its icon and word purple in the highlighter while its box is open, and the highlighter when it says it was sent */ footer .say-at a.open { color: #551a8b; background: var(--hi); box-shadow: 0 0 0 2px var(--hi); } footer .say-at .sent { color: var(--ink); background: var(--hi); box-shadow: 0 0 0 2px var(--hi); } /* What's new (ADR 0157): the changelog, days newest first; each day in the figures' mono at the left and its lines beside it: a kind, a sentence to her, where it lives */ main:has(> .day) { max-width: 720px; } .day { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; padding: 10px 0 12px; border-top: 1px solid var(--rule); } .day:first-of-type { border-top-color: var(--ink); } .day .when { margin: 3px 0 0; font: 11.5px var(--mono); color: var(--soft); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .day .new { font: 11px var(--sans); color: var(--ink); background: var(--hi); box-shadow: 0 0 0 2px var(--hi); } .day ul { list-style: none; margin: 0; padding: 0; } .day li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; padding: 3px 0; font-size: 14px; line-height: 1.45; } .day .kind { font-size: 12px; color: var(--soft); padding-top: 1px; } .day .kind.n { color: var(--ink); font-weight: 600; } .day li a.to { white-space: nowrap; font-size: 13px; } @media (max-width: 480px) { .day { grid-template-columns: minmax(0, 1fr); row-gap: 2px; } .day .when { flex-direction: row; } } dl { display: grid; grid-template-columns: 66px 1fr; row-gap: 4px; margin: 3px 0 8px; } dt { font: 11.5px/1.7 var(--sans); color: var(--soft); } dd { margin: 0; } /* navigation: links as the browser draws them, each on its own text edge and spaced by the gap, so a wrapped line starts in line with the shop's name (ADR 0107); where you are is in the highlighter; the nav scrolls with the page, it is not pinned */ nav { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; margin: 0 calc(-1 * var(--gutter)) 12px; padding: 7px var(--gutter) 6px; background: #fff; font: 12px var(--sans); box-shadow: inset 0 -0.5px 0 var(--ink); } nav a { font: var(--nav) var(--sans); color: LinkText; white-space: nowrap; } /* a section's screens are a second row under the first, in the same white, the rule under the two */ nav.first { margin-bottom: 0; padding-bottom: 6px; } nav.second { gap: 2px 16px; padding-top: 6px; padding-bottom: 7px; } /* Settings, the first row's last, stands at its right end, of whatever line it wraps to (issue 0419) */ nav:not(.second, .find-row) > a:last-child { margin-left: auto; } /* the current page stays a link, underlined, in the visited purple pinned, since the browser's varies (ADR 0101) */ nav a[aria-current], .beside a[aria-current], table.variants a[aria-current], thead th.sorted a, tr.heads td.sorted a, .on-table a[aria-current] { background: var(--hi); color: #551a8b; text-decoration: underline; } /* the nav's page and the chosen view are a shadow round the word as the seg draws it, so choosing a page or a view moves nothing */ nav a[aria-current], .beside a[aria-current], table.variants a[aria-current], thead th.sorted a, tr.heads td.sorted a, .on-table a[aria-current] { box-shadow: 0 0 0 3px var(--hi); border-radius: 1px; } /* the search is a blank on the paper, not a box: a dotted leader under what is typed, the highlighter while it is in hand (ADR 0107); a faint "/" at its right end is the key that puts it in hand, and words in it trade the key for a small × that clears them (issue 0128) */ nav .find { position: relative; margin-left: auto; flex: 1 1 60px; min-width: 60px; max-width: 190px; display: flex; align-items: baseline; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect y='1' width='1' height='1' fill='%23a5a5a0'/%3E%3C/svg%3E") left bottom / 1px 1px repeat-x; } nav .find:focus-within { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect y='1' width='1' height='1' fill='%23111'/%3E%3C/svg%3E") left bottom / 1px 1px repeat-x, var(--hi); } nav input[type=search] { all: unset; flex: 1 1 auto; min-width: 0; font: 12px var(--sans); color: var(--ink); padding: 1px 2px; } nav input[type=search]::placeholder { color: var(--faint); } nav input[type=search]:focus { box-shadow: none; } nav input[type=search]::-webkit-search-cancel-button { display: none; } nav .find .slash { flex: none; align-self: center; font: 10.5px/1 var(--mono); color: var(--faint); border-radius: 3px; padding: 1px 4px; box-shadow: inset 0 0 0 0.5px var(--leader); } nav .find .clear { all: unset; flex: none; padding: 0 1px 0 8px; font: 14px/1 var(--sans); color: var(--soft); cursor: pointer; } nav .find .clear:hover { color: var(--ink); } nav .find:focus-within .slash, nav .find:has(input:not(:placeholder-shown)) .slash, nav .find:has(input:placeholder-shown) .clear { display: none; } /* the box has a row of its own, the nav's last, as wide as the page (issue 0418) */ nav:not(.find-row) { margin-bottom: 0; } nav.find-row .find, nav.find-row .find:focus-within { flex: 1 1 100%; max-width: none; margin-left: 0; background: none; } /* the shop's name is the home's link, in the Times it was drawn in */ nav a.home { font: italic 16px var(--quote); } /* no drawn buttons (ADR 0099): every act is the browser's link, bold when it commits. Once a line is in hand Save carries the red asterisk at its shoulder, its underline kept (ADR 0104). Delete on its sheet is red. */ button { all: unset; font: inherit; color: LinkText; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; cursor: pointer; white-space: nowrap; } button.go, button.save { font-weight: 600; } button.danger { color: var(--red); text-decoration-color: var(--red); } /* one focus mark (issue 0239): a field takes the highlighter, every other stop the dotted ink line; important, as a control's own all: unset outranks it */ :is(a, button, summary, input[type=checkbox], [tabindex="0"]:not(.hit), .on-table.acting .pickone select):focus-visible, .seg label:has(:focus-visible) { outline: 1px dotted var(--ink) !important; outline-offset: 2px !important; } a:visited { color: LinkText; } .acts-row button + button { margin-left: 14px; } .acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 14px; } /* acts in two sizes (issue 0241): 14 px wherever a page closes on them; one inside a table row or a slip's line is the row's 13 px, as it is read as part of that line */ :is(td, tr.grp th, .receipt.slip .sum) :is(button:not(.fold, .hand, .pic, .chips *), a.act) { font-size: 13px; font-family: var(--sans); } /* an act drawn as a link is still a button, so it is sent as a form and never by following an address */ button.link, button.link:hover { all: unset; color: LinkText; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; cursor: pointer; } /* a record's page closes on its acts: the whole record's as words at the left, Save alone at the right; an act on one fact ends that fact's line */ .acts.foot { justify-content: space-between; align-items: baseline; } .acts.foot .acts-row { margin: 0; } /* the crumbs fill their line, and the stepper (ADR 0105), the acts and Save (ADR 0096) stand at their right; on a narrow page they wrap under the crumbs */ .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin-bottom: 8px; } .head h1 { flex: 1 1 auto; } .head .stepper { margin-left: auto; } .head .acts.foot { justify-content: flex-end; gap: 14px; } /* a record's neighbours in the list it was reached from, at the title's right (ADR 0105); on a narrow page they wrap under the title */ .stepper { font: 12.5px var(--sans); color: var(--soft); } /* its arrows are links named previous and next; an end with no neighbour is the arrow in the soft grey, not a link (ADR 0112) */ .stepper .end { color: var(--faint); } .receipt.slip .amt .act { margin-left: 8px; } /* fields come in five looks (issue 0242), each for one place, and the one being typed in takes the highlighter: the box, 12 px, a field on a form's own line (a new order, an address, a new code); the slip's field, bare in the slip's 12.5 px mono, a value typed where it is read on a slip; the underline, a 1 px dotted fill under a field in a table cell or a sentence, in that line's own type; her words, 15.5 px Times, what the site will say (a page's slots, a work's description, Feedback); the search, the nav's blank on its dotted leader. A chip's box types the next chip, in the chips' type. */ input, select, textarea { font-family: var(--sans); } input[type=text], input[type=search], input[type=email], select, .ship textarea { font: 12px var(--sans); color: var(--ink); padding: 3px 7px; border: 0; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.5); } /* a dropdown is drawn here, not by the browser, so Safari and Chrome show the same box: its arrow is the lists' chevron, small and soft */ select { appearance: none; -webkit-appearance: none; padding-right: 22px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpolyline points='1,1 5,5 9,1' fill='none' stroke='%23474743' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 7px center / 9px 6px no-repeat; } .ship textarea { display: block; width: 100%; box-sizing: border-box; line-height: 1.35; resize: vertical; } input[type=text] { box-sizing: border-box; max-width: 100%; } input:focus, select:focus, textarea:focus { outline: 0; } input[type=text]:focus, input[type=search]:focus, input[type=email]:focus, select:focus, .ship textarea:focus { background-color: var(--hi); box-shadow: inset 0 0 0 0.5px var(--ink); } fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; } .ship { display: grid; grid-template-columns: 62px 1fr; gap: 7px 0; align-items: center; margin: 0 0 10px; } .ship > span { font: 11.5px var(--sans); color: var(--soft); } .ship select, .ship input[type=text] { width: 100%; box-sizing: border-box; } /* a choice among places is words, the chosen one in the highlighter */ .seg { display: inline-flex; gap: 14px; } .seg label { flex: none; margin: 0; padding: 0 0 1px; text-align: left; font: var(--nav) var(--sans); color: LinkText; text-decoration: underline; cursor: pointer; } .seg label:has(:checked) { color: #551a8b; background: var(--hi); box-shadow: 0 0 0 3px var(--hi); border-radius: 1px; } .seg input { position: absolute; opacity: 0; pointer-events: none; } /* small things, made well: what you choose, fill or open may have a little depth */ /* one tick box for the whole site, drawn here so Chrome and Safari show the same: Safari's own box, 14 px, a 1.5 px grey line, 5 px corners; a tick is a soft red S, round at both ends, its long arm reaching the corner; part of a group ticked is a red dash */ input[type=checkbox], .receipt.slip input[type=checkbox] { appearance: none; -webkit-appearance: none; box-sizing: border-box; display: inline-block; flex: none; width: 14px; height: 14px; min-width: 0; max-width: none; padding: 0; border: 0; margin: 0 6px 0 0; vertical-align: -2px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1.5px #808080; position: relative; overflow: visible; cursor: pointer; } input[type=checkbox]:checked::after { content: ""; position: absolute; left: -1px; top: -5px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 11.2 C5.8 12.4 6.6 13.6 7.6 14.6 C9.2 11.4 11 8.4 15.2 5.6' fill='none' stroke='%23a8261d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; } input[type=checkbox]:indeterminate::after { content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 6.1px; height: 1.8px; border-radius: 1px; background: var(--red); } /* a two-state setting is one tick box named for the state that is on */ .tick { display: inline-flex; align-items: center; font: 13px var(--sans); color: var(--ink); cursor: pointer; } .tick input { margin-right: 7px; } progress, meter { appearance: none; height: 5px; width: 58px; vertical-align: 1px; border: 0; } progress::-webkit-progress-bar, meter::-webkit-meter-bar { height: 5px; border: 0; border-radius: 999px; background: #e9e9e6; box-shadow: inset 0 0.5px 1px rgba(0,0,0,.18); } progress::-webkit-progress-value { border-radius: 999px; background: var(--aqua); animation: fill .7s var(--ease) both; transform-origin: left; } meter::-webkit-meter-optimum-value { border-radius: 999px; background: linear-gradient(180deg, #7fbf74, #5aa552); } meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { border-radius: 999px; background: linear-gradient(180deg, #ecb85a, #dd9e36); } @keyframes fill { from { transform: scaleX(0); } } details { margin: 6px 0; interpolate-size: allow-keywords; } details::details-content { height: 0; overflow: clip; opacity: 0; transition: height .28s var(--ease), opacity .2s, content-visibility .28s allow-discrete; } details[open]::details-content { height: auto; opacity: 1; } summary { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; font: 12.5px var(--sans); list-style: none; cursor: pointer; user-select: none; } summary::-webkit-details-marker { display: none; } /* one disclosure mark (issue 0240): a summary opens on the lists' fold chevron, bare and soft, pointing down while open */ summary::before { content: ""; flex: none; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5l6.5 6.5L9 18.5' fill='none' stroke='%23474743' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .15s var(--ease); } details[open] > summary::before { transform: rotate(90deg); } /* tables: one grid per page. Fixed columns, groups headed inside the table with a count, a grey rule top and bottom as a receipt's, hairlines between a list's rows. */ table { border-collapse: collapse; width: 100%; font: 13px/1.3 var(--sans); font-feature-settings: normal; } th { text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: 0; color: var(--soft); padding: 3px 10px 3px 0; box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } :is(thead, tbody.heads) th { position: sticky; top: 0; z-index: 2; background: rgba(255,255,255,.94); font-size: var(--nav); } td { padding: 4px 10px 4px 0; vertical-align: middle; box-shadow: inset 0 -0.5px 0 var(--rule); } td, th, label, dd address { white-space: nowrap; } td.wrap, td.wrap .lamp { white-space: normal; } td.n, th.n { text-align: right; padding-left: 14px; padding-right: 0; } td.who { font: var(--nav) var(--sans); } q { font-family: var(--quote); } /* a heading sorts: a link in its own type, the sorted one carrying its arrow; a value that narrows is a link in its own ink, the one in force marked */ thead th a { color: inherit; text-decoration: none; } thead th a:hover { text-decoration: underline; } /* a list's one line on its table: the views at the left in the headings' type, over the top rule, which the strip carries so it stays when a phone drops the headings (ADR 0111); what makes a new thing at the right in the acts' size, wrapping under the views, still right, when the line is too short (ADR 0114) */ .on-table { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 14px; font: 500 var(--nav)/1.4 var(--sans); color: var(--soft); padding: 4px 0 4px; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--tear); } .on-table .views > span { margin-right: 3px; } .on-table > .makes { margin-left: auto; font: 400 var(--nav)/1.4 var(--sans); color: var(--ink); } .on-table > .makes a { color: LinkText; text-decoration: underline; padding: 0; } .on-table a { color: LinkText; text-decoration: underline; padding: 0 1px; } /* a list's strip is its table's first row (issues 0437, 0438): ink above and under, as tall as a row, its first word over the ticks or the first column's words */ table tr.bar > td { height: 34px; padding: 0; overflow: visible; box-shadow: none; } table tr.bar .on-table { flex-wrap: nowrap; align-items: center; box-sizing: border-box; min-height: 34px; padding: 0; box-shadow: inset 0 1.5px 0 var(--ink), inset 0 -1px 0 var(--ink); } table.works tr.bar .on-table { padding-left: 18px; } table.works.by-collection tr.bar .on-table, table.on-page.ticking tr.bar .on-table { padding-left: 19px; } table tr.bar .on-table.acting > .makes { align-self: center; } table tr.bar .on-table:has(.ask) { align-items: baseline; padding-block: 7px; } table :is(tr.bar ~ tr, tbody.bar ~ tbody.heads tr) > th { box-shadow: inset 0 -1px 0 var(--tear); } table.ledger tr.bar ~ tr > th.n { box-shadow: inset 0.5px 0 0 var(--rule), inset 0 -1px 0 var(--tear); } @media (hover: hover) { table :is(thead, tbody) tr.bar:hover { background: none; } } /* the view in force is marked as the nav's page is (the rule beside nav a[aria-current]) */ /* a one-click download stands under the closing rule of what it writes out, at the right */ .at-foot { font: 500 11.5px var(--sans); text-align: right; margin: 3px 0 0; } .at-foot + .fn { margin-top: 2px; } .receipt + .at-foot { margin-bottom: -4px; } #work .at-foot { margin: 4px 0 0; } #work .at-foot + h2, #work .at-foot + .receipt.slip.variants-none { margin-top: 22px; } a.in { color: inherit; text-decoration: none; } a.in:hover { text-decoration: underline; } a.in.on { background: var(--hi); } /* a cell's collection follows its medium after a soft word */ td .of { color: var(--soft); } td img { display: block; width: 24px; height: 24px; object-fit: contain; border-radius: 3px; background: #f4f4f1; } /* a work with no picture yet keeps its row's shape: an empty frame where the picture goes (ADR 0108) */ table.works td:nth-child(1 of :not(.t, .g)):empty::before, :is(table.works, table.on-page) :is(tr.notice, tr.banner) span.room.pic::before, table.stock td:nth-child(1 of :not(.t, .g)):empty::before { content: "" !important; display: block; box-sizing: border-box; width: 24px; height: 24px; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.25' y='.25' width='23.5' height='23.5' rx='2.75' fill='none' stroke='%23c9c9c9' stroke-width='.5' stroke-dasharray='2 1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } tbody tr { transition: background-color .12s; } @media (hover: hover) { tbody tr:hover { background: #f3f6fb; } } tr.grp th { border: 0; padding: 14px 0 3px; font: 600 12.5px var(--sans); color: var(--ink); box-shadow: inset 0 -1px 0 var(--tear); } tbody:first-of-type tr.grp th { padding-top: 8px; } /* a group's heading is a section heading inside its table: its word on the left, its count alone on the right in the small mono, then its acts */ tr.grp th span { float: right; font: 400 11.5px var(--mono); color: var(--soft); margin-left: 12px; } tr.grp th span a { font-family: var(--sans); } @media (hover: hover) { tr.grp:hover { background: none; } } /* grouped by collection, each group's title is a link at the column headings' weight and size, and the rows sit closer */ table.works.by-collection tr.grp th { font: 500 var(--nav) var(--sans); } table.works td { padding-top: 2px; padding-bottom: 2px; } /* a works heading's count, then a page's Bar and Index, each the admin's own checkbox she ticks there and then, then Add · Delete as words, every link's underline (issues 0393, 0394, 0399, 0424); the folded summary and gathers go, and the ticks' Save is for a browser with no script */ table.works tr.grp th > span:not(.g) small:not(.tk-n) { display: none; } table.works tr.grp th > span:not(.g) em.n { width: 26px; margin-right: 4px; font-style: normal; text-align: right; } table.works :is(tr.grp th, tr.notice td, tr.banner td) form.marks { display: contents; } @media (scripting: enabled) { table.works :is(tr.grp th, tr.notice td, tr.banner td) form.marks button.keep, table.on-page tr.banner button.keep { display: none; } } table.works tr.grp th label.on-col { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 30px; cursor: pointer; } table.works tr.grp th label.on-col input[type=checkbox] { margin: 0; } table.works tr.grp th label.on-col i { display: none; font: 400 12.5px var(--sans); font-style: normal; color: var(--soft); } table.works tr.grp th > span:not(.g) > span.page-acts { float: none; display: inline-flex; justify-content: flex-end; align-items: baseline; width: 112px; margin: 0; font: 400 var(--nav) var(--sans); color: var(--soft); white-space: nowrap; } table.works tr.grp th span.page-acts > :is(a, button) { font: 400 var(--nav) var(--sans); color: LinkText; } table.works tr.grp th span.page-acts > button.del::before { content: "·"; display: inline-block; margin: 0 6px; color: var(--soft); text-decoration: none; } /* over a phone a works heading is as tall as a work row, with no gap above it, its count, acts and marks on the title's line, the marks under their heads */ @media (min-width: 481px) { table.works tr.grp th, table.works.by-collection tr.grp th { padding: 0; line-height: 30px; vertical-align: middle; } table.works tr.grp th > span:not(.g) { display: inline-flex; align-items: center; height: 30px; } /* by page, Add · Delete stand in a 112 px column of their own at the row's end, the ticks under their heads before it (issues 0399, 0424) */ table.works.by-collection tr.grp th > span:not(.g) em.n { margin-right: 30px; } } /* a page's title gives way before its count and marks do, so its heading stays one line */ table.works.by-collection tr.grp th > a { display: inline-block; max-width: calc(100% - 393px); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } /* a group folds to its heading (issue 0182): the chevron at its left points down while open; folded, its rows go and a summary follows its count */ tr.grp th button.fold { all: unset; display: inline-block; width: 12px; height: 12px; margin: 0 6px 0 0; vertical-align: -1px; color: var(--soft); cursor: pointer; } tr.grp th button.fold svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s var(--ease); } tbody.folded tr.grp th button.fold svg { transform: none; } table tbody.folded tr:not(.grp) { display: none; } /* a group opened by hand: its rows come in together, folding is at once */ @keyframes open-rows { from { opacity: 0; transform: translateY(-4px); } } table tbody.opening tr:not(.grp) { animation: open-rows .15s var(--ease); } tr.grp th span small { display: none; font: 400 12px var(--sans); color: var(--soft); } tbody.folded tr.grp th span small { display: inline; } /* the catalog's Bar and Index columns: a page's ticks stand under the key row naming each (ADR 0134 rule 5), each word centred over its tick in its 50 px column; Page starts where the pages' names do, 6 px before the pictures' column; Works where the widest count does, the count's 30 px margin before Bar (issues 0398, 0399, 0424) */ table.works.by-collection tbody.heads th.on { padding-left: 0; padding-right: 0; text-align: center; } table.works.by-collection tbody.heads th.t + th { z-index: 4; text-indent: -6px; } table.works.by-collection tbody.heads th.works { text-align: right; padding-right: 30px; } table.works.by-collection tbody.heads th.works > span { display: inline-block; width: calc(var(--n) * 1ch); font: 400 11.5px var(--mono); text-align: left; } table.works.by-collection tbody.heads th.works > span > span { font: 500 var(--nav) var(--sans); } /* the heading row's first cell (ADR 0132 rule 2): one chevron at the groups' chevrons' place, down while every group is open, then the tick on the rows' line */ table.ticking :is(thead, tbody.heads) th.t button.fold { all: unset; display: inline-block; width: 12px; height: 12px; margin: 0 6px 0 0; vertical-align: -1px; color: var(--soft); cursor: pointer; } table.ticking :is(thead, tbody.heads) th.t button.fold svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s var(--ease); } table.ticking :is(thead, tbody.heads) th.t button.fold[aria-expanded="true"] svg { transform: rotate(90deg); } /* Works by collection and a Smart collection's Chosen (ADR 0132 rule 1): a row that moves begins with its six dots, under the groups' chevrons, the drag's start by mouse and by finger (0207); a row that cannot move has the cell empty; nothing in a row is selected by a held press */ td.g { padding: 0 !important; overflow: visible !important; } .hand { display: block; box-sizing: content-box; width: 8px; height: 12px; padding: 6px 9px 6px 2px; margin: -6px 0; color: var(--rule); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } .hand svg { display: block; width: 8px; height: 12px; fill: currentColor; } tr:hover .hand, tr.holding .hand { color: var(--soft); } /* on Works by page a heading stands on the rows' columns: its dots over theirs, its tick over theirs, then its chevron and title; the heading row's chevron too */ table.works.by-collection tr.grp th > span.g { display: inline-block; float: none; width: 19px; height: 12px; margin: 0; vertical-align: -1px; } table.works.by-collection tr.grp th label.tk { margin-right: 10px; } table.works.by-collection tbody.heads th.t { z-index: 3; padding-left: 19px; } table.works.by-collection tbody.heads th.t button.fold { position: absolute; left: 43px; top: 50%; margin: -6px 0 0; } /* a page inside another stands under it, its heading and its works' titles indented one step (ADR 0152 rule 6) */ table.by-collection tbody.inside tr.grp th button.fold { margin-left: 22px; } table.by-collection tbody.inside td.who { padding-left: 22px; } /* a page's works stand a step in, handle and all, the step they leave an even dot of the ink every 3 px, each row's rule running under it; its heading stays (issues 0396, 0397, 0440) */ table.works.by-collection col.g { width: 43px !important; } table.works.by-collection tr:not(.grp) > td.g { position: relative; padding-left: 24px !important; } table.works.by-collection tr:not(.grp) > td.g::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 0.5px no-repeat, #fff var(--stipple) 0 0 / 3px 3px; } .carry td.g::before { display: none; } /* an open group holding works of its own reads as one block: its heading ruled as a work is, its last row closing it in the tear's weight, under the step's stipple too; folded, or holding none of its own, its heading keeps the tear (issue 0400) */ table.works tbody:not(.folded, .drop-box):has(> tr:not(.grp, .heads, .adding, .gap, .bar)) > tr.grp > th { box-shadow: inset 0 -0.5px 0 var(--rule); } table.works tbody:not(.folded):has(> tr:not(.grp, .heads, .adding, .gap, .bar)) > tr:last-child > td { box-shadow: inset 0 -1px 0 var(--tear); } table.works tbody:not(.folded):has(> tr:not(.grp, .heads, .adding, .gap)) > tr.rulefirst:last-child > td { box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } table.works.by-collection tbody:not(.folded):has(> tr:not(.grp, .heads, .adding, .gap)) > tr:last-child > td.g::before { background: linear-gradient(var(--tear), var(--tear)) 0 100% / 100% 1px no-repeat, #fff var(--stipple) 0 0 / 3px 3px; } /* after a work's price, what its stock says in a slot of its own, so the prices keep their right edge and Price its place over them (issue 0400) */ table.works.trailed .price { padding-right: 50px; } table.works .price .trail { display: inline-block; box-sizing: border-box; width: 50px; margin-right: -50px; padding-left: 5px; text-align: left; font: 11.5px var(--sans); color: var(--soft); } table.works .price .trail.lamp { color: var(--red); } /* by page Price stands in Index's 50px, as wide as 999.99, and the stock's word goes under it, small enough that the row keeps its height (issue 0442) */ @media (min-width: 481px) { table.works.by-collection .price { padding-left: 4px; padding-right: 0; line-height: 12px; } table.works.by-collection .price .trail { display: block; width: auto; margin: 0; padding: 0; text-align: right; font-size: 10.5px; line-height: 11px; } } /* inside an open page, a row naming its works' columns on the same step; a figure's word in a box its widest figure's width, at their right (issue 0398) */ table.works.by-collection tr.heads td { height: 22px; padding-top: 0; padding-bottom: 0; color: var(--soft); overflow: visible; } table.works.by-collection tr.heads td.who { overflow: hidden; } table.works.by-collection tr.heads :is(td:not(.n), td > span > span) { font: 500 11px var(--sans); letter-spacing: 0; } /* a word wider than its figures ends at its column's edge rather than past it (issue 0417) */ table.works.by-collection tr.heads td > span { display: inline-block; width: calc(var(--n) * (1ch - 0.01em)); min-width: max-content; text-align: left; } table.works.by-collection tr.heads a { color: inherit; text-decoration: none; } table.works.by-collection tr.heads a:hover { text-decoration: underline; } @media (hover: hover) { table.works.by-collection :is(tbody tr.heads, tbody.heads tr):hover { background: none; } } /* a page's adding row is a work row: an empty frame where a picture stands, the title typed where a title stands, as wide as the Work column, underlined in the ink; what it suggests is a panel over the rows under it, so nothing moves (issue 0399) */ table.works.by-collection tr.adding td { overflow: visible; } tr.adding .addw.quick { position: relative; margin: 0; padding: 0; max-width: none; box-shadow: none; } tr.adding .addw .chips { padding: 0; } tr.adding .addw .chips .typing { background: none; border: 0; box-shadow: inset 0 -1px 0 var(--ink); } tr.adding .addw .chips .typing input { width: 0; min-width: 0; font: inherit; padding: 1px 0 2px; } tr.adding .sugg { box-sizing: border-box; position: absolute; z-index: 1; left: -6px; top: calc(100% + 6px); width: 600px; margin: 0; padding: 2px 6px 6px; background: #fff; border-radius: 3px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.14), 0 0 0 0.5px var(--rule); white-space: normal; } tr.holding, tr.holding *, :root.carrying, :root.carrying * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } :root.carrying, :root.carrying * { cursor: grabbing !important; } /* carried, the row's copy rides under the pointer, '+2' on it for the ticked it carries too; where it was closes, and a gap opens where it would land */ .carry { position: fixed; z-index: 6; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.12); pointer-events: none; } .carry table { margin: 0; border: 0 !important; box-shadow: none !important; } .carry td, .carry tr { border-bottom: 0 !important; box-shadow: none !important; } .carry > b { position: absolute; right: 8px; top: -9px; font: 500 11.5px/1 var(--mono); color: var(--ink); background: #fff; border: 1px solid var(--ink); border-radius: 2px; padding: 3px 5px; } tbody tr.gone, tbody.gone { display: none !important; } tr.gap { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; } tr.gap td { position: relative; padding: 0 !important; border: 0 !important; box-shadow: none !important; } tr.gap td::before { display: none !important; } /* the gap is drawn as the gallery's hole (rule below); the drop's group is ruled in ink over its heading (ADR 0130 rule 10); nothing yellow */ tbody.drop-box tr.grp th { box-shadow: inset 0 1.5px 0 var(--ink), inset 0 -0.5px 0 var(--ink); } /* a list's ticks (ADR 0130): the one box in a narrow first column; on a group's heading after the fold, before the title, its centre on the title's line */ table.ticking input[type=checkbox] { margin: 0; } label.tk { display: inline-block; position: relative; line-height: 0; } label.tk::before { content: ""; position: absolute; inset: -6px -8px; } table.ticking td.t, table.ticking th.t { padding-right: 0; overflow: visible; } table.works.ticking th.t { padding-left: 0; } tr.grp th label.tk { margin-right: 8px; } /* one colour, one meaning (rule 10): a ticked row takes a pale tint of the highlighter; the full band stays for the one row under the keys */ :root { --tick: #fffbe4; } table.ticking tr.ticked td { background: var(--tick); } @media (hover: hover) { table.ticking tr.ticked:hover { background: none; } } table.ticking tr.ticked.held td { background: var(--stroke); } /* the strip while rows are ticked (ADR 0132 rule 3): the count as a figure in ink, then the one picker of the acts, the browser's own list; the makes stay at the right, so the strip keeps its shape; the views come back when none is */ .on-table.acting { box-sizing: border-box; column-gap: 0; justify-content: flex-start; } .on-table.acting .views { display: contents; } .on-table.acting .cnt { color: var(--ink); margin-right: 0; } .on-table.acting .a { white-space: nowrap; margin: 0 0 0 .3em; } .on-table.acting > .makes { order: 2; margin-left: auto; padding-left: 14px; } .on-table.acting .pickone { display: inline-flex; align-items: baseline; gap: 4px; } .on-table.acting .pickone select { all: unset; font: inherit; color: LinkText; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; field-sizing: content; cursor: pointer; } .on-table.acting .pickone .chev { flex: none; width: 9px; height: 6px; fill: none; stroke: LinkText; stroke-width: 1.3; align-self: center; } .on-table.acting a.all { font-weight: 500; } .on-table:not(.acting) > .acts, .on-table.acting > .views:not(.acts) { display: none; } /* a strip with nothing but the acts keeps its one line, empty, while no row is ticked */ .on-table:not(.acting):not(:has(> :not(.acts)))::before { content: "\200b"; } /* after a drop or an act: the rows lit for a moment, and nothing said (ADR 0131); a refusal alone, one line in the red under the strip */ tr.moved td, tr.grp.moved th { animation: lit 2.6s ease-in both; } @keyframes lit { 0%, 55% { background: var(--hi); } } p.moved { font: 13px/1.5 var(--sans); color: var(--soft); margin: 4px 0; } p.moved.refused { color: var(--red); } /* after an act that can be taken back: what happened, said where the act was, lit a moment, its way back beside it (issue 0368) */ .acted { color: var(--soft); animation: lit 2.6s ease-in both; border-radius: 1px; } /* an act that cannot be taken back asks in its own place: the question in the red, as it waits on you, its answer beside it (ADR 0149) */ .ask { color: var(--red); } .ask button { margin-left: 12px; } .on-table.acting .ask { flex: 1 1 0; min-width: 0; white-space: normal; } @media (max-width: 480px) { table.works tr.gap td:only-child { grid-column: 1 / -1; grid-row: 1; align-self: stretch; } table.works.ticking tr.gap { padding-left: 0 !important; } } tr.none td { text-align: center; color: var(--soft); font: italic 15px var(--sans); padding: 26px 0 !important; } .dim, .dim a { color: #666; } tbody.dim td, tbody.dim td a { color: #6a6a66; } table.grid { table-layout: fixed; box-shadow: inset 0 -1px 0 var(--tear); } table.grid td { overflow: hidden; text-overflow: ellipsis; padding-top: 5px; padding-bottom: 5px; } /* over a phone, every list row is 30 px: a 24 px line, a thumbnail's height, 3 px above and below (issue 0448) */ @media (min-width: 481px) { table.grid tbody tr:not(.grp, .bar, .gap, .heads, .none) > td { height: 24px; padding-top: 3px; padding-bottom: 3px; } } /* an order's contents are one line (ADR 0113): a name gives way with an ellipsis down to a few letters, the second first; its "× n" and the count never do */ td.c { overflow: hidden; } td.c .one { display: flex; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; } td.c .it { display: contents; } td.c .nm { flex: 0 1 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; } td.c .it + .it .nm { flex-shrink: 1000; margin-left: 0.3em; } td.c .x { flex: none; white-space: pre; } td.c .cm { flex: none; } td.c .more { flex: none; margin-left: 0.45em; color: var(--soft); } /* a lamp after the contents stands on their line and is never cut */ td.c .one > .lamp { flex: none; margin-left: 0.45em; } table.checks tr:has(+ tr.more) td { box-shadow: none; } /* a check's example gives way before its act, which is never cut */ table.checks .ex { display: flex; } table.checks .ex > span:first-child { min-width: 2em; overflow: hidden; text-overflow: ellipsis; } table.checks .ex > :not(:first-child) { flex: none; margin-left: 0.3em; } table.grid td.who { font-size: var(--nav); } @media (hover: hover) { table.grid tbody tr:not(.grp):hover { background: #f7f7f5; } } /* while a row is carried, the rows it passes over take no hover colour (0224) */ @media (hover: hover) { :root.carrying tbody tr:hover, :root.carrying table.grid tbody tr:not(.grp):hover { background: none; } } /* the row under the keys is where you are, in the highlighter */ table.grid tr.held td { background: var(--stroke); } table.works td, table.pages td { white-space: nowrap; } /* a page's works, as the Works list draws them: each place a quiet figure, typed in where it stands; Take out on the row pointed at, or always on a touch screen */ table.on-page td { white-space: nowrap; padding-top: 3px; padding-bottom: 3px; } /* each row's place is a field no one sees, kept for the drop, the keys and Save; the row the keys hold is lit */ table.on-page td.im input[data-place] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } table.on-page tr:has(input[data-place]:focus) td { background: var(--hi); } table.on-page td.im img { display: block; width: 24px; height: 24px; object-fit: cover; border-radius: 2px; } table.on-page td.soft { color: var(--soft); } .cut { display: flex; min-width: 0; white-space: nowrap; container-type: inline-size; } .cut > a { flex: 0 1 auto; min-width: 3em; overflow: hidden; text-overflow: ellipsis; } .cut > i { flex: none; margin-left: 6px; font: 12px var(--sans); color: var(--soft); font-style: normal; } .cut > i.of { flex: 0 1000 auto; min-width: 0; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; } @container (max-width: 200px) { .cut > i.of { display: none; } } table.on-page.bundles td.im:empty::before { content: ""; display: block; width: 24px; height: 24px; border-radius: 2px; background: #f4f4f1; } table.on-page td.rm { text-align: right; } table.on-page td.rm button.link { font: 12px var(--sans); color: var(--soft); } table.on-page td.rm button.link:hover { color: var(--ink); } @media (hover: hover) { table.on-page td.rm button.link { visibility: hidden; } table.on-page tr:hover td.rm button.link, table.on-page td.rm button.link:focus-visible { visibility: visible; } } table.num td { padding-top: 4px; padding-bottom: 4px; } table.num td svg { display: block; } table.num td:nth-child(6 of :not(.t, .g)), table.num th:nth-child(6 of :not(.t, .g)) { padding-left: 14px; } table.num th:nth-child(6 of :not(.t, .g)) { white-space: nowrap; } /* the record of what happened: time, then the entry, newest first */ table.log { table-layout: fixed; box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } table.log, table.log td, table.log td.n { font: 12.5px/1.35 var(--mono); } table.log td.n { text-align: left; padding-left: 0; color: var(--soft); vertical-align: top; } table.log td { box-shadow: none; padding-top: 3px; padding-bottom: 3px; } table.log:not(.earlier) tbody tr:first-child td { padding-top: 6px; } table.log:not(.earlier) tbody tr:last-child td { padding-bottom: 6px; } table.log a { color: inherit; } table.log td:not(.n) { white-space: normal; overflow-wrap: anywhere; } /* the slip, from a receipt: label, dotted leader, value; dashed tear lines between parts; a grey rule top and bottom */ .receipt { font: 12.5px/1.35 var(--mono); padding: 4px 0 6px; box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } .receipt .line { display: grid; grid-template-columns: 18px 30px 1fr auto 62px; gap: 0 7px; align-items: center; padding: 5px 0; cursor: pointer; } .receipt .line img { display: block; width: 30px; height: 30px; object-fit: contain; border-radius: 3px; background: #f4f4f1; } .receipt .line:has(:checked) .what b { text-decoration: line-through; text-decoration-color: var(--soft); color: var(--soft); } .receipt .line .blank { display: block; width: 30px; height: 30px; border-radius: 3px; background: #f4f4f1; } .receipt .line .what i s { color: var(--soft); } .receipt .sum.owing { font-weight: 700; } .receipt.slip .sum .amt input.price { width: 9ch; text-align: right; } /* A bill's line takes a price as well as a count, and a line of her own its words where a title stands (bill-new-proposal.html). */ .receipt.bill .line { grid-template-columns: 18px 30px 1fr auto 70px; cursor: default; } .receipt.bill .line .q input { width: 4ch; text-align: right; } .receipt.bill .line .q input.price { width: 7ch; } .receipt.bill .line .what input { width: 96%; } .ship .acts input.price { width: 9ch; } .ship .row { display: flex; gap: 8px; align-items: center; } .ship .row input[type=text] { width: 6ch; } .ship .row input.price { width: 9ch; } td .due { color: var(--soft); } /* An ask's words, and its pictures as a row of squares that open each at full size (ask-proposal.html). */ .asked { font: 15px/1.45 var(--quote); margin: 4px 0 10px; } .pics-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; } .pics-row a { display: block; width: 104px; height: 104px; border-radius: 3px; background: #f4f4f1; overflow: hidden; } .pics-row img { width: 100%; height: 100%; object-fit: cover; display: block; } /* the refund's lines on its own page: a ticked line is refunded, an unticked one stays in the soft (issue 0368) */ .receipt.refund .line { grid-template-columns: 18px 30px 1fr 0 62px; } .receipt.refund .line:has(select) { grid-template-columns: 18px 30px 1fr auto 62px; } .receipt.refund .line:has(:checked) .what b { text-decoration: none; color: var(--ink); } .receipt.refund .line:not(:has(:checked)) { opacity: .55; } /* an item's name keeps to one line, cut before the quantity and the total, which keep their own room; its variant under it likewise */ .receipt .what { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .receipt .what b { font-weight: 700; } .receipt .what i { display: block; font-style: normal; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .receipt .q { color: var(--soft); white-space: nowrap; } .receipt .amt { text-align: right; white-space: nowrap; } .receipt .tear { border-top: 1px dashed #d2d2cd; margin: 5px 0; } .receipt .sum { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; } .receipt .sum .dots { flex: 1; border-bottom: 1px dotted #c4c4bf; transform: translateY(-3px); margin-right: 6px; } /* a slip's label stays on its one line and the value gives way: words wrap under themselves, an address is cut short */ .receipt .sum > span:first-child { flex: 0 1000 auto; min-width: 3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* issue 0352: a label in the soft ink, its value in full; a bold label, a total and a red line keep their own */ .receipt:not(.todo) .sum > span:first-child:not(.t, .lamp) { color: var(--soft); } .receipt .sum > span:first-child b, .receipt .sum.total > span:first-child { color: var(--ink); } .receipt .sum > .amt { min-width: 0; white-space: normal; overflow-wrap: anywhere; } .receipt .sum > .amt:has(> a:only-child) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .receipt .sum.total { font-weight: 700; font-size: 13.5px; padding: 3px 0; } /* a set sold as a bundle: its lines hang from the bundle's own line, ruled down the left like a brace on the page */ .receipt .set { margin: 3px 0; } .receipt .set .sum { padding: 3px 0 1px; } .receipt .set .q s { text-decoration-color: var(--soft); } /* a slip you can type on: the value is the field */ .receipt.slip .sum { cursor: text; padding: 2.5px 0; } .receipt.slip .dots { min-width: 12px; } .receipt.slip input { all: unset; font: inherit; text-align: right; field-sizing: content; min-width: 3ch; max-width: 70%; white-space: nowrap; } .receipt.slip input:not([type=checkbox]):focus, .receipt.slip textarea.one:focus, .receipt.slip select:focus, .receipt.slip .pickone select:focus { background: var(--hi); box-shadow: 0 0 0 2px var(--hi); } .receipt.slip input::placeholder, .receipt.slip textarea.one::placeholder { color: var(--faint); } /* an empty edition is open, said in full ink as the variant's own page says it; its count sold stands before it */ .receipt.slip input[name=edition]::placeholder { color: var(--ink); } .receipt.slip .sum .of { color: var(--soft); margin-right: -4px; } /* a long value's field wraps at the right, its label kept whole beside it */ .receipt.slip textarea.one { all: unset; font: inherit; text-align: right; field-sizing: content; flex: 0 1 auto; min-width: 3ch; white-space: pre-wrap; overflow-wrap: break-word; cursor: text; } .receipt.slip textarea.one:placeholder-shown { min-width: 12ch; } .receipt.slip .sum:has(> textarea.one) > span:first-child { flex-shrink: 0; } /* a field the browser filled wears the highlighter, not Safari's own yellow under it: one yellow on the slip */ .receipt.slip input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1000px var(--hi); box-shadow: inset 0 0 0 1000px var(--hi); -webkit-text-fill-color: var(--ink); } .receipt.slip input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 2px var(--hi), inset 0 0 0 1000px var(--hi); box-shadow: 0 0 0 2px var(--hi), inset 0 0 0 1000px var(--hi); } .receipt.slip input:placeholder-shown { min-width: 12ch; } .receipt.slip :is(input, textarea)[placeholder="–"]:placeholder-shown { min-width: 3ch; } /* the left-hand field of a slip line: a name typed where a label would be */ .receipt.slip input.lead { text-align: left; max-width: 55%; } .receipt.slip .sum .slash { margin-right: -6px; } .receipt.slip .sum .slash + input { text-align: left; min-width: 3ch; } .receipt.slip .sum.on input.lead { font-weight: 700; } /* a slip line with two fields on its right: the second is the shorter */ .receipt.slip .sum input + input { margin-left: 10px; } /* a page's record in the order a buyer meets the page (issue 0447): each part under a small bold line, two ticks to a row, Sharing folded to one line */ .receipt.slip .grp { font: 600 12.5px var(--sans); color: var(--ink); margin: 14px 0 4px; letter-spacing: .01em; } .receipt.slip .grp:first-child { margin-top: 2px; } /* two to a row, each pair that cannot fit side by side one to a row (issue 0451) */ .receipt.slip .ticks4 { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 2px; } .receipt.slip .ticks4 label { flex: 1 0 calc(50% - 5px); display: flex; gap: 7px; align-items: center; min-width: max-content; cursor: pointer; white-space: nowrap; } .receipt.slip .ticks4 input[type=checkbox] { margin: 0; } .receipt.slip .ticks4 label.lit { background: var(--stroke); margin: 0 -4px; padding: 0 4px; } .receipt.slip details.share { margin: 0; } .receipt.slip details.share > summary { display: flex; align-items: baseline; padding: 2.5px 0; font: inherit; } .receipt.slip details.share > summary::before { align-self: center; margin-right: 2px; } .receipt.slip details.share > summary .grp { margin: 0; } .receipt.slip details.share > summary .amt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a choice on the slip is its one value, underlined, the others a click away; it never wraps */ .receipt.slip select.one { appearance: none; -webkit-appearance: none; flex: none; border: 0; border-bottom: 1px solid var(--leader); border-radius: 0; background: none; font: inherit; color: var(--ink); padding: 0 0 1px; text-align: right; text-align-last: right; field-sizing: content; min-width: 0; white-space: nowrap; } .receipt.slip .sum > select.one { max-width: 70%; } .receipt.slip .sum > .amt.two { display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; } .receipt.slip .sum > .amt.two .of { color: var(--faint); margin: 0; } /* a few choices on one line, wrapping to the right under the label when they run long */ .receipt.slip .sum > .amt.seg { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; } .receipt.slip .sum > .amt.seg .of { color: var(--soft); margin: 0 -6px 0 6px; font: 12.5px var(--mono); } .receipt.slip .sum > .amt.seg .of:first-child { margin-left: 0; } .receipt.slip .sum.inner > span:first-child, .receipt.slip .sum:has(> select.one) > span:first-child { flex-shrink: 0; } .receipt.slip .sum.faint input::placeholder { color: var(--faint); } .receipt.slip .sum .amt.as-page { color: var(--faint); } /* a field the server refused is edged in red under a red label */ .receipt.slip input.refused, table.variants input.refused { background: #fff; box-shadow: inset 0 0 0 1px var(--red); } /* a changed line carries a bold red asterisk after its name, inside the line, until Save keeps it; Save carries one at its shoulder (ADR 0104) */ .sum.changed > span:first-child, .slot.changed > span:first-child, .line.changed .what > b { justify-self: start; } .sum.changed > span:first-child::after, .slot.changed > span:first-child::after, .line.changed .what > b::after, figure.own.changed figcaption > b:first-child::after, figure.desc.changed figcaption > b:first-child::after { content: "*"; font: 700 1.15em/0 var(--sans); color: var(--red); margin-left: 3px; vertical-align: -0.1em; } /* a changed row's asterisk follows the name it links, outside the link's underline */ tr.changed td.v > a:first-child::after { content: "*"; display: inline-block; font: 700 1.15em/0 var(--sans); color: var(--red); margin-left: 3px; vertical-align: -0.1em; } /* Save is a word in faint ink until a line is in hand (ADR 0107) */ button.save:disabled { color: var(--faint); text-decoration: none; cursor: default; } button.save.lit { position: relative; } button.save.lit::after { content: "*"; position: absolute; right: -8px; top: -5px; font: 700 16px/1 var(--sans); color: var(--red); pointer-events: none; } /* an act in flight: its buttons wait, quiet, until the answer lands */ button[disabled].htmx-request, form.htmx-request button { opacity: 0.5; cursor: wait; } .receipt.slip select { all: unset; font: inherit; text-align: right; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect y='1' width='1' height='1' fill='%23a5a5a0'/%3E%3C/svg%3E") left bottom / 1px 1px repeat-x; } .receipt.slip select { max-width: 100%; text-overflow: ellipsis; } /* the Club tab's Gift comes with (issue 0332): the menu as wide as the piece chosen, so its label stands whole beside a long list of pieces */ .receipt.slip select.fits { field-sizing: content; min-width: 0; } /* an empty value on a record's slip is a faint dash */ .receipt .sum > span:first-child:not(:empty) ~ .amt:empty::after { content: "–"; color: var(--faint); } .receipt .none, .receipt.slip select:has(option[value=""]:checked) { color: var(--faint); } .receipt .sum > .amt address { white-space: normal; } .receipt q { font: 14.5px/1.3 var(--quote); } .receipt .prose.refused { background: #fff; box-shadow: inset 0 0 0 1px var(--red); } /* an order's shipping status, one short line under its slip's tear; the stock part red only when the place it ships from cannot give it */ .receipt .where { padding: 2px 0; color: var(--soft); } .receipt .where b { font-weight: 400; color: var(--red); } /* the ship acts: one line at the acts' size, under the slip; where they do not fit they wrap flush left, spaced by the gap, never indented */ .ship-acts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 6px 0 0; } .acts-row.ship-acts > * { margin-left: 0; } /* a two-state line of a slip: its tick box stands where the value would */ .receipt.slip input[hidden] { display: none; } .receipt.prices i { font-style: normal; font-weight: 400; color: var(--soft); } .receipt.prices .sum.on { background: var(--stroke); margin: 0 -4px; padding-left: 4px; padding-right: 4px; } /* options: the right side is the values, each removable */ .receipt.opts .sum { align-items: center; padding: 3px 0; gap: 8px; } .receipt.opts input.oname { all: unset; width: 52px; font: 700 12.5px var(--mono); flex: none; text-align: left; } .receipt.opts .chips { flex: 1; justify-content: flex-start; font: 12px var(--mono); } .receipt.opts .chips b { padding: 0 2px 0 7px; gap: 2px; font-weight: 500; cursor: grab; background: #fff; } .receipt.opts .chips b.on { background: var(--hi); box-shadow: inset 0 0 0 0.5px #b9a94a; } .receipt.opts .chips button { all: unset; cursor: pointer; padding: 0 4px; color: var(--soft); font: 13px var(--sans); } .receipt.opts .chips button:hover { color: var(--ink); } .receipt.opts input.addv { all: unset; width: 44px; font: 12px var(--mono); text-align: left; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect y='1' width='1' height='1' fill='%23a5a5a0'/%3E%3C/svg%3E") left bottom / 1px 1px repeat-x; } .receipt.opts input.addv:focus { background: var(--hi); width: 80px; } /* a slip of things to do */ .receipt.todo .sum { padding: 4px 0; font: 13px var(--sans); } .receipt.todo .amt { font: 12px var(--mono); color: var(--soft); } .receipt.todo .done { color: var(--soft); } .receipt.todo .done span:first-child { text-decoration: line-through; } /* the card, from a stock card: date, entry, ruled number columns, rows kept apart by space as the record's, a closing line under a tear with a double rule */ table.ledger { table-layout: fixed; font: 12px/1.35 var(--mono); box-shadow: inset 0 -1px 0 var(--tear); } /* the top rule is the headings', as the table's own would be painted over by their sticky background */ table.ledger th { font-weight: 500; box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } table.ledger td, table.ledger th { padding-top: 3px; padding-bottom: 3px; } table.ledger td { box-shadow: none; } table.ledger td { padding-right: 8px; overflow: hidden; text-overflow: ellipsis; } table.ledger td button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } table.ledger th { overflow: hidden; text-overflow: ellipsis; } table.ledger td.n, table.ledger th.n { text-align: right; padding-left: 6px; padding-right: 4px; box-shadow: inset 0.5px 0 0 var(--rule); } table.ledger th.n { box-shadow: inset 0.5px 0 0 var(--rule), inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } table.ledger td.d { color: var(--soft); } table.ledger td.out { color: var(--red); } table.ledger tr.bal td { font-weight: 700; border-top: 1px dashed #d2d2cd; } table.ledger tr.bal td.n:last-child { border-bottom: 3px double var(--tear); } /* a variant made to order has no count at any place: one cell across the place columns says so, in the hand the counts use */ table.ledger td.to-order { text-align: center; color: var(--soft); white-space: nowrap; } /* variants: the card's form, one row per thing she sells */ table.variants td.im { padding: 2px 0; } table.variants td.im img { width: 24px; height: 24px; margin: 0; } /* a name is cut short on its one line, never wrapped; the sum's label stays whole, running on into the empty cell beside it */ table.variants td.v { font: 13px var(--sans); max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.variants tr.bal td { overflow: visible; white-space: nowrap; } table.variants td.v i { font: 11.5px var(--mono); color: var(--soft); margin-left: 4px; } table.variants input { all: unset; width: 100%; text-align: right; font: 12px var(--mono); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect y='1' width='1' height='1' fill='%23a5a5a0'/%3E%3C/svg%3E") left bottom / 1px 1px repeat-x; } table.variants input:focus { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect y='1' width='1' height='1' fill='%23111'/%3E%3C/svg%3E") left bottom / 1px 1px repeat-x, var(--hi); } /* a variant being added is a row in hand: its name is typed where names are read */ table.variants td.v input { text-align: left; font: 13px var(--sans); } table.variants tr.new td { background: var(--stroke); } /* the add row stands last among the variants, soft so it reads as a blank line, not one of them */ table.variants tr.add td.v a { color: var(--soft); font-size: 12.5px; } table.variants tr.new td.im { background: none; } table.variants tr.out td, table.variants tr.out a, table.variants tr.out input { color: var(--faint); } table.variants tr.out img { opacity: .5; } @media (hover: hover) { table.variants tr:not(.bal):hover td { background: #f6f6f3; } } table.variants tr.bal td { font: 500 12px var(--sans); } table.variants tr.bal td.n { font: 700 12px var(--mono); border-bottom: 3px double var(--tear); } table.variants tr.bal td.n:empty { box-shadow: none; } /* a work's variants in the receipt's look (issue 0354): with none, one line of a slip; in use, no rules down the figures, the rows apart by space */ .receipt.slip.variants-none { margin-top: 14px; } .receipt.slip.variants-none .sum { cursor: default; } .receipt.slip.variants-none .amt .none { color: var(--faint); } .receipt.slip.variants-none .amt a { margin-left: 14px; font: 13px var(--sans); } #work table.ledger.variants td.n, #work table.ledger.variants th.n { box-shadow: none; } #work table.ledger.variants th.n { box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); padding-right: 0; } #work table.ledger.variants td { padding-top: 4px; padding-bottom: 4px; } #work table.ledger.variants td.n { font-variant-numeric: tabular-nums; padding-left: 4px; padding-right: 0; } #work table.ledger.variants td.n input { background: none; } #work table.ledger.variants td.n input:focus { background: var(--hi); } @media (max-width: 480px) { #work table.ledger.variants td.n, #work table.ledger.variants th.n { padding-left: 12px; } } /* the matrix: what the options multiply to */ table.matrix td.ck { padding: 0; } table.matrix td.ck input { all: revert; margin: 0; width: 13px; height: 13px; vertical-align: -2px; } table.matrix td.o { font: 700 12px var(--mono); } table.matrix tr.top td { box-shadow: inset 0 0.5px 0 var(--tear), inset 0 -0.5px 0 var(--rule); } table.matrix tbody tr:first-child td { box-shadow: inset 0 -0.5px 0 var(--rule); } table.matrix tr.new td { background: var(--stroke); } table.matrix tr.new td.o, table.matrix tr.new td.ck { background: none; } table.matrix td.v i { color: var(--soft); } table.matrix input::placeholder { color: var(--faint); } /* two columns: on a work, its pictures hold the left */ .cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: start; } .cols > div { min-width: 0; } .cols.work { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: 24px; } .cols.half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cols.work h2 { margin-top: 16px; } .cols.work h2.first { margin-top: 0; } .cols.work .acts { margin: 8px 0 0; } figure { margin: 0 0 8px; } figcaption { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font: 14.5px var(--sans); margin-top: 3px; } /* a work's pictures, as the Crate app drew them: the main spans two by two and the others wrap after it in the site's order, the add tile last. A tile is its own grip; its tag and its two marks are always shown, and i turns it over to its back, where its description is typed. */ .gallery { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; grid-auto-flow: dense; } .tile { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: #f4f4f1; box-shadow: 0 0 0 0.5px rgba(0,0,0,.14); } button.tile { padding: 0; border: 0; font: inherit; cursor: pointer; } .gallery[data-carry] .tile:not(.add, .sending, .back) { cursor: grab; user-select: none; -webkit-user-select: none; } .tile.feat { grid-column: span 2; grid-row: span 2; } .tile img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-touch-callout: none; } .tile .tag { position: absolute; left: 6px; top: 6px; font: 11px var(--mono); color: var(--ink); background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 999px; } .tile .marks { position: absolute; z-index: 1; right: 5px; top: 5px; display: flex; gap: 3px; } .tile .marks button { all: unset; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 999px; background: rgba(255,255,255,.72); font: 500 10px/1 var(--sans); color: var(--soft); cursor: pointer; } .tile .marks button:hover, .tile .marks a:hover { color: var(--ink); background: #fff; } .tile .flip { display: none; position: absolute; inset: 0; background: #fff; padding: 8px; font: 11px var(--mono); color: var(--soft); } .tile.back img, .tile.back .tag { visibility: hidden; } .tile.back .flip { display: flex; flex-direction: column; gap: 2px; } .tile .flip b { color: var(--ink); font: 600 11px var(--sans); } .tile .flip small { font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile .flip hr { border: 0; height: 1px; margin: 3px 0; box-shadow: inset 0 0.5px 0 var(--rule); } .tile .flip textarea { all: unset; font: 12px var(--sans); color: var(--ink); line-height: 1.3; flex: 1; min-height: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .tile .flip textarea.refused { box-shadow: inset 0 0 0 1px var(--red); } .tile.sending img { filter: grayscale(1); opacity: .6; } .tile.sending progress { position: absolute; left: 8px; right: 8px; bottom: 8px; width: auto; } .tile.sending progress::-webkit-progress-value { animation: none; } .tile.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; outline: 1px dashed var(--tear); background: #fff; color: var(--soft); cursor: pointer; } .tile.add span { font: 300 28px var(--sans); line-height: 1; } /* files dragged over the page light the add tile; a tile carried rides above the others, its slot the dither behind it */ /* the add tile's words wrap inside it, and from 481 to 700 px, where it is too narrow for them, it is a strip under the pictures */ .gallery .tile.add.media { padding: 10px 8px; box-sizing: border-box; white-space: normal; } .gallery .tile.add.media small { line-height: 1.25; } @media (min-width: 481px) and (max-width: 700px) { .gallery .tile.add.media { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; gap: 10px; padding: 9px 8px; white-space: nowrap; } .gallery .tile.add.media span { font-size: 18px; } } .gallery.over .tile.add { outline: 1px solid var(--ink); background: var(--hi); color: var(--ink); } .tile.carried { z-index: 2; box-shadow: 0 0 0 0.5px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.28); cursor: grabbing; } .gallery .hole, tr.gap .hole { position: absolute; inset: 0; border-radius: 4px; background: #fff var(--stipple) 0 0 / 3px 3px; box-shadow: 0 0 0 0.5px rgba(0,0,0,.14); pointer-events: none; } /* by page a work's hole starts at its handle, the stipple's step left out (issue 0407) */ table.works.by-collection tr.gap .hole { left: 24px; } @media (max-width: 480px) { table.works.by-collection tr.gap .hole { left: 16px; } } /* without script the files are chosen in the browser's own field, under the gallery; with it, the add tile and a drop are the script's */ @media (scripting: enabled) { .gallery + input[type=file] { display: none; } } /* a variant's picture: its own, else the work's main, large under its name; the work's others are plain prints under it, the one tapped becoming its own */ figure.own { margin: 0; } figure.own img { width: 100%; display: block; background: #f4f4f1; border-radius: 4px; } figure.own figcaption { font: 12px var(--mono); color: var(--soft); margin-top: 6px; text-align: right; } figure.own figcaption b { color: var(--ink); font-weight: 600; font-family: var(--sans); font-size: 12.5px; float: left; } .others { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .others button { all: unset; display: block; width: 56px; height: 56px; cursor: pointer; } .others img { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; display: block; background: #f4f4f1; } .others button.on img { box-shadow: 0 0 0 3px var(--hi); } .others[hidden] { display: none; } /* a row or group the box's words leave out goes, whatever a phone's grid draws rows as (issue 0420) */ table.grid [data-gone] { display: none !important; } .others img { box-shadow: 0 0 0 0.5px rgba(0,0,0,.14); } /* on the work page a row's picture is a button, and the prints open in a row of their own under it (tr.prints: .pick is the slot's picture row) */ table.variants td.im button.pic { all: unset; display: block; width: 24px; height: 24px; cursor: pointer; } table.variants tr.prints td { padding: 6px 0 8px; overflow: visible; white-space: nowrap; box-shadow: inset 0 -0.5px 0 var(--rule); } table.variants tr.prints .others { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 0; } table.variants tr.prints .others img { width: 44px; height: 44px; margin: 0; cursor: pointer; } table.variants tr.prints .others img.on { box-shadow: 0 0 0 3px var(--hi); } @media (hover: hover) { table.variants tr.prints:hover td { background: none; } } .cols.work figure.own ~ h2 { margin-top: 18px; } /* the variants under it: the one on the page is the link marked current, in the pill as the nav's page is; a stopped one says so small after its name */ table.variants small { color: var(--soft); font: 11.5px var(--sans); margin-left: 6px; } /* a page's slots: the label, then the value as it will read on the site */ .slots { box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } .slot { display: grid; grid-template-columns: 76px 1fr; gap: 2px 8px; align-items: start; padding: 7px 4px; margin: 0 -4px; box-shadow: inset 0 -0.5px 0 var(--rule); } .slot:last-child { box-shadow: none; } /* the slot in hand follows focus (admin.client.js), so its band is the focus's highlighter and its field draws none of its own */ .slot.on { background: var(--stroke); } .slot > span:first-child { font: 11.5px/1.9 var(--sans); color: var(--soft); } .slot > span:last-child { font: 13px/1.9 var(--sans); } .slot small { grid-column: 2; font: 11.5px var(--sans); color: var(--soft); } .slot input[type=text], .slot textarea { all: unset; font: 15.5px/1.35 var(--quote); width: 100%; box-sizing: border-box; white-space: pre-wrap; } .slot textarea { min-height: 7.2em; } .slot > input[type=text] { grid-column: 2; } .slot span input { margin-right: 4px; } .pick { display: flex; gap: 9px; align-items: center; font: 12px/1.45 var(--sans); } .pick img { width: 54px; height: 40px; object-fit: cover; border-radius: 2px; } .chips { display: flex; flex-wrap: wrap; gap: 4px 5px; align-items: center; font: 12.5px var(--sans); } .chips b { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 2px; font-weight: 500; border-radius: 4px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,.32); } .chips img { width: 18px; height: 18px; object-fit: contain; } .live { display: flex; justify-content: center; padding: 14px 0; background: #e9e9e6; box-shadow: inset 0 1.5px 0 var(--ink), inset 0 -1.5px 0 var(--ink); } /* a stand-in for her site inside the slot editor; the build shows the real page here */ .site { width: 230px; background: #f8f4ec; color: #2a241c; font: 11px/1.4 Inter, sans-serif; padding: 0 12px 12px; box-shadow: 0 1px 4px rgba(0,0,0,.18); } .site .s-nav { display: flex; justify-content: space-between; padding: 9px 0 8px; font-weight: 650; } .site .s-nav span { font-weight: 400; opacity: .7; } .site > img { display: block; width: calc(100% + 24px); height: 120px; margin: 0 -12px; object-fit: cover; } .site .s-h { font: 600 17px/1.2 Inter, sans-serif; margin: 10px -3px 6px; padding: 1px 3px; } .site .s-h.held { background: var(--hi); box-shadow: 0 0 0 1.5px #d9c96a; } .site .s-p { margin: 0 0 6px; } .site .s-w { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 9px 0 8px; } .site .s-w img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; } .site .s-c { margin: 0; text-decoration: underline; } /* a page as a record (ADR 0110): its one picture stands where a work's main stands, its description under it, the tile beside it replacing it */ .tile.add small { font: 11px var(--sans); } figure.desc { margin: 6px 0 0; } figure.desc figcaption { display: block; font: 12px var(--mono); color: var(--soft); text-align: right; margin: 0 0 2px; } figure.desc figcaption b { color: var(--ink); font: 600 12.5px var(--sans); float: left; } figure.desc textarea { all: unset; display: block; width: 100%; box-sizing: border-box; font: 15.5px/1.35 var(--quote); white-space: pre-wrap; padding: 4px 0 6px; field-sizing: content; box-shadow: inset 0 0.5px 0 var(--rule), inset 0 -1.5px 0 var(--ink); } figure.desc textarea:focus { background: var(--hi); } /* a line whose value stands under it: prose's first lines, typed where they stand, whole while in hand; a works slot's chips at the right */ .receipt .sum.wrap { flex-wrap: wrap; } .receipt .sum.wrap > .prose, .receipt .sum.wrap > .chips { flex-basis: 100%; } .receipt .prose { all: unset; box-sizing: border-box; font: inherit; padding: 1px 0 4px 2ch; color: var(--ink); white-space: pre-wrap; field-sizing: content; max-height: 4.05em; overflow: hidden; cursor: text; } .receipt .prose:focus { background: var(--hi); max-height: none; } .receipt .prose.whole { max-height: none; } .receipt .prose.blank { height: 0; padding-block: 0; } .receipt .sum.wrap + p.hint { cursor: text; } /* a work's Description: its first paragraph flush with the labels, cut on an ellipsis at its third line; its pages' chips on the Pages line */ .receipt .peek { flex-basis: 100%; padding: 1px 0 0; margin-bottom: 4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-wrap; cursor: text; } .receipt .sum.wrap > textarea.prose[hidden] { display: none; } .receipt .sum.wrap .amt a.whole { font: inherit; } .receipt .sum.told > .prose { padding-left: 0; } .receipt .sum.wrap.pages { flex-wrap: nowrap; } .receipt .sum.wrap.pages > .chips { flex: 0 1 auto; flex-basis: auto; padding: 0; } /* where a trimmed picture stays in view (issue 0276): two short numbers on its slip line; the picture whole under a ring on the point, which a tap or a drag moves; the picture as its page trims it, under that */ .receipt.slip .sum.focus .amt input { min-width: 2ch; max-width: 3ch; text-align: right; } .focus-pick { position: relative; display: block; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 0.5px rgba(0,0,0,.14); } .focus-pick img { display: block; width: 100%; height: auto; -webkit-user-drag: none; pointer-events: none; } .focus-pick .mark { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink), inset 0 0 0 1.5px var(--ink); pointer-events: none; } .focus-pick .mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px #fff; } .focus-seen { display: block; width: 100%; max-width: 420px; height: auto; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(0,0,0,.14); } .receipt .chips { justify-content: flex-end; padding: 2px 0 3px; font: 12px var(--sans); } .receipt .chips b { gap: 4px; } .receipt .chips input[hidden] { display: none; } .receipt .chips b button { all: unset; cursor: pointer; color: var(--soft); padding-left: 2px; } .receipt .chips b button:hover { color: var(--red); } /* sections: the variants table's shape, a row's acts at its end; the row in hand carries the highlighter's band and its fields open in a row under it */ table.sections td.im .glyph { display: block; width: 24px; height: 24px; border-radius: 3px; background: #f4f4f1; font: 20px/30px var(--quote); text-align: center; color: var(--soft); } table.sections tr:not(.add) td.v a { color: inherit; text-decoration: none; } table.sections td.v .soft { color: var(--soft); font-size: 13px; } table.sections td.im img { width: 24px; height: 24px; object-fit: contain; border-radius: 3px; background: #f4f4f1; display: block; } table.sections td.out { text-align: right; padding-right: 0; } /* Site's two lists: short, numbered, a name and its kind, moved by its arrows; the table under them names a fixed page and each row's kind in soft ink */ .lists { margin: 6px 0 22px; } ol.ord { margin: 0; padding: 0; list-style: none; counter-reset: o; box-shadow: inset 0 1px 0 var(--tear); } ol.ord li { counter-increment: o; display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 14px; box-shadow: inset 0 -0.5px 0 var(--rule); } ol.ord li::before { content: counter(o); font: 12px var(--mono); color: var(--soft); min-width: 14px; } ol.ord li i, table.grid td.who i { font: 12px var(--sans); color: var(--soft); font-style: normal; } table.grid td.who i { margin-left: 6px; } ol.ord li .lamp { font-size: 12.5px; white-space: normal; } ol.ord li .lamp small { font-size: 12px; margin-left: 6px; } table.grid td.kind { color: var(--soft); } /* the record's note under a tick that does more than itself; a line a tick changed with it is lit */ .receipt .says { font: 12.5px/1.4 var(--sans); padding: 2px 0 5px 12px; margin: 1px 0 4px; box-shadow: inset 1.5px 0 0 var(--ink); } .receipt .says .lamp { white-space: normal; } .receipt .says.held { font: 12px/1.35 var(--mono); color: var(--soft) !important; text-align: right; padding: 0 0 3px; margin: -1px 0 0; box-shadow: none; } .receipt .sum.lit { background: var(--stroke); margin: 0 -4px; padding-left: 4px; padding-right: 4px; } table.sections td.mv, ol.ord .mv { margin-left: auto; text-align: right; padding-right: 0; white-space: nowrap; } table.sections td.mv button, ol.ord .mv button { all: unset; display: inline-block; min-width: 20px; height: 20px; text-align: center; font: 13px/20px var(--sans); color: var(--ink); cursor: pointer; border-radius: 3px; } table.sections td.mv button:hover, ol.ord .mv button:hover { background: #ebebe7; } table.sections td.mv button:disabled, ol.ord .mv button:disabled { color: #c2c2bd; cursor: default; background: none; } table.sections tr.on td { background: var(--stroke); } table.sections tr.on td.im { background: none; } table.sections tr.fields td { padding: 2px 0 10px 34px; white-space: normal; overflow: visible; } @media (hover: hover) { table.sections tr.fields:hover td { background: none; } } table.sections tr.fields .receipt { border-top-width: 0.75px; border-bottom-width: 0.75px; } table.sections tr.add td.v { overflow: visible; } table.sections tr.add.open td.v { color: var(--soft); font-size: 12.5px; } table.sections tr.add.open td.v button { all: unset; color: LinkText; text-decoration: underline; cursor: pointer; } table.sections tr.add.open td { background: none; white-space: normal; } /* Add a section (ADR 0127): one slip, three ways, each a line with its box and its Add */ .addw .soft { color: var(--soft); font-size: 13px; } .addw .way { display: flex; align-items: center; gap: 8px; padding: 5px 0 4px; font-size: 14px; color: var(--ink); box-shadow: inset 0 -0.5px 0 var(--rule); } .addw .way:last-child { box-shadow: none; } .addw .way .k { flex: none; width: 104px; } .addw .way .chips { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; padding: 0; } .addw .way .chips .typing { flex: 1 1 120px; display: flex; border-bottom: 1px solid var(--ink); background: none; } .addw .way .chips .typing:focus-within { background: var(--hi); } .addw .way .chips .typing input { min-width: 0; } @media (max-width: 480px) { table.sections td.mv button { min-width: 24px; height: 24px; line-height: 24px; } table.sections tr.fields td { padding-left: 0; } } /* signing in: the sheet without its edge */ .signin { max-width: 340px; margin: 12vh auto 0; } .signin h1 { font-family: var(--quote); font-weight: normal; font-size: 30px; letter-spacing: 0; } body:has(.signin) { box-shadow: none; } /* the home (ADR 0118): what needs her as a slip of lines; the four figures over their thirty days; the takings chart, a wide drawing and a phone's, in the data hue alone, the reading line ink and context warm grey; best sellers ranked with share bars; the rest of the shop a line each */ h2.part { margin: 26px 0 6px; } h2.part.first { margin-top: 18px; } .needs, .rest { padding: 3px 0; box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } .needs .it, .rest .it { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font: 14px/1.4 var(--sans); } .needs .it + .it, .rest .it + .it { box-shadow: inset 0 0.5px 0 var(--rule); } .needs .it > :first-child { flex: 0 1 auto; min-width: 0; } .needs .dots, .rest .dots { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--leader); transform: translateY(-4px); } .needs .amt { font: 12px var(--mono); color: var(--soft); white-space: nowrap; } .heroes2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } .heroes2 > div { padding: 12px 16px; border-left: 1px dashed var(--leader); min-width: 0; } .heroes2 > div:first-child { border-left: 0; padding-left: 0; } .heroes2 > div:last-child { padding-right: 0; } .heroes2 span { display: block; font: 12px var(--sans); color: var(--soft); } .heroes2 b { display: block; font: 500 32px/1.15 var(--mono); letter-spacing: -0.035em; margin: 5px 0 3px; } .heroes2 b.none { font-weight: 400; color: var(--faint); } .heroes2 .dl { display: block; font: 12px var(--mono); font-style: normal; color: var(--ink); } .heroes2 .dl::after { content: " on the 30 days before"; font-family: var(--sans); } .heroes2 > div:last-child .dl::after, .heroes2 .dl.bare::after { content: ""; } .spark-line { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; } figure.takings-fig { margin: 0; padding-top: 10px; } svg.fig { display: block; width: 100%; height: auto; overflow: visible; --lit: #005a52; } svg.fig.narrow { display: none; } svg.fig .lab { font: 600 10.5px var(--mono); fill: #111; } svg.fig .ax { font: 10px var(--mono); fill: #8a8a85; } svg.fig .ax.now { fill: var(--ink); font-weight: 700; } svg.fig .lab.soft { fill: #6a6a66; font-weight: 400; } svg.fig .nohit, svg.fig text { pointer-events: none; } svg.fig .guide { opacity: 0; stroke-width: 1; } .hit { outline: none; } .hit:hover .guide, .hit:focus .guide { opacity: .45; } .hit:hover .col, .hit:focus .col { fill: var(--lit); } .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 12px var(--sans); color: var(--soft); margin: 0 0 4px; } .legend i { display: inline-block; vertical-align: 1px; margin-right: 5px; } .legend .k-col { width: 8px; height: 11px; border-radius: 2px 2px 0 0; vertical-align: -1px; background: #89bfb7; } .legend .k-col.full { background: #2a857b; } .legend .k-line { width: 16px; height: 2px; border-radius: 1px; background: var(--ink); } .legend .k-line.thin { height: 1.5px; background: #a59d95; } .cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; font: 13px/1.4 var(--sans); color: var(--soft); margin: 8px 0 0; } .cap > span { flex: 1 1 300px; } details.as-table { flex: none; font-size: 12.5px; } details.as-table[open] { flex-basis: 100%; } details.as-table table { width: 280px; margin-top: 6px; } ol.sellers { list-style: none; margin: 0; padding: 0; box-shadow: inset 0 -1px 0 var(--tear); } ol.sellers li { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) 190px 72px; gap: 0 12px; align-items: center; padding: 7px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } ol.sellers li:last-child { box-shadow: none; } ol.sellers .rk { font: 12px var(--mono); color: var(--soft); text-align: right; } ol.sellers img, ol.sellers .im { width: 44px; height: 44px; object-fit: contain; border-radius: 3px; background: #f4f4f1; display: block; } ol.sellers .nm { min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ol.sellers .nm i { display: block; font: 12px var(--sans); font-style: normal; color: var(--soft); } ol.sellers .sh { display: flex; align-items: center; gap: 8px; } ol.sellers .bar { display: block; width: 140px; height: 8px; border-radius: 4px; flex: none; overflow: hidden; background: #d6eeea; } ol.sellers .bar i { display: block; height: 100%; border-radius: 4px; background: #2a857b; } ol.sellers .sh b { font: 400 12px var(--mono); color: var(--soft); width: 3.2em; text-align: right; flex: none; } ol.sellers .tk { font: 13px var(--mono); text-align: right; } .rest { margin-top: 26px; } .rest .it { padding: 5px 0; } .rest .it > a:first-child { flex: none; width: 64px; } .rest .amt { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font: 12.5px var(--mono); color: var(--soft); } @media (max-width: 800px) { .heroes2 b { font-size: 26px; } ol.sellers li { grid-template-columns: 20px 40px minmax(0, 1fr) 150px 64px; gap: 0 10px; } ol.sellers img, ol.sellers .im { width: 40px; height: 40px; } ol.sellers .bar { width: 100px; } } @media (max-width: 480px) { svg.fig.wide { display: none; } svg.fig.narrow { display: block; } .heroes2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .heroes2 > div { padding: 10px 0 10px 12px; } .heroes2 > div:nth-child(odd) { border-left: 0; padding-left: 0; padding-right: 12px; } .heroes2 > div:nth-child(n+3) { border-top: 1px dashed var(--leader); } .heroes2 > div:last-child { padding-right: 0; } .heroes2 .dl::after { content: " on the last 30"; } .heroes2 b { font-size: 24px; } .needs .it > :first-child { white-space: normal; } ol.sellers li { grid-template-columns: 16px 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; } ol.sellers .rk { grid-row: 1 / 3; } ol.sellers img, ol.sellers .im { grid-row: 1 / 3; width: 44px; height: 44px; } ol.sellers .nm { grid-column: 3; grid-row: 1; font-size: 14.5px; } ol.sellers .tk { grid-column: 4; grid-row: 1; align-self: start; padding-top: 2px; } ol.sellers .sh { grid-column: 3 / 5; grid-row: 2; } ol.sellers .bar { width: auto; flex: 1; } .rest .it > a:first-child { width: 48px; } } svg.spark { vertical-align: -1px; margin-right: 6px; } svg.spark rect { fill: var(--ink); } svg.spark rect:hover { fill: #3f6eb0; } #tip { position: absolute; z-index: 30; pointer-events: none; font: 11.5px var(--mono); background: #111; color: #fff; padding: 2px 6px; border-radius: 3px; white-space: nowrap; } #tip.soft { background: #fff; color: var(--ink); border: 1px solid #d6d6d1; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 3px 7px 4px; line-height: 1.3; } #tip.soft b { display: block; font: 600 12.5px var(--mono); } #tip.soft span { display: block; font: 11px var(--mono); color: var(--soft); } /* a refused field is edged in red wherever it stands, not only in a slip or the variants table */ input.refused, select.refused, textarea.refused { background: #fff; box-shadow: inset 0 0 0 1px var(--red); } label:has(> .refused) > span:first-child { color: var(--red); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* on paper: the sheet alone. What you operate stays on the screen; what was written is printed, in ink. */ @media print { @page { margin: 14mm 16mm; } html { font-size: 11pt; } body, body:has(> main) { display: block; min-height: 0; max-width: none; padding: 0; box-shadow: none; } nav, .acts, .marks, .screen, details, kbd, footer > span:last-child { display: none; } a { color: inherit; text-decoration: none; } thead th { position: static; } input[type=text], select { box-shadow: none; padding-left: 0; } mark, .slot.on, table.grid tr.held td, table.matrix tr.new td, .receipt.prices .sum.on { background: none; } mark { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; } .lamp, table.ledger td.out { color: inherit; font-weight: 700; } tr, .receipt .line, .receipt .sum, section { break-inside: avoid; } } /* her admin's type is one size at every desk width, the smaller the narrow window had, so nothing changes size as the window crosses 800 px */ nav a.home { font-size: 15px; } :root { --nav: 12.5px; } h1 { font-size: 20px; } h2, legend { font-size: 12px; } small { font-size: 13px; } dt, th, .ship > span, .at-foot { font-size: 11px; } table { font-size: 12.5px; } td.n, td time, a.id { font-size: 11.5px; } table.ledger { font-size: 11.5px; } .receipt, table.log, table.log td, table.log td.n { font-size: 12px; } dl { font-size: 14.5px; } /* narrow windows keep both columns: everything tightens, nothing stacks */ @media (max-width: 800px) { body { padding-bottom: 14px; } nav { padding-top: 6px; padding-bottom: 5px; } nav.find-row { margin-bottom: 10px; } :is(thead, tbody.heads) th { position: static; } table.works.by-collection tbody.heads :is(th.t, th.t + th) { position: relative; } dl { grid-template-columns: 52px 1fr; } .cols { grid-template-columns: 1.22fr 1fr; gap: 18px; } .cols.work { gap: 18px; } td, th { padding-right: 5px; } td.n, th.n { padding-left: 4px; } table.orders colgroup col:nth-child(4 of :not(.t, .g)) { width: 20% !important; } table.works:not(.by-collection) colgroup col:nth-child(4 of :not(.t, .g)) { width: 9% !important; } .receipt .line { grid-template-columns: 16px 28px 1fr auto 56px; gap: 0 6px; } .receipt .line img { width: 28px; height: 28px; } .receipt .line .blank { width: 28px; height: 28px; } .receipt.bill .line { grid-template-columns: 16px 28px 1fr auto 60px; } select { max-width: 100%; } .ship { grid-template-columns: 54px 1fr; gap: 6px 0; } meter, progress { width: 40px; } } @media (max-width: 640px) { nav { font-size: 11px; } dl { grid-template-columns: 44px 1fr; } .receipt, table.log, table.log td, table.log td.n { font-size: 11.5px; } } /* the phone: one column, and an order row becomes two lines. Nothing is dropped. */ @media (max-width: 480px) { body { padding-bottom: 12px; } /* the nav's box is the only search, so the phone keeps it, on a line of its own under the links; its panel hangs edge to edge from the nav's rule */ nav { position: relative; } nav .find { position: static; flex: 1 1 100%; max-width: none; margin-left: 0; margin-top: 3px; } nav input[type=search] { font-size: 13px; padding: 3px 2px; } /* the second row stays one line under the search, scrolled sideways when it is longer; its padding keeps the highlighter inside what scrolls */ nav.first { padding-bottom: 6px; } nav.second { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 6px; } nav.second::-webkit-scrollbar { display: none; } :root { --nav: 13px; } .head .stepper { margin-left: 0; } /* on a phone the facts line is two lines high, always */ .facts { height: 2.8em; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .head .acts.foot { margin-left: auto; } /* a phone drops the headings, so the first group's heading stands right under the strip's rule */ .at-foot { font-size: 12.5px; } .on-table { padding: 6px 0 5px; } .at-foot { margin-top: 6px; } h1 { font-size: 22px; } dl { font-size: 15.5px; grid-template-columns: 62px 1fr; } .cols, .cols.work { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; } .gallery { margin-bottom: 10px; } .cols:has(> div > section) > div { display: contents; } .cols section { order: var(--n); } .receipt, table.log, table.log td, table.log td.n { font-size: 12.5px; } input[type=text], input[type=search], input[type=email], select, .ship textarea { font-size: 14px; } td img, table.works td:nth-child(1 of :not(.t, .g)):empty::before, table.stock td:nth-child(1 of :not(.t, .g)):empty::before { width: 26px !important; height: 26px !important; } table.orders, table.orders tbody { display: block; } table.orders thead > tr:not(.bar), table.orders colgroup { display: none; } table.orders tr.grp, table.orders tr.grp th { display: block; } table.orders tr:not(.grp) { display: grid; grid-template-columns: 44px 1fr auto; gap: 0 6px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } table.orders tr:not(.grp) td { border: 0 !important; box-shadow: none !important; padding: 0; overflow: visible; min-width: 0; } table.orders td:nth-child(1 of :not(.t, .g)) { grid-column: 1; } table.orders td:nth-child(2 of :not(.t, .g)) { grid-column: 2; overflow: hidden; text-overflow: ellipsis; } table.orders td:nth-child(3 of :not(.t, .g)) { grid-column: 1 / 3; grid-row: 2; font-size: 12.5px; color: var(--soft); } table.orders td:nth-child(4 of :not(.t, .g)) { grid-column: 1 / 4; grid-row: 3; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; } table.orders td:nth-child(4 of :not(.t, .g)):empty { display: none; } table.orders td:nth-child(5 of :not(.t, .g)) { grid-column: 3; grid-row: 2; } table.orders td:nth-child(6 of :not(.t, .g)) { grid-column: 3; grid-row: 1; } table.orders tr.held { background: var(--hi); margin: 0 -4px; padding: 6px 4px !important; } table.orders tr.held td { background: none !important; } table.orders td.c { overflow: hidden !important; min-width: 0; } table.orders td.c .more { color: var(--ink); } /* a ticked list's tick stands at the row's left, out of the grid, 44 px to the finger; the cells after it stand where they stood */ table.ticking tr:not(.grp) { position: relative; padding-left: 28px !important; } table.ticking td.t { position: absolute !important; left: 0; top: 50%; transform: translateY(-50%); padding: 0 !important; } table.works.ticking td.t, table.works.ticking th.t { padding-left: 0 !important; } table.ticking td.t label.tk::before { inset: -15px -8px -15px -6px; } /* a row that moves: its six dots at the row's left edge, 44 px tall to the finger, the tick beside them under the group's tick */ .hand { padding: 16px 9px 16px 2px; margin: -16px 0; color: var(--soft); } table.works.ticking tr:not(.grp):has(> td.g) { padding-left: 43px !important; } table.works.ticking td.g { position: absolute !important; left: 0; top: 0; bottom: 0; width: 19px; display: flex; align-items: center; } table.works.ticking tr:has(> td.g) td.t { left: 19px; } /* by page, a work's step in is 16 px of the stipple */ table.works.by-collection.ticking tr:not(.grp):has(> td.g) { padding-left: 59px !important; } table.works.by-collection.ticking tr:not(.grp) > td.g { padding-left: 16px !important; } table.works.by-collection.ticking tr:has(> td.g) td.t { left: 35px; } table.works.by-collection.ticking tr:not(.grp) > td.g::before { width: 16px; } /* the adding row's title runs to the row's end and its panel is the row's width */ table.works.by-collection tr.adding td.who { grid-column: 2 / -1; overflow: visible !important; } table.works.by-collection tr.adding :is(td.who, .addw.quick) { position: static; } table.works.by-collection tr.adding .sugg { left: 0; right: 0; top: 100%; width: auto; } /* ticked, the makes keep the foot of the strip's held height, where the views' second line put them */ .on-table.acting > .makes { align-self: flex-end; } /* the heading row keeps one line of its own, the fold toggle and the tick, the column words dropped */ table.works.ticking:not(.search) :is(thead, tbody.heads) { display: block; } table.works.ticking:not(.search) :is(thead, tbody.heads) tr { display: block; padding: 0 !important; box-shadow: inset 0 -1px 0 var(--tear); } table.works.ticking:not(.search) :is(thead, tbody.heads) th { display: none; } table.works.ticking:not(.search) :is(thead, tbody.heads) th.t { display: block; border: 0; box-shadow: none; padding: 5px 0 4px; position: static; background: none; } table.works.by-collection.ticking:not(.search) tbody.heads th.t { position: relative; padding-left: 19px !important; } table.ticking tr.ticked { background: var(--tick); } table.ticking tr.ticked td { background: none; } } /* a narrow window short of the phone has no room for the medium: its column steps aside before the others crowd it (issue 0401); by page it spans the figures' own columns and keeps its room down to the phone, a page inside another clipping its Work as its titles are (issue 0403) */ @media (min-width: 481px) and (max-width: 760px) { table.works:not(.by-collection) .m { display: none; } } /* the phone: a work row and a stock row become lines, as an order row does. Nothing is dropped; the place a number belongs to is said before it. */ @media (max-width: 480px) { table.works, table.works tbody, table.stock, table.stock tbody { display: block; } table.works thead > tr:not(.bar), table.works colgroup, table.stock thead > tr:not(.bar), table.stock colgroup { display: none; } table.works.by-collection tr.heads { display: none; } /* where a list's table is drawn as lines its first row is a line too, one, as tall as a phone's row; the heads' row under it stays hidden */ :is(table.orders, table.works, table.stock, table.ledger.book, table.search, table.members, table.discounts, table.customers, table.trash) thead:has(> tr.bar) { display: block; } :is(table.orders, table.works, table.stock, table.ledger.book, table.search, table.members, table.discounts, table.customers, table.trash) :is(tr.bar, tr.bar > td) { display: block; height: auto; padding: 0 !important; box-shadow: none !important; } table tr.bar .on-table { min-height: 40px; } table.on-page.ticking tr.bar .on-table { padding-left: 0; } table.works tr.grp, table.works tr.grp th, table.stock tr.grp, table.stock tr.grp th { display: block; } /* a heading is one line (issue 0393): its name gives way, cut with …, a Smart page's words first; each tick has its word beside it, as there are no heads, and a page's name too long to share its line with them keeps the line, its count, ticks and Add · Delete going under it at the right, the name never wider than the line less the dots, tick and chevron before it (61 px, 83 inside a page) (issue 0424) */ table.works tr.grp th { display: flex; align-items: center; padding: 7px 0 6px !important; } table.works.by-collection tr.grp th { flex-wrap: wrap; } table.works.by-collection tr.grp th > a { max-width: calc(100% - 61px); } table.works.by-collection tbody.inside tr.grp th > a { max-width: calc(100% - 83px); } table.works tr.grp th > :is(span.g, label.tk, button.fold) { flex: none; } table.works tr.grp th > a, table.works.by-collection tr.grp th > a { flex: 0 1 auto; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.works tr.grp th > em.by { flex: 1 1 0; min-width: 0; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.works tr.grp th > span:not(.g) { float: none; flex: none; display: flex; align-items: center; margin: 0 0 0 auto; padding-left: 6px; } table.works tr.grp th label.on-col { width: auto; margin-left: 10px; gap: 4px; } table.works tr.grp th label.on-col i { display: inline; } table.works tr.grp th > span:not(.g) > span.page-acts { width: auto; margin-left: 10px; } /* a page's adding row is a work row's grid too, which would show it when hidden */ table.works tr.adding[hidden] { display: none; } table.works tr:not(.grp), table.stock tr:not(.grp) { display: grid; grid-template-columns: 34px 1fr auto auto auto; gap: 0 8px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } table.works tr:not(.grp) td, table.stock tr:not(.grp) td { border: 0 !important; box-shadow: none !important; padding: 0; overflow: visible; white-space: nowrap; } table.works td:nth-child(1 of :not(.t, .g)), table.stock td:nth-child(1 of :not(.t, .g)) { grid-row: 1 / 4; align-self: center; } table.works td:nth-child(2 of :not(.t, .g)), table.stock td:nth-child(2 of :not(.t, .g)) { grid-column: 2 / 5; grid-row: 1; overflow: hidden !important; text-overflow: ellipsis; } table.works td:nth-child(3 of :not(.t, .g)) { grid-column: 2 / 6; grid-row: 2; font-size: 12.5px; color: var(--soft); overflow: hidden !important; text-overflow: ellipsis; } table.works td:nth-child(4 of :not(.t, .g)) { grid-column: 2; grid-row: 3; font-size: 12.5px; color: var(--soft); text-align: left; } table.works td:nth-child(5 of :not(.t, .g)) { grid-column: 5; grid-row: 1; font-weight: 700; } table.works td:nth-child(6 of :not(.t, .g)) { grid-column: 5; grid-row: 3; font-size: 12.5px; } table.works td:nth-child(6 of :not(.t, .g)):not(:empty)::before { content: "sold "; color: var(--soft); } /* the stock's word follows the price on its line, in the row's type */ table.works.trailed .price { padding-right: 0; } table.works .price .trail { width: auto; margin-right: 0; padding-left: 5px; font: 400 12.5px var(--sans); } table.stock td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--soft); overflow: hidden !important; text-overflow: ellipsis; } table.stock td:nth-child(4 of :not(.t, .g)), table.stock td:nth-child(5 of :not(.t, .g)), table.stock td:nth-child(6 of :not(.t, .g)) { grid-row: 2; font-size: 12.5px; } table.stock td:nth-child(4 of :not(.t, .g)) { grid-column: 3; } table.stock td:nth-child(5 of :not(.t, .g)) { grid-column: 4; } table.stock td:nth-child(6 of :not(.t, .g)) { grid-column: 5; } table.stock td:nth-child(4 of :not(.t, .g)):not(:empty):not(.to-order)::before { content: "BKK "; color: var(--soft); } table.stock td:nth-child(5 of :not(.t, .g)):not(:empty):not(.to-order)::before { content: "LA "; color: var(--soft); } table.stock td:nth-child(6 of :not(.t, .g)):not(:empty)::before { content: "a week "; color: var(--soft); } table.stock td:nth-child(7 of :not(.t, .g)) { grid-column: 2 / 6; grid-row: 3; font-size: 12.5px; text-align: left; } table.stock td:nth-child(7 of :not(.t, .g)):empty { display: none; } table.stock td.to-order { grid-column: 3 / 5; grid-row: 2; text-align: left; } /* a row's highlighter is one band: the row is a grid and its cells patches, so the row paints and its cells do not */ table.works tr.held, table.stock tr.held, table.ticking tr.ticked.held { background: var(--stroke); } table.works tr.held td, table.stock tr.held td, table.ticking tr.ticked.held td { background: none; } tr.moved { animation: lit 2.6s ease-in both; } tr.moved td, tr.grp.moved th { animation: none; } table.works tbody:not(.folded):has(> tr:not(.grp, .heads, .adding, .gap, .bar)) > tr:last-child { box-shadow: inset 0 -1px 0 var(--tear); } } @media (max-width: 480px) { /* a stock row made to order has one cell fewer, so the cells after it stand where their columns would */ table.stock tr:has(td.to-order) td:nth-child(5 of :not(.t, .g)) { grid-column: 5; grid-row: 2; font-size: 12.5px; } table.stock tr:has(td.to-order) td:nth-child(5 of :not(.t, .g)):not(:empty)::before { content: "a week "; color: var(--soft); } table.stock tr:has(td.to-order) td:nth-child(6 of :not(.t, .g)) { grid-column: 2 / 6; grid-row: 3; font-size: 12.5px; text-align: left; } table.stock tr:has(td.to-order) td:nth-child(6 of :not(.t, .g)):empty { display: none; } /* a ledger's columns size to their words on a phone, and an entry wraps rather than being cut */ table.ledger { table-layout: auto; } table.ledger colgroup { display: none; } table.ledger td, table.ledger th { white-space: normal; overflow: visible; } table.ledger td.n, table.ledger th.n, table.ledger td.d, table.ledger th:first-child { width: 1%; white-space: nowrap; } /* an order's contents take what is left and stay on their line */ table.ledger td.c { width: 100%; max-width: 0; white-space: nowrap; overflow: hidden; } /* the name takes what the other columns leave, and is cut there */ table.variants td.v { width: 100%; } /* the picture's column is sized by its content here, so the button grows with the 30px picture and keeps a gap before the name */ table.variants td.im { padding-right: 8px; } table.variants td.im button.pic { width: 30px; height: 30px; } } /* the phone: an entry of Money's book becomes two lines: what it is and what came in or went out, then its date, its reference and the balance after it */ @media (max-width: 480px) { table.ledger.book, table.ledger.book tbody { display: block; } table.ledger.book thead > tr:not(.bar), table.ledger.book colgroup { display: none; } table.ledger.book tr { display: grid; grid-template-columns: auto 1fr auto auto; gap: 0 8px; align-items: baseline; padding: 4px 0; box-shadow: none; } table.ledger.book td { border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto; max-width: none; white-space: nowrap; overflow: visible; } table.ledger.book td:nth-child(2) { grid-column: 1 / 3; grid-row: 1; white-space: normal; } table.ledger.book td:nth-child(4) { grid-column: 3; grid-row: 1; } table.ledger.book td:nth-child(5) { grid-column: 4; grid-row: 1; } table.ledger.book td:nth-child(4):has(+ td:empty) { grid-column: 3 / 5; justify-self: end; } table.ledger.book td:nth-child(1) { grid-column: 1; grid-row: 2; } table.ledger.book td:nth-child(3) { grid-column: 2; grid-row: 2; color: var(--soft); overflow: hidden; text-overflow: ellipsis; } table.ledger.book td:nth-child(6) { grid-column: 3 / 5; grid-row: 2; justify-self: end; } table.ledger.book td:nth-child(4):not(:empty)::before { content: "in "; color: var(--soft); font-weight: 400; } table.ledger.book td:nth-child(5):not(:empty)::before { content: "out "; color: var(--soft); font-weight: 400; } table.ledger.book td:nth-child(6):not(:empty)::before { content: "balance "; color: var(--soft); font-weight: 400; } table.ledger.book tr.bal { border-top: 1px dashed #d2d2cd; } table.ledger.book tr.bal td.n:last-child { border-bottom: 3px double var(--tear) !important; } } /* the phone: What sold on the home becomes lines; the fourteen-day line and the share bar sit under the title */ @media (max-width: 480px) { table.works.num tr:not(.grp) { grid-template-columns: 34px 1fr auto auto; } table.works.num td:nth-child(2 of :not(.t, .g)) { grid-column: 2 / 4; grid-row: 1; } table.works.num td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--soft); } table.works.num td:nth-child(4 of :not(.t, .g)) { grid-column: 3; grid-row: 2; font-size: 12.5px; } table.works.num td:nth-child(4 of :not(.t, .g)):not(:empty)::before { content: "sold "; color: var(--soft); } table.works.num td:nth-child(5 of :not(.t, .g)) { display: block; grid-column: 4; grid-row: 1; font-weight: 700; } table.works.num td:nth-child(6 of :not(.t, .g)) { grid-column: 2 / 4; grid-row: 3; } table.works.num td:nth-child(7 of :not(.t, .g)) { grid-column: 4; grid-row: 2; font-size: 12.5px; } table.works.num td:nth-child(7 of :not(.t, .g)):not(:empty):not(.to-order)::before, table.works.num td:nth-child(8 of :not(.t, .g)):not(:empty):not(.to-order)::before { content: none; } table.works.num td:nth-child(8 of :not(.t, .g)), table.works.num td:nth-child(9 of :not(.t, .g)) { display: none; } } /* the phone: a search result becomes two lines, whatever kind it is: what it is and its figure, then its detail and its small figure */ @media (max-width: 480px) { table.search, table.search tbody { display: block; } table.search thead > tr:not(.bar), table.search colgroup { display: none; } table.search tbody tr { display: grid !important; grid-template-columns: 34px 1fr auto !important; gap: 0 8px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } table.search td { border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible; white-space: nowrap; font-size: inherit; color: inherit; display: block; grid-column: auto; grid-row: auto; } table.search td::before, table.search td::after { content: none !important; } table.search td:nth-child(1 of :not(.t, .g)) { grid-row: 1 / 3; align-self: center; } table.search td.who { grid-column: 2; grid-row: 1; overflow: hidden !important; text-overflow: ellipsis; } /* works: img, work, medium, price, sold */ table.works.search td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--soft); overflow: hidden !important; text-overflow: ellipsis; } table.works.search td:nth-child(4 of :not(.t, .g)) { grid-column: 3; grid-row: 1; font-weight: 700; } table.works.search td:nth-child(5 of :not(.t, .g)) { display: block; grid-column: 3; grid-row: 2; font-size: 12.5px; } table.works.search td:nth-child(5 of :not(.t, .g)):not(:empty)::before { content: "sold " !important; color: var(--soft); } /* orders: number, customer, contents, total, age */ table.orders.search td:nth-child(1 of :not(.t, .g)) { grid-column: 1; grid-row: 1 / 3; align-self: center; } table.orders.search td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--soft); overflow: hidden !important; text-overflow: ellipsis; } table.orders.search td:nth-child(4 of :not(.t, .g)) { grid-column: 3; grid-row: 1; font-weight: 700; } table.orders.search td:nth-child(5 of :not(.t, .g)) { grid-column: 3; grid-row: 2; font-size: 12.5px; } /* customers: name, where, orders, to date, last order */ table.customers.search tr { grid-template-columns: 1fr auto !important; } table.customers.search td.who { grid-column: 1; } table.customers.search td:nth-child(2 of :not(.t, .g)) { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--soft); overflow: hidden !important; text-overflow: ellipsis; } table.customers.search td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 2; font-size: 12.5px; } table.customers.search td:nth-child(3 of :not(.t, .g)):not(:empty)::before { content: "orders " !important; color: var(--soft); } table.customers.search td:nth-child(4 of :not(.t, .g)) { grid-column: 2; grid-row: 1; font-weight: 700; } table.customers.search td:nth-child(5 of :not(.t, .g)) { display: none; } /* members: name, since, paid through */ table.members.search tr { grid-template-columns: 1fr auto !important; } table.members.search td.who { grid-column: 1; grid-row: 1; } table.members.search td:nth-child(2 of :not(.t, .g)) { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--soft); } table.members.search td:nth-child(2 of :not(.t, .g)):not(:empty)::before { content: "since " !important; color: var(--soft); } table.members.search td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 1; justify-self: end; } } /* the phone: a club member becomes two lines, as a customer found by search does: name and paid through, then where and since */ @media (max-width: 480px) { table.members:not(.search), table.members:not(.search) tbody { display: block; } table.members:not(.search) thead > tr:not(.bar), table.members:not(.search) colgroup { display: none; } table.members:not(.search) tr.grp, table.members:not(.search) tr.grp th { display: block; } table.members:not(.search) tr:not(.grp) { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } table.members:not(.search) tr:not(.grp) td { border: 0 !important; box-shadow: none !important; padding: 0; overflow: visible; white-space: nowrap; } table.members:not(.search) td.who { grid-column: 1; grid-row: 1; overflow: hidden !important; text-overflow: ellipsis; } table.members:not(.search) td:nth-child(2 of :not(.t, .g)) { grid-column: 2; grid-row: 2; justify-self: end; font-size: 12.5px; } table.members:not(.search) td:nth-child(2 of :not(.t, .g)):not(:empty)::before { content: "since "; color: var(--soft); } table.members:not(.search) td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 1; justify-self: end; } table.members:not(.search) td:nth-child(4 of :not(.t, .g)) { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--soft); overflow: hidden !important; text-overflow: ellipsis; } table.members:not(.search) tr.none td { grid-column: 1 / 3; white-space: normal; } } /* the phone: a code becomes two lines: the code and what it takes, then its state, how long it lasts and how often it was used */ @media (max-width: 480px) { table.discounts, table.discounts tbody { display: block; } table.discounts thead > tr:not(.bar), table.discounts colgroup { display: none; } table.discounts tr:not(.none) { display: grid; grid-template-columns: auto 1fr auto; gap: 0 10px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } table.discounts tr:not(.none) td { border: 0 !important; box-shadow: none !important; padding: 0; } table.discounts td:nth-child(1 of :not(.t, .g)) { grid-column: 1 / 3; grid-row: 1; } table.discounts td:nth-child(4 of :not(.t, .g)) { grid-column: 3; grid-row: 1; font-weight: 700; } table.discounts td:nth-child(2 of :not(.t, .g)) { grid-column: 1; grid-row: 2; font-size: 12.5px; } table.discounts td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 2; font-size: 12.5px; color: var(--soft); } table.discounts td:nth-child(5 of :not(.t, .g)) { grid-column: 3; grid-row: 2; font-size: 12.5px; } table.discounts td:nth-child(5 of :not(.t, .g))::before { content: "used "; color: var(--soft); } table.discounts tr.none { display: block; } } /* the phone: a sheet's labels stay on their one line ("How much", "Orders over"); an address line wraps under itself rather than widen the page; a variant's price shows whole in its field; a ledger's place is not broken in two */ @media (max-width: 480px) { dd address { white-space: normal; } .ship { grid-template-columns: 70px 1fr; } table.variants td.v + td.n input { min-width: 6.5ch; } table.ledger a.in { white-space: nowrap; } } /* the phone: a list sorted by its headings keeps them, as one line of words over the rows */ @media (max-width: 480px) { table.customers:not(.search) thead, table.checks thead { display: block; box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } table.customers:not(.search) thead tr, table.checks thead tr { display: flex; flex-wrap: wrap; gap: 0 12px; } table.customers:not(.search) thead th, table.checks thead th { border: 0; box-shadow: none; padding: 3px 0; } } /* the phone: a customer becomes two lines, as a club member does: name and to date, then where, orders and the last order */ @media (max-width: 480px) { table.customers:not(.search), table.customers:not(.search) tbody { display: block; } table.customers:not(.search) colgroup { display: none; } table.customers:not(.search) tbody tr:not(.none) { display: grid; grid-template-columns: 1fr auto auto; gap: 0 10px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } table.customers:not(.search) tbody tr td { border: 0 !important; box-shadow: none !important; padding: 0; overflow: visible; white-space: nowrap; } table.customers:not(.search) td.who { grid-column: 1 / 3; grid-row: 1; overflow: hidden !important; text-overflow: ellipsis; } table.customers:not(.search) td:nth-child(4 of :not(.t, .g)) { grid-column: 3; grid-row: 1; font-weight: 700; } table.customers:not(.search) td:nth-child(2 of :not(.t, .g)) { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--soft); overflow: hidden !important; text-overflow: ellipsis; } table.customers:not(.search) td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 2; font-size: 12.5px; } table.customers:not(.search) td:nth-child(3 of :not(.t, .g)):not(:empty)::before { content: "orders "; color: var(--soft); } table.customers:not(.search) td:nth-child(5 of :not(.t, .g)) { grid-column: 3; grid-row: 2; font-size: 12.5px; } table.customers:not(.search) tr.none { display: block; } table.customers:not(.search) tr.none td { white-space: normal; } } /* the phone: a check becomes lines: what it checks and what it found, then its example under it */ @media (max-width: 480px) { table.checks, table.checks tbody { display: block; } table.checks colgroup { display: none; } table.checks tr.grp, table.checks tr.grp th { display: block; } table.checks tbody tr:not(.grp) { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } table.checks tbody tr:not(.grp) td { border: 0 !important; box-shadow: none !important; padding: 0; white-space: normal; } table.checks td:nth-child(1 of :not(.t, .g)) { grid-column: 1; grid-row: 1; } table.checks td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 1; } table.checks td:nth-child(2 of :not(.t, .g)) { grid-column: 1 / 3; grid-row: 2; font-size: 12.5px; overflow-wrap: anywhere; } table.checks td:nth-child(2 of :not(.t, .g)):empty, table.checks tr.more td:not(:nth-child(2 of :not(.t, .g))) { display: none; } table.checks tr.more td:nth-child(2 of :not(.t, .g)) { grid-row: 1; } table.checks tbody tr:has(+ tr.more) { padding-bottom: 0; box-shadow: none; } table.checks tbody tr.more { padding-top: 2px; } table.checks .ex { display: block; } table.checks .ex > :not(:first-child) { margin-left: 0; } } /* the phone: a thing in the trash becomes two lines: its name, then its kind and when it was deleted; Bring back beside both */ @media (max-width: 480px) { table.trash, table.trash tbody { display: block; } table.trash thead > tr:not(.bar), table.trash colgroup { display: none; } table.trash tr:not(.none) { display: grid; grid-template-columns: auto 1fr auto; gap: 0 10px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } table.trash tr:not(.none) td { border: 0 !important; box-shadow: none !important; padding: 0; overflow: visible; white-space: nowrap; } table.trash td.who { grid-column: 1 / 3; grid-row: 1; overflow: hidden !important; text-overflow: ellipsis; } table.trash td:nth-child(1 of :not(.t, .g)) { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--soft); } table.trash td:nth-child(3 of :not(.t, .g)) { grid-column: 2; grid-row: 2; font-size: 12.5px; text-align: left; } table.trash td:nth-child(4 of :not(.t, .g)) { grid-column: 3; grid-row: 1 / 3; align-self: center; } } /* the phone: the two lists one under the other, and a page of the table two lines: its name and when it changed, then its address, its kind and how it stands on the site, and the lists it is in under them */ @media (max-width: 480px) { .cols.half { grid-template-columns: minmax(0, 1fr); } table.pages, table.pages tbody { display: block; } table.pages thead, table.pages colgroup { display: none; } table.pages tr { display: grid; grid-template-columns: auto 1fr auto; gap: 0 10px; align-items: baseline; padding: 6px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } table.pages tr td { border: 0 !important; box-shadow: none !important; padding: 0; overflow: visible; } table.pages td.who { grid-column: 1 / 3; grid-row: 1; } table.pages td:nth-child(6 of :not(.t, .g)) { grid-column: 3; grid-row: 1; } table.pages td:nth-child(3 of :not(.t, .g)) { grid-column: 1; grid-row: 2; font-size: 12.5px; } table.pages td:nth-child(2 of :not(.t, .g)) { grid-column: 2; grid-row: 2; font-size: 12.5px; overflow: hidden !important; text-overflow: ellipsis; } table.pages td:nth-child(4 of :not(.t, .g)) { grid-column: 3; grid-row: 2; font-size: 12.5px; text-align: right; } table.pages td:nth-child(5 of :not(.t, .g)) { grid-column: 1 / -1; grid-row: 3; font-size: 12.5px; } table.pages td:nth-child(5 of :not(.t, .g)):empty { display: none; } table.pages tr.held { background: var(--stroke); margin: 0 -4px; padding: 6px 4px; } table.pages tr.held td { background: none; } } /* the phone: an email in Settings says when it is sent on its line, and its state under it when both do not fit */ @media (max-width: 480px) { .receipt.slip .sum:has(> span:first-child > .q) { flex-wrap: wrap; } .receipt.slip .sum:has(> span:first-child > .q) > .amt { margin-left: auto; } } /* the phone: a shipping rate becomes three lines: its name and what it costs, where it sends, then the orders it takes, up to what weight, and its cost a kilo */ @media (max-width: 480px) { table.variants:has(td.v + td.v), table.variants:has(td.v + td.v) tbody { display: block; } table.variants:has(td.v + td.v) thead, table.variants:has(td.v + td.v) colgroup { display: none; } table.variants:has(td.v + td.v) tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 12px; padding: 6px 0; } table.variants:has(td.v + td.v) tr.new { background: var(--stroke); margin: 0 -4px; padding: 6px 4px; } table.variants:has(td.v + td.v) td { display: flex; align-items: baseline; gap: 5px; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto !important; max-width: none; background: none !important; } table.variants:has(td.v + td.v) td input { flex: 1; min-width: 0; } table.variants:has(td.v + td.v) td:nth-child(1 of :not(.t, .g)) { grid-column: 1 / 3; grid-row: 1; } table.variants:has(td.v + td.v) td:nth-child(5 of :not(.t, .g)) { grid-column: 3; grid-row: 1; } table.variants:has(td.v + td.v) td:nth-child(2 of :not(.t, .g)) { grid-column: 1 / 4; grid-row: 2; } table.variants:has(td.v + td.v) td:nth-child(3 of :not(.t, .g)) { grid-column: 1; grid-row: 3; } table.variants:has(td.v + td.v) td:nth-child(4 of :not(.t, .g)) { grid-column: 2; grid-row: 3; } table.variants:has(td.v + td.v) td:nth-child(6 of :not(.t, .g)) { grid-column: 3; grid-row: 3; } table.variants:has(td.v + td.v) td:nth-child(n+2 of :not(.t, .g))::before { color: var(--soft); font: 11px var(--sans); white-space: nowrap; } table.variants:has(td.v + td.v) td:nth-child(2 of :not(.t, .g))::before { content: "to"; } table.variants:has(td.v + td.v) td:nth-child(3 of :not(.t, .g))::before { content: "orders from"; } table.variants:has(td.v + td.v) td:nth-child(4 of :not(.t, .g))::before { content: "up to"; } table.variants:has(td.v + td.v) td:nth-child(5 of :not(.t, .g))::before { content: "costs"; } table.variants:has(td.v + td.v) td:nth-child(6 of :not(.t, .g))::before { content: "each kg"; } } /* the signed-in band over the shop (ADR 0125): the footer's small type on the highlighter, the width of the nav */ .signed-in-band { display: flex; align-items: center; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter); font: 11.5px var(--sans); color: var(--soft); background: var(--hi); } .signed-in-band p { flex: 1; margin: 0; } .signed-in-band a { color: inherit; } .signed-in-band button { padding: 0 2px; border: 0; background: none; color: inherit; font: 15px/1 var(--sans); cursor: pointer; } /* a collection on pages (ADR 0126): where it shows under its head; Add works, its chips and the box for the next title, the suggestions under them */ p.shown { font: 13px var(--sans); color: var(--soft); margin: -4px 0 12px; } .addw { margin-top: 10px; padding: 0 0 6px; box-shadow: inset 0 1px 0 var(--tear), inset 0 -1px 0 var(--tear); } .addw .sum { display: flex; align-items: baseline; gap: 6px; padding: 4px 4px 3px; font-size: 14px; } .addw .sum .dots { flex: 1; border-bottom: 1px dotted var(--leader); transform: translateY(-3px); } .addw .sum.on { background: var(--stroke); } .addw .chips { padding: 4px 0 2px; } .addw .chips b button { all: unset; cursor: pointer; color: var(--soft); padding-left: 2px; } .addw .chips .typing { flex: 1 1 120px; display: flex; border-bottom: 1px solid var(--ink); background: var(--hi); } .addw .chips .typing input { all: unset; flex: 1; font: 14px var(--sans); padding: 1px 3px; } .addw .chips .typing input.refused { box-shadow: inset 0 -1.5px 0 var(--red); } .addw button.go { font-size: 13px; padding: 1px 12px; } .sugg { margin-top: 4px; font: 13px/1.3 var(--sans); box-shadow: inset 0 0.5px 0 var(--ink); } .sugg .sr { display: flex; align-items: center; gap: 7px; padding: 3px 6px; color: var(--ink); text-decoration: none; cursor: pointer; box-shadow: inset 0 -0.5px 0 var(--rule); } .sugg .sr.held { background: var(--stroke); } .sugg .sr img, .sugg .sr i { width: 24px; height: 24px; object-fit: contain; border-radius: 3px; background: #f4f4f1; flex: none; } .sugg .sr .nm { flex: none; font-size: 14px; color: LinkText; text-decoration: underline; } .sugg .sr .sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); font-size: 12.5px; } .sugg .sr .dots { flex: 1 1 12px; min-width: 12px; border-bottom: 1px dotted var(--leader); transform: translateY(-3px); } .sugg .sr .amt { flex: none; font: 12px var(--mono); } .sugg .sr mark { padding: 0; } .sugg .sl { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 5px 0 0; font-size: 12px; color: var(--soft); } .sugg kbd { font-size: 11px; color: var(--ink); } /* a work's Collections line: chips under it, add opening a short tick list of every collection */ .receipt .chips a[aria-expanded="true"] { font-size: 12.5px; background: var(--hi); box-shadow: 0 0 0 2px var(--hi); } .ticks { margin: 0 0 6px 12px; padding: 2px 0 4px 10px; font: 13.5px var(--sans); box-shadow: inset 1.5px 0 0 var(--ink); } .ticks label { display: flex; align-items: center; gap: 8px; padding: 3px 0; box-shadow: inset 0 -0.5px 0 var(--rule); } .ticks label span { flex: 1; } .ticks label small { font: 12px var(--mono); color: var(--soft); } .ticks p { margin: 4px 0 0; font-size: 12px; color: var(--soft); } /* the index's sections: a collection's row says it is one, and how many of it show */ table.sections td.v .soft { color: var(--soft); font-size: 13px; } .receipt input.few { width: 3.5em; flex: none; text-align: right; } .fn.idx { margin-top: 6px; } table.grid td.kind.wrap { white-space: normal; } @media (max-width: 480px) { .sugg .sl span + span, .sugg .sr .sub { display: none; } } /* a collection's record (issue 0199): the Collection row's Manual · Smart lit as Group by's; Smart's choices each a select at the right in the slip's mono, its thin chevron after it, as the checkout's Country, the word or the year box at the right of Works; the soft count line under them */ .receipt .sum .seg label { font: 13.5px var(--sans); } .receipt .kind .amt a { padding: 0 1px; } .receipt .kind .amt a[aria-current] { background: var(--hi); color: #551a8b; text-decoration: underline; box-shadow: 0 0 0 3px var(--hi); border-radius: 1px; } .receipt.slip .pickone { flex: none; display: inline-flex; align-items: baseline; gap: 5px; max-width: 75%; } .receipt.slip .pickone select { font: 12.5px/1.35 var(--mono); color: var(--ink); background: none; field-sizing: content; min-width: 0; } .receipt.slip .pickone .chev { flex: none; width: 9px; height: 6px; fill: none; stroke: var(--soft); stroke-width: 1.3; align-self: center; } .receipt.slip .pickrow input.after { flex: none; min-width: 8ch; max-width: 30%; margin-left: 10px; text-align: left; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect y='1' width='1' height='1' fill='%23a5a5a0'/%3E%3C/svg%3E") left bottom / 1px 1px repeat-x; } .receipt.slip .pickrow input[hidden], .receipt .sum.pickrow[hidden] { display: none; } .receipt p.count { margin: 2px 0 0; padding: 2px 0 0; font-size: 11.5px; color: var(--soft); white-space: normal; } /* issue 0200: the days box a short number; the and row's label soft; + and a soft link under Works; a section's link that leads nowhere warns */ .receipt.slip .pickrow input.after.days { min-width: 0; width: 4ch; text-align: right; } .receipt .sum.pickrow.and > span:first-child { color: var(--soft); } .receipt p.and-add { margin: 0; padding: 0 0 3px; font-size: 12px; } .receipt p.and-add[hidden] { display: none; } .receipt p.and-add a { color: var(--soft); } /* tags in Catalog (issue 0428): a chip a tag above Group by, drawn as the tick box is, the chosen one with its red tick before the word, the tick's foot on the words' baseline; hovered, its dots and its ×; double-clicked, a field; with works ticked, Tags opens every tag with its tick box under the strip */ table.works td.m .tg { color: var(--soft); } table.works td.m .tg a.in.on { color: var(--ink); } .on-table .tagging { position: relative; display: inline-flex; align-items: baseline; } .on-table .tagging .menu { position: absolute; z-index: 5; left: -10px; top: calc(100% + 6px); display: block; min-width: 250px; padding: 6px 0; background: #fff; box-shadow: 0 0 0 0.5px var(--ink), 0 8px 22px rgb(0 0 0 / .12); font: 400 var(--nav)/1.4 var(--sans); color: var(--ink); white-space: normal; } .on-table .tagging .menu[hidden] { display: none; } .on-table .tagging .menu > .say { display: block; margin: 2px 12px 6px; font-size: 12px; color: var(--soft); } .on-table .tagging .menu .line { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 4px; user-select: none; -webkit-user-select: none; } .on-table .tagging .menu .line:hover { background: var(--hi); } .on-table .tagging .menu .line.carried { opacity: .5; } .on-table .tagging .menu .line > .hand { margin: -5px 0; padding: 5px 2px 5px 4px; color: var(--soft); } .on-table .tagging .menu .line > input[type=checkbox] { margin: 0; } .on-table .tagging .menu .line > :is(.nm, input:not([type])) { flex: 1; cursor: text; } .on-table .tagging .menu .line > input:not([type]) { all: unset; flex: 1; font: inherit; box-shadow: inset 0 -1px 0 var(--ink); user-select: text; -webkit-user-select: text; } .on-table .tagging .menu .line small { color: var(--soft); font-size: 12px; } .on-table .tagging .menu .line > button.off { all: unset; padding: 0 3px; color: var(--soft); cursor: pointer; font-size: 14px; line-height: 1; } .on-table .tagging .menu .line > button.off:hover { color: var(--red); } .on-table .tagging .menu .new { display: flex; align-items: center; gap: 8px; border-top: 0.5px solid var(--rule); margin-top: 4px; padding: 7px 12px 4px; } .on-table .tagging .menu .new .plus { width: 14px; text-align: center; color: var(--soft); } .on-table .tagging .menu .new input { all: unset; flex: 1; font: inherit; box-shadow: inset 0 -1px 0 var(--leader); } .on-table .tagging .menu .new input::placeholder { color: var(--faint); } .receipt.slip.tags .sum.add { padding-left: 19px; } /* a work's one Tags line: its tags as chips, × taking one off, then a box where a word typed finds her tags, or makes a new one; the tag a Smart page is filled by, picked at the right of tagged… */ .receipt .sum.wrap.pages.tagline > span:first-child { flex-shrink: 0; } .receipt .sum.wrap.pages.tagline > .chips { flex: 1 1 auto; } .receipt .sum.tagline .chips .typing { flex: 1 1 90px; display: flex; min-width: 90px; border-bottom: 1px solid var(--ink); background: var(--hi); } .receipt .sum.tagline .chips .typing input { all: unset; flex: 1; min-width: 0; font: 13.5px var(--sans); padding: 0 3px; text-align: left; } .receipt .sum.tagline .chips .typing input::placeholder { color: var(--faint); } .receipt .sugg.tagfind { margin: 0 0 6px 12px; } .receipt .sugg.tagfind .sr .nm { font-size: 13.5px; } .receipt .sugg.tagfind .sr.new .nm { color: var(--ink); text-decoration: none; } .receipt .sugg.tagfind .sr.new .sub { display: block; } .receipt.slip .sum.pickrow .pickone + .pickone { margin-left: 6px; } .receipt.slip .sum.pickrow .pickone[hidden] { display: none; } .receipt .says.warn { box-shadow: inset 1.5px 0 0 var(--red); } /* its works in parts: Chosen with handles, Chosen, not shown in grey with why, the choice's works read only, each row carried by itself */ h3.part { display: flex; justify-content: space-between; margin: 14px 0 2px; font: 600 13px var(--sans); color: var(--ink); } h3.part span { font-weight: 400; color: var(--soft); font-family: var(--mono); } h2.first + h3.part { margin-top: 2px; } table.pinned td.im img, table.byrule td.im img { display: block; width: 24px; height: 24px; object-fit: contain; border-radius: 3px; background: #f4f4f1; } table.pinned td.im:empty::before { content: ""; display: block; box-sizing: border-box; width: 24px; height: 24px; border-radius: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.25' y='.25' width='23.5' height='23.5' rx='2.75' fill='none' stroke='%23c9c9c9' stroke-width='.5' stroke-dasharray='2 1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } table.byrule tr[data-pin] { cursor: grab; } table.pinned.off td, table.pinned.off td.v a { color: #6a6a66; } i.why { display: block; font: italic 12.5px var(--sans); color: var(--soft); margin: 0 0 2px; } /* on Works a Smart group: its choice's words after its title, the rows it gives with no handle, a faint line where Chosen ends */ tr.grp th em.by { font-style: normal; font-weight: 400; color: var(--soft); } table.works tr.rulefirst td { box-shadow: inset 0 1px 0 var(--tear), inset 0 -0.5px 0 var(--rule); } /* a work's Collections line: the Smart ones in words after the chips */ .chips .ruled { font: 13px var(--sans); color: var(--soft); align-self: center; margin-right: 6px; } table.pinned td.v, table.byrule td.v { white-space: normal; } table.pinned td.v i:not(.why), table.byrule td.v i { white-space: nowrap; } .addw button[data-put][hidden] { display: none; } /* a page's record (ADR 0134 rule 2): the words' hint soft under the box; On the Index's small tick, first N and all N ↗, in the soft small type before its own tick; a page with no works, one soft line where the works stand */ .receipt p.hint { font: 12px var(--sans); color: var(--soft); margin: 0 0 4px 2ch; } .receipt .small-tick { display: inline-flex; align-items: center; gap: 4px; font: 12px var(--sans); color: var(--soft); margin-right: 12px; } .receipt .small-tick input[name^=first] { all: unset; width: 3ch; text-align: center; color: var(--ink); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect y='1' width='1' height='1' fill='%23a5a5a0'/%3E%3C/svg%3E") left bottom / 1px 1px repeat-x; } .receipt.slip .small-tick input[type=checkbox] { margin-left: 4px; } .receipt .sum.sub > span:first-child { padding-left: 2ch; color: var(--soft); } .receipt .sum.sub .small-tick { margin-right: 0; } p.noworks { font: 13px var(--sans); color: var(--soft); margin: 2px 0 0; } /* a work's video among its pictures (ADR 0134 rule 6); the add tile takes pictures and video files, and under "or a link" turns into a link's form (issue 0267) */ /* 0274: a video is a tile of the one order, numbered as a picture is; the play mark at the middle of its still says it is a video */ .tile.video .play { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px; background: rgba(255,255,255,.88); box-shadow: 0 1px 4px rgba(0,0,0,.18); pointer-events: none; } .tile.video .play::after { content: ''; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--ink); } .tile.video.feat .play { width: 48px; height: 48px; margin: -24px 0 0 -24px; } .tile.video.feat .play::after { left: 18px; top: 14px; border-width: 10px 0 10px 15px; } .tile .marks a { all: unset; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 999px; background: rgba(255,255,255,.72); font: 500 10px/1 var(--sans); color: var(--soft); cursor: pointer; } .tile.video .glyph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 28px var(--sans); color: var(--soft); } .tile[hidden] { display: none; } .tile.add.media { gap: 0; padding: 10px; text-align: center; } .tile.add.media small { color: var(--faint); margin-top: 6px; } .tile.add.media .or { font: 12px var(--sans); color: LinkText; text-decoration: underline; text-underline-offset: .16em; margin-top: 10px; } .tile.add.link { align-items: stretch; justify-content: center; gap: 0; padding: 10px; cursor: auto; } .tile.add.link label { font: 11px var(--sans); color: var(--soft); text-align: left; white-space: normal; } .tile.add.link input { all: unset; min-width: 0; margin-top: 6px; padding: 3px 0; font: 12px var(--sans); color: var(--ink); text-align: left; background: var(--hi); box-shadow: inset 0 -0.5px 0 var(--ink); } .tile.add.link input::placeholder { color: var(--faint); } .tile.add.link input.refused { box-shadow: inset 0 -1px 0 var(--red); } .tile.add.link .said { margin-top: 4px; font: 11px var(--sans); color: var(--red); text-align: left; } .tile.add.link:has(.said) label { display: none; } .tile.add.link .row { display: flex; justify-content: space-between; margin-top: 10px; font: 12px var(--sans); } .tile.add.link .row a { color: LinkText; text-decoration: underline; text-underline-offset: .16em; } .tile.add.link .row button.link { font-weight: 600; } /* a video being sent: its still under a pale veil, or the veil alone until the still is taken, and how much has gone over its bar */ .tile.sending.video { background: #2b2b28 center / cover; } .tile.sending.video::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.55); } .tile.sending.video .tag, .tile.sending.video .marks, .tile.sending.video .bar { z-index: 1; } .tile.sending.video .bar { position: absolute; left: 8px; right: 8px; bottom: 8px; font: 11px var(--mono); color: var(--ink); } .tile.sending.video .bar progress { position: static; display: block; width: 100%; margin-top: 5px; } /* issue 0318: a bundle's slots as sentences, Any [n] from a page, its count soft under it; what the buyer sees */ .fn.lead { font-size: 14px; line-height: 1.4; margin: 1px 0 10px; } button.go.default { position: absolute; width: 0; height: 0; padding: 0; border: 0; overflow: hidden; } .holds .sum { gap: 6px; } .holds .sum input.few { min-width: 2ch; width: 3ch; field-sizing: fixed; text-align: center; flex: none; margin: 0 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect y='1' width='1' height='1' fill='%23a5a5a0'/%3E%3C/svg%3E") left bottom / 1px 1px repeat-x; } .holds .sum.add .pickone { max-width: none; min-width: 0; flex: 0 1 auto; } .holds p.count { margin: 0 0 3px; padding: 0; } .sees .t { font: 600 13.5px var(--sans); } .sees .empty, .holds .empty { color: var(--faint); } /* issue 0320: a bundle's own picture, the tile that sends one beside it, the pieces' pictures to choose from under them, then its line */ .own-pic { display: flex; gap: 8px; align-items: flex-start; } .own-pic .tile.add { width: 70px; flex: none; } .own-pic .tile.chosen { width: 148px; flex: none; cursor: default; } .own-pic.refused .tile.add { outline: 1px solid var(--red); } .own-pic .tile.add.picked { width: 148px; outline: 0; } .own-pic .tile.add.picked > * { visibility: hidden; } .own-pic small.chosen { font: 11px var(--sans); color: var(--soft); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .own-of label { display: block; cursor: pointer; } .own-of input:checked + img { box-shadow: 0 0 0 3px var(--hi); } /* issue 0349: a bundle's counts in columns under its price, how a part stands beside its take out, and a soft word gone once its tick is ticked */ .tiers .sum > .few, .tiers .sum > input.few { flex: none; width: 4ch; min-width: 4ch; max-width: 4ch; field-sizing: fixed; text-align: right; } .tiers .sum > .pr, .tiers .sum > input.pr { flex: none; width: 6ch; min-width: 6ch; max-width: 6ch; field-sizing: fixed; text-align: right; } .holds .amt > .known, .holds .amt > .lamp, .sum .amt > .unticked { margin-right: 8px; } .sum:has(:checked) .unticked { display: none; } .acts > .known { font: 11.5px var(--mono); } .holds .sum input.few:placeholder-shown { width: 7ch; } /* a part's row keeps to one line at a desk: Any at its own width, from and its page whole, the leader at its shortest */ .holds .sum > span:first-child { flex-shrink: 0; min-width: auto; } .holds .sum > span:not(.amt, .dots) { white-space: nowrap; } .holds .sum .dots { min-width: 6px; } /* issue 0317: the Index heads Catalog's pages, its name at the group titles' x, with no tick, fold, handle or Delete */ /* one banner's sheet: the parts of the picture a desk and a phone keep, dashed on it; then the banner as the buyer sees it, drawn to her site's measures in parts of its width, so the words fall on the picture where hers do and admin.js measures them there */ .focus-pick .keeps { position: absolute; box-sizing: border-box; border: 1.5px dashed rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; } .focus-pick .keeps i { position: absolute; padding: 1px 5px; font: 11px var(--mono); font-style: normal; color: #fff; background: rgba(0,0,0,.55); border-radius: 2px; } .focus-pick .keeps.desk i { left: 6px; top: 6px; } .focus-pick .keeps.phone i { right: 6px; bottom: 6px; } .seen-pair { display: grid; grid-template-columns: 3fr 1fr; gap: 16px; align-items: end; } .seen { margin: 0; } .seen figcaption { margin-top: 4px; font: 12px var(--mono); color: var(--soft); } .banner-seen { position: relative; overflow: hidden; container-type: inline-size; color: #f9f5ee; background: #e8e2d8; font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; box-shadow: 0 0 0 0.5px rgba(0,0,0,.14); } .banner-seen.desk { aspect-ratio: 1440 / 584; } .banner-seen.phone { aspect-ratio: 390 / 436; } .banner-seen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .banner-seen.shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(72,74,73,.72), rgba(72,74,73,.56) 30%, rgba(72,74,73,0) 58%); } .banner-seen .words { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 2.22cqw; padding: 0 3.33cqw 2.36cqw; } .banner-seen .words p { grid-column: 1; max-width: 47.2cqw; margin: 0.42cqw 0 0; font-size: 1.25cqw; line-height: 1.81cqw; } .banner-seen .words .h { margin: 0; font-size: 2.36cqw; line-height: 1.2; } .banner-seen .to { grid-column: 2; grid-row: 1 / span 2; padding: 0 1.6cqw; height: 2.78cqw; display: inline-flex; align-items: center; border-radius: 0.9cqw; font-weight: 500; font-size: 1.04cqw; line-height: 1; color: #484a49; background: #f9f5ee; } .banner-seen.phone .words { display: flex; flex-direction: column; align-items: flex-start; padding: 0 5.13cqw 6.67cqw; } .banner-seen.phone .words p { max-width: none; margin-top: 1.54cqw; font-size: 4.1cqw; line-height: 5.64cqw; } .banner-seen.phone .words .h { font-size: 6.67cqw; } .banner-seen.phone .to { margin-top: 4.1cqw; height: 10.26cqw; padding: 0 5.9cqw; border-radius: 3.33cqw; font-size: 3.85cqw; } .slim-seen { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #f2ece3; color: #484a49; font-family: 'Inter', -apple-system, sans-serif; } .slim-seen img { width: 32px; height: 36px; object-fit: cover; } .slim-seen > span:not(.to) { flex: 1; display: flex; flex-direction: column; } .slim-seen b { font-weight: 400; font-size: 15px; } .slim-seen i { font-style: normal; font-size: 12px; color: #5e5b5b; } .slim-seen .to { padding: 5px 12px; border: 1px solid #808080; border-radius: 8px; font-size: 12px; } [data-contrast].hard { color: var(--red); } /* issue 0348: her notice as the buyer sees it, in her site's look: deep paper, her ink, her words, the link underlined, the close at the right */ .notice-seen { display: flex; align-items: center; gap: 12px; padding: 6px 16px; background: #f2ece3; color: #484a49; font: 12px/16px 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; box-shadow: 0 0 0 0.5px rgba(0,0,0,.14); } .notice-seen p { flex: 1; min-width: 0; margin: 0; } .notice-seen u { flex: none; font-weight: 500; } .notice-seen b { flex: none; font-weight: 400; font-size: 16px; } .notice-seen.phone { width: 260px; } /* issue 0353: her order's Ship to a block under its label, a set's saving on its own line, earlier orders listed plainly, TOTAL at the rows' size, the same air above each section */ .receipt.slip .sum.ship-to { cursor: default; } .receipt.slip address.parcel { display: block; padding: 1px 0 3px; white-space: normal; line-height: 1.45; } .receipt .set .says { font: 12.5px/1.35 var(--mono); color: var(--soft); padding: 0 0 3px; margin: -1px 0 0; box-shadow: none; } h2.earlier { margin-top: 18px; } table.log.earlier { box-shadow: none; } table.log.earlier td { padding-top: 2px; padding-bottom: 2px; } table.log.earlier td.n a { color: LinkText; } table.log.earlier td.st { color: var(--soft); } table.log.earlier td.amt { text-align: right; padding-right: 0; } .cols.order .receipt .sum.total { font-size: inherit; padding: 2px 0; } .cols.order .receipt.slip :is(input, textarea)[placeholder="–"]:placeholder-shown { min-width: 1ch; } .cols.order > div > section + section > h2 { margin-top: 26px; } @media (max-width: 480px) { .cols.order > div > section > h2 { margin-top: 26px; } .cols.order > div:first-child > section:first-child > h2 { margin-top: 14px; } } #store div.offline { display: contents; } #store .fn.online, #store:has(input[name="online"][type="checkbox"]:checked) .offline { display: none; } #store:has(input[name="online"][type="checkbox"]:checked) .fn.online { display: block; } /* issue 0430, 0435, 0436: the notice and a page's banner are rows of Catalog on the dither, as tall as a work's, the notice's name or the banner's picture standing where the page rows' ticks do, nothing at their left; at the right their days or why they do not show, the tick her switch, then Delete. New and a page's Add are the system's select, dressed as a link and chevron */ :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td { height: 24px; background: #fff var(--stipple) 0 0 / 3px 3px; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) td::before { content: none !important; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.lead { padding-left: 0 !important; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.lead > :is(span, img, a) { vertical-align: middle; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.lead > span.g { display: inline-block; width: 19px; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.lead > :is(img, span.room.pic) { display: inline-block; width: 24px; height: 24px; margin-right: 8px; object-fit: cover; border-radius: 2px; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.lead > a { color: LinkText; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.says { overflow: visible; padding-right: var(--in, 0); } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.says > div { display: flex; align-items: baseline; justify-content: flex-end; font: var(--nav) var(--sans); color: var(--soft); white-space: nowrap; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.says span.days { margin-right: 12px; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.says label.tk { margin: 0 26px 0 0; align-self: center; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.says button.del { all: unset; flex: none; color: LinkText; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; cursor: pointer; } .sel { position: relative; display: inline-flex; align-items: baseline; font: var(--nav) var(--sans); } .sel select { all: unset; display: inline-block; font: var(--nav) var(--sans); box-sizing: content-box; color: LinkText; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; cursor: pointer; padding-right: 13px; } .sel .chev { position: absolute; right: 0; top: 50%; width: 9px; height: 6px; margin-top: -2px; fill: none; stroke: LinkText; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } @media (max-width: 480px) { /* two lines: the name, after a banner's picture, over the days and the tick, Delete at the first line's end */ :is(table.works, table.on-page) :is(tr.notice, tr.banner) { display: grid; grid-template-columns: 19px auto minmax(0, 1fr) auto auto; column-gap: 0; row-gap: 1px; align-items: center; padding: 7px 0 6px !important; background: #fff var(--stipple) 0 0 / 3px 3px; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td, :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.says > div { display: contents !important; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.lead > span.g { grid-column: 1; grid-row: 1 / 3; } :is(table.works, table.on-page) tr.banner > td.lead > :is(img, span.room.pic) { grid-column: 2; grid-row: 1 / 3; } table.works tr.notice > td.lead > a { grid-column: 2 / 5; } :is(table.works, table.on-page) tr.banner > td.lead > a { grid-column: 3 / 5; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.lead > a { grid-row: 1; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.says span.days { grid-column: 4; grid-row: 2; justify-self: end; margin-right: 10px; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.says label.tk { grid-column: 5; grid-row: 2; justify-self: end; margin: 0 4px 0 0; } :is(table.works, table.on-page) :is(tr.notice, tr.banner) > td.says button.del { grid-column: 5; grid-row: 1; justify-self: end; padding-left: 12px; } } /* issue 0441, 0443: every table of the admin enclosed in one light grey rule, every rule of it that grey; each row 9px in, 8 clear of the rule, its rules running to it. A column at a table's edge given in px counts the 9 in its width (calc(… + var(--in)) in the view's colgroup) */ :is(table.grid, table.ledger, table.log) { --tear: #c4c4bf; --in: 9px; position: relative; } /* the rule is drawn over the table, as its sticky heads and moving rows would paint over an outline */ :is(table.grid, table.ledger, table.log)::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--tear); pointer-events: none; z-index: 5; } :is(table.grid, table.ledger, table.log):not(:has(td, th))::before { content: none; } :is(table.grid, table.ledger) tr.bar .on-table { padding-left: var(--in); padding-right: var(--in); box-shadow: inset 0 1.5px 0 var(--tear), inset 0 -1px 0 var(--tear); } :is(table.grid, table.ledger, table.log) tr:not(.bar, .gap) > :first-child { padding-left: var(--in); } :is(table.grid, table.ledger, table.log) tr:not(.bar, .gap) > :last-child { padding-right: var(--in); } :is(table.grid, table.ledger) tr:not(.bar, .gap) > td.g:first-child { padding-left: var(--in) !important; } :is(table.grid, table.ledger) col.t:first-child { width: calc(24px + var(--in)) !important; } :is(table.grid, table.ledger) col.g:first-child { width: calc(19px + var(--in)) !important; } table.on-page.ticking tr.bar .on-table { padding-left: calc(19px + var(--in)); } table.log .lamp { white-space: normal; } table.works:not(.search) tr.bar .on-table { padding-left: var(--in); } table.works:not(.search) col.g { width: calc(19px + var(--in)) !important; } table.works.by-collection:not(.search) col.g { width: calc(43px + var(--in)) !important; } table.works:not(.search) col:last-child { width: calc(112px + var(--in)) !important; } table.works:not(.search) td.g { padding-left: var(--in) !important; } table.works:not(.search) :is(thead, tbody.heads) th.t { padding-left: var(--in); } table.works.by-collection:not(.search) tr:not(.grp) > td.g { padding-left: calc(24px + var(--in)) !important; } table.works.by-collection:not(.search) tr:not(.grp) > td.g::before { width: calc(24px + var(--in)); } table.works.by-collection:not(.search) tbody.heads th.t { padding-left: calc(19px + var(--in)); } table.works.by-collection:not(.search) tbody.heads th.t button.fold { left: calc(43px + var(--in)); } table.works:not(.search) tr.grp th { padding-left: var(--in); padding-right: var(--in); } :is(table.works:not(.search), table.on-page) :is(tr.notice, tr.banner) > td.lead { padding-left: var(--in) !important; } table.works tr.gap .hole, table.works.by-collection tr.gap .hole { inset: 0; border-radius: 0; box-shadow: none; background: #fff var(--stipple) 0 0 / 3px 3px; } #work table.ledger.variants tr > :first-child { padding-left: var(--in); } #work table.ledger.variants tr > :last-child { padding-right: var(--in); } /* a list a phone draws as lines: the row, not its cells, keeps the 9 */ @media (max-width: 480px) { :is(table.orders, table.stock, table.ledger.book, table.search, table.members, table.discounts, table.customers, table.checks, table.trash) tr:not(.grp, .bar) > :is(:first-child, :last-child) { padding-left: 0; padding-right: 0; } :where(table.orders, table.works, table.stock, table.ledger.book, table.search, table.members, table.discounts, table.customers, table.checks, table.trash, table.variants:has(td.v + td.v)) tr:not(.grp, .bar, .gap, .none) { padding-left: var(--in) !important; padding-right: var(--in) !important; } table.grid.ticking tr:not(.grp, .bar, .gap, .none) { padding-left: calc(28px + var(--in)) !important; } table.grid.ticking td.t { left: var(--in); } table.orders tr.held, table.variants:has(td.v + td.v) tr.new { margin: 0; padding-left: var(--in) !important; padding-right: var(--in) !important; } table.grid.ticking tr.held:not(.grp) { padding-left: calc(28px + var(--in)) !important; } table.on-page.ticking tr.bar .on-table { padding-left: var(--in); } } @media (max-width: 480px) { table.works:not(.search) tr:not(.grp, .gap, .bar) { padding-left: var(--in); padding-right: var(--in); } table.works:not(.search) tr.grp th { padding: 7px var(--in) 6px !important; } table.works.ticking:not(.search) tr:not(.grp, .gap, .bar, .notice, .banner) { padding-left: calc(28px + var(--in)) !important; } table.works.ticking:not(.search) tr:not(.grp):has(> td.g) { padding-left: calc(43px + var(--in)) !important; } table.works.by-collection.ticking:not(.search) tr:not(.grp):has(> td.g) { padding-left: calc(59px + var(--in)) !important; } table.works.ticking:not(.search) :is(td.t, td.g) { left: var(--in); } table.works.ticking:not(.search) tr:has(> td.g) td.t { left: calc(19px + var(--in)); } table.works.by-collection.ticking:not(.search) tr:has(> td.g) td.t { left: calc(35px + var(--in)); } table.works:not(.search) td.g { padding-left: 0 !important; } table.works.by-collection.ticking:not(.search) tr:not(.grp) > td.g { padding-left: 16px !important; } table.works.by-collection.ticking:not(.search) tr:not(.grp) > td.g::before { left: calc(-1 * var(--in)); width: calc(16px + var(--in)); } table.works.ticking:not(.search) :is(thead, tbody.heads) tr:not(.bar) { padding: 0 var(--in) !important; } table.works.ticking:not(.search) :is(thead, tbody.heads) th.t { padding-left: 0; } table.works.by-collection.ticking:not(.search) tbody.heads th.t { padding-left: 19px !important; } :is(table.works:not(.search), table.on-page) :is(tr.notice, tr.banner) { padding: 7px var(--in) 6px !important; } :is(table.works:not(.search), table.on-page) :is(tr.notice, tr.banner) > td.lead { padding-left: 0 !important; } }