/* ===================================================================== Theme: Thẻ trong suốt (html.mm-glass) AUTO-SPLIT từ app-theme.css. Mỗi theme 1 file, độc lập — sửa file này không ảnh hưởng theme khác. Thêm theme mới: tạo public/css/themes/.css (layout tự nạp mọi file trong themes/). ===================================================================== */ /* ===================================================================== TOKEN MÀU CHỮ cho nền kính (override base). Nền glass phủ ảnh + lớp sáng -> màu chữ phụ slate nhạt của base (--mm-muted #64748b, --mm-muted-2 #475569) bị CHÌM, khó đọc ở header bảng , bảng thống kê, chữ meta... Đậm hoá tại 1 nơi (token) thay vì vá lẻ từng selector, giữ thứ bậc ink (đậm nhất) > muted-2 > muted. Chỉ đổi MÀU, không đụng cỡ/font. ===================================================================== */ html.mm-glass { --mm-ink: #221e3c; /* tiêu đề / chữ chính: tím-than rất đậm */ --mm-muted-2: #2c2745; /* chữ phụ cấp 2 */ --mm-muted: #403c57; /* chữ phụ (thead, meta) — đủ tương phản trên nền sáng */ } /* ===================================================================== Chế độ "Thẻ trong suốt" — nhìn xuyên qua thẻ thấy ảnh nền. Bật/tắt ở menu user; lưu localStorage -> class .mm-glass trên . ===================================================================== */ html.mm-glass body::before { background: linear-gradient(rgba(246, 247, 251, .26), rgba(246, 247, 251, .36)), url('/images/background.png') center center / cover no-repeat; } @media (max-width: 767.98px) {html.mm-glass body::before { background-image: linear-gradient(rgba(246, 247, 251, .26), rgba(246, 247, 251, .36)), url('/images/background_mb.png'); } } /* HIỆU NĂNG: KHÔNG dùng backdrop-filter blur trên các thẻ lặp nhiều lần này. Dashboard có nhiều thẻ trong mờ + blur nằm trên ảnh nền CỐ ĐỊNH -> Chrome desktop phải blur lại nền sau mỗi thẻ trên TỪNG frame khi cuộn => giật. Bỏ blur, nâng độ đục (.55) để chữ vẫn rõ mà thẻ VẪN xuyên thấy nền (chất kính). */ html.mm-glass .card, html.mm-glass .mm-stat, html.mm-glass .mm-chart-card { background: rgba(255, 255, 255, .55) !important; } /* HIỆU NĂNG: ở 2 theme có blur kính (Thẻ trong suốt / 18+), pulse box-shadow của thẻ "Tổng nợ" buộc Chrome desktop vẽ lại lớp blur mỗi frame -> giật. Chỉ tắt GLOW (box-shadow lặp, không composite được). Icon vẫn RUNG: transform được đẩy sang layer GPU riêng (will-change bên dưới) nên không động vào lớp blur. */ html.mm-glass .mm-stat--owe { animation: none !important; } /* Dòng bill bên trong danh sách "Tất cả bill" cũng trong suốt theo. */ html.mm-glass .mm-bill, html.mm-glass .mm-task { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .38); /* Không blur riêng: thẻ cha đã blur rồi, blur chồng sẽ tạo lớp sương trắng đục */ backdrop-filter: none; -webkit-backdrop-filter: none; } /* Giữ viền trái cảnh báo cho thẻ "Cần xử lý" trên nền kính. */ html.mm-glass .mm-task { border-left-color: var(--mm-warning); } /* Thanh topbar trên cùng cũng trong suốt theo (vẫn giữ blur để chữ dễ đọc). */ html.mm-glass .mm-topbar { background: rgba(255, 255, 255, .28) !important; } /* Header/footer của bảng (thead "Kỳ...", tfoot "Tổng cộng") có nền sáng đục var(--mm-soft) -> bị trắng khi bật glass. Cho trong suốt theo thẻ. */ html.mm-glass .table > thead th, html.mm-glass .table > thead.table-light th, html.mm-glass .table tfoot td { background: transparent !important; } /* Glass mode: ảnh nền làm chữ phụ (nhãn, tiêu đề nhóm) khó đọc. Tăng tương phản chữ + thêm bóng nhẹ thay vì làm thẻ đục hơn (giữ độ trong suốt). */ html.mm-glass .mm-stat__label { color: #3a3550; font-weight: 600; } html.mm-glass .mm-group-title { color: #2c2745; } html.mm-glass .mm-stat__value, html.mm-glass .mm-chart-card h5, html.mm-glass .mm-page-head h2 { text-shadow: 0 1px 6px rgba(255, 255, 255, .7); } /* Menu dropdown (user) cũng trong suốt theo. Giữ blur mạnh hơn chút để chữ rõ. */ html.mm-glass .dropdown-menu { background: rgba(255, 255, 255, .82) !important; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-color: rgba(255, 255, 255, .5); } html.mm-glass .dropdown-item { color: var(--mm-ink); } html.mm-glass .dropdown-item:hover, html.mm-glass .dropdown-item:focus { background: rgba(255, 255, 255, .5); } html.mm-glass .dropdown-divider { border-top-color: rgba(255, 255, 255, .45); } /* Nút burger (☰) và pill user (A ▼) trên topbar cũng trong suốt theo nền kính. */ html.mm-glass .mm-burger { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .5); backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%); } html.mm-glass .mm-userbox { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .5); backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%); } html.mm-glass .mm-userbox:hover { background: rgba(255, 255, 255, .42); } /* Dòng "là bạn" (is-me) trong bảng xếp hạng: nền primary-soft đặc -> mờ đi cho hợp nền kính. */ html.mm-glass .mm-rank.is-me { background: rgba(255, 255, 255, .22); } /* Theme tối / kính: nền nút trong suốt theo thẻ. */ /* Nút trắng đủ đặc + chữ tối -> đọc được số trang dù nền kính/ảnh sáng hay tối. */ html.mm-glass .mm-pagination .page-link { background: rgba(255, 255, 255, .55); border-color: rgba(34, 30, 60, .22); color: var(--mm-ink); } html.mm-glass .mm-pagination .page-link:hover { background: rgba(255, 255, 255, .72); border-color: var(--mm-primary); color: var(--mm-primary); } html.mm-glass .mm-pagination .page-item.disabled .page-link { background: rgba(255, 255, 255, .3); color: var(--mm-muted); } html.mm-glass .mm-pagination .page-item.active .page-link { background: var(--mm-primary); color: #fff; } /* Theme tối: nền hộp đặc + blur cho dễ đọc */ html.mm-glass .mm-confirm__dialog { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } html.mm-glass .mm-confirm__dialog { background: rgba(30, 27, 60, .9); } /* Trang nội dung (Cấu hình giao diện, Hồ sơ...) dùng nhiều chữ phụ .text-muted và nhãn nhóm -> trên nền kính bị chìm, khó đọc. Tăng tương phản: chữ phụ đậm hơn + nền thẻ đặc hơn chút (vẫn xuyên thấu) cho dễ nhìn. */ /* Card nội dung (chứa bảng/chữ) đục hơn chút (.60) để chữ — kể cả số xanh/đỏ của Bootstrap không qua token — luôn đọc rõ dù ảnh nền phía sau bận rộn. Vẫn xuyên thấu nhẹ giữ chất "kính". */ html.mm-glass .card { background: rgba(255, 255, 255, .60) !important; } html.mm-glass .text-muted, html.mm-glass .form-text, html.mm-glass .card .small.text-muted { color: #403c57 !important; } html.mm-glass .card .form-label, html.mm-glass .card h3, html.mm-glass .card h4, html.mm-glass .card h5, html.mm-glass .card h6 { color: #221e3c; } /* Thẻ chọn theme: viền rõ hơn để phân tách trên nền kính. */ html.mm-glass .mm-theme-card { border-color: rgba(60, 55, 90, .35) !important; } /* Vòng quay may mắn — tông kính (trong suốt + tím lavender). Chỉ đổi MÀU. */ html.mm-glass { /* Panel MỜ để nhìn xuyên nền (đồng bộ "thẻ trong suốt"), blur ở rule dưới. */ --mm-wheel-panel: rgba(27,24,54,.78); --mm-wheel-panel-2: rgba(43,36,86,.78); --mm-wheel-gold: #c7b2ff; --mm-wheel-lit: #e5dcff; --mm-wheel-win: #9d86f5; --mm-wheel-border: rgba(199,178,255,.22); /* Chip xu = TÍM lavender đặc (màu theme) + chữ trắng — rõ trên topbar sáng. */ --mm-coin-chip-bg: linear-gradient(135deg, #7c6cf0, #9d86f5); --mm-coin-chip-border: transparent; --mm-coin-chip-text: #ffffff; --mm-coin-chip-star: #ffe08a; --mm-coin-chip-glow: rgba(124,108,240,.4); } /* Modal vòng quay kính mờ: nhìn xuyên nền như các thẻ "trong suốt" khác. */ html.mm-glass .mm-wheel { backdrop-filter: blur(16px) saturate(1.2); }