:root { color-scheme: dark; --bg: #0f1720; --panel: #17212b; --panel-alt: #1e2a37; --border: #2a3b4a; --text: #e6edf3; --muted: #93a4b3; --accent: #4da3ff; --good: #3fb950; --warn: #d29922; --bad: #f85149; --direct: #bc8cff; --brand-red: #ff0044; font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } /* Light theme -- switched on by adding data-theme="light" to (see the sun/moon toggle in the topbar and assets/theme.js). Every rule in this file is already built on these custom properties, so overriding them here is enough to re-theme the whole site without touching anything else. --brand-red is intentionally left the same in both. */ :root[data-theme="light"] { color-scheme: light; --bg: #f3f5f8; --panel: #ffffff; --panel-alt: #eef1f5; --border: #d6dde4; --text: #16212b; --muted: #5b6b7a; --accent: #2f7fe0; --good: #1f8a44; --warn: #a8690a; --bad: #c8342c; --direct: #8250df; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); } a, a:visited { color: var(--accent); } a:hover { color: var(--text); } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; background: var(--panel); border-bottom: 1px solid var(--border); border-top: 3px solid var(--brand-red); } .topbar h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 1.25rem; margin: 0; } .topbar-nav { display: flex; gap: 8px; align-items: center; } .nav-pill, a.nav-pill, a.nav-pill:visited { color: var(--muted); text-decoration: none; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; display: inline-block; } a.nav-pill:hover { color: var(--text); border-color: var(--accent); } .nav-pill.active, a.nav-pill.active, a.nav-pill.active:visited, a.nav-pill.active:hover { background: var(--accent); color: #04121f; border-color: var(--accent); } /* Light/dark theme toggle -- a pair of icon buttons rather than one button that alternates, so both choices are always visible at a glance. */ .theme-toggle-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; width: 34px; height: 34px; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; } .theme-toggle-btn:hover { border-color: var(--accent); color: var(--text); } .help-pill, a.help-pill, a.help-pill:visited { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; line-height: 1; cursor: pointer; text-decoration: none; flex-shrink: 0; } a.help-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--panel-alt); } /* User manual page */ .manual-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; list-style: none; margin: 0; padding: 0; } .manual-toc li { margin: 0; } .manual-toc a { color: var(--accent); text-decoration: none; font-size: 0.9rem; } .manual-toc a:hover { text-decoration: underline; } .manual-section h2 { margin: 0 0 10px; font-size: 1.1rem; } .manual-section h3 { margin: 18px 0 6px; font-size: 0.92rem; color: var(--text); } .manual-section p { margin: 0 0 10px; line-height: 1.5; } .manual-section ul { margin: 0 0 10px; padding-left: 20px; line-height: 1.55; } .manual-section li { margin-bottom: 4px; } .manual-benefit { font-weight: 600; } .manual-top { display: inline-block; margin-top: 4px; font-size: 0.8rem; color: var(--muted); text-decoration: none; } .manual-top:hover { color: var(--accent); } /* Brand mark — the MK3.ORG logo + "GRID", used in every page's

via stats_brand_heading() in includes/functions.php. */ .brand { display: inline-flex; align-items: center; gap: 8px; } /* The Turbo List Pro logo is a full-colour mark, not a black-on-transparent glyph -- unlike the old Victorian Stamps placeholder, it must never be colour-inverted for dark theme or it'll come out with wrong colours. */ .brand-logo { height: 88px; width: auto; display: block; } .brand-name { font-weight: 800; letter-spacing: 0.06em; color: var(--brand-red); } .brand-page { color: var(--muted); font-weight: 500; } main { padding: 24px; max-width: 1200px; margin: 0 auto; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; } .card .num { font-size: 1.6rem; font-weight: 700; } .card .label { color: var(--muted); font-size: 0.8rem; margin-top: 4px; border: none; padding: 0; display: block; overflow: visible; } .cards-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .cards-row .cards { margin-bottom: 0; flex: 0 0 auto; } .quick-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; } .quick-search input[type="text"] { min-width: 220px; } .view-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } .view-tabs a { color: var(--muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .view-tabs a:hover { color: var(--text); } .view-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); } .filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; } .filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--muted); } .filters input, .filters select { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 8px; font-size: 0.9rem; } .filters button, .filters a.export { background: var(--accent); color: #04121f; border: none; border-radius: 6px; padding: 8px 14px; font-weight: 600; cursor: pointer; text-decoration: none; } .filters a.reset { color: var(--muted); text-decoration: none; align-self: center; } .filters a.reset:hover { color: var(--text); } table.stats-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .stats-table th, .stats-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.88rem; } .stats-table th { background: var(--panel-alt); color: var(--muted); font-weight: 600; } .stats-table th a { color: inherit; text-decoration: none; } .stats-table th a:hover { color: var(--text); } .stats-table tbody tr:hover { background: var(--panel-alt); } .stats-table tbody tr.order-row { cursor: pointer; } .stats-table tbody tr.order-row.no-address { background: rgba(155,89,182,0.07); } .stats-table tbody tr.order-row.no-address:hover { background: rgba(155,89,182,0.13); } .stats-table td.empty { text-align: center; color: var(--muted); padding: 30px; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .badge-open { background: rgba(63,185,80,0.15); color: var(--good); } .badge-closed { background: rgba(77,163,255,0.15); color: var(--accent); } .badge-abandoned { background: rgba(210,153,34,0.15); color: var(--warn); } .badge-paid { background: rgba(63,185,80,0.15); color: var(--good); } .badge-unpaid { background: rgba(210,153,34,0.15); color: var(--warn); } .badge-overdue { background: rgba(200,52,44,0.18); color: var(--bad); } .badge-direct { background: rgba(188,140,255,0.18); color: var(--direct); } .badge-shipped { background: rgba(63,185,80,0.15); color: var(--good); } .badge-not-shipped { background: rgba(200,52,44,0.18); color: var(--bad); } a.btn.btn-add-address, a.btn.btn-add-address:visited { background: #8b5cf6; color: #ffffff; white-space: nowrap; margin-left: 6px; padding: 2px 8px; font-size: 0.72rem; line-height: 1.5; vertical-align: middle; } a.btn.btn-add-address:hover { background: #7c3aed; color: #ffffff; } button.badge { border: none; appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; } button.badge:hover { filter: brightness(1.18); } .payment-toggle-form { display: inline-block; } /* Status pills double as a "click to copy avatar UUID" control — see copyAvatarKey() in index.php. */ .badge.copy-key { cursor: pointer; user-select: none; } .badge.copy-key:hover { filter: brightness(1.25); } .badge.copy-key:active { filter: brightness(0.9); } .pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 16px; color: var(--muted); } .pager a { color: var(--accent); text-decoration: none; } .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-box { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 32px; width: 320px; display: flex; flex-direction: column; gap: 14px; } .login-box h1 { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 6px; text-align: center; } .login-box .brand-logo { height: 42px; } .login-logo { height: 64px; width: auto; display: block; margin: 0 auto 4px; } .login-box label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--muted); } .login-box input { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; } .login-box button { background: var(--accent); color: #04121f; border: none; border-radius: 6px; padding: 10px; font-weight: 700; cursor: pointer; } .login-box .error { color: var(--bad); font-size: 0.85rem; margin: 0; } /* ============================================================ Client Directory & Label Printer — additions on top of the shared MK3.ORG dark theme above (variables, topbar, cards, table, badges, login-page are all reused as-is). ============================================================ */ .notice, .error-banner { border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 0.9rem; } .notice { background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.35); color: var(--good); } .error-banner { background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.35); color: var(--bad); } .notice-banner { border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 0.9rem; background: rgba(155,89,182,0.12); border: 1px solid rgba(155,89,182,0.35); color: #b48ee0; } .notice-banner a { color: inherit; text-decoration: underline; } .panel-box { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; } .panel-box h2 { margin: 0 0 14px; font-size: 1rem; color: var(--text); } .client-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; } .client-form .full { grid-column: 1 / -1; } .client-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; color: var(--muted); } /* A hidden attribute on a .client-form label (e.g. Direct Sale hiding Duration/End Time/Bid Increment) needs to beat the "display: flex" above -- same specificity, so without this the field stayed visible. */ .client-form label[hidden] { display: none; } .client-form input, .client-form textarea { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 0.9rem; } .client-form textarea { min-height: 60px; resize: vertical; } .client-combobox { position: relative; } .client-search-results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; max-height: 220px; overflow-y: auto; z-index: 20; box-shadow: 0 4px 14px rgba(0,0,0,0.28); } .client-search-item { padding: 8px 10px; cursor: pointer; font-size: 0.85rem; color: var(--text); } .client-search-item:hover, .client-search-item.active { background: var(--panel-alt); } .client-search-empty { padding: 8px 10px; font-size: 0.82rem; color: var(--muted); } .client-search-add { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border); } .field-note { margin-top: 4px; font-size: 0.78rem; color: #b48ee0; } /* Author rules always beat the UA stylesheet's [hidden] { display: none }, even with equal specificity, so without this the note would show up regardless of the hidden attribute. Scoping display:block to the not-hidden case lets the browser's own [hidden] rule take over instead. */ .field-note:not([hidden]) { display: block; } .tracking-input-row { display: flex; gap: 6px; } .tracking-input-row input { flex: 1; min-width: 0; } .combobox-caret { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--muted); font-size: 0.7rem; pointer-events: none; } .client-combobox input.client-search-input { padding-right: 30px; width: 100%; box-sizing: border-box; } /* Used again by the auction listing's title/description history dropdowns (no caret, just a plain full-width field), so this is a plainer, lower-specificity twin of the rule above rather than reusing its class. */ .client-combobox input, .client-combobox textarea { width: 100%; box-sizing: border-box; } .pill-toggle { display: flex; gap: 8px; flex-wrap: wrap; } .pill-btn, .method-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-alt); color: var(--muted); font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; } .pill-btn:hover, .method-btn:hover { filter: brightness(1.1); } .pill-btn.status-unpaid.active { background: rgba(210,153,34,0.15); color: var(--warn); border-color: transparent; } .pill-btn.status-paid.active { background: rgba(63,185,80,0.15); color: var(--good); border-color: transparent; } .method-btn.active.method-bank { background: rgba(77,163,255,0.15); color: var(--accent); border-color: transparent; } .method-btn.active.method-paypal { background: rgba(0,112,186,0.16); color: #4da3ff; border-color: transparent; } .method-icon { width: 18px; height: 18px; flex-shrink: 0; } .method-icon-paypal { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: #003087; color: #fff; font-weight: 800; font-style: italic; font-size: 0.72rem; font-family: Georgia, 'Times New Roman', serif; flex-shrink: 0; } .client-form .form-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; } button, .btn { background: var(--accent); color: #04121f; border: none; border-radius: 6px; padding: 9px 16px; font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; display: inline-block; } button:hover, .btn:hover { filter: brightness(1.08); } /* `a, a:visited { color: var(--accent) }` above outranks the plain class selector `.btn` once a link has been visited (a:visited has one more pseudo-class in its specificity than a class alone), which made visited ".btn" links render accent-colored text on the accent-colored button background -- invisible until :hover, which happens to be declared after :visited and so wins back the readable color. Pin the button text colors explicitly for every link state so this can't happen regardless of whether the browser considers the link visited. */ a.btn, a.btn:visited, a.btn:hover { color: #04121f; } .btn-cta { background: #22c55e; } a.btn-cta, a.btn-cta:visited, a.btn-cta:hover { color: #04121f; } .btn-secondary { background: var(--panel-alt); color: var(--text); border: 1px solid var(--border); } a.btn-secondary, a.btn-secondary:visited, a.btn-secondary:hover { color: var(--text); } .btn-danger { background: transparent; color: var(--bad); border: 1px solid rgba(248,81,73,0.4); padding: 5px 10px; font-size: 0.8rem; } .btn-danger:hover { background: rgba(248,81,73,0.12); } .btn-small { padding: 5px 10px; font-size: 0.8rem; } /* Icon-only tracking-copy button on orders.php -- just the van emoji, sized up a bit so it reads clearly without a text label next to it. */ .copy-tracking-btn { padding: 4px 12px; } .copy-tracking-btn .tracking-icon { font-size: 1.35rem; line-height: 1; } .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .toolbar .toolbar-actions { display: flex; gap: 10px; align-items: center; } /* NOT display:flex on the itself -- that overrides its default table-cell display, which drops it out of the table's row-height/border alignment entirely (the cell shrinks to fit only its own content, so its border-bottom ends up floating partway up the row instead of lining up with the rest of it whenever another cell in that row -- e.g. a wrapped multi-line address -- is taller). The flex layout lives on an inner wrapper div instead, so the stays a normal, correctly-sized cell. */ .stats-table td.actions { white-space: nowrap; } .actions-inner { display: flex; gap: 8px; } .stats-table td.address-cell { color: var(--muted); font-size: 0.82rem; line-height: 1.4; } /* ---------------- Print / label sheet ---------------- */ .print-toolbar { margin-bottom: 20px; } .label-sheet { display: grid; grid-template-columns: var(--label-col-w) var(--label-col-w); column-gap: var(--label-col-gap); grid-auto-rows: var(--label-row-h); background: var(--panel); border: 1px dashed var(--border); margin: 0 auto 24px; width: calc(var(--label-col-w) * 2 + var(--label-col-gap)); } .label { border: 1px dotted var(--border); padding: 4mm 5mm; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .label[draggable="true"] { cursor: grab; } .label[draggable="true"]:active { cursor: grabbing; } .label.dragging { opacity: 0.35; } .label.drop-target { border-style: solid; border-color: var(--accent); background: rgba(77,163,255,0.08); } .label-empty { align-items: center; } .label-empty .empty-hint { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .label .line { font-size: 11pt; line-height: 1.35; color: var(--text); } .label .line.business { font-weight: 700; } .label .line.postcode { font-weight: 700; } @media print { header.topbar, .print-toolbar, .no-print { display: none !important; } body, main { background: #fff; margin: 0; padding: 0; max-width: none; } .label-sheet { background: #fff; border: none; margin: 0; width: auto; page-break-after: always; } .label-sheet:last-child { page-break-after: auto; } .label { border: none; padding: 4mm 5mm; } .label .line { color: #000; } @page { size: A4; margin: var(--label-page-margin-top) var(--label-page-margin-right) var(--label-page-margin-bottom) var(--label-page-margin-left); } } /* ---------------- Live label preview (Add/Edit forms) ---------------- */ .label-preview-wrap { margin-bottom: 18px; } .label-preview-caption { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; } .label-preview-box { width: 297px; max-width: 100%; height: 171px; border: 1px dashed var(--border); border-radius: 6px; padding: 12px 14px; background: var(--panel-alt); display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; } .label-preview-box .line { font-size: 11pt; line-height: 1.35; color: var(--text); } .label-preview-box .line.business { font-weight: 700; } .label-preview-box .line.postcode { font-weight: 700; } .label-preview-placeholder { color: var(--muted); font-size: 0.85rem; font-style: italic; } /* ---------------- Orders ---------------- */ .order-item-row { display: grid; grid-template-columns: 1fr 190px; gap: 16px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 12px; } .order-item-main { display: grid; grid-template-columns: 1fr 140px; gap: 12px 16px; } .order-item-main .full { grid-column: 1 / -1; } .order-item-main label, .order-item-image label { display: flex; flex-direction: column; gap: 5px; font-size: 0.8rem; color: var(--muted); } .order-item-main input, .order-item-main textarea { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 0.9rem; } /* Price bid: type the exact amount, no spinner arrows or scroll-to-change -- those are for quick small adjustments, not for entering a specific bid. */ .item-price::-webkit-outer-spin-button, .item-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .item-price { -moz-appearance: textfield; } .order-item-image { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .image-dropzone { flex: 1; min-height: 100px; border: 1px dashed var(--border); border-radius: 8px; background: var(--panel); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; padding: 8px; text-align: center; } .image-dropzone:hover { border-color: var(--accent); } .image-dropzone.dragover { border-color: var(--accent); background: rgba(77,163,255,0.08); } .image-dropzone-text { color: var(--muted); font-size: 0.75rem; } .image-preview { max-width: 100%; max-height: 110px; display: block; border-radius: 4px; } .remove-image-label { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); } .remove-item-btn { align-self: flex-start; } .order-totals { display: flex; flex-direction: column; gap: 6px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; font-size: 0.9rem; color: var(--muted); } .order-totals .grand-total { color: var(--text); font-weight: 700; font-size: 1.05rem; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); } /* ---------------- Orders: "Who might want this?" inline lookup ---------------- */ .item-interest-block { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 2px; display: flex; flex-direction: column; gap: 8px; } .item-interest-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .item-interest-status { color: var(--muted); font-size: 0.8rem; } .item-interest-results { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .item-interest-tags { font-size: 0.85rem; word-break: break-word; } .item-interest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .item-interest-list li { font-size: 0.85rem; } .item-interest-detail { color: var(--muted); font-size: 0.78rem; margin: 2px 0 0 0; } .item-interest-detail.item-interest-want { color: var(--accent); font-size: 0.8rem; } /* ---------------- Invoice ---------------- */ .invoice-box { max-width: 800px; margin: 0 auto 40px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 32px 36px; } .invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .invoice-brand .brand-logo { height: 60px; } .invoice-brand-url { margin-top: 6px; color: var(--muted); font-size: 0.8rem; } .invoice-meta { text-align: right; color: var(--muted); font-size: 0.9rem; } .invoice-meta h2 { margin: 0 0 6px; color: var(--text); font-size: 1.3rem; } .invoice-bill-to { margin-bottom: 24px; } .invoice-bill-to-label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .invoice-bill-to .line { font-size: 0.95rem; line-height: 1.4; } .invoice-bill-to .line.business { font-weight: 700; } table.invoice-items { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .invoice-items th, .invoice-items td { padding: 10px 8px; border-bottom: 1px solid var(--border); font-size: 0.9rem; vertical-align: top; } .invoice-items th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .invoice-items td.empty { text-align: center; color: var(--muted); padding: 24px; } .invoice-item-desc { white-space: pre-line; } .invoice-item-thumb { max-width: 64px; max-height: 64px; border-radius: 4px; display: block; } .invoice-items tfoot td { border-bottom: none; } .invoice-total-row td { font-weight: 700; font-size: 1.05rem; border-top: 2px solid var(--border); padding-top: 12px; } .invoice-notes { color: var(--muted); font-size: 0.85rem; padding-top: 16px; border-top: 1px solid var(--border); } .invoice-footer-note { text-align: center; } /* Invoice/Packing Slip Template settings previews (2026-09-28) */ .tpl-fields-preview { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; } .tpl-fields-col { flex: 1 1 380px; min-width: 300px; } .tpl-preview-col { flex: 1 1 320px; min-width: 280px; max-width: 440px; } .tpl-preview-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 8px; } .invoice-tpl-preview { max-width: none; margin: 0; padding: 18px 20px; font-size: 0.82rem; pointer-events: none; user-select: none; } .invoice-tpl-preview .brand-logo { height: 40px; } .invoice-tpl-preview .invoice-meta h2 { font-size: 1.05rem; } /* Black-and-white toggle: previews the print-in-B&W option on screen too, via the same grayscale filter used in the print stylesheet below. */ .invoice-box.invoice-bw { filter: grayscale(1); } @media print { .brand-logo { filter: none; } /* Nothing here previously reset the invoice box's dark-theme colors, so it printed as a dark navy box with pale text instead of plain black-on-white -- wasteful of ink and hard to read on paper. Since every invoice rule is built on the shared --panel/--text/--muted/etc. tokens, redefining them here (rather than overriding each rule one by one) flips the whole invoice to print-appropriate colors at once. */ .invoice-box { --panel: #fff; --panel-alt: #f4f4f4; --border: #ccc; --text: #000; --muted: #444; border: none; /* Own inset instead of the page margin -- see note above. */ padding: 10mm 14mm; max-width: none; background: #fff; color: #000; } body.invoice-bw-print .invoice-box, .invoice-box.invoice-bw { filter: grayscale(1) !important; } /* Bulk invoice/packing-slip print (invoices_bulk.php, packing_slip.php): every box after the first starts a fresh printed page. */ .invoice-box + .invoice-box { page-break-before: always; } } /* ---------------- Invoice: "copy for Messenger" box ---------------- */ .messenger-textarea { width: 100%; min-height: 560px; background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 16px 18px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; line-height: 1.6; resize: vertical; white-space: pre-wrap; } /* ---------------- Listing Template: drag-to-reorder sections ---------------- */ .tpl-reorder { margin-bottom: 10px; } .tpl-reorder-label { font-weight: 600; font-size: 0.85rem; color: var(--text); margin-bottom: 6px; } .tpl-reorder-hint { font-weight: 400; color: var(--muted); font-size: 0.8rem; margin-left: 6px; } .tpl-block-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tpl-block { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px; cursor: grab; } .tpl-block.dragging { opacity: 0.4; } .tpl-block-handle { color: var(--muted); font-size: 0.95rem; flex-shrink: 0; cursor: grab; } .tpl-block-preview { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tpl-block-btns { display: flex; gap: 2px; flex-shrink: 0; } .tpl-block-move { width: 24px; height: 24px; padding: 0; line-height: 1; font-size: 0.7rem; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; } .tpl-block-move:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .tpl-block-move:disabled { opacity: 0.35; cursor: default; } /* Listing Template: clickable-emoji overlay on the textarea + swap picker */ .tpl-editor-wrap { position: relative; } .tpl-emoji-mirror { position: absolute; top: 0; left: -99999px; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible; visibility: hidden; resize: none; white-space: pre-wrap; word-wrap: break-word; pointer-events: none; } .tpl-emoji-overlay { position: absolute; overflow: hidden; pointer-events: none; } .tpl-emoji-hit { position: absolute; padding: 0; margin: 0; background: transparent; border: 1px dashed transparent; border-radius: 3px; color: transparent; cursor: pointer; pointer-events: auto; } .tpl-emoji-hit:hover { border-color: var(--accent); background: rgba(77,163,255,0.18); } .tpl-emoji-picker { position: absolute; z-index: 95; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); padding: 10px; width: 280px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .tpl-emoji-picker[hidden] { display: none !important; } .tpl-emoji-picker-head { font-size: 0.72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; } .tpl-emoji-picker-row { display: flex; flex-wrap: wrap; gap: 4px; } .tpl-emoji-opt { width: 32px; height: 32px; padding: 0; font-size: 1.15rem; line-height: 1; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .tpl-emoji-opt:hover { border-color: var(--accent); background: var(--panel); } /* ---------------- Invoice item thumbnails: hover-to-magnify ---------------- Same pattern as the stats site's reference-image previews: a small thumbnail with a magnifier badge that pops up a much larger version near the cursor on hover, so a tiny item photo can actually be read clearly. */ .thumb-wrap { position: relative; display: inline-block; } .thumb { cursor: zoom-in; } .mag-badge { position: absolute; bottom: -4px; right: -4px; font-size: 0.7rem; line-height: 1; background: rgba(0,0,0,0.65); border-radius: 4px; padding: 2px 3px; pointer-events: none; } .thumb-zoom-popup { position: fixed; z-index: 100; border: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.55); background: var(--panel); padding: 5px; display: none; pointer-events: none; } .thumb-zoom-popup img { display: block; max-width: 420px; max-height: 420px; border-radius: 4px; } /* ---------------- Auction listing generator: postage checkboxes ---------------- */ .postage-checkbox-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 4px; } .postage-checkbox-columns h3 { margin: 0 0 8px; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } .postage-checkbox-list { display: flex; flex-direction: column; gap: 7px; } .postage-checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text); cursor: pointer; } .postage-checkbox-item input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } /* ---------------- Auction listing generator: abbreviation chips ---------------- */ .abbr-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .abbr-chip-form { display: inline-block; } .abbr-chip { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; } .abbr-chip:hover { background: rgba(224,79,79,0.15); border-color: transparent; color: var(--bad); } .abbr-add-form { display: flex; gap: 8px; align-items: center; } .abbr-add-form input[type="text"] { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 0.9rem; width: 160px; } /* ---------------- Auction listing generator: template editor ---------------- */ .token-code { display: inline-block; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--accent); } /* ---------------- Dashboard: month-by-month mini bar ---------------- */ .bar-track { background: var(--panel-alt); border-radius: 4px; height: 8px; overflow: hidden; } .bar-fill { background: var(--accent); height: 100%; border-radius: 4px; } /* --- Stamp Library (12th session) --------------------------------------- */ .lib-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); } .lib-count { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--panel-alt); color: var(--muted); font-size: 0.72rem; text-align: center; } .lib-selbar { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; position: sticky; top: 0; z-index: 5; } .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .lib-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .lib-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .lib-card.lib-sold { opacity: 0.7; } .lib-thumb { position: relative; background: var(--panel-alt); height: 190px; display: flex; align-items: center; justify-content: center; cursor: default; } .lib-available .lib-thumb { cursor: pointer; } .lib-thumb img { max-width: 100%; max-height: 190px; display: block; } .lib-thumb a { display: flex; align-items: center; justify-content: center; max-height: 190px; } .lib-missing { color: var(--bad); font-size: 0.85rem; } .lib-thumb-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: center; gap: 6px; } .lib-check { background: var(--panel); border-radius: 6px; padding: 3px 5px; line-height: 0; } .lib-qty-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 7px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border); color: var(--text); font: 700 0.78rem/1 ui-monospace, Consolas, monospace; box-sizing: border-box; } .lib-check input { width: 18px; height: 18px; margin: 0; cursor: pointer; } .lib-check input:disabled { cursor: not-allowed; } .lib-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; } .lib-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .lib-auction-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; background: rgba(139,92,246,0.15); color: #8b5cf6; text-decoration: none; } .lib-auction-link:hover, .lib-auction-link:visited:hover { background: rgba(139,92,246,0.25); color: #8b5cf6; } .lib-auction-link:visited { color: #8b5cf6; } /* Same pill, shown over the thumbnail next to the checkbox/stock badge -- needs a solid, theme-matching background instead of the tint above so it reads clearly against any stamp photo. */ .lib-auction-top { background: var(--panel); border: 1px solid var(--border); color: var(--text); } .lib-auction-top:hover, .lib-auction-top:visited { color: var(--text); } .lib-title { font-weight: 600; color: var(--text); word-break: break-word; } .lib-title-has-desc { cursor: help; text-decoration: underline dotted var(--muted); text-underline-offset: 3px; } .lib-file { color: var(--muted); font-size: 0.75rem; word-break: break-all; font-weight: 400; } .lib-desc { color: var(--muted); font-size: 0.8rem; max-height: 5.2em; overflow: hidden; } .lib-edit summary { cursor: pointer; color: var(--muted); font-size: 0.78rem; } .lib-edit form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .lib-edit input, .lib-edit textarea { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 7px; font: inherit; font-size: 0.82rem; } .lib-edit button { align-self: flex-start; } .lib-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; color: var(--muted); } /* Images attached to a listing / auction (Listing page + Auctions list). */ .listing-images { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .listing-image { position: relative; width: 120px; height: 120px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .listing-image img { max-width: 100%; max-height: 100%; } .listing-image button { position: absolute; top: 4px; right: 4px; padding: 0 6px; font-size: 0.8rem; line-height: 1.4; } .listing-image a.listing-image-save { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); color: #fff; border-radius: 6px; font-size: 0.95rem; line-height: 1; text-decoration: none; box-sizing: border-box; } .listing-image a.listing-image-save:hover { background: rgba(0,0,0,0.8); color: #fff; } .auction-thumbs { display: flex; gap: 4px; flex-wrap: wrap; } .auction-thumbs img { width: 48px; height: 48px; object-fit: contain; background: var(--panel-alt); border-radius: 4px; } .stats-table tr.auction-ended td { background: rgba(200,52,44,0.06); } .stats-table tr.auction-soon td:first-child { box-shadow: inset 3px 0 0 var(--warn); } a.card, a.card:visited { color: var(--text); } a.card:hover { border-color: var(--accent); } #libClearSel[hidden], #attachedImagesBox[hidden], #invoicePanel[hidden], #attachedImagesWarn[hidden] { display: none !important; } /* --- Straighten editor (Stamp Library) ---------------------------------- */ .st-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; } .st-modal[hidden] { display: none !important; } .st-dialog { width: min(1000px, 100%); max-height: calc(100vh - 32px); overflow: auto; margin: 0; } .st-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .st-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; } .st-angle { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 280px; } .st-angle input[type=range] { flex: 1; accent-color: var(--accent); } .st-angle input[type=number] { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 6px; } .st-grid { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.85rem; } .st-stage { background: var(--panel-alt); border-radius: 8px; padding: 2px; display: flex; justify-content: center; } .st-stage canvas { display: block; max-width: 100%; } .st-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } #stRestore[hidden], .lib-edited[hidden] { display: none !important; } .lib-edited { font-size: 0.72rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; } /* Hover magnifier (same look as the Cropper's). */ #stampLoupe { position: fixed; padding: 8px 8px 6px; background: #1e2127; border-radius: 10px; box-shadow: 0 10px 36px rgba(0,0,0,.45); pointer-events: none; z-index: 90; } #stampLoupe[hidden] { display: none !important; } #stampLoupe img { display: block; object-fit: contain; border-radius: 4px; background: #111; } #stampLoupe .stamp-loupe-name { color: #e6e8ec; font-size: 12px; padding-top: 5px; text-align: center; } /* Green "List" shortcut pill next to a library card's status badge. */ .lib-badges { display: inline-flex; align-items: center; gap: 6px; } .lib-badges { flex-wrap: wrap; } a.lib-list-pill, a.lib-list-pill:visited { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--good); color: #04121f; font-size: 0.75rem; font-weight: 700; text-decoration: none; line-height: 1.5; } a.lib-list-pill:hover { filter: brightness(1.12); color: #04121f; } /* "+ Order" pill on each library card -- opens a single shared floating popover (#orderAddPopover, positioned by JS the same way #colourPicker is) rather than a per-card dropdown. .lib-card has overflow:hidden for its rounded corners and the grid column is only ~200px wide, so anything wider than that -- like a search box over a growing list of open orders -- needs to escape the card rather than expand inside it. */ button.lib-order-pill { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: var(--good); color: #04121f; font-size: 0.85rem; font-weight: 800; line-height: 1; cursor: pointer; } button.lib-order-pill:hover { filter: brightness(1.12); } .order-add-popover { position: absolute; z-index: 95; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); padding: 8px; width: 260px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .order-add-popover[hidden] { display: none !important; } a.oap-new, a.oap-new:visited { display: block; text-align: center; padding: 7px 8px; border-radius: 6px; background: var(--good); color: #04121f; font-weight: 700; font-size: 0.85rem; text-decoration: none; margin-bottom: 2px; } a.oap-new:hover { filter: brightness(1.08); } .oap-search { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 0.82rem; margin-bottom: 2px; } .oap-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } a.oap-item, a.oap-item:visited { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 0.82rem; } a.oap-item:hover { background: var(--panel-alt); } a.oap-item[hidden] { display: none; } .oap-item-main { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .oap-item-id { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; } .oap-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oap-item-date { color: var(--muted); font-size: 0.72rem; flex-shrink: 0; } .oap-empty { color: var(--muted); font-size: 0.8rem; padding: 6px 8px; text-align: center; } .lib-delete-btn { margin-left: auto; padding: 3px 9px; font-size: 0.75rem; } /* Colour sort (Stamp Library) */ .lib-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); vertical-align: middle; flex: 0 0 auto; } .lib-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); font-size: 0.95rem; padding: 8px 2px 0; border-bottom: 1px solid var(--border); } .lib-group .lib-swatch { width: 18px; height: 18px; } .lib-edit select { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 7px; font-size: 0.82rem; } /* Colour reassign popover + colour manager (Stamp Library) */ button.lib-swatch-btn { padding: 0; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; } button.lib-swatch-btn:hover { box-shadow: 0 0 0 2px var(--accent); filter: none; } .lib-swatch-empty { background: transparent; border: 1px dashed var(--muted); } .colour-picker { position: absolute; z-index: 95; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4); padding: 8px; min-width: 190px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .colour-picker[hidden] { display: none !important; } .colour-picker-head { font-size: 0.75rem; color: var(--muted); padding: 2px 6px 6px; } .colour-pick-opt { display: flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--text); text-align: left; padding: 5px 8px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; } .colour-pick-opt:hover { background: var(--panel-alt); filter: none; } .colour-pick-opt.active { background: var(--accent-2, rgba(77,163,255,.16)); outline: 1px solid var(--accent); } .colour-pick-manage { font-size: 0.78rem; padding: 6px 8px 2px; border-top: 1px solid var(--border); margin-top: 4px; } .colour-table input[type=color] { width: 42px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; } .colour-name-input, .colour-add-form input[type=text], .colour-add-form select { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 8px; font-size: 0.88rem; } .colour-add-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } .colour-add-form label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); } .colour-add-form input[type=color] { width: 42px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; } /* Listing page: add images (gallery / browse / drag & drop) */ .listing-images-box { margin-bottom: 14px; } .listing-images[hidden] { display: none !important; } .listing-dropzone { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 2px dashed var(--border); border-radius: 10px; padding: 12px 14px; } .listing-dropzone.over { border-color: var(--accent); background: rgba(77,163,255,0.08); } .listing-dropzone-text { color: var(--muted); font-size: 0.85rem; } .gallery-search { flex: 1; min-width: 240px; background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 7px 10px; font-size: 0.9rem; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .gallery-item { position: relative; background: var(--panel-alt); border: 2px solid transparent; border-radius: 8px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; } .gallery-item img { width: 100%; height: 120px; object-fit: contain; } .gallery-item.picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .gallery-item.picked::after { content: '\2713'; position: absolute; top: 6px; right: 8px; background: var(--accent); color: #04121f; border-radius: 50%; width: 20px; height: 20px; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .gallery-item.off { opacity: 0.4; cursor: not-allowed; } .gallery-cap { font-size: 0.75rem; color: var(--text); text-align: center; word-break: break-word; max-height: 2.6em; overflow: hidden; } .gallery-note { font-size: 0.7rem; color: var(--warn); } /* Clickable stat tiles (Dashboard). */ a.card, a.card:visited { text-decoration: none; color: var(--text); cursor: pointer; transition: border-color .15s; } a.card:hover { border-color: var(--accent); color: var(--text); } .card-attention { border-color: rgba(210,153,34,0.6); } /* Order form: picked client's address under the client box. */ .client-address-block { margin-top: -6px; padding: 8px 12px; background: var(--panel-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; font-size: 0.88rem; line-height: 1.45; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .client-address-block[hidden] { display: none !important; } .client-address-lines { color: var(--text); } /* Orders list thumbnails (Awaiting Shipping view). */ .order-thumbs img { width: 40px; height: 40px; } /* Shipped pill on an unpaid order: can't be ticked until it's paid. */ button.badge.badge-locked, button.badge.badge-locked:hover { opacity: 0.35; cursor: not-allowed; filter: none; } /* Stamp Library: Date Added dropdown + calendar side by side. */ .date-pick-row { display: inline-flex; gap: 6px; align-items: center; } .date-pick-row input[type=date] { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 8px; font-size: 0.9rem; color-scheme: dark; } :root[data-theme="light"] .date-pick-row input[type=date] { color-scheme: light; } /* SG identification on library cards / catalogue page */ .sg-line { display: flex; align-items: center; gap: 6px; } a.sg-chip, a.sg-chip:visited { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(77,163,255,0.15); color: var(--accent); text-decoration: none; } a.sg-chip:hover { background: rgba(77,163,255,0.28); } button.sg-q { width: 20px; height: 20px; padding: 0; margin: 0; border-radius: 50%; border: none; background: var(--warn); color: #1b1300; font-weight: 800; font-size: 0.8rem; line-height: 20px; cursor: pointer; } button.sg-q:hover { filter: brightness(1.15); } .sg-ok { color: var(--good); font-weight: 800; font-size: 0.85rem; } .sg-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .lib-edit .sg-check { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); } .sg-table td { vertical-align: middle; } .sg-no { white-space: nowrap; font-size: 0.95rem; } .sg-stock .badge { margin: 1px 2px; } .sg-notes { color: var(--muted); font-size: 0.8rem; max-width: 360px; } .sg-thumbs { display: flex; flex-wrap: wrap; gap: 4px; } a.sg-thumb { position: relative; display: inline-block; line-height: 0; } a.sg-thumb img { width: 34px; height: 34px; object-fit: contain; background: var(--panel-alt); border-radius: 3px; } a.sg-thumb.sg-status-sold img { opacity: 0.45; } a.sg-thumb.sg-status-listed img { outline: 2px solid rgba(210,153,34,0.7); } .sg-thumb-q { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--warn); color: #1b1300; font-size: 0.62rem; font-weight: 800; line-height: 14px; text-align: center; } .sg-q-inline { position: static; display: inline-block; vertical-align: middle; } .sg-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--muted); } .stats-table tr.sg-country-row td { background: var(--panel-alt); font-weight: 800; color: var(--text); font-size: 0.95rem; letter-spacing: 0.02em; } /* Listing page attached-image thumbs: the link wrapping each image must fill the 120px box, otherwise the image's max-height:100% has nothing to size against and tall stamps overflow and get clipped top and bottom. */ .listing-image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 4px; box-sizing: border-box; } .listing-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* SG ?/✓ toggle button */ button.sg-toggle { width: 20px; height: 20px; padding: 0; margin: 0; border-radius: 50%; border: none; font-weight: 800; font-size: 0.8rem; line-height: 20px; cursor: pointer; } button.sg-toggle.sg-okb { background: rgba(63,185,80,0.18); color: var(--good); } button.sg-toggle.sg-okb:hover { background: rgba(63,185,80,0.32); filter: none; } /* The app's base button style is inline-flex, which left-aligned the glyph -- centre it. */ button.sg-toggle, button.sg-q { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: 0 0 20px; } /* PO Numbers page + lookup box */ .po-table td { vertical-align: top; } .po-no { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } .po-notes { color: var(--muted); font-size: 0.8rem; max-width: 420px; } .stats-table tr.po-exact td { background: rgba(77,163,255,0.12); } .po-table mark, .po-lookup mark { background: rgba(210,153,34,0.35); color: inherit; border-radius: 2px; } .po-lookup { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; } .po-lookup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .po-lookup-row label { font-size: 0.8rem; color: var(--muted); font-weight: 600; } .po-lookup input { flex: 1; min-width: 220px; background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 9px; font-size: 0.9rem; } .po-lookup-results { margin-top: 8px; max-height: 320px; overflow-y: auto; border-top: 1px solid var(--border); } .po-lookup-results[hidden] { display: none !important; } .po-lookup-item { display: flex; gap: 12px; padding: 6px 2px; border-bottom: 1px solid var(--border); font-size: 0.85rem; } .po-lookup-item.exact { background: rgba(77,163,255,0.10); } .po-lookup-no { font-weight: 800; min-width: 64px; font-variant-numeric: tabular-nums; } .po-lookup-place, .po-lookup-used { color: var(--muted); font-size: 0.8rem; } .po-lookup-notes { color: var(--muted); font-size: 0.75rem; margin-top: 2px; } .po-lookup-empty { color: var(--muted); font-size: 0.8rem; padding: 6px 2px; } /* Top menu: tighter pills that never break their text over two lines; if the window is too narrow the whole pill moves to a second row instead. */ .topbar-nav { gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .nav-pill, a.nav-pill, a.nav-pill:visited { padding: 5px 10px; white-space: nowrap; } .topbar-nav .btn { white-space: nowrap; padding: 5px 9px; } .nav-pill, a.nav-pill, a.nav-pill:visited { padding: 4px 8px; font-size: 0.82rem; } .topbar-nav .btn { padding: 4px 8px; } .topbar-nav .theme-toggle-btn { width: 30px; height: 30px; } #stAlign { background: var(--panel-alt); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 4px 6px; font-size: 0.82rem; } /* Gallery cards: a grid item defaults to min-width:auto, so the edit form's inputs could push a card wider than its column and slide the fields under the neighbouring card. Let cards shrink and make the fields fill the card. */ .lib-grid > .lib-card { min-width: 0; } .lib-edit form > input, .lib-edit form > textarea, .lib-edit form > select, .sg-edit input { width: 100%; min-width: 0; box-sizing: border-box; } .sg-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Stock code (SKU) chips -- click to copy */ .sku-chip { display: inline-block; font: 700 0.72rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: 0.02em; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border, rgba(128,128,128,0.4)); background: transparent; color: inherit; cursor: copy; min-height: 0; } .sku-chip:hover { background: rgba(128,128,128,0.15); } .sku-chip.copied { background: rgba(46,160,67,0.2); border-color: rgba(46,160,67,0.6); } .sg-catvalue { font-size: 0.75rem; color: var(--muted); white-space: nowrap; } .sg-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .listing-image-sku { position: absolute; left: 4px; bottom: 4px; font: 700 0.68rem/1.3 ui-monospace, Consolas, monospace; padding: 0 5px; border-radius: 6px; background: rgba(0,0,0,0.6); color: #fff; pointer-events: none; } .listing-image-qty { position: absolute; right: 4px; bottom: 4px; font: 700 0.68rem/1.3 ui-monospace, Consolas, monospace; padding: 0 5px; border-radius: 6px; background: rgba(46,160,67,0.85); color: #fff; pointer-events: none; } .auction-skus { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; } .po-lookup-fillable .po-lookup-item { cursor: pointer; border-radius: 6px; } .po-lookup-fillable .po-lookup-item:hover, .po-lookup-fillable .po-lookup-item:focus { background: rgba(77,163,255,0.12); outline: none; } .po-lookup-fillable .po-lookup-item.po-added { background: rgba(46,160,67,0.22); } /* Listing: "Notes From The Gallery" */ .listing-notes-box { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt); } .listing-note + .listing-note { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .listing-note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; } .listing-note-head img { width: 34px; height: 34px; object-fit: contain; border-radius: 4px; } .listing-note-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .note-part { font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; background: transparent; border: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: left; white-space: normal; min-height: 0; } .note-part:hover { background: rgba(77,163,255,0.12); border-color: var(--accent); } .note-part.note-added { background: rgba(46,160,67,0.22); border-color: rgba(46,160,67,0.6); } .note-part.note-already { background: rgba(128,128,128,0.18); } .listing-image-names { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-left: 18px; } /* Same size/shape as the Save Auction button (inherits the base button style), in green. */ button.image-name-link { background: #2ea043; border-color: #2ea043; color: #fff; font-weight: 700; cursor: pointer; } button.image-name-link:hover { background: #3fb950; border-color: #3fb950; color: #fff; } button.image-name-link.revealed { background: #238636; box-shadow: 0 0 0 3px rgba(46,160,67,0.35); } button.image-name-link.reveal-failed { background: #d73a49; border-color: #d73a49; } /* Listing form: the next empty field to fill in is green; the one being typed in is white */ #listingForm input.field-next, #listingForm textarea.field-next, #listingForm select.field-next { border-color: #2ea043; outline: 2px solid #2ea043; outline-offset: 0; box-shadow: 0 0 0 4px rgba(46,160,67,0.25); } #listingForm input:focus, #listingForm textarea:focus, #listingForm select:focus { border-color: var(--text); outline: 2px solid var(--text); outline-offset: 0; box-shadow: none; } /* Postage options: checkbox and its text on one row (beats .client-form label's column layout) */ .client-form label.postage-checkbox-item { flex-direction: row; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text); } .client-form label.postage-checkbox-item input { padding: 0; margin: 0; } /* Listing: fields left empty when copying/saving */ #listingForm input.field-missing, #listingForm textarea.field-missing { border-color: #e3a008; outline: 2px solid #e3a008; outline-offset: 0; box-shadow: 0 0 0 4px rgba(227,160,8,0.25); } .listing-missing-warn { margin-top: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(227,160,8,0.6); background: rgba(227,160,8,0.12); color: var(--text); font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .listing-missing-warn[hidden] { display: none; } .listing-image-names-top { margin-left: 4px; } .listing-image-names-top button.image-name-link { border: 1px solid #2ea043; } /* Stock codes: "MKS" and the number in different colours so they read apart */ .sku-code { white-space: nowrap; } .sku-code .sku-pre { color: #e3a008; font-weight: 600; letter-spacing: 0.03em; } .sku-code .sku-num { color: var(--text); font-weight: 800; margin-left: 1px; } .listing-image-sku .sku-code .sku-pre { color: #ffc93c; } .listing-image-sku .sku-code .sku-num { color: #fff; } .lib-file-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; } .lib-file-row button.image-name-link { border: 1px solid #2ea043; } /* Gallery cards: the button block (file name, Straighten/Delete, Edit) sits at the bottom of every card so the buttons line up across a row. */ .lib-grid > .lib-card > .lib-meta { display: flex; flex-direction: column; flex: 1 1 auto; } .lib-grid > .lib-card > .lib-meta > .lib-file-row { margin-top: auto; padding-top: 4px; } .lib-grid > .lib-card > .lib-meta > .lib-row:last-of-type { flex-wrap: nowrap; } .lib-grid .lib-file-row { flex-wrap: nowrap; min-width: 0; } .lib-grid .lib-file-row .lib-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lib-grid .lib-file-row .image-name-link { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------- Toasts ---------------- */ .toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 36px)); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.35); font-size: 0.9rem; opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity .25s ease, transform .25s ease; } .toast.show { opacity: 1; transform: none; } .toast-icon { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; color: #fff; background: #2ea043; } .toast-bad .toast-icon { background: #d73a49; } .toast-info .toast-icon { background: #4da3ff; } .toast-good { border-left: 4px solid #2ea043; } .toast-bad { border-left: 4px solid #d73a49; } .toast-info { border-left: 4px solid #4da3ff; } .toast-msg { flex: 1; line-height: 1.35; padding-top: 1px; } .toast-x { background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 2px; min-height: 0; cursor: pointer; } @media print { .toast-stack { display: none; } } .activity-undone td { opacity: 0.55; } /* Stock details on Gallery cards + edit form */ .stock-edit { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 6px; display: flex; flex-direction: column; gap: 6px; } .stock-edit-title { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .stock-qty-row { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); } .stock-qty-row input { width: 60px !important; flex: 0 0 auto; } .cond-chips { display: flex; flex-wrap: wrap; gap: 4px; } .cond-chip { display: inline-flex !important; flex-direction: row !important; cursor: pointer; } .cond-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .cond-chip span { font-size: 0.7rem; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); user-select: none; } .cond-chip input:checked + span { background: rgba(46,160,67,0.2); border-color: #2ea043; color: var(--text); } .cond-chip input:focus-visible + span { outline: 2px solid var(--accent); } .lib-stock { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 0.72rem; margin: 3px 0; } .lib-stock-loc, .lib-stock-cost { color: var(--muted); margin-right: 4px; } .cond-tag { padding: 1px 6px; border-radius: 999px; background: rgba(46,160,67,0.14); color: var(--text); } /* ---------------- Gallery lightbox ---------------- */ html.lb-open-page { overflow: hidden; } .lb { position: fixed; inset: 0; z-index: 9000; background: rgba(5,8,12,0.94); display: flex; align-items: center; justify-content: center; } .lb[hidden] { display: none; } .lb-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; color: #dfe6ee; font-size: 0.85rem; z-index: 2; flex-wrap: wrap; } .lb-tools { display: flex; gap: 6px; flex-wrap: wrap; } .lb-btn { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 5px 11px; font-size: 0.85rem; min-height: 0; cursor: pointer; text-decoration: none; line-height: 1.4; } .lb-btn:hover { background: rgba(255,255,255,0.2); } .lb-btn.active { background: #2ea043; border-color: #2ea043; } .lb-stage { position: absolute; inset: 56px 64px 16px; display: flex; gap: 16px; align-items: center; justify-content: center; overflow: hidden; } .lb-fig { margin: 0; flex: 1 1 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; overflow: hidden; } .lb-fig[hidden] { display: none; } .lb-fig img { max-width: 100%; max-height: calc(100% - 34px); object-fit: contain; transition: transform .12s ease-out; transform-origin: center; user-select: none; -webkit-user-drag: none; box-shadow: 0 12px 40px rgba(0,0,0,0.6); } .lb-fig figcaption { color: #dfe6ee; font-size: 0.85rem; margin-top: 10px; text-align: center; } .lb-comparing .lb-fig { border: 1px dashed rgba(255,255,255,0.15); border-radius: 10px; } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 72px; border-radius: 10px; background: rgba(255,255,255,0.08); border: none; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; z-index: 2; min-height: 0; padding: 0; } .lb-nav:hover { background: rgba(255,255,255,0.2); } .lb-prev { left: 8px; } .lb-next { right: 8px; } @media (max-width: 700px) { .lb-stage { inset: 96px 8px 8px; flex-direction: column; } .lb-nav { top: auto; bottom: 12px; transform: none; } } /* Listing: condition chips, price guide */ .cond-add { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .cond-add-label { font-size: 0.8rem; color: var(--muted); margin-right: 4px; } .cond-add-chip { font-size: 0.72rem !important; padding: 2px 8px !important; } .cond-add-chip.cond-saved { border-color: #2ea043; background: rgba(46,160,67,0.12); } .price-range { color: var(--muted); font-size: 0.85rem; } .price-sales { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .price-sale { font-size: 0.78rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); } /* Auctions: relist queue */ .relist-list { display: flex; flex-direction: column; gap: 8px; } .relist-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt); flex-wrap: wrap; } .relist-item .auction-thumbs img { width: 40px; height: 40px; object-fit: contain; } .relist-info { flex: 1 1 220px; min-width: 0; } .relist-actions { display: flex; gap: 6px; } /* Dashboard extras */ .sales-chart-wrap { overflow-x: auto; } .sales-chart { width: 100%; min-width: 520px; height: auto; display: block; } .sales-chart .sc-axis { stroke: var(--border); stroke-width: 1; } .sales-chart .sc-fill { fill: var(--accent); transition: opacity .15s; } .sales-chart .sc-hit { fill: transparent; } .sales-chart .sc-bar:hover .sc-fill { opacity: 0.75; } .sales-chart .sc-bar:hover .sc-hit { fill: rgba(128,128,128,0.08); } .sales-chart .sc-lab { fill: var(--muted); font-size: 11px; } .sales-chart .sc-val { fill: var(--text); font-size: 11px; font-weight: 700; } .dash-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; } .dash-two > .panel-box { margin: 0 0 16px; } .alert-list { display: flex; flex-direction: column; gap: 8px; } .alert-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt); } .alert-who { flex: 0 1 220px; min-width: 160px; display: flex; flex-direction: column; gap: 2px; } .alert-stamps { flex: 1 1 280px; display: flex; flex-wrap: wrap; gap: 6px; } .alert-stamp { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.7rem; text-decoration: none; } .alert-stamp img { width: 44px; height: 44px; object-fit: contain; } .alert-actions { display: flex; gap: 6px; } /* SG Cat: plate gaps */ .gaps-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .gap-set { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--panel); } .gap-head { font-size: 0.9rem; margin-bottom: 6px; } .gap-count { float: right; font-size: 0.8rem; color: var(--muted); } .gap-count.done { color: var(--good); font-weight: 700; } .gap-chips { display: flex; flex-wrap: wrap; gap: 4px; } .gap-chip { min-width: 30px; text-align: center; font-size: 0.75rem; padding: 2px 6px; border-radius: 6px; border: 1px dashed var(--border); color: var(--muted); cursor: default; } .gap-chip.have { border: 1px solid #2ea043; background: rgba(46,160,67,0.2); color: var(--text); font-weight: 700; } .gap-chip.maybe { border-style: dashed; background: rgba(227,160,8,0.14); border-color: #e3a008; } .gap-chip sup { font-size: 0.6rem; margin-left: 1px; } /* ---------------- Quick search (Ctrl+K) ---------------- */ .qs { position: fixed; inset: 0; z-index: 9500; background: rgba(5,8,12,0.55); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; } .qs[hidden] { display: none; } .qs-panel { width: min(640px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; } .qs-input { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font-size: 1.05rem; padding: 14px 16px; outline: none; } .qs-list { max-height: 55vh; overflow-y: auto; padding: 6px; } .qs-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; } .qs-item.cur, .qs-item:hover { background: rgba(77,163,255,0.15); } .qs-item img { width: 30px; height: 30px; object-fit: contain; } .qs-ico { width: 30px; height: 30px; border-radius: 6px; background: rgba(128,128,128,0.18); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); } .qs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qs-type { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; } .qs-empty { padding: 14px; color: var(--muted); text-align: center; } .qs-foot { font-size: 0.72rem; color: var(--muted); padding: 7px 12px; border-top: 1px solid var(--border); } .qs-btn { font-size: 0.8rem !important; } @media print { .qs { display: none !important; } } kbd { font-size: 0.68rem; padding: 0 4px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); margin-left: 3px; } /* ---------------- Phone-friendly mode ---------------- */ .nav-toggle { display: none; } @media (max-width: 760px) { .topbar { flex-wrap: wrap; gap: 8px; } .nav-toggle { display: inline-flex; align-items: center; margin-left: auto; font-size: 0.9rem; padding: 6px 12px; } .topbar-nav { display: none; width: 100%; flex-wrap: wrap; gap: 6px; } .topbar-nav.open { display: flex; } .topbar-nav .nav-pill, .topbar-nav .btn { flex: 1 1 calc(33% - 6px); justify-content: center; text-align: center; padding: 9px 6px; font-size: 0.9rem; } .qs-btn kbd { display: none; } main { padding-left: 10px !important; padding-right: 10px !important; } .panel-box { padding: 12px !important; } .stats-table { display: block; overflow-x: auto; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .client-form { grid-template-columns: 1fr !important; } button, .btn { min-height: 36px; } .toast-stack { left: 10px; right: 10px; bottom: 10px; max-width: none; } } .nav-extra-label { display: none; } @media (max-width: 760px) { .nav-extra-label { display: inline; } } .cond-chip-row { display: contents; } .cond-tool { font-size: 0.72rem !important; padding: 2px 9px !important; min-height: 0 !important; } .cond-newbox { display: inline-flex; gap: 5px; align-items: center; } .cond-newbox input { width: 170px; padding: 3px 8px !important; font-size: 0.8rem !important; } .cond-editbox { flex-basis: 100%; margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; } .cond-editlist { display: flex; flex-wrap: wrap; gap: 6px; } .cond-edit-item { display: inline-flex; gap: 3px; align-items: center; } .cond-edit-item input { width: 140px; padding: 3px 6px !important; font-size: 0.8rem !important; } .cond-edit-item .btn-danger { padding: 1px 7px !important; min-height: 0 !important; } .cond-edit-item.removed input { text-decoration: line-through; opacity: 0.45; } /* Listing condition chips: A-Z runs down each column, then on to the next */ #condAdd #condChips { display: block; flex-basis: 100%; order: 5; columns: 200px; column-gap: 8px; margin-top: 4px; } #condAdd #condChips .cond-add-chip { display: block; width: 100%; margin: 0 0 5px; text-align: left; break-inside: avoid; box-sizing: border-box; } #condAdd .cond-add-label { order: 1; } #condAdd #condNewBtn { order: 2; } #condAdd #condEditBtn { order: 3; } #condAdd #condNewBox { order: 4; } #condAdd #condEditBox { order: 6; } #condEditList { display: block; columns: 200px; column-gap: 8px; } #condEditList .cond-edit-item { display: flex; margin: 0 0 5px; break-inside: avoid; } #condEditList .cond-edit-item input { flex: 1; width: auto; min-width: 0; } /* Gallery edit form condition chips: A-Z down each column, in a scrolling box */ .cond-chips-scroll { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; padding: 5px; } .cond-chips-scroll .cond-chips { display: block; columns: 2 70px; column-gap: 5px; } .cond-chips-scroll .cond-chip { display: block !important; margin: 0 0 4px; break-inside: avoid; } .cond-chips-scroll .cond-chip span { display: block; line-height: 1.25; } .cond-details { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--panel-alt); } .cond-details[open] > summary { margin-bottom: 8px; } .cond-details { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--panel-alt); } .cond-details[open] > summary { margin-bottom: 8px; } /* Selling > "+ New Listing" format chooser (new_listing.php) */ .new-listing-cards { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; } .new-listing-card { flex: 1 1 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt); color: var(--text); cursor: pointer; font: inherit; } .new-listing-card:hover, .new-listing-card:focus-visible { border-color: var(--accent); background: var(--panel); } .new-listing-card-emoji { font-size: 1.8rem; } .new-listing-card-title { font-size: 1.05rem; font-weight: 600; } .new-listing-card-desc { color: var(--muted); font-size: 0.85rem; } /* Billing (billing.php) -- plan cards with PayPal subscribe buttons */ .plans-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; } .plan-card { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt); min-width: 200px; } .plan-card-current { border-color: var(--accent); } .plan-card h3 { margin: 0; font-size: 1.05rem; } .plan-price { font-size: 1.3rem; font-weight: 700; margin: 0; } .plan-price .plan-period { font-size: 0.85rem; font-weight: 400; color: var(--muted); } .plan-limit { color: var(--muted); font-size: 0.9rem; margin: 0 0 6px; } .paypal-button-container { margin-top: auto; } /* Marketing / capture page (home.php) -- the public landing page for signed-out visitors. Built on the same design tokens as the rest of the app (--bg/--panel/--accent/etc.) so it reads as the same product, not a bolted-on microsite. */ .marketing-page { background: var(--bg); } .mkt-topbar { justify-content: space-between; } .mkt-logo { height: 34px; width: auto; display: block; } .mkt-topbar-actions { display: flex; gap: 10px; align-items: center; } .mkt-main { max-width: 980px; margin: 0 auto; padding: 0 24px; } .mkt-hero { text-align: center; padding: 64px 0 48px; } .mkt-hero-logo { height: 220px; width: auto; display: block; margin: 0 auto 24px; } .mkt-hero h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 14px; } .mkt-hero-sub { font-size: 1.1rem; color: var(--muted); max-width: 620px; margin: 0 auto 26px; } .mkt-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .mkt-hero-note { margin: 14px 0 0; font-size: 0.85rem; color: var(--muted); } .mkt-pain, .mkt-features, .mkt-steps, .mkt-pricing { padding: 40px 0; border-top: 1px solid var(--border); } .mkt-pain h2, .mkt-features h2, .mkt-steps h2, .mkt-pricing h2, .mkt-final-cta h2 { text-align: center; font-size: 1.4rem; margin: 0 0 8px; } .mkt-pricing-sub { text-align: center; color: var(--muted); margin: 0 0 24px; } .mkt-pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; } .mkt-pain-item { padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt); color: var(--text); font-size: 0.95rem; } .mkt-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } .mkt-feature-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; } .mkt-feature-card h3 { margin: 0; font-size: 1rem; } .mkt-feature-card p { margin: 0; color: var(--muted); font-size: 0.9rem; } .mkt-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; } .mkt-step { text-align: center; } .mkt-step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #04121f; font-weight: 700; margin-bottom: 10px; } .mkt-step h3 { margin: 0 0 6px; font-size: 1rem; } .mkt-step p { margin: 0; color: var(--muted); font-size: 0.9rem; } .mkt-plans-grid { justify-content: center; } .mkt-plans-grid .plan-card { text-align: center; align-items: center; } .mkt-plans-grid .plan-card .btn, .mkt-plans-grid .plan-card .btn-secondary { margin-top: 6px; } .mkt-final-cta { text-align: center; padding: 48px 0 64px; } .mkt-final-cta p { color: var(--muted); margin: 0 0 20px; } .mkt-footer { text-align: center; padding: 24px; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--border); } .mkt-footer a { color: var(--muted); } @media (max-width: 720px) { .mkt-pain-grid, .mkt-feature-grid, .mkt-steps-grid { grid-template-columns: 1fr; } .mkt-hero { padding: 44px 0 36px; } .mkt-hero-logo { height: 150px; margin-bottom: 18px; } .mkt-hero h1 { font-size: 1.6rem; } } /* Features page (features.php) -- deeper companion to home.php's shorter pitch, organised into per-vertical sections with a small table of contents and benefit tags on each card. */ .mkt-hero-compact { padding: 48px 0 28px; } .mkt-feat-toc { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 16px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .mkt-feat-toc a { color: var(--muted); font-size: 0.85rem; text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent; } .mkt-feat-toc a:hover { color: var(--text); border-bottom-color: var(--accent); } .mkt-feat-section { padding: 40px 0; border-top: 1px solid var(--border); } .mkt-feat-section:first-of-type { border-top: none; } .mkt-feat-section h2 { text-align: center; font-size: 1.35rem; margin: 0 0 6px; } .mkt-feat-section-sub { text-align: center; color: var(--muted); margin: 0 auto 24px; max-width: 640px; } .mkt-feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .mkt-feat-card { padding: 18px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); display: flex; flex-direction: column; gap: 8px; } .mkt-feat-card h3 { margin: 0; font-size: 1rem; } .mkt-feat-card p { margin: 0; color: var(--muted); font-size: 0.9rem; flex-grow: 1; } .mkt-shot-showcase { margin: 4px auto 28px; max-width: 640px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; } .mkt-shot-showcase img.mkt-shot { display: block; width: 100%; height: auto; } .mkt-shot-caption { margin: 0; padding: 14px 20px; font-size: 0.86rem; color: var(--muted); text-align: center; border-top: 1px solid var(--border); } .mkt-shot-caption-below { border-top: none; padding-top: 4px; } .mkt-benefit-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .mkt-benefit { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.01em; background: var(--panel-alt); color: var(--muted); border: 1px solid var(--border); } .mkt-benefit.time { color: #1b6ec2; border-color: #1b6ec230; background: #1b6ec214; } .mkt-benefit.profit { color: #1a8a4a; border-color: #1a8a4a30; background: #1a8a4a14; } .mkt-benefit.easy { color: #a06a00; border-color: #a06a0030; background: #a06a0014; } .mkt-benefit.errors { color: #c0392b; border-color: #c0392b30; background: #c0392b14; } .mkt-benefit.trust { color: #6d4aa8; border-color: #6d4aa830; background: #6d4aa814; } @media (max-width: 720px) { .mkt-feat-grid { grid-template-columns: 1fr; } .mkt-feat-toc { gap: 6px 12px; } } .mkt-nav-link { color: var(--muted); text-decoration: none; font-size: 0.9rem; margin-right: 4px; } .mkt-nav-link:hover { color: var(--text); } .mkt-features-see-all { text-align: center; margin: -8px 0 8px; } .mkt-features-see-all a { color: var(--accent); font-size: 0.9rem; text-decoration: none; } .mkt-features-see-all a:hover { text-decoration: underline; }