/* Global Styles */
|
:root {
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
}
|
|
body {
|
margin: 0;
|
min-height: 100vh;
|
background: #f5f7fa;
|
}
|
|
/* Status Colors - Element Plus */
|
.status-stopped {
|
border-left: 4px solid #909399;
|
}
|
|
.status-starting {
|
border-left: 4px solid #409eff;
|
}
|
|
.status-running {
|
border-left: 4px solid #67c23a;
|
}
|
|
.status-stopping {
|
border-left: 4px solid #e6a23c;
|
}
|
|
.status-error {
|
border-left: 4px solid #f56c6c;
|
}
|
|
/* Loading Spinner Overlay */
|
.spinner-overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.5);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 9999;
|
}
|
|
/* Spin icon animation */
|
.spin-icon {
|
animation: spin 1s linear infinite;
|
}
|
|
@keyframes spin {
|
from {
|
transform: rotate(0deg);
|
}
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
|
/* Card hover effect */
|
.el-card {
|
transition: all 0.3s ease;
|
}
|
|
.el-card:hover {
|
transform: translateY(-2px);
|
}
|
|
/* Custom scrollbar */
|
::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #c0c4cc;
|
border-radius: 4px;
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #909399;
|
}
|
