Enhance case description and presentation styles with dark mode support

atlas/templates/atlas/case_display_block.html

@@ -147,6 +147,32 @@
         .case-meta-value { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
         .case-meta-item .badge { display: inline-block; margin-left: .25rem; margin-right: 0; }
         .case-meta-item > .case-meta-value > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    }
+            /* Description & Presentation visual improvements */
+    .case-description { background: #eef3f73d; border: 1px solid rgba(0,0,0,0.08); padding: .75rem; border-radius: .375rem; }
+    .case-description strong { font-size: 1.05rem; margin-right: .5rem; }
+    .case-description .case-inline-field { margin-top: .5rem; }
+
+    .case-presentation ul { list-style: none; padding-left: 0; margin: .25rem 0 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
+    .case-presentation li { background: rgba(13,110,253,0.12); color: #0b5ed7; padding: .25rem .5rem; border-radius: .25rem; font-size: .9rem; }
+    .case-presentation b { margin-right: .5rem; }
+
+            /* Dark mode adjustments */
+    @media (prefers-color-scheme: dark) {
+        .case-description {
+            background: #0f1720;
+            border: 1px solid rgba(255,255,255,0.06);
+            color: #e6eef8;
+        }
+        .case-description strong { color: #ffffff; }
+        .case-description .case-inline-field { color: #e6eef8; }
+        .case-presentation li { background: rgba(255,255,255,0.03); color: #9ec5ff; }
+        .quick-edit-wrap .quick-edit-button,
+        .case-meta-item .quick-edit-button {
+            background: rgba(255,255,255,0.04) !important;
+            color: #9ec5ff !important;
+            border: 1px solid rgba(255,255,255,0.06);
+        }
     }
 </style>
 
@@ -286,11 +312,83 @@
              data-named-stacks='{{case.get_case_named_stacks}}'
         ></div>
     </details>
+    <div class="pre-whitespace multi-image-block"><b>Series:</b>
+        <form>
+            <div class="d-flex flex-wrap gap-2 align-items-start" id="case-series-row">
+                {% partial case-series %}
+            </div>
+        </form>
+        <span>
+            <button type="button"
+                    class="btn btn-info"
+                    onclick="window.location.href='{% url 'atlas:user_uploads_case' case_id=case.pk %}'">
+                Import new uploads
+            </button><br />
+            <details class="series-actions" id="series-actions">
+                <summary>
+                    <button type="button" class="btn btn-primary" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;">
+                        Manage Series
+                    </button>
+                </summary>
+                <a href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a><br />
+                <button hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
+                        title="order dicom by slice location"
+                        hx-target="#series-action-results"
+                        hx-swap="innerHTML"
+                        hx-confirm="This will reorder all case series based upon slice location"
+                >
+                    Order dicoms by slice location
+                </button>
+                <button hx-post="{% url 'atlas:combine_series' %}"
+                        title="merge series"
+                        hx-include="[name='series-ids']"
+                        hx-target="#series-action-results"
+                        hx-swap="innerHTML"
+                        hx-confirm="This will merge all selected series into one"
+                >
+                    Merge selected series
+                </button>
+                <button hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
+                        title="merge series"
+                        hx-include="[name='series-ids']"
+                        hx-target="#series-action-results"
+                        hx-swap="innerHTML"
+                        hx-confirm="This will use the dicom date as the series description"
+                >
+                    Use dates as description
+                </button>
+                <button hx-post="{% url 'atlas:remove_selected_series_from_case' case.pk %}"
+                        title="remove selected series from this case"
+                        hx-include="[name='series-ids']:checked"
+                        hx-target="#series-action-results"
+                        hx-swap="innerHTML"
+                        hx-confirm="Are you sure you want to remove the selected series from this case? They will not be deleted from the database."
+                        class="btn btn-warning mt-2"
+                        type="button"
+                >
+                    Remove selected series from case
+                </button>
+                <button type="button"
+                        class="btn btn-secondary mt-2"
+                        data-bs-toggle="modal"
+                        data-bs-target="#reorderSeriesModal">
+                    Reorder series
+                </button>
+                <br/>
+                <div class="alert alert-info mt-2" id="series-action-alert" style="display:none;">
+                    <span id="series-action-results" ></span>
+                </div>
+            </details>
+
+        </span>
+    </div>
 
     <div class="container">
+
+
         <div class="row g-3 mb-3">
             <div class="col-12 col-md-8">
-                <div class="mb-3">
+                <div class="mb-3 case-description">
                     <div class="d-flex align-items-start justify-content-between quick-edit-wrap">
                         <div class="d-flex align-items-start flex-grow-1">
                             <span class="section-icon description" aria-hidden="true"></span>
@@ -309,7 +407,7 @@
                     </div>
                 </div>
 
-                <div class="mb-3">
+                <div class="mb-3 case-presentation">
                     <p>
                         <span class="section-icon presentation" aria-hidden="true"></span>
                         <b>Presentation:</b>
@@ -461,76 +559,6 @@
         </div>
     </div>
 
-    <div class="pre-whitespace multi-image-block"><b>Series:</b>
-        <form>
-            <div class="d-flex flex-wrap gap-2 align-items-start" id="case-series-row">
-                {% partial case-series %}
-            </div>
-        </form>
-        <span>
-            <button type="button"
-                    class="btn btn-info"
-                    onclick="window.location.href='{% url 'atlas:user_uploads_case' case_id=case.pk %}'">
-                Import new uploads
-            </button><br />
-            <details class="series-actions" id="series-actions">
-                <summary>
-                    <button type="button" class="btn btn-primary" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;">
-                        Manage Series
-                    </button>
-                </summary>
-                <a href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a><br />
-                <button hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
-                        title="order dicom by slice location"
-                        hx-target="#series-action-results"
-                        hx-swap="innerHTML"
-                        hx-confirm="This will reorder all case series based upon slice location"
-                >
-                    Order dicoms by slice location
-                </button>
-                <button hx-post="{% url 'atlas:combine_series' %}"
-                        title="merge series"
-                        hx-include="[name='series-ids']"
-                        hx-target="#series-action-results"
-                        hx-swap="innerHTML"
-                        hx-confirm="This will merge all selected series into one"
-                >
-                    Merge selected series
-                </button>
-                <button hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
-                        title="merge series"
-                        hx-include="[name='series-ids']"
-                        hx-target="#series-action-results"
-                        hx-swap="innerHTML"
-                        hx-confirm="This will use the dicom date as the series description"
-                >
-                    Use dates as description
-                </button>
-                <button hx-post="{% url 'atlas:remove_selected_series_from_case' case.pk %}"
-                        title="remove selected series from this case"
-                        hx-include="[name='series-ids']:checked"
-                        hx-target="#series-action-results"
-                        hx-swap="innerHTML"
-                        hx-confirm="Are you sure you want to remove the selected series from this case? They will not be deleted from the database."
-                        class="btn btn-warning mt-2"
-                        type="button"
-                >
-                    Remove selected series from case
-                </button>
-                <button type="button"
-                        class="btn btn-secondary mt-2"
-                        data-bs-toggle="modal"
-                        data-bs-target="#reorderSeriesModal">
-                    Reorder series
-                </button>
-                <br/>
-                <div class="alert alert-info mt-2" id="series-action-alert" style="display:none;">
-                    <span id="series-action-results" ></span>
-                </div>
-            </details>
-
-        </span>
-    </div>
     {% comment %} <p><b>Scrapped:</b> {{ case.scrapped }} <a
             href="{% url 'atlas:case_scrap' pk=case.pk %}">(toggle)</a> {% endcomment %}