pit-router/app/static/css/style.css

/* 智队中枢 - 自定义样式 */

/* 基础样式 */
:root {
    --transition-speed: 200ms;
}

/* 平滑过渡 */
* {
    transition: background-color var(--transition-speed),
                border-color var(--transition-speed),
                color var(--transition-speed);
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 暗黑模式滚动条 */
.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* 卡片样式 */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.card-body {
    @apply p-6;
}

/* 按钮样式 */
.btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
}

.btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white;
}

.btn-secondary {
    @apply bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white;
}

/* 输入框样式 */
.input {
    @apply w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 
           bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100
           focus:ring-2 focus:ring-primary-500 focus:border-transparent
           placeholder-gray-400 dark:placeholder-gray-500;
}

.select {
    @apply w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 
           bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100
           focus:ring-2 focus:ring-primary-500 focus:border-transparent;
}

/* 表格样式 */
.table {
    @apply w-full;
}

.table th {
    @apply px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider bg-gray-50 dark:bg-gray-700/50;
}

.table td {
    @apply px-4 py-3 border-b border-gray-200 dark:border-gray-700;
}

.table tr:hover td {
    @apply bg-gray-50 dark:bg-gray-700/30;
}

/* 状态徽章 */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400;
}

.badge-warning {
    @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400;
}

.badge-danger {
    @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400;
}

.badge-info {
    @apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400;
}

/* 统计卡片 */
.stat-card {
    @apply card p-6;
}

.stat-card .stat-value {
    @apply text-3xl font-bold text-gray-900 dark:text-white;
}

.stat-card .stat-label {
    @apply text-sm text-gray-500 dark:text-gray-400 mt-1;
}

/* 日志区域 */
.log-area {
    @apply bg-gray-900 text-gray-100 font-mono text-sm p-4 rounded-lg overflow-auto max-h-96;
}

.log-entry {
    @apply py-1;
}

.log-info {
    @apply text-blue-400;
}

.log-success {
    @apply text-green-400;
}

.log-warning {
    @apply text-yellow-400;
}

.log-error {
    @apply text-red-400;
}

/* 加载动画 */
.loading {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600;
}

.loading-sm {
    @apply w-4 h-4;
}

.loading-md {
    @apply w-6 h-6;
}

.loading-lg {
    @apply w-8 h-8;
}

/* HTMX 加载指示器 */
.htmx-request .htmx-indicator {
    @apply inline-block;
}

.htmx-indicator {
    @apply hidden;
}