miaomiao/rainblogweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

统一前后台主题颜色管理

Browse Source
This commit is contained in:
miaomiao
2026-09-05 23:12:17 +08:00
parent 69ab5676b4
commit 390c4ac53f
11 changed files with 643 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+83 -40
View File
@@ -1,6 +1,14 @@
/* ===== Material Design 3 Theme ===== */
:root {
--md-source: #6750a4;
--md-ref-primary-rgb: 103, 80, 164;
--primary-color: #6750a4;
--primary-rgb: 103, 80, 164;
--theme-primary-gradient: linear-gradient(135deg, #6750a4, #eadfff);
--theme-primary-gradient-wide: linear-gradient(90deg, #6750a4, #eadfff, #ffd8e4);
--theme-primary-gradient-soft: linear-gradient(135deg, rgba(103, 80, 164, 0.16), rgba(98, 91, 113, 0.09) 50%, rgba(125, 82, 96, 0.1));
--theme-primary-shadow: 0 0 8px rgba(103, 80, 164, 0.7);
--theme-primary-glow: 0 0 16px rgba(103, 80, 164, 0.45), 0 0 36px rgba(103, 80, 164, 0.25);
/* Light theme */
--md-ref-primary: #6750a4;
--md-ref-on-primary: #ffffff;
@@ -10,6 +18,10 @@
--md-ref-on-secondary: #ffffff;
--md-ref-secondary-container: #e8def8;
--md-ref-on-secondary-container: #1d192b;
--md-ref-tertiary: #7d5260;
--md-ref-on-tertiary: #ffffff;
--md-ref-tertiary-container: #ffd8e4;
--md-ref-on-tertiary-container: #31111d;
--md-ref-surface: #fffbfe;
--md-ref-on-surface: #1c1b1f;
--md-ref-surface-variant: #e7e0ec;
@@ -18,6 +30,16 @@
--md-ref-outline-variant: #cac4d0;
--md-ref-error: #b3261e;
--md-ref-on-error: #ffffff;
--md-ref-error-container: #f9dedc;
--md-ref-on-error-container: #410e0b;
--md-ref-success: #2e7d32;
--md-ref-on-success: #ffffff;
--md-ref-success-container: #d9f2df;
--md-ref-on-success-container: #1b5e20;
--md-ref-warning: #8a5700;
--md-ref-on-warning: #ffffff;
--md-ref-warning-container: #fff1d6;
--md-ref-on-warning-container: #6b4300;
--md-ref-background: #fffbfe;
--md-ref-on-background: #1c1b1f;
--md-ref-surface-container-low: #f7f2fa;
@@ -31,6 +53,7 @@
[data-theme="dark"] {
--md-ref-primary: #d0bcff;
--md-ref-primary-rgb: 208, 188, 255;
--md-ref-on-primary: #381e72;
--md-ref-primary-container: #4f378b;
--md-ref-on-primary-container: #eadfff;
@@ -38,6 +61,10 @@
--md-ref-on-secondary: #332d41;
--md-ref-secondary-container: #4a4458;
--md-ref-on-secondary-container: #e8def8;
--md-ref-tertiary: #efb8c8;
--md-ref-on-tertiary: #492532;
--md-ref-tertiary-container: #61343f;
--md-ref-on-tertiary-container: #ffd8e4;
--md-ref-surface: #1c1b1f;
--md-ref-on-surface: #e6e1e5;
--md-ref-surface-variant: #49454f;
@@ -46,6 +73,16 @@
--md-ref-outline-variant: #49454f;
--md-ref-error: #f2b8b5;
--md-ref-on-error: #601410;
--md-ref-error-container: #93000a;
--md-ref-on-error-container: #ffdad6;
--md-ref-success: #81c784;
--md-ref-on-success: #123d16;
--md-ref-success-container: #214d29;
--md-ref-on-success-container: #b8efbd;
--md-ref-warning: #ffdda0;
--md-ref-on-warning: #422c00;
--md-ref-warning-container: #5a420d;
--md-ref-on-warning-container: #ffdda0;
--md-ref-background: #1c1b1f;
--md-ref-on-background: #e6e1e5;
--md-ref-surface-container-low: #211f26;
@@ -371,7 +408,7 @@ input, select, textarea {
input:focus, select:focus, textarea:focus {
border-color: var(--md-ref-primary);
box-shadow: 0 0 0 3px rgba(var(--md-ref-primary-rgb, 103, 80, 164), 0.15);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-ref-primary) 15%, transparent);
}
textarea {
@@ -1646,16 +1683,22 @@ table tr:hover td {
/* ===== Wallpaper & Glass Effects ===== */
:root {
--glass-bg: rgba(255,251,254,0.65);
--glass-bg-heavy: rgba(255,251,254,0.8);
--glass-opacity: 0.6;
--glass-opacity-heavy: 0.8;
--glass-bg: rgb(255 251 254 / var(--glass-opacity));
--glass-bg-heavy: rgb(255 251 254 / var(--glass-opacity-heavy));
--glass-bg-wallpaper: rgb(255 251 254 / 0.82);
--glass-bg-heavy-wallpaper: rgb(255 251 254 / 0.92);
--glass-border: rgba(255,255,255,0.2);
--glass-blur: 20px;
--wallpaper: none;
}
[data-theme="dark"] {
--glass-bg: rgba(28,27,31,0.6);
--glass-bg-heavy: rgba(28,27,31,0.78);
--glass-bg: rgb(28 27 31 / var(--glass-opacity));
--glass-bg-heavy: rgb(28 27 31 / var(--glass-opacity-heavy));
--glass-bg-wallpaper: rgb(28 27 31 / 0.74);
--glass-bg-heavy-wallpaper: rgb(28 27 31 / 0.84);
--glass-border: rgba(255,255,255,0.08);
}
@@ -1734,12 +1777,12 @@ button.glass-card, .btn.glass-card, .nav-tab.glass-card, .chip.glass-card {
--glass-bg / --glass-bg-heavy 的所有使用者（玻璃卡/导航/表格/弹窗）自动加强；
无壁纸时保持原有半透明质感不受影响 */
body.has-wallpaper {
--glass-bg: rgba(255,251,254,0.82);
--glass-bg-heavy: rgba(255,251,254,0.92);
--glass-bg: var(--glass-bg-wallpaper);
--glass-bg-heavy: var(--glass-bg-heavy-wallpaper);
}
[data-theme="dark"] body.has-wallpaper {
--glass-bg: rgba(28,27,31,0.74);
--glass-bg-heavy: rgba(28,27,31,0.84);
--glass-bg: var(--glass-bg-wallpaper);
--glass-bg-heavy: var(--glass-bg-heavy-wallpaper);
}
/* Glass card style */
@@ -1773,34 +1816,34 @@ body.has-wallpaper {
/* 壁纸下页脚同源加强（页脚在 .page 之外，单独覆盖） */
body.has-wallpaper .footer-classic {
background: rgba(255, 251, 254, 0.82);
background: var(--glass-bg-heavy);
}
[data-theme="dark"] body.has-wallpaper .footer-classic {
background: rgba(28, 27, 31, 0.75);
background: var(--glass-bg-heavy);
}
/* 壁纸下详情页正文卡 / 目录卡加强：阅读面需要更高不透明度（其余卡片由
body.has-wallpaper 的 --glass-bg 变量统一加强） */
body.has-wallpaper .blog-article,
body.has-wallpaper .article-toc-side {
background: rgba(255, 251, 254, 0.78);
background: var(--glass-bg-heavy);
}
[data-theme="dark"] body.has-wallpaper .blog-article,
[data-theme="dark"] body.has-wallpaper .article-toc-side {
background: rgba(28, 27, 31, 0.74);
background: var(--glass-bg-heavy);
}
/* 壁纸下论坛侧栏玻璃底（B9）：仿 .blog-article 的半透明 + 模糊 + 圆角，
保证壁纸下分类文字可读（深色主题用深色底） */
.has-wallpaper .forum-sidebar {
background: rgba(255, 251, 254, 0.5);
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
padding: 12px;
}
[data-theme="dark"] .has-wallpaper .forum-sidebar {
background: rgba(28, 27, 31, 0.55);
background: var(--glass-bg);
}
/* Blog waterfall cards with wallpaper */
@@ -2054,12 +2097,12 @@ body.has-wallpaper .article-toc-side {
padding: 22px 28px 28px;
border-top: 1px solid var(--md-ref-outline-variant);
/* 磨砂玻璃：半透明底 + 模糊，壁纸下增强可读性 */
background: rgba(255, 251, 254, 0.55);
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
[data-theme="dark"] .footer-classic {
background: rgba(28, 27, 31, 0.6);
background: var(--glass-bg);
}
.footer-classic .fc-left {
font-size: 13px;
@@ -2073,8 +2116,8 @@ body.has-wallpaper .article-toc-side {
border-radius: 50%;
margin: 0 10px;
vertical-align: middle;
background: linear-gradient(135deg, var(--md-ref-primary), #d0bcff);
box-shadow: 0 0 8px rgba(103, 80, 164, 0.7);
background: var(--theme-primary-gradient);
box-shadow: var(--theme-primary-shadow);
}
.footer-classic .fc-right {
display: inline-flex;
@@ -2099,13 +2142,13 @@ body.has-wallpaper .article-toc-side {
/* ---- 分栏导航 ---- */
.footer-columns {
/* 磨砂玻璃：半透明底 + 模糊，壁纸下增强可读性 */
background: rgba(255, 251, 254, 0.55);
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--md-ref-outline-variant);
}
[data-theme="dark"] .footer-columns {
background: rgba(28, 27, 31, 0.6);
background: var(--glass-bg);
}
.footer-columns .fc-grid {
display: grid;
@@ -2179,8 +2222,8 @@ body.has-wallpaper .article-toc-side {
border-radius: 50%;
margin: 0 10px;
vertical-align: middle;
background: linear-gradient(135deg, var(--md-ref-primary), #d0bcff);
box-shadow: 0 0 8px rgba(103, 80, 164, 0.7);
background: var(--theme-primary-gradient);
box-shadow: var(--theme-primary-shadow);
}
/* ---- 玻璃卡片 ---- */
@@ -2287,7 +2330,7 @@ body.has-wallpaper .article-toc-side {
}
.search-box:focus-within {
border-color: var(--md-ref-primary);
box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.15);
box-shadow: 0 0 0 3px rgba(var(--md-ref-primary-rgb), 0.15);
}
.search-box .material-icons { font-size: 20px; flex-shrink: 0; }
.search-box input {
@@ -2630,7 +2673,7 @@ body.has-wallpaper .article-toc-side {
gap: 6px 10px;
padding: 8px 22px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(103, 80, 164, 0.16), rgba(224, 163, 255, 0.09) 50%, rgba(255, 138, 171, 0.10));
background: var(--theme-primary-gradient-soft);
border: 1px solid var(--md-ref-outline-variant);
font-weight: 600;
letter-spacing: 0.6px;
@@ -2640,19 +2683,19 @@ body.has-wallpaper .article-toc-side {
}
.copyright-glow b,
.copyright-glow .grad {
background: linear-gradient(90deg, var(--md-ref-primary), #d0bcff, #ff8fab);
background: linear-gradient(90deg, var(--md-ref-primary), var(--md-ref-secondary), var(--md-ref-tertiary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes copyrightGlow {
0%, 100% {
box-shadow: 0 0 14px rgba(103, 80, 164, 0.30), 0 0 32px rgba(208, 188, 255, 0.12), inset 0 0 10px rgba(255, 255, 255, 0.05);
box-shadow: 0 0 14px rgba(var(--md-ref-primary-rgb), 0.30), 0 0 32px color-mix(in srgb, var(--md-ref-primary-container) 12%, transparent), inset 0 0 10px rgba(255, 255, 255, 0.05);
border-color: var(--md-ref-outline-variant);
}
50% {
box-shadow: 0 0 22px rgba(103, 80, 164, 0.55), 0 0 48px rgba(208, 188, 255, 0.25), inset 0 0 14px rgba(255, 255, 255, 0.08);
border-color: rgba(208, 188, 255, 0.5);
box-shadow: 0 0 22px rgba(var(--md-ref-primary-rgb), 0.55), 0 0 48px color-mix(in srgb, var(--md-ref-primary-container) 25%, transparent), inset 0 0 14px rgba(255, 255, 255, 0.08);
border-color: color-mix(in srgb, var(--md-ref-primary-container) 50%, transparent);
}
}
@@ -2668,12 +2711,12 @@ body.has-wallpaper .article-toc-side {
font-weight: 700;
letter-spacing: 1.2px;
font-size: 13px;
color: #fff;
text-shadow: 0 0 10px rgba(208, 188, 255, 0.8), 0 0 20px rgba(103, 80, 164, 0.5);
background: linear-gradient(135deg, #6750a4, #7c4dff 40%, #b388ff 70%, #ff8fab);
color: var(--md-ref-on-primary);
text-shadow: 0 0 10px color-mix(in srgb, var(--md-ref-primary-container) 80%, transparent), 0 0 20px rgba(var(--md-ref-primary-rgb), 0.5);
background: var(--theme-primary-gradient-wide);
background-size: 200% 200%;
animation: poweredFlow 4s ease infinite, poweredPulse 2.4s ease-in-out infinite;
box-shadow: 0 0 16px rgba(124, 77, 255, 0.45), 0 0 36px rgba(103, 80, 164, 0.25);
box-shadow: 0 0 16px color-mix(in srgb, var(--md-ref-primary) 45%, transparent), 0 0 36px rgba(var(--md-ref-primary-rgb), 0.25);
}
.powered-glow::before {
content: '';
@@ -2681,7 +2724,7 @@ body.has-wallpaper .article-toc-side {
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(120deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15) 40%, rgba(255, 138, 171, 0.8));
background: linear-gradient(120deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.15) 40%, color-mix(in srgb, var(--md-ref-tertiary) 80%, transparent));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -2703,8 +2746,8 @@ body.has-wallpaper .article-toc-side {
50% { background-position: 100% 50%; }
}
@keyframes poweredPulse {
0%, 100% { box-shadow: 0 0 16px rgba(124, 77, 255, 0.45), 0 0 36px rgba(103, 80, 164, 0.25); }
50% { box-shadow: 0 0 24px rgba(124, 77, 255, 0.7), 0 0 56px rgba(103, 80, 164, 0.4); }
0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--md-ref-primary) 45%, transparent), 0 0 36px rgba(var(--md-ref-primary-rgb), 0.25); }
50% { box-shadow: 0 0 24px color-mix(in srgb, var(--md-ref-primary) 70%, transparent), 0 0 56px rgba(var(--md-ref-primary-rgb), 0.4); }
}
@keyframes poweredBorder {
0% { filter: hue-rotate(0deg); opacity: 0.7; }
@@ -2718,14 +2761,14 @@ body.has-wallpaper .article-toc-side {
/* ===== 博客文章详情页壁纸下磨砂背景（增强可读性） ===== */
.blog-article {
background: rgba(255, 251, 254, 0.5);
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 16px;
padding: 24px;
}
[data-theme="dark"] .blog-article {
background: rgba(28, 27, 31, 0.55);
background: var(--glass-bg);
}
/* ===== 文章详情页布局：正文卡片（居中固定宽）+ 右侧悬浮目录 =====
@@ -2751,7 +2794,7 @@ body.has-wallpaper .article-toc-side {
left: calc(50% + 388px); /* 正文半宽 360px + 间距 28px */
max-height: calc(100vh - 120px);
overflow-y: auto;
background: rgba(255, 251, 254, 0.55);
background: var(--glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--md-ref-outline-variant);
@@ -2760,7 +2803,7 @@ body.has-wallpaper .article-toc-side {
box-shadow: 0 4px 20px var(--md-shadow);
}
[data-theme="dark"] .article-toc-side {
background: rgba(28, 27, 31, 0.6);
background: var(--glass-bg);
}
.article-toc-side .toc-title {
display: flex;