/* ============================================================================ authelia-login-theme — 主题覆盖层 ---------------------------------------------------------------------------- 原理: 在官方样式之后加载(见 theme/index.html 末尾 ), 由 Caddy 以稳定 路径 /static/theme/portal-theme.css 提供。官方 css(哈希)仍回源 Authelia, 所以本层只写"差异"。Authelia 升级后本层永久有效(唯一同步动作是重跑 scripts/sync-index.sh)。 覆盖策略: 绝大多数视觉靠改写 CSS 变量(浅色/暗色两套), 再针对登录页结构 命中少量精确选择器。 Logo: 用 CSS 背景图方式展示, 不依赖 Authelia 的 logooverride 开关。 图片放 /static/theme/logo.png (即本目录 logo.png)。 -> Caddy 的 handle /static/theme/* 已覆盖该路径。 ============================================================================ */ /* --------------------------------------------------------------------------- 0. 品牌色(两处联动调整) --primary: 主色/按钮/链接/focus --accent: 页面红/强调色 想换品牌色直接改这些值即可(下方 logo 蓝 #1a63b8、logo 红 #d81f26)。 --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 1. 浅色主题 —— 专业风(默认) --------------------------------------------------------------------------- */ :root { /* 品牌主色(取自 logo 蓝) / focus 光环 */ --primary: #1a63b8; --primary-foreground: #ffffff; --ring: #1a63b8; /* 页面底色(浅灰蓝) / 文字 */ --background: #dde5f0; --foreground: #1e293b; /* 表面(卡片/浮层) */ --card: #ffffff; --card-foreground: #1e293b; --popover: #ffffff; --popover-foreground: #1e293b; /* 输入框 / 分割线 / 次要底 */ --input: #bdcadb; --border: #dfe7f0; --muted: #eef2f7; --muted-foreground: #64748b; --secondary: #e6ecf4; --secondary-foreground: #1e293b; --accent: #eef2f7; --accent-foreground: #1e293b; /* 状态色 */ --destructive: #d81f26; /* 与 logo 红呼应 */ --success: #16a34a; --info: #0284c7; /* 圆角 / 间距基调 */ --radius: 0.75rem; } :root { --custom-icon: #1a63b8; /* 官方内建图标兜底色(默认被隐藏, 见 Logo 段) */ } /* --------------------------------------------------------------------------- 1.5 字体: 采用中文社区常用系统字体栈(苹方/微软雅黑/思源黑体, 自动按系统匹配) 覆盖官方默认的 Roboto/Helvetica(对中文回退难看)。无需下载字体文件。 --------------------------------------------------------------------------- */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; } body, button, input { font-family: var(--font-sans); } /* --------------------------------------------------------------------------- 2. 登录页背景(浅色专业风): 更饱和的浅蓝渐变 + 品牌色辉光 --------------------------------------------------------------------------- */ body { background-color: var(--background); background-image: radial-gradient(1000px 560px at 90% -8%, rgba(26, 99, 184, 0.28), transparent 55%), radial-gradient(760px 420px at -6% 110%, rgba(56, 130, 246, 0.18), transparent 55%), linear-gradient(180deg, #a8cbef 0%, #c6dbf7 45%, #e9f2fb 100%); background-attachment: fixed; } /* --------------------------------------------------------------------------- 3. 登录"卡片"(浅色专业风: 纯白卡片 + 清晰描边 + 深投影, 立体更强) --------------------------------------------------------------------------- */ [class*="min-h-[90vh]"] [class*="max-w-[444px]"] { background: #ffffff; border: 1px solid rgba(148, 163, 184, 0.30); border-radius: calc(var(--radius) * 1.5); box-shadow: 0 30px 70px -30px rgba(15, 23, 42, 0.4), 0 2px 12px rgba(15, 23, 42, 0.06); padding: 2.5rem 2.25rem 1.75rem; } /* --------------------------------------------------------------------------- 4. Logo —— 用背景图方式展示(隐藏官方图标, 显示 /static/theme/logo.png) 容器: items-stretch 的第一个直接子元素(w-full p-2) --------------------------------------------------------------------------- */ [class~="items-stretch"] > [class~="p-2"] { background-image: url('logo.png'); background-repeat: no-repeat; background-size: contain; background-position: center; height: 4.5rem; /* 180x180 正方形, 显示为 72px */ margin-bottom: 0.75rem; } [class~="items-stretch"] > [class~="p-2"] img, [class~="items-stretch"] > [class~="p-2"] svg { display: none; } /* --------------------------------------------------------------------------- 5. 组件细节精修(浅色) --------------------------------------------------------------------------- */ /* 主按钮: 品牌蓝 + 光影 */ button[class*="bg-primary"] { box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--primary) 55%, transparent); font-weight: 600; letter-spacing: 0.01em; } button[class*="bg-primary"]:hover { filter: brightness(1.06); } /* 输入框聚焦用 --ring 已生效; 加粗文字提升专业感 */ input { font-weight: 500; } /* 浏览器自动填充(username/current-password)时, 强制浮动标签上浮。 :autofill 由浏览器填充触发(不依赖 React 的 onChange), 解决自动填入后 label 停在居中态盖住值的问题。坐标严格沿用官方浮动态 (top-1 text-xs)。 前缀覆盖: Chrome/Edge/Safari(-webkit)、Firefox(-moz)、标准(:autofill) 及 Chrome 内部(-internal-autofill-selected)。本条对 用户名/密码 两个浮动框都生效。 注意: 每个前缀必须【单独成条】——若把多个前缀写在同一个逗号选择器组里, 某浏览器不认识的伪类会把整条规则判为无效而导致全部失效(兼容性回归根因)。 */ input[data-slot="floating-input"]:-webkit-autofill ~ label { top: var(--spacing) !important; translate: none !important; transform: none !important; font-size: var(--text-xs) !important; color: var(--primary) !important; } input[data-slot="floating-input"]:-moz-autofill ~ label { top: var(--spacing) !important; translate: none !important; transform: none !important; font-size: var(--text-xs) !important; color: var(--primary) !important; } input[data-slot="floating-input"]:autofill ~ label { top: var(--spacing) !important; translate: none !important; transform: none !important; font-size: var(--text-xs) !important; color: var(--primary) !important; } input[data-slot="floating-input"]:-internal-autofill-selected ~ label { top: var(--spacing) !important; translate: none !important; transform: none !important; font-size: var(--text-xs) !important; color: var(--primary) !important; } /* 自动填充时让输入文字/底色贴合主题, 避免默认的蓝/黄底(Chrome/Safari/Edge) */ input[data-slot="floating-input"]:-webkit-autofill, input[data-slot="floating-input"]:-webkit-autofill:hover, input[data-slot="floating-input"]:-webkit-autofill:focus { -webkit-text-fill-color: var(--foreground); -webkit-box-shadow: 0 0 0 1000px var(--card) inset; transition: background-color 9999s ease-out; } /* 页脚 "Powered by Authelia" */ a[class*="text-[#9e9e9e]"] { color: var(--muted-foreground); } /* 隐藏整个页脚 "Powered by Authelia"(Apache-2.0 允许, 非许可证条件)。 页脚容器特征: items-stretch 的直接子元素(flex items-center justify-center gap-2 w-full) */ [class*="items-stretch"] > [class*="justify-center"] { display: none !important; } /* 隐藏右上角语言选择器(登录页 header 仅包含 #language-button 语言切换) */ header { display: none !important; } /* Logo 下方的标题改为 "统一身份认证"(CSS 内容替换), 字号略缩小 */ [class*="items-stretch"] h5 { font-size: 0 !important; line-height: 1.2; letter-spacing: 0.02em; } [class*="items-stretch"] h5::before { content: "统一身份认证"; font-size: 1.25rem !important; /* 20px, 较原 24px 略小 */ } /* 标题权重 */ [class*="items-stretch"] h5, [class*="items-stretch"] h6 { letter-spacing: 0.01em; } /* --------------------------------------------------------------------------- 6. 暗色主题 —— 玻璃拟态(系统深色时自动生效) --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --background: #0b1020; --foreground: #e6ebf3; --card: #111a2e; --card-foreground: #e6ebf3; --popover: #16203a; --popover-foreground: #e6ebf3; --input: #26324d; --border: #22304b; --muted: #16203a; --muted-foreground: #93a3bc; --secondary: #22304b; --secondary-foreground: #f1f5f9; --accent: #22304b; --accent-foreground: #f1f5f9; --primary: #7db2e8; /* 暗色下用亮蓝, 保证对比度 */ --primary-foreground: #0b1020; --ring: #7db2e8; --custom-icon: #7db2e8; } body { background-image: radial-gradient(900px 520px at 92% -6%, rgba(125, 178, 232, 0.16), transparent 55%), linear-gradient(180deg, #0d1426 0%, var(--background) 100%); } /* 玻璃拟态卡片 */ [class*="min-h-[90vh]"] [class*="max-w-[444px]"] { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); } }