12975
94a28aa31a
Mesh Gradients: 引入了动态流体渐变背景，界面不再静止，而是如同呼吸般有着微妙的律动。 Glassmorphism 2.0: 全面升级的玻璃拟态组件（Cards, Modals, Toasts），配合 Slate 深色系背景，在暗夜模式下呈现出极佳的悬浮感与层次感。 完美版式: 基于 Perfect Fourth 比例重构了字号阶梯，阅读体验更加愉悦。 2. “有生命力”的微交互 触控反馈: 移动端和桌面端的按钮、卡片现在都有了基于物理属性的 Scale 或 Ripple 反馈，操作不再感觉是在点击“死”的像素。 空状态不空: 重新设计了 Empty States，悬停时图标会产生 3D 旋转，引导用户进行操作。 无障碍聚焦: 为键盘操作添加了双层 Focus Ring，既美观又清晰。 3. 核心功能区重塑 工具箱 (Tools): 变身为发光的 3D 玻璃面板阵列。 账本管理: 升级为全封面艺术卡片，支持动态主题色映射。 移动导航: 底部导航栏进化为“悬浮岛”设计，增加操作的灵动感。
168 lines
2.6 KiB
CSS
168 lines
2.6 KiB
CSS
.tools-page {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
/* Header */
|
|
.tools-page-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.tools-page-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.tools-page-subtitle {
|
|
font-size: 16px;
|
|
color: #6b7280;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Tools Grid - 2x2 layout */
|
|
.tools-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Tool Card */
|
|
.tool-card {
|
|
position: relative;
|
|
padding: 32px 24px;
|
|
background: var(--glass-panel-bg);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: var(--radius-xl);
|
|
border-top: 4px solid;
|
|
box-shadow: var(--shadow-sm);
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
min-height: 220px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tool-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: var(--shadow-xl);
|
|
background: var(--glass-panel-bg-hover);
|
|
}
|
|
|
|
.tool-card:active {
|
|
transform: translateY(-2px) scale(0.98);
|
|
}
|
|
|
|
|
|
/* Tool Icon */
|
|
.tool-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.tool-icon-emoji {
|
|
font-size: 40px;
|
|
}
|
|
|
|
/* Tool Content */
|
|
.tool-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.tool-description {
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
margin: 0 0 16px 0;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Tool Arrow */
|
|
.tool-arrow {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.tools-page {
|
|
padding: 16px;
|
|
}
|
|
|
|
.tools-page-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.tools-page-subtitle {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tools-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.tool-card {
|
|
padding: 24px 20px;
|
|
min-height: 160px;
|
|
}
|
|
|
|
.tool-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
.tool-icon-emoji {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.tool-title {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
/* Dark Mode Support */
|
|
@media (prefers-color-scheme: dark) {
|
|
.tools-page-title {
|
|
color: #f9fafb;
|
|
}
|
|
|
|
.tools-page-subtitle {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.tool-card {
|
|
background-color: #1f2937;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.tool-card:hover {
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.tool-title {
|
|
color: #f9fafb;
|
|
}
|
|
|
|
.tool-description {
|
|
color: #9ca3af;
|
|
}
|
|
} |