/* ========== Flask-Admin TDesign主题 - ZJPB焦提示词 (亮色主题) ========== */ /* TDesign 色彩系统 */ :root { --td-brand-color: #0052D9; --td-brand-color-hover: #266FE8; --td-brand-color-active: #0034B5; --td-brand-color-light: #ECF2FE; --td-success-color: #00A870; --td-warning-color: #E37318; --td-error-color: #D54941; --td-bg-color-page: #F3F3F3; --td-bg-color-container: #FFFFFF; --td-bg-color-container-hover: #F5F5F5; --td-text-color-primary: #000000; --td-text-color-secondary: #606266; --td-text-color-placeholder: #C0C4CC; --td-border-color: #DCDFE6; --td-border-color-light: #E4E7ED; --td-border-radius: 3px; --td-border-radius-medium: 6px; --td-shadow-1: 0 1px 10px rgba(0, 0, 0, .05); --td-shadow-2: 0 2px 20px rgba(0, 0, 0, .08); } /* 亮色模式 - 全局覆盖 */ body, body.admin-theme, .admin-theme { background: var(--td-bg-color-page) !important; color: var(--td-text-color-primary) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif !important; } /* 主容器 */ .container-fluid, .container { background: transparent !important; } /* 导航栏 */ .navbar, .navbar-default, .navbar-inverse, .navbar-admin { background: #FFFFFF !important; border-bottom: 1px solid var(--td-border-color) !important; box-shadow: var(--td-shadow-1) !important; border: none !important; min-height: 64px !important; } .navbar-brand, .navbar .navbar-brand { color: var(--td-brand-color) !important; font-weight: 600 !important; font-size: 18px !important; } .navbar-nav .nav-link, .navbar-nav > li > a { color: var(--td-text-color-secondary) !important; font-size: 14px !important; padding: 8px 16px !important; border-radius: var(--td-border-radius) !important; transition: all 0.2s ease !important; } .navbar-nav .nav-link:hover, .navbar-nav > li > a:hover, .navbar-nav .nav-link:focus, .navbar-nav > li > a:focus { color: var(--td-text-color-primary) !important; background: var(--td-bg-color-container-hover) !important; } /* 侧边栏 */ .nav-sidebar, .nav.nav-pills { background: #FFFFFF !important; border-right: 1px solid var(--td-border-color) !important; } .nav-sidebar .nav-link, .nav-sidebar > li > a, .nav-pills > li > a { color: var(--td-text-color-secondary) !important; padding: 12px 16px !important; margin: 4px 8px !important; border-radius: var(--td-border-radius-medium) !important; font-size: 14px !important; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) !important; background: transparent !important; } .nav-sidebar .nav-link:hover, .nav-sidebar > li > a:hover, .nav-pills > li > a:hover { color: var(--td-text-color-primary) !important; background: var(--td-brand-color-light) !important; } .nav-sidebar .nav-link.active, .nav-sidebar > li.active > a, .nav-pills > li.active > a { color: var(--td-brand-color) !important; background: var(--td-brand-color-light) !important; font-weight: 500 !important; } /* 卡片和面板 */ .card, .panel { background: var(--td-bg-color-container) !important; border: 1px solid var(--td-border-color) !important; border-radius: var(--td-border-radius-medium) !important; box-shadow: var(--td-shadow-1); margin-bottom: 16px; } .card-header, .panel-heading { background: transparent !important; border-bottom: 1px solid var(--td-border-color) !important; color: var(--td-text-color-primary) !important; font-weight: 600; font-size: 16px; padding: 16px !important; } /* 表格 */ .table { color: var(--td-text-color-primary) !important; font-size: 14px; border-collapse: separate; border-spacing: 0; } .table thead th { background: var(--td-bg-color-container-hover) !important; border: none !important; color: var(--td-text-color-secondary) !important; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 16px !important; height: 48px; } .table thead th:first-child { border-top-left-radius: var(--td-border-radius); } .table thead th:last-child { border-top-right-radius: var(--td-border-radius); } .table tbody tr { background: transparent !important; border-bottom: 1px solid var(--td-border-color-light) !important; transition: background-color 0.2s ease; } .table tbody tr:hover { background: var(--td-brand-color-light) !important; } .table tbody tr:last-child { border-bottom: none !important; } .table td { border: none !important; color: var(--td-text-color-primary) !important; padding: 16px !important; vertical-align: middle; } .table th { border: none !important; } /* 表单 */ .form-control { background: var(--td-bg-color-container) !important; border: 1px solid var(--td-border-color) !important; color: var(--td-text-color-primary) !important; border-radius: var(--td-border-radius) !important; padding: 8px 12px !important; font-size: 14px; line-height: 22px; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .form-control:focus { background: var(--td-bg-color-container) !important; border-color: var(--td-brand-color) !important; box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1) !important; outline: none; } .form-control::placeholder { color: var(--td-text-color-placeholder) !important; } .form-label, label { color: var(--td-text-color-primary) !important; font-weight: 500; font-size: 14px; margin-bottom: 8px; } .form-text { color: var(--td-text-color-secondary) !important; font-size: 12px; } /* 按钮 */ .btn { border-radius: var(--td-border-radius) !important; font-size: 14px; font-weight: 500; padding: 8px 16px !important; line-height: 22px; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); border: none; } .btn-primary { background: var(--td-brand-color) !important; color: #FFFFFF !important; box-shadow: 0 2px 4px rgba(0, 82, 217, 0.2); } .btn-primary:hover { background: var(--td-brand-color-hover) !important; box-shadow: 0 4px 8px rgba(0, 82, 217, 0.3); transform: translateY(-1px); } .btn-primary:active { background: var(--td-brand-color-active) !important; transform: translateY(0); } .btn-success { background: var(--td-success-color) !important; color: #FFFFFF !important; } .btn-warning { background: var(--td-warning-color) !important; color: #FFFFFF !important; } .btn-danger { background: var(--td-error-color) !important; color: #FFFFFF !important; } .btn-info { background: #029CD4 !important; color: #FFFFFF !important; } .btn-secondary, .btn-default { background: #FFFFFF !important; border: 1px solid var(--td-border-color) !important; color: var(--td-text-color-primary) !important; } .btn-secondary:hover, .btn-default:hover { background: var(--td-bg-color-container-hover) !important; border-color: var(--td-border-color) !important; } /* 模态框 */ .modal-content { background: var(--td-bg-color-container) !important; border: 1px solid var(--td-border-color) !important; border-radius: var(--td-border-radius-medium) !important; box-shadow: var(--td-shadow-2); } .modal-header { border-bottom: 1px solid var(--td-border-color) !important; padding: 20px 24px; } .modal-title { color: var(--td-text-color-primary) !important; font-size: 18px; font-weight: 600; } .modal-body { padding: 24px; } .modal-footer { border-top: 1px solid var(--td-border-color) !important; padding: 16px 24px; } /* 分页 */ .pagination { gap: 4px; } .pagination .page-link { background: var(--td-bg-color-container) !important; border: 1px solid var(--td-border-color) !important; color: var(--td-text-color-primary) !important; border-radius: var(--td-border-radius) !important; padding: 6px 12px; margin: 0; transition: all 0.2s ease; } .pagination .page-link:hover { background: var(--td-brand-color-light) !important; border-color: var(--td-brand-color) !important; color: var(--td-brand-color) !important; } .pagination .page-item.active .page-link { background: var(--td-brand-color) !important; border-color: var(--td-brand-color) !important; color: #FFFFFF !important; } .pagination .page-item.disabled .page-link { background: var(--td-bg-color-container) !important; border-color: var(--td-border-color) !important; color: var(--td-text-color-placeholder) !important; cursor: not-allowed; } /* 警告框 */ .alert { border-radius: var(--td-border-radius-medium) !important; border: none !important; padding: 12px 16px; font-size: 14px; } .alert-success { background: rgba(0, 168, 112, 0.1) !important; color: #00A870 !important; } .alert-danger { background: rgba(213, 73, 65, 0.1) !important; color: #D54941 !important; } .alert-info { background: rgba(2, 156, 212, 0.1) !important; color: #029CD4 !important; } .alert-warning { background: rgba(227, 115, 24, 0.1) !important; color: #E37318 !important; } /* 链接 */ a { color: var(--td-brand-color) !important; text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--td-brand-color-hover) !important; } /* 文本颜色 */ .text-muted { color: var(--td-text-color-secondary) !important; } /* 输入组 */ .input-group-text { background: var(--td-bg-color-container-hover) !important; border: 1px solid var(--td-border-color) !important; color: var(--td-text-color-secondary) !important; } /* Select2 下拉框 */ .select2-container--bootstrap4 .select2-selection { background: var(--td-bg-color-container) !important; border: 1px solid var(--td-border-color) !important; color: var(--td-text-color-primary) !important; border-radius: var(--td-border-radius) !important; } .select2-dropdown { background: var(--td-bg-color-container) !important; border: 1px solid var(--td-border-color) !important; border-radius: var(--td-border-radius-medium) !important; box-shadow: var(--td-shadow-2); } .select2-results__option { color: var(--td-text-color-primary) !important; padding: 8px 12px; } .select2-results__option--highlighted { background: var(--td-brand-color-light) !important; color: var(--td-brand-color) !important; } /* 徽章 */ .badge { border-radius: 2px !important; font-size: 12px; font-weight: 500; padding: 2px 8px; } .badge-primary { background: var(--td-brand-color) !important; color: #FFFFFF !important; } .badge-success { background: var(--td-success-color) !important; color: #FFFFFF !important; } .badge-warning { background: var(--td-warning-color) !important; color: #FFFFFF !important; } .badge-danger { background: var(--td-error-color) !important; color: #FFFFFF !important; } .badge-secondary { background: var(--td-bg-color-container-hover) !important; color: var(--td-text-color-secondary) !important; } /* 进度条 */ .progress { background: var(--td-bg-color-container-hover) !important; border-radius: 2px !important; height: 8px; } .progress-bar { background: var(--td-brand-color) !important; } /* 复选框和单选框 */ .form-check-input { background-color: var(--td-bg-color-container) !important; border: 1px solid var(--td-border-color) !important; } .form-check-input:checked { background-color: var(--td-brand-color) !important; border-color: var(--td-brand-color) !important; } .form-check-input:focus { box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1) !important; } /* 自定义滚动条 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--td-bg-color-page); } ::-webkit-scrollbar-thumb { background: var(--td-border-color); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--td-text-color-placeholder); } /* 工具提示 */ .tooltip-inner { background: var(--td-text-color-primary) !important; color: #FFFFFF !important; border-radius: var(--td-border-radius) !important; padding: 6px 12px; font-size: 12px; } /* 面包屑 */ .breadcrumb { background: transparent !important; padding: 0; margin-bottom: 16px; } .breadcrumb-item { color: var(--td-text-color-secondary) !important; font-size: 14px; } .breadcrumb-item.active { color: var(--td-text-color-primary) !important; } .breadcrumb-item + .breadcrumb-item::before { color: var(--td-text-color-placeholder) !important; } /* 标签页 */ .nav-tabs { border-bottom: 1px solid var(--td-border-color) !important; } .nav-tabs .nav-link { border: none !important; color: var(--td-text-color-secondary) !important; padding: 12px 24px; margin-bottom: -1px; border-bottom: 2px solid transparent; } .nav-tabs .nav-link:hover { color: var(--td-text-color-primary) !important; border-bottom-color: var(--td-border-color) !important; } .nav-tabs .nav-link.active { color: var(--td-brand-color) !important; background: transparent !important; border-bottom-color: var(--td-brand-color) !important; } /* 下拉菜单 */ .dropdown-menu { background: var(--td-bg-color-container) !important; border: 1px solid var(--td-border-color) !important; border-radius: var(--td-border-radius-medium) !important; box-shadow: var(--td-shadow-2); } .dropdown-item { color: var(--td-text-color-primary) !important; padding: 8px 16px; font-size: 14px; } .dropdown-item:hover { background: var(--td-brand-color-light) !important; color: var(--td-brand-color) !important; } /* 表格操作按钮 */ .table .btn-sm { padding: 4px 12px !important; font-size: 12px; } /* 空状态 */ .empty-state { text-align: center; padding: 48px 24px; color: var(--td-text-color-secondary); } .empty-state-icon { font-size: 48px; color: var(--td-text-color-placeholder); margin-bottom: 16px; } /* 加载状态 */ .spinner-border { border-color: var(--td-brand-color); border-right-color: transparent; } /* 响应式优化 */ @media (max-width: 768px) { .table { font-size: 12px; } .table td, .table th { padding: 8px !important; } }