DESKTOP-72TV0V4\caoxiaozhu
945cf6c950
- 修复无数据时重复显示空状态的问题 - 将DDL展示改为可编辑的textarea - 优化空状态UI样式和提示文案 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
132 lines
2.5 KiB
CSS
132 lines
2.5 KiB
CSS
/* Database View Styles */
|
|
|
|
/* 搜索输入框 */
|
|
.search-input {
|
|
@apply bg-dark-700 border border-dark-500 rounded-lg px-4 py-2.5 pl-10 text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan focus:ring-1 focus:ring-primary-cyan/30 transition-all;
|
|
}
|
|
|
|
/* 输入框 */
|
|
.input-field {
|
|
@apply w-full bg-dark-700 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-primary-cyan focus:ring-1 focus:ring-primary-cyan/30 transition-all;
|
|
}
|
|
|
|
/* 主要按钮 */
|
|
.btn-primary {
|
|
@apply px-4 py-2 rounded-lg bg-gradient-to-r from-primary-cyan to-blue-500 text-white hover:from-cyan-500 hover:to-blue-600 transition-all flex items-center gap-2;
|
|
}
|
|
|
|
/* 次要按钮 */
|
|
.btn-secondary {
|
|
@apply px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-all flex items-center gap-2;
|
|
}
|
|
|
|
/* 图标按钮 */
|
|
.btn-icon {
|
|
@apply p-2 rounded-lg hover:bg-dark-600 transition-colors;
|
|
}
|
|
|
|
/* 表格行 */
|
|
.table-row {
|
|
@apply border-b border-dark-600 hover:bg-dark-600/50 transition-colors;
|
|
}
|
|
|
|
/* 空状态（已不使用） */
|
|
.empty-state {
|
|
@apply py-16 text-center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 自定义空状态盒子 */
|
|
.empty-box {
|
|
min-height: 340px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.empty-icon {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #1f2937, #111827);
|
|
border-radius: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.empty-icon i {
|
|
font-size: 40px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.empty-text {
|
|
color: #d1d5db;
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.empty-tip {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
display: block;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.empty-state-title {
|
|
color: #d1d5db;
|
|
font-size: 1.25rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.empty-state-hint {
|
|
color: #6b7280;
|
|
font-size: 0.875rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* 表格复选框 */
|
|
.table-checkbox {
|
|
@apply flex-shrink-0;
|
|
}
|
|
|
|
/* 弹窗遮罩 */
|
|
.modal-overlay {
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
/* 弹窗内容 */
|
|
.modal-content {
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|