/* ============================================================================= * Phattify — TOKEN GỐC TOÀN SITE * * Nạp file này SAU gcc-tokens.css và styles.css, TRÊN MỌI TRANG. * Đây là nơi duy nhất cần sửa để đổi diện mạo cả site. * * ── Vì sao cần file này ───────────────────────────────────────────────────── * Dự án có hai hệ token rời nhau: * • vendor/css/gcc-tokens.css → ~600 biến --gcc-*, dùng bởi component vendor * • css/styles.css → ~15 biến ngắn (--bg, --ink…), dùng bởi khung trang * Chúng từng mang giá trị hard-code trùng lặp, và index.html chỉ nạp cái sau * còn create.html chỉ nạp cái trước — nên đổi giao diện không đồng bộ. * * File này biến hệ ngắn thành BÍ DANH của hệ --gcc-*, để chỉ còn MỘT nguồn màu. * * ── Cách đổi giao diện ────────────────────────────────────────────────────── * Chỉnh khối "BẢNG MÀU" bên dưới. Mọi thứ khác kế thừa theo. * Chế độ tối là MẶC ĐỊNH; sáng chỉ khi . * * ── QUY ƯỚC BA TẦNG (đọc trước khi viết CSS mới) ──────────────────────────── * Tầng 1 css/theme.css NƠI DUY NHẤT quyết định màu. Chỉ ở đây mới * được viết mã màu thô (#hex, rgb). * Tầng 2 vendor/gcc-tokens.css Từ vựng thiết kế: spacing, radius, z-index, * token component. Màu DẪN XUẤT từ tầng 1. * Tầng 3 CSS component Chỉ tiêu thụ var(--…). Không bao giờ viết hex. * * ── VÙNG CỐ Ý KHÔNG THEO CHỦ ĐỀ ───────────────────────────────────────────── * Ranh giới: KHUNG ỨNG DỤNG theo chủ đề, NỘI DUNG thì không. * Các file sau hard-code màu là ĐÚNG, đừng token hoá: * iphone-chat.css vẽ chiếc iPhone — #1c1c1e, #30d158 là màu thật iOS * gcc-mobile-fs.css trình xem toàn màn hình, bảng màu tối cố định * gcc-card-opening.css | * gcc-live-preview.css | vẽ TẤM THIỆP — thiệp là nội dung. Người nhận phải * wedding-card-layout.css| thấy đúng thiết kế bất kể người tạo dùng chế độ nào * gcc-generate-card-*.css| * * Màu THƯƠNG HIỆU (vàng cưới #d4af37…) cũng giữ nguyên ở cả hai chế độ — * chỉ đảo độ sáng của nền pha màu đó. * ========================================================================== */ /* ───────────────────────────────────────────────────────────────────────────── * 1. BẢNG MÀU MẶC ĐỊNH — TỐI. Chỉnh ở đây là đổi cả site. * * Dùng :not([data-theme="light"]) chứ không phải [data-theme="dark"], để nền * tối áp dụng NGAY CẢ KHI JS chưa chạy / bị cache bản cũ / lỗi. Không có JS * trong đường tới hạn của màu nền, nên không bao giờ chớp trắng. * ────────────────────────────────────────────────────────────────────────── */ :root:not([data-theme="light"]) { /* Thang nền (tối → sáng dần). Đặt tên theo VAI TRÒ, không theo màu, để đổi chế độ không phải đổi tên biến. */ --pf-bg: #0d0d0d; /* nền trang — đen sâu hơn thẻ để tạo lớp */ --pf-surface: #161616; /* thẻ, panel */ --pf-surface-2: #1f1f1f; /* nền lún, hover */ --pf-surface-3: #2a2a2a; /* nền nhấn */ --pf-ink-strong: #f4f4f4; /* tiêu đề */ --pf-ink: #e4e4e4; /* chữ thân */ --pf-ink-muted: #a0a0a0; /* chú thích */ --pf-ink-ghost: #6b6b6b; /* placeholder */ /* Viền phải SÁNG hơn nền, không tối hơn. Trên nền #0d0d0d thì #2f2f2f gần như vô hình — mắt cần chênh lệch lớn hơn ở vùng tối so với vùng sáng. */ --pf-line: #5a5a5a; /* viền mặc định — tương phản ~3.5:1 với nền */ --pf-line-faint: #333333; /* viền mờ, dùng cho vạch ngăn phụ */ --pf-line-strong: #757575; /* viền nhấn */ /* Nền tối thì nút chính phải sáng mới đủ tương phản */ --pf-btn-bg: #f0f0f0; --pf-btn-bg-hover: #ffffff; --pf-btn-text: #111111; /* Màu nhấn nâng độ sáng cho đủ tương phản trên nền tối */ --pf-accent: #4aa3ff; --pf-accent-soft: #16283d; /* nền vùng đang chọn */ --pf-accent-ring: rgba(74, 163, 255, .28); /* quầng focus/hover */ --pf-on-accent: #0b1622; /* chữ đặt TRÊN nền nhấn */ --pf-success: #46c97a; --pf-warning: #ffb340; --pf-danger: #ff6b60; --pf-overlay: rgba(0, 0, 0, .72); /* lớp phủ sau modal */ --pf-shadow: 0 2px 10px rgba(0, 0, 0, .55); --pf-shadow-hover: 0 8px 26px rgba(0, 0, 0, .68); } /* ───────────────────────────────────────────────────────────────────────────── * 2. CHẾ ĐỘ SÁNG — chỉ khi người dùng chủ động chọn (nút ☀️/🌙) * ────────────────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { --pf-bg: #ffffff; --pf-surface: #ffffff; --pf-surface-2: #f7f7f7; --pf-surface-3: #eeeeee; --pf-ink-strong: #1a1a1a; --pf-ink: #333333; --pf-ink-muted: #6b6b6b; --pf-ink-ghost: #a0a0a0; --pf-line: #dddddd; --pf-line-faint: #eeeeee; --pf-line-strong: #bbbbbb; --pf-btn-bg: #1f1f1f; --pf-btn-bg-hover: #000000; --pf-btn-text: #ffffff; --pf-accent: #0a84ff; --pf-accent-soft: #eff6ff; --pf-accent-ring: rgba(10, 132, 255, .18); --pf-on-accent: #ffffff; --pf-success: #1a7f37; --pf-warning: #b8860b; --pf-danger: #b91c1c; --pf-overlay: rgba(0, 0, 0, .55); --pf-shadow: 0 2px 8px rgba(0, 0, 0, .06); --pf-shadow-hover: 0 6px 20px rgba(0, 0, 0, .12); } /* ───────────────────────────────────────────────────────────────────────────── * 3. CHỮ & HÌNH KHỐI — dùng chung, không phụ thuộc chế độ màu * ────────────────────────────────────────────────────────────────────────── */ :root { --pf-serif: 'Lora', Georgia, serif; --pf-sans: 'Inter', -apple-system, "Segoe UI", Roboto, sans-serif; --pf-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --pf-radius: 12px; --pf-pill: 100px; } /* ───────────────────────────────────────────────────────────────────────────── * 3. BẮC CẦU → hệ token ngắn của khung trang (css/styles.css) * styles.css khai báo các biến này bằng giá trị hard-code; ở đây ta biến chúng * thành bí danh. Cùng độ đặc hiệu nhưng file này nạp SAU nên thắng cascade. * ────────────────────────────────────────────────────────────────────────── */ :root { --bg: var(--pf-bg); --card: var(--pf-surface); --surface: var(--pf-surface-2); --ink-strong: var(--pf-ink-strong); --ink: var(--pf-ink); --muted: var(--pf-ink-muted); --ghost: var(--pf-ink-ghost); --line: var(--pf-line); --line-faint: var(--pf-line-faint); --btn-bg: var(--pf-btn-bg); --btn-bg-hover: var(--pf-btn-bg-hover); --btn-text: var(--pf-btn-text); --radius: var(--pf-radius); --pill: var(--pf-pill); --shadow: var(--pf-shadow); --shadow-hover: var(--pf-shadow-hover); --serif: var(--pf-serif); --sans: var(--pf-sans); } /* ───────────────────────────────────────────────────────────────────────────── * 4. BẮC CẦU → hệ token vendor (--gcc-*) * gcc-tokens.css đã có bảng tối riêng khoá theo [data-theme="dark"]. Ở đây chỉ * ghim các token LÕI về bảng màu chung, để hai hệ không lệch nhau. * ────────────────────────────────────────────────────────────────────────── */ :root { --gcc-bg: var(--pf-bg); --gcc-bg-alt: var(--pf-surface-2); --gcc-surface: var(--pf-surface); --gcc-surface-1: var(--pf-surface-2); --gcc-surface-2: var(--pf-surface-3); --gcc-ink-strong: var(--pf-ink-strong); --gcc-ink: var(--pf-ink); --gcc-ink-muted: var(--pf-ink-muted); --gcc-ink-ghost: var(--pf-ink-ghost); --gcc-line: var(--pf-line); --gcc-line-faint: var(--pf-line-faint); --gcc-text: var(--pf-ink); --gcc-border-color: var(--pf-line); /* gac.css (panel API key) dùng bộ tên riêng */ --gac-bg: var(--pf-surface); --gac-bg-soft: var(--pf-surface-2); --gac-text: var(--pf-ink); --gac-text-light: var(--pf-ink-muted); --gac-border: var(--pf-line); } /* ───────────────────────────────────────────────────────────────────────────── * 5. KHUNG TRANG * ────────────────────────────────────────────────────────────────────────── */ html { background: var(--pf-bg); } /* Cho form control, scrollbar, dialog mặc định của trình duyệt theo đúng chế độ */ :root:not([data-theme="light"]) { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } body { background: var(--pf-bg); color: var(--pf-ink); /* Đổi chế độ không giật màu */ transition: background-color .2s ease, color .2s ease; } @media (prefers-reduced-motion: reduce) { body { transition: none; } } /* Trang chia sẻ có style riêng ở css/share.css — cố ý KHÔNG đặt ở đây, vì .gcc-share-row từng được khai display:flex tại file này và sẽ phá bố cục nhãn-trên-ô-nhập của trang đó. */ /* ───────────────────────────────────────────────────────────────────────────── * 6. ĐẢO SÁNG — vùng nội dung giữ bảng màu sáng ngay giữa chế độ tối * * Thiệp và màn hình điện thoại là "tờ giấy", không phải bề mặt giao diện: người * nhận phải thấy đúng thiết kế bất kể người tạo dùng chế độ nào. * * Chỉ đặt color-scheme là KHÔNG ĐỦ — nền trắng hard-code trong CSS riêng của * chúng vẫn kế thừa MÀU CHỮ sáng từ body, thành chữ nhạt trên nền trắng. * Vì biến CSS có tính kế thừa, khai báo lại token ngay tại đây là cả cây con * chuyển sang bảng sáng: chữ, viền, nút, tất cả. * ────────────────────────────────────────────────────────────────────────── */ /* `.gcc-chat-shell` KHÔNG còn nằm trong danh sách này. * * Nó đứng đây vì ở bản cũ khung hội thoại là MÀN HÌNH ĐIỆN THOẠI — một tờ giấy * trắng, nên phải giữ bảng màu sáng. Bản này bỏ hẳn vỏ khung máy (xem * gcc-creator.css: .gcc-ios-statusbar, .gcc-iphone-btn… đều display:none) và * đặt khung hội thoại vào THÂN CỘT TRÁI, vốn là bề mặt tối #1f1f1f. Lật sang * bảng sáng ở đó là chữ #333 trên nền #1f1f1f — đo được tương phản 1.5, đúng * thứ nhìn thấy trên ảnh chụp: nhãn, bong bóng và nút chọn đều gần như tàng * hình. * * Ba bộ chọn còn lại VẪN là tờ giấy thật (khung xem trước và thẻ thiệp) nên * giữ nguyên. */ :root:not([data-theme="light"]) .gcc-col--preview, :root:not([data-theme="light"]) .gcc-live-preview, :root:not([data-theme="light"]) .gcc-card-preview { color-scheme: light; --pf-bg: #ffffff; --pf-surface: #ffffff; --pf-surface-2: #f7f7f7; --pf-surface-3: #eeeeee; --pf-ink-strong: #1a1a1a; --pf-ink: #333333; --pf-ink-muted: #6b6b6b; --pf-ink-ghost: #a0a0a0; --pf-line: #dddddd; --pf-line-faint: #eeeeee; --pf-line-strong: #bbbbbb; --pf-btn-bg: #1f1f1f; --pf-btn-bg-hover: #000000; --pf-btn-text: #ffffff; --pf-accent: #0a84ff; --pf-accent-soft: #eff6ff; --pf-on-accent: #ffffff; /* Bí danh của hai hệ cũ cũng phải đảo theo, nếu không component dùng --ink hay --gcc-ink vẫn lấy màu tối. */ --bg: var(--pf-bg); --card: var(--pf-surface); --surface: var(--pf-surface-2); --ink: var(--pf-ink); --ink-strong: var(--pf-ink-strong); --muted: var(--pf-ink-muted); --ghost: var(--pf-ink-ghost); --line: var(--pf-line); --line-faint: var(--pf-line-faint); --btn-bg: var(--pf-btn-bg); --btn-bg-hover: var(--pf-btn-bg-hover); --btn-text: var(--pf-btn-text); --gcc-surface: var(--pf-surface); --gcc-surface-1: var(--pf-surface-2); --gcc-surface-2: var(--pf-surface-3); --gcc-ink: var(--pf-ink); --gcc-ink-strong: var(--pf-ink-strong); --gcc-ink-muted: var(--pf-ink-muted); --gcc-ink-ghost: var(--pf-ink-ghost); --gcc-ink-faint: var(--pf-ink-ghost); --gcc-line: var(--pf-line); --gcc-line-faint: var(--pf-line-faint); --gcc-text: var(--pf-ink); /* Nhóm "đảo ngược" — chữ đặt TRÊN nền đậm (vd .gcc-chat-btn dùng nền --gcc-c-accent tối + chữ --gcc-ink-inverse). Ở chế độ tối biến này là #141414, thành chữ tối trên nút tối: mất chữ. Trong vùng giấy trắng, "đảo ngược của mực" phải là TRẮNG. */ --gcc-ink-inverse: #ffffff; --gcc-ink-inverse-hover: #ffffff; --gcc-ink-inverse-muted: rgba(255, 255, 255, .72); /* Nhóm --gcc-c-* của gcc-chat-mode.css PHẢI khai lại ở đây, không thể chỉ dựa vào việc ghi đè --gcc-surface bên trên. Lý do: `--gcc-c-bg: var(--gcc-surface)` khai báo trên :root nên được phân giải NGAY TẠI :root (ra màu tối), rồi kế thừa xuống dưới dạng màu đã cố định. Ghi đè --gcc-surface ở đây không hồi tố được giá trị đã tính đó. Đây chính là thứ làm ô nhập liệu và thanh nút trong khung điện thoại bị tối. */ --gcc-c-bg: var(--pf-surface); --gcc-c-surface: var(--pf-surface-2); --gcc-c-surface-2: var(--pf-surface-3); --gcc-c-border: var(--pf-line-faint); --gcc-c-border-2: var(--pf-line); --gcc-c-text: var(--pf-ink-strong); --gcc-c-text-2: var(--pf-ink-muted); --gcc-c-text-3: var(--pf-ink-ghost); --gcc-c-accent: #1f1f1f; --gcc-c-accent-h: #000000; color: var(--pf-ink); }