PNG: Update styling; slightly usable now

public/common/global.css

@@ -1,3 +1,24 @@
+:root {
+    --foreground-color: #111;
+    --background-color: #fff;
+    --activated-color: #333;
+    --tree-border-color: #ccc;
+    --tree-activated-border-color: #000;
+    --button-color: #fff;
+    --button-background-color: #495;
+    --button-background-color-hover: limegreen;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --foreground-color: #f0f0f0;
+        --background-color: #222;
+        --activated-color: #ddd;
+        --tree-border-color: #444;
+        --tree-activated-border-color: #fff;
+    }
+}
+
 * {
     box-sizing: border-box;
 }
@@ -6,12 +27,15 @@ html {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-size: 18pt;
     line-height: 1.5em;
+    color: var(--foreground-color);
+    background: var(--background-color);
 }
 
 a {
-    color: mediumblue;
+    color: inherit;
 }
 
-input, textarea {
+input,
+textarea {
     font: inherit;
 }

public/png/png.css

@@ -0,0 +1,87 @@
+#explorer {
+    display: flex;
+    overflow: hidden;
+}
+
+#explorer .bytes {
+    max-width: 15em;
+    font-family: Inconsolata, Consolas, Monaco, monospace;
+    font-size: 80%;
+    line-height: 1.5em;
+    white-space: pre-wrap;
+}
+
+#explorer .bytes span {
+    cursor: pointer;
+}
+
+#explorer .bytes span.activated {
+    background: var(--activated-color);
+    color: var(--background-color);
+}
+
+#explorer .tree {
+    padding-left: 0.5rem;
+    scrollbar-gutter: stable;
+}
+
+#explorer .tree details.activated {
+    outline-width: 3px;
+    outline-color: var(--tree-activated-border-color);
+}
+
+#explorer .tree details {
+    outline: 1px solid var(--tree-border-color);
+    border-radius: 10px;
+    padding: 0 0.5rem 0 0.5rem;
+    transition: outline ease-out 0.1s;
+    margin: 3px 3px 0.5rem 3px;
+}
+
+#explorer .tree details[open] {
+    padding-bottom: 6px;
+}
+
+#explorer .tree details p:last-child {
+    margin-bottom: 0;
+}
+
+#explorer .tree details .children {
+    margin-left: 0.5rem;
+}
+
+#explorer .tree details summary {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+}
+
+#explorer .tree details summary:before {
+    content: "▶";
+    margin-right: 0.2em;
+    transition: transform ease-out 0.1s;
+}
+
+#explorer .tree details[open]>summary:before {
+    transform: rotate(90deg);
+}
+
+#explorer .tree details summary:focus {
+    outline: none;
+}
+
+#explorer .tree details summary .title {
+    flex: 1;
+    font-weight: bold;
+}
+
+#explorer .tree details summary .bytecount {
+    margin-left: 0.5em;
+    font-size: 75%;
+    opacity: 0.5;
+}
+
+#explorer .tree details:not(.activated) {
+    background: var(--background-color);
+    color: var(--foreground-color);
+}

public/png/png.js

@@ -32,7 +32,7 @@ class Explorer {
       const description = "TODO: Description";
       const nodeTreeEl = crel(
         "details",
-        { "data-path": path, open: isRoot },
+        { "data-path": path, ...(isRoot ? { open: "open" } : {}) },
         crel(
           "summary",
           {},
@@ -53,6 +53,7 @@ class Explorer {
             child,
             path.concat(index),
           );
+          if (index > 0) nodeBytesEl.append(" ");
           nodeBytesEl.append(childBytesEl);
           treeChildrenEl.append(childTreeEl);
         });
@@ -61,7 +62,7 @@ class Explorer {
         // TODO: Update this formatting
         nodeBytesEl.innerHTML = [...node.bytes].map((b) =>
           b.toString(16).padStart(2, "0")
-        ).join("");
+        ).join(" ");
       }
 
       return [nodeBytesEl, nodeTreeEl];