mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-20 14:50:50 +08:00
improvement(wrapped): 清理主题系统，Wrapped 固定 Modern
- 移除 useWrappedTheme 与主题切换入口（仅保留 Modern 视觉） - 封面/卡片/年份选择器/热力图等组件去掉 Win98/Gameboy/DOS 分支与样式 - 删除 themedHeatColor、CRT/像素字体相关样式，降低维护成本
This commit is contained in:
2977094657
@@ -2,33 +2,6 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Fusion Pixel Font - 像素字体 @font-face 声明 */
|
||||
/* 下载地址: https://github.com/TakWolf/fusion-pixel-font/releases */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fusion Pixel 12';
|
||||
src: url('/fonts/fusion-pixel-12px-monospaced-zh_hans.otf.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fusion Pixel 10';
|
||||
src: url('/fonts/fusion-pixel-10px-monospaced-zh_hans.otf.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fusion Pixel 8';
|
||||
src: url('/fonts/fusion-pixel-8px-monospaced-zh_hans.otf.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* 自定义全局样式 - 微信配色主题 */
|
||||
@layer base {
|
||||
:root {
|
||||
@@ -69,11 +42,6 @@
|
||||
|
||||
/* 统一消息圆角（聊天所有消息共用） */
|
||||
--message-radius: 4px;
|
||||
|
||||
/* Wrapped 年度总结 - 像素字体 */
|
||||
--font-pixel-12: 'Fusion Pixel 12', 'Microsoft YaHei', sans-serif;
|
||||
--font-pixel-10: 'Fusion Pixel 10', 'Microsoft YaHei', sans-serif;
|
||||
--font-pixel-8: 'Fusion Pixel 8', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -169,8 +137,7 @@
|
||||
animation: noise-jitter 0.5s steps(3) infinite;
|
||||
}
|
||||
|
||||
/* Wrapped 像素字体类 */
|
||||
/* Wrapped typography: default is modern; `.wrapped-retro` enables pixel font + CRT vibe. */
|
||||
/* Wrapped typography */
|
||||
.wrapped-title {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
@@ -195,94 +162,6 @@
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.wrapped-retro .wrapped-title {
|
||||
font-family: var(--font-pixel-12);
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.05em;
|
||||
image-rendering: pixelated;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
.wrapped-retro .wrapped-title-en {
|
||||
font-family: var(--font-pixel-12);
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.08em;
|
||||
image-rendering: pixelated;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
.wrapped-retro .wrapped-body {
|
||||
font-family: var(--font-pixel-10);
|
||||
font-weight: normal;
|
||||
line-height: 1.8;
|
||||
image-rendering: pixelated;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
.wrapped-retro .wrapped-label {
|
||||
font-family: var(--font-pixel-8);
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
image-rendering: pixelated;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
.wrapped-retro .wrapped-number {
|
||||
font-family: var(--font-pixel-12);
|
||||
font-weight: normal;
|
||||
font-variant-numeric: tabular-nums;
|
||||
image-rendering: pixelated;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
/* CRT 扫描线 - 水平线条（明显可见） */
|
||||
.crt-scanlines {
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 3px,
|
||||
rgba(0, 0, 0, 0.15) 3px,
|
||||
rgba(0, 0, 0, 0.15) 4px
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
animation: scanline-scroll 12s linear infinite;
|
||||
}
|
||||
|
||||
/* CRT RGB 子像素 - 垂直彩色条纹 */
|
||||
.crt-rgb-pixels {
|
||||
background-image: repeating-linear-gradient(
|
||||
to right,
|
||||
rgba(255, 0, 0, 0.06) 0px,
|
||||
rgba(255, 0, 0, 0.06) 1px,
|
||||
rgba(0, 255, 0, 0.06) 1px,
|
||||
rgba(0, 255, 0, 0.06) 2px,
|
||||
rgba(0, 0, 255, 0.06) 2px,
|
||||
rgba(0, 0, 255, 0.06) 3px
|
||||
);
|
||||
}
|
||||
|
||||
/* CRT 闪烁 - 亮度波动 */
|
||||
.crt-flicker {
|
||||
background-color: rgba(255, 255, 255, 0.01);
|
||||
animation: crt-flicker 0.15s infinite alternate;
|
||||
}
|
||||
|
||||
/* CRT 暗角 - 边缘渐暗（更强） */
|
||||
.crt-vignette {
|
||||
box-shadow: inset 0 0 250px 80px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* CRT 屏幕曲率效果 */
|
||||
.crt-curvature {
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
transparent 0%,
|
||||
transparent 40%,
|
||||
rgba(0, 0, 0, 0.1) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.input {
|
||||
@apply w-full px-4 py-3 bg-[#f7f8fa] border border-transparent rounded-xl focus:outline-none focus:ring-2 focus:ring-[#07c160] focus:bg-white focus:border-[#07c160] transition-all duration-200;
|
||||
@@ -1224,24 +1103,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* CRT 和 Wrapped 动画关键帧 */
|
||||
@keyframes scanline-scroll {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes crt-flicker {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.985;
|
||||
}
|
||||
}
|
||||
/* Wrapped 动画关键帧 */
|
||||
|
||||
@keyframes noise-jitter {
|
||||
0% {
|
||||
@@ -1273,348 +1135,3 @@
|
||||
.wrapped-animate-in {
|
||||
animation: wrapped-fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Wrapped 主题系统 - Game Boy / DOS
|
||||
============================================ */
|
||||
|
||||
/* 复古模式共享基础样式 */
|
||||
.wrapped-retro {
|
||||
/* 共享 CSS 变量（各主题覆盖） */
|
||||
--wrapped-bg: #9bbc0f;
|
||||
--wrapped-card-bg: #8bac0f;
|
||||
--wrapped-text: #0f380f;
|
||||
--wrapped-text-secondary: #306230;
|
||||
--wrapped-accent: #0f380f;
|
||||
--wrapped-border: #306230;
|
||||
--wrapped-warning: #0f380f;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Theme 1: Game Boy - 复古绿色系
|
||||
============================================ */
|
||||
.wrapped-theme-gameboy {
|
||||
/* Game Boy 4色调色板 */
|
||||
--wrapped-bg: #9bbc0f; /* 最亮绿 */
|
||||
--wrapped-card-bg: #8bac0f; /* 次亮绿 */
|
||||
--wrapped-text: #0f380f; /* 最深绿 */
|
||||
--wrapped-text-secondary: #306230; /* 中深绿 */
|
||||
--wrapped-accent: #0f380f;
|
||||
--wrapped-border: #306230;
|
||||
--wrapped-warning: #306230;
|
||||
|
||||
/* 像素化渲染 */
|
||||
image-rendering: pixelated;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
/* Game Boy 像素化边框 */
|
||||
.wrapped-theme-gameboy .wrapped-card-shell,
|
||||
.wrapped-theme-gameboy [class*="rounded"] {
|
||||
border-radius: 0 !important;
|
||||
box-shadow:
|
||||
inset -4px -4px 0 0 #306230,
|
||||
inset 4px 4px 0 0 #9bbc0f,
|
||||
0 0 0 4px #0f380f;
|
||||
}
|
||||
|
||||
/* Game Boy 步进动画 */
|
||||
.wrapped-theme-gameboy * {
|
||||
animation-timing-function: steps(8) !important;
|
||||
}
|
||||
|
||||
/* Game Boy 按钮样式 */
|
||||
.wrapped-theme-gameboy button {
|
||||
border-radius: 0 !important;
|
||||
box-shadow:
|
||||
inset -2px -2px 0 0 #306230,
|
||||
inset 2px 2px 0 0 #9bbc0f;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-gameboy button:active {
|
||||
box-shadow:
|
||||
inset 2px 2px 0 0 #306230,
|
||||
inset -2px -2px 0 0 #9bbc0f;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Theme 2: DOS Terminal - 黑底绿字/琥珀字
|
||||
============================================ */
|
||||
.wrapped-theme-dos {
|
||||
--wrapped-bg: #000000;
|
||||
--wrapped-card-bg: #0a0a0a;
|
||||
--wrapped-text: #33ff33; /* 磷光绿 */
|
||||
--wrapped-text-secondary: #22aa22;
|
||||
--wrapped-accent: #33ff33;
|
||||
--wrapped-border: #33ff33;
|
||||
--wrapped-warning: #ffaa00; /* 琥珀警告色 */
|
||||
|
||||
background-color: #000000 !important;
|
||||
/* 使用现有 Fusion Pixel 10px 字体 */
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace !important;
|
||||
-webkit-font-smoothing: none;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
/* DOS 文字发光效果 */
|
||||
.wrapped-theme-dos .wrapped-title,
|
||||
.wrapped-theme-dos .wrapped-body,
|
||||
.wrapped-theme-dos .wrapped-label,
|
||||
.wrapped-theme-dos .wrapped-number {
|
||||
color: #33ff33 !important;
|
||||
/* 从 4 层减少到 2 层，降低发光强度 */
|
||||
text-shadow:
|
||||
0 0 4px rgba(51, 255, 51, 0.8),
|
||||
0 0 8px rgba(34, 170, 34, 0.4);
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace !important;
|
||||
-webkit-font-smoothing: none;
|
||||
}
|
||||
|
||||
/* DOS ASCII 边框 */
|
||||
.wrapped-theme-dos .wrapped-card-shell,
|
||||
.wrapped-theme-dos [class*="border"] {
|
||||
border: 2px solid #33ff33 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow:
|
||||
0 0 5px #33ff33,
|
||||
inset 0 0 5px rgba(51, 255, 51, 0.1);
|
||||
}
|
||||
|
||||
/* DOS 磷光残影效果 */
|
||||
.wrapped-theme-dos * {
|
||||
transition: text-shadow 0.1s ease-out !important;
|
||||
}
|
||||
|
||||
/* DOS 扫描线（细化） */
|
||||
.wrapped-theme-dos .crt-scanlines {
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0px,
|
||||
transparent 1px,
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
rgba(0, 0, 0, 0.15) 2px
|
||||
) !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* DOS 按钮样式 */
|
||||
.wrapped-theme-dos button {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #33ff33 !important;
|
||||
color: #33ff33 !important;
|
||||
border-radius: 0 !important;
|
||||
text-shadow: 0 0 5px #33ff33;
|
||||
box-shadow: 0 0 5px rgba(51, 255, 51, 0.3);
|
||||
}
|
||||
|
||||
.wrapped-theme-dos button:hover {
|
||||
background-color: #33ff33 !important;
|
||||
color: #000000 !important;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Theme 3: Windows 95/98 - Win98
|
||||
============================================ */
|
||||
.wrapped-theme-win98 {
|
||||
/* System-like colors (approx.) */
|
||||
--win98-face: #c0c0c0; /* ButtonFace */
|
||||
--win98-hi: #ffffff; /* ButtonHighlight */
|
||||
--win98-shadow: #808080; /* ButtonShadow */
|
||||
--win98-dkshadow: #000000; /* Black */
|
||||
--win98-outline: #dedede; /* Extra light line (common in Win95 clones) */
|
||||
--win98-dither: repeating-conic-gradient(#bdbebd 0% 25%, #ffffff 0% 50%) 50% / 2px 2px;
|
||||
|
||||
--win98-title: #000080; /* ActiveCaption */
|
||||
--win98-title2: #1084d0; /* Caption gradient (approx.) */
|
||||
--win98-title-text: #ffffff;
|
||||
--win98-title-inactive: #7b7d7b;
|
||||
--win98-title-inactive-text: #e6e6e6;
|
||||
|
||||
/* Map to Wrapped theme variables */
|
||||
--wrapped-bg: #ffffff; /* fields/content */
|
||||
--wrapped-card-bg: var(--win98-face);
|
||||
--wrapped-text: #000000;
|
||||
--wrapped-text-secondary: #404040;
|
||||
--wrapped-accent: var(--win98-title);
|
||||
--wrapped-border: var(--win98-shadow);
|
||||
--wrapped-warning: #800000;
|
||||
|
||||
font-family: "MS Sans Serif", Tahoma, "Microsoft Sans Serif", "Segoe UI", sans-serif !important;
|
||||
}
|
||||
|
||||
/* Win98: hard edges */
|
||||
.wrapped-theme-win98 [class*="rounded"] {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Win98: baseline typography (override Tailwind inline colors via !important) */
|
||||
.wrapped-theme-win98 .wrapped-title {
|
||||
color: var(--wrapped-text) !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .wrapped-body,
|
||||
.wrapped-theme-win98 .wrapped-label {
|
||||
color: var(--wrapped-text-secondary) !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .wrapped-number {
|
||||
color: var(--wrapped-accent) !important;
|
||||
}
|
||||
|
||||
/* Win98: generic raised button */
|
||||
.wrapped-theme-win98 button {
|
||||
background: var(--win98-face) !important;
|
||||
color: #000000 !important;
|
||||
border-radius: 0 !important;
|
||||
text-shadow: none !important;
|
||||
|
||||
/* Win95-ish bevel: light (top/left) + shadow (bottom/right) + hard drop */
|
||||
border-top: 1px solid var(--win98-hi) !important;
|
||||
border-left: 1px solid var(--win98-hi) !important;
|
||||
border-right: 1px solid var(--win98-shadow) !important;
|
||||
border-bottom: 1px solid var(--win98-shadow) !important;
|
||||
box-shadow: 1px 1px 0 var(--win98-dkshadow) !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 button:active:not(:disabled) {
|
||||
background: var(--win98-face) !important;
|
||||
box-shadow: none !important;
|
||||
border-top: 1px solid var(--win98-dkshadow) !important;
|
||||
border-left: 1px solid var(--win98-dkshadow) !important;
|
||||
border-right: 1px solid var(--win98-hi) !important;
|
||||
border-bottom: 1px solid var(--win98-hi) !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 button:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Win98: dotted focus rectangle (classic) */
|
||||
.wrapped-theme-win98 button:focus-visible {
|
||||
outline: 1px dotted var(--win98-dkshadow);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
/* Win98 helper: checkered/dither fill for "pressed/toggled" UI (taskbar active, start menu pressed, etc.) */
|
||||
.wrapped-theme-win98 .win98-dither {
|
||||
background: var(--win98-dither) !important;
|
||||
}
|
||||
|
||||
/* Win98: text-ish inputs / selects get a sunken look (avoid checkbox/radio etc.) */
|
||||
.wrapped-theme-win98 textarea,
|
||||
.wrapped-theme-win98 select,
|
||||
.wrapped-theme-win98 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
|
||||
background: var(--wrapped-bg) !important;
|
||||
color: var(--wrapped-text) !important;
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid var(--win98-shadow) !important;
|
||||
box-shadow:
|
||||
inset 1px 1px 0 var(--win98-dkshadow),
|
||||
inset -1px -1px 0 var(--win98-hi);
|
||||
}
|
||||
|
||||
/* Win98: window primitives (98.css-like semantics) */
|
||||
.wrapped-theme-win98 .window {
|
||||
background: var(--win98-face);
|
||||
|
||||
/* Stronger Win95-ish window frame (inspired by /win95/assets/css/windows/window.css) */
|
||||
border-top: 2px solid var(--win98-hi);
|
||||
border-left: 2px solid var(--win98-hi);
|
||||
border-right: 1.5px solid var(--win98-shadow);
|
||||
border-bottom: 1.5px solid var(--win98-shadow);
|
||||
box-shadow: 1.5px 1.5px 0 var(--win98-dkshadow);
|
||||
outline: 1px solid var(--win98-outline);
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 3px 4px;
|
||||
|
||||
/* Win95 is typically solid; Win98 sometimes gradients. Keep solid by default. */
|
||||
background: var(--win98-title);
|
||||
color: var(--win98-title-text);
|
||||
font-weight: 700;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .title-bar-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .title-bar-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: none;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .title-bar-text span {
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .title-bar-controls {
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .title-bar-controls button {
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .title-bar-controls button::before {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Win95-ish glyphs (avoid relying on fonts for the line/square). */
|
||||
.wrapped-theme-win98 .title-bar-controls button[aria-label="Minimize"]::before {
|
||||
width: 6px;
|
||||
height: 2px;
|
||||
background: #000000;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .title-bar-controls button[aria-label="Maximize"]::before {
|
||||
width: 9px;
|
||||
height: 8px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #000000;
|
||||
border-top-width: 2px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .title-bar-controls button[aria-label="Close"]::before {
|
||||
content: "×";
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .window-body {
|
||||
padding: 8px;
|
||||
background: var(--win98-face);
|
||||
border-top: 1px solid var(--win98-shadow);
|
||||
box-shadow: inset 0 1px 0 var(--win98-hi);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user