@rse/specbook 1.2.4 → 1.2.6

package/dst/specbook-export-html.css

@@ -96,6 +96,9 @@ html.theme-light {
   --gradia-color-group-name: var(--theme-color-accent-18);
   --gradia-color-group-box: var(--theme-color-accent-32);
   --gradia-color-group-border: var(--theme-color-accent-26);
+  --gradia-color-container-name: var(--theme-color-base-12);
+  --gradia-color-container-box: var(--theme-color-base-31);
+  --gradia-color-container-border: var(--theme-color-base-24);
   --gradia-color-edge-line: var(--theme-color-base-22);
   --gradia-color-edge-name: var(--theme-color-base-5);
   --gradia-color-edge-arity: var(--theme-color-base-5);
@@ -138,6 +141,9 @@ html.theme-light {
     --gradia-color-group-name: var(--theme-color-accent-15);
     --gradia-color-group-box: var(--theme-color-accent-1);
     --gradia-color-group-border: var(--theme-color-accent-7);
+    --gradia-color-container-name: var(--theme-color-base-24);
+    --gradia-color-container-box: var(--theme-color-base-4);
+    --gradia-color-container-border: var(--theme-color-base-16);
     --gradia-color-edge-line: var(--theme-color-base-20);
     --gradia-color-edge-name: var(--theme-color-base-29);
     --gradia-color-edge-arity: var(--theme-color-base-29);
@@ -395,6 +401,179 @@ div.info-popup.spec a.link-compact::before {
     display: none;
   }
 }
+/*  the folding tab (screen-only): the tab riding right of the brand
+    bar between the search tab and the table of contents tab (as wide
+    as those, fixed independent of the content scrolling), showing a
+    fold icon (drawn like the search icon), which slides the two
+    controls out to the right (and back in), where the tab follows the
+    bar when the table of contents panel shifts it aside; the controls
+    fold and unfold all diagrams and all over-long cell texts of the
+    content at once and carry, like the fold icon itself, the mark
+    colors in a rounded box while anything of their kind is folded  */
+div.fold-switch {
+  position: fixed;
+  top: 10.66rem;
+  left: calc(0.6rem - 1px);
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  border-radius: 0 0.3rem 0.3rem 0;
+  color: var(--theme-color-specbook-background);
+  background-color: var(--theme-color-specbook-accent);
+  transition: left 0.3s ease;
+}
+body:has(nav.toc-panel.open) div.fold-switch {
+  left: calc(31rem - 1px);
+  box-shadow: 0.2rem 0 0.6rem rgba(0,0,0,0.3);
+}
+div.fold-switch div.fold-toggle {
+  padding: 0.65rem 0.1rem;
+  line-height: 0;
+  border-radius: 0 0.3rem 0.3rem 0;
+  cursor: pointer;
+}
+div.fold-switch div.fold-toggle:hover {
+  background-color: var(--theme-color-specbook-accent-soft);
+}
+div.fold-switch svg.fold-icon {
+  width: 1.1rem;
+  height: 1.1rem;
+  padding: 0.25rem;
+  border-radius: 0.3rem;
+  margin-right: 0.15rem;
+}
+div.fold-switch.folded svg.fold-icon {
+  color: var(--theme-color-specbook-mark-text);
+  background-color: var(--theme-color-specbook-mark-back);
+}
+div.fold-switch div.fold-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  overflow: hidden;
+  max-width: 0;
+  padding: 0;
+  transition: max-width 0.3s ease, padding 0.3s ease;
+}
+div.fold-switch.open div.fold-controls {
+  max-width: 6rem;
+  padding: 0 0.5rem 0 0.2rem;
+}
+div.fold-switch div.fold-controls > div {
+  padding: 0.25rem;
+  line-height: 0;
+  border-radius: 0.3rem;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+div.fold-switch div.fold-controls > div:hover {
+  background-color: var(--theme-color-specbook-accent-soft);
+}
+div.fold-switch div.fold-controls > div.folded {
+  color: var(--theme-color-specbook-mark-text);
+  background-color: var(--theme-color-specbook-mark-back);
+}
+div.fold-switch div.fold-controls svg {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+@media print {
+  div.fold-switch {
+    display: none;
+  }
+}
+/*  the folding of the diagrams and the over-long table cells
+    (screen-only): a diagram sits in a fold container carrying a chevron
+    mark in the muted symbol color of the anchors at its top left corner
+    -- in the page margin beside the content, and in a flex row left of
+    the diagram inside a table cell, where no margin is left -- while an
+    over-long cell carries its own chevron in a rounded grey box behind
+    the last still shown word; a folded diagram leaves the icon of its
+    tab control behind in the muted color, and a running search unfolds
+    everything, so no match hides inside  */
+div.fold {
+  position: relative;
+}
+span.fold-mark,
+span.fold-more {
+  color: var(--theme-color-specbook-symbol);
+  line-height: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+span.fold-mark:hover,
+span.fold-more:hover {
+  color: var(--theme-color-specbook-accent);
+}
+span.fold-mark {
+  position: absolute;
+  top: 0.35rem;
+  left: -1.15rem;
+}
+span.fold-more {
+  display: inline-block;
+  margin-left: 0.2rem;
+  padding: 0.1rem 0.25rem;
+  vertical-align: -0.05em;
+  border: 1px solid var(--theme-color-specbook-border);
+  border-radius: 0.25rem;
+}
+span.fold-more:hover {
+  border-color: var(--theme-color-specbook-accent);
+}
+span.fold-mark svg,
+span.fold-more svg {
+  width: 0.8rem;
+  height: 0.8rem;
+}
+div.fold.folded > span.fold-mark svg,
+td.folded span.fold-more svg {
+  transform: rotate(-90deg);
+}
+span.fold-label {
+  display: none;
+  line-height: 0;
+  margin-bottom: 1rem;
+  color: var(--theme-color-specbook-muted);
+}
+span.fold-label svg {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+@media screen {
+  td div.fold {
+    display: flex;
+    align-items: flex-start;
+  }
+  td div.fold > span.fold-mark {
+    position: static;
+    flex: 0 0 auto;
+    margin: 0.3rem 0.3rem 0 0;
+  }
+  td div.fold > div.diagram {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  body:not(.searching) div.fold.folded > span.fold-label {
+    display: block;
+  }
+  body:not(.searching) td div.fold.folded > span.fold-label {
+    display: block;
+    margin: 0.15rem 0 0 0;
+  }
+  body:not(.searching) div.fold.folded > div.diagram,
+  body:not(.searching) td.folded .fold-rest {
+    display: none;
+  }
+}
+@media print {
+  span.fold-mark,
+  span.fold-more {
+    display: none;
+  }
+}
 /*  the connection status tab of the live preview (screen-only): the
     bottommost tab riding right of the brand bar below the table of
     contents tab (sized like the search tab, fixed independent of the
@@ -406,7 +585,7 @@ div.info-popup.spec a.link-compact::before {
     for 2s (toggling every 250ms) after a content reload  */
 div.realtime-status {
   position: fixed;
-  top: 13.89rem;
+  top: 17.12rem;
   left: calc(0.6rem - 2px);
   z-index: 30;
   padding: 0.65rem 0.1rem;
@@ -506,7 +685,7 @@ div.scroll-progress svg.scroll-icon {
     left of the brand bar and to shift it aside when slid out, with its
     tab (a menu icon drawn like the search icon, as none of the bundled
     fonts carries the U+2630 glyph, and sized like the search tab)
-    riding right of the bar below the search tab  */
+    riding right of the bar below the folding tab  */
 nav.toc-panel {
   position: fixed;
   top: 0;
@@ -536,7 +715,7 @@ nav.toc-panel.open div.toc-tab {
 }
 nav.toc-panel div.toc-tab {
   position: absolute;
-  top: 10.66rem;
+  top: 13.89rem;
   left: calc(100% - 1px);
   padding: 0.9rem 0.35rem;
   line-height: 0;
@@ -930,6 +1109,58 @@ table.objects td section {
 table.objects td section h6 {
   margin: 0.5rem 0 0.25rem 0;
 }
+/*  the reference coverage tables of the coverage-configured objects:
+    the headers like the "Properties" and "Diagram" headers of the
+    compact tables (as they name neither object kinds nor properties),
+    the counts in narrow columns, the ratio as a bar in the accent
+    color over the remaining width, followed by its percentage  */
+table.coverage {
+  border-collapse: collapse;
+  margin: 1rem 0;
+  width: 100%;
+}
+table.coverage th,
+table.coverage td {
+  border: 0;
+  border-left: 1px solid var(--theme-color-specbook-border);
+  padding: 0.3rem 0.6rem;
+  text-align: left;
+  vertical-align: top;
+  white-space: nowrap;
+}
+table.coverage th:first-child,
+table.coverage td:first-child {
+  border-left: 0;
+}
+table.coverage td:first-child {
+  font-weight: 600;
+}
+table.coverage th {
+  background-color: var(--theme-color-specbook-tint);
+  font-weight: normal;
+  color: var(--theme-color-specbook-accent);
+}
+table.coverage tbody tr.even td {
+  background-color: var(--theme-color-specbook-stripe);
+}
+table.coverage th.ratio,
+table.coverage td.ratio {
+  width: 100%;
+}
+table.coverage span.bar {
+  display: inline-block;
+  vertical-align: middle;
+  width: 12rem;
+  height: 0.6rem;
+  border-radius: 0.3rem;
+  background-color: var(--theme-color-specbook-tint-deep);
+  overflow: hidden;
+}
+table.coverage span.bar > span {
+  display: block;
+  height: 100%;
+  background-color: var(--theme-color-specbook-accent);
+}
 /*  the object descriptions and their embedded images  */
 p.description,
 div.description {
@@ -1042,8 +1273,8 @@ div.titlepage table.meta td {
   text-align: left;
 }
 /*  the fuzzy search tab (screen-only): the middle tab riding right of
-    the brand bar between the info tab and the table of
-    contents tab (as wide as those, fixed independent of the content
+    the brand bar between the info tab and the folding
+    tab (as wide as those, fixed independent of the content
     scrolling), showing the search icon, which slides the input field
     and its clear symbol out to the right (and back in), where the tab
     follows the bar when the table of contents panel shifts it aside