monoblue: visually highlight source lines when hovering over line numbers
authorAnton Shestakov <av6@dwimlabs.net>
Wed, 14 Oct 2015 22:45:51 +0800
changeset 26668 ceb446439f1d
parent 26667 721274cef774
child 26669 07db7e95c464
monoblue: visually highlight source lines when hovering over line numbers Due to how the line links now reside outside of the source lines, hovering over line numbers doesn't count as hovering over the appropriate source line. It can be worked around by using a "+" css selector. However, it's necessary to reorder the elements and put <a> before <span> (which is actually quite logical). It works without further css tweaks because <a> is already absolute-positioned and so the order doesn't matter visually.
mercurial/templates/monoblue/map
mercurial/templates/static/style-monoblue.css
--- a/mercurial/templates/monoblue/map	Wed Oct 14 22:24:50 2015 +0800
+++ b/mercurial/templates/monoblue/map	Wed Oct 14 22:45:51 2015 +0800
@@ -89,7 +89,7 @@
 filecomparison = filecomparison.tmpl
 filelog = filelog.tmpl
 fileline = '
-  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}">{strip(line|escape, '\r\n')}</span>'
 annotateline = '
   <tr id="{lineid}" class="parity{parity}">
     <td class="linenr">
@@ -102,13 +102,13 @@
     <td class="source">{line|escape}</td>
   </tr>'
 difflineplus = '
-  <span id="{lineid}" class="difflineplus">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}" class="difflineplus">{strip(line|escape, '\r\n')}</span>'
 difflineminus = '
-  <span id="{lineid}" class="difflineminus">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}" class="difflineminus">{strip(line|escape, '\r\n')}</span>'
 difflineat = '
-  <span id="{lineid}" class="difflineat">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}" class="difflineat">{strip(line|escape, '\r\n')}</span>'
 diffline = '
-  <span id="{lineid}">{strip(line|escape, '\r\n')}</span><a href="#{lineid}"></a>'
+  <a href="#{lineid}"></a><span id="{lineid}">{strip(line|escape, '\r\n')}</span>'
 
 comparisonblock ='
   <tbody class="block">
--- a/mercurial/templates/static/style-monoblue.css	Wed Oct 14 22:24:50 2015 +0800
+++ b/mercurial/templates/static/style-monoblue.css	Wed Oct 14 22:45:51 2015 +0800
@@ -300,11 +300,13 @@
     height: 1em;
     padding: 0.15em;
 }
-pre.sourcelines.stripes > :nth-child(4n+1) { background-color: #F1F6F7; }
-pre.sourcelines.stripes > :nth-child(4n+3) { background-color: #FFFFFF; }
-pre.sourcelines.stripes > :nth-child(4n+1):hover,
-pre.sourcelines.stripes > :nth-child(4n+3):hover { background-color: #D5E1E6; }
-tr:target td,
+pre.sourcelines.stripes > :nth-child(4n+2) { background-color: #F1F6F7; }
+pre.sourcelines.stripes > :nth-child(4n+4) { background-color: #FFFFFF; }
+pre.sourcelines.stripes > :nth-child(4n+2):hover,
+pre.sourcelines.stripes > :nth-child(4n+4):hover,
+pre.sourcelines.stripes > :nth-child(4n+1):hover + :nth-child(4n+2),
+pre.sourcelines.stripes > :nth-child(4n+3):hover + :nth-child(4n+4) { background-color: #D5E1E6; }
+
 pre.sourcelines > span:target,
 pre.sourcelines.stripes > span:target {
     background-color: #bfdfff;