/* Tối ưu điện thoại (proxy) — nạp SAU style.css. Mọi luật đặt trong @media khổ hẹp; desktop không đổi. */ /* ========================================================================== HAI TRANG PROXY: "Proxy xoay (tất cả)" (#page-proxy, admin) "Proxy của tôi" (#page-myproxy, mọi user) Chỉ khổ điện thoại (≤760px). Mọi selector bắt đầu bằng #page-proxy / #page-myproxy nên thắng luật chung của style.css + shell.css mà không cần !important, và không lan sang trang khác. ========================================================================== */ @media (max-width:760px){ /* --------------------------------------------------------------------- 1. TỔNG QUAN — 3 nút chia lưới đều, ô số liệu gọn, đoạn giải thích --------------------------------------------------------------------- */ #page-proxy > .panel:first-child .panel-head{flex-direction:column;align-items:stretch} /* Chia đều 3 cột khi đủ chỗ; máy 360px thì mỗi nút tối thiểu bằng chữ của nó (không để "Kiểm tra tất cả" gãy 2 dòng lệch với hai nút kia). */ #page-proxy > .panel:first-child .panel-actions{display:flex;flex-wrap:nowrap;gap:8px} #page-proxy > .panel:first-child .panel-actions .btn{flex:1 1 0;min-width:max-content;min-height:44px; padding:6px 5px;white-space:nowrap;text-align:center} #page-proxy .proxy-summary, #page-myproxy .proxy-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #page-proxy .psum, #page-myproxy .psum{display:flex;flex-direction:column;justify-content:space-between;gap:4px; min-width:0;padding:10px 12px;border-radius:10px} #page-proxy .psum .k, #page-myproxy .psum .k{font-size:12px;line-height:1.3} #page-proxy .psum .v, #page-myproxy .psum .v{margin-top:0;font-size:20px;line-height:1.2;font-variant-numeric:tabular-nums} /* Ô "Luồng mặc định mỗi người" là chữ, không phải số: dải ngang cuối lưới (nhãn trái, giá trị phải) thay vì ô vuông chữ to xuống 2 dòng. */ #page-proxy .psum:nth-child(4){order:1;grid-column:1/-1;flex-direction:row;align-items:center;gap:8px} #page-proxy .psum:nth-child(4) .k{min-width:0} #page-proxy .psum:nth-child(4) .v{flex:0 0 auto;font-size:14px;text-align:right;white-space:nowrap} /* Trạng thái ở trang user: dải ngang trên cùng; 3 số còn lại một hàng. */ #page-myproxy .proxy-summary{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0} #page-myproxy .psum:first-child{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px} #page-myproxy .psum:first-child .k{min-width:0} #page-myproxy .psum:first-child .v{flex:0 0 auto;font-size:15px;text-align:right;white-space:nowrap} #page-proxy #proxy-note{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px; background:var(--bg2);font-size:13px;line-height:1.55} #page-proxy #px-lane-note, #page-proxy #px-stock-note{font-size:12.5px;line-height:1.55} #page-proxy #px-lane-note{margin-top:10px} #page-myproxy .px-banner{margin:10px 0 0;padding:11px 12px;border-radius:10px;font-size:13px;line-height:1.55} /* --------------------------------------------------------------------- 2. FORM THÊM PROXY — ô dán 16px (iOS khỏi tự zoom), khung xem trước rõ --------------------------------------------------------------------- */ #page-proxy .job-form > label, #page-myproxy .job-form > label{margin:12px 0 6px} #page-proxy .job-form > label:first-child, #page-myproxy .job-form > label:first-child{margin-top:0} #page-proxy #px-owner{padding-right:34px;text-overflow:ellipsis} #page-proxy .px-paste, #page-myproxy .px-paste{font-size:16px;letter-spacing:-.2px} /* Mỗi proxy đúng một hàng (không gãy dòng giữa chừng — gãy thì không đếm được mấy proxy), dòng dài vuốt ngang; ô tự cao theo số dòng nếu trình duyệt hỗ trợ. */ #page-proxy textarea.px-paste{min-height:104px;max-height:260px;line-height:1.5; white-space:pre;overflow-wrap:normal;overflow-x:auto;field-sizing:content} #page-proxy textarea.px-paste::placeholder{white-space:pre-wrap} #page-proxy .px-paste::placeholder, #page-myproxy .px-paste::placeholder{font-size:12px;letter-spacing:0} #page-myproxy input.px-paste{text-overflow:ellipsis} /* Kết quả xem trước: viền trái đậm + nền nhạt theo ✓ / ⚠ / ✗, chữ 13px */ #page-proxy .px-detect, #page-myproxy .px-detect{margin-top:10px;gap:8px} #page-proxy .px-det, #page-myproxy .px-det{padding:10px 12px;border-radius:10px;border-left-width:4px; font-size:13px;line-height:1.55} #page-proxy .px-det.ok, #page-myproxy .px-det.ok{border-color:rgba(39,208,136,.4);border-left-color:var(--green);background:var(--green-soft)} #page-proxy .px-det.warn, #page-myproxy .px-det.warn{border-color:rgba(255,178,62,.4);border-left-color:var(--amber);background:var(--amber-soft)} #page-proxy .px-det.err, #page-myproxy .px-det.err{border-color:rgba(255,92,108,.45);border-left-color:var(--red)} #page-proxy .px-det .mono, #page-myproxy .px-det .mono{font-size:12.5px;word-break:break-all} #page-proxy .px-det .px-exp, #page-myproxy .px-det .px-exp{margin-top:4px;font-size:12.5px} /* "Nhập tay" gập: thanh chạm cao 44px */ #page-proxy .px-manual, #page-myproxy .px-manual{margin-top:12px;padding:0 12px;border-radius:12px} #page-proxy .px-manual[open], #page-myproxy .px-manual[open]{padding-bottom:12px} #page-proxy .px-manual > summary, #page-myproxy .px-manual > summary{display:flex;align-items:center;gap:6px;min-height:44px;padding:8px 0; font-size:14px;line-height:1.3} #page-proxy .px-manual > summary::before, #page-myproxy .px-manual > summary::before{content:'▸';flex:0 0 auto;width:12px;text-align:center} #page-proxy .px-manual > label:first-of-type, #page-myproxy .px-manual > label:first-of-type{margin-top:4px} #page-proxy .px-manual .form-row, #page-myproxy .px-manual .form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #page-proxy .job-form .btn-block, #page-myproxy .job-form .btn-block{margin-top:14px;min-height:46px;font-size:15px} #page-myproxy #mypx-cancel{margin-top:8px} #page-proxy .px-hint, #page-myproxy .px-hint{margin-top:12px;font-size:12.5px;line-height:1.55} /* Kho novivo: ô tick trái, "Tải lại" phải, cùng một hàng */ #page-proxy #px-stock-panel .panel-actions{width:100%;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px} #page-proxy #px-stock-panel .px-check{min-height:40px;margin:0;gap:8px;font-size:13px;color:var(--txt); white-space:normal;line-height:1.3} #page-proxy #px-stock-panel .panel-actions .btn{flex:0 0 auto} /* --------------------------------------------------------------------- 3. BẢNG → THẺ GỌN Thẻ chung (style.css) xếp mỗi ô 1 hàng, nhãn máng trái → một proxy cao ~650px, nút thao tác bị cột 1% ép dọc. Ở đây mỗi thẻ là một lưới nhỏ: dòng đầu là tên/cổng, các số liệu ngắn đứng cạnh nhau (nhãn nhỏ nằm trên), cụm nút một hàng ở đáy. Khoảng cách dùng padding của ô (không dùng row-gap) để thẻ "trống" (một ô colspan) không bị các hàng lưới rỗng đội cao. --------------------------------------------------------------------- */ #page-proxy .tbl tbody tr, #page-myproxy .tbl tbody tr{display:grid;column-gap:12px;row-gap:0;align-items:start;padding:12px 14px} #page-proxy .tbl tbody td, #page-myproxy .tbl tbody td{width:auto;min-width:0;max-width:none;min-height:0;padding:10px 0 0;border:0; white-space:normal;line-height:1.4;text-align:left} #page-proxy .tbl tbody td::before, #page-myproxy .tbl tbody td::before{position:static;display:block;width:auto;top:auto;margin:0 0 3px; font-size:12px;line-height:15px} #page-proxy .tbl .px-sub, #page-myproxy .tbl .px-sub{white-space:normal;font-size:11.5px;line-height:1.45;overflow-wrap:anywhere} #page-proxy .tbl .px-exp, #page-myproxy .tbl .px-exp{font-size:12px} /* thẻ trạng thái rỗng */ #page-proxy .tbl tbody td[colspan], #page-myproxy .tbl tbody td[colspan]{grid-column:1/-1;grid-row:auto;padding:0} /* ô tên proxy (cột đầu, không nhãn) + cụm nút (không nhãn) */ #page-proxy #tbl-proxy-src tbody td:first-child::before, #page-myproxy #tbl-myproxy tbody td:first-child::before, #page-proxy .tbl tbody td.cell-act::before, #page-myproxy .tbl tbody td.cell-act::before{display:none} #page-proxy .tbl tbody td.cell-act, #page-myproxy .tbl tbody td.cell-act{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} #page-proxy .tbl tbody td.cell-act .row-actions, #page-myproxy .tbl tbody td.cell-act .row-actions{justify-content:flex-end;gap:8px;flex-wrap:wrap} #page-proxy .tbl .row-actions .btn-icon, #page-myproxy .tbl .row-actions .btn-icon{min-width:40px;min-height:40px;padding:8px} /* ---- Proxy nguồn (admin) · Proxy của tôi (user) ---- tên · host · hạn dùng Chủ | Trạng thái (user: Trạng thái | Độ trễ) IP thoát | Độ trễ (user: IP thoát | Xoay IP) Xoay IP [⟳][🔄][🗑] Hai cột đều: ba cột thì máy 360px gãy IP "171.246.16.242" và tên chủ. */ #page-proxy #tbl-proxy-src tbody tr{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"px px" "own st" "ip lat" "rot rot" "act act"} #page-proxy #tbl-proxy-src tbody td:nth-child(1){grid-area:px} #page-proxy #tbl-proxy-src tbody td:nth-child(2){grid-area:own} #page-proxy #tbl-proxy-src tbody td:nth-child(3){grid-area:st} #page-proxy #tbl-proxy-src tbody td:nth-child(4){grid-area:ip} #page-proxy #tbl-proxy-src tbody td:nth-child(5){grid-area:lat} #page-proxy #tbl-proxy-src tbody td:nth-child(6){grid-area:rot} #page-proxy #tbl-proxy-src tbody td:nth-child(7){grid-area:act} #page-myproxy #tbl-myproxy tbody tr{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:"px px" "st lat" "ip rot" "act act"} #page-myproxy #tbl-myproxy tbody td:nth-child(1){grid-area:px} #page-myproxy #tbl-myproxy tbody td:nth-child(2){grid-area:st} #page-myproxy #tbl-myproxy tbody td:nth-child(3){grid-area:ip} #page-myproxy #tbl-myproxy tbody td:nth-child(4){grid-area:lat} #page-myproxy #tbl-myproxy tbody td:nth-child(5){grid-area:rot} #page-myproxy #tbl-myproxy tbody td:nth-child(6){grid-area:act} #page-proxy #tbl-proxy-src tbody td:first-child, #page-myproxy #tbl-myproxy tbody td:first-child{padding:0 0 10px;border-bottom:1px solid var(--line); font-size:14px;line-height:1.35} #page-proxy #tbl-proxy-src tbody td:first-child .px-sub, #page-myproxy #tbl-myproxy tbody td:first-child .px-sub{margin-top:4px;font-size:12px} #page-proxy #tbl-proxy-src tbody td:first-child .px-exp, #page-myproxy #tbl-myproxy tbody td:first-child .px-exp{margin-top:4px} #page-proxy #tbl-proxy-src tbody td:first-child[colspan], #page-myproxy #tbl-myproxy tbody td:first-child[colspan]{padding:0;border:0} /* Xoay IP trải hết thẻ: "ID … · khoá … · N lần" chạy tiếp ngay sau viên "có" */ #page-proxy #tbl-proxy-src tbody td:nth-child(6) .px-sub{display:inline;margin-left:6px;vertical-align:middle} #page-proxy #tbl-proxy-src tbody td.mono, #page-myproxy #tbl-myproxy tbody td.mono{font-variant-numeric:tabular-nums} /* ---- Cổng luồng (admin) ---- :10005 duongtuandung [chưa đo] [luồng 2] chung IP với luồng 1 IP … Đi qua user@host:port Ô trạng thái (viên + "IP …") ghim góc phải trên bằng absolute: để trong cột lưới thì cột rộng bằng dòng IP và cắt cụt tên người dùng. */ #page-proxy #tbl-proxy-lane tbody tr{position:relative;grid-template-columns:auto minmax(0,1fr);column-gap:10px; grid-template-areas:"port user" "lane lane" "via via"} #page-proxy #tbl-proxy-lane tbody td:nth-child(1){grid-area:port} #page-proxy #tbl-proxy-lane tbody td:nth-child(2){grid-area:user;padding-right:76px} #page-proxy #tbl-proxy-lane tbody td:nth-child(3){grid-area:lane;padding-right:124px} #page-proxy #tbl-proxy-lane tbody td:nth-child(4){position:absolute;top:12px;right:14px;max-width:50%} #page-proxy #tbl-proxy-lane tbody td:nth-child(5){grid-area:via} /* ---- Luồng của tôi (user) ---- :10005 [luồng 2] [sống] Đi qua user@host:port */ #page-myproxy #tbl-mylanes tbody tr{grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px; grid-template-areas:"port lane st" "via via via"} #page-myproxy #tbl-mylanes tbody td:nth-child(1){grid-area:port} #page-myproxy #tbl-mylanes tbody td:nth-child(2){grid-area:lane} #page-myproxy #tbl-mylanes tbody td:nth-child(3){grid-area:via} #page-myproxy #tbl-mylanes tbody td:nth-child(4){grid-area:st} #page-proxy #tbl-proxy-lane tbody td, #page-myproxy #tbl-mylanes tbody td{padding-top:0} #page-proxy #tbl-proxy-lane tbody td::before, #page-myproxy #tbl-mylanes tbody td::before{display:none} #page-proxy #tbl-proxy-lane tbody td.px-port, #page-myproxy #tbl-mylanes tbody td.px-port{font-size:14px;line-height:22px;font-variant-numeric:tabular-nums} #page-proxy #tbl-proxy-lane tbody td:nth-child(2){font-weight:600;line-height:22px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #page-proxy #tbl-proxy-lane tbody td:nth-child(3){padding-top:6px} #page-myproxy #tbl-mylanes tbody td:nth-child(2){line-height:22px} #page-proxy #tbl-proxy-lane tbody td:nth-child(4), #page-myproxy #tbl-mylanes tbody td:nth-child(4){text-align:right;line-height:22px} #page-proxy #tbl-proxy-lane tbody td:nth-child(4) .px-sub, #page-myproxy #tbl-mylanes tbody td:nth-child(4) .px-sub{line-height:1.4;margin-top:4px} #page-proxy #tbl-proxy-lane .tagx, #page-myproxy #tbl-mylanes .tagx{font-size:12px;line-height:16px;padding:2px 8px;vertical-align:top} /* "Đi qua": nhãn đứng đầu dòng, địa chỉ mono chảy tiếp phía sau */ #page-proxy #tbl-proxy-lane tbody td:nth-child(5), #page-myproxy #tbl-mylanes tbody td:nth-child(3){margin-top:8px;padding-top:8px;border-top:1px solid var(--line); font-size:12px;line-height:1.45;color:var(--muted);word-break:break-all} #page-proxy #tbl-proxy-lane tbody td:nth-child(5)::before, #page-myproxy #tbl-mylanes tbody td:nth-child(3)::before{display:inline;margin:0 6px 0 0;font-family:var(--font); word-break:normal} #page-proxy #tbl-proxy-lane tbody td[colspan], #page-myproxy #tbl-mylanes tbody td[colspan]{grid-area:auto/1/auto/-1;margin:0;padding:0;border:0;color:inherit;word-break:normal;font-size:inherit} /* ---- Kho proxy novivo (admin) ---- teresa44746 · host:port [xoay] ⏳ hết hạn … ID | Đang dùng [Cấp cho …] */ /* Viên "xoay/tĩnh" ghim góc phải trên (absolute) — nếu để trong cột lưới thì cột đó rộng bằng nút "Cấp cho …" bên dưới và bóp tên proxy lại. */ #page-proxy #tbl-px-stock tbody tr{position:relative;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; grid-template-areas:"px px px" "exp exp exp" "id used act"} #page-proxy #tbl-px-stock tbody td:nth-child(1){grid-area:id} #page-proxy #tbl-px-stock tbody td:nth-child(2){grid-area:px;padding:0 64px 0 0;font-size:14px;font-weight:600;line-height:1.35} #page-proxy #tbl-px-stock tbody td:nth-child(3){position:absolute;top:12px;right:14px;padding:0} #page-proxy #tbl-px-stock tbody td:nth-child(4){grid-area:exp;padding:6px 0 10px;border-bottom:1px solid var(--line)} #page-proxy #tbl-px-stock tbody td:nth-child(5){grid-area:used;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #page-proxy #tbl-px-stock tbody td:nth-child(6){grid-area:act;align-self:end} #page-proxy #tbl-px-stock tbody td:nth-child(1)::before, #page-proxy #tbl-px-stock tbody td:nth-child(5)::before{display:block} #page-proxy #tbl-px-stock tbody td:nth-child(2)::before, #page-proxy #tbl-px-stock tbody td:nth-child(3)::before, #page-proxy #tbl-px-stock tbody td:nth-child(4)::before{display:none} #page-proxy #tbl-px-stock tbody td:nth-child(2) .px-sub{font-weight:400;margin-top:2px} #page-proxy #tbl-px-stock tbody td.cell-act{margin-top:0;border-top:0} #page-proxy #tbl-px-stock tbody td.cell-act .btn{max-width:100%;min-height:40px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;display:block} #page-proxy #tbl-px-stock tbody td[colspan]{grid-area:auto/1/auto/-1;margin:0;padding:0;border:0;font-weight:400;font-size:inherit} } /* Máy rất hẹp (<360px): 3 nút Tổng quan không đủ chỗ một hàng -> cho chữ xuống dòng. */ @media (max-width:359px){ #page-proxy > .panel:first-child .panel-actions .btn{min-width:0;white-space:normal;line-height:1.2} } /* Tablet (761–960px): 5 ô Tổng quan rớt thành 4 + 1 ô mồ côi và "3 job + 1 kiểm tra" gãy 2 dòng -> lưới 3 cột, ô chữ đó nằm cuối và chiếm 2 cột. */ @media (min-width:761px) and (max-width:960px){ #page-proxy .proxy-summary{grid-template-columns:repeat(3,minmax(0,1fr))} #page-proxy .psum:nth-child(4){order:1;grid-column:span 2} #page-proxy .psum:nth-child(4) .v{white-space:nowrap} }