...

pkg/servers/ui/static/css/jobs.css

@@ -0,0 +1,167 @@
+/* Job Management UI Styles */
+
+/* Tree View Styles */
+.job-tree {
+    font-size: 0.9rem;
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.circle-node, .topic-node {
+    margin-bottom: 8px;
+}
+
+.circle-header, .topic-header {
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    transition: background-color 0.2s;
+}
+
+.circle-header:hover, .topic-header:hover {
+    background-color: #f0f0f0;
+}
+
+.circle-name, .topic-name {
+    margin-left: 8px;
+    font-weight: 500;
+}
+
+.badge {
+    margin-left: 8px;
+}
+
+.job-node {
+    padding: 5px 0;
+}
+
+.job-link {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.job-link:hover {
+    background-color: #f0f0f0;
+}
+
+.rotate-90 {
+    transform: rotate(90deg);
+    transition: transform 0.2s;
+}
+
+.topics-container, .jobs-container {
+    padding-top: 8px;
+    padding-left: 8px;
+}
+
+/* Status Colors */
+.status-new {
+    color: #0d6efd;
+}
+
+.status-active {
+    color: #ffc107;
+}
+
+.status-done {
+    color: #198754;
+}
+
+.status-error {
+    color: #dc3545;
+}
+
+/* Job Details Page */
+.job-details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.job-details-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+pre.error-message {
+    background-color: #f8d7da;
+    color: #842029;
+    padding: 15px;
+    border-radius: 4px;
+    white-space: pre-wrap;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+pre.result-content {
+    background-color: #d1e7dd;
+    color: #0f5132;
+    padding: 15px;
+    border-radius: 4px;
+    white-space: pre-wrap;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+pre.params-content {
+    background-color: #f8f9fa;
+    padding: 15px;
+    border-radius: 4px;
+    white-space: pre-wrap;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+/* Job Stats Cards */
+.stats-card {
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+}
+
+.stats-card:hover {
+    transform: translateY(-5px);
+}
+
+.stats-card .card-title {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.stats-card .card-text {
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+/* Filter Section */
+.filter-section {
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 20px;
+}
+
+.filter-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .job-tree {
+        max-height: 300px;
+    }
+    
+    .stats-card .card-text {
+        font-size: 1.5rem;
+    }
+}