mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-19 14:20:51 +08:00
980f15d0a4
- 主题系统新增 win98（显示名 Windows 98，快捷键扩展到 F1-F4），并区分 retro(pixel/CRT) 与桌面 GUI 主题 - 年度总结页新增 Win98 桌面背景与底部任务栏（背景色/视口高度适配） - 封面与卡片 slide 形态支持 Win98 窗口外观（title bar/icon/controls） - 主题切换器补充 Win98 选项并新增 Win98 专属切换器 - 新增 Win98 图标资源（Start + 桌面图标）
1495 lines
38 KiB
CSS
1495 lines
38 KiB
CSS
@tailwind base;
|
||
@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 {
|
||
/* 微信品牌色 */
|
||
--wechat-green: #07c160;
|
||
--wechat-green-hover: #06ad56;
|
||
--wechat-green-light: #e6f7f0;
|
||
--wechat-green-dark: #059341;
|
||
|
||
/* 主色调 */
|
||
--primary-color: #07c160;
|
||
--primary-hover: #06ad56;
|
||
--secondary-color: #4c9e5f;
|
||
|
||
/* 危险色 */
|
||
--danger-color: #fa5151;
|
||
--danger-hover: #e94848;
|
||
|
||
/* 警告色 */
|
||
--warning-color: #ffc300;
|
||
--warning-hover: #e6ad00;
|
||
|
||
/* 背景色 */
|
||
--bg-primary: #f7f8fa;
|
||
--bg-secondary: #ffffff;
|
||
--bg-gray: #ededed;
|
||
--bg-dark: #191919;
|
||
|
||
/* 文字颜色 */
|
||
--text-primary: #191919;
|
||
--text-secondary: #576b95;
|
||
--text-light: #888888;
|
||
--text-white: #ffffff;
|
||
|
||
/* 边框颜色 */
|
||
--border-color: #e7e7e7;
|
||
--border-light: #f4f4f4;
|
||
|
||
/* 统一消息圆角（聊天所有消息共用） */
|
||
--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 {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
background-color: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
}
|
||
|
||
/* 微信风格组件样式 */
|
||
@layer components {
|
||
/* 聊天气泡尾巴（左右），与高度 42px 居中对齐 */
|
||
.bubble-tail-l, .bubble-tail-r { position: relative; }
|
||
.bubble-tail-l::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: -4px;
|
||
top: 12px; /* 36px 中线 18px，减去 6px ≈ 12px */
|
||
width: 12px; height: 12px;
|
||
background: #FFFFFF;
|
||
transform: rotate(45deg);
|
||
border-radius: 2px;
|
||
}
|
||
.bubble-tail-r::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -4px;
|
||
top: 12px;
|
||
width: 12px; height: 12px;
|
||
background: #95EC69;
|
||
transform: rotate(45deg);
|
||
border-radius: 2px;
|
||
}
|
||
/* 统一的消息圆角工具类 */
|
||
.msg-radius { border-radius: var(--message-radius); }
|
||
.msg-bubble { @apply leading-normal break-words text-pretty; border-radius: var(--message-radius); }
|
||
|
||
/* 隐私模式（通用）：默认模糊，悬停显示 */
|
||
.privacy-blur {
|
||
filter: blur(9px);
|
||
transition: filter 0.2s ease;
|
||
}
|
||
|
||
.privacy-blur:hover {
|
||
filter: none;
|
||
}
|
||
/* 按钮样式 */
|
||
.btn {
|
||
@apply px-6 py-3 rounded-full font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 transform active:scale-95;
|
||
}
|
||
|
||
.btn-primary {
|
||
@apply bg-[#07c160] text-white hover:bg-[#06ad56] focus:ring-[#07c160] shadow-md hover:shadow-lg;
|
||
}
|
||
|
||
.btn-secondary {
|
||
@apply bg-white text-[#07c160] border-2 border-[#07c160] hover:bg-[#e6f7f0] focus:ring-[#07c160];
|
||
}
|
||
|
||
.btn-danger {
|
||
@apply bg-[#fa5151] text-white hover:bg-[#e94848] focus:ring-[#fa5151] shadow-md hover:shadow-lg;
|
||
}
|
||
|
||
.btn-ghost {
|
||
@apply bg-transparent text-[#576b95] hover:bg-gray-100 focus:ring-gray-300;
|
||
}
|
||
|
||
/* 卡片样式 */
|
||
.card {
|
||
@apply bg-white rounded-2xl shadow-sm border border-[#f4f4f4] p-6 hover:shadow-md transition-shadow duration-300;
|
||
}
|
||
|
||
.card-hover {
|
||
@apply hover:transform hover:scale-[1.02] transition-all duration-300;
|
||
}
|
||
|
||
/* Wrapped (年度总结) 背景纹理 */
|
||
.wrapped-noise {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIj4KICA8ZmlsdGVyIGlkPSJuIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjgiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjQ1Ii8+Cjwvc3ZnPg==");
|
||
background-repeat: repeat;
|
||
background-size: 320px 320px;
|
||
mix-blend-mode: multiply;
|
||
}
|
||
|
||
/* Wrapped 增强噪点纹理（动态抖动） */
|
||
.wrapped-noise-enhanced {
|
||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj4KICA8ZmlsdGVyIGlkPSJuIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjkiIG51bU9jdGF2ZXM9IjUiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIwLjUiLz4KPC9zdmc+");
|
||
background-repeat: repeat;
|
||
background-size: 200px 200px;
|
||
mix-blend-mode: multiply;
|
||
animation: noise-jitter 0.5s steps(3) infinite;
|
||
}
|
||
|
||
/* Wrapped 像素字体类 */
|
||
/* Wrapped typography: default is modern; `.wrapped-retro` enables pixel font + CRT vibe. */
|
||
.wrapped-title {
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.wrapped-title-en {
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.wrapped-body {
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.wrapped-label {
|
||
font-weight: 600;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.wrapped-number {
|
||
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;
|
||
}
|
||
|
||
.input-error {
|
||
@apply border-[#fa5151] focus:ring-[#fa5151] focus:border-[#fa5151];
|
||
}
|
||
|
||
/* 标签样式 */
|
||
.tag {
|
||
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
|
||
}
|
||
|
||
.tag-green {
|
||
@apply bg-[#e6f7f0] text-[#07c160];
|
||
}
|
||
|
||
.tag-blue {
|
||
@apply bg-blue-100 text-blue-700;
|
||
}
|
||
|
||
.tag-red {
|
||
@apply bg-red-100 text-red-700;
|
||
}
|
||
|
||
/* 加载动画 */
|
||
.loading-spinner {
|
||
@apply inline-block w-8 h-8 border-4 border-[#e7e7e7] border-t-[#07c160] rounded-full animate-spin;
|
||
}
|
||
|
||
.loading-dots {
|
||
@apply inline-flex items-center space-x-1;
|
||
}
|
||
|
||
.loading-dots span {
|
||
@apply w-2 h-2 bg-[#07c160] rounded-full animate-bounce;
|
||
}
|
||
|
||
/* 微信风格的列表项 */
|
||
.list-item {
|
||
@apply flex items-center justify-between py-4 px-4 hover:bg-[#f7f8fa] transition-colors duration-200 cursor-pointer;
|
||
}
|
||
|
||
/* 分割线 */
|
||
.divider {
|
||
@apply border-t border-[#f4f4f4] my-4;
|
||
}
|
||
|
||
/* 提示框 */
|
||
.alert {
|
||
@apply p-4 rounded-xl border;
|
||
}
|
||
|
||
.alert-success {
|
||
@apply bg-[#e6f7f0] border-[#07c160] text-[#059341];
|
||
}
|
||
|
||
.alert-warning {
|
||
@apply bg-yellow-50 border-[#ffc300] text-yellow-800;
|
||
}
|
||
|
||
.alert-error {
|
||
@apply bg-red-50 border-[#fa5151] text-red-800;
|
||
}
|
||
|
||
/* 动画效果 */
|
||
.fade-enter {
|
||
@apply opacity-0 transform scale-95;
|
||
}
|
||
|
||
.fade-enter-active {
|
||
@apply transition-all duration-300 ease-out;
|
||
}
|
||
|
||
.fade-enter-to {
|
||
@apply opacity-100 transform scale-100;
|
||
}
|
||
|
||
/* 现代化搜索面板样式 */
|
||
.search-panel-container {
|
||
@apply border-b border-gray-200;
|
||
background: linear-gradient(to bottom, #f8f9fa, #f0f1f2);
|
||
}
|
||
|
||
.search-panel {
|
||
@apply px-5 py-4;
|
||
}
|
||
|
||
/* 搜索输入行 */
|
||
.search-input-row {
|
||
@apply flex items-center gap-3;
|
||
}
|
||
|
||
.search-input-wrapper {
|
||
@apply flex-1 flex items-center bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-200;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.search-input-wrapper:hover {
|
||
@apply border-gray-300;
|
||
}
|
||
|
||
.search-input-focused {
|
||
@apply border-[#03C160] ring-2 ring-[#03C160]/20;
|
||
}
|
||
|
||
.search-input-icon {
|
||
@apply w-4 h-4 text-gray-400 ml-3 flex-shrink-0;
|
||
}
|
||
|
||
.search-input {
|
||
@apply flex-1 px-3 py-2.5 text-sm bg-transparent border-none outline-none;
|
||
}
|
||
|
||
.search-input::placeholder {
|
||
@apply text-gray-400;
|
||
}
|
||
|
||
.search-clear-btn {
|
||
@apply p-2 text-gray-400 hover:text-gray-600 transition-colors;
|
||
}
|
||
|
||
.search-btn-primary {
|
||
@apply px-4 py-2.5 text-sm font-medium text-white bg-[#03C160] rounded-lg hover:bg-[#02a650] transition-all duration-200 flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed;
|
||
box-shadow: 0 2px 4px rgba(3, 193, 96, 0.2);
|
||
}
|
||
|
||
.search-btn-primary:hover:not(:disabled) {
|
||
box-shadow: 0 4px 8px rgba(3, 193, 96, 0.3);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.search-btn-close {
|
||
@apply p-2.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors;
|
||
}
|
||
|
||
/* 搜索控制行 */
|
||
.search-controls-row {
|
||
@apply flex items-center gap-3 mt-3 flex-wrap;
|
||
}
|
||
|
||
/* 搜索范围切换器 */
|
||
.search-scope-switcher {
|
||
@apply flex items-center bg-gray-100 rounded-lg p-0.5;
|
||
}
|
||
|
||
.scope-btn {
|
||
@apply flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 rounded-md transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
|
||
}
|
||
|
||
.scope-btn:hover:not(:disabled) {
|
||
@apply text-gray-800;
|
||
}
|
||
|
||
.scope-btn-active {
|
||
@apply bg-white text-[#03C160] shadow-sm;
|
||
}
|
||
|
||
/* 快捷过滤标签 */
|
||
.quick-filter-tags {
|
||
@apply flex items-center gap-1.5 flex-wrap;
|
||
}
|
||
|
||
.filter-tag {
|
||
@apply flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-full transition-all duration-200 hover:border-gray-300 hover:bg-gray-50;
|
||
}
|
||
|
||
.filter-tag-icon {
|
||
@apply text-sm;
|
||
}
|
||
|
||
.filter-tag-active {
|
||
@apply bg-[#03C160]/10 border-[#03C160] text-[#03C160];
|
||
}
|
||
|
||
.filter-tag-active:hover {
|
||
@apply bg-[#03C160]/15 border-[#03C160];
|
||
}
|
||
|
||
/* 高级过滤器切换 */
|
||
.advanced-filter-toggle {
|
||
@apply flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-lg transition-all duration-200 hover:border-gray-300 hover:bg-gray-50 ml-auto;
|
||
}
|
||
|
||
.advanced-filter-toggle-active {
|
||
@apply bg-gray-100 border-gray-300;
|
||
}
|
||
|
||
/* 高级过滤器面板 */
|
||
.advanced-filters-panel {
|
||
@apply overflow-hidden transition-all duration-300 ease-in-out;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
.advanced-filters-expanded {
|
||
max-height: 200px;
|
||
opacity: 1;
|
||
@apply mt-3;
|
||
}
|
||
|
||
.advanced-filters-content {
|
||
@apply flex items-center gap-4 p-3 bg-white rounded-lg border border-gray-200 flex-wrap;
|
||
}
|
||
|
||
.filter-group {
|
||
@apply flex items-center gap-2;
|
||
}
|
||
|
||
.filter-label {
|
||
@apply text-xs font-medium text-gray-600;
|
||
}
|
||
|
||
.filter-select {
|
||
@apply text-xs px-3 py-1.5 rounded-md border border-gray-200 bg-white focus:outline-none focus:ring-2 focus:ring-[#03C160]/20 focus:border-[#03C160] transition-all;
|
||
}
|
||
|
||
.filter-checkbox {
|
||
@apply flex items-center gap-2 text-xs cursor-pointer;
|
||
}
|
||
|
||
.filter-checkbox-input {
|
||
@apply w-4 h-4 text-[#03C160] border-gray-300 rounded focus:ring-[#03C160]/20;
|
||
}
|
||
|
||
.filter-checkbox-label {
|
||
@apply font-medium text-gray-700;
|
||
}
|
||
|
||
.filter-checkbox-hint {
|
||
@apply text-gray-400;
|
||
}
|
||
|
||
/* 搜索历史面板 */
|
||
.search-history-panel {
|
||
@apply mt-3 p-3 bg-white rounded-lg border border-gray-200;
|
||
}
|
||
|
||
.search-history-header {
|
||
@apply flex items-center justify-between mb-2;
|
||
}
|
||
|
||
.search-history-title {
|
||
@apply text-xs font-medium text-gray-600;
|
||
}
|
||
|
||
.search-history-clear {
|
||
@apply text-xs text-gray-400 hover:text-gray-600 transition-colors;
|
||
}
|
||
|
||
.search-history-list {
|
||
@apply flex flex-wrap gap-2;
|
||
}
|
||
|
||
.search-history-item {
|
||
@apply flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-gray-600 bg-gray-50 rounded-full hover:bg-gray-100 transition-colors;
|
||
}
|
||
|
||
/* 搜索状态栏 */
|
||
.search-status-bar {
|
||
@apply mt-3 text-xs;
|
||
}
|
||
|
||
.search-status-error {
|
||
@apply flex items-center gap-2 text-red-600 bg-red-50 px-3 py-2 rounded-lg;
|
||
}
|
||
|
||
.search-status-info {
|
||
@apply text-gray-600;
|
||
}
|
||
|
||
.search-status-count {
|
||
@apply text-gray-800;
|
||
}
|
||
|
||
.search-status-count strong {
|
||
@apply text-[#03C160] font-semibold;
|
||
}
|
||
|
||
.search-status-detail {
|
||
@apply text-gray-500;
|
||
}
|
||
|
||
.search-status-hint {
|
||
@apply flex items-center gap-2 text-gray-400;
|
||
}
|
||
|
||
/* 搜索结果容器 */
|
||
.search-results-container {
|
||
@apply bg-white border-b border-gray-200;
|
||
max-height: 320px;
|
||
}
|
||
|
||
.search-results-list {
|
||
@apply overflow-y-auto;
|
||
max-height: 260px;
|
||
}
|
||
|
||
/* 搜索结果卡片 */
|
||
.search-result-card {
|
||
@apply px-5 py-3 border-b border-gray-100 cursor-pointer transition-all duration-150;
|
||
border-left: 3px solid transparent;
|
||
}
|
||
|
||
.search-result-card:hover {
|
||
@apply bg-gray-50;
|
||
border-left-color: #e5e7eb;
|
||
}
|
||
|
||
.search-result-card-selected {
|
||
@apply bg-[#03C160]/5;
|
||
border-left-color: #03C160;
|
||
}
|
||
|
||
.search-result-card-selected:hover {
|
||
@apply bg-[#03C160]/10;
|
||
border-left-color: #03C160;
|
||
}
|
||
|
||
.search-result-meta {
|
||
@apply flex items-center gap-2 text-[11px] text-gray-500 mb-1;
|
||
}
|
||
|
||
.search-result-contact {
|
||
@apply font-medium text-gray-700;
|
||
}
|
||
|
||
.search-result-contact::after {
|
||
content: '·';
|
||
@apply ml-2;
|
||
}
|
||
|
||
.search-result-time {
|
||
@apply text-gray-400;
|
||
}
|
||
|
||
.search-result-sender {
|
||
@apply text-gray-500;
|
||
}
|
||
|
||
.search-result-sender::before {
|
||
content: '·';
|
||
@apply mr-2;
|
||
}
|
||
|
||
.search-result-content {
|
||
@apply text-sm text-gray-800 truncate leading-relaxed;
|
||
}
|
||
|
||
/* 搜索高亮 */
|
||
.search-highlight {
|
||
@apply bg-[#03C160]/20 text-[#03C160] px-0.5 rounded font-medium;
|
||
}
|
||
|
||
/* 搜索结果底部 */
|
||
.search-results-footer {
|
||
@apply px-5 py-3 flex items-center justify-between border-t border-gray-100 bg-gray-50/50;
|
||
}
|
||
|
||
.search-load-more-btn {
|
||
@apply flex items-center gap-2 text-xs px-3 py-1.5 rounded-md border border-gray-200 bg-white hover:bg-gray-50 text-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
|
||
}
|
||
|
||
.search-results-hint {
|
||
@apply text-xs text-gray-400;
|
||
}
|
||
|
||
.search-results-hint kbd {
|
||
@apply px-1.5 py-0.5 bg-gray-100 border border-gray-200 rounded text-[10px] font-mono;
|
||
}
|
||
|
||
/* 空状态 */
|
||
.search-empty-state {
|
||
@apply py-8 px-5 text-center bg-white border-b border-gray-200;
|
||
}
|
||
|
||
.search-empty-icon {
|
||
@apply w-16 h-16 mx-auto text-gray-300 mb-4;
|
||
}
|
||
|
||
.search-empty-title {
|
||
@apply text-base font-medium text-gray-600 mb-3;
|
||
}
|
||
|
||
.search-empty-tips {
|
||
@apply text-sm text-gray-500 text-left max-w-xs mx-auto;
|
||
}
|
||
|
||
.search-empty-tips p {
|
||
@apply mb-2;
|
||
}
|
||
|
||
.search-empty-tips ul {
|
||
@apply list-disc list-inside space-y-1 text-gray-400;
|
||
}
|
||
|
||
/* 联系人搜索栏样式 */
|
||
.contact-search-wrapper {
|
||
@apply flex items-center bg-[#EAEAEA] rounded-lg overflow-hidden transition-all duration-200;
|
||
}
|
||
|
||
.contact-search-wrapper:focus-within {
|
||
@apply ring-2 ring-[#03C160]/20 bg-white;
|
||
}
|
||
|
||
.contact-search-icon {
|
||
@apply w-4 h-4 text-gray-400 ml-2.5 flex-shrink-0;
|
||
}
|
||
|
||
.contact-search-input {
|
||
@apply flex-1 px-2 py-2 text-sm bg-transparent border-none outline-none;
|
||
}
|
||
|
||
.contact-search-input::placeholder {
|
||
@apply text-gray-400;
|
||
}
|
||
|
||
.contact-search-clear {
|
||
@apply p-2 text-gray-400 hover:text-gray-600 transition-colors;
|
||
}
|
||
|
||
.account-select {
|
||
@apply text-xs px-2 py-2 rounded-lg border border-gray-200 bg-[#EAEAEA] focus:outline-none focus:ring-2 focus:ring-[#03C160]/20 focus:border-[#03C160] transition-all;
|
||
}
|
||
|
||
/* 骨架屏动画 */
|
||
.skeleton-pulse {
|
||
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes skeleton-pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
/* 聊天头部样式 */
|
||
.chat-header {
|
||
@apply h-14 px-5 flex items-center border-b border-gray-200;
|
||
background-color: #EDEDED;
|
||
}
|
||
|
||
.header-btn {
|
||
@apply flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg bg-white border border-gray-200 text-gray-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
|
||
}
|
||
|
||
.header-btn:hover:not(:disabled) {
|
||
@apply bg-gray-50 border-gray-300;
|
||
}
|
||
|
||
.header-btn:active:not(:disabled) {
|
||
@apply bg-gray-100;
|
||
}
|
||
|
||
.header-btn-icon {
|
||
@apply w-8 h-8 flex items-center justify-center rounded-lg bg-white border border-gray-200 text-gray-600 transition-all duration-200;
|
||
}
|
||
|
||
.header-btn-icon:hover {
|
||
@apply bg-gray-50 border-gray-300 text-gray-800;
|
||
}
|
||
|
||
.header-btn-icon-active {
|
||
@apply bg-[#03C160]/10 border-[#03C160] text-[#03C160];
|
||
}
|
||
|
||
.header-btn-icon-active:hover {
|
||
@apply bg-[#03C160]/15;
|
||
}
|
||
|
||
.message-filter-select {
|
||
@apply text-xs px-2 py-1.5 rounded-lg bg-white border border-gray-200 text-gray-700 focus:outline-none focus:ring-2 focus:ring-[#03C160]/20 focus:border-[#03C160] transition-all disabled:opacity-50 disabled:cursor-not-allowed;
|
||
}
|
||
|
||
/* 搜索侧边栏样式 */
|
||
.search-sidebar {
|
||
@apply w-[420px] h-full flex flex-col bg-white border-l border-gray-200 flex-shrink-0;
|
||
}
|
||
|
||
.search-sidebar-header {
|
||
@apply flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50;
|
||
}
|
||
|
||
.search-sidebar-title {
|
||
@apply flex items-center gap-2 text-sm font-medium text-gray-800;
|
||
}
|
||
|
||
.search-sidebar-close {
|
||
@apply p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded-md transition-colors;
|
||
}
|
||
|
||
.search-sidebar-input-section {
|
||
@apply px-3 py-3 border-b border-gray-100;
|
||
}
|
||
|
||
/* 整合搜索框样式 */
|
||
.search-input-combined {
|
||
@apply flex items-center bg-white border-2 border-gray-200 rounded-lg overflow-hidden transition-all duration-200;
|
||
}
|
||
|
||
.search-input-combined:hover {
|
||
@apply border-gray-300;
|
||
}
|
||
|
||
.search-input-combined-focused {
|
||
@apply border-[#03C160] ring-2 ring-[#03C160]/20;
|
||
}
|
||
|
||
.search-scope-inline {
|
||
@apply flex items-center px-2 border-r border-gray-200 bg-gray-50;
|
||
}
|
||
|
||
.scope-inline-btn {
|
||
@apply text-[11px] font-medium text-gray-400 hover:text-gray-600 transition-colors px-1 py-2.5 disabled:opacity-40 disabled:cursor-not-allowed;
|
||
}
|
||
|
||
.scope-inline-btn-active {
|
||
@apply text-[#03C160] font-semibold;
|
||
}
|
||
|
||
.scope-inline-divider {
|
||
@apply text-gray-300 text-[10px];
|
||
}
|
||
|
||
.search-input-inline {
|
||
@apply flex-1 min-w-0 px-3 py-2.5 text-sm bg-transparent border-none outline-none;
|
||
}
|
||
|
||
.search-input-inline::placeholder {
|
||
@apply text-gray-400;
|
||
}
|
||
|
||
.search-clear-inline {
|
||
@apply p-2 text-gray-400 hover:text-gray-600 transition-colors;
|
||
}
|
||
|
||
.search-btn-inline {
|
||
@apply flex items-center justify-center w-10 h-10 bg-[#03C160] text-white hover:bg-[#02a650] transition-colors disabled:opacity-60 disabled:cursor-not-allowed flex-shrink-0;
|
||
}
|
||
|
||
/* 筛选条件行 */
|
||
.search-filters-row {
|
||
@apply flex items-center gap-2 mt-2;
|
||
}
|
||
|
||
.search-session-type-row {
|
||
@apply flex items-center gap-1 mt-2;
|
||
}
|
||
|
||
.search-session-type-btn {
|
||
@apply flex-1 text-[11px] font-medium px-2 py-1.5 rounded-md border border-gray-200 bg-gray-50 text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors;
|
||
}
|
||
|
||
.search-session-type-btn-active {
|
||
@apply bg-[#03C160]/10 border-[#03C160] text-[#03C160] font-semibold;
|
||
}
|
||
|
||
.search-filter-select {
|
||
@apply flex-1 text-xs px-2 py-1.5 bg-gray-50 border border-gray-200 rounded-md outline-none cursor-pointer transition-all hover:border-gray-300 focus:border-[#03C160] focus:ring-1 focus:ring-[#03C160]/20;
|
||
}
|
||
|
||
.search-filter-select-time {
|
||
@apply flex-none w-28;
|
||
}
|
||
|
||
.search-filter-input {
|
||
@apply flex-1 text-xs px-2 py-1.5 bg-gray-50 border border-gray-200 rounded-md outline-none transition-all hover:border-gray-300 focus:border-[#03C160] focus:ring-1 focus:ring-[#03C160]/20;
|
||
}
|
||
|
||
.search-filter-input::placeholder {
|
||
@apply text-gray-400;
|
||
}
|
||
|
||
/* 自定义日期行 */
|
||
.search-custom-date-row {
|
||
@apply flex items-center gap-2 mt-2;
|
||
}
|
||
|
||
.search-date-input {
|
||
@apply flex-1 text-xs px-2 py-1.5 bg-gray-50 border border-gray-200 rounded-md outline-none transition-all hover:border-gray-300 focus:border-[#03C160] focus:ring-1 focus:ring-[#03C160]/20;
|
||
}
|
||
|
||
.search-date-separator {
|
||
@apply text-xs text-gray-400;
|
||
}
|
||
|
||
.search-sidebar-scope {
|
||
@apply px-4 py-3 border-b border-gray-100;
|
||
}
|
||
|
||
.search-sidebar-filters {
|
||
@apply px-4 py-3 border-b border-gray-100;
|
||
}
|
||
|
||
.quick-filter-tags-vertical {
|
||
@apply flex flex-wrap gap-1.5 mt-2;
|
||
}
|
||
|
||
.filter-tag-vertical {
|
||
@apply flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md transition-all duration-200 hover:border-gray-300 hover:bg-gray-100;
|
||
}
|
||
|
||
.search-sidebar-advanced {
|
||
@apply px-4 py-3 border-b border-gray-100;
|
||
}
|
||
|
||
.sidebar-section-toggle {
|
||
@apply flex items-center justify-between w-full text-left;
|
||
}
|
||
|
||
.sidebar-section-title {
|
||
@apply text-xs font-medium text-gray-500 uppercase tracking-wide;
|
||
}
|
||
|
||
.sidebar-advanced-content {
|
||
@apply overflow-hidden transition-all duration-300 ease-in-out;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
.sidebar-advanced-expanded {
|
||
max-height: 200px;
|
||
opacity: 1;
|
||
@apply mt-3;
|
||
}
|
||
|
||
.sidebar-filter-group {
|
||
@apply mb-3;
|
||
}
|
||
|
||
.sidebar-filter-label {
|
||
@apply block text-xs text-gray-600 mb-1;
|
||
}
|
||
|
||
.sidebar-filter-select {
|
||
@apply w-full text-xs px-2.5 py-1.5 rounded-md border border-gray-200 bg-white focus:outline-none focus:ring-2 focus:ring-[#03C160]/20 focus:border-[#03C160] transition-all;
|
||
}
|
||
|
||
.sidebar-checkbox {
|
||
@apply flex items-center gap-2 text-xs text-gray-600 cursor-pointer;
|
||
}
|
||
|
||
.sidebar-checkbox input {
|
||
@apply w-3.5 h-3.5 text-[#03C160] border-gray-300 rounded focus:ring-[#03C160]/20;
|
||
}
|
||
|
||
.search-sidebar-history {
|
||
@apply px-4 py-3 border-b border-gray-100;
|
||
}
|
||
|
||
.sidebar-section-header {
|
||
@apply flex items-center justify-between mb-2;
|
||
}
|
||
|
||
.sidebar-clear-btn {
|
||
@apply text-xs text-gray-400 hover:text-gray-600 transition-colors;
|
||
}
|
||
|
||
.sidebar-index-btn {
|
||
@apply px-2 py-1 text-[10px] font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:border-gray-300 transition-colors disabled:opacity-60 disabled:cursor-not-allowed whitespace-nowrap;
|
||
}
|
||
|
||
.sidebar-history-list {
|
||
@apply space-y-1;
|
||
}
|
||
|
||
.sidebar-history-item {
|
||
@apply flex items-center gap-2 w-full px-2 py-1.5 text-xs text-gray-600 rounded-md hover:bg-gray-50 transition-colors text-left;
|
||
}
|
||
|
||
.search-sidebar-status {
|
||
@apply px-4 py-2 text-xs border-b border-gray-100;
|
||
}
|
||
|
||
.sidebar-status-error {
|
||
@apply text-red-600;
|
||
}
|
||
|
||
.sidebar-status-info {
|
||
@apply text-gray-600;
|
||
}
|
||
|
||
.sidebar-status-info strong {
|
||
@apply text-[#03C160] font-semibold;
|
||
}
|
||
|
||
.sidebar-status-detail {
|
||
@apply text-gray-400;
|
||
}
|
||
|
||
.search-sidebar-results {
|
||
@apply flex-1 overflow-y-auto min-h-0;
|
||
}
|
||
|
||
.sidebar-results-list {
|
||
@apply divide-y divide-gray-100;
|
||
}
|
||
|
||
.sidebar-result-card {
|
||
@apply px-4 py-3 cursor-pointer transition-all duration-150 hover:bg-gray-50;
|
||
border-left: 3px solid transparent;
|
||
}
|
||
|
||
.sidebar-result-row {
|
||
@apply flex items-start gap-3;
|
||
}
|
||
|
||
.sidebar-result-avatar {
|
||
@apply w-9 h-9 rounded-md overflow-hidden bg-gray-300 flex-shrink-0;
|
||
}
|
||
|
||
.sidebar-result-avatar-fallback {
|
||
@apply w-full h-full flex items-center justify-center text-white text-[10px] font-bold bg-gray-600;
|
||
}
|
||
|
||
.sidebar-result-body {
|
||
@apply min-w-0 flex-1;
|
||
}
|
||
|
||
.sidebar-result-card-selected {
|
||
@apply bg-[#03C160]/5;
|
||
border-left-color: #03C160;
|
||
}
|
||
|
||
.sidebar-result-card-selected:hover {
|
||
@apply bg-[#03C160]/10;
|
||
}
|
||
|
||
.sidebar-result-header {
|
||
@apply flex items-center gap-2 text-[10px] text-gray-400 mb-0.5;
|
||
}
|
||
|
||
.sidebar-result-contact {
|
||
@apply font-medium text-gray-600;
|
||
}
|
||
|
||
.sidebar-result-time {
|
||
@apply text-gray-400;
|
||
}
|
||
|
||
.sidebar-result-sender {
|
||
@apply text-[11px] text-gray-500 mb-1;
|
||
}
|
||
|
||
.sidebar-result-content {
|
||
@apply text-xs text-gray-700 line-clamp-2 leading-relaxed;
|
||
}
|
||
|
||
.sidebar-load-more {
|
||
@apply px-4 py-3;
|
||
}
|
||
|
||
.sidebar-load-more-btn {
|
||
@apply w-full text-xs px-3 py-2 rounded-md border border-gray-200 bg-white hover:bg-gray-50 text-gray-600 transition-colors disabled:opacity-50;
|
||
}
|
||
|
||
.sidebar-empty-state {
|
||
@apply flex flex-col items-center justify-center py-12 px-4 text-center;
|
||
}
|
||
|
||
.sidebar-empty-icon {
|
||
@apply w-12 h-12 text-gray-300 mb-3;
|
||
}
|
||
|
||
.sidebar-empty-text {
|
||
@apply text-sm font-medium text-gray-500 mb-1;
|
||
}
|
||
|
||
.sidebar-empty-hint {
|
||
@apply text-xs text-gray-400;
|
||
}
|
||
|
||
.sidebar-initial-state {
|
||
@apply flex flex-col items-center justify-center py-12 px-4 text-center;
|
||
}
|
||
|
||
.sidebar-initial-icon {
|
||
@apply w-16 h-16 text-gray-200 mb-4;
|
||
}
|
||
|
||
.sidebar-initial-text {
|
||
@apply text-sm text-gray-500 mb-2;
|
||
}
|
||
|
||
.sidebar-initial-hint {
|
||
@apply text-xs text-gray-400;
|
||
}
|
||
|
||
.sidebar-initial-hint kbd {
|
||
@apply px-1.5 py-0.5 bg-gray-100 border border-gray-200 rounded text-[10px] font-mono;
|
||
}
|
||
|
||
/* 侧边栏滑入动画 */
|
||
.sidebar-slide-enter-active,
|
||
.sidebar-slide-leave-active {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.sidebar-slide-enter-from,
|
||
.sidebar-slide-leave-to {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
|
||
.sidebar-slide-enter-to,
|
||
.sidebar-slide-leave-from {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
}
|
||
|
||
@keyframes noise-jitter {
|
||
0% {
|
||
transform: translate(0, 0);
|
||
}
|
||
33% {
|
||
transform: translate(-1px, 1px);
|
||
}
|
||
66% {
|
||
transform: translate(1px, -1px);
|
||
}
|
||
100% {
|
||
transform: translate(0, 0);
|
||
}
|
||
}
|
||
|
||
/* Wrapped 入场动画 */
|
||
@keyframes wrapped-fade-in {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.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);
|
||
}
|