Allow positioning backdrop below navigation bar

Introduce --widget-margin-top-min and --widget-margin-top-max CSS
variables that widgets can set to indicate how much space they occupy
at the top of the viewport. Use these to offset sticky backdrops and
adjust full height sections accordingly.

REDMINE-21204

Author: tf

entry_types/scrolled/package/src/frontend/Foreground.module.css

@@ -10,7 +10,7 @@
   flex-direction: column;
   justify-content: center;
 
-  padding-top: calc(var(--foreground-widget-padding-top) + var(--foreground-padding-top));
+  padding-top: calc(var(--foreground-widget-padding-top, 0px) + var(--foreground-padding-top));
   padding-bottom: var(--foreground-padding-bottom);
 }
 
@@ -19,7 +19,13 @@
 }
 
 .fullHeight {
-  min-height: 100vh;
+  /* First sections set --foreground-widget-padding-top to make room
+     for the widget, so the terms cancel out to 100vh. Other sections
+     leave it undefined, causing the fallback to --widget-margin-top-min
+     to reduce the height to fit below the navigation widget. */
+  min-height: calc(100vh +
+                   var(--foreground-widget-padding-top, 0px) -
+                   var(--foreground-widget-padding-top, var(--widget-margin-top-min, 0px)));
 }
 
 .spaceAbove {

entry_types/scrolled/package/src/frontend/Fullscreen.module.css

@@ -1,6 +1,6 @@
 .root {
   width: 100%;
-  height: calc(100 * var(--vh));
+  height: calc((100 * var(--vh)) - var(--widget-margin-top-min, 0px));
   position: relative;
   overflow: clip;
 }

entry_types/scrolled/package/src/frontend/Section.module.css

@@ -35,15 +35,15 @@
   --centered-inline-xl-content-max-width:
     var(--theme-centered-inline-xl-content-max-width);
 
-  --foreground-widget-padding-top: 0px;
   --foreground-padding-top: var(--theme-section-default-padding-top);
   --foreground-padding-bottom: var(--theme-section-default-padding-bottom);
 }
 
 .first {
   /* Let content begin below navigation bar. Navigation bar has zero
      height to let first chapter start at the very top. */
-  --foreground-widget-padding-top: var(--theme-widget-margin-top, 58px);
+  --foreground-widget-padding-top: var(--widget-margin-top-max,
+                                       var(--theme-widget-margin-top, 0px));
 }
 
 .narrow {

entry_types/scrolled/package/src/frontend/inlineEditing/PaddingIndicator.module.css

@@ -36,7 +36,7 @@
 
 .indicator-top {
   composes: indicator;
-  top: var(--foreground-widget-padding-top);
+  top: var(--foreground-widget-padding-top, 0px);
   height: var(--foreground-padding-top, space(12));
 }
 

entry_types/scrolled/package/src/frontend/inlineEditing/SectionDecorator.module.css

@@ -6,7 +6,7 @@ section::before {
   content: "";
   display: block;
   position: absolute;
-  top: calc(6px + var(--foreground-widget-padding-top));
+  top: calc(6px + var(--foreground-widget-padding-top, 0px));
   left: 6px;
   right: 6px;
   bottom: 6px;

entry_types/scrolled/package/src/frontend/transitions/scrollInConceal.module.css

@@ -1,5 +1,5 @@
 .backdrop {
   position: sticky;
-  top: 0;
+  top: var(--widget-margin-top-min, 0px);
   height: 0;
 }

entry_types/scrolled/package/src/frontend/transitions/scrollInFadeOut.module.css

@@ -2,7 +2,7 @@
 
 .backdrop {
   position: sticky;
-  top: 0;
+  top: var(--widget-margin-top-min, 0px);
   height: 0;
 }
 

entry_types/scrolled/package/src/frontend/transitions/scrollInFadeOutBg.module.css

@@ -2,7 +2,7 @@
 
 .backdrop {
   position: sticky;
-  top: 0;
+  top: var(--widget-margin-top-min, 0px);
   height: 0;
 }
 

entry_types/scrolled/package/src/frontend/transitions/scrollInScrollOut.module.css

@@ -6,6 +6,6 @@
 
 .backdropInner {
   position: sticky;
-  top: 0;
-  height: calc(100 * var(--vh));
+  top: var(--widget-margin-top-min, 0px);
+  height: calc((100 * var(--vh)) - var(--widget-margin-top-min, 0px));
 }

entry_types/scrolled/package/src/frontend/transitions/shared.module.css

@@ -1,6 +1,7 @@
 .fixed {
   position: fixed;
-  top: var(--fixed-positioning-containing-block-offset, 0);
+  top: calc(var(--fixed-positioning-containing-block-offset, 0px) +
+            var(--widget-margin-top-min, 0px));
   height: 100vh;
   width: 100%;
 }