/* Tối ưu điện thoại (jobs) — nạp SAU style.css. Mọi luật đặt trong @media khổ hẹp; desktop không đổi. */ /* ========================================================================== TRANG "TẠO VIDEO" (#page-jobs) — ĐIỆN THOẠI ≤760px 1) Form "Tạo video mới": một cột — cookie · prompt (ô soạn thoải mái) · 3 tuỳ chọn một hàng đều · nút chính to, dính đáy khi đang ở form. 2) "Hàng đợi & Tiến độ": mỗi job là một thẻ gọn ~250px thay vì ~1100px (prompt cắt 3 dòng, cookie/proxy 1 dòng, trạng thái + tiến độ chung một hàng, cụm nút ở chân thẻ). Mọi selector bắt đầu bằng #page-jobs nên thắng luật chung (.tbl …) mà không cần sửa style.css / shell.css. ========================================================================== */ @media (max-width:760px){ /* ---------------- 1) FORM TẠO VIDEO ---------------- */ /* style.css để .create-panel padding 12px 14px (dành cho thanh ngang desktop) — trả về cùng nhịp với panel Hàng đợi bên dưới. */ #page-jobs .panel-row.stack>.create-panel{padding:14px} #page-jobs .panel-row.stack>.create-panel .panel-head{margin-bottom:12px} #page-jobs .panel-row.stack>.create-panel .panel-head h3{font-size:15px;line-height:1.3;font-weight:700; color:var(--txt);text-transform:none;letter-spacing:0} /* Dải báo proxy: nút "Nhập proxy ngay" xuống hàng riêng, rộng hết dải — trước đây nó chen giữa dòng chữ làm dòng cao lệch. */ #page-jobs #job-limits{margin:0 0 14px;padding:10px 12px;font-size:13px;line-height:1.5;border-radius:12px} #page-jobs #job-limits .btn{display:flex;width:100%;margin:10px 0 0;min-height:40px} #page-jobs .panel-row.stack .job-form{grid-template-columns:minmax(0,1fr);gap:14px} #page-jobs .panel-row.stack .job-form label{margin:0 0 6px;font-size:13px;line-height:1.3;font-weight:500} #page-jobs .job-form select{min-height:44px} /* Ô prompt: desktop ép cao 38px (một dòng) — trên điện thoại cho ~4 dòng. */ #page-jobs .panel-row.stack .job-form textarea{height:auto;min-height:112px;padding:11px 12px; font-size:16px;line-height:1.5} /* 3 tuỳ chọn (Tỉ lệ / Độ dài / Chất lượng) một hàng đều nhau. Ghi chú dài "(chốt bằng chữ trong prompt)" của ô Chất lượng làm nhãn gãy 2 dòng và để hở nửa hàng — đưa nó thành dòng chú thích mảnh dưới cả hàng. */ #page-jobs .panel-row.stack .job-form .form-row{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 8px;align-items:end;position:relative;padding-bottom:22px} #page-jobs .job-form .form-row>div{min-width:0;position:static} #page-jobs .panel-row.stack .job-form .form-row label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #page-jobs .job-form .form-row label>.muted{position:absolute;left:0;right:0;bottom:0; font-size:12px;line-height:16px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #page-jobs .job-form .form-row label>.muted::before{content:"Chất lượng "} #page-jobs .job-form .form-row select{padding-left:12px;padding-right:28px;background-position:right 10px center} /* Nút chính: to, rõ; dính đáy màn hình khi form còn dài hơn khung nhìn (sticky trong phạm vi form — cuộn qua form là nó đi theo form). Viền 8px cùng màu panel (vẽ DƯỚI quầng sáng) che phần ô nhập trôi bên dưới cho gọn mắt; ở vị trí gốc nó trùng màu nền nên không thấy. */ #page-jobs .panel-row.stack .job-form .btn{width:100%;min-height:48px;margin-top:2px; font-size:15px;font-weight:700;position:sticky;bottom:calc(10px + var(--sab));z-index:4; box-shadow:0 8px 22px rgba(109,94,252,.38),0 0 0 8px var(--panel)} /* ---------------- 2) HÀNG ĐỢI ---------------- */ #page-jobs .panel.grow>.panel-head{margin-bottom:10px} #page-jobs .panel.grow>.panel-head h3{flex:1 1 auto} /* Dải chip lọc cuộn tràn tới mép panel (như dải chip ở topbar). */ #page-jobs .panel>.jobs-filter{margin:0 -14px 12px} #page-jobs #job-filters{padding:0 14px 2px;scroll-padding-inline:14px} } /* ---------------- THẺ JOB — điện thoại + tablet (≤960px) ---------------- Ở 761–960px bảng 9 cột rộng ~1400px nhét trong khung ~740px: phải kéo ngang mới thấy Tiến độ / Trạng thái / nút, cột Proxy gãy 7 dòng. Cùng bố cục thẻ, tablet xếp 2 cột, điện thoại 1 cột. */ @media (max-width:960px){ #page-jobs #tbl-jobs{display:block;width:100%} #page-jobs #tbl-jobs thead{display:none} #page-jobs #tbl-jobs tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start} /* Bảng rỗng / chỉ 1 job: một thẻ trải hết bề ngang. */ #page-jobs #tbl-jobs tbody tr:only-child{grid-column:1/-1} /* ---- Thẻ job ---- Hàng 1: [#STT] [người dùng / cookie] ······· [thời gian] Prompt (3 dòng) COOKIE … (1 dòng) · PROXY … (1 dòng) [trạng thái] [thanh tiến độ ────── %] lỗi (2 dòng, nếu có) ─────────────────────────── [cụm nút] Thứ tự ô trong : 1 STT · 2 User · 3 Cookie · 4 Prompt · 5 Proxy · 6 Tiến độ · 7 Trạng thái · 8 Time · 9 Thao tác. */ #page-jobs #tbl-jobs tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;min-width:0; padding:12px 14px;margin:0;border-radius:12px;background:var(--bg2);border:1px solid var(--line)} #page-jobs #tbl-jobs tbody tr:hover{background:var(--bg2)} #page-jobs #tbl-jobs tbody td{display:block;position:static;flex:1 1 100%;width:auto;min-width:0;max-width:none; min-height:0;padding:0;border:0;line-height:1.4;text-align:left} #page-jobs #tbl-jobs tbody td::before{content:none;display:none;position:static;width:auto;margin:0} #page-jobs #tbl-jobs tbody td.cell-empty-act{display:none} #page-jobs #tbl-jobs tbody td[colspan] .empty{padding:20px 8px} /* STT: viên số nhỏ "#12" */ #page-jobs #tbl-jobs tbody td:nth-child(1):not([colspan]){order:1;flex:0 0 auto;display:inline-flex; align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 7px;margin-right:10px; border-radius:8px;background:var(--panel2);border:1px solid var(--line); font-family:var(--font);font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums} #page-jobs #tbl-jobs tbody td:nth-child(1):not([colspan])::before{content:"#";display:inline;color:var(--muted2);font-weight:600} /* Người dùng (chỉ admin thấy) */ #page-jobs #tbl-jobs tbody td:nth-child(2){order:2;flex:1 1 0;margin-right:10px} #page-jobs #tbl-jobs tbody td:nth-child(2) .u-cell{display:block;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;font-size:13.5px;font-weight:600;line-height:26px;color:var(--txt)} #page-jobs #tbl-jobs tbody td:nth-child(2) .u-dot{display:inline-grid;vertical-align:top;margin-right:8px} /* Thời gian: góc phải hàng đầu */ #page-jobs #tbl-jobs tbody td:nth-child(8){order:3;flex:0 0 auto;margin-left:auto; font-size:12px;line-height:26px;white-space:nowrap!important;text-align:right;font-variant-numeric:tabular-nums} /* Prompt: 3 dòng, chữ thân 14px */ #page-jobs #tbl-jobs tbody td:nth-child(4){order:4;flex:1 1 100%; display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3; overflow:hidden!important;white-space:normal!important;max-width:none!important; font-size:14px;line-height:1.5;color:var(--txt);overflow-wrap:anywhere;cursor:pointer; -webkit-tap-highlight-color:transparent} /* Chạm vào prompt để đọc trọn (app.js bật/tắt .jp-open, nhớ qua các lần vẽ lại). */ #page-jobs #tbl-jobs tbody td:nth-child(4).jp-open{display:block!important;-webkit-line-clamp:unset;line-clamp:none} /* Cookie + Proxy: một dòng mỗi thứ, nhãn nhỏ đứng trước cùng một cột */ #page-jobs #tbl-jobs tbody td:nth-child(3){order:5} #page-jobs #tbl-jobs tbody td:nth-child(5){order:6} /* Cookie + Proxy là một cụm 2 dòng: kéo sát lại (user thường không có dòng Cookie ở đây nên không kéo, kẻo Proxy dính vào prompt). */ body.is-admin #page-jobs #tbl-jobs tbody td:nth-child(5){margin-top:-4px} #page-jobs #tbl-jobs tbody td:nth-child(3), #page-jobs #tbl-jobs tbody td:nth-child(5){flex:1 1 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:12.5px;line-height:18px;color:var(--muted)} #page-jobs #tbl-jobs tbody td:nth-child(3)::before, #page-jobs #tbl-jobs tbody td:nth-child(5)::before{content:attr(data-label);display:inline-block;width:56px; margin-right:6px;font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.4px; text-transform:uppercase;color:var(--muted2);vertical-align:baseline} /* User thường không có cột User: tên cookie lên hàng đầu thay chỗ đó. */ body:not(.is-admin) #page-jobs #tbl-jobs tbody td:nth-child(3){order:2;flex:1 1 0;margin-right:10px; font-size:13.5px;line-height:26px;font-weight:600;color:var(--txt)} body:not(.is-admin) #page-jobs #tbl-jobs tbody td:nth-child(3)::before{content:none;display:none} /* Trạng thái: bỏ hộp ô, huy hiệu đứng đầu hàng tiến độ, dòng lỗi xuống dưới */ #page-jobs #tbl-jobs tbody td:nth-child(7){display:contents} #page-jobs #tbl-jobs tbody td:nth-child(7)>.badge{order:7;flex:0 0 auto;margin-right:10px;white-space:nowrap} #page-jobs #tbl-jobs tbody td:nth-child(7)>div{order:9;flex:1 1 100%;min-width:0; display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2; overflow:hidden!important;white-space:normal!important;max-width:none!important; font-size:12px;line-height:1.45;overflow-wrap:anywhere} /* Tiến độ: thanh ăn hết chỗ còn lại, % căn phải số đều */ #page-jobs #tbl-jobs tbody td:nth-child(6){order:8;flex:1 1 130px} #page-jobs #tbl-jobs .prog-row{gap:10px} /* Máng thanh tiến độ: style.css để --bg2 = đúng màu nền thẻ (tàng hình); bản vá --line của nó chỉ áp ≤760px, tablet cũng cần. */ #page-jobs #tbl-jobs .prog{flex:1 1 auto;min-width:0;background:var(--line)} #page-jobs #tbl-jobs .prog-row .pct{min-width:38px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums} /* Job đang vượt rào: ô Tiến độ chỉ có chữ "Đang vượt rào (N) xoay (M)" và huy hiệu cạnh nó lặp lại đúng chữ đó ("đang vượt rào") — hai thứ chen một hàng làm chữ gãy đôi. Huy hiệu của job vượt rào là cái DUY NHẤT mang title (xem renderJobs), nên ẩn nó và cho dòng chữ có số làm viên trạng thái. */ #page-jobs #tbl-jobs tbody td:nth-child(7)>.badge.b-queued[title]{display:none} #page-jobs #tbl-jobs .prog-row .pct:only-child{display:inline-flex;align-items:center;gap:6px;min-width:0; max-width:100%;padding:4px 10px;border-radius:20px;background:var(--panel2);color:var(--muted); font-family:var(--font);font-size:12px;font-weight:700;line-height:1.35;text-align:left;white-space:normal} #page-jobs #tbl-jobs .prog-row .pct:only-child::before{content:"";flex:0 0 auto;width:7px;height:7px; border-radius:50%;background:currentColor} /* Chân thẻ: cụm nút căn phải, vùng chạm 40px */ #page-jobs #tbl-jobs tbody td:nth-child(9){order:10;flex:1 1 100%;margin-top:2px;padding-top:10px; border-top:1px solid var(--line)} #page-jobs #tbl-jobs tbody td:nth-child(9) .row-actions{justify-content:flex-end;flex-wrap:wrap;gap:8px} #page-jobs #tbl-jobs tbody td:nth-child(9) .btn-icon{min-width:40px;min-height:40px;padding:6px 10px; font-size:15px;border-radius:10px} } @media (max-width:760px){ /* Điện thoại: thẻ một cột. */ #page-jobs #tbl-jobs tbody{grid-template-columns:minmax(0,1fr);gap:10px} /* ---------------- PHÂN TRANG ---------------- */ #page-jobs #job-pager{justify-content:space-between;gap:10px 12px;margin-top:14px;padding-top:12px;font-size:13px} #page-jobs #job-pager .pager-info{font-variant-numeric:tabular-nums} #page-jobs #job-pager .pager-size{font-size:13px} #page-jobs #job-pager .pager-size select{width:auto;min-height:40px;padding:6px 30px 6px 12px;background-position:right 10px center} #page-jobs #job-pager .pager-btns{flex:1 1 100%;margin-left:0;justify-content:center;gap:6px} } /* Máy rất nhỏ (≤359px): vẫn giữ bố cục thẻ — khối ≤359px chung đặt nhãn lên trên giá trị, ở đây nhãn đã nội tuyến nên chỉ nén chút lề. */ @media (max-width:359px){ #page-jobs #tbl-jobs tbody tr{padding:10px 12px} #page-jobs .panel-row.stack .job-form .form-row{gap:0 6px} #page-jobs #tbl-jobs tbody td:nth-child(3)::before, #page-jobs #tbl-jobs tbody td:nth-child(5)::before{width:50px} }