mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-20 23:00:50 +08:00
improvement(wrapped): 清理主题系统，Wrapped 固定 Modern
- 移除 useWrappedTheme 与主题切换入口（仅保留 Modern 视觉） - 封面/卡片/年份选择器/热力图等组件去掉 Win98/Gameboy/DOS 分支与样式 - 删除 themedHeatColor、CRT/像素字体相关样式，降低维护成本
This commit is contained in:
2977094657
@@ -791,929 +791,4 @@ const getLabelStyle = (code) => {
|
||||
@apply mt-2 text-center text-[8px] text-[#00000025] tracking-[0.15em] uppercase;
|
||||
}
|
||||
|
||||
/* ========== 复古模式 - 8-bit 像素风格键盘 ========== */
|
||||
|
||||
/* 全局像素化渲染 */
|
||||
.wrapped-retro .keyboard-outer,
|
||||
.wrapped-retro .keyboard-outer * {
|
||||
image-rendering: pixelated;
|
||||
-webkit-font-smoothing: none;
|
||||
-moz-osx-font-smoothing: unset;
|
||||
}
|
||||
|
||||
/* 键盘外框 - 粗像素边框，Game Boy 风格 */
|
||||
.wrapped-retro .keyboard-outer {
|
||||
border-radius: 0;
|
||||
background: #8b956d;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
/* 多层像素边框效果 */
|
||||
box-shadow:
|
||||
0 0 0 4px #2d3320,
|
||||
0 0 0 8px #5a6448,
|
||||
0 0 0 10px #2d3320,
|
||||
inset 0 0 0 2px #a5b38a;
|
||||
}
|
||||
|
||||
.wrapped-retro .keyboard-inner {
|
||||
border-radius: 0;
|
||||
background: #9aa582;
|
||||
border: none;
|
||||
padding: 6px;
|
||||
/* 内凹像素边框 */
|
||||
box-shadow:
|
||||
inset 4px 4px 0 #6b7a54,
|
||||
inset -4px -4px 0 #c5d4a8;
|
||||
}
|
||||
|
||||
/* 顶部装饰点 - 大像素方块 + 闪烁动画 */
|
||||
.wrapped-retro .dot {
|
||||
border-radius: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
box-shadow:
|
||||
2px 2px 0 rgba(0,0,0,0.5),
|
||||
inset -2px -2px 0 rgba(0,0,0,0.3);
|
||||
}
|
||||
.wrapped-retro .dot-red {
|
||||
background: #e43b44;
|
||||
animation: pixel-blink 1s steps(2) infinite;
|
||||
}
|
||||
.wrapped-retro .dot-yellow {
|
||||
background: #f7d51d;
|
||||
animation: pixel-blink 1.5s steps(2) infinite 0.3s;
|
||||
}
|
||||
.wrapped-retro .dot-green {
|
||||
background: #63c64d;
|
||||
animation: pixel-blink 2s steps(2) infinite 0.6s;
|
||||
}
|
||||
@keyframes pixel-blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
/* 统计文字 - 像素字体 + 阴影 */
|
||||
.wrapped-retro .keyboard-stats {
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||||
font-size: 10px;
|
||||
color: #2d3320;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 1px 1px 0 #c5d4a8;
|
||||
}
|
||||
|
||||
.wrapped-retro .keyboard-hint {
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||||
font-size: 9px;
|
||||
color: #4a5a38;
|
||||
text-shadow: 1px 1px 0 #c5d4a8;
|
||||
}
|
||||
|
||||
/* 键盘主体 - 像素网格背景 */
|
||||
.wrapped-retro .keyboard-body {
|
||||
border-radius: 0;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
#7a8a62 0px, #7a8a62 2px,
|
||||
#8b9b72 2px, #8b9b72 4px
|
||||
);
|
||||
padding: 4px;
|
||||
box-shadow:
|
||||
inset 3px 3px 0 #5a6a48,
|
||||
inset -3px -3px 0 #a5b592;
|
||||
}
|
||||
|
||||
/* 键帽基础 - 粗像素边框 */
|
||||
.wrapped-retro .kb-key::before {
|
||||
border-radius: 0;
|
||||
background: #3d4a2d;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wrapped-retro .kb-key-top {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: #c5d4a8 !important;
|
||||
/* 3D 像素凸起效果 - 多层 box-shadow */
|
||||
box-shadow:
|
||||
inset -3px -3px 0 #7a8a62,
|
||||
inset 3px 3px 0 #e8f4d8,
|
||||
inset -1px -1px 0 #5a6a48,
|
||||
inset 1px 1px 0 #f0fce0 !important;
|
||||
}
|
||||
|
||||
/* 键帽标签 - 粗像素字体 */
|
||||
.wrapped-retro .kb-label {
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||||
font-size: 8px;
|
||||
font-weight: bold;
|
||||
color: #2d3320;
|
||||
text-shadow: 1px 1px 0 #e8f4d8;
|
||||
filter: none !important;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.wrapped-retro .kb-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapped-retro .kb-label-sm {
|
||||
font-size: 6px !important;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.wrapped-retro .kb-label-sm {
|
||||
font-size: 7px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapped-retro .kb-sub {
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||||
font-size: 5px;
|
||||
color: #5a6a48;
|
||||
text-shadow: none;
|
||||
filter: none !important;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.wrapped-retro .kb-sub {
|
||||
font-size: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 空格键凹槽 - 像素凹陷 */
|
||||
.wrapped-retro .kb-space-bar {
|
||||
border-radius: 0;
|
||||
background: #5a6a48;
|
||||
box-shadow:
|
||||
inset 2px 2px 0 #3d4a2d,
|
||||
inset -1px -1px 0 #7a8a62;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* 品牌文字 */
|
||||
.wrapped-retro .keyboard-brand {
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||||
color: #5a6a48;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 1px 1px 0 #c5d4a8;
|
||||
}
|
||||
|
||||
/* ========== 复古模式 - 像素化磨损等级 ========== */
|
||||
|
||||
/* Level 1-2: 轻微变色 + 中心模糊污渍 */
|
||||
.wrapped-retro .kb-level-1 .kb-key-top,
|
||||
.wrapped-retro .kb-level-2 .kb-key-top {
|
||||
background: #b5c498 !important;
|
||||
}
|
||||
.wrapped-retro .kb-level-1 .kb-key-top::after,
|
||||
.wrapped-retro .kb-level-2 .kb-key-top::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 25%;
|
||||
background: radial-gradient(ellipse at center, #8b9b72 0%, transparent 70%);
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
.wrapped-retro .kb-level-2 .kb-key-top::after {
|
||||
inset: 20%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Level 3-4: 更深的模糊污渍 */
|
||||
.wrapped-retro .kb-level-3 .kb-key-top,
|
||||
.wrapped-retro .kb-level-4 .kb-key-top {
|
||||
background: #a5b488 !important;
|
||||
}
|
||||
.wrapped-retro .kb-level-3 .kb-key-top::after,
|
||||
.wrapped-retro .kb-level-4 .kb-key-top::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 15%;
|
||||
background: radial-gradient(ellipse at center, #6b7a54 0%, #7a8a62 40%, transparent 70%);
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.wrapped-retro .kb-level-4 .kb-key-top::after {
|
||||
inset: 10%;
|
||||
background: radial-gradient(ellipse at center, #5a6a48 0%, #6b7a54 30%, #7a8a62 50%, transparent 75%);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Level 5-6: 凹陷效果 + 磨损渐变 + 裂纹线 */
|
||||
.wrapped-retro .kb-level-5 .kb-key-top,
|
||||
.wrapped-retro .kb-level-6 .kb-key-top {
|
||||
background: #95a478 !important;
|
||||
/* 反转阴影 = 凹陷效果 */
|
||||
box-shadow:
|
||||
inset 3px 3px 0 #6b7a54,
|
||||
inset -3px -3px 0 #b5c498,
|
||||
inset 1px 1px 0 #5a6a48 !important;
|
||||
}
|
||||
.wrapped-retro .kb-level-5 .kb-key-top::before,
|
||||
.wrapped-retro .kb-level-6 .kb-key-top::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 2px;
|
||||
width: 2px;
|
||||
height: 40%;
|
||||
background: linear-gradient(to bottom, #3d4a2d, transparent);
|
||||
z-index: 2;
|
||||
}
|
||||
.wrapped-retro .kb-level-5 .kb-key-top::after,
|
||||
.wrapped-retro .kb-level-6 .kb-key-top::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 10%;
|
||||
background: radial-gradient(ellipse at center, #5a6a48 0%, #6b7a54 30%, transparent 65%);
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
.wrapped-retro .kb-level-6 .kb-key-top::before {
|
||||
height: 55%;
|
||||
}
|
||||
.wrapped-retro .kb-level-6 .kb-key-top::after {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Level 7-8: 严重磨损 + 裂纹 */
|
||||
.wrapped-retro .kb-level-7 .kb-key-top,
|
||||
.wrapped-retro .kb-level-8 .kb-key-top {
|
||||
background: #859468 !important;
|
||||
box-shadow:
|
||||
inset 3px 3px 0 #5a6a48,
|
||||
inset -3px -3px 0 #a5b488,
|
||||
inset 2px 2px 0 #4a5a38 !important;
|
||||
}
|
||||
.wrapped-retro .kb-level-7 .kb-key-top::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
/* 对角裂纹 */
|
||||
background:
|
||||
linear-gradient(135deg,
|
||||
transparent 0%, transparent 45%,
|
||||
#3d4a2d 45%, #3d4a2d 48%,
|
||||
transparent 48%, transparent 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.wrapped-retro .kb-level-7 .kb-key-top::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 5%;
|
||||
background: radial-gradient(ellipse at center, #4a5a38 0%, #5a6a48 25%, transparent 60%);
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Level 8: 缺角 + 交叉裂纹 + 深度磨损 */
|
||||
.wrapped-retro .kb-broken-tl .kb-key-top {
|
||||
clip-path: polygon(6px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 6px);
|
||||
}
|
||||
.wrapped-retro .kb-broken-tr .kb-key-top {
|
||||
clip-path: polygon(0% 0%, calc(100% - 6px) 0%, 100% 6px, 100% 100%, 0% 100%);
|
||||
}
|
||||
.wrapped-retro .kb-broken-bl .kb-key-top {
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 6px 100%, 0% calc(100% - 6px));
|
||||
}
|
||||
.wrapped-retro .kb-broken-br .kb-key-top {
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%);
|
||||
}
|
||||
.wrapped-retro .kb-level-8 .kb-key-top::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
/* 交叉裂纹 */
|
||||
background:
|
||||
linear-gradient(135deg, transparent 46%, #3d4a2d 46%, #3d4a2d 50%, transparent 50%),
|
||||
linear-gradient(45deg, transparent 46%, #3d4a2d 46%, #3d4a2d 50%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.wrapped-retro .kb-level-8 .kb-key-top::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at center, #3d4a2d 0%, #4a5a38 20%, transparent 55%);
|
||||
opacity: 0.75;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Level 9: 严重损坏 - 大块缺失 + 深色磨损 */
|
||||
.wrapped-retro .kb-level-9 .kb-key-top {
|
||||
background: #758458 !important;
|
||||
box-shadow:
|
||||
inset 3px 3px 0 #4a5a38,
|
||||
inset -3px -3px 0 #95a478 !important;
|
||||
}
|
||||
.wrapped-retro .kb-shattered-tl .kb-key-top {
|
||||
clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10px);
|
||||
}
|
||||
.wrapped-retro .kb-shattered-tr .kb-key-top {
|
||||
clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 0% 100%);
|
||||
}
|
||||
.wrapped-retro .kb-shattered-bl .kb-key-top {
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10px 100%, 0% calc(100% - 10px));
|
||||
}
|
||||
.wrapped-retro .kb-shattered-br .kb-key-top {
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%);
|
||||
}
|
||||
.wrapped-retro .kb-level-9 .kb-key-top::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
/* 多条裂纹 */
|
||||
background:
|
||||
linear-gradient(135deg, transparent 30%, #2d3320 30%, #2d3320 33%, transparent 33%),
|
||||
linear-gradient(135deg, transparent 60%, #2d3320 60%, #2d3320 63%, transparent 63%),
|
||||
linear-gradient(45deg, transparent 45%, #2d3320 45%, #2d3320 48%, transparent 48%);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
.wrapped-retro .kb-level-9 .kb-key-top::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at center, #2d3320 0%, #3d4a2d 15%, #4a5a38 30%, transparent 55%);
|
||||
opacity: 0.8;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Level 10: 完全报废 - 键帽脱落露出轴体 */
|
||||
.wrapped-retro .kb-level-10 .kb-key-top {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.wrapped-retro .kb-level-10::before {
|
||||
background: #2d3320 !important;
|
||||
border-radius: 0;
|
||||
box-shadow:
|
||||
inset 2px 2px 0 #1a1f14,
|
||||
inset -2px -2px 0 #4a5a38;
|
||||
}
|
||||
.wrapped-retro .kb-level-10::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
/* 简化轴体 - 纯色方块 + 凹陷效果 */
|
||||
background: #6b7a54;
|
||||
border-radius: 0;
|
||||
box-shadow:
|
||||
inset 2px 2px 0 #8b956d,
|
||||
inset -2px -2px 0 #4a5a38;
|
||||
z-index: 1;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.wrapped-retro .kb-level-10::after {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 复古模式下移除性能优化的 will-change */
|
||||
.wrapped-retro .kb-level-8 .kb-key-top,
|
||||
.wrapped-retro .kb-level-9 .kb-key-top {
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
/* 复古模式 - 扫描线效果（可选，增强 CRT 感） */
|
||||
.wrapped-retro .keyboard-outer::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent 0px,
|
||||
transparent 2px,
|
||||
rgba(0, 0, 0, 0.03) 2px,
|
||||
rgba(0, 0, 0, 0.03) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* ========== Game Boy 主题 - DMG / WorkBoy 风格外观 ========== */
|
||||
/* 设计参考：原版 Game Boy 的“灰机身 + 蓝/洋红点缀”配色，以及社区常见的 DMG 键盘配色（例如 GMK DMG 系列）。 */
|
||||
.wrapped-theme-gameboy .keyboard-outer {
|
||||
background: #c4c1bd;
|
||||
box-shadow:
|
||||
0 0 0 4px #2b2b2b,
|
||||
0 0 0 8px #e8e4e2,
|
||||
0 0 0 10px #2b2b2b,
|
||||
inset 0 0 0 2px rgba(255,255,255,0.35);
|
||||
}
|
||||
|
||||
.wrapped-theme-gameboy .keyboard-inner {
|
||||
background: #d6d2ce;
|
||||
box-shadow:
|
||||
inset 4px 4px 0 #a9a39f,
|
||||
inset -4px -4px 0 #f5f2ee;
|
||||
}
|
||||
|
||||
/* 顶部信息条做成“屏幕窗” */
|
||||
.wrapped-theme-gameboy .keyboard-header {
|
||||
margin-bottom: 8px;
|
||||
padding: 8px 10px;
|
||||
border: 2px solid #081820;
|
||||
background: #e0f8d0;
|
||||
box-shadow:
|
||||
inset -2px -2px 0 #88c070,
|
||||
inset 2px 2px 0 #f8f8f8;
|
||||
}
|
||||
|
||||
/* 左侧指示灯：保留一个“电量灯”，其余隐藏 */
|
||||
.wrapped-theme-gameboy .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 0;
|
||||
box-shadow:
|
||||
0 0 0 2px #081820,
|
||||
inset 1px 1px 0 rgba(255,255,255,0.25);
|
||||
}
|
||||
.wrapped-theme-gameboy .dot-red {
|
||||
background: #9a2257;
|
||||
animation: none !important;
|
||||
}
|
||||
.wrapped-theme-gameboy .dot-yellow,
|
||||
.wrapped-theme-gameboy .dot-green {
|
||||
display: none;
|
||||
}
|
||||
.wrapped-theme-gameboy .keyboard-dots::after {
|
||||
content: 'BATTERY';
|
||||
margin-left: 6px;
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||||
font-size: 8px;
|
||||
letter-spacing: 1px;
|
||||
color: #081820;
|
||||
}
|
||||
|
||||
.wrapped-theme-gameboy .keyboard-hint,
|
||||
.wrapped-theme-gameboy .keyboard-stats {
|
||||
color: #081820;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* 键盘底板：偏灰，避免整块“全绿”导致像素感过强 */
|
||||
.wrapped-theme-gameboy .keyboard-body {
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
#bdb8b4 0px, #bdb8b4 2px,
|
||||
#c9c4c0 2px, #c9c4c0 4px
|
||||
);
|
||||
box-shadow:
|
||||
inset 3px 3px 0 #a9a39f,
|
||||
inset -3px -3px 0 #f5f2ee;
|
||||
}
|
||||
|
||||
/* 功能键给一点“蓝色键帽”点缀（更像 DMG 配色键盘） */
|
||||
.wrapped-theme-gameboy .kb-func .kb-key-top {
|
||||
background: #494786 !important;
|
||||
box-shadow:
|
||||
inset -3px -3px 0 #2f2d3a,
|
||||
inset 3px 3px 0 #6a66a2,
|
||||
inset -1px -1px 0 #1b1a22,
|
||||
inset 1px 1px 0 #8a86d0 !important;
|
||||
}
|
||||
.wrapped-theme-gameboy .kb-func .kb-label,
|
||||
.wrapped-theme-gameboy .kb-func .kb-sub {
|
||||
color: #e0f8d0 !important;
|
||||
text-shadow: 1px 1px 0 rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
/* “音响孔”点阵 */
|
||||
.wrapped-theme-gameboy .keyboard-outer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 12px;
|
||||
width: 52px;
|
||||
height: 18px;
|
||||
background:
|
||||
radial-gradient(circle, rgba(8, 24, 32, 0.35) 35%, transparent 36%) 0 0 / 6px 6px;
|
||||
opacity: 0.85;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 品牌文字：换成更贴近主题的“WorkBoy”梗 */
|
||||
.wrapped-theme-gameboy .keyboard-brand {
|
||||
position: relative;
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
}
|
||||
.wrapped-theme-gameboy .keyboard-brand::before {
|
||||
content: 'WECHAT WORKBOY';
|
||||
color: rgba(8, 24, 32, 0.7);
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* ========== DOS 终端主题 - 黑底绿字键盘 ========== */
|
||||
|
||||
.wrapped-theme-dos .keyboard-outer {
|
||||
border-radius: 0;
|
||||
background: #000000;
|
||||
border: 2px solid #33ff33;
|
||||
padding: 4px;
|
||||
box-shadow:
|
||||
0 0 10px rgba(51, 255, 51, 0.3),
|
||||
inset 0 0 20px rgba(51, 255, 51, 0.05);
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .keyboard-inner {
|
||||
border-radius: 0;
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #22aa22;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .keyboard-header {
|
||||
border-bottom: 1px solid #22aa22;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .dot {
|
||||
border-radius: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.wrapped-theme-dos .dot-red { background: #ff3333; box-shadow: 0 0 5px #ff3333; }
|
||||
.wrapped-theme-dos .dot-yellow { background: #ffaa00; box-shadow: 0 0 5px #ffaa00; }
|
||||
.wrapped-theme-dos .dot-green { background: #33ff33; box-shadow: 0 0 5px #33ff33; }
|
||||
|
||||
.wrapped-theme-dos .keyboard-stats,
|
||||
.wrapped-theme-dos .keyboard-hint {
|
||||
font-family: 'Courier New', 'Consolas', monospace;
|
||||
color: #33ff33;
|
||||
text-shadow: 0 0 5px #33ff33;
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .keyboard-body {
|
||||
border-radius: 0;
|
||||
background: #050505;
|
||||
box-shadow: inset 0 0 10px rgba(51, 255, 51, 0.1);
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .kb-key::before {
|
||||
border-radius: 0;
|
||||
background: #111111;
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .kb-key-top {
|
||||
border-radius: 0;
|
||||
border: 1px solid #33ff33 !important;
|
||||
background: #0a0a0a !important;
|
||||
box-shadow:
|
||||
0 0 3px rgba(51, 255, 51, 0.3),
|
||||
inset 0 0 5px rgba(51, 255, 51, 0.1) !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .kb-label,
|
||||
.wrapped-theme-dos .kb-sub {
|
||||
font-family: 'Courier New', 'Consolas', monospace;
|
||||
color: #33ff33 !important;
|
||||
text-shadow: 0 0 3px #33ff33;
|
||||
filter: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .kb-space-bar {
|
||||
border-radius: 0;
|
||||
background: #33ff33;
|
||||
box-shadow: 0 0 5px #33ff33;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .keyboard-brand {
|
||||
font-family: 'Courier New', 'Consolas', monospace;
|
||||
color: #22aa22;
|
||||
text-shadow: 0 0 3px #22aa22;
|
||||
}
|
||||
|
||||
/* DOS 磨损效果 - 发光强度变化 */
|
||||
.wrapped-theme-dos .kb-level-1 .kb-key-top,
|
||||
.wrapped-theme-dos .kb-level-2 .kb-key-top {
|
||||
box-shadow: 0 0 5px rgba(51, 255, 51, 0.4) !important;
|
||||
}
|
||||
.wrapped-theme-dos .kb-level-3 .kb-key-top,
|
||||
.wrapped-theme-dos .kb-level-4 .kb-key-top {
|
||||
box-shadow: 0 0 8px rgba(51, 255, 51, 0.5) !important;
|
||||
}
|
||||
.wrapped-theme-dos .kb-level-5 .kb-key-top,
|
||||
.wrapped-theme-dos .kb-level-6 .kb-key-top {
|
||||
box-shadow: 0 0 10px rgba(51, 255, 51, 0.6) !important;
|
||||
}
|
||||
.wrapped-theme-dos .kb-level-7 .kb-key-top,
|
||||
.wrapped-theme-dos .kb-level-8 .kb-key-top {
|
||||
box-shadow: 0 0 12px rgba(51, 255, 51, 0.7) !important;
|
||||
border-color: #44ff44 !important;
|
||||
}
|
||||
.wrapped-theme-dos .kb-level-9 .kb-key-top {
|
||||
box-shadow: 0 0 15px rgba(51, 255, 51, 0.8) !important;
|
||||
border-color: #55ff55 !important;
|
||||
}
|
||||
.wrapped-theme-dos .kb-level-10 .kb-key-top {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.wrapped-theme-dos .kb-level-10::before {
|
||||
background: #000000 !important;
|
||||
border: 1px dashed #22aa22;
|
||||
}
|
||||
.wrapped-theme-dos .kb-level-10::after {
|
||||
content: 'X';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: none;
|
||||
color: #ff3333;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 0 5px #ff3333;
|
||||
}
|
||||
|
||||
/* ========== Win98 主题 - 键盘外观 ========== */
|
||||
.wrapped-theme-win98 .keyboard-outer {
|
||||
border-radius: 0;
|
||||
background: #c0c0c0;
|
||||
border: 1px solid #808080;
|
||||
padding: 4px;
|
||||
box-shadow:
|
||||
inset 1px 1px 0 #ffffff,
|
||||
inset -1px -1px 0 #000000;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .keyboard-inner {
|
||||
border-radius: 0;
|
||||
background: #dfdfdf;
|
||||
border: 1px solid #808080;
|
||||
padding: 6px;
|
||||
box-shadow:
|
||||
inset 1px 1px 0 #ffffff,
|
||||
inset -1px -1px 0 #000000;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .keyboard-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .dot {
|
||||
border-radius: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .dot-red { background: #800000; }
|
||||
.wrapped-theme-win98 .dot-yellow { background: #808000; }
|
||||
.wrapped-theme-win98 .dot-green { background: #008000; }
|
||||
|
||||
.wrapped-theme-win98 .keyboard-stats,
|
||||
.wrapped-theme-win98 .keyboard-hint {
|
||||
font-family: inherit;
|
||||
color: rgba(0, 0, 0, 0.72);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .keyboard-body {
|
||||
border-radius: 0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #808080;
|
||||
box-shadow:
|
||||
inset 1px 1px 0 #000000,
|
||||
inset -1px -1px 0 #ffffff;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .kb-key::before {
|
||||
border-radius: 0;
|
||||
background: #808080;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .kb-key-top {
|
||||
border-radius: 0;
|
||||
border: 1px solid #808080 !important;
|
||||
background: #c0c0c0 !important;
|
||||
box-shadow:
|
||||
inset 1px 1px 0 #ffffff,
|
||||
inset -1px -1px 0 #000000 !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .kb-label,
|
||||
.wrapped-theme-win98 .kb-sub {
|
||||
font-family: inherit;
|
||||
color: #000000 !important;
|
||||
text-shadow: none !important;
|
||||
filter: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .kb-space-bar {
|
||||
border-radius: 0;
|
||||
background: #000080;
|
||||
box-shadow: none;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .keyboard-brand {
|
||||
font-family: inherit;
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* DOS 聊天气泡主题适配 */
|
||||
.wrapped-theme-dos .bubble-left,
|
||||
.wrapped-theme-dos .bubble-right {
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #33ff33;
|
||||
box-shadow: 0 0 5px rgba(51, 255, 51, 0.2);
|
||||
}
|
||||
.wrapped-theme-dos .bubble-left::before {
|
||||
border-right-color: #0a0a0a;
|
||||
filter: drop-shadow(-1px 0 0 #33ff33);
|
||||
}
|
||||
.wrapped-theme-dos .bubble-right {
|
||||
background: #0a0a0a;
|
||||
border-color: #33ff33;
|
||||
}
|
||||
.wrapped-theme-dos .bubble-right::after {
|
||||
border-left-color: #0a0a0a;
|
||||
filter: drop-shadow(1px 0 0 #33ff33);
|
||||
}
|
||||
.wrapped-theme-dos .avatar-box {
|
||||
background: #0a0a0a;
|
||||
border-color: #33ff33;
|
||||
}
|
||||
.wrapped-theme-dos .avatar-box svg {
|
||||
stroke: #33ff33;
|
||||
}
|
||||
|
||||
/* ========== Game Boy 主题 - 聊天气泡适配 ========== */
|
||||
|
||||
/* 聊天区域背景 */
|
||||
.wrapped-theme-gameboy .rounded-2xl.border.bg-\[\#F5F5F5\] {
|
||||
background: #9bbc0f !important;
|
||||
border: 4px solid #306230 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow:
|
||||
inset -2px -2px 0 0 #306230,
|
||||
inset 2px 2px 0 0 #c5d870;
|
||||
}
|
||||
|
||||
/* 气泡 - 左侧 */
|
||||
.wrapped-theme-gameboy .bubble-left {
|
||||
background: #8bac0f;
|
||||
border: 3px solid #306230;
|
||||
border-radius: 0;
|
||||
box-shadow:
|
||||
inset -2px -2px 0 0 #306230,
|
||||
inset 2px 2px 0 0 #9bbc0f;
|
||||
}
|
||||
.wrapped-theme-gameboy .bubble-left::before {
|
||||
border-right-color: #8bac0f;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* 气泡 - 右侧 */
|
||||
.wrapped-theme-gameboy .bubble-right {
|
||||
background: #9bbc0f;
|
||||
border: 3px solid #306230;
|
||||
border-radius: 0;
|
||||
box-shadow:
|
||||
inset -2px -2px 0 0 #306230,
|
||||
inset 2px 2px 0 0 #c5d870;
|
||||
}
|
||||
.wrapped-theme-gameboy .bubble-right::after {
|
||||
border-left-color: #9bbc0f;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
.wrapped-theme-gameboy .avatar-box {
|
||||
background: #9bbc0f;
|
||||
border: 2px solid #306230;
|
||||
border-radius: 0;
|
||||
}
|
||||
.wrapped-theme-gameboy .avatar-box svg {
|
||||
stroke: #0f380f;
|
||||
}
|
||||
|
||||
/* 文字样式 */
|
||||
.wrapped-theme-gameboy .bubble-left .wrapped-label,
|
||||
.wrapped-theme-gameboy .bubble-right .wrapped-label {
|
||||
color: #306230 !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-gameboy .bubble-left .wrapped-number,
|
||||
.wrapped-theme-gameboy .bubble-right .wrapped-number {
|
||||
color: #0f380f !important;
|
||||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.wrapped-theme-gameboy .bubble-left .wrapped-body,
|
||||
.wrapped-theme-gameboy .bubble-right .wrapped-body {
|
||||
color: #306230 !important;
|
||||
}
|
||||
|
||||
/* ========== Win98 主题 - 聊天气泡适配 ========== */
|
||||
|
||||
/* 聊天区域背景 */
|
||||
.wrapped-theme-win98 .rounded-2xl.border.bg-\[\#F5F5F5\] {
|
||||
background: #c0c0c0 !important;
|
||||
border: 1px solid #808080 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow:
|
||||
inset 1px 1px 0 #ffffff,
|
||||
inset -1px -1px 0 #000000;
|
||||
}
|
||||
|
||||
/* 气泡 - 左侧 */
|
||||
.wrapped-theme-win98 .bubble-left {
|
||||
background: #ffffff;
|
||||
border: 1px solid #808080;
|
||||
border-radius: 0;
|
||||
box-shadow:
|
||||
inset 1px 1px 0 #ffffff,
|
||||
inset -1px -1px 0 #000000;
|
||||
}
|
||||
.wrapped-theme-win98 .bubble-left::before {
|
||||
border-right-color: #ffffff;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* 气泡 - 右侧 */
|
||||
.wrapped-theme-win98 .bubble-right {
|
||||
background: #dfdfdf;
|
||||
border: 1px solid #808080;
|
||||
border-radius: 0;
|
||||
box-shadow:
|
||||
inset 1px 1px 0 #ffffff,
|
||||
inset -1px -1px 0 #000000;
|
||||
}
|
||||
.wrapped-theme-win98 .bubble-right::after {
|
||||
border-left-color: #dfdfdf;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* 头像 */
|
||||
.wrapped-theme-win98 .avatar-box {
|
||||
background: #c0c0c0;
|
||||
border-color: #808080;
|
||||
border-radius: 0;
|
||||
box-shadow:
|
||||
inset 1px 1px 0 #ffffff,
|
||||
inset -1px -1px 0 #000000;
|
||||
}
|
||||
.wrapped-theme-win98 .avatar-box svg {
|
||||
stroke: #000080;
|
||||
}
|
||||
|
||||
/* 文字样式（气泡内需要更“黑白”） */
|
||||
.wrapped-theme-win98 .bubble-left .wrapped-label,
|
||||
.wrapped-theme-win98 .bubble-right .wrapped-label {
|
||||
color: rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .bubble-left .wrapped-number,
|
||||
.wrapped-theme-win98 .bubble-right .wrapped-number {
|
||||
color: #000080 !important;
|
||||
}
|
||||
|
||||
.wrapped-theme-win98 .bubble-left .wrapped-body,
|
||||
.wrapped-theme-win98 .bubble-right .wrapped-body {
|
||||
color: rgba(0, 0, 0, 0.85) !important;
|
||||
}
|
||||
|
||||
/* ========== DOS 主题 - 聊天气泡文字适配 ========== */
|
||||
|
||||
.wrapped-theme-dos .bubble-left .wrapped-label,
|
||||
.wrapped-theme-dos .bubble-right .wrapped-label {
|
||||
color: #22aa22 !important;
|
||||
text-shadow: 0 0 3px #22aa22;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .bubble-left .wrapped-number,
|
||||
.wrapped-theme-dos .bubble-right .wrapped-number {
|
||||
color: #33ff33 !important;
|
||||
text-shadow: 0 0 5px #33ff33;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.wrapped-theme-dos .bubble-left .wrapped-body,
|
||||
.wrapped-theme-dos .bubble-right .wrapped-body {
|
||||
color: #33ff33 !important;
|
||||
text-shadow: 0 0 3px #33ff33;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user