/* OneBot ERP - Unified List UI (scoped) Applies ONLY when is set. - cards / toolbar / table / pager - pills / links / modal kv - sales_orders extras (badge, rowspan lines, colpicker, modal no-line table) */ :root{ --ob-primary:#0d6efd; --ob-bg:#f5f7fb; --ob-card:#fff; --ob-text:#0f172a; --ob-muted: rgba(15,23,42,.58); --ob-line: rgba(2,6,23,.10); --ob-radius:14px; --ob-shadow: 0 8px 22px rgba(2,6,23,.06); /* optional: column widths (data-col based) */ --col-no: 60px; --col-code: 160px; --col-name: 140px; --col-phone: 120px; --col-date: 140px; --col-money: 110px; --col-status: 110px; --col-actions: 190px; } /* ========================================================= List page base ========================================================= */ .ob-list-page{ color: var(--ob-text); } /* container/title */ .ob-list-page .ob-wrap{ margin: 0 auto; } .ob-list-page .ob-title{ display:flex; align-items:center; justify-content:center; gap:10px; margin:10px 0 14px; font-weight:900; font-size:22px; color: var(--ob-primary); } /* ========================================================= Cards: toolbar / tablewrap / pager ========================================================= */ .ob-list-page .ob-toolbar, .ob-list-page .ob-tablewrap, .ob-list-page .ob-pager{ background: var(--ob-card); border: 1px solid var(--ob-line); border-radius: var(--ob-radius); box-shadow: var(--ob-shadow); } .ob-list-page .ob-toolbar{ padding:12px; margin-bottom:12px; } .ob-list-page .ob-tablewrap{ overflow:hidden; } .ob-list-page .ob-pager{ padding:10px 12px; margin-top:12px; } .ob-list-page .ob-toolbar .actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:nowrap; white-space:nowrap; } /* ========================================================= Inputs ========================================================= */ .ob-list-page .ob-toolbar .form-control, .ob-list-page .ob-toolbar .form-select{ border-radius: 12px; border: 1px solid var(--ob-line); box-shadow: none !important; } .ob-list-page .ob-toolbar .form-control:focus, .ob-list-page .ob-toolbar .form-select:focus{ border-color: rgba(13,110,253,.45); box-shadow: 0 0 0 4px rgba(13,110,253,.12) !important; } .ob-list-page .ob-toolbar .input-group-text{ border-radius: 12px 0 0 12px; border: 1px solid var(--ob-line); border-right: 0; } .ob-list-page .ob-toolbar .input-group .form-control{ border-radius: 0 12px 12px 0; } /* ========================================================= Buttons (global feel on list pages) ========================================================= */ .ob-list-page .ob-toolbar .btn, .ob-list-page .ob-pager .btn{ border-radius: 12px; } .ob-list-page .btn.btn-primary{ box-shadow: 0 10px 18px rgba(13,110,253,.18); } .ob-list-page .btn.btn-outline-secondary:hover, .ob-list-page .btn.btn-outline-primary:hover, .ob-list-page .btn.btn-outline-danger:hover{ transform: translateY(-1px); } /* ========================================================= Table base + scrolling area (sticky header works here) ✅ FIX: 不要中间框竖向滚动；竖向走页面，横向需要时出现 ========================================================= */ .ob-list-page .ob-tablewrap .table-responsive{ max-height: none; /* ✅ 取消 62vh 竖向锁定 */ overflow-y: visible; /* ✅ 竖向走页面滚动 */ overflow-x: auto; /* ✅ 横向需要时滚动 */ } /* table + sticky thead ✅ FIX: 不要 max-content（会被内容撑住） */ .ob-list-page .ob-table{ margin:0; table-layout:fixed; width: 100%; /* ✅ 关键：不再用 max-content */ min-width: 1400px; /* ✅ 列多时触发横向滚动（按需调整 1400~2200） */ } .ob-list-page .ob-table thead th{ position:sticky; top:0; z-index:5; background:#f8fafc !important; border-bottom: 1px solid rgba(2,6,23,.12) !important; } /* row hover + subtle zebra */ .ob-list-page .ob-table tbody tr:nth-child(even){ background: rgba(2,6,23,.015); } .ob-list-page .ob-table tbody tr:hover{ background: rgba(13,110,253,.06); } /* ✅ 省略号：td/th 与 helper 都强制裁剪 */ .ob-list-page .ob-table th, .ob-list-page .ob-table td{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ob-list-page .ob-ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; min-width:0; } /* link style (scoped to list pages so it won't affect sidebar .ob-link) */ .ob-list-page a.ob-link{ color: var(--ob-primary); font-weight: 800; text-decoration: none; display:inline-block; /* avoid flex side effects from layout sidebar */ } .ob-list-page a.ob-link:hover{ text-decoration: underline; } /* ========================================================= Pills (base + colors) ========================================================= */ .ob-list-page .ob-pill{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-weight: 800; font-size:12px; white-space:nowrap; border: 1px solid rgba(13,110,253,.22); background: rgba(13,110,253,.08); color: var(--ob-primary); } .ob-list-page .ob-pill-red{ border: 1px solid rgba(220,53,69,.22); background: rgba(220,53,69,.08); color: #dc3545; } .ob-list-page .ob-pill-yellow{ background:rgba(255,193,7,.14); border:1px solid rgba(255,193,7,.22); color:#b58100; } .ob-list-page .ob-pill-green{ background:rgba(25,135,84,.12); border:1px solid rgba(25,135,84,.18); color:#198754; } /* helpers */ .ob-list-page .ob-subline{ font-size:12px; color:#6c757d; margin-top:2px; } .ob-list-page .ob-nowrap{ white-space:nowrap; } /* ========================================================= Pager ========================================================= */ .ob-list-page .ob-pager .btn-group{ display:flex; align-items:center; justify-content:center; margin:0 auto; } /* ========================================================= Modal KV + align ========================================================= */ .ob-list-page .ob-kv{ height:100%; padding:12px; background:#f8fafc; border:1px solid rgba(2,6,23,.10); border-radius:12px; } .ob-list-page .ob-kv .label{ font-weight:900; margin-bottom:6px; color: rgba(2,6,23,.78); } .ob-list-page .ob-kv .val{ color: var(--ob-muted); white-space:pre-wrap; word-break:break-word; } .ob-list-page .modal, .ob-list-page .modal *{ text-align:left !important; } .ob-list-page .modal-footer{ justify-content:flex-end !important; } /* ========================================================= Unified column widths (data-col based) (only affects columns that set data-col) ========================================================= */ .ob-list-page .ob-table th[data-col="no"], .ob-list-page .ob-table td[data-col="no"]{ width: var(--col-no); text-align:center; } .ob-list-page .ob-table th[data-col="code"], .ob-list-page .ob-table td[data-col="code"], .ob-list-page .ob-table th[data-col="sku"], .ob-list-page .ob-table td[data-col="sku"], .ob-list-page .ob-table th[data-col="order_no"], .ob-list-page .ob-table td[data-col="order_no"], .ob-list-page .ob-table th[data-col="out_no"], .ob-list-page .ob-table td[data-col="out_no"]{ width: var(--col-code); } .ob-list-page .ob-table th[data-col="name_zh"], .ob-list-page .ob-table td[data-col="name_zh"], .ob-list-page .ob-table th[data-col="name_en"], .ob-list-page .ob-table td[data-col="name_en"], .ob-list-page .ob-table th[data-col="name"], .ob-list-page .ob-table td[data-col="name"]{ width: var(--col-name); } .ob-list-page .ob-table th[data-col="phone"], .ob-list-page .ob-table td[data-col="phone"]{ width: var(--col-phone); } .ob-list-page .ob-table th[data-col="date"], .ob-list-page .ob-table td[data-col="date"], .ob-list-page .ob-table th[data-col="created_at"], .ob-list-page .ob-table td[data-col="created_at"], .ob-list-page .ob-table th[data-col="time"], .ob-list-page .ob-table td[data-col="time"]{ width: var(--col-date); } .ob-list-page .ob-table th[data-col="amount"], .ob-list-page .ob-table td[data-col="amount"], .ob-list-page .ob-table th[data-col="total"], .ob-list-page .ob-table td[data-col="total"]{ width: var(--col-money); text-align:right; font-variant-numeric: tabular-nums; } .ob-list-page .ob-table th[data-col="status"], .ob-list-page .ob-table td[data-col="status"]{ width: var(--col-status); } .ob-list-page .ob-table th[data-col="actions"], .ob-list-page .ob-table td[data-col="actions"]{ width: var(--col-actions); text-align:center; } /* ========================================================= Actions: deliveries/orders common (small + round buttons) Works for both .ob-actions (wrapper) and .ob-actions-row. ========================================================= */ .ob-list-page .ob-actions{ white-space:normal; } .ob-list-page .ob-actions-row{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; white-space:nowrap; } .ob-list-page .ob-actions .btn, .ob-list-page .ob-actions-row .btn{ height:28px !important; padding:0 10px !important; font-size:12px !important; line-height:26px !important; border-radius:999px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; white-space:nowrap !important; } .ob-list-page .ob-actions .btn.btn-sm, .ob-list-page .ob-actions-row .btn.btn-sm{ height:28px !important; padding:0 10px !important; border-radius:999px !important; } /* refine pill inside action area */ .ob-list-page .ob-actions .ob-pill{ height:28px; padding:0 10px; border-radius:999px; font-size:12px; line-height:28px; max-width:200px; } /* ========================================================= Sales Orders extras ========================================================= */ /* badge */ .ob-list-page .ob-badge{ display:inline-flex; align-items:center; justify-content:center; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap; } .ob-list-page .ob-badge-red{ background:#ffe7e7; border:1px solid #ffc2c2; color:#dc3545; } .ob-list-page .ob-badge-green{ background:#e8fff0; border:1px solid #bdeccc; color:#198754; } /* colpicker */ .ob-list-page .ob-colpicker .form-check{ margin:6px 0; } .ob-list-page .ob-colpicker .form-check-label{ font-size:13px; user-select:none; } /* rowspan line strategy */ .ob-list-page .ob-table tbody tr.ob-order-first:not(.ob-order-last) > td{ border-bottom: 0 !important; } .ob-list-page .ob-table tbody tr.ob-detail-row > td{ border-bottom: 0 !important; } .ob-list-page .ob-table tbody tr.ob-order-last > td{ border-bottom: 1px solid rgba(0,0,0,.12) !important; box-shadow: 0 1px 0 rgba(0,0,0,.04); } .ob-list-page .ob-table tbody tr.ob-order-first:not(.ob-order-last) > td[rowspan]{ border-bottom: 1px solid rgba(0,0,0,.12) !important; box-shadow: 0 1px 0 rgba(0,0,0,.04); } /* modal detail table: no lines + keep hover */ .ob-list-page .modal table.ob-no-line-table{ --bs-border-width: 0 !important; --bs-table-border-color: transparent !important; --bs-table-hover-bg: rgba(0,0,0,.035) !important; --bs-table-hover-color: inherit !important; border:0 !important; box-shadow:none !important; outline:0 !important; border-collapse:separate !important; border-spacing:0 !important; } .ob-list-page .modal table.ob-no-line-table > :not(caption) > * > *{ border-bottom-width:0 !important; border-bottom-style:none !important; border-bottom-color:transparent !important; box-shadow:none !important; } .ob-list-page .modal table.ob-no-line-table.table-hover > tbody > tr:hover > *{ background-color: var(--bs-table-hover-bg) !important; box-shadow:none !important; border:0 !important; } .ob-list-page .modal table.ob-no-line-table.table-striped > tbody > tr > *{ background-image:none !important; } /* ========================================================= Deliveries / Stockout helpers ========================================================= */ /* multi-line stack (deliveries multi-items in one cell) */ .ob-list-page .ob-cellstack{ display:flex; flex-direction:column; gap:4px; } .ob-list-page .ob-cellrow{ padding:0; margin:0; border:0; line-height:1.2; } .ob-list-page .ob-numrow{ font-variant-numeric: tabular-nums; } .ob-list-page .ob-cellstack .ob-ellipsis{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* row colors in modal detail table */ .ob-list-page .ob-row-red{ background:#fff5f5; } .ob-list-page .ob-row-yellow{ background:#fffaf0; } .ob-list-page .ob-row-green{ background:#f3fff7; } /* batch bar (deliveries) */ .ob-list-page .ob-batchbar{ display:flex; justify-content:flex-end; padding:10px 12px; border-top:1px solid rgba(0,0,0,.06); background:#fff; } /* ========================================================= Pay mini form (statement/detail pages) ========================================================= */ .ob-paybox{ display:flex; flex-direction:column; align-items:center; gap:4px; } .ob-payform .form-control-sm{ padding-top:.15rem; padding-bottom:.15rem; height:28px; font-size:12px; } .ob-paybtn{ padding:.2rem .55rem; height:28px; line-height:1; font-size:12px; border-radius:999px; white-space:nowrap; } /* inputs width (so template no inline width) */ .ob-pay-input-date{ width:130px; } .ob-pay-input-amt{ width:110px; } .ob-pay-input-note{ width:160px; display:none; } .ob-pay-input-note.is-open{ display:inline-block; } .ob-note-sm{ font-size:12px; color:#6c757d; line-height:1.2; } /* note toggle button */ .ob-note-toggle{ border:none; background:transparent; color:#6c757d; font-size:13px; padding:0 4px; cursor:pointer; } .ob-note-toggle:hover{ color:#198754; }