Minimize css a bit and make it better at overriding jupyter defaults (#…

…1311)
stac-utils · Feb 21, 2024 · 717cb1b · 717cb1b
1 parent 679eaff
commit 717cb1b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/pystac/html/JSON.jinja2 b/pystac/html/JSON.jinja2
@@ -3,16 +3,32 @@
 <style>
 .pystac-summary {
     cursor: pointer;
-    display:list-item;
+    display: list-item;
+    list-style: revert;
+    margin-bottom: 0 !important;
+
+    .pystac-l {
+        padding-left: 0.5em;
+        color: rgb(64, 128, 128);
+        font-style: italic;
+    }
+}
+.pystac-row {
+    overflow-wrap: break-word;
+    padding-left: .825em;
+
+    .pystac-k {
+        display: inline-block;
+        margin: 0px 0.5em 0px 0px;
+    }
+    .pystac-v {
+        color: rgb(186, 33, 33);
+    }
 }
-.pystac-key {
+.pystac-k {
     color: rgb(0, 128, 0);
     font-weight: 700;
 }
-.pystac-key-value {
-    display: inline-block;
-    margin: 0px 0.5em 0px 0px;
-}
 </style>
 <div class="jp-RenderedJSON jp-mod-trusted jp-OutputArea-output">
     <div class="container" style="line-height: normal;">

diff --git a/pystac/html/Macros.jinja2 b/pystac/html/Macros.jinja2
@@ -1,23 +1,20 @@
 {% macro scalar(key, value) -%}
     {% if value is mapping %}
         <li><details>
-            <summary class="pystac-summary"><span class="pystac-key">{{ key }}</span></summary>
+            <summary class="pystac-summary"><span class="pystac-k">{{ key }}</span></summary>
             {{ dict(value) }}
         </details></li>
     {% else %}
-        <li style="overflow-wrap: break-word; padding-left: 2.125em; text-indent: -0.5em;">
-            <span class="pystac-key pystac-key-value">{{ key }}</span>
-            <span style="color: rgb(186, 33, 33);">{% if value is string %}"{{ value }}"{% else %}{{ value }}{% endif %}</span>
+        <li class="pystac-row">
+            <span class="pystac-k">{{ key }}</span>
+            <span class="pystac-v">{% if value is string %}"{{ value }}"{% else %}{{ value }}{% endif %}</span>
         </li>
     {% endif %}
 {%- endmacro %}
 
 {% macro list(key, value) -%}
     <li><details>
-        <summary class="pystac-summary">
-            <span class="pystac-key">{{ key }}</span>
-            <span style="padding-left: 0.5em; color: rgb(64, 128, 128); font-style: italic;">[] {{ value|length }} items</span>
-        </summary>
+        <summary class="pystac-summary"><span class="pystac-k">{{ key }}</span><span class="pystac-l">[] {{ value|length }} items</span></summary>
         {% for item in value %}
             {{ dict({loop.index - 1: item}) }}
         {% endfor %}