/* 操作日志页面样式 */ .admin-logs { padding: 0; } /* 统计卡片样式 */ .stats-card { border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s; } .stats-card:hover { transform: translateY(-2px); } .stats-card .card-title { font-size: 1.8rem; font-weight: 600; color: #333; margin-bottom: 0.25rem; } .stats-card .card-text { color: #666; font-size: 0.9rem; margin-bottom: 0; } .icon-wrapper { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; } .icon-wrapper.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .icon-wrapper.success { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } .icon-wrapper.warning { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } .icon-wrapper.info { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #333; } /* 表格样式 */ .table th { background-color: #f8f9fa; border-bottom: 2px solid #dee2e6; font-weight: 600; color: #495057; font-size: 0.9rem; } .table td { vertical-align: middle; padding: 1rem 0.75rem; font-size: 0.875rem; } .table-hover tbody tr:hover { background-color: #f8f9fa; } /* 操作类型样式 */ .operation-action { display: inline-block; padding: 0.25rem 0.5rem; background-color: #e9ecef; border-radius: 6px; font-size: 0.8rem; font-weight: 500; color: #495057; } /* 资源类型样式 */ .resource-type { background-color: #d4edda; color: #155724; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.75rem; font-weight: 500; } .resource-id { color: #6c757d; font-size: 0.8rem; margin-left: 0.25rem; } /* 用户代理样式 */ .user-agent-wrapper { max-width: 200px; } .user-agent { display: block; font-size: 0.8rem; color: #6c757d; cursor: help; line-height: 1.2; } /* 徽章样式 */ .badge { font-size: 0.7rem; font-weight: 500; padding: 0.3em 0.6em; } /* 时间显示样式 */ .table td:first-child { white-space: nowrap; min-width: 110px; } .table td:first-child small { font-size: 0.75rem; } /* 空状态样式 */ .empty-state { text-align: center; padding: 3rem 1rem; color: #6c757d; } .empty-state i { font-size: 3rem; margin-bottom: 1rem; color: #dee2e6; } .empty-state div { font-size: 1.1rem; margin-bottom: 0.5rem; } /* 响应式设计 */ @media (max-width: 768px) { .table-responsive { font-size: 0.8rem; } .table th, .table td { padding: 0.75rem 0.5rem; } .stats-card .card-title { font-size: 1.5rem; } .icon-wrapper { width: 40px; height: 40px; font-size: 1.2rem; } .user-agent-wrapper { max-width: 150px; } } /* 筛选表单样式 */ .card .form-label { font-weight: 500; color: #495057; } .form-control:focus, .form-select:focus { border-color: #667eea; box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25); } /* 分页样式 */ .pagination .page-link { color: #667eea; border-color: #dee2e6; } .pagination .page-link:hover { color: #495057; background-color: #f8f9fa; border-color: #dee2e6; } .pagination .page-item.active .page-link { background-color: #667eea; border-color: #667eea; } /* 代码样式 */ code { background-color: #f8f9fa; color: #e83e8c; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.8rem; } /* 表格滚动条样式 */ .table-responsive::-webkit-scrollbar { height: 8px; } .table-responsive::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .table-responsive::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } .table-responsive::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* 卡片头部样式 */ .card-header h5 { color: #333; font-weight: 600; } .card-header small { font-weight: 400; } /* 筛选区域样式 */ .card-body form { margin-bottom: 0; } .card-body .btn { height: 38px; margin-top: 0.5rem; } /* 日志详情样式 */ .log-detail-btn { font-size: 0.8rem; padding: 0.2rem 0.4rem; border-radius: 4px; } /* 操作者信息样式 */ .badge.bg-warning { background-color: #ffc107 !important; color: #212529 !important; } .badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; } /* 分页信息样式 */ .card-footer { padding: 1rem 1.5rem; background-color: #f8f9fa !important; border-top: 1px solid #dee2e6; } /* 加载状态 */ .loading { text-align: center; padding: 2rem; color: #6c757d; } .loading i { font-size: 2rem; margin-bottom: 1rem; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }