DESKTOP-72TV0V4\caoxiaozhu
6d5ae6c604
- Reorganize project structure: move frontend to web/ directory - Add Database page with connection list (name, type, subtables, status, created, actions) - Integrate Element Plus for UI components with dark theme support - Add Quicksand font for rounded UI design - Configure root package.json to run frontend from web/ directory Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
118 lines
2.1 KiB
CSS
118 lines
2.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
}
|
|
|
|
body {
|
|
@apply bg-dark-900 text-gray-100 font-sans;
|
|
}
|
|
|
|
/* Element Plus 暗色主题 */
|
|
html.dark {
|
|
--el-bg-color: #171922;
|
|
--el-bg-color-overlay: #171922;
|
|
--el-text-color-primary: #ffffff;
|
|
--el-text-color-regular: #a1a1aa;
|
|
--el-border-color: #2a2c36;
|
|
--el-border-color-light: #2a2c36;
|
|
--el-fill-color-blank: #171922;
|
|
--el-color-primary: #ff9500;
|
|
}
|
|
|
|
html.dark .el-select {
|
|
--el-select-input-focus-border-color: #ff9500;
|
|
}
|
|
|
|
html.dark .el-select .el-input__wrapper {
|
|
background-color: #171922;
|
|
box-shadow: 0 0 0 1px #2a2c36 inset;
|
|
}
|
|
|
|
html.dark .el-select .el-input__wrapper:hover {
|
|
box-shadow: 0 0 0 1px #ff9500 inset;
|
|
}
|
|
|
|
html.dark .el-select .el-input__wrapper.is-focus {
|
|
box-shadow: 0 0 0 1px #ff9500 inset;
|
|
}
|
|
|
|
html.dark .el-select .el-input__inner {
|
|
color: #ffffff;
|
|
}
|
|
|
|
html.dark .el-select-dropdown {
|
|
background-color: #171922;
|
|
border: 1px solid #2a2c36;
|
|
}
|
|
|
|
html.dark .el-select-dropdown__item {
|
|
color: #ffffff;
|
|
}
|
|
|
|
html.dark .el-select-dropdown__item:hover {
|
|
background-color: #1a1c25;
|
|
}
|
|
|
|
html.dark .el-select-dropdown__item.is-selected {
|
|
color: #ff9500;
|
|
font-weight: 600;
|
|
background-color: transparent;
|
|
}
|
|
|
|
html.dark .el-popper.is-light {
|
|
background: #171922;
|
|
border: 1px solid #2a2c36;
|
|
}
|
|
|
|
html.dark .el-popper.is-light .el-popper__arrow::before {
|
|
background: #171922;
|
|
border-color: #2a2c36;
|
|
}
|
|
|
|
/* 柱状图增长动画 */
|
|
@keyframes bar-grow {
|
|
from {
|
|
height: 0;
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.chart-bar {
|
|
height: 0;
|
|
opacity: 0;
|
|
animation: bar-grow 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
}
|
|
|
|
/* 进度条增长动画 */
|
|
@keyframes progress-grow {
|
|
from {
|
|
width: 0;
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
width: var(--target-width);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 0;
|
|
opacity: 0;
|
|
animation: progress-grow 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
}
|