| | |
| | | body { |
| | | margin: 0; |
| | | min-height: 100vh; |
| | | background: #f5f7fa; |
| | | } |
| | | |
| | | /* Status Colors */ |
| | | /* Status Colors - Element Plus */ |
| | | .status-stopped { |
| | | border-left: 4px solid #6c757d; |
| | | border-left: 4px solid #909399; |
| | | } |
| | | |
| | | .status-starting { |
| | | border-left: 4px solid #0dcaf0; |
| | | border-left: 4px solid #409eff; |
| | | } |
| | | |
| | | .status-running { |
| | | border-left: 4px solid #198754; |
| | | border-left: 4px solid #67c23a; |
| | | } |
| | | |
| | | .status-stopping { |
| | | border-left: 4px solid #ffc107; |
| | | border-left: 4px solid #e6a23c; |
| | | } |
| | | |
| | | .status-error { |
| | | border-left: 4px solid #dc3545; |
| | | border-left: 4px solid #f56c6c; |
| | | } |
| | | |
| | | /* Loading Spinner Overlay */ |
| | |
| | | } |
| | | |
| | | /* Card hover effect */ |
| | | .card { |
| | | transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; |
| | | .el-card { |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .card:hover { |
| | | .el-card:hover { |
| | | transform: translateY(-2px); |
| | | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| | | } |
| | | |
| | | /* Custom scrollbar */ |
| | |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb { |
| | | background: #888; |
| | | background: #c0c4cc; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb:hover { |
| | | background: #555; |
| | | background: #909399; |
| | | } |