src/assets/css/settingsPanel.css
/* 设置面板样式 - DaisyUI版本 */
/* tailwindcss */

.settings-tab {
  @apply p-5 max-w-3xl mx-auto;
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-title {
  @apply mb-5 text-base-content font-medium text-lg;
}

.settings-card {
  @apply mb-5 rounded-lg overflow-hidden shadow-sm bg-base-100 transition-all duration-300;
}

.settings-card:hover {
  @apply shadow-md -translate-y-0.5;
}

.card-header {
  @apply flex justify-between items-center py-1 px-4;
}

.card-header span {
  @apply font-medium text-base text-base-content;
}

.setting-item {
  @apply flex justify-between items-center py-4 px-4 border-b border-base-200 last:border-b-0;
}

.setting-label {
  @apply text-sm text-base-content;
}

.setting-control {
  @apply flex items-center;
}

.about-content {
  @apply py-2.5 px-4 text-base-content;
}

.about-content p {
  @apply my-2;
}

/* 主题色选择器增强样式 */
.color-theme-selector {
  @apply flex gap-3 flex-wrap justify-end;
}

.color-item {
  @apply w-[30px] h-[30px] rounded-full cursor-pointer transition-all duration-300 border-2 border-transparent relative shadow-sm;
}

.color-item.active {
  @apply border-base-content scale-110;
}

.color-item.active::after {
  content: "✓";
  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white font-bold text-sm;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.color-item:hover {
  @apply scale-110 shadow-md;
}

/* 紧凑模式样式调整 */
[data-density="compact"] .setting-item {
  @apply py-2.5;
}

[data-density="compact"] .card-header {
  @apply py-0.5;
}

[data-density="compact"] .settings-card {
  @apply mb-4;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .setting-item {
    @apply flex-col items-start;
  }

  .setting-control {
    @apply mt-2.5 w-full justify-start;
  }

  .color-theme-selector {
    @apply justify-start mt-2.5;
  }
}

/* 深色模式由DaisyUI自动处理，无需手动适配 */

/* Iconify图标支持 */
.iconify {
  @apply inline-flex align-middle;
}

/* 设置项目中的图标 */
.setting-item .iconify {
  @apply mr-2 text-base-content/70;
}

/* DaisyUI开关样式增强 */
.toggle:focus-visible {
  @apply outline-offset-2;
}

/* 卡片内容区域 */
.card-content {
  @apply p-4;
}

/* 主题预览框 */
.theme-preview {
  @apply p-3 rounded-lg border border-base-300 mb-2;
}

/* 版本信息 */
.version-info {
  @apply text-xs text-base-content/70 mt-1;
}

/* 对话框操作按钮 */
.dialog-actions {
  @apply flex justify-end gap-2 mt-4;
}

/* 连接控制样式 */
.connection-controls {
  @apply flex flex-col gap-3 w-full;
}

.connection-status {
  @apply flex items-center justify-start;
}

.connection-buttons {
  @apply flex gap-2 justify-start;
}

.status-badge {
  @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-200;
}

.status-connected {
  @apply bg-success/20 text-success border border-success/30;
}

.status-mock {
  @apply bg-warning/20 text-warning border border-warning/30;
}

.status-error {
  @apply bg-error/20 text-error border border-error/30;
}

.status-checking {
  @apply bg-info/20 text-info border border-info/30;
}

.status-inactive {
  @apply bg-base-300 text-base-content/70 border border-base-300;
}

.status-active {
  @apply bg-primary/20 text-primary border border-primary/30;
}

/* 状态指示器动画 */
.status-checking .iconify {
  @apply animate-spin;
}

/* 连接按钮样式增强 */
.connection-buttons .btn {
  @apply min-w-[100px];
}

.connection-buttons .btn.loading {
  @apply cursor-not-allowed opacity-70;
}
