Refine the CSS for the Resource viewer

Signed-off-by: tdruez <tdruez@nexb.com>

Author: tdruez

CHANGELOG.rst

@@ -7,6 +7,7 @@ v34.12.0 (unreleased)
 - Add filtering by label and pipeline in the ``flush-projects`` management command.
   Also, a new ``--dry-run`` option is available to test the filters before applying
   the deletion.
+  https://github.com/aboutcode-org/scancode.io/pull/1690
 
 - Add support for using Package URL (purl) as project input.
   This implementation is based on ``purl2url.get_download_url``.
@@ -17,7 +18,9 @@ v34.12.0 (unreleased)
   This generally means an issue on the MatchCode.io server side.
   https://github.com/aboutcode-org/scancode.io/issues/1665
 
-- Upgrade Ace JS library to latest version 1.42.0.
+- Upgrade Bulma CSS and Ace JS libraries to latest versions.
+  Refine the CSS for the Resource viewer.
+  https://github.com/aboutcode-org/scancode.io/pull/1692
 
 v34.11.0 (2025-05-02)
 ---------------------

scanpipe/templates/scanpipe/includes/resource_file_viewer.html

@@ -40,9 +40,9 @@
       <button id="toggle-fullscreen" class="button is-dark"><i class="fa-solid fa-expand"></i></button>
     </div>
   </div>
-  <div id="detected-data-buttons" class="field has-addons mb-0" style="border-left: lightgrey 1px solid; border-right: lightgrey 1px solid;">
+  <div id="detected-data-buttons" class="field has-addons mb-0">
     {% for key, value in detected_values.items %}
-      <p class="control mb-0" style="border-right: lightgrey 1px solid;">
+      <p class="control mb-0">
         <button class="button is-radiusless" data-type="{{ key }}"{% if not value %} disabled{% endif %}>
           {{ key|title }}
           <span class="tag is-info is-rounded ml-1">{{ value|length }}</span>

scanpipe/templates/scanpipe/resource_detail.html

@@ -7,7 +7,7 @@
   <style>
     #resource-viewer #editor {
       min-height:730px;
-      border: lightgrey 1px solid;
+      border: var(--bulma-grey) 1px solid;
     }
     #resource-viewer .tag {
       height: 1.5em;
@@ -18,6 +18,14 @@
       height: auto;
       padding: 0 .25rem 0 .25rem;
     }
+    #resource-viewer #detected-data-buttons {
+      background-color: var(--bulma-pre-background);
+      border-left: var(--bulma-grey) 1px solid;
+      border-right: var(--bulma-grey) 1px solid;
+    }
+    #resource-viewer #detected-data-buttons p.control {
+      border-right: var(--bulma-grey) 1px solid;
+    }
     .ace_tooltip .ace_icon {display: none;}
     {# Full screen inspired by ace/demo/scrollable-page.html #}
     body.full-screen #resource-viewer {