/* ════════════════════════════════════════════════════════════════════════════ editor-desktop-canva.css — NÂNG CẤP GIAO DIỆN DESKTOP KIỂU CANVA ---------------------------------------------------------------------------- AN TOÀN TUYỆT ĐỐI: • TOÀN BỘ file nằm trong @media (min-width:1024px) → KHÔNG đụng 1 pixel nào của giao diện Mobile (bottom nav, thanh nổi, bảng trượt) đã chốt trước đó. • Mọi class mới mang tiền tố `dc-` → không đá CSS cũ (~2900 dòng) và không đá bộ `adv-` đã làm. • KHÔNG đổi cấu trúc shell (.ed-left-corner / .editor-main-content / .editor-workspace) → giữ nguyên zoom-engine, canvas sizing, luồng in PET. Kiến trúc drawer (rail + panel + nút ‹) ĐÃ CÓ SẴN trong dự án (ui-rail.js). File này chỉ: khoác áo Canva + thêm Top Toolbar + Context Toolbar + tab mới. ════════════════════════════════════════════════════════════════════════════ */ /* ── MẶC ĐỊNH: ẨN HẲN mọi thành phần desktop (quy tắc này nằm NGOÀI @media) ── Bắt buộc phải có: nếu chỉ khai báo trong @media(min-width:1024px) thì ở màn nhỏ các
này không có luật nào → hiện mặc định (display:block) và phá mobile. Trong @media desktop bên dưới sẽ bật lại (đặt sau nên thắng). */ .dc-ctx { display: none; } /* Mobile/tablet: ẩn 2 tab Vị trí + Hiệu ứng (đã có ở THANH NỔI #advTopBar + sheet khi chọn vật thể → tránh trùng). RIÊNG "Thành phần" (shapes) GIỮ LẠI trên mobile: thêm hình khối là chức năng KHÔNG có đường nào khác trên mobile (C6). Nút shapes được mobile-shapes.js bind (desktop-canva.js chỉ chạy ≥1024). LƯU Ý specificity: home.blade.php có `.editor-embed .ed-panel-section{display:block!important}` (0,2,0) và nằm SAU file này → phải viết `.editor-embed ...` (0,3,0) mới thắng được. */ @media (max-width: 1023.98px) { .editor-embed .ed-rail-btn[data-panel="effects"], .editor-embed .ed-rail-btn[data-panel="arrange"], .editor-embed .ed-panel-section[data-panel="effects"], .editor-embed .ed-panel-section[data-panel="arrange"] { display: none !important; } } @media (min-width: 1024px) { .dc-ui { --dc-brand: var(--brand, #0056b3); --dc-brand-soft: #EFF4FB; --dc-ink: #0F172A; --dc-ink-soft: #475569; --dc-muted: #94A3B8; --dc-line: #E7E9EF; --dc-hover: #F1F5F9; --dc-radius: 10px; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif; } /* Nút icon dùng chung */ .dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 8px; margin: 0; border: none; background: transparent; color: var(--dc-ink-soft); border-radius: var(--r-sm, 8px); cursor: pointer; font-size: 13px; font-weight: 600; -webkit-appearance: none; appearance: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease, transform .1s ease; } .dc-btn:hover:not(:disabled) { background: var(--dc-hover); color: var(--dc-ink); } .dc-btn:active:not(:disabled) { transform: scale(.96); } .dc-btn:disabled { color: #CBD5E1; cursor: default; } .dc-btn svg { width: 18px; height: 18px; flex: none; } .dc-btn.is-primary { background: var(--dc-brand); color: #fff; padding: 0 16px; } .dc-btn.is-primary:hover { background: var(--brand-dark, #004494); color: #fff; } .dc-btn.is-ghost { border: 1px solid var(--dc-line); background: #fff; } .dc-btn.is-ghost:hover { background: var(--dc-hover); } .dc-btn.is-on { background: var(--dc-brand-soft); color: var(--dc-brand); } .dc-sep { width: 1px; height: 22px; background: var(--dc-line); flex: none; margin: 0 4px; } /* ══════════════ CONTEXT TOOLBAR (đổi theo đối tượng đang chọn) ══════════════ */ .dc-ctx { display: none; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 46px; flex: none; padding: 6px 14px; background: #fff; border-bottom: 1px solid var(--dc-line); position: relative; z-index: 39; } .dc-ctx.is-on { display: flex; } /* ══ THANH CÔNG CỤ NỔI KIỂU CANVA ══ JS (desktop-canva.js) chuyển 3 thanh vào trong `.editor-workspace` → thanh chỉ rộng trong phạm vi canvas, không phủ sang cột mua hàng bên phải. NỔI ĐÈ (absolute), KHÔNG chiếm chỗ trong luồng: hiện/ẩn thanh thì áo, nút Hoàn tác, Mặt trước/sau, Chỉnh sửa/Xem trước đều ĐỨNG YÊN — không bị đẩy tụt xuống rồi nảy lên. Absolute này neo trong `.editor-workspace` (vốn đã position:relative + overflow:hidden) nên vẫn nằm gọn trong khung Editor, KHÔNG tràn ra phá web gốc. width:auto → CO THEO NỘI DUNG, không dàn hết ngang, không dính vào header. */ .editor-workspace > .dc-ctx { position: absolute; top: 62px; /* ngay DƯỚI hàng nút nổi sẵn có */ /* Căn giữa bằng left/right 0 + margin auto, KHÔNG dùng left:50%+translate: với absolute, `left:50%` cắt không gian khả dụng còn đúng NỬA khung nên thanh bị ép xuống 2 dòng. Đặt cả left lẫn right = 0 thì nó được tính trên TRỌN bề rộng, `width:max-content` mới giữ được 1 hàng. */ left: 0; right: 0; margin: 0 auto; z-index: 71; width: max-content; /* Khách chốt: DESKTOP để thanh trên 1 DÒNG (không bó 430 → 2 dòng nữa). nowrap giữ 1 hàng; cap 100%-24px để không tràn khung. Màn desktop hẹp mà thanh dài hơn khung thì CUỘN NGANG (overflow-x:auto) thay vì wrap/cắt. */ max-width: calc(100% - 24px); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 5px 8px; gap: 3px; border: 1px solid var(--dc-line); border-radius: var(--r-md, 12px); box-shadow: 0 6px 20px rgba(15, 23, 42, .10); } /* Thanh nằm ở 62px nên hàng nút nổi (14px) KHÔNG phải nhúc nhích. Chỉ thẻ cảnh báo tràn vùng in ở 64px là trùng chỗ → đẩy riêng nó xuống dưới thanh. (#dpiBadge đã gỡ hẳn — không cảnh báo phân giải thấp nữa.) --dc-ctx-h do JS đo bằng offsetHeight (đơn vị CSS px, KHÔNG dính zoom .9 của body.design) → thanh có xuống dòng cũng vẫn đúng, không phải đoán số cứng. */ .editor-workspace.dc-has-ctx #printOverflowWarn { top: calc(70px + var(--dc-ctx-h, 0px)); } /* ══ "Sắp xếp & Căn chỉnh": bỏ khỏi cột phải, gộp vào thanh nổi ══ Ô này ở cột phải hiện/ẩn theo trạng thái chọn nên cứ bấm vào hình là đẩy Lớp Thiết Kế / Bản nháp / Mẫu tụt xuống. JS đã bê 4 nút GỐC sang thanh nổi (không nhân bản), nên ở đây chỉ cần ẩn cái vỏ rỗng còn lại. arrange-engine.js đặt display bằng style inline → phải !important mới thắng. */ .editor-embed #arrange-properties-panel { display: none !important; } /* 4 nút đó vốn là `flex:1 1 0` cho vừa cột phải → vào thanh phải co lại vuông */ .dc-arr { display: inline-flex; align-items: center; gap: 3px; } .editor-embed .dc-ctx .arrange-btn { flex: 0 0 auto !important; width: 34px; height: 34px; padding: 0; border-radius: var(--r-sm, 8px); border: 1px solid var(--dc-line); background: #fff; color: var(--dc-ink-soft); font-size: 16px; } .editor-embed .dc-ctx .arrange-btn:hover { background: var(--dc-hover); color: var(--dc-brand); } /* Thêm 4 nút Sắp xếp làm thanh CHỮ dài quá (835px > 792px) và bị xuống 2 dòng. Bỏ chữ ở nút Khoảng cách, để icon không — đúng như Canva (chỉ Hiệu ứng / Chuyển động / Vị trí mới có chữ). Tiết kiệm ~85px, gọn về 1 hàng. */ .editor-embed .dc-ctx #dcSpacingBtn span { display: none; } .editor-embed .dc-ctx #dcSpacingBtn { padding: 0; width: 34px; } /* Ô chọn font + tìm kiếm */ .dc-font { position: relative; } .dc-font-btn { display: inline-flex; align-items: center; gap: 8px; justify-content: space-between; width: 168px; height: 34px; padding: 0 10px; border: 1px solid var(--dc-line); border-radius: var(--r-sm, 8px); background: #fff; color: var(--dc-ink); font-size: 13px; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; } .dc-font-btn:hover { background: var(--dc-hover); } .dc-font-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dc-font-pop { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 250px; max-height: 320px; overflow: hidden; background: #fff; border: 1px solid var(--dc-line); border-radius: var(--r-md, 12px); box-shadow: 0 12px 32px rgba(15, 23, 42, .14); flex-direction: column; } .dc-font-pop.is-on { display: flex; } .dc-font-search { flex: none; margin: 8px; padding: 8px 10px; border: 1px solid var(--dc-line); border-radius: var(--r-sm, 8px); font-size: 13px; outline: none; } .dc-font-search:focus { border-color: var(--dc-brand); box-shadow: 0 0 0 3px rgba(0, 86, 179, .12); } .dc-font-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 6px 8px; } .dc-font-item { display: block; width: 100%; padding: 9px 10px; margin: 0; border: none; background: transparent; border-radius: var(--r-sm, 8px); text-align: left; font-size: 15px; color: var(--dc-ink); cursor: pointer; } .dc-font-item:hover { background: var(--dc-hover); } .dc-font-item.is-on { background: var(--dc-brand-soft); color: var(--dc-brand); } /* ══ Cụm tăng/giảm cỡ chữ ══ CHIỀU CAO PHẢI LÀ 32px CHO RUỘT, 34px CHO CẢ CỤM (32 + 2 viền 1px). Trước đây ruột 32px nhưng cụm lại thành 34.2px vì hộp cha tính cả viền → cụm cao hơn mọi nút bên cạnh 0.2px và tụt xuống 1px, đo được: .dc-btn top 134.2 cao 34.0 .dc-num top 134.1 cao 34.2 ← lệch nút − và + top 135.2 cao 32.0 ← chữ − + tụt 1px so với B I U S Nay ép box-sizing + height cho cả cụm để tổng đúng 34.0px. */ .dc-num { display: inline-flex; align-items: center; box-sizing: border-box; height: 34px; border: 1px solid var(--dc-line); border-radius: var(--r-sm, 8px); overflow: hidden; background: #fff; } /* flex-centre thay vì căn chữ mặc định của