界面主题:5 套经典配色,按账号记住
系统设置里多一块「🎨 我的界面主题」,点卡片即时预览、保存后全站生效,不用重新登录。 - 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 的主题原样还原、其它账号一字未动)。
This commit is contained in:
+20
-5
@@ -1,20 +1,34 @@
|
||||
/* ============================================
|
||||
文件: css/style.css
|
||||
说明: 全局样式 - 支持 Grid 网格瀑布流
|
||||
|
||||
配色(--primary / --bg-* / --card-bg / --text-* / --border-color / --shadow* …)
|
||||
由「主题」决定:页面在 <html data-theme="<key>"> 上声明,具体色值见 css/themes.css。
|
||||
下面 :root 里保留的是**默认主题「复古票根」**的那一份,
|
||||
作用是兜底 —— 万一 themes.css 没加载出来,页面也不会掉成无色。
|
||||
改默认配色时,两处(这里和 themes.css 的 [data-theme="ticket"])要一起改,
|
||||
theme_e2e 测试会断言两边的值一致。
|
||||
============================================ */
|
||||
|
||||
:root {
|
||||
--primary: #e67e22;
|
||||
--primary-dark: #d35400;
|
||||
--primary-light: #f39c12;
|
||||
/* 与 --primary 同色的 "R, G, B" 三元组:淡色底/光晕统一用
|
||||
rgba(var(--primary-rgb), α) 取色,换主题时不用改动任何一条具体规则。 */
|
||||
--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;
|
||||
--radius: 12px;
|
||||
--radius-lg: 16px;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
@@ -43,11 +57,11 @@ body {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #d1d5db;
|
||||
background: var(--scroll-thumb);
|
||||
border-radius: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #b0b4ba;
|
||||
background: var(--scroll-thumb-hover);
|
||||
}
|
||||
|
||||
/* ===== 导航栏 ===== */
|
||||
@@ -62,7 +76,8 @@ body {
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
/* 半透明的导航底:明色主题是白色磨砂,暗色主题自动换成深色磨砂 */
|
||||
background: var(--nav-bg);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
@@ -140,11 +155,11 @@ body {
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 14px rgba(230, 126, 34, 0.25);
|
||||
box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.25);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 28px rgba(230, 126, 34, 0.35);
|
||||
box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.35);
|
||||
}
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
|
||||
Reference in New Issue
Block a user