Styling

ext/bg/js/templates.js

@@ -34,14 +34,25 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
     + container.escapeExpression(((helper = (helper = helpers.expression || (depth0 != null ? depth0.expression : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"expression","hash":{},"data":data}) : helper)))
     + "</div>\n";
 },"5":function(container,depth0,helpers,partials,data) {
-    var helper;
+    var stack1;
 
-  return container.escapeExpression(((helper = (helper = helpers.rules || (depth0 != null ? depth0.rules : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : {},{"name":"rules","hash":{},"data":data}) : helper)))
+  return "<div class=\"rules\">\n"
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : {},(depth0 != null ? depth0.rules : depth0),{"name":"each","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "</div>\n";
+},"6":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return "    "
+    + container.escapeExpression(container.lambda(depth0, depth0))
+    + "\n    "
+    + ((stack1 = helpers.unless.call(depth0 != null ? depth0 : {},(data && data.last),{"name":"unless","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n";
 },"7":function(container,depth0,helpers,partials,data) {
-    return "        <li>"
+    return " &laquo; ";
+},"9":function(container,depth0,helpers,partials,data) {
+    return "        <li><span>"
     + container.escapeExpression(container.lambda(depth0, depth0))
-    + "</li>\n";
+    + "</span></li>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, alias1=depth0 != null ? depth0 : {};
 
@@ -49,7 +60,7 @@ templates['term.html'] = template({"1":function(container,depth0,helpers,partial
     + "\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.rules : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n<div class=\"glossary\">\n    <ol>\n"
-    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(9, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </ol>\n</div>\n";
 },"useData":true});
 })();

ext/fg/css/popup.css

@@ -17,15 +17,31 @@
  */
 
 body {
-    font-family: sans-serif;
-    font-size:   12pt;
+    background-color: #fff;
+    color:            #000;
+    font-family:      sans-serif;
+    font-size:        12pt;
 }
 
 .expression {
     font-family: serif;
     font-size:   18pt;
+    display:     inline-block;
+}
+
+.rules {
+    color:   #777;
+    display: inline-block;
 }
 
 .glossary {
     font-size:   12pt;
 }
+
+li {
+    color: #777;
+}
+
+li span {
+    color: #000;
+}

util/tmpl/term.html

@@ -4,16 +4,19 @@
 <div class="expression">{{expression}}</div>
 {{/if}}
 
+{{#if rules}}
 <div class="rules">
-    {{#if rules}}
-    {{rules}}
-    {{/if}}
+    {{#each rules}}
+    {{.}}
+    {{#unless @last}} &laquo; {{/unless}}
+    {{/each}}
 </div>
+{{/if}}
 
 <div class="glossary">
     <ol>
         {{#each glossary}}
-        <li>{{.}}</li>
+        <li><span>{{.}}</span></li>
         {{/each}}
     </ol>
 </div>