Browse Source

Add a symbol next to class reference page links

This makes them easier to distinguish from "user manual" page links,
especially in search results.
Hugo Locurcio 4 years ago
parent
commit
13818e3cfd
1 changed files with 14 additions and 0 deletions
  1. 14 0
      _static/css/custom.css

+ 14 - 0
_static/css/custom.css

@@ -31,6 +31,7 @@
     --link-color-active: #105078;
     --link-color-visited: #9b59b6;
     --external-reference-icon: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjk4MGI5Ij48cGF0aCBkPSJtNy41IDcuMXYzLjRoLTZ2LTZoMy40Ii8+PHBhdGggZD0ibTUuNzY1IDFoNS4yMzV2NS4zOWwtMS41NzMgMS41NDctMS4zMS0xLjMxLTIuNzI0IDIuNzIzLTIuNjktMi42ODggMi44MS0yLjgwOC0xLjMxMy0xLjMxeiIvPjwvZz48L3N2Zz4K");
+    --classref-badge-text-color: hsl(0, 0%, 45%);
 
     --hr-color: #e1e4e5;
     --table-row-odd-background-color: #f3f6f6;
@@ -117,6 +118,7 @@
         --link-color-active: #6ad;
         --link-color-visited: #cb99f6;
         --external-reference-icon: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOGNmIj48cGF0aCBkPSJtNy41IDcuMXYzLjRoLTZ2LTZoMy40Ii8+PHBhdGggZD0ibTUuNzY1IDFoNS4yMzV2NS4zOWwtMS41NzMgMS41NDctMS4zMS0xLjMxLTIuNzI0IDIuNzIzLTIuNjktMi42ODggMi44MS0yLjgwOC0xLjMxMy0xLjMxeiIvPjwvZz48L3N2Zz4K");
+        --classref-badge-text-color: hsl(0, 0%, 70%);
 
         --hr-color: #555;
         --table-row-odd-background-color: #3b3e41;
@@ -277,6 +279,18 @@ a.btn:hover {
     padding-right: 13px;
 }
 
+/* Distinguish class reference page links from "user manual" page links with a "ref" badge. */
+a[href*="classes/"]::before {
+    content: "ref";
+    color: var(--classref-badge-text-color);
+    background-color: hsla(0, 0%, 50%, 0.3);
+    font-weight: 700;
+    font-size: 80%;
+    border-radius: 9999px;
+    padding: 0.125rem 0.375rem;
+    margin-right: 0.25rem;
+}
+
 hr,
 #search-results .search li:first-child,
 #search-results .search li {