becomes a card, each | becomes a label:value row. */
.table-responsive-card table thead {
display: none;
}
.table-responsive-card table,
.table-responsive-card table tbody,
.table-responsive-card table tr {
display: block;
width: 100%;
}
.table-responsive-card table tr {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
margin-bottom: 0.75rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.table-responsive-card table td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
border: none;
border-bottom: 1px solid #f1f5f9;
font-size: 0.88rem;
/* Long filenames / business names / amounts must wrap, not push
the card off-screen. */
word-break: break-word;
overflow-wrap: anywhere;
}
.table-responsive-card table td:last-child {
border-bottom: none;
}
/* The label comes from the matching | 's data-label attribute.
Task 5 sets data-label on each | to mirror its | . */
.table-responsive-card table td::before {
content: attr(data-label);
flex: 0 0 auto;
font-weight: 600;
color: #64748b;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.3px;
max-width: 45%;
}
/* Make the value cell take the remaining space so long content
wraps within the card instead of overflowing. */
.table-responsive-card table td > * {
flex: 1 1 auto;
min-width: 0;
text-align: right;
}
/* Preview image: don't stretch the card — keep it small + aligned. */
.table-responsive-card #invoiceResultTable td .doc-preview {
width: 56px;
height: 42px;
}
/* ===== Invoice result table: phone-specific card enhancements =====
See invoice.js renderInvoiceResults for the data-label wiring. */
/* F-1: Preview image — keep aspect ratio, cap height so horizontal
receipts don't become a wide flat strip. Width auto + max-width 100%
lets the image shrink on narrow screens without distortion. */
.table-responsive-card #invoiceResultTable td[data-label="单据预览"] {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.table-responsive-card #invoiceResultTable td[data-label="单据预览"]::before {
align-self: flex-start;
}
.table-responsive-card #invoiceResultTable td[data-label="单据预览"] img.doc-preview,
.table-responsive-card #invoiceResultTable td[data-label="单据预览"] .doc-preview {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
max-height: 180px;
height: auto;
min-height: 120px;
object-fit: contain;
border-radius: 8px;
background: #f8f9fa;
display: block;
}
/* F-2: Long file names + shop names must wrap, not get cut off.
Override the inline style="max-width:120px" set by invoice.js. */
.table-responsive-card #invoiceResultTable td[data-label="文件名"],
.table-responsive-card #invoiceResultTable td[data-label="商户名称"] {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
max-width: 100% !important;
word-break: break-word;
line-height: 1.4;
}
/* Cancel the flex-right-align forced by td > * rule, so the value
sits left-aligned next to the label on long text. */
.table-responsive-card #invoiceResultTable td[data-label="文件名"] *,
.table-responsive-card #invoiceResultTable td[data-label="商户名称"] * {
text-align: left;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
max-width: 100% !important;
display: inline;
}
/* F-3a: Status badge — keep compact, don't stretch full row. */
.table-responsive-card #invoiceResultTable td[data-label="状态"] {
align-items: center;
}
.table-responsive-card #invoiceResultTable td[data-label="状态"] > * {
flex: 0 0 auto;
width: max-content;
align-self: flex-end;
}
/* F-3b: Action button — right-aligned, natural width. */
.table-responsive-card #invoiceResultTable td[data-label="操作"] {
justify-content: flex-end;
}
.table-responsive-card #invoiceResultTable td[data-label="操作"] > * {
flex: 0 0 auto;
width: auto;
}
/* F-3c: Amount — bold + right-aligned + primary color. */
.table-responsive-card #invoiceResultTable td[data-label="金额"] > * {
font-weight: 600;
color: var(--bs-primary, #0d6efd);
}
/* F-3d: Card spacing — keep existing rule, tighten internal padding
so cards aren't visually heavy. (Existing tr rule above provides
margin-bottom:0.75rem + box-shadow.) */
/* ---------- Trial quota bar: stack vertically on phone ---------- */
.trial-quota-bar {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
padding: 0.75rem 0.85rem;
font-size: 0.88rem;
}
.trial-quota-bar .badge {
font-size: 0.78rem;
padding: 0.3rem 0.7rem;
}
/* ---------- Bank result cards: slightly tighter on phone ---------- */
.bank-card-header {
padding: 0.6rem 0.75rem;
}
.bank-card-body {
padding: 0.6rem 0.75rem;
}
.bank-table {
font-size: 0.8rem;
}
/* ---------- Tables in general: word-break safety net ----------
Other tables (history, usage, purchase history) use the
table-responsive wrapper from Task 6 and don't get a card
transform, so they may still have long unbreakable strings
(filenames, transaction IDs, email addresses). word-break on
td/th keeps them inside the wrapper without horizontal scroll. */
.table td,
.table th {
word-break: break-word;
}
/* ---------- Font-size reduction where overflow occurs ----------
These elements had horizontal overflow at 360-414px widths in
the Wave 1 baseline screenshots (per mobile-responsive plan). */
.usage-filter-bar {
font-size: 0.88rem;
}
.history-filter-panel {
font-size: 0.9rem;
}
.user-info-badge {
font-size: 0.78rem;
}
.credits-badge,
.free-badge {
font-size: 0.7rem;
padding: 0.15rem 0.55rem;
}
/* ---------- Navbar: collapse the user-info badge onto multiple
lines (it already wraps via flex-wrap), but shrink email text
so the badge doesn't push the lang switcher off-screen. ---------- */
#userEmailNav {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- Navbar brand: shrink logo + cap width on phone so
"Ox tech Ai IDP System" / "OCR Document Scanner" does not
push the right side off-screen at 320px viewport. The
`.lang-content` span ellipsises when the brand runs out of
room; this preserves the "no horizontal scroll" invariant
on the home page. No !important needed — these properties
have no conflicting rule. ---------- */
.navbar-brand.logo {
font-size: 1.1rem;
min-width: 0;
max-width: 60vw;
}
.navbar-brand.logo .lang-content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- Main content + card padding on phone ---------- */
.main-content-area {
padding: 0.85rem 0.6rem;
}
.card .card-body {
padding: 0.9rem;
}
.card-title {
font-size: 1.05rem;
}
/* ---------- Upload area: phone-tight padding ---------- */
.upload-area {
padding: 1.5rem 0.85rem;
}
.upload-icon {
font-size: 2.6rem;
margin-bottom: 0.75rem;
}
/* ---------- Upload buttons: full width, stacked ---------- */
.upload-buttons {
flex-direction: column;
align-items: stretch;
}
.upload-buttons .btn {
width: 100%;
}
/* ---------- Batch action row: stack Start/Export on phone ---------- */
.batch-actions .d-flex.flex-wrap {
flex-direction: column;
}
.batch-actions .d-flex.flex-wrap .btn {
width: 100%;
}
/* ---------- History day filter: search button below the group ---------- */
.history-filter-panel .usage-filter-bar {
flex-direction: column;
align-items: stretch;
}
.history-filter-panel .ms-3 {
margin-left: 0 !important;
margin-top: 0.5rem;
}
/* ---------- Benchmark page: run button row stacks on phone ---------- */
.benchmark-nav .brand .lang-content {
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 180px;
display: inline-block;
}
/* Run button row: 3 buttons + 2 gaps (px-4 + gap-3) overflow 320px. Stack vertically. */
.text-center.d-flex.justify-content-center.gap-3 {
flex-wrap: wrap;
}
.text-center.d-flex.justify-content-center.gap-3 .btn {
flex: 1 1 100%;
margin-bottom: 0.5rem;
}
/* Document review filter selects: avoid 415px overflow on phone */
#filterPdfType, #filterResult {
max-width: 100%;
min-width: 0;
}
}
/* ====== G6: 结果区容器内滚动 + 跳顶按钮（三端通用） ====== */
.result-table {
max-height: 60vh;
overflow-y: auto;
border-radius: 8px;
border: 1px solid #e9ecef;
-webkit-overflow-scrolling: touch;
}
.bank-results-list {
max-height: 60vh;
overflow-y: auto;
border-radius: 8px;
border: 1px solid #e9ecef;
}
@media (max-width: 575.98px) {
.result-table,
.bank-results-list {
max-height: 50vh;
}
}
.result-scroll-top {
position: sticky;
bottom: 1rem;
right: 1rem;
float: right;
border-radius: 50%;
width: 44px;
height: 44px;
padding: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
z-index: 100;
margin-top: -3rem;
align-items: center;
justify-content: center;
}
.result-scroll-top i {
margin: 0;
}
/* ==================== Desktop topnav polish (Task 7, N4+N7+T2) ====================
At 1280-1439px (lg breakpoint active, xl breakpoint not yet), the topnav badge
is wide enough that 退出 + email can wrap. Shrink font + padding so they
stay on one line. Also constrain trial-quota-bar width on wide desktops. */
@media (max-width: 1439.98px) and (min-width: 992px) {
.user-info-badge {
font-size: 0.82rem;
padding: 0.3rem 0.55rem;
gap: 0.35rem;
}
.user-info-badge .logout-btn {
font-size: 0.78rem;
padding: 0.25rem 0.55rem;
}
.credits-badge,
.free-badge {
font-size: 0.72rem;
padding: 0.15rem 0.5rem;
}
#userEmailNav {
max-width: 160px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
/* Constrain trial-quota-bar width on desktop so the inline bar doesn't span
the full container width at wide viewports. */
.trial-quota-bar {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* ==================== Tablet (768-991) topnav shrink ====================
With navbar-expand-md, userInfoBadge shows at 768-991 (iPad portrait etc).
Default desktop sizing is too wide for a 768 viewport, so we shrink font,
padding, and email max-width to keep the topbar single-row. The
(max-width: 1439.98px) and (min-width: 992px) rule above already covers
992-1439, so this fills the 768-991 gap. */
@media (min-width: 768px) and (max-width: 991.98px) {
.user-info-badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
gap: 0.35rem;
}
.user-info-badge .logout-btn {
font-size: 0.72rem;
padding: 0.2rem 0.45rem;
}
#userEmailNav {
max-width: 100px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.navbar-nav .nav-link {
padding: 0.25rem 0.5rem;
font-size: 0.85rem;
}
}
/* ----- Phone (≤ 575.98 px) — card-stack transform for .purchase-history-panel-inner -----
Purchase-history table has never had a card layout; on phones it rendered as a
cramped 6-column table (per user report m0207). This block mirrors the
`.table-responsive-card` template above (lines ~1030-1088) but is scoped
strictly to `.purchase-history-panel-inner` so it cannot leak into other
panels. Trilingual `data-label` attrs are emitted by billing.js (lines 139-144).
Scope: ONLY .purchase-history-panel-inner. No HTML/JS changes. */
@media (max-width: 575.98px) {
/* Hide thead; labels are surfaced via ::before attr(data-label) on each td. */
.purchase-history-panel-inner .table thead {
display: none;
}
/* Convert table → block layout: table, tbody, tr become block containers;
tr becomes the visual card. */
.purchase-history-panel-inner .table,
.purchase-history-panel-inner .table tbody,
.purchase-history-panel-inner .table tr {
display: block;
width: 100%;
}
.purchase-history-panel-inner .table tr {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
margin-bottom: 0.75rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* Each td becomes a label:value flex row. */
.purchase-history-panel-inner .table td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
border: none;
border-bottom: 1px solid #f1f5f9;
font-size: 0.88rem;
word-break: break-word;
overflow-wrap: anywhere;
}
.purchase-history-panel-inner .table td:last-child {
border-bottom: none;
}
/* Label pulled from td's data-label attr (set by billing.js in 3 langs). */
.purchase-history-panel-inner .table td::before {
content: attr(data-label);
flex: 0 0 auto;
font-weight: 600;
color: #64748b;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.3px;
max-width: 45%;
}
/* Value cell takes remaining space; long content wraps inside the card. */
.purchase-history-panel-inner .table td > * {
flex: 1 1 auto;
min-width: 0;
text-align: right;
}
/* Phone-tight padding overrides the desktop base in Purchase History Polish. */
.purchase-history-panel-inner .table thead th,
.purchase-history-panel-inner .table tbody td {
padding: 0;
}
/* Reset ph-cell-* percentage widths (they were table-column widths; in
card mode each td spans full width so the width% is irrelevant and
could even fight the flex layout). Keep tabular-nums for numbers. */
.purchase-history-panel-inner .ph-cell-date,
.purchase-history-panel-inner .ph-cell-package,
.purchase-history-panel-inner .ph-cell-amount,
.purchase-history-panel-inner .ph-cell-credits,
.purchase-history-panel-inner .ph-cell-status,
.purchase-history-panel-inner .ph-cell-invoice {
width: auto;
min-width: 0;
max-width: none;
text-align: right;
}
.purchase-history-panel-inner .ph-cell-date,
.purchase-history-panel-inner .ph-cell-amount,
.purchase-history-panel-inner .ph-cell-credits {
font-variant-numeric: tabular-nums;
}
/* Invoice button: keep compact inside the card row. */
.purchase-history-panel-inner .ph-cell-invoice .btn-invoice {
width: auto;
height: auto;
padding: 0.25rem 0.55rem;
}
}
|