/* 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;
|
}
|
|
/* Status Colors */
|
.status-stopped {
|
border-left: 4px solid #6c757d;
|
}
|
|
.status-starting {
|
border-left: 4px solid #0dcaf0;
|
}
|
|
.status-running {
|
border-left: 4px solid #198754;
|
}
|
|
.status-stopping {
|
border-left: 4px solid #ffc107;
|
}
|
|
.status-error {
|
border-left: 4px solid #dc3545;
|
}
|
|
/* 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 */
|
.card {
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
}
|
|
.card:hover {
|
transform: translateY(-2px);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
}
|
|
/* Custom scrollbar */
|
::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
::-webkit-scrollbar-track {
|
background: #f1f1f1;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background: #888;
|
border-radius: 4px;
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
background: #555;
|
}
|
