Slight facelift of data tables

material/base.html

@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.1118c9be.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.75c97395.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.ba0d045b.min.css' | url }}">
@@ -223,7 +223,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.8fb3741f.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.29db7785.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/stylesheets/main/_colors.scss

@@ -90,6 +90,9 @@
     --md-typeset-kbd-accent-color:     hsla(0, 100%, 100%, 1);
     --md-typeset-kbd-border-color:     hsla(0, 0%, 72%, 1);
 
+    // Typeset `table` color shades
+    --md-typeset-table-color:          hsla(0, 0%, 0%, 0.12);
+
     // Admonition color shades
     --md-admonition-fg-color:          var(--md-default-fg-color);
     --md-admonition-bg-color:          var(--md-default-bg-color);

src/assets/stylesheets/main/_typeset.scss

@@ -57,8 +57,9 @@ kbd {
 
 // Icon definitions
 :root {
-  --md-typeset-table--ascending: svg-load("material/arrow-down.svg");
+  --md-typeset-table-sort-icon: svg-load("material/sort.svg");
-  --md-typeset-table--descending: svg-load("material/arrow-up.svg");
+  --md-typeset-table-sort-icon--asc: svg-load("material/sort-ascending.svg");
+  --md-typeset-table-sort-icon--desc: svg-load("material/sort-descending.svg");
 }
 
 // ----------------------------------------------------------------------------
@@ -496,10 +497,8 @@ kbd {
     overflow: auto;
     font-size: px2rem(12.8px);
     background-color: var(--md-default-bg-color);
-    border-radius: px2rem(2px);
+    border: px2rem(1px) solid var(--md-typeset-table-color);
-    box-shadow:
+    border-radius: px2rem(4px);
-      0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
-      0 0           px2rem(1px)  hsla(0, 0%, 0%, 0.1);
     touch-action: auto;
 
     // [print]: Reset display mode so table header wraps when printing
@@ -544,9 +543,8 @@ kbd {
     th {
       min-width: px2rem(100px);
       padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
-      color: var(--md-default-bg-color);
+      font-weight: 700;
       vertical-align: top;
-      background-color: var(--md-default-fg-color--light);
 
       // Links in table headings
       a {
@@ -558,11 +556,11 @@ kbd {
     td {
       padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
       vertical-align: top;
-      border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
+      border-top: px2rem(1px) solid var(--md-typeset-table-color);
     }
 
-    // Table row
+    // Table body row
-    tr {
+    tbody tr {
       transition: background-color 125ms;
 
       // Table row on hover
@@ -570,11 +568,6 @@ kbd {
         background-color: rgba(0, 0, 0, 0.035);
         box-shadow: 0 px2rem(1px) 0 var(--md-default-bg-color) inset;
       }
-
-      // Hide border on first table row
-      &:first-child td {
-        border-top: 0;
-      }
     }
 
     // Text link in table
@@ -594,21 +587,28 @@ kbd {
       height: 1.2em;
       margin-left: 0.5em;
       vertical-align: sub;
+      mask-image: var(--md-typeset-table-sort-icon);
       mask-repeat: no-repeat;
       mask-size: contain;
+      transition: background-color 125ms;
       content: "";
     }
 
+    // Sort ascending
+    &:hover::after {
+      background-color: var(--md-default-fg-color--lighter);
+    }
+
     // Sort ascending
     &[aria-sort="ascending"]::after {
-      background-color: currentColor;
+      background-color: var(--md-default-fg-color--light);
-      mask-image: var(--md-typeset-table--ascending);
+      mask-image: var(--md-typeset-table-sort-icon--asc);
     }
 
     // Sort descending
     &[aria-sort="descending"]::after {
-      background-color: currentColor;
+      background-color: var(--md-default-fg-color--light);
-      mask-image: var(--md-typeset-table--descending);
+      mask-image: var(--md-typeset-table-sort-icon--desc);
     }
   }