|
@@ -2,11 +2,17 @@
|
|
|
--control-bar-height: 44px;
|
|
--control-bar-height: 44px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* html (not body) is the actual scrolling element on desktop, so the
|
|
|
|
|
+ reserved space for the fixed control bar belongs on it: that's the
|
|
|
|
|
+ ancestor position:sticky measures its offsets against. */
|
|
|
|
|
+html {
|
|
|
|
|
+ padding-bottom: var(--control-bar-height);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
body {
|
|
body {
|
|
|
font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
|
|
font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
|
|
|
max-width: 600px;
|
|
max-width: 600px;
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
- padding-bottom: var(--control-bar-height);
|
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
font-size: 1.125em;
|
|
font-size: 1.125em;
|
|
|
color: #333;
|
|
color: #333;
|
|
@@ -19,7 +25,7 @@ body {
|
|
|
html, body {
|
|
html, body {
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
- padding-bottom: 0;
|
|
|
|
|
|
|
+ padding-bottom: 0; /* .sheet-container becomes the scrolling ancestor instead; see below */
|
|
|
}
|
|
}
|
|
|
#app {
|
|
#app {
|
|
|
height: 100%;
|
|
height: 100%;
|
|
@@ -103,11 +109,15 @@ td, th {
|
|
|
z-index: 2;
|
|
z-index: 2;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* Totals row: pinned to the bottom of the viewport, just above the control bar */
|
|
|
|
|
|
|
+/* Totals row: pinned to the bottom of the viewport, just above the control bar.
|
|
|
|
|
+ bottom:0 rests it flush against the scrolling ancestor's own reserved
|
|
|
|
|
+ padding-bottom (html on desktop, .sheet-container on mobile) - deliberately
|
|
|
|
|
+ not an explicit --control-bar-height offset here, so the space is only
|
|
|
|
|
+ ever accounted for once. */
|
|
|
#main-table .totals-row th,
|
|
#main-table .totals-row th,
|
|
|
#main-table .totals-row td {
|
|
#main-table .totals-row td {
|
|
|
position: sticky;
|
|
position: sticky;
|
|
|
- bottom: var(--control-bar-height);
|
|
|
|
|
|
|
+ bottom: 0;
|
|
|
z-index: 1;
|
|
z-index: 1;
|
|
|
background: #e8edf5;
|
|
background: #e8edf5;
|
|
|
border-top: 2px solid #333;
|
|
border-top: 2px solid #333;
|