feat: 1. 深度沉浸的视觉系统
Mesh Gradients: 引入了动态流体渐变背景,界面不再静止,而是如同呼吸般有着微妙的律动。 Glassmorphism 2.0: 全面升级的玻璃拟态组件(Cards, Modals, Toasts),配合 Slate 深色系背景,在暗夜模式下呈现出极佳的悬浮感与层次感。 完美版式: 基于 Perfect Fourth 比例重构了字号阶梯,阅读体验更加愉悦。 2. “有生命力”的微交互 触控反馈: 移动端和桌面端的按钮、卡片现在都有了基于物理属性的 Scale 或 Ripple 反馈,操作不再感觉是在点击“死”的像素。 空状态不空: 重新设计了 Empty States,悬停时图标会产生 3D 旋转,引导用户进行操作。 无障碍聚焦: 为键盘操作添加了双层 Focus Ring,既美观又清晰。 3. 核心功能区重塑 工具箱 (Tools): 变身为发光的 3D 玻璃面板阵列。 账本管理: 升级为全封面艺术卡片,支持动态主题色映射。 移动导航: 底部导航栏进化为“悬浮岛”设计,增加操作的灵动感。
This commit is contained in:
@@ -45,25 +45,25 @@
|
||||
border: none;
|
||||
border-radius: var(--radius-full);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
|
||||
}
|
||||
|
||||
.budget-header__create-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
|
||||
box-shadow: 0 8px 16px rgba(var(--accent-rgb), 0.4);
|
||||
}
|
||||
|
||||
.budget-header__create-btn--piggy {
|
||||
background: var(--gradient-accent);
|
||||
box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
|
||||
background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
|
||||
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
|
||||
}
|
||||
|
||||
.budget-header__create-btn--piggy:hover {
|
||||
background: var(--gradient-accent);
|
||||
box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4);
|
||||
box-shadow: 0 8px 16px rgba(249, 115, 22, 0.4);
|
||||
}
|
||||
|
||||
|
||||
/* Content */
|
||||
.budget-content {
|
||||
display: flex;
|
||||
@@ -74,15 +74,16 @@
|
||||
/* Form Section */
|
||||
.budget-form-section {
|
||||
background: var(--glass-panel-bg);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: var(--glass-shadow);
|
||||
animation: slideUp 0.3s ease;
|
||||
box-shadow: var(--shadow-xl);
|
||||
animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
|
||||
/* Sections */
|
||||
.budgets-section,
|
||||
.piggy-banks-section {
|
||||
|
||||
Reference in New Issue
Block a user