Improved styling

ext/bg/templates.js

@@ -1 +1 @@
-!function(){var a=Handlebars.template,n=Handlebars.templates=Handlebars.templates||{};n["defs.html"]=a({1:function(a,n,s,e,l){var r,i=null!=n?n:{},o=s.helperMissing,p="function",t=a.escapeExpression;return'<div class="yomichan-def">\n    <span class="yomichan-def-expression">'+t((r=null!=(r=s.expression||(null!=n?n.expression:n))?r:o,typeof r===p?r.call(i,{name:"expression",hash:{},data:l}):r))+'</span>\n    <span class="yomichan-def-reading">'+t((r=null!=(r=s.reading||(null!=n?n.reading:n))?r:o,typeof r===p?r.call(i,{name:"reading",hash:{},data:l}):r))+'</span>\n    <span class="yomichan-def-glossary">'+t((r=null!=(r=s.glossary||(null!=n?n.glossary:n))?r:o,typeof r===p?r.call(i,{name:"glossary",hash:{},data:l}):r))+"</span>\n</div>\n"},compiler:[7,">= 4.0.0"],main:function(a,n,s,e,l){var r;return null!=(r=s.each.call(null!=n?n:{},null!=n?n.defs:n,{name:"each",hash:{},fn:a.program(1,l,0),inverse:a.noop,data:l}))?r:""},useData:!0})}();
+!function(){var n=Handlebars.template,a=Handlebars.templates=Handlebars.templates||{};a["defs.html"]=n({1:function(n,a,e,l,s){var i,r,o=null!=a?a:{},d=e.helperMissing,t="function",c=n.escapeExpression;return'<div class="yomichan-def">\n    <div class="yomichan-def-expression">'+c((r=null!=(r=e.expression||(null!=a?a.expression:a))?r:d,typeof r===t?r.call(o,{name:"expression",hash:{},data:s}):r))+"</div>\n"+(null!=(i=e["if"].call(o,null!=a?a.reading:a,{name:"if",hash:{},fn:n.program(2,s,0),inverse:n.noop,data:s}))?i:"")+'    <div class="yomichan-def-glossary">'+c((r=null!=(r=e.glossary||(null!=a?a.glossary:a))?r:d,typeof r===t?r.call(o,{name:"glossary",hash:{},data:s}):r))+"</div>\n</div>\n"},2:function(n,a,e,l,s){var i;return'    <div class="yomichan-def-reading">'+n.escapeExpression((i=null!=(i=e.reading||(null!=a?a.reading:a))?i:e.helperMissing,"function"==typeof i?i.call(null!=a?a:{},{name:"reading",hash:{},data:s}):i))+"</div>\n"},compiler:[7,">= 4.0.0"],main:function(n,a,e,l,s){var i;return null!=(i=e.each.call(null!=a?a:{},null!=a?a.defs:a,{name:"each",hash:{},fn:n.program(1,s,0),inverse:n.noop,data:s}))?i:""},useData:!0})}();

ext/client.css

@@ -20,9 +20,24 @@
     background-color: #fff;
     border:           1px solid #999;
     box-shadow:       0 0 10px rgba(0, 0, 0, .5);
+    max-width:        50em;
     padding:          10px;
     pointer-events:   none;
     position:         fixed;
     width:            auto;
     z-index:          64;
 }
+
+.yomichan-def-expression {
+    float:       left;
+    font-weight: bold;
+}
+
+.yomichan-def-reading {
+    float:       right;
+    font-weight: bold;
+}
+
+.yomichan-def-glossary {
+    clear: both;
+}

ext/client.js

@@ -32,7 +32,7 @@ class Client {
     }
 
     onMouseMove(e) {
-        if (!this.enabled) {
+        if (!this.enabled || !e.shiftKey) {
             return;
         }
 

util/tmpl/defs.html

@@ -1,7 +1,9 @@
 {{#each defs}}
 <div class="yomichan-def">
-    <span class="yomichan-def-expression">{{expression}}</span>
+    <div class="yomichan-def-expression">{{expression}}</div>
-    <span class="yomichan-def-reading">{{reading}}</span>
+    {{#if reading}}
-    <span class="yomichan-def-glossary">{{glossary}}</span>
+    <div class="yomichan-def-reading">{{reading}}</div>
+    {{/if}}
+    <div class="yomichan-def-glossary">{{glossary}}</div>
 </div>
 {{/each}}