/** * Giao diện CoMo cho khu QUẢN TRỊ và các trang hệ thống. * * Vì sao cần file riêng: cm-theme.css chỉ nạp trên trang đọc (class * cm-theme ở loại trừ /admin và /compose). Khu quản trị vì thế vẫn * chạy bảng màu nâu đất kế thừa từ UG CMS và một mớ màu navy cắm cứng của * LK. File này kéo nó về đúng nhận diện CoMo: giấy trắng, mực đen, Fraunces * cho tiêu đề, Roboto cho giao diện, góc vuông. * * Chỉ đè LỚP TOKEN và vài chi tiết chrome — không viết lại app.css hay * admin-list.css, vì phần lớn quy tắc trong đó là bố cục và vẫn dùng tốt. */ :root, html[data-theme='light'] { --color-accent: #000000; --color-accent-hover: #333333; --color-accent-foreground: #ffffff; --color-link: #000000; --color-link-hover: #444444; --cm-ink: #000000; } html[data-theme='dark'] { --color-accent: #ffffff; --color-accent-hover: #dddddd; --color-accent-foreground: #000000; --color-link: #ffffff; --color-link-hover: #cccccc; --cm-ink: #ffffff; } body:not(.cm-theme) { font-family: Roboto, -apple-system, 'Helvetica Neue', Arial, sans-serif; } /* Tiêu đề khu quản trị dùng Fraunces như phần còn lại của site. */ body:not(.cm-theme) h1, body:not(.cm-theme) h2, body:not(.cm-theme) .admin-page-title, body:not(.cm-theme) .auth-card h1 { font-family: Fraunces, Georgia, 'Times New Roman', serif; font-weight: 900; letter-spacing: -.01em; } /* Góc vuông — cùng quy ước với trang đọc. */ body:not(.cm-theme) .btn, body:not(.cm-theme) button, body:not(.cm-theme) input, body:not(.cm-theme) select, body:not(.cm-theme) textarea, body:not(.cm-theme) .surface, body:not(.cm-theme) .card, body:not(.cm-theme) .admin-card, body:not(.cm-theme) .auth-card, body:not(.cm-theme) .cmb-login-card, body:not(.cm-theme) .cmb-login-form, body:not(.cm-theme) .cmb-google-btn, body:not(.cm-theme) .field input, body:not(.cm-theme) img { border-radius: 0 !important; } /* Nút chính: khối đen chữ trắng, chữ nhỏ in hoa giãn ký tự. */ body:not(.cm-theme) .btn { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 2px solid var(--cm-ink, #000); } body:not(.cm-theme) .btn:not(.btn-ghost):not(.btn-secondary) { background: var(--cm-ink, #000); color: var(--color-accent-foreground); } /* Sidebar quản trị: nền giấy, gạch hairline, nhãn in hoa. */ body:not(.cm-theme) .admin-sidebar { border-right: 2px solid var(--cm-ink, #000); } body:not(.cm-theme) .admin-sidebar-nav-item a { letter-spacing: .02em; } body:not(.cm-theme) .admin-sidebar-space-pill { border: 2px solid var(--cm-ink, #000); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } /* Trang đăng nhập / quên mật khẩu / 2FA: khung vuông viền đậm, không đổ bóng. */ body:not(.cm-theme) .auth-card, body:not(.cm-theme) .cmb-login-card { border: 2px solid var(--cm-ink, #000); box-shadow: none; background: #fff; } html[data-theme='dark'] body:not(.cm-theme) .auth-card, html[data-theme='dark'] body:not(.cm-theme) .cmb-login-card { background: #0b0b0b; } /* Bảng danh sách: hairline, tiêu đề cột in hoa nhỏ. */ body:not(.cm-theme) .admin-list thead th, body:not(.cm-theme) table thead th { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--cm-ink, #000); } /* Trang lỗi (404, không có quyền) — dùng chung chrome đọc nên chỉ cần chỉnh cỡ tiêu đề cho khớp thang chữ CoMo. */ .cm-error-title { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: .95; margin: 0 0 .4em; } /* Trang đăng nhập: nút phụ (mật khẩu) dùng viền, nút chính dùng khối đen. */ body:not(.cm-theme) .btn-secondary { background: transparent; color: var(--cm-ink, #000); border: 2px solid var(--cm-ink, #000); } body:not(.cm-theme) .btn-secondary:hover { background: var(--cm-ink, #000); color: #fff; } body:not(.cm-theme) .cmb-google-btn { border: 1px solid var(--cm-ink, #000); } body:not(.cm-theme) .cmb-login-divider { color: #666; }