| / | from that column's own heading - assets/js/
* front.js does this once on page load (initResponsiveTables()), so
* none of this plugin's ~25 table views need to duplicate their own
* column headings by hand. A table with no at all (a plain
* label/value table, one | naming each row instead of each column)
* already reads correctly with no label needed, since the | itself
* stacks directly above its | in normal document order.
*/
.vp-table-wrap {
overflow-x: visible;
border: none;
background: none;
box-shadow: none;
}
.vp-table {
display: block;
min-width: 0;
}
.vp-table thead {
display: none;
}
.vp-table tbody,
.vp-table tfoot {
display: block;
}
.vp-table tr {
display: block;
margin-bottom: var(--vp-space-3);
padding: var(--vp-space-3);
border: 1px solid var(--vp-border);
border-radius: var(--vp-radius-lg);
background: var(--vp-surface);
}
.vp-table tbody tr:last-child,
.vp-table tfoot tr {
margin-bottom: 0;
}
.vp-table th,
.vp-table td {
display: block;
width: auto;
padding: 7px 0;
border-bottom: 1px dashed var(--vp-border);
text-align: left;
}
.vp-table tr > th:last-child,
.vp-table tr > td:last-child {
border-bottom: none;
padding-bottom: 0;
}
.vp-table th:empty,
.vp-table td:empty {
display: none;
}
.vp-table td[data-label]::before,
.vp-table th[data-label]::before {
content: attr(data-label);
display: block;
margin-bottom: 2px;
color: var(--vp-text-subtle);
font-size: var(--vp-text-xs);
font-weight: var(--vp-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.vp-table tbody tr:hover td {
background: none;
}
/* Cards, everywhere: on a phone-width screen the desktop 24px padding /
* 16px corner radius (see .vp-card above) reads as a lot of empty
* border around very little content, and when one .vp-card sits inside
* another (the dashboard header card above the dashboard panel card,
* both inside .vp-dashboard's own padding) the padding compounds three
* times over before any real content starts - this is what makes the
* whole page look cramped and "boxed in" on mobile. Trimming the
* padding/radius here is a single, sitewide change (every .vp-card on
* every dashboard, form, admin screen and print view shares this one
* rule) so no individual template needs its own mobile tweak.
*/
.vp-card {
padding: var(--vp-space-4);
border-radius: var(--vp-radius);
}
/* The dashboard's own "Welcome, Name" header card is the clearest case
* of that compounding (it sits directly above the equally-boxed panel
* card), so it drops its border/background/shadow entirely on mobile
* and reads as a plain page heading instead of a second nested box -
* the panel card below it remains the one visible boundary on screen. */
.vp-dashboard__header.vp-card {
padding: 0 0 var(--vp-space-3);
border: none;
background: none;
box-shadow: none;
border-radius: 0;
}
}
/* -------------------------------------------------------------------------
* 7. Print - always light, so printed cards and receipts save ink and are
* readable in black on white.
* ---------------------------------------------------------------------- */
@media print {
:root,
:root[data-vp-theme="dark"] {
--vp-bg: #ffffff;
--vp-surface: #ffffff;
--vp-surface-2: #ffffff;
--vp-surface-3: #ffffff;
--vp-text: #000000;
--vp-text-muted: #333333;
--vp-text-subtle: #555555;
--vp-border: #999999;
--vp-border-strong: #666666;
--vp-shadow-sm: none;
--vp-shadow: none;
--vp-shadow-lg: none;
color-scheme: light;
}
.vp-no-print {
display: none !important;
}
/*
* Customer\History's "Transactions" table (front-end dashboard) opens
* one transaction's receipt inline, inside that row's own | , via
* | . Printing "Print receipt" from
* inside it should print just that receipt, not the whole table of
* every other transaction sitting around it - the `:has()` selectors
* scope this to only a table that actually contains a
* `.vp-print-scope` element, so no other `.vp-table` on the site (an
* admin list, the scan cart, and so on) is affected.
*/
.vp-table:has(.vp-print-scope) thead {
display: none;
}
.vp-table:has(.vp-print-scope) tbody tr:not(:has(.vp-print-scope[open])) {
display: none;
}
.vp-table:has(.vp-print-scope) tbody tr td:not(:has(.vp-print-scope)) {
display: none;
}
/*
* The "View" toggle itself (a ) is only useful on screen to * open/close the receipt - once it is open and the page is being * printed, showing the click target serves no purpose, so it is hidden * the same way .vp-no-print hides any other screen-only control. */ .vp-print-scope > summary { display: none; } } |
|---|