/* ==========================================================================
Tuỳ biến trang đăng nhập Authelia.
Vì sao phải làm kiểu này: Authelia nhúng toàn bộ giao diện trong binary và
chỉ cho đè ĐÚNG ba thứ — favicon.ico, logo.png, locales/. Muốn đổi màu nền
hay bo góc thì phải chèn CSS vào HTML trên đường ra, do Caddy làm bằng module
replace-response (xem Caddyfile, khối @authelia_doc).
CẢNH BÁO KHI NÂNG CẤP AUTHELIA: file này chỉ bám vào
- body[data-theme] → thuộc tính do chính Authelia đặt, ổn định
- .MuiXxx-root → class ngữ nghĩa của MUI, ổn định qua các bản minor
TUYỆT ĐỐI không bám vào class băm kiểu .mui-gphp57 — đổi mỗi lần build.
Nâng cấp xong thì mở lại trang xem còn đúng không; hỏng thì chỉ cần xoá dòng
`replace` trong Caddyfile là trở về giao diện gốc, không mất gì.
Sửa file này KHÔNG cần restart Caddy — file_server đọc thẳng từ đĩa.
========================================================================== */
:root {
--qp-accent: #3b6fd4;
--qp-accent-hover: #2f5cb5;
--qp-bg-1: #eef2fb;
--qp-bg-2: #dbe4f7;
--qp-card: rgba(255, 255, 255, 0.82);
--qp-card-border: rgba(255, 255, 255, 0.9);
--qp-text-soft: #64748b;
--qp-shadow: 0 24px 60px -20px rgba(30, 58, 110, 0.35);
}
/* theme: auto → Authelia bám theo thiết lập sáng/tối của máy, nên bảng màu tối
cũng phải bám theo prefers-color-scheme cho khớp, không dùng data-theme. */
@media (prefers-color-scheme: dark) {
:root {
--qp-bg-1: #0d1424;
--qp-bg-2: #131d33;
--qp-card: rgba(20, 29, 48, 0.72);
--qp-card-border: rgba(255, 255, 255, 0.08);
--qp-text-soft: #94a3b8;
--qp-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
}
/* ------------------------------------------------------------------ nền */
body {
background:
radial-gradient(1100px 700px at 15% -10%, var(--qp-bg-2), transparent 90%),
radial-gradient(900px 600px at 95% 110%, var(--qp-bg-2), transparent 0%),
var(--qp-bg-1) !important;
min-height: 100vh;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* ------------------------------------------------------------ ảnh nền
Hướng theo yêu cầu: ĐẬM ở góc dưới bên TRÁI, nhạt dần chéo lên góc trên bên
PHẢI. `to top right` chính là trục đó — điểm dừng đầu tiên nằm ở góc dưới
trái, điểm cuối ở góc trên phải.
Dùng mask chứ không phải chồng một lớp màu lên ảnh: mask làm ảnh MẤT DẦN để
lộ nền gradient phía dưới, nên ăn khớp ở cả chế độ sáng lẫn tối. Chồng màu
thì phải đoán màu nền, đổi theme một cái là lệch.
Thứ tự chồng lớp, từ dưới lên:
nền gradient của body -> z-index -2 ảnh -> z-index -1 lớp dịu -> chữ
PHẢI để ảnh ở -2. Nếu cả hai cùng -1 thì body::after (đứng sau #root trong
cây DOM) sẽ đè lên lớp dịu và lớp dịu mất tác dụng — đã dính đúng lỗi này. */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -2;
background-image: url("/login-bg.jpg");
background-size: cover;
background-position: 30% center; /* giữ mặt người trong khung khi màn hẹp */
/* opacity: 1 — toàn bộ độ mờ do mask quyết định, không nhân thêm lần nữa.
Để opacity < 1 ở đây thì các con số alpha trong mask không còn đúng nữa. */
opacity: 1;
/* Ranh giới là một CUNG ELLIPSE tính từ góc dưới bên trái: sát mép trái ở
đỉnh màn, phình dần sang phải, chạm đáy ở ~60% chiều rộng.
Ellipse ranh giới = 60% rộng x 100% cao. Ở đây khai gấp đôi
(120% x 200%) để mốc 50% của gradient rơi ĐÚNG vào cung đó — nhờ vậy vẫn
còn chỗ chuyển màu ở CẢ HAI phía thay vì cắt phựt ở rìa.
Alpha là độ ĐỤC. Trong suốt = 1 - alpha.
trái 0.90 -> 0.80 = trong suốt 10% -> 20%
phải 0.45 -> 0.25 = trong suốt 55% -> 75%
Khoảng 44%-56% là vùng giao, để ranh giới mềm chứ không thành một đường
kẻ gắt. */
-webkit-mask-image: radial-gradient(ellipse 120% 200% at 0% 100%,
rgba(0,0,0,0.90) 0%,
rgba(0,0,0,0.80) 44%,
rgba(0,0,0,0.45) 56%,
rgba(0,0,0,0.25) 100%);
mask-image: radial-gradient(ellipse 120% 200% at 0% 100%,
rgba(0,0,0,0.90) 0%,
rgba(0,0,0,0.80) 44%,
rgba(0,0,0,0.45) 56%,
rgba(0,0,0,0.25) 100%);
pointer-events: none;
}
/* --------------------------------------------------- tên miền ở đỉnh trang
Dùng pseudo-element trên body, KHÔNG chèn thẻ vào #root: React dựng lại cây
DOM trong đó nên thẻ chèn tay sẽ bị xoá sạch ngay lần render đầu. */
body::before {
content: "quangpro.com";
position: fixed;
top: 26px;
left: 0;
right: 0;
text-align: center;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--qp-text-soft);
pointer-events: none;
z-index: 1;
}
/* ------------------------------------------------------- khung kính
`.MuiContainer-root` chính là thẻ bọc logo + tiêu đề + form + dòng chân
trang. Biết được nhờ đọc mã nguồn LoginLayout.tsx của Authelia v4.39.20:
...
Đây là class NGỮ NGHĨA của MUI nên ổn định qua các bản minor — khác hẳn
class băm .mui-gphp57 vốn đổi mỗi lần build.
backdrop-filter là thứ tạo hiệu ứng kính: nó làm MỜ ẢNH PHÍA SAU khung chứ
không phải làm mờ chính khung. Nhờ vậy chữ trong khung vẫn sắc nét trong khi
nền sau lưng nhoè đi — cũng chính là thứ giữ cho form đọc được dù ảnh nền
đang khá đậm, nên không cần lớp làm dịu riêng nữa. */
.MuiContainer-root {
padding: 30px 28px 18px !important;
border-radius: 24px;
background: rgba(255, 255, 255, 0.40);
-webkit-backdrop-filter: blur(22px) saturate(155%);
backdrop-filter: blur(22px) saturate(155%);
border: 1px solid rgba(255, 255, 255, 0.72);
box-shadow:
0 30px 60px -26px rgba(15, 35, 80, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
@media (prefers-color-scheme: dark) {
.MuiContainer-root {
background: rgba(16, 24, 42, 0.42);
border-color: rgba(255, 255, 255, 0.14);
box-shadow:
0 30px 60px -26px rgba(0, 0, 0, 0.75),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
}
/* -------------------------------------------------------------- logo */
img[src*="logo.png"] {
width: 84px !important;
height: 84px !important;
border-radius: 22px;
box-shadow: 0 12px 28px -10px rgba(59, 111, 212, 0.65);
}
/* --------------------------------------------------------------- ô nhập
Mặc định MUI đặt nhãn ĐÈ LÊN đường viền, và khoét một khe trên viền để nhường
chỗ — cái khe đó chính là chỗ trông như viền bị cắt đứt. Ở đây đổi sang kiểu
nhãn nằm HẲN BÊN TRONG khung, viền liền mạch:
1.