More HTML tweaks

- Let the left and right cells have padding so the hover bar looks good.
- Adjust the table left margin so the contents still line up with the
  header.
- Fix the up/down arrows to be correct for the sorting order they
  indicate.

Author: nedbat

coverage/htmlfiles/style.css

@@ -146,19 +146,18 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p .ctxs span { display: block; text-align: right; }
 
 #index { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 0.875em; }
+#index table.index { margin-left: -.5em; }
 #index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }
 @media (prefers-color-scheme: dark) { #index td, #index th { border-color: #333; } }
-#index td.left, #index th.left { padding-left: 0; }
-#index td.right, #index th.right { padding-right: 0; }
 #index td.name, #index th.name { text-align: left; width: auto; }
 #index th { font-style: italic; color: #333; cursor: pointer; }
 @media (prefers-color-scheme: dark) { #index th { color: #ddd; } }
 #index th:hover { background: #eee; }
 @media (prefers-color-scheme: dark) { #index th:hover { background: #333; } }
 #index th.headerSortDown, #index th.headerSortUp { white-space: nowrap; background: #eee; }
 @media (prefers-color-scheme: dark) { #index th.headerSortDown, #index th.headerSortUp { background: #333; } }
-#index th.headerSortDown:after { content: " ↓"; }
-#index th.headerSortUp:after { content: " ↑"; }
+#index th.headerSortDown:after { content: " ↑"; }
+#index th.headerSortUp:after { content: " ↓"; }
 #index td.name a { text-decoration: none; color: inherit; }
 #index tr.total td, #index tr.total_dynamic td { font-weight: bold; border-top: 1px solid #ccc; border-bottom: none; }
 #index tr.file:hover { background: #eee; }

coverage/htmlfiles/style.scss

@@ -576,18 +576,15 @@ $context-panel-color: #aaeeff;
     font-family: $font-normal;
     font-size: 0.875em;
 
+    table.index {
+        margin-left: -.5em;
+    }
     td, th {
         text-align: right;
         width: 5em;
         padding: .25em .5em;
         border-bottom: 1px solid $light-gray2;
         @include border-color-dark($dark-gray2);
-        &.left {
-            padding-left: 0;
-        }
-        &.right {
-            padding-right: 0;
-        }
         &.name {
             text-align: left;
             width: auto;
@@ -608,10 +605,10 @@ $context-panel-color: #aaeeff;
             @include background-dark($dark-gray2);
         }
         &.headerSortDown:after {
-            content: " ↓";
+            content: " ↑";
         }
         &.headerSortUp:after {
-            content: " ↑";
+            content: " ↓";
         }
     }
     td.name a {

tests/gold/html/styled/style.css

@@ -146,19 +146,18 @@ h2.stats { margin-top: .5em; font-size: 1em; }
 #source p .ctxs span { display: block; text-align: right; }
 
 #index { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 0.875em; }
+#index table.index { margin-left: -.5em; }
 #index td, #index th { text-align: right; width: 5em; padding: .25em .5em; border-bottom: 1px solid #eee; }
 @media (prefers-color-scheme: dark) { #index td, #index th { border-color: #333; } }
-#index td.left, #index th.left { padding-left: 0; }
-#index td.right, #index th.right { padding-right: 0; }
 #index td.name, #index th.name { text-align: left; width: auto; }
 #index th { font-style: italic; color: #333; cursor: pointer; }
 @media (prefers-color-scheme: dark) { #index th { color: #ddd; } }
 #index th:hover { background: #eee; }
 @media (prefers-color-scheme: dark) { #index th:hover { background: #333; } }
 #index th.headerSortDown, #index th.headerSortUp { white-space: nowrap; background: #eee; }
 @media (prefers-color-scheme: dark) { #index th.headerSortDown, #index th.headerSortUp { background: #333; } }
-#index th.headerSortDown:after { content: " ↓"; }
-#index th.headerSortUp:after { content: " ↑"; }
+#index th.headerSortDown:after { content: " ↑"; }
+#index th.headerSortUp:after { content: " ↓"; }
 #index td.name a { text-decoration: none; color: inherit; }
 #index tr.total td, #index tr.total_dynamic td { font-weight: bold; border-top: 1px solid #ccc; border-bottom: none; }
 #index tr.file:hover { background: #eee; }