@layer legacy { /* Shell migration: retain the proven flex + padding-left document structure. Overlay and canvas siblings remain outside normal layout flow. NGUYÊN TẮC CỦA FILE NÀY (đọc trước khi thêm rule): Hình học của shell — margin, bo góc, đổ bóng, nền theo material — do khối "Unified Fluent/Liquid Glass product shell" trong styles.css:13624 quy định cho cả rail, header và 12 trang nội dung cùng lúc. File này CHỈ đặt kích thước (chiều cao header, bề rộng rail) và vị trí. Ép border-radius/box-shadow ở đây là bắn hạ chính bộ rule phân biệt Fluent với Glass. */ body { color: var(--ui-text-primary); } /* AntiTask và AntiNote ghép thành một mặt phẳng liền: chỉ làm phẳng đúng cạnh chạm nhau. Hai góc trái vẫn bo, nếu không cửa sổ mất hẳn hình dáng khi dock. */ .nav-rail { /* Thẻ nổi cách mép shell đúng một --shell-gap. Khe này là diện tích duy nhất hình nền lộ ra ở cạnh trái/trên/dưới, và là thứ làm bốn bậc độ đục nhìn thấy được. Bề rộng trừ đi đúng phần đã đẩy vào để .app padding-left không phải đổi theo. */ top: var(--shell-gap) !important; bottom: var(--shell-gap) !important; left: var(--shell-gap) !important; box-shadow: none; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));} /* Chỉ chiều cao và đệm ngang. Margin/bo góc/nền/bóng của header thuộc khối shell ở styles.css:13666 — nó đã bám --ux-header (theo material) và đã có specular highlight riêng cho Glass ở styles.css:13692. */ /* Chế độ canvas ảnh: shell phải biến mất hẳn để ảnh chiếm trọn khung. */ /* ========================================================================== VAI TRÒ BỀ MẶT (GĐ2, 29/08/2026) — hai class dưới đây là CÁCH DUY NHẤT để một vùng nhận màu nền của thang bề mặt. .ux-pane L1 sunken — cột điều hướng: cây dự án, cột lọc, danh sách, sidebar Cài đặt. Chrome thì chìm hơn nền. .ux-canvas L2 base — thân trang: vùng chứa lưới thẻ, khung nội dung chính, khung vẽ Art Editor. Vì sao phải là class riêng chứ không dùng lại tên component: trước GĐ2, màu nền bám .notics-col-projects / .notics-col-notes / .notespeed-gallery-col. Nhưng .notics-col-notes ở Notebook là VÙNG NỘI DUNG, còn ở QuickNote, Painting và Art Editor lại là CỘT MENU — cùng một dòng CSS nên hai trang ra hai kết quả ngược nhau. Class vai trò cắt đứt chuyện đó: vùng nào làm việc gì thì mang đúng class đó, không phụ thuộc nó tên là gì. Còn !important vì đây là lớp nền tảng, đứng sau styles.css và phải thắng những khai báo lẻ còn sót lại ở đó — quy tắc R6: chỉ lớp token/nền tảng mới được ép ưu tiên cho màu nền. ========================================================================== */ /* .notics-editor-wrap là RUỘT của popup soạn thảo, nằm trong .notespeed-modal-panel (bậc L4 overlay) — để trong suốt cho nó ăn theo nền hộp thoại. .project-main là selector chết: markup dùng .project-col-main, đã mang .ux-canvas. Giữ lại ở đây chỉ tạo ảo giác đang có tác dụng — xóa. */ .notics-editor-wrap { color: var(--ui-text-primary);} } /* @layer legacy */ /* Windows High Contrast Mode (forced-colors): nav rail item đang chọn (aria-current) và tab/segmented đang chọn (aria-selected) chỉ phân biệt bằng nền/bóng — cả hai đều bị forced-colors xóa sạch, nên mất dấu hiệu "đang ở đâu" với người dùng tương phản cao. Dùng lại đúng hai thuộc tính ARIA đã gắn sẵn khắp app (nav rail, project workspace, settings nav, tab) làm điểm neo chung — không thêm class mới, không đổi màu ở chế độ thường. :not(:focus-visible) để viền focus bàn phím luôn thắng khi đang focus. Đặt ở @layer utilities (layer cao nhất, đang trống) vì @layer legacy — layer thấp nhất theo thứ tự khai báo — luôn thua mọi layer sau nó với khai báo thường (không !important), bất kể độ đặc hiệu; rule outline khác của rail nằm ở layer sau nên đặt cùng legacy sẽ vô tác dụng dù selector khớp đúng phần tử (đã xác minh bằng CSSOM). Kiểm bằng page.emulateMedia({ forcedColors: 'active' }), spec forcedColorsMode.spec.js. */ @layer utilities { @media (forced-colors: active) { [aria-current="page"]:not(:focus-visible), [aria-selected="true"]:not(:focus-visible) { outline: var(--ui-stroke-thick) solid Highlight; outline-offset: calc(-1 * var(--ui-stroke-thick)); } } } /* Khai báo từng là !important trong @layer legacy — chuyển sang layer cuối `overrides` (thắng mọi khai báo thường ở mọi layer, đúng như cờ important cũ), cùng selector, cùng thứ tự, cùng ngữ cảnh @media. Sinh tự động 01/10/2026 (KE-HOACH-DAT-CHUAN-QUOC-TE-UI GĐ B–E); thuộc tính ẩn/hiện/định vị giữ cờ important vì JS gắn nội tuyến. */ @layer overrides { .app { transition: none; } html.antinote-docked .app { border-top-right-radius: 0; border-bottom-right-radius: 0; } .nav-rail { width: var(--rail-w); padding: var(--ui-space-2) var(--ui-space-0-5); border-radius: var(--ui-rail-radius, var(--ui-radius-window)); transition: none; } .topbar { height: var(--ui-header-h); min-height: var(--ui-header-h); max-height: var(--ui-header-h); padding: 0 var(--ui-space-3); } :is(.notics-page-header, .feedback-admin-header) { height: var(--ui-header-h); min-height: var(--ui-header-h); border-bottom: var(--ui-resizer-line) solid var(--ux-divider); background: var(--ux-header); box-shadow: none; } .ux-pane { background: var(--ux-sunken); } .ux-canvas { background: var(--ux-base); } .notics-editor-wrap { background: transparent; } } /* GĐ B–E bổ sung: khai báo từng mang cờ important có chú thích đứng trước (lượt đầu bỏ sót). */ @layer overrides { .app { /* Rail bị đẩy vào trong một --shell-gap nhưng GIỮ NGUYÊN bề rộng card, nên phần đệm trái phải cộng thêm đúng khoảng đã đẩy. Nếu trừ vào bề rộng rail thay vì cộng vào đây thì lòng rail hụt 8px, không đủ cho ô icon 36px. */ padding-left:calc(var(--rail-w) + var(--shell-gap)); } .nav-rail { /* Viền ĐỦ BỐN CẠNH. Trước đây chỉ có cạnh phải, nên ba cạnh còn lại của thẻ rail giáp thẳng ra khe --shell-gap mà không có gì đánh dấu — ở chế độ Tối nền rail và desktop phía sau khe gần như cùng độ sáng, thành ra rail mất hẳn hình dáng ở nửa trên và chỉ còn "thấy" được chỗ nào tình cờ có nội dung sáng phía sau. */ border:var(--ui-resizer-line) solid var(--ui-rail-divider); } .ux-pane { /* Đường kẻ phải là bắt buộc, không phải trang trí: ở chế độ Sáng bậc chìm chỉ cách nền ~4%, một mình nó chưa đủ neo mép cột trên màn hình chỉnh sai gamma. Trước đây chỉ khai border-color, nên cột nào không tự đặt border-width thì không có đường kẻ nào cả — đúng ba cột NoteSpeed/AntiPaint/AntiScreenshot. */ border-right:var(--ui-resizer-line) solid var(--ui-divider); } }