/* ============================================================================ * tabscroll.css — CHUẨN DÙNG CHUNG TOÀN HỆ cho MỌI dải tab (tab control). * fb-20260815-075107-529: tab nhiều → KHÔNG tràn dòng; cuộn ngang; ẩn scrollbar; * kéo để trượt; cuối dải có 1 caret "xổ ra" (kiểu Visual Studio) float phải 2px. * * CÁCH DÙNG: nạp /Css/tabscroll.css + /Script/Work/tabscroll.js rồi: * - đánh dấu dải tab bằng class .his-tabscroll hoặc [data-tabscroll], HOẶC * - engine tự quét các dải quen thuộc (.gb-tabs, .nav-tabs, .blv-tabs …). * Xem đầu file tabscroll.js để biết danh sách selector tự quét. * ========================================================================== */ /* Dải tab: 1 hàng, cuộn ngang, KHÔNG xuống dòng, KHÔNG hiện scrollbar. */ .his-tabscroll{ flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge cũ */ position: relative; /* neo caret sticky */ scroll-behavior: smooth; padding-right: 0; /* mặc định KHÔNG chừa chỗ (caret ẩn khi dải chưa tràn) */ } /* fb-…-200: chỉ chừa chỗ cho caret khi dải THẬT SỰ tràn (có tab bị che). */ .his-tabscroll.hts-has-more{ padding-right: 30px; } .his-tabscroll::-webkit-scrollbar{ height: 0; width: 0; display: none; } /* Chrome/Safari */ .his-tabscroll.hts-drag{ cursor: grabbing; user-select: none; scroll-behavior: auto; } .his-tabscroll.hts-drag *{ pointer-events: none; } /* đang kéo → chặn hover/click con */ /* Dải tab dọc (flex-direction: column) → cuộn dọc thay vì ngang. */ .his-tabscroll.hts-vert{ flex-wrap: nowrap !important; overflow-x: hidden; overflow-y: auto; padding-right: 0; padding-bottom: 0; /* mặc định KHÔNG chừa chỗ (caret ẩn khi chưa tràn) */ } .his-tabscroll.hts-vert.hts-has-more{ padding-bottom: 30px; } /* ── Nút caret "xổ ra danh sách tab" (kiểu Visual Studio) ─────────────────── */ /* fb-…-200: MẶC ĐỊNH ẨN — chỉ hiện khi dải tràn (.hts-has-more), và KHÔNG kẻ viền trừ khi tab có viền (.hts-bordered). */ .hts-more{ flex: 0 0 auto; margin-left: auto; /* đẩy ra sát mép phải khi dải chưa tràn */ position: sticky; right: 2px; /* padding 2px so với lề phải */ align-self: stretch; min-width: 24px; display: none; /* ẩn mặc định; .hts-has-more mới bật lên */ align-items: center; justify-content: center; padding: 0 6px; cursor: pointer; border: 0; /* không viền trừ khi tab có viền (xem .hts-bordered) */ background: var(--hts-panel, #f6f8fa); color: var(--hts-text, #57606a); font-size: 12px; line-height: 1; z-index: 6; } .his-tabscroll.hts-has-more > .hts-more{ display: inline-flex; } /* Tab có viền → caret cũng kẻ viền đồng bộ (bỏ cạnh dưới cho dính vào thân tab). */ .his-tabscroll.hts-bordered .hts-more{ border: 1px solid var(--hts-line, #d0d7de); border-bottom: 0; } .hts-more:hover{ color: var(--hts-accent, #0969da); border-color: var(--hts-accent, #0969da); } .hts-more .hts-caret{ pointer-events: none; } /* Dải dọc → caret nằm cuối, đẩy xuống đáy, float phải chuyển thành float đáy. */ .his-tabscroll.hts-vert .hts-more{ margin-left: 0; margin-top: auto; right: auto; bottom: 2px; position: sticky; align-self: auto; width: 100%; } /* ── Menu xổ ra (append vào để không bị overflow cắt) ───────────────── */ .hts-menu{ position: fixed; z-index: 100000; min-width: 200px; max-width: 460px; max-height: 60vh; overflow-y: auto; padding: 4px 0; border: 1px solid var(--hts-line, #d0d7de); background: var(--hts-panel, #ffffff); color: var(--hts-text, #1f2328); box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 13px; } .hts-menu-item{ display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; white-space: nowrap; cursor: pointer; border-left: 3px solid transparent; } .hts-menu-item:hover{ background: var(--hts-hover, rgba(9,105,218,.10)); } .hts-menu-item.on{ border-left-color: var(--hts-accent, #0969da); color: var(--hts-accent, #0969da); font-weight: 700; } .hts-menu-item .hts-mi-ico{ flex: 0 0 auto; width: 16px; text-align: center; opacity: .85; } .hts-menu-item .hts-mi-tt{ flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .hts-menu-item .hts-mi-dot{ flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--hts-ok, #1a7f37); }