mirror of
https://github.com/Moe-Sakura/frontend.git
synced 2026-04-01 07:59:44 +08:00
47288cfdaa
* 更新 `index.html` 中的进度条样式，增加渐变色和动画效果，提升用户体验。 * 在 `tailwind.config.js` 中添加艳粉主题配色和自定义样式，增强主题一致性。 * 引入液态玻璃效果于多个组件，提升视觉层次感。 * 优化 `SearchHeader.vue` 和 `VndbPanel.vue` 中的标题和按钮样式，确保在不同主题下的可读性。 * 更新 `SettingsModal.vue` 和 `TopToolbar.vue` 的样式，增强用户交互体验。
53 lines
1.2 KiB
CSS
53 lines
1.2 KiB
CSS
/**
|
|
* 全局基础样式
|
|
* 使用 Tailwind CSS @layer base 指令，避免在 index.html 中使用全局样式
|
|
*/
|
|
|
|
@layer base {
|
|
/* body 基础样式 */
|
|
body {
|
|
/* 字体栈 - 优先使用系统字体，支持中文 */
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
"Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB",
|
|
"Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei",
|
|
"Roboto", Helvetica, Arial, sans-serif;
|
|
|
|
/* 行高 */
|
|
line-height: 1.6;
|
|
|
|
/* 最小高度 */
|
|
min-height: 100vh;
|
|
|
|
/* 换行 */
|
|
overflow-wrap: break-word;
|
|
|
|
/* 边距 */
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
/* 透明背景 - 不遮挡背景图 */
|
|
background: transparent;
|
|
|
|
/* 文字颜色 - 白天模式 */
|
|
color: rgb(29, 27, 30);
|
|
|
|
/* 平滑滚动 */
|
|
scroll-behavior: smooth;
|
|
|
|
/* 过渡动画 */
|
|
transition: background 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* 暗色模式 - 透明背景 */
|
|
.dark body {
|
|
background: transparent;
|
|
color: rgb(226, 232, 240);
|
|
}
|
|
|
|
/* 图片懒加载过渡动画 */
|
|
img[loading="lazy"] {
|
|
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|