Change the styling of inline code and allow links to colorize inline …

…code. Resolves mkdocs#718
jimporter · Dec 12, 2015 · 55e1d0c · 55e1d0c
1 parent 0630c49
commit 55e1d0c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/mkdocs/themes/mkdocs/css/base.css b/mkdocs/themes/mkdocs/css/base.css
@@ -65,7 +65,7 @@ pre, .rst-content tt {
     max-width: 100%;
     background: #fff;
     border: solid 1px #e1e4e5;
-    color: #e74c3c;
+    color: #333;
     overflow-x: auto;
 }
 
@@ -75,9 +75,22 @@ code.code-large, .rst-content tt.code-large {
 
 code {
     padding: 2px 5px;
-    color: #c7254e;
-    background-color: #f9f2f4;
-    font-size: 75%;
+    background: #fff;
+    border: solid 1px #e1e4e5;
+    color: #333;
+}
+
+pre code {
+    background: transparent;
+    border: none;
+}
+
+a code {
+    color: #2FA4E7;
+}
+
+a:hover code, a:focus code {
+    color: #157AB5;
 }
 
 code, kbd, pre, samp  {

diff --git a/mkdocs/themes/readthedocs/css/theme_extra.css b/mkdocs/themes/readthedocs/css/theme_extra.css
@@ -69,6 +69,21 @@ p code {
     word-wrap: break-word;
 }
 
+/*
+ * Fix link colors when the link text is inline code.
+ *
+ * https://github.com/mkdocs/mkdocs/issues/718
+ */
+a code {
+    color: #2980B9;
+}
+a:hover code {
+    color: #3091d1;
+}
+a:visited code {
+    color: #9B59B6;
+}
+
 /*
  * The CSS classes from highlight.js seem to clash with the
  * ReadTheDocs theme causing some code to be incorrectly made