chore: Sync the vendored UI with upstream antora-ui-default, part 3: CSS stuff (#926)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Edward <edward@encoord.com>
Co-authored-by: Dan Allen <dan@opendevise.com>

Author: 4 people

ui/UPSTREAM

@@ -11,6 +11,12 @@
 # Update the SHA (and this file) whenever upstream changes have been
 # reviewed and ported.
 #
-# Last reviewed: NOT YET RECORDED - the fork predates this marker.
-# Planned: the phase 3 upstream re-sync establishes the first SHA
-# (see ~/dev/stackable/plans/documentation-overhaul.md).
+# Reviewed against: 0e38223a (2026-07-16)
+#
+# Not every upstream commit in that range is present. Some were skipped
+# because the subsystem diverged: the search UI is a custom Pagefind
+# integration, the typefaces come from fontsource, tabs ship from
+# @asciidoctor/tabs, and the highlight.js language set is our own. Others
+# were already present from earlier cherry-picks. `git log -- ui/` carries
+# the upstream authorship and message of each ported commit, so a future
+# re-sync can tell what landed from what did not.

ui/src/css/doc.css

@@ -261,36 +261,36 @@
 .doc .olist,
 .doc .ulist,
 .doc .exampleblock,
+.doc .videoblock,
 .doc .imageblock,
 .doc .listingblock,
 .doc .literalblock,
 .doc .sidebarblock,
 .doc .verseblock,
-.doc .videoblock,
 .doc .quoteblock,
 .doc .partintro,
 .doc details,
 .doc hr {
   margin: 1rem 0 0;
 }
 
-.doc table.tableblock {
-  font-size: calc(15 / var(--rem-base) * 1rem);
-}
-
 .doc table.tableblock,
 .doc table.tableblock + * {
   margin-top: 1.5rem;
 }
 
-.doc table.tableblock pre {
-  font-size: inherit;
+.doc table.tableblock {
+  font-size: calc(15 / var(--rem-base) * 1rem);
 }
 
 .doc p.tableblock + p.tableblock {
   margin-top: 0.5rem;
 }
 
+.doc table.tableblock pre {
+  font-size: inherit;
+}
+
 .doc td.tableblock > .content {
   word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
 }
@@ -407,7 +407,7 @@
   margin-top: 0;
 }
 
-.doc .admonitionblock pre {
+.doc .admonitionblock td.content pre {
   font-size: calc(15 / var(--rem-base) * 1rem);
 }
 
@@ -523,7 +523,8 @@
   margin-top: -0.2em;
 }
 
-.doc .videoblock iframe {
+.doc .videoblock iframe,
+.doc .videoblock video {
   max-width: 100%;
   vertical-align: middle;
 }
@@ -691,23 +692,34 @@
 
 .doc .admonitionblock .title,
 .doc .exampleblock .title,
+.doc .videoblock .title,
 .doc .imageblock .title,
 .doc .literalblock .title,
 .doc .listingblock .title,
 .doc .openblock .title,
-.doc .videoblock .title,
-.doc .tableblock caption {
+.doc table.tableblock caption {
   color: var(--caption-font-color);
   font-size: calc(16 / var(--rem-base) * 1rem);
+  font-style: var(--caption-font-style);
   font-weight: var(--caption-font-weight);
-  font-style: italic;
   hyphens: none;
   letter-spacing: 0.01em;
   padding-bottom: 0.075rem;
+}
+
+.doc table.tableblock caption {
   text-align: left;
 }
 
-.doc .imageblock .title {
+.doc .olist .title,
+.doc .ulist .title {
+  font-style: var(--caption-font-style);
+  font-weight: var(--caption-font-weight);
+  margin-bottom: 0.25rem;
+}
+
+.doc .imageblock .title,
+.doc .videoblock .title {
   margin-top: 0.5rem;
   padding-bottom: 0;
 }
@@ -807,7 +819,7 @@
 }
 
 /* NEEDS REVIEW prevent pre in table from causing article to exceed bounds */
-.doc .tableblock pre,
+.doc table.tableblock pre,
 .doc .listingblock.wrap pre {
   white-space: pre-wrap;
 }

ui/src/css/header.css

@@ -36,6 +36,10 @@ body {
   display: flex;
 }
 
+.navbar-brand .navbar-item {
+  color: var(--navbar-font-color);
+}
+
 .navbar-brand .navbar-item:first-child {
   padding: 0;
 }

ui/src/css/main.css

@@ -1,3 +1,7 @@
+body.-toc aside.toc.sidebar {
+  display: none;
+}
+
 main {
   min-width: 0; /* min-width: 0 required for flexbox to constrain overflowing elements */
 }

ui/src/css/nav.css

@@ -83,6 +83,10 @@
   height: 100%;
 }
 
+.nav-panel-menu:only-child {
+  height: 100%;
+}
+
 .nav-panel-menu:not(.is-active) .nav-menu {
   opacity: 0.75;
 }

ui/src/css/vars.css

@@ -96,6 +96,7 @@
   --admonition-background: var(--panel-background);
   --admonition-label-font-weight: var(--body-font-weight-bold);
   --caption-font-color: var(--color-text);
+  --caption-font-style: italic;
   --caption-font-weight: var(--body-font-weight-bold);
   --code-background: var(--panel-background);
   --code-font-color: var(--body-font-color);