Added background color to code blocks in hovered links

squidfunk · Mar 26, 2022 · 6b91c8d · 6b91c8d
1 parent 71dd84a
commit 6b91c8d
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 8 deletions.
diff --git a/material/assets/stylesheets/main.36ad6006.min.css b/material/assets/stylesheets/main.36ad6006.min.css
diff --git a/material/assets/stylesheets/main.36ad6006.min.css.map b/material/assets/stylesheets/main.36ad6006.min.css.map
diff --git a/material/assets/stylesheets/main.644de097.min.css b/material/assets/stylesheets/main.644de097.min.css
diff --git a/material/assets/stylesheets/main.644de097.min.css.map b/material/assets/stylesheets/main.644de097.min.css.map
diff --git a/material/base.html b/material/base.html
@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.36ad6006.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.644de097.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}">

diff --git a/src/assets/stylesheets/main/_typeset.scss b/src/assets/stylesheets/main/_typeset.scss
@@ -170,6 +170,16 @@ kbd {
     &:focus,
     &:hover {
       color: var(--md-accent-fg-color);
+
+      // Inline code block
+      code {
+        background-color: var(--md-accent-fg-color--transparent);
+      }
+    }
+
+    // Inline code block
+    code {
+      color: currentcolor;
     }
 
     // Show outline for keyboard devices
@@ -200,6 +210,7 @@ kbd {
     background-color: var(--md-code-bg-color);
     border-radius: px2rem(2px);
     box-decoration-break: clone;
+    transition: background-color 125ms;
 
     // Hide outline for pointer devices
     &:not(.focus-visible) {
@@ -208,11 +219,6 @@ kbd {
     }
   }
 
-  // Ensure link color in code blocks
-  a code {
-    color: currentcolor;
-  }
-
   // Unformatted content
   pre {
     position: relative;