feat: avoid dark-mode-only/light-mode-only for formats display (#44)

* Avoid dark-mode-only/light-mode-only for formats display

* Avoid dark-mode-only/light-mode-only for formats display - should have a flex-wrap too

* Avoid dark-mode-only/light-mode-only for formats display - can be used for icon display too

src/partials/content-layout/cl_result-card.twig

@@ -4,10 +4,7 @@
 >
   <div class='card-body d-flex align-items-start gap-3'>
     {% if icon is defined %}
-      <div class='p-4 fs-2 light-mode-only bg-light-gray me-3'>
-        <i class='d-flex bi bi-{{ icon }}'></i>
-      </div>
-      <div class='p-4 fs-2 dark-mode-only border me-3'>
+      <div class='p-4 fs-2 border border-light-gray bg-light-gray me-3'>
         <i class='d-flex bi bi-{{ icon }}'></i>
       </div>
     {% endif %}
@@ -25,13 +22,9 @@
       <div class='d-flex align-items-center gap-2'>
         <p class='text-muted m-0 fw-semibold'>Formate</p>
 
-        <div class='light-mode-only'>
-          <span class='p-2 fw-semibold bg-light-gray text-uppercase'>ZIP</span>
-          <span class='p-2 fw-semibold bg-light-gray text-uppercase'>JSON</span>
-        </div>
-        <div class='dark-mode-only'>
-          <span class='p-2 fw-semibold border text-uppercase'>ZIP</span>
-          <span class='p-2 fw-semibold border text-uppercase'>JSON</span>
+        <div class='d-flex flex-wrap gap-1'>
+          <span class='p-2 fw-semibold bg-light-gray border border-light-gray text-uppercase'>ZIP</span>
+          <span class='p-2 fw-semibold bg-light-gray border border-light-gray text-uppercase'>JSON</span>
         </div>
       </div>
     </div>

src/styles/themes/default.css

@@ -32,4 +32,8 @@
 
   --border-color: #827d73;
   --header-border-color: #827d73;
+
+  .bg-light-gray {
+    --bg-opacity: 0;
+  }
 }