mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-19 14:20:51 +08:00
feat(wrapped-ui): 新增 Win98 主题与桌面化外观
- 主题系统新增 win98（显示名 Windows 98，快捷键扩展到 F1-F4），并区分 retro(pixel/CRT) 与桌面 GUI 主题 - 年度总结页新增 Win98 桌面背景与底部任务栏（背景色/视口高度适配） - 封面与卡片 slide 形态支持 Win98 窗口外观（title bar/icon/controls） - 主题切换器补充 Win98 选项并新增 Win98 专属切换器 - 新增 Win98 图标资源（Start + 桌面图标）
This commit is contained in:
2977094657
@@ -1287,3 +1287,208 @@
|
||||
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