forked from zguiy/utils
335 lines
8.6 KiB
CSS
335 lines
8.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* FontAwesome 图标预加载优化 */
|
|
.fontawesome-i2svg-active body .icon-container .icon {
|
|
opacity: 1;
|
|
transition: opacity 0.2s ease-in;
|
|
}
|
|
|
|
.fontawesome-i2svg-pending body .icon-container .icon {
|
|
opacity: 0;
|
|
}
|
|
|
|
:root {
|
|
/* 主题色 */
|
|
--color-primary: 99, 102, 241; /* #6366F1 - 深邃紫色 */
|
|
--color-primary-hover: 139, 92, 246; /* #8B5CF6 - 紫罗兰 */
|
|
--color-primary-light: 129, 140, 248; /* #818CF8 - 亮紫色 */
|
|
|
|
/* 背景色系 */
|
|
--color-bg-main: 18, 24, 39; /* #121827 - 深炭黑 */
|
|
--color-bg-card: 30, 41, 59; /* #1E293B - 暗灰蓝 */
|
|
--color-bg-secondary: 45, 55, 72; /* #2D3748 - 深靛蓝 */
|
|
|
|
/* 文字颜色 */
|
|
--color-text-primary: 241, 245, 249; /* #F1F5F9 - 银月白 */
|
|
--color-text-secondary: 203, 213, 225; /* #CBD5E1 - 淡灰蓝 */
|
|
--color-text-tertiary: 148, 163, 184; /* #94A3B8 - 冷钢灰 */
|
|
|
|
/* 点缀色 */
|
|
--color-success: 16, 185, 129; /* #10B981 - 暗翠绿 */
|
|
--color-warning: 245, 158, 11; /* #F59E0B - 暗琥珀 */
|
|
--color-error: 239, 68, 68; /* #EF4444 - 暗珊瑚 */
|
|
|
|
/* 块级元素背景色 */
|
|
--color-block: 38, 53, 72; /* #263548 - 深灰蓝色块 */
|
|
--color-block-strong: 45, 55, 72; /* #2D3748 - 更深的块色 */
|
|
--color-block-hover: 61, 74, 92; /* #3D4A5C - 悬停态块色 */
|
|
|
|
/* 边框和阴影 */
|
|
--color-border: rgba(99, 102, 241, 0.15);
|
|
--color-shadow: rgba(0, 0, 0, 0.25);
|
|
--purple-glow: rgba(99, 102, 241, 0.15);
|
|
}
|
|
|
|
/* 浅色主题变量 */
|
|
[data-theme='light'] {
|
|
/* 主题色保持不变，以保持品牌一致性 */
|
|
--color-primary: 99, 102, 241; /* #6366F1 - 深邃紫色 */
|
|
--color-primary-hover: 139, 92, 246; /* #8B5CF6 - 紫罗兰 */
|
|
--color-primary-light: 124, 58, 237; /* #7C3AED - 更深的紫色，提高对比度 */
|
|
|
|
/* 背景色系 */
|
|
--color-bg-main: 249, 250, 251; /* #F9FAFB - 浅灰背景 */
|
|
--color-bg-card: 255, 255, 255; /* #FFFFFF - 纯白卡片 */
|
|
--color-bg-secondary: 243, 244, 246; /* #F3F4F6 - 次级灰背景 */
|
|
|
|
/* 文字颜色 */
|
|
--color-text-primary: 17, 24, 39; /* #111827 - 近黑色 */
|
|
--color-text-secondary: 55, 65, 81; /* #374151 - 深灰色 */
|
|
--color-text-tertiary: 107, 114, 128; /* #6B7280 - 中灰色 */
|
|
|
|
/* 点缀色保持不变 */
|
|
--color-success: 16, 185, 129; /* #10B981 - 暗翠绿 */
|
|
--color-warning: 245, 158, 11; /* #F59E0B - 暗琥珀 */
|
|
--color-error: 239, 68, 68; /* #EF4444 - 暗珊瑚 */
|
|
|
|
/* 块级元素背景色 */
|
|
--color-block: 241, 245, 249; /* #F1F5F9 - 浅灰色块 */
|
|
--color-block-strong: 226, 232, 240; /* #E2E8F0 - 更强调的块色 */
|
|
--color-block-hover: 203, 213, 225; /* #CBD5E1 - 悬停态块色 */
|
|
|
|
/* 边框和阴影 */
|
|
--color-border: rgba(99, 102, 241, 0.2);
|
|
--color-shadow: rgba(0, 0, 0, 0.1);
|
|
--purple-glow: rgba(99, 102, 241, 0.2);
|
|
}
|
|
|
|
/* 全局样式 */
|
|
body {
|
|
color: rgb(var(--color-text-primary));
|
|
background: rgb(var(--color-bg-main));
|
|
min-height: 100vh;
|
|
transition: color 0.3s ease, background-color 0.3s ease;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
|
}
|
|
|
|
/* 自定义滚动条样式 */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(var(--color-bg-secondary), 0.3);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(var(--color-primary), 0.4);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(var(--color-primary-hover), 0.6);
|
|
}
|
|
|
|
/* Firefox滚动条样式 */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(var(--color-primary), 0.4) rgba(var(--color-bg-secondary), 0.3);
|
|
}
|
|
|
|
/* 主题通用样式类 */
|
|
@layer utilities {
|
|
/* 文本颜色类 */
|
|
.text-primary {
|
|
color: rgb(var(--color-text-primary));
|
|
}
|
|
|
|
.text-secondary {
|
|
color: rgb(var(--color-text-secondary));
|
|
}
|
|
|
|
.text-tertiary {
|
|
color: rgb(var(--color-text-tertiary));
|
|
}
|
|
|
|
.text-purple {
|
|
color: rgb(var(--color-primary-light));
|
|
}
|
|
|
|
.text-error {
|
|
color: rgb(var(--color-error));
|
|
}
|
|
|
|
.text-success {
|
|
color: rgb(var(--color-success));
|
|
}
|
|
|
|
.text-warning {
|
|
color: rgb(var(--color-warning));
|
|
}
|
|
|
|
/* 背景色类 */
|
|
.bg-main {
|
|
background-color: rgb(var(--color-bg-main));
|
|
}
|
|
|
|
.bg-card {
|
|
background-color: rgb(var(--color-bg-card));
|
|
}
|
|
|
|
.bg-secondary {
|
|
background-color: rgb(var(--color-bg-secondary));
|
|
}
|
|
|
|
.bg-block {
|
|
background-color: rgb(var(--color-block));
|
|
}
|
|
|
|
.bg-block-strong {
|
|
background-color: rgb(var(--color-block-strong));
|
|
}
|
|
|
|
.bg-block-hover {
|
|
background-color: rgb(var(--color-block-hover));
|
|
}
|
|
|
|
.bg-purple-glow {
|
|
background-color: var(--purple-glow);
|
|
}
|
|
}
|
|
|
|
/* 通用组件样式 */
|
|
@layer components {
|
|
/* 卡片基础样式 */
|
|
.card {
|
|
@apply rounded-lg border shadow-lg transition-all duration-300;
|
|
background-color: rgb(var(--color-bg-card));
|
|
border-color: rgba(var(--color-primary), 0.15);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 卡片悬停效果 */
|
|
.card:hover {
|
|
border-color: rgba(var(--color-primary), 0.3);
|
|
background-color: color-mix(in srgb, rgb(var(--color-bg-card)) 95%, rgb(var(--color-primary)) 5%);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* 主按钮样式 */
|
|
.btn-primary {
|
|
@apply bg-gradient-to-r text-white rounded-md px-4 py-2 font-medium transition-all duration-200;
|
|
background-image: linear-gradient(to right, rgb(var(--color-primary)), rgb(var(--color-primary-hover)));
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(var(--color-primary), 0.3);
|
|
}
|
|
|
|
/* 次按钮样式 */
|
|
.btn-secondary {
|
|
@apply rounded-md px-4 py-2 font-medium transition-all duration-200 border;
|
|
background-color: rgb(var(--color-bg-secondary));
|
|
color: rgb(var(--color-primary-light));
|
|
border-color: rgb(var(--color-primary));
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: rgba(var(--color-primary), 0.1);
|
|
border-color: rgb(var(--color-primary-hover));
|
|
}
|
|
|
|
/* 输入框样式 */
|
|
.input-field {
|
|
@apply w-full px-3 py-2 border rounded-md transition-all duration-200 focus:outline-none focus:ring-2;
|
|
background-color: rgb(var(--color-bg-card));
|
|
border-color: rgba(var(--color-primary), 0.2);
|
|
color: rgb(var(--color-text-primary));
|
|
}
|
|
|
|
.input-field:focus {
|
|
border-color: rgb(var(--color-primary));
|
|
box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2);
|
|
}
|
|
|
|
/* 文本区域样式 */
|
|
.textarea-field {
|
|
@apply w-full px-3 py-2 border rounded-md transition-all duration-200 focus:outline-none focus:ring-2 resize-none;
|
|
background-color: rgb(var(--color-bg-card));
|
|
border-color: rgba(var(--color-primary), 0.2);
|
|
color: rgb(var(--color-text-primary));
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
}
|
|
|
|
.textarea-field:focus {
|
|
border-color: rgb(var(--color-primary));
|
|
box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2);
|
|
}
|
|
|
|
/* 选择框样式 */
|
|
.select-field {
|
|
@apply w-full px-3 py-2 border rounded-md transition-all duration-200 focus:outline-none focus:ring-2;
|
|
background-color: rgb(var(--color-bg-card));
|
|
border-color: rgba(var(--color-primary), 0.2);
|
|
color: rgb(var(--color-text-primary));
|
|
}
|
|
|
|
.select-field:focus {
|
|
border-color: rgb(var(--color-primary));
|
|
box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.2);
|
|
}
|
|
|
|
/* 小按钮样式 */
|
|
.btn-sm {
|
|
@apply px-2 py-1 text-sm rounded transition-all duration-200;
|
|
}
|
|
|
|
/* 复选框样式 */
|
|
.form-checkbox {
|
|
@apply w-4 h-4 rounded border-2 transition-all duration-200;
|
|
border-color: rgba(var(--color-primary), 0.3);
|
|
background-color: rgb(var(--color-bg-card));
|
|
}
|
|
|
|
.form-checkbox:checked {
|
|
background-color: rgb(var(--color-primary));
|
|
border-color: rgb(var(--color-primary));
|
|
}
|
|
|
|
/* 边框颜色类 */
|
|
.border-border {
|
|
border-color: rgba(var(--color-primary), 0.2);
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: rgb(var(--color-primary));
|
|
}
|
|
|
|
.border-error {
|
|
border-color: rgb(var(--color-error));
|
|
}
|
|
|
|
.border-success {
|
|
border-color: rgb(var(--color-success));
|
|
}
|
|
}
|
|
|
|
/* 动画效果 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.animate-scaleIn {
|
|
animation: scaleIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|