Add series block styling with dark theme support and enhance highlight effects

atlas/templates/atlas/case_display_block.html

@@ -137,6 +137,31 @@
     .section-icon.history { background:#198754; }
     .section-icon.discussion { background:#fd7e14; }
     .section-icon.report { background:#dc3545; }
+    /* Series block base (Bootstrap-like card appearance) */
+    .series-block {
+        display: inline-block;
+        vertical-align: top;
+        min-width: 180px;
+        max-width: 320px;
+        margin: .25rem;
+        padding: .5rem;
+        border-radius: .375rem;
+        background: #f8f9fa;
+        border: 1px solid rgba(0,0,0,0.06);
+        text-align: left;
+    }
+    /* Also support dark theme when site sets a theme attribute/class */
+    .atlas[data-bs-theme="dark"] .series-block,
+    [data-bs-theme="dark"] .series-block,
+    body[data-bs-theme="dark"] .series-block,
+    body.bg-dark .series-block,
+    .bg-dark .series-block,
+    .dark .series-block,
+    .theme-dark .series-block {
+        background: #071018 !important;
+        border-color: rgba(255,255,255,0.03) !important;
+        color: #e6eef8 !important;
+    }
     .case-metadata { border-left: 1px solid #eee; padding-left: 1rem; text-align:left; }
     .case-meta-item { margin-bottom: .5rem; }
     .case-meta-label { font-weight:600; font-size:0.9rem; display:block; }
@@ -173,6 +198,17 @@
             color: #9ec5ff !important;
             border: 1px solid rgba(255,255,255,0.06);
         }
+        /* Series block dark theme adjustments */
+        .series-block {
+            background: #071018;
+            border-color: rgba(255,255,255,0.03);
+            color: #e6eef8;
+            box-shadow: none;
+        }
+        .series-block a { color: inherit; }
+        .series-block .series-block-series-number { color: #cfe6ff; }
+        .series-block .series-block-popup-link a { color: #9ec5ff; }
+        #case-series-row { gap: .5rem; }
     }
 </style>
 
@@ -1096,18 +1132,12 @@
 </script>
 
 <style>
-    /* Highlight style for the series-block */
+    /* Highlight style for the series-block (subtle Bootstrap-like accent) */
     .highlight-series {
-        background-color: blue;
+        background-color: rgba(13,110,253,0.04);
-        transition: background-color 0.3s ease, border 0.3s ease;
+        border: 1px solid rgba(13,110,253,0.12);
-    }
+        transition: box-shadow 0.18s ease, transform 0.12s ease;
-        /* Make series blocks act as flex items and wrap neatly on small screens */
+        box-shadow: 0 4px 12px rgba(13,110,253,0.04);
-    .series-block {
-        display: inline-block;
-        vertical-align: top;
-        min-width: 180px;
-        max-width: 320px;
-        margin-right: 0.5rem;
     }
     #series-reorder-list .dragging {
         opacity: 0.5;