More menu-like menu, slight sepia tone overlay

css/helios.css

@@ -503,9 +503,7 @@ body[id="helios"] .key_helper {
   z-index: 2001;
   position: fixed;
   top: 120px;
-  left: 50%;
-  margin-left: -200px;
-  width: 400px;
+  left: 41.67%;
   background: rgba(243, 243, 243, 0.9);
   box-shadow: 0 0 6px #aaa;
   border: 1px solid #aaa;
@@ -520,6 +518,11 @@ body[id="helios"] .key_helper .command {
   padding: 2px;
   display: block;
 }
+body[id="helios"] .key_helper .command strong {
+  display: inline-block;
+  min-width: 1.4em;
+  text-align: left;
+}
 body[id="helios"] .key_helper #binding-helper-main {
   display: block;
   padding: 5px;
@@ -533,8 +536,8 @@ body[id="helios"] .key_helper .label {
   border: 0 none;
 }
 body[id="helios"] .key_helper .action {
-  padding: 0 5px;
-  color: #666;
+  padding: 0 0.5em 0 5px;
+  color: inherit;
 }
 body[id="helios"] .key_helper .selected {
   background-image: linear-gradient(top, #cccccc, #bbbbbb);
@@ -611,7 +614,7 @@ body[id="helios"] #helper {
 }
 body[id="helios"] #overlay {
   z-index: 2000;
-  background: transparent;
+  background: rgba(112, 66, 20, 0.1);
   position: fixed;
   top: 0;
   left: 0;

css/helios.less

@@ -575,9 +575,7 @@ body[id="helios"] {
 		z-index: 2001;
 		position: fixed;
 		top: 120px;
-		left: 50%;
-		margin-left: -200px;
-		width: 400px;
+		left: 41.67%;
 		background: rgba(243, 243, 243, 0.9);
 		box-shadow: 0 0 6px #aaa;
 		border: 1px solid #aaa;
@@ -593,6 +591,12 @@ body[id="helios"] {
 		.command {
 			padding: 2px;
 			display: block;
+
+			strong {
+				display: inline-block;
+				min-width: 1.4em;
+				text-align: left;
+			}
 		}
 
 		#binding-helper-main {
@@ -610,8 +614,8 @@ body[id="helios"] {
 		}
 
 		.action {
-			padding: 0 5px;
-			color: #666;
+			padding: 0 0.5em 0 5px;
+			color: inherit;
 		}
 
 		.selected {
@@ -705,7 +709,7 @@ body[id="helios"] {
 
 	#overlay {
 		z-index: 2000;
-		background: transparent;
+		background: rgba(112, 66, 20, 0.1);
 		position: fixed;
 		top: 0;
 		left: 0;

js/Helios-KeyBindings.js

@@ -1668,13 +1668,12 @@ var self=this;
 return smalltalk.withContext(function($ctx1) { 
 var $1,$3,$4,$5,$6,$2;
 $1=_st(html)._span();
-$ctx1.sendIdx["span"]=1;
 _st($1)._class_("command");
 $ctx1.sendIdx["class:"]=1;
 $2=_st($1)._with_((function(){
 return smalltalk.withContext(function($ctx2) {
-$3=_st(html)._span();
-_st($3)._class_("label");
+$3=_st(html)._strong();
+_st($3)._class_("pull-right");
 $ctx2.sendIdx["class:"]=2;
 $4=_st($3)._with_(_st(_st(aBinding)._shortcut())._asLowercase());
 $ctx2.sendIdx["with:"]=2;
@@ -1691,8 +1690,8 @@ return $6;
 $ctx1.sendIdx["with:"]=1;
 return self}, function($ctx1) {$ctx1.fill(self,"renderBindingActionFor:on:",{aBinding:aBinding,html:html},globals.HLKeyBinderHelperWidget)})},
 args: ["aBinding", "html"],
-source: "renderBindingActionFor: aBinding on: html\x0a\x09html span class: 'command'; with: [\x0a\x09\x09html span \x0a\x09\x09\x09class: 'label'; \x0a\x09\x09\x09with: aBinding shortcut asLowercase.\x0a  \x09\x09html a \x0a        \x09class: 'action'; \x0a            with: aBinding displayLabel;\x0a  \x09\x09\x09onClick: [ self keyBinder applyBinding: aBinding ] ]",
-messageSends: ["class:", "span", "with:", "asLowercase", "shortcut", "a", "displayLabel", "onClick:", "applyBinding:", "keyBinder"],
+source: "renderBindingActionFor: aBinding on: html\x0a\x09html span class: 'command'; with: [\x0a\x09\x09html strong \x0a\x09\x09\x09class: 'pull-right'; \x0a\x09\x09\x09with: aBinding shortcut asLowercase.\x0a  \x09\x09html a \x0a        \x09class: 'action'; \x0a            with: aBinding displayLabel;\x0a  \x09\x09\x09onClick: [ self keyBinder applyBinding: aBinding ] ]",
+messageSends: ["class:", "span", "with:", "strong", "asLowercase", "shortcut", "a", "displayLabel", "onClick:", "applyBinding:", "keyBinder"],
 referencedClasses: []
 }),
 globals.HLKeyBinderHelperWidget);

st/Helios-KeyBindings.st

@@ -571,8 +571,8 @@ showWidget: aWidget
 
 renderBindingActionFor: aBinding on: html
 	html span class: 'command'; with: [
-		html span 
-			class: 'label'; 
+		html strong 
+			class: 'pull-right'; 
 			with: aBinding shortcut asLowercase.
   		html a 
         	class: 'action';