style(css): 添加字体大小 CSS 变量和弹出动画
- 新增 --font-size-base CSS 变量支持全局字体大小 - body 使用 CSS 变量控制字体大小 - 添加 popUp 动画效果用于弹出菜单
This commit is contained in:
parent
5444e7a579
commit
6d1bf7275b
@ -59,6 +59,9 @@
|
|||||||
--transition-fast: 0.15s ease;
|
--transition-fast: 0.15s ease;
|
||||||
--transition-base: 0.2s ease;
|
--transition-base: 0.2s ease;
|
||||||
--transition-slow: 0.3s ease;
|
--transition-slow: 0.3s ease;
|
||||||
|
|
||||||
|
/* 字体大小 */
|
||||||
|
--font-size-base: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
@ -92,6 +95,7 @@ body {
|
|||||||
background-color: var(--color-bg-secondary);
|
background-color: var(--color-bg-secondary);
|
||||||
color: var(--color-text-primary);
|
color: var(--color-text-primary);
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
font-size: var(--font-size-base);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
@ -151,6 +155,17 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes popUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(8px) scale(0.95);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.animate-fade-in {
|
.animate-fade-in {
|
||||||
animation: fadeIn var(--transition-base);
|
animation: fadeIn var(--transition-base);
|
||||||
}
|
}
|
||||||
@ -163,6 +178,10 @@ body {
|
|||||||
animation: slideDown var(--transition-fast);
|
animation: slideDown var(--transition-fast);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.animate-pop-up {
|
||||||
|
animation: popUp 0.15s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
/* ========================================
|
/* ========================================
|
||||||
响应式设计
|
响应式设计
|
||||||
======================================== */
|
======================================== */
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user