mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-19 14:20:51 +08:00
improvement(wrapped-ui): 移除 VHS 主题并优化 DOS/CRT 视觉效果
- 主题系统收敛为 Modern/Game Boy/DOS（快捷键改为 F1-F3） - 删除 VHS 切换器与相关样式（卡片/控件/年份选择/图表等） - DOS 主题统一使用像素字体，减弱发光强度并细化扫描线/闪烁参数 - DOS 闪烁光标改由 WrappedCRTOverlay 渲染，避免全局样式副作用 - 移除热力图 vhs 配色分支
This commit is contained in:
2977094657
@@ -1321,218 +1321,6 @@ const getLabelStyle = (code) => {
|
||||
text-shadow: 0 0 5px #ff3333;
|
||||
}
|
||||
|
||||
/* ========== VHS 录像带主题 - 复古视频风格键盘 ========== */
|
||||
|
||||
.wrapped-theme-vhs .keyboard-outer {
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #2a2a4e 0%, #1a1a2e 100%);
|
||||
border: 2px solid #0f3460;
|
||||
padding: 4px;
|
||||
box-shadow:
|
||||
0 4px 20px rgba(233, 69, 96, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .keyboard-inner {
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(180deg, #16213e 0%, #0f0f23 100%);
|
||||
border: 1px solid #0f3460;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .keyboard-header {
|
||||
border-bottom: 1px solid #0f3460;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .dot {
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.wrapped-theme-vhs .dot-red {
|
||||
background: #e94560;
|
||||
box-shadow: 0 0 8px #e94560;
|
||||
animation: vhs-dot-flicker 0.1s infinite;
|
||||
}
|
||||
.wrapped-theme-vhs .dot-yellow { background: #f39c12; box-shadow: 0 0 5px #f39c12; }
|
||||
.wrapped-theme-vhs .dot-green { background: #27ae60; box-shadow: 0 0 5px #27ae60; }
|
||||
|
||||
@keyframes vhs-dot-flicker {
|
||||
0%, 90%, 100% { opacity: 1; }
|
||||
92% { opacity: 0.7; }
|
||||
95% { opacity: 1; }
|
||||
97% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .keyboard-stats,
|
||||
.wrapped-theme-vhs .keyboard-hint {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #eaeaea;
|
||||
text-shadow:
|
||||
-1px 0 #00fff7,
|
||||
1px 0 #ff00ff;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .keyboard-body {
|
||||
border-radius: 2px;
|
||||
background: #0a0a1a;
|
||||
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .kb-key::before {
|
||||
border-radius: 2px;
|
||||
background: #1a1a2e;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .kb-key-top {
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0f3460 !important;
|
||||
background: linear-gradient(180deg, #2a2a4e 0%, #1a1a2e 100%) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
0 2px 4px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .kb-label {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #eaeaea !important;
|
||||
text-shadow:
|
||||
-1px 0 rgba(0, 255, 247, 0.5),
|
||||
1px 0 rgba(255, 0, 255, 0.5);
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .kb-sub {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #a0a0a0 !important;
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .kb-space-bar {
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, #e94560 0%, #0f3460 100%);
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .keyboard-brand {
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #e94560;
|
||||
text-shadow:
|
||||
-1px 0 #00fff7,
|
||||
1px 0 #ff00ff;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
/* VHS 磨损效果 - 色彩溢出增强 */
|
||||
.wrapped-theme-vhs .kb-level-1 .kb-label,
|
||||
.wrapped-theme-vhs .kb-level-2 .kb-label {
|
||||
text-shadow:
|
||||
-1px 0 rgba(0, 255, 247, 0.6),
|
||||
1px 0 rgba(255, 0, 255, 0.6);
|
||||
}
|
||||
.wrapped-theme-vhs .kb-level-3 .kb-label,
|
||||
.wrapped-theme-vhs .kb-level-4 .kb-label {
|
||||
text-shadow:
|
||||
-2px 0 rgba(0, 255, 247, 0.7),
|
||||
2px 0 rgba(255, 0, 255, 0.7);
|
||||
}
|
||||
.wrapped-theme-vhs .kb-level-5 .kb-label,
|
||||
.wrapped-theme-vhs .kb-level-6 .kb-label {
|
||||
text-shadow:
|
||||
-2px 0 rgba(0, 255, 247, 0.8),
|
||||
2px 0 rgba(255, 0, 255, 0.8);
|
||||
animation: vhs-text-glitch 3s infinite;
|
||||
}
|
||||
.wrapped-theme-vhs .kb-level-7 .kb-key-top,
|
||||
.wrapped-theme-vhs .kb-level-8 .kb-key-top {
|
||||
animation: vhs-key-glitch 2s infinite;
|
||||
}
|
||||
.wrapped-theme-vhs .kb-level-9 .kb-key-top {
|
||||
animation: vhs-key-glitch 1s infinite;
|
||||
border-color: #e94560 !important;
|
||||
}
|
||||
|
||||
@keyframes vhs-text-glitch {
|
||||
0%, 95%, 100% { transform: translateX(0); }
|
||||
96% { transform: translateX(-1px); }
|
||||
97% { transform: translateX(1px); }
|
||||
98% { transform: translateX(-1px); }
|
||||
99% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes vhs-key-glitch {
|
||||
0%, 92%, 100% {
|
||||
transform: translate(0);
|
||||
filter: none;
|
||||
}
|
||||
93% {
|
||||
transform: translate(-1px, 0);
|
||||
filter: hue-rotate(90deg);
|
||||
}
|
||||
95% {
|
||||
transform: translate(1px, 0);
|
||||
filter: hue-rotate(-90deg);
|
||||
}
|
||||
97% {
|
||||
transform: translate(0, -1px);
|
||||
filter: saturate(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .kb-level-10 .kb-key-top {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.wrapped-theme-vhs .kb-level-10::before {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#1a1a2e 25%,
|
||||
#0f3460 25%,
|
||||
#0f3460 50%,
|
||||
#1a1a2e 50%,
|
||||
#1a1a2e 75%,
|
||||
#0f3460 75%
|
||||
) !important;
|
||||
background-size: 4px 4px;
|
||||
animation: vhs-static 0.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes vhs-static {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: 4px 4px; }
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .kb-level-10::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #e94560;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px #e94560;
|
||||
animation: vhs-dot-flicker 0.2s infinite;
|
||||
}
|
||||
|
||||
/* VHS 聊天气泡主题适配 */
|
||||
.wrapped-theme-vhs .bubble-left,
|
||||
.wrapped-theme-vhs .bubble-right {
|
||||
background: #16213e;
|
||||
border: 1px solid #0f3460;
|
||||
}
|
||||
.wrapped-theme-vhs .bubble-left::before {
|
||||
border-right-color: #16213e;
|
||||
}
|
||||
.wrapped-theme-vhs .bubble-right {
|
||||
background: linear-gradient(135deg, #e94560 0%, #0f3460 100%);
|
||||
}
|
||||
.wrapped-theme-vhs .bubble-right::after {
|
||||
border-left-color: #0f3460;
|
||||
}
|
||||
|
||||
/* DOS 聊天气泡主题适配 */
|
||||
.wrapped-theme-dos .bubble-left,
|
||||
.wrapped-theme-dos .bubble-right {
|
||||
@@ -1560,12 +1348,6 @@ const getLabelStyle = (code) => {
|
||||
stroke: #33ff33;
|
||||
}
|
||||
|
||||
/* VHS 头像适配 */
|
||||
.wrapped-theme-vhs .avatar-box {
|
||||
background: #16213e;
|
||||
border-color: #0f3460;
|
||||
}
|
||||
|
||||
/* ========== Game Boy 主题 - 聊天气泡适配 ========== */
|
||||
|
||||
/* 聊天区域背景 */
|
||||
@@ -1655,28 +1437,4 @@ const getLabelStyle = (code) => {
|
||||
text-shadow: 0 0 3px #33ff33;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* ========== VHS 主题 - 聊天气泡文字适配 ========== */
|
||||
|
||||
.wrapped-theme-vhs .bubble-left .wrapped-label,
|
||||
.wrapped-theme-vhs .bubble-right .wrapped-label {
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .bubble-left .wrapped-number,
|
||||
.wrapped-theme-vhs .bubble-right .wrapped-number {
|
||||
color: #eaeaea !important;
|
||||
text-shadow:
|
||||
-1px 0 rgba(0, 255, 247, 0.5),
|
||||
1px 0 rgba(255, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .bubble-left .wrapped-body,
|
||||
.wrapped-theme-vhs .bubble-right .wrapped-body {
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-vhs .avatar-box svg {
|
||||
stroke: #e94560;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user