/** * gcc-card-frame.css — Khung thiệp và viền các khối nội dung. * * ─── VẤN ĐỀ ──────────────────────────────────────────────────────────────── * Trước đây mọi viền đều 1px liền: khung thẻ 1px, hộp lời mời 1px, hộp sự kiện * 1px, vạch chân trang 1px. Cùng một trọng lượng nghĩa là KHÔNG CÓ THỨ BẬC — * mắt không biết đâu là mép tấm thiệp, đâu là ô bên trong, nên tổng thể trông * phẳng và rời rạc như một bảng biểu. * * ─── NGUYÊN TẮC ──────────────────────────────────────────────────────────── * Ba mức, phân biệt bằng CẢ trọng lượng LẪN kiểu nét — hai tín hiệu cùng chiều * thì mắt đọc ra thứ bậc ngay cả khi liếc nhanh: * * 1. KHUNG THẺ 2.5px LIỀN, màu nhấn đậm nhất * Đây là mép của vật thể. Nó phải nặng hơn hẳn mọi thứ bên * trong, không phải nặng hơn một chút. * 2. KHỐI NỘI DUNG 1.5px ĐỨT, màu nhấn nhạt (~45%) * Nét đứt là ngôn ngữ của văn phòng phẩm: đường chỉ khâu, nếp * gấp, đường cắt. Nó nói "đây là một vùng", không nói "đây là * một cái hộp" — đúng vai của khối nội dung nằm TRONG tấm thiệp. * 3. MỤC CON không viền * Ba tầng viền lồng nhau là quá nhiều. Mục con tách nhau bằng * khoảng trắng. * * Vì sao 1.5px chứ không 1px cho nét đứt: ở 1px trình duyệt vẽ ra những gạch * ngắn tới mức trông như đường chấm mờ, và trên màn hình có tỉ lệ điểm ảnh lẻ * thì nó nhoè hẳn. 1.5px giữ được hình dạng gạch. * * ─── PHẠM VI ─────────────────────────────────────────────────────────────── * • Thiệp cưới: MỌI mẫu, vì màu lấy từ token --wc-accent của chính mẫu đó nên * khung luôn ăn theo bảng màu, không áp một màu cứng lên tất cả. * • Thiệp thường: CHỈ mẫu mặc định. 217 mẫu còn lại đã có khung riêng do người * vẽ mẫu quyết định; đè lên chúng là xoá công của họ. * * Bộ chọn kèm [data-wedding-template] cho đủ ba bậc, ngang cơ với luật đặt viền * bên wedding-tokens.css — ngang cơ thì luật viết sau thắng, không cần * !important. */ /* ── 1. KHUNG THẺ ───────────────────────────────────────────────────────── */ .gcc-preview-wedding-card[data-wedding-template], .gcc-wedding-card[data-wedding-template] { border: 3px solid var(--wc-accent, rgba(127, 127, 127, .5)); } body.gcc-view-standalone .gcc-preview-card.gcc-tpl-default, .gcc-col--preview .gcc-preview-card.gcc-tpl-default { border: 3px solid rgba(127, 127, 127, .38); } /* ── 2. KHỐI NỘI DUNG — nét đứt ─────────────────────────────────────────── */ .gcc-preview-wedding-card[data-wedding-template][data-orientation] .invitation-message, .gcc-preview-wedding-card[data-wedding-template][data-orientation] .wedding-message, .gcc-preview-wedding-card[data-wedding-template][data-orientation] .wedding-event-details, .gcc-wedding-card[data-wedding-template][data-orientation] .invitation-message, .gcc-wedding-card[data-wedding-template][data-orientation] .wedding-message, .gcc-wedding-card[data-wedding-template][data-orientation] .wedding-event-details { border: 2px dashed var(--wc-accent-border, rgba(127, 127, 127, .45)); } /* Chân trang chỉ có vạch NGĂN phía trên, không phải một cái hộp — nó là phần đuôi của thiệp chứ không phải một vùng riêng. Bộ chọn phải kèm CẢ [data-orientation]: wedding-tokens.css đặt vạch này bằng `[data-wedding-template][data-orientation="landscape"]` — bốn bậc, nên bộ ba bậc của tôi thua và vạch vẫn ra nét liền. */ .gcc-preview-wedding-card[data-wedding-template][data-orientation] .wedding-footer, .gcc-wedding-card[data-wedding-template][data-orientation] .wedding-footer { border: 0; border-top: 2px dashed var(--wc-accent-border, rgba(127, 127, 127, .45)); } .gcc-col--preview .gcc-preview-card.gcc-tpl-default .gcc-preview-header, .gcc-col--preview .gcc-preview-card.gcc-tpl-default .gcc-preview-caption, body.gcc-view-standalone .gcc-preview-card.gcc-tpl-default .gcc-preview-header, body.gcc-view-standalone .gcc-preview-card.gcc-tpl-default .gcc-preview-caption { border: 2px dashed rgba(127, 127, 127, .4); border-radius: 12px; } /* ── 3. MỤC CON — không viền ────────────────────────────────────────────── */ .gcc-preview-wedding-card[data-wedding-template] .wedding-detail-item, .gcc-wedding-card[data-wedding-template] .wedding-detail-item { border: 0; } /* ── VẠCH DỌC GIỮA HAI CỘT — BỎ ───────────────────────────────────────── wedding-tokens.css kẻ một vạch đứng ở mép phải cột trái để chia đôi thẻ. Với hệ viền mới thì nó thừa: hai cột đã tách nhau rõ bằng chính khoảng trắng và bằng hai hộp nét đứt bên phải. Thêm một vạch liền nữa là ba loại đường kẻ trong cùng một tấm thiệp — mắt phải xử lý ba tín hiệu ngăn cách cho một việc duy nhất. Bộ chọn kèm [data-orientation] cho đủ bậc, cùng lý do với vạch chân trang. */ .gcc-preview-wedding-card[data-wedding-template][data-orientation] .wedding-header, .gcc-wedding-card[data-wedding-template][data-orientation] .wedding-header { border-right: 0; } /* ══════════════════════════════════════════════════════════════════════════ * HUY HIỆU ICON ĐÈ LÊN VIỀN KHỐI * ══════════════════════════════════════════════════════════════════════════ * Mỗi khối nội dung mang một icon nhỏ nằm ĐÈ lên mép trên của nó, và nền của * icon cùng màu nền thẻ nên đường nét đứt bị "cắt" ra một quãng — đúng lối * nhãn dập trên khung giấy mời, và cũng là lối
kinh điển. * * VÌ SAO ĐẶT TRÊN VIỀN, KHÔNG ĐẶT TRONG HỘP: * • Không tốn một dòng của nội dung — hộp WHEN/WHERE vốn đã chật. * • Icon nằm ngay chỗ mắt chạm vào khối đầu tiên, nên nó nói "khối này là * cái gì" trước khi người đọc bắt đầu đọc chữ. * • Đường nét đứt bị ngắt quãng tạo điểm dừng thị giác, hai khối hết dính * nhau thành một mảng. * * Icon vẽ bằng mask + data URI chứ không phải : mask lấy màu từ * `background` của chính phần tử, nên icon tự ăn theo --wc-accent của từng mẫu * thiệp. Nhúng ảnh màu cứng thì mẫu nền tối sẽ ra icon đen thui. * * Không đụng vào HTML: cả khung soạn lẫn trang người nhận dùng chung tên lớp, * nên hai bên nhận cùng một icon mà không phải sửa hai bộ dựng. */ .gcc-preview-wedding-card[data-wedding-template][data-orientation] .invitation-message, .gcc-preview-wedding-card[data-wedding-template][data-orientation] .wedding-message, .gcc-preview-wedding-card[data-wedding-template][data-orientation] .wedding-event-details, .gcc-wedding-card[data-wedding-template][data-orientation] .invitation-message, .gcc-wedding-card[data-wedding-template][data-orientation] .wedding-message, .gcc-wedding-card[data-wedding-template][data-orientation] .wedding-event-details { position: relative; } /* HUY HIỆU PHONG BÌ — phần tử THẬT, anh em của hộp lời nhắn. Vì sao không phải ::before của chính hộp ấy: hộp mang overflow-y:auto để lời nhắn dài cuộn được, mà overflow cắt mọi thứ tại mép trong của viền. Pseudo nằm bên trong nên chỉ có hai kết cục, đã thử cả hai và cả hai đều sai: cưỡi lên viền thì bị xén mất nửa trên, thụt vào trong thì đè lên chữ. Là anh em thì nó nằm ngoài vùng bị cắt. Lề âm kéo hộp lời nhắn lên đúng nửa chiều cao huy hiệu, nên huy hiệu cưỡi lên đường viền như một cái khấc. Chỉ hộp lời mời mới có. Hộp thời gian & địa điểm KHÔNG: mỗi mục bên trong đã mang icon riêng (lịch, ghim bản đồ), thêm một icon nữa trên viền là nói cùng một điều hai lần trong khoảng cách vài chục điểm ảnh. */ .gcc-preview-wedding-card .wedding-message-badge, .gcc-wedding-card .wedding-message-badge { display: block; align-self: center; flex: 0 0 auto; width: 36px; height: 22px; /* Kéo hộp lời nhắn lên nửa chiều cao huy hiệu → huy hiệu cưỡi lên viền. */ margin-bottom: -11px; position: relative; z-index: 1; /* Nền cùng màu thẻ để CẮT ĐỨT đường viền chạy qua phía sau. */ background-color: var(--wc-bg, #fff); /* Hình phong bì vẽ bằng chính màu nhấn của mẫu, nhờ mask + box-shadow nên mỗi mẫu thiệp tự có icon đúng tông, không cần 30 tệp ảnh. */ box-shadow: inset 0 0 0 36px var(--wc-accent, currentColor); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 17px 17px; mask-size: 17px 17px; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); pointer-events: none; } /* ══════════════════════════════════════════════════════════════════════════ * VÙNG ẢNH KHI CHƯA CÓ ẢNH * ══════════════════════════════════════════════════════════════════════════ * Mặc định vùng ảnh có nền xám đặc và một SÀN chiều cao theo % thẻ — hợp lý khi * có ảnh, vì ảnh cần chỗ. Khi CHƯA có ảnh thì đúng hai thứ ấy biến tấm thiệp * thành một mảng xám: ở khổ ngang nó chiếm gần hết thẻ, chữ bị đẩy ra rìa. * * Bộ dựng gắn sẵn .is-empty (vendor/js/gcc-card-markup.js) nên CSS không phải * đoán. Ô rỗng thì: bỏ nền đặc, bỏ sàn chiều cao, và vẽ một khung nét đứt nhạt * cùng ngôn ngữ với các khối khác — nói "chỗ này sẽ có ảnh", không phải "chỗ * này hỏng". */ .gcc-preview-media.is-empty { background: none; min-height: 0; border: 2px dashed rgba(127, 127, 127, .28); border-radius: 12px; } /* Sàn 52% của hệ khổ cũng phải nhường: nó tính theo chiều cao thẻ nên ở khổ ngang vẫn kéo ô rỗng cao lên. */ .gcc-has-aspect > .gcc-preview-media.is-empty { flex: 0 1 auto; min-height: 0; } .gcc-slide--empty { display: flex; align-items: center; justify-content: center; padding: 18px 14px; text-align: center; } .gcc-slide-empty-text { font-size: 13px; line-height: 1.5; opacity: .5; } /* Trang người NHẬN không có nút nào để thêm ảnh, nên khung nét đứt ở đó là một lời mời hành động không dẫn tới đâu. Bỏ khung, chỉ giữ dòng chữ. */ body.gcc-view-standalone .gcc-preview-media.is-empty { border: 0; }