Helios keybinding helper changes:

Going halfway:
- dark key colors
- still centered with a fixed width
- keep the light overlay (grey though), but not for other dialogs

css/helios.css

@@ -530,8 +530,8 @@ body[id="helios"] .key_helper #binding-helper-main {
 body[id="helios"] .key_helper .label {
   padding: 1px 4px;
   font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
-  background: #ddd;
-  color: #08C;
+  background: transparent;
+  color: #0E4561;
   text-shadow: none;
   border: 0 none;
 }
@@ -621,6 +621,9 @@ body[id="helios"] #overlay {
   right: 0;
   bottom: 0;
 }
+body[id="helios"] #overlay.light {
+  background: rgba(50, 50, 50, 0.1);
+}
 body[id="helios"] .confirmation,
 body[id="helios"] .dialog {
   z-index: 2001;

css/helios.less

@@ -607,8 +607,8 @@ body[id="helios"] {
 		.label {
 			padding: 1px 4px;
 			font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
-			background: #ddd;
-			color: #08C;
+			background: transparent;
+			color: #0E4561;
 			text-shadow: none;
 			border: 0 none;
 		}
@@ -715,6 +715,10 @@ body[id="helios"] {
 		left: 0;
 		right: 0;
 		bottom: 0;
+
+		&.light {
+			background: rgba(50, 50, 50, 0.1);
+		}
 	}
 
 	.confirmation, .dialog {

js/Helios-KeyBindings.js

@@ -1673,7 +1673,11 @@ $ctx1.sendIdx["class:"]=1;
 $2=_st($1)._with_((function(){
 return smalltalk.withContext(function($ctx2) {
 $3=_st(html)._strong();
+<<<<<<< Updated upstream
 _st($3)._class_("pull-right");
+=======
+_st($3)._class_("label");
+>>>>>>> Stashed changes
 $ctx2.sendIdx["class:"]=2;
 $4=_st($3)._with_(_st(_st(aBinding)._shortcut())._asLowercase());
 $ctx2.sendIdx["with:"]=2;
@@ -1690,7 +1694,11 @@ return $6;
 $ctx1.sendIdx["with:"]=1;
 return self}, function($ctx1) {$ctx1.fill(self,"renderBindingActionFor:on:",{aBinding:aBinding,html:html},globals.HLKeyBinderHelperWidget)})},
 args: ["aBinding", "html"],
+<<<<<<< Updated upstream
 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 ] ]",
+=======
+source: "renderBindingActionFor: aBinding on: html\x0a\x09html span class: 'command'; with: [\x0a\x09\x09html strong \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 ] ]",
+>>>>>>> Stashed changes
 messageSends: ["class:", "span", "with:", "strong", "asLowercase", "shortcut", "a", "displayLabel", "onClick:", "applyBinding:", "keyBinder"],
 referencedClasses: []
 }),
@@ -1796,6 +1804,8 @@ $1=_st(html)._div();
 $ctx1.sendIdx["div"]=1;
 _st($1)._id_("overlay");
 $ctx1.sendIdx["id:"]=1;
+_st($1)._class_("light");
+$ctx1.sendIdx["class:"]=1;
 $2=_st($1)._onClick_((function(){
 return smalltalk.withContext(function($ctx2) {
 return self._deactivate();
@@ -1819,8 +1829,8 @@ $ctx1.sendIdx["with:"]=1;
 _st(":focus"._asJQuery())._blur();
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},globals.HLKeyBinderHelperWidget)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09html div \x0a\x09\x09id: 'overlay';\x0a\x09\x09onClick: [ self deactivate ].\x0a\x09\x0a\x09html div class: self cssClass; with: [\x0a      \x09self renderLabelOn: html.\x0a\x09\x09html div\x0a\x09\x09\x09id: self mainId;\x0a\x09\x09\x09with: [ self renderSelectedBindingOn: html ].\x0a\x09\x09self renderCloseOn: html ].\x0a\x09\x09\x0a\x09':focus' asJQuery blur",
-messageSends: ["id:", "div", "onClick:", "deactivate", "class:", "cssClass", "with:", "renderLabelOn:", "mainId", "renderSelectedBindingOn:", "renderCloseOn:", "blur", "asJQuery"],
+source: "renderContentOn: html\x0a\x09html div \x0a\x09\x09id: 'overlay';\x0a\x09\x09class: 'light';\x0a\x09\x09onClick: [ self deactivate ].\x0a\x09\x0a\x09html div class: self cssClass; with: [\x0a      \x09self renderLabelOn: html.\x0a\x09\x09html div\x0a\x09\x09\x09id: self mainId;\x0a\x09\x09\x09with: [ self renderSelectedBindingOn: html ].\x0a\x09\x09self renderCloseOn: html ].\x0a\x09\x09\x0a\x09':focus' asJQuery blur",
+messageSends: ["id:", "div", "class:", "onClick:", "deactivate", "cssClass", "with:", "renderLabelOn:", "mainId", "renderSelectedBindingOn:", "renderCloseOn:", "blur", "asJQuery"],
 referencedClasses: []
 }),
 globals.HLKeyBinderHelperWidget);

st/Helios-KeyBindings.st

@@ -572,7 +572,11 @@ showWidget: aWidget
 renderBindingActionFor: aBinding on: html
 	html span class: 'command'; with: [
 		html strong 
+<<<<<<< Updated upstream
 			class: 'pull-right'; 
+=======
+			class: 'label'; 
+>>>>>>> Stashed changes
 			with: aBinding shortcut asLowercase.
   		html a 
         	class: 'action'; 
@@ -607,6 +611,7 @@ renderCog
 renderContentOn: html
 	html div 
 		id: 'overlay';
+		class: 'light';
 		onClick: [ self deactivate ].
 	
 	html div class: self cssClass; with: [