151 lines
2.6 KiB
CSS
151 lines
2.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* 自定义样式 */
|
|
:root {
|
|
--sidebar-width: 200px;
|
|
|
|
--color-bg-sidebar: #1e293b;
|
|
--color-accent: #38bdf8;
|
|
--color-text: #e2e8f0;
|
|
--color-text-muted: #94a3b8;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: auto;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* 禁止选中（桌面应用体验） */
|
|
body {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
/* 滚动条样式 */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* 按钮基础样式 */
|
|
.btn {
|
|
@apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-slate-900;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-gradient-to-r from-primary-500 to-primary-600 text-white;
|
|
@apply hover:from-primary-400 hover:to-primary-500;
|
|
@apply active:from-primary-600 active:to-primary-700;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-slate-700 text-slate-200;
|
|
@apply hover:bg-slate-600;
|
|
@apply active:bg-slate-800;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply bg-transparent text-slate-300;
|
|
@apply hover:bg-slate-700/50;
|
|
}
|
|
|
|
/* 卡片样式 */
|
|
.card {
|
|
@apply bg-slate-800/50 backdrop-blur-sm rounded-xl border border-slate-700/50;
|
|
@apply shadow-lg shadow-black/20;
|
|
}
|
|
|
|
/* 动画 */
|
|
@keyframes pulse-glow {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 20px 4px rgba(56, 189, 248, 0.2);
|
|
}
|
|
}
|
|
|
|
.animate-pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* 页面切换动画 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
.animate-slideInLeft {
|
|
animation: slideInLeft 0.3s ease-out forwards;
|
|
}
|
|
|
|
/* 更新通知弹出动画 */
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-slideUp {
|
|
animation: slideUp 0.3s ease-out forwards;
|
|
}
|