97 lines
2.2 KiB
CSS
97 lines
2.2 KiB
CSS
/**
|
|
* 基础样式文件
|
|
* 包含全局变量与Tailwind基础配置
|
|
*/
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* 主题颜色变量 */
|
|
--color-primary: #00684a;
|
|
--color-primary-hover: #005a3f;
|
|
--color-primary-light: rgba(0, 104, 74, 0.1);
|
|
|
|
/* 成功、警告、错误颜色 */
|
|
--color-success: #52c41a;
|
|
--color-warning: #faad14;
|
|
--color-error: #f5222d;
|
|
|
|
/* 中性色 */
|
|
--color-gray-50: #f8f9fa;
|
|
--color-gray-100: #f1f3f5;
|
|
--color-gray-200: #e9ecef;
|
|
--color-gray-300: #dee2e6;
|
|
--color-gray-400: #ced4da;
|
|
--color-gray-500: #adb5bd;
|
|
--color-gray-600: #868e96;
|
|
--color-gray-700: #495057;
|
|
--color-gray-800: #343a40;
|
|
--color-gray-900: #212529;
|
|
|
|
/* 字体设置 */
|
|
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
|
|
/* 间距倍数基准 */
|
|
--spacing-base: 0.25rem;
|
|
|
|
/* 圆角 */
|
|
--radius-sm: 0.125rem;
|
|
--radius-md: 0.25rem;
|
|
--radius-lg: 0.5rem;
|
|
--radius-xl: 1rem;
|
|
|
|
/* 阴影 */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
|
|
/* 过渡 */
|
|
--transition-normal: 0.2s ease;
|
|
}
|
|
|
|
/* 基本元素样式 */
|
|
html, body {
|
|
@apply font-sans text-gray-800 antialiased;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* 文字选择颜色 */
|
|
::selection {
|
|
@apply bg-[rgba(0,104,74,0.2)] text-[#00684a];
|
|
}
|
|
|
|
/* 滚动条美化 */
|
|
::-webkit-scrollbar {
|
|
@apply w-2 h-2;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-gray-100;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-gray-300 rounded-full hover:bg-gray-400;
|
|
}
|
|
|
|
/* 链接样式 */
|
|
a {
|
|
@apply text-[#00684a] hover:text-[#005a3f] transition-colors duration-200;
|
|
}
|
|
|
|
/* 主要文本颜色 */
|
|
.text-primary {
|
|
@apply text-[#00684a];
|
|
}
|
|
|
|
.bg-primary {
|
|
@apply bg-[#00684a];
|
|
}
|
|
|
|
/* 平滑过渡 */
|
|
.transition-all-ease {
|
|
@apply transition-all duration-200 ease-in-out;
|
|
}
|
|
} |