97 lines
2.5 KiB
CSS
97 lines
2.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-dark-950 text-gray-100 antialiased;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.btn-primary {
|
|
@apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-dark-900 disabled:opacity-50 disabled:cursor-not-allowed;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-dark-700 hover:bg-dark-600 text-gray-200 font-medium py-2 px-4 rounded-lg transition-colors duration-200 border border-dark-600 focus:outline-none focus:ring-2 focus:ring-dark-500 focus:ring-offset-2 focus:ring-offset-dark-900;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-dark-800 border border-dark-700 rounded-xl shadow-lg;
|
|
}
|
|
|
|
.input-field {
|
|
@apply w-full bg-dark-700 border border-dark-600 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200;
|
|
}
|
|
|
|
.status-badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
|
|
.status-online {
|
|
@apply status-badge bg-emerald-500/20 text-emerald-400 border border-emerald-500/30;
|
|
}
|
|
|
|
.status-offline {
|
|
@apply status-badge bg-gray-500/20 text-gray-400 border border-gray-500/30;
|
|
}
|
|
|
|
.status-error {
|
|
@apply status-badge bg-red-500/20 text-red-400 border border-red-500/30;
|
|
}
|
|
|
|
.status-warning {
|
|
@apply status-badge bg-amber-500/20 text-amber-400 border border-amber-500/30;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-dark-900;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-dark-600 rounded-full;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-dark-500;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.animate-pulse-dot {
|
|
animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
/* Log viewer */
|
|
.log-viewer {
|
|
@apply font-mono text-sm leading-relaxed whitespace-pre-wrap break-all;
|
|
}
|
|
|
|
.log-viewer .log-timestamp {
|
|
@apply text-gray-500;
|
|
}
|
|
|
|
.log-viewer .log-error {
|
|
@apply text-red-400;
|
|
}
|
|
|
|
.log-viewer .log-success {
|
|
@apply text-emerald-400;
|
|
}
|