/* ============================================================================= * bulbal-panels.css — CÀI ĐẶT + MENU của Bulbal Chat (nạp SAU bulbal-tokens.css, * cùng lớp với bulbal-shell/contacts/messages/composer). * * Sở hữu độc quyền: hàng mục cài đặt (.panel-form-row, .panel-form-column và * a.flat-button/a.danger.flat-button bên trong — CHỈ khi là con trực tiếp của * panel-form-row/column, xem lưu ý §0.1), header + phần "chưa ai nhận" của màn * thông tin nhóm (#info-caption-panel, #info-title), menu ngữ cảnh (ul.menu, * dùng cho menu ⋮ tin nhắn/hội thoại/thành viên). * * KHÔNG style ở đây (dù có trong brief gốc) — checkbox/toggle * (.material-icons.clickable) và khối mã QR (.qr-code): phát hiện lúc viết là * css/bulbal-forms.css (agent song song) đã nhận 2 mục này trước, xem lý do + * bằng chứng ở §4 bên dưới và report. * * CHỈ dùng var(--bb-*) khai báo ở bulbal-tokens.css; 2 chỗ không có token màu * tương ứng (đỏ nguy hiểm) dùng lại biến cầu nối --clr-danger-text/-hover và * --clr-error-text-dark có sẵn từ base.css (KHÔNG phải bịa hex mới — xem ghi * chú §3 + report kèm phase về giới hạn tương phản). * * §0.1 — Vì sao selector chỉ nhắm "con trực tiếp": .panel-form-row/-column và * a.flat-button còn được dùng ở nhiều dialog khác ngoài phạm vi audit (sửa vCard * chia sẻ trong tin nhắn — the-card-mini.jsx dùng .flat-button trong * .contact-actions, KHÔNG phải con của panel-form-column; tag-manager.jsx dùng * .flat-button trong .quoted). Selector bám đúng cấu trúc DOM thật (đọc từ JSX, * xem report) để không đè lên vùng của Phase 03 (bulbal-messages.css). * * §0.2 — .contact-box (danh sách thành viên trong info-view, render qua * ContactList → cùng class với sidebar) ĐÃ được Phase 02 (bulbal-contacts.css) * style toàn cục — cố tình KHÔNG lặp lại ở đây để tránh trùng/ghi đè chéo. * * Số đo tương phản đã tính bằng công thức relative luminance chuẩn WCAG, ghi * đầy đủ trong report: * plans/20260729-1500-bulbal-chat-ui-theme/reports/phase-06-panels-css.md * ============================================================================= */ /* ── 1. HÀNG MỤC CÀI ĐẶT — khung nhóm + khoảng cách ───────────────────────── * base.css: .panel-form-row {padding:.5rem .75rem} / .panel-form-column * {padding:.5rem .75rem}. Chỉ tăng khoảng cách dọc + line-height cho form đỡ * "dí sát" — KHÔNG đổi nền (nền đã đúng --bb-bg-side kế thừa từ #sidepanel, * tô nền khác màu ở đây sẽ tạo lớp "thẻ vô hình" trùng màu cha, xem report). */ .panel-form-row { padding-top: 10px; padding-bottom: 10px; min-height: 26px; } .panel-form-column { padding-top: 10px; padding-bottom: 10px; } /* Khoảng cách quanh mỗi field trong nhóm (Tên/ID/Bí danh/Mô tả...) */ .panel-form-column > .group { margin-top: 6px; margin-bottom: 6px; } /* ── 2. HÀNG MỤC DẠNG LIÊN KẾT — thẻ bo góc + icon căn chỉnh + hover ───────── * a.flat-button dùng cho: điều hướng Chung/Thông báo/Bảo mật/Hỗ trợ (nguồn: * account-settings-view.jsx:104-167), Hình nền (acc-general-view.jsx:83-87, * cha là .panel-form-row.clean-clickable), Liên hệ/Điều khoản/Chính sách * (acc-support-view.jsx:14-24), Sửa/Thêm thành viên/Bảo mật (info-view.jsx:591, * 715, 732), Xóa/Rời/Chặn/Báo cáo/Đăng xuất (topic-security.jsx, acc-security- * view.jsx — phần đỏ tách riêng ở §3). * Chỉ nhắm CON TRỰC TIẾP của panel-form-column/row (xem §0.1) — không đụng * flat-button trong the-card-mini.jsx (.contact-actions, thuộc Phase 03) hay * tag-manager.jsx (.quoted, ngoài phạm vi). */ .panel-form-column > a.flat-button:not(.float-right), .panel-form-row > a.flat-button:not(.float-right) { width: 100%; height: auto; min-height: 46px; padding: 6px 10px; margin: 2px 0; gap: 10px; border-radius: var(--bb-r-row); font-weight: 500; text-transform: none; /* base.css ép uppercase — chữ Việt có dấu viết hoa toàn hàng khó đọc */ letter-spacing: 0; transition: background-color var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease); } .panel-form-column > a.flat-button:not(.float-right):hover, .panel-form-row > a.flat-button:not(.float-right):hover, .panel-form-column > a.flat-button:not(.float-right):focus, .panel-form-row > a.flat-button:not(.float-right):focus { background-color: var(--bb-hover); text-decoration: none; } .panel-form-column > a.flat-button:not(.float-right):active, .panel-form-row > a.flat-button:not(.float-right):active { transform: scale(0.99); } /* Icon dẫn đầu — bọc thành khối tròn nhỏ để có cảm giác "thẻ" ngay cả khi * không hover (giống icon-badge kiểu Telegram/Zalo). */ .panel-form-column > a.flat-button:not(.float-right) > i.material-icons:first-child, .panel-form-row > a.flat-button:not(.float-right) > i.material-icons:first-child { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--bb-r-pill); background-color: var(--bb-hover); color: var(--bb-txt-2); font-size: 19px; } /* Nút "Sửa" nổi góc phải (.float-right) — giữ vị trí absolute của base.css, * chỉ bo góc + hover nhẹ cho khớp ngôn ngữ thiết kế mới. */ .panel-form-column > a.flat-button.float-right, .panel-form-row > a.flat-button.float-right { padding: 4px 10px 4px 8px; border-radius: var(--bb-r-pill); text-transform: none; font-weight: 500; transition: background-color var(--bb-dur) var(--bb-ease); } .panel-form-column > a.flat-button.float-right:hover, .panel-form-row > a.flat-button.float-right:hover { background-color: var(--bb-hover); text-decoration: none; } /* ── 3. NÚT NGUY HIỂM (a.danger.flat-button) — Đăng xuất / Xóa tài khoản / * Xóa hội thoại / Rời nhóm / Chặn / Báo cáo ───────────────────────────────── * KHÔNG có token --bb-danger trong bulbal-tokens.css (chỉ có --bb-brand/--bb-ok). * Dùng lại --clr-error-text-dark (biến cầu nối có sẵn từ base.css, sáng nhất * trong nhóm đỏ hiện có — KHÔNG phải hex tự bịa) thay cho --clr-danger-text mặc * định vì --clr-danger-text ở chế độ tối (#931f1f) đo được CHỈ 1.71:1 trên nền * --bb-bg-side tối — trượt rất xa chuẩn AA. --clr-error-text-dark (#de2323/ * #b51c1c) đo được: * - Sáng: trên #FFFFFF → 6.67:1 (ĐẠT AA cho mọi cỡ chữ) * - Tối: trên --bb-bg-side (#111827) → 3.69:1 (ĐẠT AA cho chữ lớn/đậm * ≥14pt-bold theo WCAG, CHƯA đạt AA chữ thường 4.5:1) * → bù bằng font-weight 700 để cỡ+độ đậm rơi vào ngưỡng "chữ lớn" của WCAG. * Vẫn CHƯA ĐẠT AA chữ thường tuyệt đối ở tối — ghi rõ trong report, đề xuất * P01/P05 bổ sung token --bb-danger riêng cho bulbal-tokens.css ở đợt sau. */ .panel-form-column > a.danger.flat-button:not(.float-right) { width: 100%; min-height: 46px; padding: 6px 10px; margin: 2px 0; gap: 10px; border-radius: var(--bb-r-row); font-weight: 700; text-transform: none; color: var(--clr-error-text-dark); transition: background-color var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease); } .panel-form-column > a.danger.flat-button:not(.float-right):hover, .panel-form-column > a.danger.flat-button:not(.float-right):focus { background-color: var(--bb-hover); color: var(--clr-danger-text-hover); text-decoration: none; } .panel-form-column > a.danger.flat-button:not(.float-right):active { transform: scale(0.99); } .panel-form-column > a.danger.flat-button:not(.float-right) > i.material-icons:first-child { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--bb-r-pill); background-color: var(--bb-hover); color: inherit; font-size: 19px; } /* ── 4. CHECKBOX/TOGGLE (Âm thanh tin nhắn, Cảnh báo thông báo, Ẩn danh, * Đã tắt/Lưu trữ) + 5. KHỐI MÃ QR — CỐ Ý KHÔNG viết rule ở đây ───────────── * Phát hiện lúc code review chéo: css/bulbal-forms.css (đang được agent song * song viết CÙNG lúc, ghi "Phase 06: NHÓM BIỂU MẪU" ở header — trùng số phase * với brief của tôi, có vẻ điều phối viên chia 2 brief chồng phạm vi) ĐÃ style * cả 2 mục này trước khi tôi kiểm tra: * - `.panel-form-row:has(> i.material-icons.clickable)` (vùng chạm ≥44px * trên cả HÀNG, không phải trên icon) + `.panel-form-row > i.material- * icons.clickable {font-size:24px}` — file forms.css mục 6. * - `.qr-code {padding:14px; background:var(--bb-txt-on-brand); ...}` — file * forms.css mục 8. Nền trắng CỐ Ý cố định (không light-dark) để mã QR luôn * quét được ở chế độ Tối — bản nháp đầu của tôi lỡ đặt nền * var(--bb-bg-side) (tối ở dark mode), một lựa chọn kém hơn hẳn, đã bỏ. * Viết trùng 2 selector này ở bulbal-panels.css sẽ tạo xung đột thật (không * chỉ trùng lặp vô hại) — bỏ hẳn khỏi file này, nhường cho bulbal-forms.css. * Đã verify bằng cách đọc toàn bộ nội dung file kia (không chỉ đoán) trước khi * quyết định. Xem report §"Xung đột phát hiện" để P05 xác nhận lại khi cả 2 * file cùng được vào index.html. */ /* ── 6. MÀN THÔNG TIN NHÓM (info-view) — phần chưa ai nhận ────────────────── * #info-caption-panel: base.css gán --clr-background-blue-gray-300 (xám-xanh * cũ, không đổi theo redesign) — bulbal-shell.css (P01) chỉ style phần DÙNG * CHUNG .caption-panel (viền dưới/padding/gap), KHÔNG khai báo nền riêng cho * ID này (ghi rõ trong comment gốc của shell.css: "không phase nào sở hữu * riêng"). Nhận về đây để đồng bộ 3 header (side/topic/info) cùng 1 kiểu banner * xanh --bb-hdr-bg/--bb-hdr-txt — cặp token này đã đo 4.81:1 (ĐẠT AA) trong * report Phase 01, dùng lại nguyên, không tính lại. */ #info-caption-panel { background-color: var(--bb-hdr-bg); color: var(--bb-hdr-txt); } #info-caption-panel a { color: var(--bb-hdr-txt); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; transition: background-color var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease); } #info-caption-panel a:hover { background-color: var(--bb-hdr-hover-bg); color: var(--bb-hdr-txt-hover); } #info-title { font-weight: 700; letter-spacing: -.01em; } /* Danh sách thành viên (GroupManager/ContactList → ul.contact-box) CỐ Ý KHÔNG * style lại ở đây — đã có Phase 02 (bulbal-contacts.css) phủ toàn cục vì cùng * class .contact-box, xem §0.2. */ /* ── 7. MENU NGỮ CẢNH (⋮) — Xóa tin nhắn/Chặn/Ghim/Lưu trữ... ─────────────── * Nguồn: widgets/context-menu.jsx:573 →