cmd/pkgserver: relocate JS tests

cmd/pkgserver/ui_test/lib/ui.scss

@@ -0,0 +1,83 @@
+:root {
+    --bg: #d3d3d3;
+    --fg: black;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #2c2c2c;
+        --fg: ghostwhite;
+    }
+}
+
+html {
+    background-color: var(--bg);
+    color: var(--fg);
+}
+
+h1, p, summary {
+    font-family: sans-serif;
+}
+
+.root {
+    margin: 1rem 0;
+}
+
+details.test-node {
+    margin-left: 1rem;
+    padding: 0.2rem 0.5rem;
+    border-left: 2px dashed var(--fg);
+    > summary {
+        cursor: pointer;
+    }
+    &.success > summary::marker {
+        /*
+         * WebKit only supports color and font-size properties in ::marker [1],
+         * and its ::-webkit-details-marker only supports hiding the marker
+         * entirely [2], contrary to mdn's example [3]; thus, set a color as
+         * a fallback: while it may not be accessible for colorblind
+         * individuals, it's better than no indication of a test's state for
+         * anyone, as that there's no other way to include an indication in the
+         * marker on WebKit.
+         *
+         * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::marker#browser_compatibility
+         * [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary#default_style
+         * [3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary#changing_the_summarys_icon
+         */
+        color: var(--fg);
+        content: url("/testui/success-closed.svg") / "success";
+    }
+    &.success[open] > summary::marker {
+        content: url("/testui/success-open.svg") / "success";
+    }
+    &.failure > summary::marker {
+        color: red;
+        content: url("/testui/failure-closed.svg") / "failure";
+    }
+    &.failure[open] > summary::marker {
+        content: url("/testui/failure-open.svg") / "failure";
+    }
+    &.skip > summary::marker {
+        color: blue;
+        content: url("/testui/skip-closed.svg") / "skip";
+    }
+    &.skip[open] > summary::marker {
+        content: url("/testui/skip-open.svg") / "skip";
+    }
+}
+
+p.test-desc {
+    margin: 0 0 0 1rem;
+    padding: 2px 0;
+    > pre {
+        margin: 0;
+    }
+}
+
+.hidden {
+    display: none;
+}
+
+.italic {
+    font-style: italic;
+}