1 files changed, 66 insertions, 13 deletions

diff --git a/docs/glyphs/glyphs.css b/docs/glyphs/glyphs.css
index 636211aa1..c2af47a2d 100644
--- a/docs/glyphs/glyphs.css
+++ b/docs/glyphs/glyphs.css
@@ -1,5 +1,5 @@
-h1 span.glyph-name {}
-h1 span.glyph-name:before {
+h1 .glyph-name {}
+h1 .glyph-name:before {
   content: " / ";
   color: rgba(0,0,0,0.2);
   font-weight:400;
@@ -52,7 +52,7 @@ body.single #glyphs {
   .glyph .names {
     position: absolute;
     left:20px; right:20px; bottom:6px;
-    color:white;
+    color: white;
     text-align: center;
     font-size:1em;
   }
@@ -106,6 +106,10 @@ body.single .intro p {
 #single-info {
   max-width: 500px;
 }
+#single-info a {
+  background-image: none;
+  text-shadow: none;
+}
 #single-info ul {
   list-style: none;
 }
@@ -119,6 +123,9 @@ body.single .intro p {
   font-feature-settings: 'case' 1;
   padding-left:0.3em;
 }
+#single-info .svgFile {
+  font-feature-settings: 'case' 1;
+}
 #single-info .colorMark {
   display:inline-block;
   vertical-align:baseline;
@@ -177,13 +184,17 @@ body.single .row.kerning {
   background: white;
 }
 .kernpair:target, .kernpair.selected {
-  background: rgba(250, 240, 0, 0.9);
+  background: rgba(0, 0, 0, 0.9);
+  /*color: white;*/
+}
+.kernpair:target svg path, .kernpair.selected svg path {
+  fill: white;
 }
 .kernpair:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
 }
-  .kernpair .left, .kernpair .right {
+  .kernpair .g.left, .kernpair .g.right {
     width:100px;
     height:100px;
     /*background:rgba(40,240,90,0.3);*/
@@ -191,16 +202,15 @@ body.single .row.kerning {
     background-repeat: no-repeat;
     opacity:0.8;
   }
-  .kernpair:hover .left, .kernpair:hover .right {
+  .kernpair:hover .g.left, .kernpair:hover .g.right {
     opacity:0.9;
   }
-  .kernpair.selected .left, .kernpair.selected .right {
+  .kernpair.selected .g.left, .kernpair.selected .g.right {
     opacity:1;
   }
-  /*.kernpair .left { background-color:rgba(120,90,140,0.3); }*/
+  /*.kernpair .g.left { background-color:rgba(120,90,140,0.3); }*/
   .kernpair .kern {
     position: absolute;
-    /*background-color: blue;*/
     background-color: rgba(255,0,0,0.1);
     right:0; top:0; bottom:0;
     z-index:9;
@@ -209,7 +219,7 @@ body.single .row.kerning {
     background-color: rgba(36,207,128,0.3);
   }
   .kernpair:hover .kern, .kernpair.selected .kern {
-    background-color: rgba(255,0,0,0.5);
+    background-color: rgba(255,100,100,0.5);
   }
   .kernpair:hover .kern.pos, .kernpair.selected .kern.pos {
     background-color: rgba(36,207,128,0.5);
@@ -219,17 +229,60 @@ body.single .row.kerning {
     white-space: nowrap;
     opacity:0.9;
     height: 20px;
-    right:-8px; bottom:-20px;
+    right:-6px; bottom:-20px;
     z-index:1;
     text-align: center;
     color: rgba(255,0,0,0.8);
     visibility:hidden;
+    pointer-events: none;
+    font-size:11px;
   }
   .kernpair .kern.pos .label {
-    color: rgba(36,207,128,0.8);
+    color: rgba(1,163,88,0.8);
   }
   .kernpair:hover .kern .label,
   .kernpair.selected .kern .label {
     visibility:visible;
   }
+  .kernpair .link {
+    display: flex;
+    justify-content: flex-end;
+    position: absolute;
+    /*background: yellow;*/
+    left:0; right:0; bottom:-22px;
+    height: 20px;
+    padding-top:2px;
+    user-select: none;
+    opacity: 0;
+    z-index:0;
+  }
+  .kernpair:hover .link {
+    opacity: 1;
+  }
+    .kernpair .link a {
+      background: none;
+      box-sizing: border-box;
+      color: rgba(0,0,0,0.2);
+      /*border: 1px solid #aaa;*/
+      text-shadow: none;
+      display: block;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+      width: 16px; /* sync with JS kLinkAWidth */
+      height: 16px;
+      line-height: 14px;
+      padding-top:3px;
+      border-radius: 50%;
+    }
+    .kernpair .link:hover {
+      z-index:999;
+    }
+    .kernpair .link a:hover {
+      color: white;
+      background: #222;
+    }
+  .kernpair.right .link {
+    justify-content: flex-start;
+  }