laoyang
ee256adc4b
系统设置里多一块「🎨 我的界面主题」，点卡片即时预览、保存后全站生效，不用重新登录。 - lib/theme.php（新增）：主题注册表 ticket/indigo/forest/wine/midnight， 分别是「复古票根（暖橙，默认）/ 靛蓝 / 松林 / 绛红 / 暗夜（深色）」。 currentThemeKey() 以 session 为准，session 里没有就从 admins.theme 补读一次 —— 升级前就已经登录着的会话也能立刻用上自己账号存的主题。库里是脏值时回落默认主题。 - css/themes.css（新增）：5 套调色板，全部以 [data-theme="<key>"] 规则块给出， 每套 16 个变量一个不少。**必须排在 css/style.css 之后加载**：两者优先级相同 （都是 0,1,0），靠后出现者胜。另加 --primary-rgb（"R, G, B" 三元组）， 页面里的淡色底/光晕一律 rgba(var(--primary-rgb), α)，所以加一套主题只需动 CSS， 页面与 JS 一行都不用改；每套还要声明 color-scheme，否则暗色主题下原生控件 （日期选择器、下拉、滚动条）仍是刺眼的白底。 - css/style.css：:root 保留默认主题那一份作兜底；导航底色改走 --nav-bg， 滚动条改走变量，按钮光晕改走 --primary-rgb。 - lib/db.php / lib/auth.php：admins 增列 theme（幂等 ALTER，老库自动补，空值 = 默认主题）； setAdminTheme() 校验 key、写库、同步 session。 - settings.php：主题卡片区。每张预览卡自己套一层 data-theme，用的就是那套主题真实的 变量，因此「预览所见」与「换上去之后」必然一致，不必再抄一份色值；另有一小段 JS 在点选时改 <html data-theme> 做即时预览（没脚本时选中后提交同样生效）。 - 14 个页面：<html> 上输出 data-theme，并在 style.css 之后引入 themes.css； 内联样式里写死的橙色 rgba(230,126,34,…) 全部改走 rgba(var(--primary-rgb),…)； 影院/观影人色板选中态的描边由 #333 改为 var(--text-primary)（暗色主题下才看得见）。 - annual_report.php：报告本身仍是深色「海报」版式，但点缀色跟随主题； Chart.js 画在 canvas 上读不到 CSS 变量，改为运行时从 <html> 的计算样式取色。 顺手修的两个坑： 1. 注释里**不能**出现 PHP 起止标签。PHP 的结束标签在 // 注释里同样会关闭 PHP 模式， 之后若再出现短标签就会被真的执行 —— lib/theme.php 的用法说明里写了完整标签示例， 导致该文件被 require 时直接 Fatal error、整站白屏，而 php -l 查不出来（只看语法）。 现在部署脚本里加了一道静态断言专门挡这个。 2. themesCssLink() 的返回值末尾补一个换行：PHP 会吃掉结束标签后面那一个换行， 不补的话渲染结果里这一行会和下一行黏成一行。 回归：theme_e2e 111/111（含老库自动补列、脏值回落、5 个选项渲染、切换后落库+落 session+ 立刻生效、跨账号隔离、非法 key 与注入被拒、themes.css 完整性、:root 与 ticket 一致、 无残留写死主色、无悬空 CSS 变量）；reviews_e2e 84/84、fetch_movie 76/76、storage 196/196。 A/B 48 个响应：把「新增 head 行 / data-theme 属性 / 橙色→变量」三类等价替换归一化、 并把设置页新增区块整块删掉之后，**其余部分逐字节一致，零残留差异**。 线上 PHP 7.4.30 / 8.1.7 双版本冒烟全通过（迁移、5 套主题切换、跨账号隔离均验证， 写测试后已把 admin #1 的主题原样还原、其它账号一字未动）。
126 lines
4.4 KiB
CSS
126 lines
4.4 KiB
CSS
/* ============================================
|
||
文件: css/themes.css
|
||
说明: 界面配色主题（5 套经典配色）。
|
||
|
||
生效方式：<html data-theme="<key>">（由 lib/theme.php 的 themeAttr() 输出）。
|
||
本文件必须排在 css/style.css **之后**加载：[data-theme] 与 style.css 里作为
|
||
兜底的 :root 优先级相同（都是 0,1,0），靠「后出现者胜」来覆盖。
|
||
|
||
每套主题都要给全下面这一组变量，缺一个就会退回 style.css 的默认值：
|
||
--primary / --primary-dark / --primary-light / --primary-rgb
|
||
--bg-primary / --bg-secondary / --card-bg / --input-bg / --nav-bg
|
||
--text-primary / --text-secondary / --border-color
|
||
--shadow / --shadow-hover
|
||
--scroll-thumb / --scroll-thumb-hover
|
||
注意 --primary-rgb 必须与 --primary 同色（写成 "R, G, B"），
|
||
页面里的淡色底/光晕一律用 rgba(var(--primary-rgb), α) 取色。
|
||
|
||
另外每套都要声明 color-scheme：它决定浏览器原生控件（下拉、日期选择器、
|
||
滚动条）走明色还是暗色渲染 —— 暗色主题少了这一条，日期输入框会是刺眼的白底。
|
||
============================================ */
|
||
|
||
/* ---------- 1. 复古票根（默认）：暖橙 + 浅灰白 ---------- */
|
||
[data-theme="ticket"] {
|
||
color-scheme: light;
|
||
--primary: #e67e22;
|
||
--primary-dark: #d35400;
|
||
--primary-light: #f39c12;
|
||
--primary-rgb: 230, 126, 34;
|
||
--bg-primary: #f0f2f5;
|
||
--bg-secondary: #e8eaed;
|
||
--card-bg: #ffffff;
|
||
--input-bg: #ffffff;
|
||
--nav-bg: rgba(255, 255, 255, 0.92);
|
||
--text-primary: #1a1a2e;
|
||
--text-secondary: #6b7280;
|
||
--border-color: #e5e7eb;
|
||
--shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
|
||
--shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.12);
|
||
--scroll-thumb: #d1d5db;
|
||
--scroll-thumb-hover: #b0b4ba;
|
||
}
|
||
|
||
/* ---------- 2. 靛蓝：经典蓝 + 冷调浅灰 ---------- */
|
||
[data-theme="indigo"] {
|
||
color-scheme: light;
|
||
--primary: #2563eb;
|
||
--primary-dark: #1d4ed8;
|
||
--primary-light: #60a5fa;
|
||
--primary-rgb: 37, 99, 235;
|
||
--bg-primary: #f4f6fb;
|
||
--bg-secondary: #e7ecf6;
|
||
--card-bg: #ffffff;
|
||
--input-bg: #ffffff;
|
||
--nav-bg: rgba(255, 255, 255, 0.92);
|
||
--text-primary: #141a2e;
|
||
--text-secondary: #64748b;
|
||
--border-color: #e2e8f4;
|
||
--shadow: 0 4px 24px rgba(30, 58, 138, 0.07), 0 1px 4px rgba(30, 58, 138, 0.05);
|
||
--shadow-hover: 0 12px 48px rgba(30, 58, 138, 0.14);
|
||
--scroll-thumb: #c7d2e4;
|
||
--scroll-thumb-hover: #a8b8d2;
|
||
}
|
||
|
||
/* ---------- 3. 松林：墨绿 + 米灰白 ---------- */
|
||
[data-theme="forest"] {
|
||
color-scheme: light;
|
||
--primary: #2f855a;
|
||
--primary-dark: #276749;
|
||
--primary-light: #48bb78;
|
||
--primary-rgb: 47, 133, 90;
|
||
--bg-primary: #f2f6f3;
|
||
--bg-secondary: #e6eee9;
|
||
--card-bg: #ffffff;
|
||
--input-bg: #ffffff;
|
||
--nav-bg: rgba(255, 255, 255, 0.92);
|
||
--text-primary: #15251d;
|
||
--text-secondary: #647a70;
|
||
--border-color: #dfe8e2;
|
||
--shadow: 0 4px 24px rgba(20, 60, 40, 0.07), 0 1px 4px rgba(20, 60, 40, 0.05);
|
||
--shadow-hover: 0 12px 48px rgba(20, 60, 40, 0.14);
|
||
--scroll-thumb: #cbd8d0;
|
||
--scroll-thumb-hover: #aec2b6;
|
||
}
|
||
|
||
/* ---------- 4. 绛红：酒红 + 暖白 ---------- */
|
||
[data-theme="wine"] {
|
||
color-scheme: light;
|
||
--primary: #b03a5b;
|
||
--primary-dark: #8e2d48;
|
||
--primary-light: #d45c7d;
|
||
--primary-rgb: 176, 58, 91;
|
||
--bg-primary: #faf5f6;
|
||
--bg-secondary: #f2e7ea;
|
||
--card-bg: #ffffff;
|
||
--input-bg: #ffffff;
|
||
--nav-bg: rgba(255, 255, 255, 0.92);
|
||
--text-primary: #26161c;
|
||
--text-secondary: #7a6a70;
|
||
--border-color: #ece0e4;
|
||
--shadow: 0 4px 24px rgba(90, 20, 40, 0.07), 0 1px 4px rgba(90, 20, 40, 0.05);
|
||
--shadow-hover: 0 12px 48px rgba(90, 20, 40, 0.14);
|
||
--scroll-thumb: #e0cdd4;
|
||
--scroll-thumb-hover: #cbb0b9;
|
||
}
|
||
|
||
/* ---------- 5. 暗夜：深灰蓝底 + 靛紫点缀 ---------- */
|
||
[data-theme="midnight"] {
|
||
color-scheme: dark;
|
||
--primary: #7c5cf5;
|
||
--primary-dark: #6a45e0;
|
||
--primary-light: #9d84f8;
|
||
--primary-rgb: 124, 92, 245;
|
||
--bg-primary: #14161c;
|
||
--bg-secondary: #1b1e26;
|
||
--card-bg: #22262f;
|
||
--input-bg: #1b1e26;
|
||
--nav-bg: rgba(34, 38, 47, 0.92);
|
||
--text-primary: #e8eaf0;
|
||
--text-secondary: #9aa3b2;
|
||
--border-color: #333846;
|
||
--shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
|
||
--shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.6);
|
||
--scroll-thumb: #3a3f4d;
|
||
--scroll-thumb-hover: #4a5060;
|
||
}
|