mirror of
https://github.com/RGJorge/ContainerFlow.git
synced 2026-08-03 07:21:42 +02:00
82 lines
1.9 KiB
CSS
82 lines
1.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-node-running: #22c55e;
|
|
--color-node-stopped: #ef4444;
|
|
--color-node-paused: #f59e0b;
|
|
}
|
|
|
|
/* React Flow overrides */
|
|
.react-flow__background {
|
|
background-color: #020617 !important;
|
|
}
|
|
|
|
.react-flow__minimap {
|
|
background-color: #0f172a !important;
|
|
border: 1px solid #1e293b !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.react-flow__controls {
|
|
border: 1px solid #1e293b !important;
|
|
border-radius: 8px !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.react-flow__controls-button {
|
|
background-color: #1e293b !important;
|
|
color: #94a3b8 !important;
|
|
border-bottom: 1px solid #334155 !important;
|
|
}
|
|
|
|
.react-flow__controls-button:hover {
|
|
background-color: #334155 !important;
|
|
}
|
|
|
|
/* Pulse animation for running nodes */
|
|
@keyframes pulse-ring {
|
|
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
|
|
70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
|
|
}
|
|
|
|
.node-pulse-running {
|
|
animation: pulse-ring 2s infinite;
|
|
}
|
|
|
|
/* Flash animations for Docker events */
|
|
@keyframes flash-green {
|
|
0%, 100% { box-shadow: 0 0 0 0 transparent; }
|
|
50% { box-shadow: 0 0 20px 4px rgba(34, 197, 94, 0.6); }
|
|
}
|
|
|
|
@keyframes flash-red {
|
|
0%, 100% { box-shadow: 0 0 0 0 transparent; }
|
|
50% { box-shadow: 0 0 20px 4px rgba(239, 68, 68, 0.6); }
|
|
}
|
|
|
|
@keyframes flash-yellow {
|
|
0%, 100% { box-shadow: 0 0 0 0 transparent; }
|
|
50% { box-shadow: 0 0 20px 4px rgba(245, 158, 11, 0.6); }
|
|
}
|
|
|
|
.flash-start { animation: flash-green 0.6s ease-out; }
|
|
.flash-stop { animation: flash-red 0.6s ease-out; }
|
|
.flash-restart { animation: flash-yellow 0.6s ease-out 2; }
|
|
|
|
/* Log panel slide-up */
|
|
@keyframes slideUp {
|
|
from { transform: translateY(100%); }
|
|
to { transform: translateY(0); }
|
|
}
|
|
|
|
.log-panel {
|
|
animation: slideUp 0.25s ease-out;
|
|
}
|
|
|
|
/* Login animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|