/** * gcc-creator.css — Giao diện tạo thiệp, viết mới hoàn toàn. * * THAY THẾ ba file: iphone-chat.css (728 dòng), gcc-chat-mode.css (1326 dòng) * và gcc-layout-center.css (573 dòng override). Hai file đầu dựng một chiếc * iPhone giả — khung máy, tai thỏ, thanh trạng thái, vạch home — với những * chuỗi :not() độ đặc hiệu 0,9,1 kèm !important. Bố cục mới không dùng khung * máy, nên mọi thứ ở đó chỉ còn là vật cản: mỗi thay đổi nhỏ phải viết một * override đặc hiệu hơn nữa. Bỏ hẳn thì không cần một chữ !important nào. * * Màu lấy từ token của trang (css/theme.css) nên tự đúng ở cả giao diện sáng * lẫn tối — bản cũ viết cứng màu tối vì luôn nằm trên "màn hình" nền trắng. */ /* ══════════════════════════════════════════════════════════════════════════ * 1. BỐ CỤC — một cột, preview ở giữa, hộp soạn dưới * ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ * BỘ TOKEN CỦA RIÊNG FILE NÀY * ══════════════════════════════════════════════════════════════════════════ * Các tấm nổi (bảng hạn mức, hộp xác nhận, tấm trượt tài khoản) TUYỆT ĐỐI * không dùng --ink / --card / --surface-2. Đo trên trang thật: ở phạm vi trong * khung chat, --ink ra #333333 và --card ra TRẮNG, dù trên --card là * #161616 — token bị định nghĩa lại ở tầng gần hơn. Hậu quả là chữ #333 nằm * trên nền #1c1c1e, tương phản 1.28: nhìn như chìm hẳn vào nền đen. * Tiền tố gcc-pnl- để không đụng tên với bất kỳ bộ token nào khác. * Nền phải ĐỤC: vài luật trong dự án này dùng token nền làm màu CHỮ. */ :root { /* Mũi tên gửi: nét bo tròn, cùng ngôn ngữ hình với các biểu tượng khác trong trang (stroke 2px, đầu nét bo). Để ở biến để chỉ khai báo một lần và sửa một chỗ. */ --gcc-icon-gui: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E"); --gcc-pnl-bg: #ffffff; --gcc-pnl-fg: #1a1a1a; --gcc-pnl-line: rgba(0, 0, 0, .14); } :root[data-theme="dark"], :root:not([data-theme="light"]) { --gcc-pnl-bg: #1c1c1e; --gcc-pnl-fg: #ececec; --gcc-pnl-line: rgba(127, 127, 127, .3); } /* ══════════════════════════════════════════════════════════════════════════ * 0. THANH ĐIỀU HƯỚNG DỌC (js/gcc-sidebar.js) * ══════════════════════════════════════════════════════════════════════════ */ /* Bề ngang để MỘT chỗ: cả sidebar lẫn phần lùi của khung làm việc đều đọc biến này. Đặt hai con số rời nhau thì sớm muộn lệch, và lệch kiểu này biểu hiện ra là nội dung chui xuống dưới thanh. */ :root { --gcc-sb-w: 232px; } body.gcc-sb-collapsed { --gcc-sb-w: 56px; } .gcc-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 120; width: var(--gcc-sb-w); display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; box-sizing: border-box; /* Đục, không trong suốt: khung làm việc cuộn ngay sát bên, nền trong suốt thì chữ chạy mờ mờ sau các mục điều hướng. */ background: #141414; border-right: 1px solid rgba(127, 127, 127, .16); color: #e8e8e8; font-size: 13.5px; overflow: hidden; transition: width .16s ease; } :root[data-theme="light"] .gcc-sidebar { background: #f7f7f7; color: #1a1a1a; } /* Khung làm việc lùi đúng bằng bề ngang thanh. position:fixed nên thanh không chiếm chỗ trong luồng — thiếu dòng này thì nó đè lên cột trái. */ body.gcc-has-sidebar .gcc-page-wrap { padding-left: var(--gcc-sb-w); } .gcc-sb-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 6px 10px; } .gcc-sb-brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-weight: 700; letter-spacing: .2px; white-space: nowrap; } .gcc-sb-toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto; border: 0; border-radius: 7px; background: none; color: inherit; cursor: pointer; } .gcc-sb-toggle:hover { background: rgba(127, 127, 127, .18); } .gcc-sb-nav { display: flex; flex-direction: column; gap: 2px; } /* Đẩy phần tài khoản xuống đáy */ .gcc-sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid rgba(127, 127, 127, .16); } .gcc-sb-item, .gcc-sb-user { display: flex; align-items: center; gap: 10px; /* Ô vuông 34px khi thu: biểu tượng phải đứng yên tại chỗ lúc thu/mở, nếu nó nhảy ngang thì mắt mất dấu mục đang chọn. */ min-height: 34px; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; } .gcc-sb-item svg, .gcc-sb-avatar { flex: 0 0 auto; } .gcc-sb-item:hover { background: rgba(127, 127, 127, .18); } .gcc-sb-item.is-active { background: rgba(127, 127, 127, .26); font-weight: 600; } .gcc-sb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #2f6bff; color: #fff; font-size: 11px; font-weight: 700; } .gcc-sb-email { overflow: hidden; text-overflow: ellipsis; opacity: .7; font-size: 12px; } .gcc-sb-user { cursor: default; } /* Thu về rail: giấu chữ, giữ biểu tượng. display:none chứ không phải opacity — chữ ẩn bằng opacity vẫn chiếm chỗ và vẫn bắt được chuột. */ body.gcc-sb-collapsed .gcc-sb-text { display: none; } body.gcc-sb-collapsed .gcc-sb-head { justify-content: center; padding-inline: 0; } body.gcc-sb-collapsed .gcc-sb-brand { display: none; } body.gcc-sb-collapsed .gcc-sb-item, body.gcc-sb-collapsed .gcc-sb-user { justify-content: center; padding-inline: 0; } /* Khổ hẹp: thanh tự về rail. 232px trên màn điện thoại là ăn hơn nửa bề ngang khung làm việc. */ @media (max-width: 900px) { :root { --gcc-sb-w: 52px; } .gcc-sidebar .gcc-sb-text { display: none; } .gcc-sidebar .gcc-sb-brand { display: none; } .gcc-sb-head { justify-content: center; padding-inline: 0; } .gcc-sb-item, .gcc-sb-user { justify-content: center; padding-inline: 0; } } /* HAI CỘT: trái là khung làm việc, phải là khung xem trước. Trước đây từng xếp một cột với preview ở giữa; khi đó phần làm việc bị đẩy xuống dưới màn hình nên vừa gõ vừa xem không tiện. Hai cột giữ cả hai thứ trong tầm mắt cùng lúc. */ /* Vỏ trang: kín bề ngang màn hình. Bản cũ kẹp 1200px + 24px lề trong một khối