187 lines
3.9 KiB
SCSS
187 lines
3.9 KiB
SCSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap');
|
|
:root {
|
|
--primary-color: #1677ff;
|
|
--primary-gradient: linear-gradient(45deg, #1677ff, #36cff0);
|
|
--success-color: #52c41a;
|
|
--warning-color: #faad14;
|
|
--error-color: #ff4d4f;
|
|
--font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
|
'Noto Sans', sans-serif;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
// Layout styles
|
|
.app-layout {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.app-header {
|
|
@apply flex items-center justify-between px-6 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700;
|
|
height: 64px;
|
|
}
|
|
|
|
.app-sidebar {
|
|
@apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700;
|
|
|
|
.ant-menu {
|
|
@apply border-0;
|
|
|
|
.ant-menu-item {
|
|
@apply rounded-lg;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
margin-bottom: 8px;
|
|
|
|
.ant-menu-item-icon + span {
|
|
opacity: 1;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
&:hover {
|
|
@apply bg-gray-100 dark:bg-gray-700;
|
|
}
|
|
|
|
&.ant-menu-item-selected {
|
|
background: var(--primary-color);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&.ant-menu-inline-collapsed {
|
|
.ant-menu-item,
|
|
.ant-menu-submenu .ant-menu-submenu-title {
|
|
padding: 0 !important;
|
|
text-align: center;
|
|
|
|
.ant-menu-item-icon {
|
|
line-height: 44px;
|
|
margin: 0;
|
|
}
|
|
|
|
.ant-menu-title-content {
|
|
opacity: 0;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-menu-submenu {
|
|
.ant-menu-submenu-title {
|
|
@apply rounded-lg;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
|
|
&:hover {
|
|
@apply bg-gray-100 dark:bg-gray-700;
|
|
}
|
|
}
|
|
|
|
&.ant-menu-submenu-open {
|
|
> .ant-menu-submenu-title {
|
|
color: var(--primary-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Logo styles
|
|
.logo {
|
|
@apply flex items-center justify-center h-16 border-b border-gray-200 dark:border-gray-700;
|
|
|
|
h1 {
|
|
@apply text-lg font-semibold m-0;
|
|
background: var(--primary-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
// Dark mode styles
|
|
.dark {
|
|
@apply bg-gray-900;
|
|
|
|
.ant-card {
|
|
background: #1f1f1f;
|
|
|
|
.ant-card-head {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
border-bottom-color: #303030;
|
|
}
|
|
}
|
|
|
|
.ant-table {
|
|
background: #1f1f1f;
|
|
|
|
.ant-table-thead > tr > th {
|
|
background: #141414;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.ant-table-tbody > tr > td {
|
|
border-bottom: 1px solid #303030;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Statistics card styles
|
|
.stat-card {
|
|
@apply rounded-lg border border-gray-100 dark:border-gray-800 p-6;
|
|
|
|
.stat-icon {
|
|
@apply w-12 h-12 rounded-full flex items-center justify-center mb-4;
|
|
}
|
|
|
|
.stat-title {
|
|
@apply text-gray-600 dark:text-gray-400 text-sm font-medium;
|
|
}
|
|
|
|
.stat-value {
|
|
@apply text-2xl font-semibold mt-2;
|
|
}
|
|
}
|
|
/* 滚动条基础样式 */
|
|
::-webkit-scrollbar {
|
|
width: 8px; /* 垂直滚动条宽度 */
|
|
height: 8px; /* 水平滚动条高度 */
|
|
}
|
|
|
|
/* 亮色模式滚动条样式 */
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-gray-100; /* 轨道背景色 */
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-gray-300 rounded-full hover:bg-gray-400 transition-colors; /* 滑块样式 */
|
|
}
|
|
|
|
/* 暗色模式滚动条样式 */
|
|
.dark {
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-gray-800; /* 暗色模式轨道背景 */
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-gray-600 hover:bg-gray-500; /* 暗色模式滑块样式 */
|
|
}
|
|
}
|
|
|
|
/* Firefox 滚动条样式 */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: theme('colors.gray.300') theme('colors.gray.100');
|
|
}
|
|
|
|
.dark * {
|
|
scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
|
|
}
|
|
|