388 lines
8.4 KiB
CSS
388 lines
8.4 KiB
CSS
/**
|
|
* @fileoverview 全局样式文件
|
|
* @description 包含 TailwindCSS 导入、基础样式重置和应用级样式
|
|
*/
|
|
|
|
/* TailwindCSS 基础导入 */
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* 自定义 CSS 变量 */
|
|
:root {
|
|
/* 颜色变量 */
|
|
--color-primary-50: #eff6ff;
|
|
--color-primary-500: #3b82f6;
|
|
--color-primary-600: #2563eb;
|
|
--color-primary-700: #1d4ed8;
|
|
|
|
--color-secondary-50: #faf5ff;
|
|
--color-secondary-500: #a855f7;
|
|
--color-secondary-600: #9333ea;
|
|
|
|
/* 字体变量 */
|
|
--font-family-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
--font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
|
|
|
|
/* 阴影变量 */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
|
/* 圆角变量 */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.375rem;
|
|
--radius-lg: 0.5rem;
|
|
--radius-xl: 0.75rem;
|
|
}
|
|
|
|
/* 暗色主题变量 */
|
|
.dark {
|
|
--color-bg-primary: #0a0a0a;
|
|
--color-bg-secondary: #171717;
|
|
--color-text-primary: #fafafa;
|
|
--color-text-secondary: #a3a3a3;
|
|
}
|
|
|
|
/* 基础样式重置 */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-family-sans);
|
|
line-height: 1.5;
|
|
-webkit-text-size-adjust: 100%;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
background-color: #fafafa;
|
|
color: #171717;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 应用容器样式 */
|
|
.app {
|
|
min-height: 100vh;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.app.design-mode-enabled {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
/* 页面容器 */
|
|
.page-container {
|
|
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
|
padding-top: 2rem;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
.page-header {
|
|
@apply mb-8;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.page-content {
|
|
@apply w-full;
|
|
}
|
|
|
|
/* 布局组件样式 */
|
|
.layout-container {
|
|
@apply min-h-screen flex flex-col;
|
|
}
|
|
|
|
.layout-sidebar {
|
|
@apply w-64 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.layout-main {
|
|
@apply flex-1 flex flex-col overflow-hidden;
|
|
}
|
|
|
|
.layout-header {
|
|
@apply h-16 bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 flex items-center px-6;
|
|
}
|
|
|
|
.layout-content {
|
|
@apply flex-1 overflow-auto bg-neutral-50 dark:bg-neutral-800;
|
|
}
|
|
|
|
/* 组件高亮样式 */
|
|
.component-highlight {
|
|
@apply transition-all duration-200 ease-in-out;
|
|
position: relative;
|
|
}
|
|
|
|
.component-highlight:hover {
|
|
@apply bg-primary-50 dark:bg-primary-900/20;
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* 设计模式样式 */
|
|
[data-design-mode="true"] {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
[data-design-mode="true"]:hover {
|
|
@apply bg-primary-50 border-primary-200;
|
|
outline: 2px solid theme('colors.primary.500');
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
[data-design-mode-active="true"] {
|
|
@apply bg-error-50 border-error-200;
|
|
outline: 3px solid theme('colors.error.500');
|
|
outline-offset: 2px;
|
|
animation: pulse-error 1s ease-in-out;
|
|
}
|
|
|
|
[data-design-mode-hover="true"] {
|
|
@apply bg-warning-50 border-warning-200;
|
|
outline: 2px solid theme('colors.warning.500');
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@keyframes pulse-error {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
/* 表单组件样式 */
|
|
.form-group {
|
|
@apply space-y-2;
|
|
}
|
|
|
|
.form-label {
|
|
@apply block text-sm font-medium text-neutral-700 dark:text-neutral-300;
|
|
}
|
|
|
|
.form-input {
|
|
@apply w-full px-3 py-2 border border-neutral-300 dark:border-neutral-600 rounded-md shadow-sm;
|
|
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500;
|
|
@apply dark:bg-neutral-700 dark:text-neutral-100;
|
|
}
|
|
|
|
.form-input:invalid {
|
|
@apply border-error-300 focus:ring-error-500 focus:border-error-500;
|
|
}
|
|
|
|
/* 按钮组件样式 */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center px-4 py-2 border font-medium rounded-md;
|
|
@apply transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
|
|
@apply disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply btn bg-primary-600 border-primary-600 text-white;
|
|
@apply hover:bg-primary-700 hover:border-primary-700 focus:ring-primary-500;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply btn bg-neutral-200 border-neutral-300 text-neutral-900;
|
|
@apply hover:bg-neutral-300 hover:border-neutral-400 focus:ring-neutral-500;
|
|
@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-100;
|
|
@apply dark:hover:bg-neutral-600 dark:hover:border-neutral-500;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply btn border-primary-600 text-primary-600 bg-transparent;
|
|
@apply hover:bg-primary-600 hover:text-white focus:ring-primary-500;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply px-3 py-1.5 text-sm;
|
|
}
|
|
|
|
.btn-lg {
|
|
@apply px-6 py-3 text-lg;
|
|
}
|
|
|
|
/* 卡片组件样式 */
|
|
.card {
|
|
@apply bg-white dark:bg-neutral-900 rounded-lg shadow border border-neutral-200 dark:border-neutral-800;
|
|
@apply transition-shadow duration-200;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.card-header {
|
|
@apply px-6 py-4 border-b border-neutral-200 dark:border-neutral-800;
|
|
}
|
|
|
|
.card-body {
|
|
@apply px-6 py-4;
|
|
}
|
|
|
|
.card-footer {
|
|
@apply px-6 py-4 border-t border-neutral-200 dark:border-neutral-800;
|
|
}
|
|
|
|
/* 模态框样式 */
|
|
.modal-overlay {
|
|
@apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.modal-content {
|
|
@apply bg-white dark:bg-neutral-900 rounded-lg shadow-xl max-w-md w-full mx-4;
|
|
@apply animate-in fade-in duration-200;
|
|
}
|
|
|
|
/* 工具提示样式 */
|
|
.tooltip {
|
|
@apply absolute z-50 px-2 py-1 text-xs text-white bg-neutral-900 rounded shadow-lg;
|
|
@apply pointer-events-none opacity-0 transition-opacity duration-200;
|
|
}
|
|
|
|
.tooltip.show {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
/* 加载状态样式 */
|
|
.loading-spinner {
|
|
@apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loading-dots {
|
|
@apply flex space-x-1;
|
|
}
|
|
|
|
.loading-dots > div {
|
|
@apply w-2 h-2 bg-current rounded-full;
|
|
animation: loading-dots 1.4s ease-in-out infinite both;
|
|
}
|
|
|
|
.loading-dots > div:nth-child(1) { animation-delay: -0.32s; }
|
|
.loading-dots > div:nth-child(2) { animation-delay: -0.16s; }
|
|
|
|
@keyframes loading-dots {
|
|
0%, 80%, 100% {
|
|
transform: scale(0);
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* 响应式设计增强 */
|
|
@media (max-width: 768px) {
|
|
.layout-sidebar {
|
|
@apply fixed inset-y-0 left-0 z-40 transform -translate-x-full;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.layout-sidebar.open {
|
|
@apply translate-x-0;
|
|
}
|
|
|
|
.page-container {
|
|
@apply px-4;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
/* 无障碍支持 */
|
|
.sr-only {
|
|
@apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
|
|
/* 高对比度模式支持 */
|
|
@media (prefers-contrast: high) {
|
|
.card {
|
|
@apply border-2;
|
|
}
|
|
|
|
.btn {
|
|
@apply border-2;
|
|
}
|
|
}
|
|
|
|
/* 减少动画支持 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* 打印样式 */
|
|
@media print {
|
|
.layout-sidebar,
|
|
.layout-header {
|
|
@apply hidden;
|
|
}
|
|
|
|
.layout-content {
|
|
@apply ml-0;
|
|
}
|
|
|
|
.page-container {
|
|
@apply max-w-none px-0;
|
|
}
|
|
}
|
|
|
|
/* 自定义滚动条 */
|
|
.custom-scrollbar {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: theme('colors.neutral.400') theme('colors.neutral.100');
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: theme('colors.neutral.100');
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: theme('colors.neutral.400');
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: theme('colors.neutral.500');
|
|
}
|
|
|
|
/* 暗色主题滚动条 */
|
|
.dark .custom-scrollbar {
|
|
scrollbar-color: theme('colors.neutral.600') theme('colors.neutral.800');
|
|
}
|
|
|
|
.dark .custom-scrollbar::-webkit-scrollbar-track {
|
|
background: theme('colors.neutral.800');
|
|
}
|
|
|
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: theme('colors.neutral.600');
|
|
}
|
|
|
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: theme('colors.neutral.500');
|
|
} |