feat(html): version and timestamp at the top of report files.

This is a re-implementation of pull #1354.

Author: nedbat

coverage/htmlfiles/pyfile.html

@@ -77,6 +77,15 @@ <h2>
             {% endif %}
         </h2>
 
+        <p>
+            <a id="prevFileLink" class="nav" href="{{ prev_html }}">&#xab; prev</a> &nbsp; &nbsp;
+            <a id="indexLink" class="nav" href="index.html">&Hat; index</a> &nbsp; &nbsp;
+            <a id="nextFileLink" class="nav" href="{{ next_html }}">&#xbb; next</a>
+            &nbsp; &nbsp; &nbsp;
+            <a class="nav" href="{{__url__}}">coverage.py v{{__version__}}</a>,
+            created at {{ time_stamp }}
+        </p>
+
         <div style="display: none;">
             <button type="button" class="button_next_chunk" data-shortcut="j">Next highlighted chunk</button>
             <button type="button" class="button_prev_chunk" data-shortcut="k">Previous highlighted chunk</button>
@@ -125,11 +134,10 @@ <h2>
 <footer>
     <div class="content">
         <p>
-            <a id="prevFileLink" class="nav" href="{{ prev_html }}">&#xab; prev file</a> &nbsp; &nbsp;
+            <a id="prevFileLink" class="nav" href="{{ prev_html }}">&#xab; prev</a> &nbsp; &nbsp;
             <a id="indexLink" class="nav" href="index.html">&Hat; index</a> &nbsp; &nbsp;
-            <a id="nextFileLink" class="nav" href="{{ next_html }}">&#xbb; next file</a>
-        </p>
-        <p>
+            <a id="nextFileLink" class="nav" href="{{ next_html }}">&#xbb; next</a>
+            &nbsp; &nbsp; &nbsp;
             <a class="nav" href="{{__url__}}">coverage.py v{{__version__}}</a>,
             created at {{ time_stamp }}
         </p>

coverage/htmlfiles/style.css

@@ -38,9 +38,13 @@ header .content { padding: 1rem 3.5rem; }
 
 header h2 { margin-top: .5em; font-size: 1em; }
 
+header p { margin: .5em 0 -.5em; color: #666; font-style: italic; }
+
+@media (prefers-color-scheme: dark) { header p { color: #aaa; } }
+
 header.sticky { position: fixed; left: 0; right: 0; height: 2.5em; }
 
-header.sticky .text { display: none; }
+header.sticky p, header.sticky .text { display: none; }
 
 header.sticky h1, header.sticky h2 { font-size: 1em; margin-top: 0; display: inline-block; }
 
@@ -52,9 +56,7 @@ header.sticky ~ #source { padding-top: 6.5em; }
 
 main { position: relative; z-index: 1; }
 
-.indexfile footer { margin: 1rem 3.5rem; }
-
-.pyfile footer { margin: 1rem 1rem; }
+footer { margin: 1rem 3.5rem; }
 
 footer .content { padding: 0; color: #666; font-style: italic; }
 

coverage/htmlfiles/style.scss

@@ -174,13 +174,20 @@ header {
         font-size: 1em;
     }
 
+    p {
+        margin: .5em 0 -.5em;
+        color: $light-gray5;
+        @include color-dark($dark-gray5);
+        font-style: italic;
+    }
+
     &.sticky {
         position: fixed;
         left: 0;
         right: 0;
         height: 2.5em;
 
-        .text {
+        p, .text {
             display: none;
         }
 
@@ -208,19 +215,15 @@ main {
     z-index: 1;
 }
 
-.indexfile footer {
+footer {
     margin: 1rem $left-gutter;
-}
 
-.pyfile footer {
-    margin: 1rem 1rem;
-}
-
-footer .content {
-    padding: 0;
-    color: $light-gray5;
-    @include color-dark($dark-gray5);
-    font-style: italic;
+    .content {
+        padding: 0;
+        color: $light-gray5;
+        @include color-dark($dark-gray5);
+        font-style: italic;
+    }
 }
 
 #index {

tests/gold/html/styled/style.css

@@ -38,9 +38,13 @@ header .content { padding: 1rem 3.5rem; }
 
 header h2 { margin-top: .5em; font-size: 1em; }
 
+header p { margin: .5em 0 -.5em; color: #666; font-style: italic; }
+
+@media (prefers-color-scheme: dark) { header p { color: #aaa; } }
+
 header.sticky { position: fixed; left: 0; right: 0; height: 2.5em; }
 
-header.sticky .text { display: none; }
+header.sticky p, header.sticky .text { display: none; }
 
 header.sticky h1, header.sticky h2 { font-size: 1em; margin-top: 0; display: inline-block; }
 
@@ -52,9 +56,7 @@ header.sticky ~ #source { padding-top: 6.5em; }
 
 main { position: relative; z-index: 1; }
 
-.indexfile footer { margin: 1rem 3.5rem; }
-
-.pyfile footer { margin: 1rem 1rem; }
+footer { margin: 1rem 3.5rem; }
 
 footer .content { padding: 0; color: #666; font-style: italic; }